@mui/material 5.13.1 → 5.13.2

package/node/styles/experimental_extendTheme.js

@@ -6,11 +6,15 @@ 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 _utils = require("@mui/utils");
 var _system = require("@mui/system");
 var _shouldSkipGeneratingVar = _interopRequireDefault(require("./shouldSkipGeneratingVar"));
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
+const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
+  _excluded2 = ["palette"];
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
     return undefined;
@@ -50,61 +54,52 @@ 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,
-    ...input
-  } = options;
+      colorSchemes: colorSchemesInput = {},
+      cssVarPrefix = 'mui',
+      shouldSkipGeneratingVar = _shouldSkipGeneratingVar.default
+    } = options,
+    input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
   const getCssVar = createGetCssVar(cssVarPrefix);
-  const {
-    palette: lightPalette,
-    ...muiTheme
-  } = (0, _createTheme.default)({
-    ...input,
-    ...(colorSchemesInput.light && {
+  const _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.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: {
-      mode: 'dark',
-      ...((_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
-    }
+    palette: (0, _extends2.default)({
+      mode: 'dark'
+    }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
   });
-  let theme = {
-    ...muiTheme,
+  let theme = (0, _extends2.default)({}, muiTheme, {
     cssVarPrefix,
     getCssVar,
-    colorSchemes: {
-      ...colorSchemesInput,
-      light: {
-        ...colorSchemesInput.light,
+    colorSchemes: (0, _extends2.default)({}, colorSchemesInput, {
+      light: (0, _extends2.default)({}, colorSchemesInput.light, {
         palette: lightPalette,
-        opacity: {
+        opacity: (0, _extends2.default)({
           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: {
-        ...colorSchemesInput.dark,
+      }),
+      dark: (0, _extends2.default)({}, colorSchemesInput.dark, {
         palette: darkPalette,
-        opacity: {
+        opacity: (0, _extends2.default)({
           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
-      }
-    }
-  };
+      })
+    })
+  });
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette;
     const setCssVarColor = cssVar => {
@@ -302,10 +297,7 @@ function extendTheme(options = {}, ...args) {
   theme.vars = themeVars;
   theme.generateCssVars = generateCssVars;
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
-  theme.unstable_sxConfig = {
-    ..._system.unstable_defaultSxConfig,
-    ...(input == null ? void 0 : input.unstable_sxConfig)
-  };
+  theme.unstable_sxConfig = (0, _extends2.default)({}, _system.unstable_defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {
     return (0, _system.unstable_styleFunctionSx)({
       sx: props,

package/node/styles/responsiveFontSizes.js

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

package/node/usePagination/usePagination.js

@@ -1,27 +1,31 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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 _utils = require("@mui/utils");
+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,
-    ...other
-  } = props;
+      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);
   const [page, setPageState] = (0, _utils.unstable_useControlled)({
     controlled: pageProp,
     default: defaultPage,
@@ -110,8 +114,7 @@ function usePagination(props = {}) {
       disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? page >= count : page <= 1)
     };
   });
-  return {
-    items,
-    ...other
-  };
+  return (0, _extends2.default)({
+    items
+  }, other);
 }

package/node/useScrollTrigger/useScrollTrigger.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useScrollTrigger;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+const _excluded = ["getTrigger", "target"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function defaultTrigger(store, options) {
@@ -28,18 +32,17 @@ function defaultTrigger(store, options) {
 const defaultTarget = typeof window !== 'undefined' ? window : null;
 function useScrollTrigger(options = {}) {
   const {
-    getTrigger = defaultTrigger,
-    target = defaultTarget,
-    ...other
-  } = options;
+      getTrigger = defaultTrigger,
+      target = defaultTarget
+    } = options,
+    other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
   const store = React.useRef();
   const [trigger, setTrigger] = React.useState(() => getTrigger(store, other));
   React.useEffect(() => {
     const handleScroll = () => {
-      setTrigger(getTrigger(store, {
-        target,
-        ...other
-      }));
+      setTrigger(getTrigger(store, (0, _extends2.default)({
+        target
+      }, other)));
     };
     handleScroll(); // Re-evaluate trigger when dependencies change
     target.addEventListener('scroll', handleScroll, {

package/node/utils/createSvgIcon.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createSvgIcon;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -14,12 +15,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Private module reserved for @mui packages.
  */function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, (0, _extends2.default)({
       "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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.13.1",
+  "version": "5.13.2",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-beta.1",
-    "@mui/core-downloads-tracker": "^5.13.1",
-    "@mui/system": "^5.13.1",
+    "@mui/base": "5.0.0-beta.2",
+    "@mui/core-downloads-tracker": "^5.13.2",
+    "@mui/system": "^5.13.2",
     "@mui/types": "^7.2.4",
     "@mui/utils": "^5.13.1",
     "@types/react-transition-group": "^4.4.6",

package/styles/CssVarsProvider.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
-import { SupportedColorScheme } from './experimental_extendTheme';
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: {
-        cssVarPrefix?: string | undefined;
-        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-    } | {
-        $$material: {
-            cssVarPrefix?: string | undefined;
-            colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-        };
-    } | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Element | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-    disableNestedContext?: boolean | undefined;
-    disableStyleSheetGeneration?: boolean | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | {
+        $$material: {
+            cssVarPrefix?: string | undefined;
+            colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+        };
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Element | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+    disableNestedContext?: boolean | undefined;
+    disableStyleSheetGeneration?: boolean | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/CssVarsProvider.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
@@ -19,10 +20,9 @@ const {
     dark: 'dark'
   },
   resolveTheme: theme => {
-    const newTheme = {
-      ...theme,
+    const newTheme = _extends({}, theme, {
       typography: createTypography(theme.palette, theme.typography)
-    };
+    });
     newTheme.unstable_sx = function sx(props) {
       return styleFunctionSx({
         sx: props,

package/styles/ThemeProvider.js

@@ -1,18 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as SystemThemeProvider } from '@mui/system';
 import THEME_ID from './identifier';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function ThemeProvider({
-  theme: themeInput,
-  ...props
-}) {
+export default function ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/_jsx(SystemThemeProvider, {
-    ...props,
+  return /*#__PURE__*/_jsx(SystemThemeProvider, _extends({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
-  });
+  }));
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**

package/styles/adaptV4Theme.js

@@ -1,21 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  _excluded2 = ["type", "mode"];
 import { createBreakpoints, createSpacing } from '@mui/system';
 export default 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 = {},
-    ...other
-  } = inputTheme;
-  const theme = {
-    ...other,
+      defaultProps = {},
+      mixins = {},
+      overrides = {},
+      palette = {},
+      props = {},
+      styleOverrides = {}
+    } = inputTheme,
+    other = _objectWithoutPropertiesLoose(inputTheme, _excluded);
+  const theme = _extends({}, other, {
     components: {}
-  };
+  });
 
   // default props
   Object.keys(defaultProps).forEach(component => {
@@ -47,35 +50,32 @@ export default function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = {
+  theme.mixins = _extends({
     gutters: (styles = {}) => {
-      return {
+      return _extends({
         paddingLeft: spacing(2),
-        paddingRight: spacing(2),
-        ...styles,
-        [breakpoints.up('sm')]: {
+        paddingRight: spacing(2)
+      }, styles, {
+        [breakpoints.up('sm')]: _extends({
           paddingLeft: spacing(3),
-          paddingRight: spacing(3),
-          ...styles[breakpoints.up('sm')]
-        }
-      };
-    },
-    ...mixins
-  };
+          paddingRight: spacing(3)
+        }, styles[breakpoints.up('sm')])
+      });
+    }
+  }, mixins);
   const {
-    type: typeInput,
-    mode: modeInput,
-    ...paletteRest
-  } = palette;
+      type: typeInput,
+      mode: modeInput
+    } = palette,
+    paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2);
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = {
+  theme.palette = _extends({
     // 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/styles/createMixins.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 export default function createMixins(breakpoints, mixins) {
-  return {
+  return _extends({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -10,7 +11,6 @@ export default function createMixins(breakpoints, mixins) {
       [breakpoints.up('sm')]: {
         minHeight: 64
       }
-    },
-    ...mixins
-  };
+    }
+  }, mixins);
 }

package/styles/createPalette.js

@@ -1,4 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+const _excluded = ["mode", "contrastThreshold", "tonalOffset"];
 import { deepmerge } from '@mui/utils';
 import { darken, getContrastRatio, lighten } from '@mui/system';
 import common from '../colors/common';
@@ -173,11 +176,11 @@ function getDefaultWarning(mode = 'light') {
 }
 export default function createPalette(palette) {
   const {
-    mode = 'light',
-    contrastThreshold = 3,
-    tonalOffset = 0.2,
-    ...other
-  } = palette;
+      mode = 'light',
+      contrastThreshold = 3,
+      tonalOffset = 0.2
+    } = palette,
+    other = _objectWithoutPropertiesLoose(palette, _excluded);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -205,9 +208,7 @@ export default function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = {
-      ...color
-    };
+    color = _extends({}, color);
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -247,11 +248,9 @@ const theme2 = createTheme({ palette: {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
-  const paletteOutput = deepmerge({
+  const paletteOutput = deepmerge(_extends({
     // A collection of common colors.
-    common: {
-      ...common
-    },
+    common: _extends({}, common),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -300,9 +299,7 @@ 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,
-    // The light and dark mode object.
-    ...modes[mode]
-  }, other);
+    tonalOffset
+  }, modes[mode]), other);
   return paletteOutput;
 }

package/styles/createTheme.js

@@ -1,4 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 import { deepmerge } from '@mui/utils';
 import { createTheme as systemCreateTheme, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
 import generateUtilityClass from '../generateUtilityClass';
@@ -10,15 +13,12 @@ import createTransitions from './createTransitions';
 import zIndex from './zIndex';
 function createTheme(options = {}, ...args) {
   const {
-    breakpoints: breakpointsInput,
-    mixins: mixinsInput = {},
-    spacing: spacingInput,
-    palette: paletteInput = {},
-    transitions: transitionsInput = {},
-    typography: typographyInput = {},
-    shape: shapeInput,
-    ...other
-  } = options;
+      mixins: mixinsInput = {},
+      palette: paletteInput = {},
+      transitions: transitionsInput = {},
+      typography: typographyInput = {}
+    } = options,
+    other = _objectWithoutPropertiesLoose(options, _excluded);
   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.` : _formatMuiErrorMessage(18));
@@ -32,9 +32,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: {
-      ...zIndex
-    }
+    zIndex: _extends({}, zIndex)
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
@@ -68,10 +66,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
       }
     });
   }
-  muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig,
-    ...(other == null ? void 0 : other.unstable_sxConfig)
-  };
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,