@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.11

package/{legacy/styles/experimental_extendTheme.js → modern/styles/extendTheme.js}

@@ -1,27 +1,22 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import deepmerge from '@mui/utils/deepmerge';
 import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
 import { createUnarySpacing } from '@mui/system/spacing';
-import { prepareCssVars } from '@mui/system/cssVars';
+import { prepareCssVars, prepareTypographyVars } from '@mui/system/cssVars';
 import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
 import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, hslToRgb } from '@mui/system/colorManipulator';
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
 import defaultGetSelector from './createGetSelector';
-var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index) {
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
     return undefined;
   }
-  var overlay = getOverlayAlpha(index);
-  return "linear-gradient(rgba(255 255 255 / ".concat(overlay, "), rgba(255 255 255 / ").concat(overlay, "))");
+  const overlay = getOverlayAlpha(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
 });
 function assignNode(obj, keys) {
-  keys.forEach(function (k) {
+  keys.forEach(k => {
     if (!obj[k]) {
       obj[k] = {};
     }
@@ -39,15 +34,15 @@ function toRgb(color) {
   return hslToRgb(color);
 }
 function setColorChannel(obj, key) {
-  if (!("".concat(key, "Channel") in obj)) {
+  if (!(`${key}Channel` in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj["".concat(key, "Channel")] = safeColorChannel(toRgb(obj[key]), "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, for example \"12 12 12\") or undefined if you want to remove the channel token."));
+    obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
 function getSpacingVal(spacingInput) {
   if (typeof spacingInput === 'number') {
-    return "".concat(spacingInput, "px");
+    return `${spacingInput}px`;
   }
   if (typeof spacingInput === 'string') {
     return spacingInput;
@@ -60,7 +55,7 @@ function getSpacingVal(spacingInput) {
   }
   return '8px';
 }
-var silent = function silent(fn) {
+const silent = fn => {
   try {
     return fn();
   } catch (error) {
@@ -68,68 +63,77 @@ var silent = function silent(fn) {
   }
   return undefined;
 };
-export var createGetCssVar = function createGetCssVar() {
-  var cssVarPrefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'mui';
-  return systemCreateGetCssVar(cssVarPrefix);
-};
-export default function extendTheme() {
-  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _options$colorSchemes = options.colorSchemes,
-    colorSchemesInput = _options$colorSchemes === void 0 ? {} : _options$colorSchemes,
-    _options$cssVarPrefix = options.cssVarPrefix,
-    cssVarPrefix = _options$cssVarPrefix === void 0 ? 'mui' : _options$cssVarPrefix,
-    _options$shouldSkipGe = options.shouldSkipGeneratingVar,
-    shouldSkipGeneratingVar = _options$shouldSkipGe === void 0 ? defaultShouldSkipGeneratingVar : _options$shouldSkipGe,
-    getSelector = options.getSelector,
-    input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "getSelector"]);
-  var getCssVar = createGetCssVar(cssVarPrefix);
-  var _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
-      palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
-    })),
-    lightPalette = _createThemeWithoutVa.palette,
-    muiTheme = _objectWithoutProperties(_createThemeWithoutVa, ["palette"]);
-  var _createThemeWithoutVa2 = createThemeWithoutVars({
-      palette: _extends({
-        mode: 'dark'
-      }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
-    }),
-    darkPalette = _createThemeWithoutVa2.palette;
-  var theme = _extends({
-    defaultColorScheme: 'light'
-  }, muiTheme, {
-    cssVarPrefix: cssVarPrefix,
-    getCssVar: getCssVar,
-    colorSchemes: _extends({}, colorSchemesInput, {
-      light: _extends({}, colorSchemesInput.light, {
+export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
+export default function extendTheme(options = {}, ...args) {
+  const {
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui',
+    shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
+    getSelector,
+    ...input
+  } = options;
+  const getCssVar = createGetCssVar(cssVarPrefix);
+  const {
+    palette: lightPalette,
+    ...muiTheme
+  } = createThemeWithoutVars({
+    ...input,
+    ...(colorSchemesInput.light && {
+      palette: colorSchemesInput.light?.palette
+    })
+  });
+  const {
+    palette: darkPalette
+  } = createThemeWithoutVars({
+    palette: {
+      mode: 'dark',
+      ...colorSchemesInput.dark?.palette
+    }
+  });
+  let theme = {
+    defaultColorScheme: 'light',
+    ...muiTheme,
+    cssVarPrefix,
+    getCssVar,
+    colorSchemes: {
+      ...colorSchemesInput,
+      light: {
+        ...colorSchemesInput.light,
         palette: lightPalette,
-        opacity: _extends({
+        opacity: {
           inputPlaceholder: 0.42,
           inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
-          switchTrack: 0.38
-        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
-        overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
-      }),
-      dark: _extends({}, colorSchemesInput.dark, {
+          switchTrack: 0.38,
+          ...colorSchemesInput.light?.opacity
+        },
+        overlays: colorSchemesInput.light?.overlays || []
+      },
+      dark: {
+        ...colorSchemesInput.dark,
         palette: darkPalette,
-        opacity: _extends({
+        opacity: {
           inputPlaceholder: 0.5,
           inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
-          switchTrack: 0.3
-        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
-        overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
-      })
-    }),
+          switchTrack: 0.3,
+          ...colorSchemesInput.dark?.opacity
+        },
+        overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
+      }
+    },
+    font: {
+      ...prepareTypographyVars(muiTheme.typography),
+      ...muiTheme.font
+    },
     spacing: getSpacingVal(input.spacing)
-  });
-  Object.keys(theme.colorSchemes).forEach(function (key) {
-    var palette = theme.colorSchemes[key].palette;
-    var setCssVarColor = function setCssVarColor(cssVar) {
-      var tokens = cssVar.split('-');
-      var color = tokens[1];
-      var colorToken = tokens[2];
+  };
+  Object.keys(theme.colorSchemes).forEach(key => {
+    const palette = theme.colorSchemes[key].palette;
+    const setCssVarColor = cssVar => {
+      const tokens = cssVar.split('-');
+      const color = tokens[1];
+      const colorToken = tokens[2];
       return getCssVar(cssVar, palette[color][colorToken]);
     };
 
@@ -153,18 +157,10 @@ export default function extendTheme() {
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
       setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-main'));
-      setColor(palette.Alert, 'errorFilledColor', silent(function () {
-        return lightPalette.getContrastText(palette.error.main);
-      }));
-      setColor(palette.Alert, 'infoFilledColor', silent(function () {
-        return lightPalette.getContrastText(palette.info.main);
-      }));
-      setColor(palette.Alert, 'successFilledColor', silent(function () {
-        return lightPalette.getContrastText(palette.success.main);
-      }));
-      setColor(palette.Alert, 'warningFilledColor', silent(function () {
-        return lightPalette.getContrastText(palette.warning.main);
-      }));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));
       setColor(palette.Alert, 'errorStandardBg', safeLighten(palette.error.light, 0.9));
       setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
@@ -189,18 +185,16 @@ export default function extendTheme() {
       setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));
       setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));
       setColor(palette.LinearProgress, 'warningBg', safeLighten(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', "rgba(".concat(setCssVarColor('palette-text-primaryChannel'), " / 0.11)"));
+      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
       setColor(palette.Slider, 'primaryTrack', safeLighten(palette.primary.main, 0.62));
       setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));
       setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));
       setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));
       setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));
       setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
-      var snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
+      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(function () {
-        return lightPalette.getContrastText(snackbarContentBackground);
-      }));
+      setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
@@ -223,18 +217,10 @@ export default function extendTheme() {
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
       setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-dark'));
-      setColor(palette.Alert, 'errorFilledColor', silent(function () {
-        return darkPalette.getContrastText(palette.error.dark);
-      }));
-      setColor(palette.Alert, 'infoFilledColor', silent(function () {
-        return darkPalette.getContrastText(palette.info.dark);
-      }));
-      setColor(palette.Alert, 'successFilledColor', silent(function () {
-        return darkPalette.getContrastText(palette.success.dark);
-      }));
-      setColor(palette.Alert, 'warningFilledColor', silent(function () {
-        return darkPalette.getContrastText(palette.warning.dark);
-      }));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));
       setColor(palette.Alert, 'errorStandardBg', safeDarken(palette.error.light, 0.9));
       setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
@@ -261,18 +247,16 @@ export default function extendTheme() {
       setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));
       setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));
       setColor(palette.LinearProgress, 'warningBg', safeDarken(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', "rgba(".concat(setCssVarColor('palette-text-primaryChannel'), " / 0.13)"));
+      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
       setColor(palette.Slider, 'primaryTrack', safeDarken(palette.primary.main, 0.5));
       setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));
       setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));
       setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));
       setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));
       setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
