@mui/material 6.0.0-alpha.6 → 6.0.0-alpha.8

package/node/styles/adaptV4Theme.js

@@ -1,31 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = adaptV4Theme;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _system = require("@mui/system");
-const _excluded = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-  _excluded2 = ["type", "mode"];
 function adaptV4Theme(inputTheme) {
   if (process.env.NODE_ENV !== 'production') {
     console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
   }
   const {
-      defaultProps = {},
-      mixins = {},
-      overrides = {},
-      palette = {},
-      props = {},
-      styleOverrides = {}
-    } = inputTheme,
-    other = (0, _objectWithoutPropertiesLoose2.default)(inputTheme, _excluded);
-  const theme = (0, _extends2.default)({}, other, {
+    defaultProps = {},
+    mixins = {},
+    overrides = {},
+    palette = {},
+    props = {},
+    styleOverrides = {},
+    ...other
+  } = inputTheme;
+  const theme = {
+    ...other,
     components: {}
-  });
+  };
 
   // default props
   Object.keys(defaultProps).forEach(component => {
@@ -57,32 +53,35 @@ function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = (0, _system.createBreakpoints)(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = (0, _extends2.default)({
+  theme.mixins = {
     gutters: (styles = {}) => {
-      return (0, _extends2.default)({
+      return {
         paddingLeft: spacing(2),
-        paddingRight: spacing(2)
-      }, styles, {
-        [breakpoints.up('sm')]: (0, _extends2.default)({
+        paddingRight: spacing(2),
+        ...styles,
+        [breakpoints.up('sm')]: {
           paddingLeft: spacing(3),
-          paddingRight: spacing(3)
-        }, styles[breakpoints.up('sm')])
-      });
-    }
-  }, mixins);
+          paddingRight: spacing(3),
+          ...styles[breakpoints.up('sm')]
+        }
+      };
+    },
+    ...mixins
+  };
   const {
-      type: typeInput,
-      mode: modeInput
-    } = palette,
-    paletteRest = (0, _objectWithoutPropertiesLoose2.default)(palette, _excluded2);
+    type: typeInput,
+    mode: modeInput,
+    ...paletteRest
+  } = palette;
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = (0, _extends2.default)({
+  theme.palette = {
     // theme.palette.text.hint
     text: {
       hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
     },
     mode: finalMode,
-    type: finalMode
-  }, paletteRest);
+    type: finalMode,
+    ...paletteRest
+  };
   return theme;
 }

package/node/styles/createMixins.js

@@ -1,13 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createMixins;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function createMixins(breakpoints, mixins) {
-  return (0, _extends2.default)({
+  return {
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -18,6 +16,7 @@ function createMixins(breakpoints, mixins) {
       [breakpoints.up('sm')]: {
         minHeight: 64
       }
-    }
-  }, mixins);
+    },
+    ...mixins
+  };
 }

package/node/styles/createPalette.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.dark = void 0;
 exports.default = createPalette;
 exports.light = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _colorManipulator = require("@mui/system/colorManipulator");
@@ -20,7 +18,6 @@ var _orange = _interopRequireDefault(require("../colors/orange"));
 var _blue = _interopRequireDefault(require("../colors/blue"));
 var _lightBlue = _interopRequireDefault(require("../colors/lightBlue"));
 var _green = _interopRequireDefault(require("../colors/green"));
