@mui/system 5.13.1 → 5.13.5

package/cssVars/createCssVarsProvider.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DISABLE_CSS_TRANSITION = void 0;
 exports.default = createCssVarsProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _utils = require("@mui/utils");
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,6 +17,7 @@ var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
 var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
 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; }
 const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -22,6 +25,12 @@ exports.DISABLE_CSS_TRANSITION = DISABLE_CSS_TRANSITION;
 function createCssVarsProvider(options) {
   const {
     themeId,
+    /**
+     * This `theme` object needs to follow a certain structure to
+     * be used correctly by the finel `CssVarsProvider`. It should have a
+     * `colorSchemes` key with the light and dark (and any other) palette.
+     * It should also ideally have a vars object created using `prepareCssVars`.
+     */
     theme: defaultTheme = {},
     attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
@@ -64,16 +73,17 @@ function createCssVarsProvider(options) {
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const scopedTheme = themeProp[themeId];
-    const {
-      colorSchemes = {},
-      components = {},
-      generateCssVars = () => ({
-        vars: {},
-        css: {}
-      }),
-      cssVarPrefix,
-      ...restThemeProp
-    } = scopedTheme || themeProp;
+    const _ref = scopedTheme || themeProp,
+      {
+        colorSchemes = {},
+        components = {},
+        generateCssVars = () => ({
+          vars: {},
+          css: {}
+        }),
+        cssVarPrefix
+      } = _ref,
+      restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -131,14 +141,13 @@ function createCssVarsProvider(options) {
     } = generateCssVars();
 
     // 3. Start composing the theme object
-    const theme = {
-      ...restThemeProp,
+    const theme = (0, _extends2.default)({}, 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.
@@ -156,10 +165,7 @@ 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] = {
-              ...theme[schemeKey],
-              ...scheme[schemeKey]
-            };
+            theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
           } else {
             theme[schemeKey] = scheme[schemeKey];
           }
@@ -329,15 +335,14 @@ function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)({
+  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey,
-    ...params
-  });
+    modeStorageKey: defaultModeStorageKey
+  }, params));
   return {
     CssVarsProvider,
     useColorScheme,

package/cssVars/createCssVarsTheme.js

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
+const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
 function createCssVarsTheme(theme) {
   const {
-    cssVarPrefix,
-    shouldSkipGeneratingVar,
-    ...otherTheme
-  } = theme;
-  return {
-    ...theme,
-    ...(0, _prepareCssVars.default)(otherTheme, {
-      prefix: cssVarPrefix,
+      cssVarPrefix,
       shouldSkipGeneratingVar
-    })
-  };
+    } = theme,
+    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded);
+  return (0, _extends2.default)({}, theme, (0, _prepareCssVars.default)(otherTheme, {
+    prefix: cssVarPrefix,
+    shouldSkipGeneratingVar
+  }));
 }
 var _default = createCssVarsTheme;
 exports.default = _default;

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
 export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
 export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
@@ -39,4 +39,4 @@ export interface GetInitColorSchemeScriptOptions {
      */
     attribute?: string;
 }
-export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
+export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): React.JSX.Element;

package/cssVars/prepareCssVars.js

@@ -5,15 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _utils = require("@mui/utils");
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
+const _excluded = ["colorSchemes", "components"],
+  _excluded2 = ["light"];
 function prepareCssVars(theme, parserConfig) {
   // @ts-ignore - ignore components do not exist
   const {
-    colorSchemes = {},
-    components,
-    ...otherTheme
-  } = theme;
+      colorSchemes = {}
+    } = theme,
+    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded);
   const {
     vars: rootVars,
     css: rootCss,
@@ -22,9 +25,9 @@ function prepareCssVars(theme, parserConfig) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-    light,
-    ...otherColorSchemes
-  } = colorSchemes;
+      light
+    } = colorSchemes,
+    otherColorSchemes = (0, _objectWithoutPropertiesLoose2.default)(colorSchemes, _excluded2);
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
     const {
       vars,
@@ -53,16 +56,12 @@ function prepareCssVars(theme, parserConfig) {
   const generateCssVars = colorScheme => {
     if (!colorScheme) {
       return {
-        css: {
-          ...rootCss
-        },
+        css: (0, _extends2.default)({}, rootCss),
         vars: rootVars
       };
     }
     return {
-      css: {
-        ...colorSchemesMap[colorScheme].css
-      },
+      css: (0, _extends2.default)({}, colorSchemesMap[colorScheme].css),
       vars: colorSchemesMap[colorScheme].vars
     };
   };

package/cssVars/useCurrentColorScheme.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useCurrentColorScheme;
 exports.getColorScheme = getColorScheme;
 exports.getSystemMode = getSystemMode;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _getInitColorSchemeScript = require("./getInitColorSchemeScript");
 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); }
