[docs] Add migration guide for package layout changes

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -230,25 +230,20 @@ You are strongly discouraged to:
 
   :::
 
-A great way to use these bundles is to configure bundler aliases, for example with [webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
+A great way to use these bundles is to configure bundler export conditions, for example with [webpack's `resolve.conditionNames`](https://webpack.js.org/configuration/resolve/#resolveconditionnames) or [vite's `resolve.conditions`](https://vite.dev/config/shared-options#resolve-conditions):
 
 ```js
+// webpack.config.js
 {
   resolve: {
-    alias: {
-      '@mui/material': '@mui/material/modern',
-      '@mui/styled-engine': '@mui/styled-engine/modern',
-      '@mui/system': '@mui/system/modern',
-      '@mui/base': '@mui/base/modern',
-      '@mui/utils': '@mui/utils/modern',
-      '@mui/lab': '@mui/lab/modern',
-    }
+    conditionNames: ['mui-modern', '...'],
   }
 }
-```
-
-### Modern bundle
 
-The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/).
-It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge).
-This can be used to make separate bundles targeting different browsers.
+// vite.config.js
+{
+  resolve: {
+    conditions: ['mui-modern', 'module', 'browser', 'development|production']
+  }
+}
+```

docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md

@@ -23,3 +23,48 @@
 This list is a work in progress.
 Expect updates as new breaking changes are introduced.
 :::
+
+### Package layout
+
+The package layout has been updated to use the Node.js exports field. This brings several changes:
+
+Deep imports with more than one level are no longer allowed. For example:
+
+```diff
+- import createTheme from '@mui/material/styles/createTheme';
++ import { createTheme } from '@mui/material/styles';
+```
+
+This was never officially supported, but will now be restricted by bundlers and runtimes.
+
+To use the modern bundle (which excludes legacy browser support for smaller bundle size), you'll need to configure your bundler to use the "mui-modern" exports condition:
+
+```js
+// webpack.config.js
+{
+  resolve: {
+    conditionNames: ['mui-modern', '...'],
+  }
+}
+
+// vite.config.js
+{
+  resolve: {
+    conditions: ['mui-modern', 'module', 'browser', 'development|production']
+  }
+}
+```
+
+If you were using a Vite alias to force ESM imports for the icons package, you should remove it as it's no longer necessary:
+
+```diff
+ // vite.config.js
+   resolve: {
+     alias: [
+-      {
+-        find: /^@mui\/icons-material\/(.*)/,
+-        replacement: "@mui/icons-material/esm/$1",
+-      },
+     ],
+   },
+```

docs/data/system/migration/upgrade-to-v7/upgrade-to-v7.md

@@ -23,3 +23,34 @@
 This list is a work in progress.
 Expect updates as new breaking changes are introduced.
 :::
+
+### Package layout
+
+The package layout has been updated to use the Node.js exports field. This brings several changes:
+
+Deep imports with more than one level are no longer allowed. For example:
+
+```diff
+- import Box from '@mui/system/Box/Box';
++ import Box from '@mui/system/Box';
+```
+
+This was never officially supported, but will now be restricted by bundlers and runtimes.
+
+To use the modern bundle (which excludes legacy browser support for smaller bundle size), you'll need to configure your bundler to use the "mui-modern" exports condition:
+
+```js
+// webpack.config.js
+{
+  resolve: {
+    conditionNames: ['mui-modern', '...'],
+  }
+}
+
+// vite.config.js
+{
+  resolve: {
+    conditions: ['mui-modern', 'module', 'browser', 'development|production']
+  }
+}
+```