[core] Add exports field to packages

babel.config.js

@@ -74,7 +74,7 @@ module.exports = function getBabelConfig(api) {
     // in webpack config:
     api.env(['regressions']);
 
-  const outFileExtension = '.js';
+  const outFileExtension = useESModules ? '.mjs' : '.js';
 
   /** @type {babel.PluginItem[]} */
   const plugins = [

docs/data/material/customization/typography/ResponsiveFontSizesChart.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-// import of a small, pure module in a private demo
-// bundle size and module duplication is negligible
-// eslint-disable-next-line no-restricted-imports
-import { convertLength } from '@mui/material/styles/cssUtils';
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import {
+  createTheme,
+  responsiveFontSizes,
+  unstable_convertLength as convertLength,
+} from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { LineChart } from '@mui/x-charts';
 

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

@@ -214,50 +214,25 @@ It will perform the following diffs:
 
 The packages published on npm are **transpiled** with [Babel](https://github.com/babel/babel), optimized for performance with the [supported platforms](/material-ui/getting-started/supported-platforms/).
 
-A [modern bundle](#modern-bundle) is also available.
-
-### How to use custom bundles?
-
-:::error
-You are strongly discouraged to:
-
-- Import from any of the custom bundles directly. Do not do this:
-
-  ```js
-  import { Button } from '@mui/material/legacy';
-  ```
-
-  You have no guarantee that the dependencies also use legacy or modern bundles, leading to module duplication in your JavaScript files.
-
-- Import from any of the undocumented files or folders. Do not do this:
-
-  ```js
-  import { Button } from '@mui/material/esm';
-  ```
-
-  You have no guarantee that these imports will continue to work from one version to the next.
+### Modern bundle
 
-  :::
+The modern bundle targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge).
+This can be used to make separate bundles targeting different browsers.
 
-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):
+To use it, configure your bundler's resolve condition names.
+For example, with [Webpack's `resolve.conditionNames`](https://webpack.js.org/configuration/resolve/#resolveconditionnames):
 
-```js
+```js title="webpack.config.js"
 {
+  // ...
   resolve: {
-    alias: {
-      '@mui/material': '@mui/material/legacy',
-      '@mui/styled-engine': '@mui/styled-engine/legacy',
-      '@mui/system': '@mui/system/legacy',
-      '@mui/base': '@mui/base/legacy',
-      '@mui/utils': '@mui/utils/legacy',
-      '@mui/lab': '@mui/lab/legacy',
-    }
+    conditionNames: ['mui-modern', 'import', 'default'];
   }
 }
 ```
 
-### Modern bundle
+Here's the documentation for common bundlers:
 
-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.
+- [Webpack](https://webpack.js.org/configuration/resolve/#resolveconditionnames)
+- [Vite](https://vitejs.dev/config/shared-options.html#resolve-conditions)
+- [ESBuild](https://esbuild.github.io/api/#conditions)

packages/mui-base/package.json

@@ -28,10 +28,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "build:types": "node ../../scripts/buildTypes.mjs",
     "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
     "release": "pnpm build && pnpm publish",

packages/mui-joy/package.json

@@ -26,10 +26,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "build:types": "node ../../scripts/buildTypes.mjs",
     "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
     "release": "pnpm build && pnpm publish",

packages/mui-lab/package.json

@@ -29,10 +29,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "build:types": "node ../../scripts/buildTypes.mjs",
     "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
     "release": "pnpm build && pnpm publish",

packages/mui-material-nextjs/package.json

@@ -25,9 +25,9 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
     "build:copy-files": "node ../../scripts/copyFiles.mjs",
     "build:types": "node ../../scripts/buildTypes.mjs",
     "prebuild": "rimraf build tsconfig.build.tsbuildinfo",

packages/mui-material/package.json

@@ -28,10 +28,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "build:types": "node ../../scripts/buildTypes.mjs",
     "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
     "release": "pnpm build && pnpm publish",

packages/mui-material/src/styles/index.d.ts

@@ -87,7 +87,11 @@ export { ComponentsProps, ComponentsPropsList } from './props';
 export { ComponentsVariants } from './variants';
 export { ComponentsOverrides, ComponentNameToClassKey } from './overrides';
 export { Components } from './components';
-export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
+export {
+  getUnit as unstable_getUnit,
+  toUnitless as unstable_toUnitless,
+  convertLength as unstable_convertLength,
+} from './cssUtils';
 
 export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
 
@@ -102,7 +106,12 @@ export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
-export * from './ThemeProviderWithVars';
+export {
+  useColorScheme,
+  getInitColorSchemeScript,
+  CssVarsProvider,
+  Experimental_CssVarsProvider,
+} from './ThemeProviderWithVars';
 
 export { default as extendTheme } from './createThemeWithVars';
 

packages/mui-material/src/styles/index.js

@@ -29,7 +29,11 @@ export function experimental_sx() {
 export { default as createTheme, createMuiTheme } from './createTheme';
 export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme';
 export { default as createStyles } from './createStyles';
-export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
+export {
+  getUnit as unstable_getUnit,
+  toUnitless as unstable_toUnitless,
+  convertLength as unstable_convertLength,
+} from './cssUtils';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
 export { default as createTransitions, duration, easing } from './createTransitions';
 export { default as createColorScheme } from './createColorScheme';
@@ -45,7 +49,12 @@ export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
-export * from './ThemeProviderWithVars';
+export {
+  useColorScheme,
+  getInitColorSchemeScript,
+  CssVarsProvider,
+  Experimental_CssVarsProvider,
+} from './ThemeProviderWithVars';
 export { default as extendTheme } from './createThemeWithVars';
 export { default as experimental_extendTheme } from './experimental_extendTheme'; // TODO: Remove in v7
 export { default as getOverlayAlpha } from './getOverlayAlpha';

packages/mui-material/src/useAutocomplete/useAutocomplete.js

@@ -1,4 +1,3 @@
-'use client';
 /* eslint-disable no-constant-condition */
 import * as React from 'react';
 import {

packages/mui-material/src/utils/index.js

@@ -1,4 +1,3 @@
-'use client';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/utils';
 
 export { default as capitalize } from './capitalize';

packages/mui-private-theming/package.json

@@ -27,10 +27,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-private-theming/**/*.test.{js,ts,tsx}'",

packages/mui-styled-engine-sc/package.json

@@ -27,10 +27,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styled-engine-sc/**/*.test.{js,ts,tsx}'",

packages/mui-styled-engine/package.json

@@ -27,10 +27,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styled-engine/**/*.test.{js,ts,tsx}'",

packages/mui-styles/package.json

@@ -27,10 +27,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styles/**/*.test.{js,ts,tsx}'",

packages/mui-system/package.json

@@ -27,10 +27,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "build:types": "node ../../scripts/buildTypes.mjs",
     "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
     "release": "pnpm build && pnpm publish",

packages/mui-types/package.json

@@ -49,5 +49,10 @@
     "@types/react": {
       "optional": true
     }
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts"
+    }
   }
 }

packages/mui-utils/package.json

@@ -27,10 +27,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs  --exportFormat exports",
     "build:types": "node ../../scripts/buildTypes.mjs",
     "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
     "release": "pnpm build && pnpm publish",

packages/mui-utils/src/types/index.ts

@@ -0,0 +1 @@
+export * from './types';

scripts/build.mjs

@@ -17,7 +17,7 @@ const validBundles = [
 ];
 
 async function run(argv) {
-  const { bundle, largeFiles, outDir: relativeOutDir, verbose } = argv;
+  const { bundle, exportFormat, largeFiles, outDir: relativeOutDir, verbose } = argv;
 
   if (validBundles.indexOf(bundle) === -1) {
     throw new TypeError(
@@ -29,6 +29,7 @@ async function run(argv) {
     NODE_ENV: 'production',
     BABEL_ENV: bundle,
     MUI_BUILD_VERBOSE: verbose,
+    MUI_ADD_IMPORT_EXTENSIONS: exportFormat === 'exports',
     ...(await getVersionEnvVariables()),
   };
 
@@ -84,6 +85,10 @@ async function run(argv) {
     babelArgs.push('--compact false');
   }
 
+  if (exportFormat === 'exports' && bundle !== 'node') {
+    babelArgs.push('--out-file-extension', '.mjs');
+  }
+
   const command = ['pnpm babel', ...babelArgs].join(' ');
 
   if (verbose) {
@@ -112,6 +117,12 @@ yargs(process.argv.slice(2))
           description: `Valid bundles: "${validBundles.join('" | "')}"`,
           type: 'string',
         })
+        .option('exportFormat', {
+          type: 'string',
+          options: ['exports', 'legacy'],
+          default: 'legacy',
+          describe: 'Set to `exports` to build the package with the `exports` field.',
+        })
         .option('largeFiles', {
           type: 'boolean',
           default: false,