-      var _snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
-      setColor(palette.SnackbarContent, 'bg', _snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(function () {
-        return darkPalette.getContrastText(_snackbarContentBackground);
-      }));
+      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
@@ -296,12 +280,12 @@ export default function extendTheme() {
     setColorChannel(palette.common, 'background');
     setColorChannel(palette.common, 'onBackground');
     setColorChannel(palette, 'divider');
-    Object.keys(palette).forEach(function (color) {
-      var colors = palette[color];
+    Object.keys(palette).forEach(color => {
+      const colors = palette[color];
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (colors && _typeof(colors) === 'object') {
+      if (colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));
@@ -332,28 +316,21 @@ export default function extendTheme() {
       }
     });
   });
-  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
-  }
-  theme = args.reduce(function (acc, argument) {
-    return deepmerge(acc, argument);
-  }, theme);
-  var parserConfig = {
+  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+  const parserConfig = {
     prefix: cssVarPrefix,
-    shouldSkipGeneratingVar: shouldSkipGeneratingVar,
+    shouldSkipGeneratingVar,
     getSelector: getSelector || defaultGetSelector(theme)
   };
-  var _prepareCssVars = prepareCssVars(theme, parserConfig),
-    vars = _prepareCssVars.vars,
-    generateThemeVars = _prepareCssVars.generateThemeVars,
-    generateStyleSheets = _prepareCssVars.generateStyleSheets;
+  const {
+    vars,
+    generateThemeVars,
+    generateStyleSheets
+  } = prepareCssVars(theme, parserConfig);
   theme.attribute = 'data-mui-color-scheme';
   theme.colorSchemeSelector = ':root';
   theme.vars = vars;
-  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      key = _ref2[0],
-      value = _ref2[1];
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
     theme[key] = value;
   });
   theme.generateThemeVars = generateThemeVars;