@@ -91,11 +93,10 @@ function useCurrentColorScheme(options) {
       } catch (e) {
         // Unsupported
       }
-      return {
-        ...currentState,
+      return (0, _extends2.default)({}, currentState, {
         mode: newMode,
         systemMode: getSystemMode(newMode)
-      };
+      });
     });
   }, [modeStorageKey, defaultMode]);
   const setColorScheme = React.useCallback(value => {
@@ -107,20 +108,17 @@ function useCurrentColorScheme(options) {
         } catch (e) {
           // Unsupported
         }
-        return {
-          ...currentState,
+        return (0, _extends2.default)({}, 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 = {
-            ...currentState
-          };
+          const newState = (0, _extends2.default)({}, currentState);
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -139,9 +137,7 @@ function useCurrentColorScheme(options) {
       }
     } else {
       setState(currentState => {
-        const newState = {
-          ...currentState
-        };
+        const newState = (0, _extends2.default)({}, currentState);
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
         const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         if (newLightColorScheme) {
@@ -174,8 +170,7 @@ function useCurrentColorScheme(options) {
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(e => {
     if (state.mode === 'system') {
-      setState(currentState => ({
-        ...currentState,
+      setState(currentState => (0, _extends2.default)({}, currentState, {
         systemMode: e != null && e.matches ? 'dark' : 'light'
       }));
     }
@@ -224,10 +219,9 @@ function useCurrentColorScheme(options) {
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return {
-    ...state,
+  return (0, _extends2.default)({}, state, {
     colorScheme,
     setMode,
     setColorScheme
-  };
+  });
 }

package/esm/Container/createContainer.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -47,22 +50,20 @@ export default function createContainer(options = {}) {
   const ContainerRoot = createStyledComponent(({
     theme,
     ownerState
-  }) => ({
+  }) => _extends({
     width: '100%',
     marginLeft: 'auto',
     boxSizing: 'border-box',
     marginRight: 'auto',
-    display: 'block',
-    // Fix IE11 layout when used with main.
-    ...(!ownerState.disableGutters && {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2),
-      // @ts-ignore module augmentation fails if custom breakpoints are used
-      [theme.breakpoints.up('sm')]: {
-        paddingLeft: theme.spacing(3),
-        paddingRight: theme.spacing(3)
-      }
-    })
+    display: 'block'
+  }, !ownerState.disableGutters && {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    // @ts-ignore module augmentation fails if custom breakpoints are used
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3)
+    }
   }), ({
     theme,
     ownerState
@@ -79,58 +80,51 @@ export default function createContainer(options = {}) {
   }, {}), ({
     theme,
     ownerState
-  }) => ({
+  }) => _extends({}, ownerState.maxWidth === 'xs' && {
     // @ts-ignore module augmentation fails if custom breakpoints are used
-    ...(ownerState.maxWidth === 'xs' && {
+    [theme.breakpoints.up('xs')]: {
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      [theme.breakpoints.up('xs')]: {
-        // @ts-ignore module augmentation fails if custom breakpoints are used
-        maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-      }
-    }),
-    ...(ownerState.maxWidth &&
+      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
+    }
+  }, ownerState.maxWidth &&
+  // @ts-ignore module augmentation fails if custom breakpoints are used
+  ownerState.maxWidth !== 'xs' && {
     // @ts-ignore module augmentation fails if custom breakpoints are used
-    ownerState.maxWidth !== 'xs' && {
+    [theme.breakpoints.up(ownerState.maxWidth)]: {
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      [theme.breakpoints.up(ownerState.maxWidth)]: {
-        // @ts-ignore module augmentation fails if custom breakpoints are used
-        maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
-      }
-    })
+      maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
+    }
   }));
   const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
     const props = useThemeProps(inProps);
     const {
-      className,
-      component = 'div',
-      disableGutters = false,
-      fixed = false,
-      maxWidth = 'lg',
-      classes: classesProp,
-      ...other
-    } = props;
-    const ownerState = {
-      ...props,
+        className,
+        component = 'div',
+        disableGutters = false,
+        fixed = false,
+        maxWidth = 'lg'
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+    const ownerState = _extends({}, props, {
       component,
       disableGutters,
       fixed,
       maxWidth
-    };
+    });
 
     // @ts-ignore module augmentation fails if custom breakpoints are used
     const classes = useUtilityClasses(ownerState, componentName);
     return (
       /*#__PURE__*/
       // @ts-ignore theme is injected by the styled util
-      _jsx(ContainerRoot, {
+      _jsx(ContainerRoot, _extends({
         as: component
         // @ts-ignore module augmentation fails if custom breakpoints are used
         ,
         ownerState: ownerState,
         className: clsx(classes.root, className),
-        ref: ref,
-        ...other
-      })
+        ref: ref
+      }, other))
     );
   });
   process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {

package/esm/Stack/createStack.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -55,18 +58,17 @@ export const style = ({
   ownerState,
   theme
 }) => {
-  let styles = {
+  let styles = _extends({
     display: 'flex',
-    flexDirection: 'column',
-    ...handleBreakpoints({
-      theme
-    }, resolveBreakpointValues({
-      values: ownerState.direction,
-      breakpoints: theme.breakpoints.values
-    }), propValue => ({
-      flexDirection: propValue
-    }))
-  };
+    flexDirection: 'column'
+  }, handleBreakpoints({
+    theme
+  }, resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  }), propValue => ({
+    flexDirection: propValue
+  })));
   if (ownerState.spacing) {
     const transformer = createUnarySpacing(theme);
     const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
@@ -130,29 +132,29 @@ export default function createStack(options = {}) {
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
     const {
-      component = 'div',
-      direction = 'column',
-      spacing = 0,
-      divider,
-      children,
-      className,
-      useFlexGap = false,
-      ...other
-    } = props;
+        component = 'div',
+        direction = 'column',
+        spacing = 0,
+        divider,
+        children,
+        className,
+        useFlexGap = false
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
     const ownerState = {
       direction,
       spacing,
       useFlexGap
     };
     const classes = useUtilityClasses();
-    return /*#__PURE__*/_jsx(StackRoot, {
+    return /*#__PURE__*/_jsx(StackRoot, _extends({
       as: component,
       ownerState: ownerState,
       ref: ref,
-      className: clsx(classes.root, className),
-      ...other,
+      className: clsx(classes.root, className)
+    }, other, {
       children: divider ? joinChildren(children, divider) : children
-    });
+    }));
   });
   process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
     children: PropTypes.node,

package/esm/ThemeProvider/ThemeProvider.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
@@ -11,10 +12,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? {
-        ...upperTheme,
+      const result = themeId ? _extends({}, upperTheme, {
         [themeId]: mergedTheme
-      } : 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) {
@@ -22,13 +22,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? {
-      ...upperTheme,
+    return themeId ? _extends({}, upperTheme, {
       [themeId]: localTheme
-    } : {
-      ...upperTheme,
-      ...localTheme
-    };
+    }) : _extends({}, upperTheme, localTheme);
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 

package/esm/Unstable_Grid/createGrid.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -53,20 +56,20 @@ export default function createGrid(options = {}) {
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
     const overflow = React.useContext(OverflowContext);
     const {
-      className,
-      children,
-      columns: columnsProp = 12,
-      container = false,
-      component = 'div',
-      direction = 'row',
-      wrap = 'wrap',
-      spacing: spacingProp = 0,
-      rowSpacing: rowSpacingProp = spacingProp,
-      columnSpacing: columnSpacingProp = spacingProp,
-      disableEqualOverflow: themeDisableEqualOverflow,
-      unstable_level: level = 0,
-      ...rest
-    } = props;
+        className,
+        children,
+        columns: columnsProp = 12,
+        container = false,
+        component = 'div',
+        direction = 'row',
+        wrap = 'wrap',
+        spacing: spacingProp = 0,
+        rowSpacing: rowSpacingProp = spacingProp,
+        columnSpacing: columnSpacingProp = spacingProp,
+        disableEqualOverflow: themeDisableEqualOverflow,
+        unstable_level: level = 0
+      } = props,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
     // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
     let disableEqualOverflow = themeDisableEqualOverflow;
     if (level && themeDisableEqualOverflow !== undefined) {
@@ -89,8 +92,7 @@ export default function createGrid(options = {}) {
     const spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
     const rowSpacing = (_ref = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref : level ? undefined : rowSpacingProp;
     const columnSpacing = (_ref2 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref2 : level ? undefined : columnSpacingProp;
-    const ownerState = {
-      ...props,
+    const ownerState = _extends({}, props, {
       level,
       columns,
       container,
@@ -104,15 +106,15 @@ export default function createGrid(options = {}) {
       disableEqualOverflow: (_ref3 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref3 : false,
       // use context value if exists.
       parentDisableEqualOverflow: overflow // for nested grid
-    };
+    });
 
     const classes = useUtilityClasses(ownerState, theme);
-    let result = /*#__PURE__*/_jsx(GridRoot, {
+    let result = /*#__PURE__*/_jsx(GridRoot, _extends({
       ref: ref,
       as: component,
       ownerState: ownerState,
-      className: clsx(classes.root, className),
-      ...other,
+      className: clsx(classes.root, className)
+    }, other, {
       children: React.Children.map(children, child => {
         if ( /*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
           var _child$props$unstable;
@@ -122,7 +124,7 @@ export default function createGrid(options = {}) {
         }
         return child;
       })
-    });
+    }));
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
       // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.