-const _excluded = ["mode", "contrastThreshold", "tonalOffset"];
 const light = exports.light = {
   // The colors used to style the text.
   text: {
@@ -185,11 +182,11 @@ function getDefaultWarning(mode = 'light') {
 }
 function createPalette(palette) {
   const {
-      mode = 'light',
-      contrastThreshold = 3,
-      tonalOffset = 0.2
-    } = palette,
-    other = (0, _objectWithoutPropertiesLoose2.default)(palette, _excluded);
+    mode = 'light',
+    contrastThreshold = 3,
+    tonalOffset = 0.2,
+    ...other
+  } = palette;
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -217,7 +214,9 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = (0, _extends2.default)({}, color);
+    color = {
+      ...color
+    };
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -257,9 +256,11 @@ const theme2 = createTheme({ palette: {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
-  const paletteOutput = (0, _deepmerge.default)((0, _extends2.default)({
+  const paletteOutput = (0, _deepmerge.default)({
     // A collection of common colors.
-    common: (0, _extends2.default)({}, _common.default),
+    common: {
+      ..._common.default
+    },
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -308,7 +309,9 @@ const theme2 = createTheme({ palette: {
     // Used by the functions below to shift a color's luminance by approximately
     // two indexes within its tonal palette.
     // E.g., shift from Red 500 to Red 300 or Red 700.
-    tonalOffset
-  }, modes[mode]), other);
+    tonalOffset,
+    // The light and dark mode object.
+    ...modes[mode]
+  }, other);
   return paletteOutput;
 }

package/node/styles/createTheme.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createMuiTheme = createMuiTheme;
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _styleFunctionSx = _interopRequireWildcard(require("@mui/system/styleFunctionSx"));
@@ -19,17 +17,19 @@ var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _shadows = _interopRequireDefault(require("./shadows"));
 var _createTransitions = _interopRequireDefault(require("./createTransitions"));
 var _zIndex = _interopRequireDefault(require("./zIndex"));
-const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function createTheme(options = {}, ...args) {
   const {
-      mixins: mixinsInput = {},
-      palette: paletteInput = {},
-      transitions: transitionsInput = {},
-      typography: typographyInput = {}
-    } = options,
-    other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+    breakpoints: breakpointsInput,
+    mixins: mixinsInput = {},
+    spacing: spacingInput,
+    palette: paletteInput = {},
+    transitions: transitionsInput = {},
+    typography: typographyInput = {},
+    shape: shapeInput,
+    ...other
+  } = options;
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : (0, _formatMuiErrorMessage2.default)(18));
@@ -43,7 +43,9 @@ Please use another name.` : (0, _formatMuiErrorMessage2.default)(18));
     shadows: _shadows.default.slice(),
     typography: (0, _createTypography.default)(palette, typographyInput),
     transitions: (0, _createTransitions.default)(transitionsInput),
-    zIndex: (0, _extends2.default)({}, _zIndex.default)
+    zIndex: {
+      ..._zIndex.default
+    }
   });
   muiTheme = (0, _deepmerge.default)(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
@@ -77,7 +79,10 @@ Please use another name.` : (0, _formatMuiErrorMessage2.default)(18));
       }
     });
   }
-  muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _styleFunctionSx.unstable_defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ..._styleFunctionSx.unstable_defaultSxConfig,
+    ...(other == null ? void 0 : other.unstable_sxConfig)
+  };
   muiTheme.unstable_sx = function sx(props) {
     return (0, _styleFunctionSx.default)({
       sx: props,

package/node/styles/createTransitions.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createTransitions;
 exports.easing = exports.duration = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-const _excluded = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = exports.easing = {
@@ -51,15 +47,21 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 function createTransitions(inputTransitions) {
-  const mergedEasing = (0, _extends2.default)({}, easing, inputTransitions.easing);
-  const mergedDuration = (0, _extends2.default)({}, duration, inputTransitions.duration);
+  const mergedEasing = {
+    ...easing,
+    ...inputTransitions.easing
+  };
+  const mergedDuration = {
+    ...duration,
+    ...inputTransitions.duration
+  };
   const create = (props = ['all'], options = {}) => {
     const {
-        duration: durationOption = mergedDuration.standard,
-        easing: easingOption = mergedEasing.easeInOut,
-        delay = 0
-      } = options,
-      other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+      duration: durationOption = mergedDuration.standard,
+      easing: easingOption = mergedEasing.easeInOut,
+      delay = 0,
+      ...other
+    } = options;
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       const isNumber = value => !Number.isNaN(parseFloat(value));
@@ -84,11 +86,11 @@ function createTransitions(inputTransitions) {
     }
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-  return (0, _extends2.default)({
+  return {
     getAutoHeightDuration,
-    create
-  }, inputTransitions, {
+    create,
+    ...inputTransitions,
     easing: mergedEasing,
     duration: mergedDuration
-  });
+  };
 }

package/node/styles/createTypography.js

@@ -5,10 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createTypography;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-const _excluded = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -22,24 +19,23 @@ const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
  * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
 function createTypography(palette, typography) {
-  const _ref = typeof typography === 'function' ? typography(palette) : typography,
-    {
-      fontFamily = defaultFontFamily,
-      // The default font size of the Material Specification.
-      fontSize = 14,
-      // px
-      fontWeightLight = 300,
-      fontWeightRegular = 400,
-      fontWeightMedium = 500,
-      fontWeightBold = 700,
-      // Tell MUI what's the font-size on the html element.
-      // 16px is the default font-size used by browsers.
-      htmlFontSize = 16,
-      // Apply the CSS properties to all the variants.
-      allVariants,
-      pxToRem: pxToRem2
-    } = _ref,
-    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const {
+    fontFamily = defaultFontFamily,
+    // The default font size of the Material Specification.
+    fontSize = 14,
+    // px
+    fontWeightLight = 300,
+    fontWeightRegular = 400,
+    fontWeightMedium = 500,
+    fontWeightBold = 700,
+    // Tell MUI what's the font-size on the html element.
+    // 16px is the default font-size used by browsers.
+    htmlFontSize = 16,
+    // Apply the CSS properties to all the variants.
+    allVariants,
+    pxToRem: pxToRem2,
+    ...other
+  } = typeof typography === 'function' ? typography(palette) : typography;
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -50,15 +46,20 @@ function createTypography(palette, typography) {
   }
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => (0, _extends2.default)({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
     // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
-    lineHeight
-  }, fontFamily === defaultFontFamily ? {
-    letterSpacing: `${round(letterSpacing / size)}em`
-  } : {}, casing, allVariants);
+    lineHeight,
+    // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
+    // across font-families can cause issues with the kerning.
+    ...(fontFamily === defaultFontFamily ? {
+      letterSpacing: `${round(letterSpacing / size)}em`
+    } : {}),
+    ...casing,
+    ...allVariants
+  });
   const variants = {
     h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
     h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
@@ -82,7 +83,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return (0, _deepmerge.default)((0, _extends2.default)({
+  return (0, _deepmerge.default)({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -90,8 +91,9 @@ function createTypography(palette, typography) {
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,
-    fontWeightBold
-  }, variants), other, {
+    fontWeightBold,
+    ...variants
+  }, other, {
     clone: false // No need to clone deep
   });
 }

package/node/styles/experimental_extendTheme.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createGetCssVar = void 0;
 exports.default = extendTheme;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _system = require("@mui/system");
 var _spacing = require("@mui/system/spacing");
@@ -18,8 +16,6 @@ var _shouldSkipGeneratingVar = _interopRequireDefault(require("./shouldSkipGener
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
 var _createGetSelector = _interopRequireDefault(require("./createGetSelector"));
-const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "getSelector"],
-  _excluded2 = ["palette"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -82,57 +78,68 @@ exports.createGetCssVar = createGetCssVar;
 function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
   const {
-      colorSchemes: colorSchemesInput = {},
-      cssVarPrefix = 'mui',
-      shouldSkipGeneratingVar = _shouldSkipGeneratingVar.default,
-      getSelector
-    } = options,
-    input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui',
+    shouldSkipGeneratingVar = _shouldSkipGeneratingVar.default,
+    getSelector,
+    ...input
+  } = options;
   const getCssVar = createGetCssVar(cssVarPrefix);
-  const _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.default)({}, input, colorSchemesInput.light && {
+  const {
+    palette: lightPalette,
+    ...muiTheme
+  } = (0, _createTheme.default)({
+    ...input,
+    ...(colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
-    })),
-    {
-      palette: lightPalette
-    } = _createThemeWithoutVa,
-    muiTheme = (0, _objectWithoutPropertiesLoose2.default)(_createThemeWithoutVa, _excluded2);
+    })
+  });
   const {
     palette: darkPalette
   } = (0, _createTheme.default)({
-    palette: (0, _extends2.default)({
-      mode: 'dark'
-    }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
+    palette: {
+      mode: 'dark',
+      ...((_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
+    }
   });
-  let theme = (0, _extends2.default)({
-    defaultColorScheme: 'light'
-  }, muiTheme, {
+  let theme = {
+    defaultColorScheme: 'light',
+    ...muiTheme,
     cssVarPrefix,
     getCssVar,
-    colorSchemes: (0, _extends2.default)({}, colorSchemesInput, {
-      light: (0, _extends2.default)({}, colorSchemesInput.light, {
+    colorSchemes: {
+      ...colorSchemesInput,
+      light: {
+        ...colorSchemesInput.light,
         palette: lightPalette,
-        opacity: (0, _extends2.default)({
+        opacity: {
           inputPlaceholder: 0.42,
           inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
-          switchTrack: 0.38
-        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
+          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: (0, _extends2.default)({}, colorSchemesInput.dark, {
+      },
+      dark: {
+        ...colorSchemesInput.dark,
         palette: darkPalette,
-        opacity: (0, _extends2.default)({
+        opacity: {
           inputPlaceholder: 0.5,
           inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
-          switchTrack: 0.3
-        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
+          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
-      })
-    }),
-    font: (0, _extends2.default)({}, (0, _cssVars.prepareTypographyVars)(muiTheme.typography), muiTheme.font),
+      }
+    },
+    font: {
+      ...(0, _cssVars.prepareTypographyVars)(muiTheme.typography),
+      ...muiTheme.font
+    },
     spacing: getSpacingVal(input.spacing)
-  });
+  };
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette;
     const setCssVarColor = cssVar => {
@@ -346,7 +353,10 @@ function extendTheme(options = {}, ...args) {
   theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
   theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.unstable_sxConfig = (0, _extends2.default)({}, _styleFunctionSx.unstable_defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
+  theme.unstable_sxConfig = {
+    ..._styleFunctionSx.unstable_defaultSxConfig,
+    ...(input == null ? void 0 : input.unstable_sxConfig)
+  };
   theme.unstable_sx = function sx(props) {
     return (0, _styleFunctionSx.default)({
       sx: props,

package/node/styles/responsiveFontSizes.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = responsiveFontSizes;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var _cssUtils = require("./cssUtils");
 function responsiveFontSizes(themeInput, options = {}) {
@@ -15,8 +14,12 @@ function responsiveFontSizes(themeInput, options = {}) {
     factor = 2,
     variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
   } = options;
-  const theme = (0, _extends2.default)({}, themeInput);
-  theme.typography = (0, _extends2.default)({}, theme.typography);
+  const theme = {
+    ...themeInput
+  };
+  theme.typography = {
+    ...theme.typography
+  };
   const typography = theme.typography;
 
   // Convert between CSS lengths e.g. em->px or px->rem
@@ -53,14 +56,17 @@ Use unitless line heights instead.` : (0, _formatMuiErrorMessage2.default)(6));
         })
       });
     }
-    typography[variant] = (0, _extends2.default)({}, style, (0, _cssUtils.responsiveProperty)({
-      cssProperty: 'fontSize',
-      min: minFontSize,
-      max: maxFontSize,
-      unit: 'rem',
-      breakpoints: breakpointValues,
-      transform
-    }));
+    typography[variant] = {
+      ...style,
+      ...(0, _cssUtils.responsiveProperty)({
+        cssProperty: 'fontSize',
+        min: minFontSize,
+        max: maxFontSize,
+        unit: 'rem',
+        breakpoints: breakpointValues,
+        transform
+      })
+    };
   });
   return theme;
 }

package/node/usePagination/usePagination.js

@@ -6,27 +6,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = usePagination;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
-const _excluded = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
 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 = (0, _objectWithoutPropertiesLoose2.default)(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] = (0, _useControlled.default)({
     controlled: pageProp,
     default: defaultPage,
@@ -115,7 +112,8 @@ function usePagination(props = {}) {
       disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? page >= count : page <= 1)
     };
   });
-  return (0, _extends2.default)({
-    items
-  }, other);
+  return {
+    items,
+    ...other
+  };
 }