@mui/system 5.12.3 → 5.13.1

package/esm/createTheme/createBreakpoints.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["values", "unit", "step"];
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
 export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
@@ -12,33 +9,34 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends({}, acc, {
+    return {
+      ...acc,
       [obj.key]: obj.val
-    });
+    };
   }, {});
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
 export default function createBreakpoints(breakpoints) {
   const {
-      // The breakpoint **start** at this value.
-      // For instance with the first breakpoint xs: [xs, sm).
-      values = {
-        xs: 0,
-        // phone
-        sm: 600,
-        // tablet
-        md: 900,
-        // small laptop
-        lg: 1200,
-        // desktop
-        xl: 1536 // large screen
-      },
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm).
+    values = {
+      xs: 0,
+      // phone
+      sm: 600,
+      // tablet
+      md: 900,
+      // small laptop
+      lg: 1200,
+      // desktop
+      xl: 1536 // large screen
+    },
 
-      unit = 'px',
-      step = 5
-    } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
+    unit = 'px',
+    step = 5,
+    ...other
+  } = breakpoints;
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -70,7 +68,7 @@ export default function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends({
+  return {
     keys,
     values: sortedValues,
     up,
@@ -78,6 +76,7 @@ export default function createBreakpoints(breakpoints) {
     between,
     only,
     not,
-    unit
-  }, other);
+    unit,
+    ...other
+  };
 }

package/esm/createTheme/createTheme.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["breakpoints", "palette", "spacing", "shape"];
 import { deepmerge } from '@mui/utils';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
@@ -9,12 +6,12 @@ import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
 import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
 function createTheme(options = {}, ...args) {
   const {
-      breakpoints: breakpointsInput = {},
-      palette: paletteInput = {},
-      spacing: spacingInput,
-      shape: shapeInput = {}
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded);
+    breakpoints: breakpointsInput = {},
+    palette: paletteInput = {},
+    spacing: spacingInput,
+    shape: shapeInput = {},
+    ...other
+  } = options;
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -22,14 +19,21 @@ function createTheme(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends({
-      mode: 'light'
-    }, paletteInput),
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
     spacing,
-    shape: _extends({}, shape, shapeInput)
+    shape: {
+      ...shape,
+      ...shapeInput
+    }
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...(other == null ? void 0 : other.unstable_sxConfig)
+  };
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/esm/cssVars/createCssVarsProvider.js

@@ -1,7 +1,4 @@
-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 = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
@@ -58,17 +55,16 @@ export default function createCssVarsProvider(options) {
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const scopedTheme = themeProp[themeId];
-    const _ref = scopedTheme || themeProp,
-      {
-        colorSchemes = {},
-        components = {},
-        generateCssVars = () => ({
-          vars: {},
-          css: {}
-        }),
-        cssVarPrefix
-      } = _ref,
-      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const {
+      colorSchemes = {},
+      components = {},
+      generateCssVars = () => ({
+        vars: {},
+        css: {}
+      }),
+      cssVarPrefix,
+      ...restThemeProp
+    } = scopedTheme || themeProp;
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -126,13 +122,14 @@ export default function createCssVarsProvider(options) {
     } = generateCssVars();
 
     // 3. Start composing the theme object
-    const theme = _extends({}, restThemeProp, {
+    const theme = {
+      ...restThemeProp,
       components,
       colorSchemes,
       cssVarPrefix,
       vars: rootVars,
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
-    });
+    };
 
     // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
     //    The default color scheme stylesheet is constructed to have the least CSS specificity.
@@ -150,7 +147,10 @@ export default function createCssVarsProvider(options) {
         Object.keys(scheme).forEach(schemeKey => {
           if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
+            theme[schemeKey] = {
+              ...theme[schemeKey],
+              ...scheme[schemeKey]
+            };
           } else {
             theme[schemeKey] = scheme[schemeKey];
           }
@@ -320,14 +320,15 @@ export default function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
+  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey
-  }, params));
+    modeStorageKey: defaultModeStorageKey,
+    ...params
+  });
   return {
     CssVarsProvider,
     useColorScheme,

package/esm/cssVars/createCssVarsTheme.js

@@ -1,16 +1,16 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
 import prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
   const {
-      cssVarPrefix,
+    cssVarPrefix,
+    shouldSkipGeneratingVar,
+    ...otherTheme
+  } = theme;
+  return {
+    ...theme,
+    ...prepareCssVars(otherTheme, {
+      prefix: cssVarPrefix,
       shouldSkipGeneratingVar
-    } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
-  return _extends({}, theme, prepareCssVars(otherTheme, {
-    prefix: cssVarPrefix,
-    shouldSkipGeneratingVar
-  }));
+    })
+  };
 }
 export default createCssVarsTheme;