@@ -361,12 +338,13 @@ export default function extendTheme() {
   theme.generateSpacing = function generateSpacing() {
     return createSpacing(input.spacing, createUnarySpacing(this));
   };
-  theme.getColorSchemeSelector = function (colorScheme) {
-    return "[".concat(theme.attribute, "=\"").concat(colorScheme, "\"] &");
-  };
+  theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
   theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.unstable_sxConfig = _extends({}, defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
+  theme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...input?.unstable_sxConfig
+  };
   theme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/modern/styles/getOverlayAlpha.js

@@ -1,11 +1,10 @@
 // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
-const getOverlayAlpha = elevation => {
+export default function getOverlayAlpha(elevation) {
   let alphaValue;
   if (elevation < 1) {
     alphaValue = 5.11916 * elevation ** 2;
   } else {
     alphaValue = 4.5 * Math.log(elevation + 1) + 2;
   }
-  return (alphaValue / 100).toFixed(2);
-};
-export default getOverlayAlpha;
+  return Math.round(alphaValue * 10) / 1000;
+}

package/modern/styles/index.js

@@ -14,7 +14,7 @@ export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictM
 export { default as createStyles } from './createStyles';
 export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
-export { duration, easing } from './createTransitions';
+export { default as createTransitions, duration, easing } from './createTransitions';
 export { default as useTheme } from './useTheme';
 export { default as useThemeProps } from './useThemeProps';
 export { default as styled } from './styled';
@@ -27,9 +27,11 @@ export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
-export { default as experimental_extendTheme } from './experimental_extendTheme';
+export { default as extendTheme } from './extendTheme';
+export { default as experimental_extendTheme } from './experimental_extendTheme'; // TODO: Remove in v7
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
+export * from './stringifyTheme';
 
 // Private methods for creating parts of the theme
 export { default as private_createTypography } from './createTypography';

package/modern/styles/responsiveFontSizes.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
 export default function responsiveFontSizes(themeInput, options = {}) {
@@ -8,8 +7,12 @@ export default function responsiveFontSizes(themeInput, options = {}) {
     factor = 2,
     variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
   } = options;
-  const theme = _extends({}, themeInput);
-  theme.typography = _extends({}, theme.typography);
+  const theme = {
+    ...themeInput
+  };
+  theme.typography = {
+    ...theme.typography
+  };
   const typography = theme.typography;
 
   // Convert between CSS lengths e.g. em->px or px->rem
@@ -18,6 +21,9 @@ export default function responsiveFontSizes(themeInput, options = {}) {
   const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
   variants.forEach(variant => {
     const style = typography[variant];
+    if (!style) {
+      return;
+    }
     const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
     if (remFontSize <= 1) {
       return;
@@ -46,14 +52,17 @@ Use unitless line heights instead.` : _formatMuiErrorMessage(6));
         })
       });
     }
-    typography[variant] = _extends({}, style, responsiveProperty({
-      cssProperty: 'fontSize',
-      min: minFontSize,
-      max: maxFontSize,
-      unit: 'rem',
-      breakpoints: breakpointValues,
-      transform
-    }));
+    typography[variant] = {
+      ...style,
+      ...responsiveProperty({
+        cssProperty: 'fontSize',
+        min: minFontSize,
+        max: maxFontSize,
+        unit: 'rem',
+        breakpoints: breakpointValues,
+        transform
+      })
+    };
   });
   return theme;
 }

package/modern/styles/stringifyTheme.js

@@ -0,0 +1,55 @@
+/* eslint-disable import/prefer-default-export */
+import { isPlainObject } from '@mui/utils/deepmerge';
+function isSerializable(val) {
+  return isPlainObject(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
+}
+
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export function stringifyTheme(baseTheme = {}) {
+  const serializableTheme = {
+    ...baseTheme
+  };
+  function serializeTheme(object) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if (isPlainObject(value)) {
+        object[key] = {
+          ...value
+        };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+  serializeTheme(serializableTheme);
+  return `import { createBreakpoints } from '@mui/system';
+import { createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}

package/modern/usePagination/usePagination.js

@@ -1,26 +1,23 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
 import useControlled from '@mui/utils/useControlled';
 export default function usePagination(props = {}) {
   // keep default values in sync with @default tags in Pagination.propTypes
   const {
-      boundaryCount = 1,
-      componentName = 'usePagination',
-      count = 1,
-      defaultPage = 1,
-      disabled = false,
-      hideNextButton = false,
-      hidePrevButton = false,
-      onChange: handleChange,
-      page: pageProp,
-      showFirstButton = false,
-      showLastButton = false,
-      siblingCount = 1
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    boundaryCount = 1,
+    componentName = 'usePagination',
+    count = 1,
+    defaultPage = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    page: pageProp,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    ...other
+  } = props;
   const [page, setPageState] = useControlled({
     controlled: pageProp,
     default: defaultPage,
@@ -109,7 +106,8 @@ export default function usePagination(props = {}) {
       disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? page >= count : page <= 1)
     };
   });
-  return _extends({
-    items
-  }, other);
+  return {
+    items,
+    ...other
+  };
 }

package/modern/useScrollTrigger/useScrollTrigger.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["getTrigger", "target"];
 import * as React from 'react';
 function defaultTrigger(store, options) {
   const {
@@ -25,17 +22,18 @@ function defaultTrigger(store, options) {
 const defaultTarget = typeof window !== 'undefined' ? window : null;
 export default function useScrollTrigger(options = {}) {
   const {
-      getTrigger = defaultTrigger,
-      target = defaultTarget
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded);
+    getTrigger = defaultTrigger,
+    target = defaultTarget,
+    ...other
+  } = options;
   const store = React.useRef();
   const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
   React.useEffect(() => {
     const handleScroll = () => {
-      setTrigger(getTrigger(store, _extends({
-        target
-      }, other)));
+      setTrigger(getTrigger(store, {
+        target,
+        ...other
+      }));
     };
     handleScroll(); // Re-evaluate trigger when dependencies change
     target.addEventListener('scroll', handleScroll, {

package/modern/utils/createSvgIcon.js

@@ -1,6 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import SvgIcon from '../SvgIcon';
 
@@ -10,12 +9,12 @@ import SvgIcon from '../SvgIcon';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/_jsx(SvgIcon, _extends({
+    return /*#__PURE__*/_jsx(SvgIcon, {
       "data-testid": `${displayName}Icon`,
-      ref: ref
-    }, props, {
+      ref: ref,
+      ...props,
       children: path
-    }));
+    });
   }
   if (process.env.NODE_ENV !== 'production') {
     // Need to set `displayName` on the inner component for React.memo.