package/esm/cssVars/prepareCssVars.js

@@ -1,15 +1,12 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes", "components"],
-  _excluded2 = ["light"];
 import { deepmerge } from '@mui/utils';
 import cssVarsParser from './cssVarsParser';
 function prepareCssVars(theme, parserConfig) {
   // @ts-ignore - ignore components do not exist
   const {
-      colorSchemes = {}
-    } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
+    colorSchemes = {},
+    components,
+    ...otherTheme
+  } = theme;
   const {
     vars: rootVars,
     css: rootCss,
@@ -18,9 +15,9 @@ function prepareCssVars(theme, parserConfig) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      light
-    } = colorSchemes,
-    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2);
+    light,
+    ...otherColorSchemes
+  } = colorSchemes;
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
     const {
       vars,
@@ -49,12 +46,16 @@ function prepareCssVars(theme, parserConfig) {
   const generateCssVars = colorScheme => {
     if (!colorScheme) {
       return {
-        css: _extends({}, rootCss),
+        css: {
+          ...rootCss
+        },
         vars: rootVars
       };
     }
     return {
-      css: _extends({}, colorSchemesMap[colorScheme].css),
+      css: {
+        ...colorSchemesMap[colorScheme].css
+      },
       vars: colorSchemesMap[colorScheme].vars
     };
   };

package/esm/cssVars/useCurrentColorScheme.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
 export function getSystemMode(mode) {
@@ -82,10 +81,11 @@ export default function useCurrentColorScheme(options) {
       } catch (e) {
         // Unsupported
       }
-      return _extends({}, currentState, {
+      return {
+        ...currentState,
         mode: newMode,
         systemMode: getSystemMode(newMode)
-      });
+      };
     });
   }, [modeStorageKey, defaultMode]);
   const setColorScheme = React.useCallback(value => {
@@ -97,17 +97,20 @@ export default function useCurrentColorScheme(options) {
         } catch (e) {
           // Unsupported
         }
-        return _extends({}, currentState, {
+        return {
+          ...currentState,
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
-        });
+        };
       });
     } else if (typeof value === 'string') {
       if (value && !joinedColorSchemes.includes(value)) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
-          const newState = _extends({}, currentState);
+          const newState = {
+            ...currentState
+          };
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -126,7 +129,9 @@ export default function useCurrentColorScheme(options) {
       }
     } else {
       setState(currentState => {
-        const newState = _extends({}, currentState);
+        const newState = {
+          ...currentState
+        };
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
         const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         if (newLightColorScheme) {
@@ -159,7 +164,8 @@ export default function useCurrentColorScheme(options) {
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(e => {
     if (state.mode === 'system') {
-      setState(currentState => _extends({}, currentState, {
+      setState(currentState => ({
+        ...currentState,
         systemMode: e != null && e.matches ? 'dark' : 'light'
       }));
     }
@@ -208,9 +214,10 @@ export default function useCurrentColorScheme(options) {
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return _extends({}, state, {
+  return {
+    ...state,
     colorScheme,
     setMode,
     setColorScheme
-  });
+  };
 }

package/esm/propsToClassKey.js

@@ -1,5 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["variant"];
 import { unstable_capitalize as capitalize } from '@mui/utils';
 function isEmpty(string) {
   return string.length === 0;
@@ -12,9 +10,9 @@ function isEmpty(string) {
  */
 export default function propsToClassKey(props) {
   const {
-      variant
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    variant,
+    ...other
+  } = props;
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {

package/esm/styleFunctionSx/extendSxProp.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["sx"];
 import { isPlainObject } from '@mui/utils';
 import defaultSxConfig from './defaultSxConfig';
 const splitProps = props => {
@@ -21,9 +18,9 @@ const splitProps = props => {
 };
 export default function extendSxProp(props) {
   const {
-      sx: inSx
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    sx: inSx,
+    ...other
+  } = props;
   const {
     systemProps,
     otherProps
@@ -37,12 +34,19 @@ export default function extendSxProp(props) {
       if (!isPlainObject(result)) {
         return systemProps;
       }
-      return _extends({}, systemProps, result);
+      return {
+        ...systemProps,
+        ...result
+      };
     };
   } else {
-    finalSx = _extends({}, systemProps, inSx);
+    finalSx = {
+      ...systemProps,
+      ...inSx
+    };
   }
-  return _extends({}, otherProps, {
+  return {
+    ...otherProps,
     sx: finalSx
-  });
+  };
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.12.3
+ * @mui/system v5.13.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Container/createContainer.js

@@ -1,6 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -49,7 +50,7 @@ export default function createContainer() {
   var ContainerRoot = createStyledComponent(function (_ref) {
     var theme = _ref.theme,
       ownerState = _ref.ownerState;
-    return _extends({
+    return _objectSpread({
       width: '100%',
       marginLeft: 'auto',
       boxSizing: 'border-box',
@@ -79,10 +80,10 @@ export default function createContainer() {
   }, function (_ref4) {
     var theme = _ref4.theme,
       ownerState = _ref4.ownerState;
-    return _extends({}, ownerState.maxWidth === 'xs' && _defineProperty({}, theme.breakpoints.up('xs'), {
+    return _objectSpread(_objectSpread({}, ownerState.maxWidth === 'xs' && _defineProperty({}, theme.breakpoints.up('xs'), {
       // @ts-ignore module augmentation fails if custom breakpoints are used
       maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-    }), ownerState.maxWidth &&
+    })), ownerState.maxWidth &&
     // @ts-ignore module augmentation fails if custom breakpoints are used
     ownerState.maxWidth !== 'xs' && _defineProperty({}, theme.breakpoints.up(ownerState.maxWidth), {
       // @ts-ignore module augmentation fails if custom breakpoints are used
@@ -102,7 +103,7 @@ export default function createContainer() {
       maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
       classesProp = props.classes,
       other = _objectWithoutProperties(props, ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"]);
-    var ownerState = _extends({}, props, {
+    var ownerState = _objectSpread(_objectSpread({}, props), {}, {
       component: component,
       disableGutters: disableGutters,
       fixed: fixed,
@@ -114,7 +115,7 @@ export default function createContainer() {
     return (
       /*#__PURE__*/
       // @ts-ignore theme is injected by the styled util
-      _jsx(ContainerRoot, _extends({
+      _jsx(ContainerRoot, _objectSpread({
         as: component
         // @ts-ignore module augmentation fails if custom breakpoints are used
         ,

package/legacy/Stack/createStack.js

@@ -1,7 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -60,7 +61,7 @@ var getSideFromDirection = function getSideFromDirection(direction) {
 export var style = function style(_ref) {
   var ownerState = _ref.ownerState,
     theme = _ref.theme;
-  var styles = _extends({
+  var styles = _objectSpread({
     display: 'flex',
     flexDirection: 'column'
   }, handleBreakpoints({
@@ -155,12 +156,12 @@ export default function createStack() {
       useFlexGap: useFlexGap
     };
     var classes = useUtilityClasses();
-    return /*#__PURE__*/_jsx(StackRoot, _extends({
+    return /*#__PURE__*/_jsx(StackRoot, _objectSpread(_objectSpread({
       as: component,
       ownerState: ownerState,
       ref: ref,
       className: clsx(classes.root, className)
-    }, other, {
+    }, other), {}, {
       children: divider ? joinChildren(children, divider) : children
     }));
   });

package/legacy/ThemeProvider/ThemeProvider.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
@@ -14,7 +15,7 @@ function useThemeScoping(themeId, upperTheme, localTheme) {
     var resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       var mergedTheme = localTheme(resolvedTheme);
-      var result = themeId ? _extends({}, upperTheme, _defineProperty({}, themeId, mergedTheme)) : mergedTheme;
+      var result = themeId ? _objectSpread(_objectSpread({}, upperTheme), {}, _defineProperty({}, themeId, mergedTheme)) : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
       // see the test case "use provided theme from a callback" in ThemeProvider.test.js
       if (isPrivate) {
@@ -24,7 +25,7 @@ function useThemeScoping(themeId, upperTheme, localTheme) {
       }
       return result;
     }
-    return themeId ? _extends({}, upperTheme, _defineProperty({}, themeId, localTheme)) : _extends({}, upperTheme, localTheme);
+    return themeId ? _objectSpread(_objectSpread({}, upperTheme), {}, _defineProperty({}, themeId, localTheme)) : _objectSpread(_objectSpread({}, upperTheme), localTheme);
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 

package/legacy/Unstable_Grid/createGrid.js

@@ -1,7 +1,9 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -105,7 +107,7 @@ export default function createGrid() {
     var spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
     var rowSpacing = (_ref3 = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref3 : level ? undefined : rowSpacingProp;
     var columnSpacing = (_ref4 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref4 : level ? undefined : columnSpacingProp;
-    var ownerState = _extends({}, props, {
+    var ownerState = _objectSpread(_objectSpread({}, props), {}, {
       level: level,
       columns: columns,
       container: container,
@@ -122,12 +124,12 @@ export default function createGrid() {
     });
 
     var classes = useUtilityClasses(ownerState, theme);
-    var result = /*#__PURE__*/_jsx(GridRoot, _extends({
+    var result = /*#__PURE__*/_jsx(GridRoot, _objectSpread(_objectSpread({
       ref: ref,
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className)
-    }, other, {
+    }, other), {}, {
       children: React.Children.map(children, function (child) {
         if ( /*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
           var _child$props$unstable;

package/legacy/Unstable_Grid/gridGenerator.js

@@ -2,6 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function appendLevel(level) {
   if (!level) {
     return '';
@@ -190,19 +192,19 @@ export var generateGridStyles = function generateGridStyles(_ref10) {
   var ownerState = _ref10.ownerState;
   var getSelfSpacing = createGetSelfSpacing(ownerState);
   var getParentSpacing = createGetParentSpacing(ownerState);
-  return _extends({
+  return _objectSpread(_objectSpread({
     minWidth: 0,
     boxSizing: 'border-box'
-  }, ownerState.container && _extends({
+  }, ownerState.container && _objectSpread(_objectSpread({
     display: 'flex',
     flexWrap: 'wrap'
   }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
     flexWrap: ownerState.wrap
-  }, {
+  }), {}, {
     margin: "calc(".concat(getSelfSpacing('row'), " / -2) calc(").concat(getSelfSpacing('column'), " / -2)")
   }, ownerState.disableEqualOverflow && {
     margin: "calc(".concat(getSelfSpacing('row'), " * -1) 0px 0px calc(").concat(getSelfSpacing('column'), " * -1)")
-  }), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
+  })), (!ownerState.container || isNestedContainer(ownerState)) && _objectSpread({
     padding: "calc(".concat(getParentSpacing('row'), " / 2) calc(").concat(getParentSpacing('column'), " / 2)")
   }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
     padding: "".concat(getParentSpacing('row'), " 0px 0px ").concat(getParentSpacing('column'))

package/legacy/breakpoints.js

@@ -1,6 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
 import merge from './merge';
@@ -63,7 +65,7 @@ function breakpoints(styleFunction) {
     var extended = themeBreakpoints.keys.reduce(function (acc, key) {
       if (props[key]) {
         acc = acc || {};
-        acc[themeBreakpoints.up(key)] = styleFunction(_extends({
+        acc[themeBreakpoints.up(key)] = styleFunction(_objectSpread({
           theme: theme
         }, props[key]));
       }
@@ -71,7 +73,7 @@ function breakpoints(styleFunction) {
     }, null);
     return merge(base, extended);
   };
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _objectSpread(_objectSpread({}, styleFunction.propTypes), {}, {
     xs: PropTypes.object,
     sm: PropTypes.object,
     md: PropTypes.object,