@mui/system 6.0.0-alpha.1 → 6.0.0-alpha.10

package/modern/cssVars/useCurrentColorScheme.js

@@ -1,6 +1,5 @@
 'use client';
 
-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) {
@@ -84,10 +83,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 => {
@@ -99,17 +99,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);
@@ -128,7 +131,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) {
@@ -168,9 +173,10 @@ export default function useCurrentColorScheme(options) {
         if (currentState.systemMode === systemMode) {
           return currentState;
         }
-        return _extends({}, currentState, {
+        return {
+          ...currentState,
           systemMode
-        });
+        };
       });
     }
   }, [state.mode]);
@@ -222,9 +228,10 @@ export default function useCurrentColorScheme(options) {
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return _extends({}, state, {
+  return {
+    ...state,
     colorScheme,
     setMode,
     setColorScheme
-  });
+  };
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.1
+ * @mui/system v6.0.0-alpha.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,6 +11,7 @@ export { default as GlobalStyles } from './GlobalStyles';
 export { default as borders } from './borders';
 export * from './borders';
 export { default as breakpoints } from './breakpoints';
+export { default as cssContainerQueries } from './cssContainerQueries';
 export { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues as unstable_resolveBreakpointValues } from './breakpoints';
 export { default as compose } from './compose';
 export { default as display } from './display';

package/modern/propsToClassKey/propsToClassKey.js

@@ -1,5 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["variant"];
 import capitalize from '@mui/utils/capitalize';
 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/modern/styleFunctionSx/defaultSxConfig.js

@@ -267,6 +267,9 @@ const defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: 'font'
+  },
   fontFamily: {
     themeKey: 'typography'
   },

package/modern/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/deepmerge';
 import defaultSxConfig from './defaultSxConfig';
 const splitProps = props => {
@@ -20,9 +17,9 @@ const splitProps = props => {
 };
 export default function extendSxProp(props) {
   const {
-      sx: inSx
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    sx: inSx,
+    ...other
+  } = props;
   const {
     systemProps,
     otherProps
@@ -36,12 +33,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/modern/styleFunctionSx/styleFunctionSx.js

@@ -2,6 +2,7 @@ import capitalize from '@mui/utils/capitalize';
 import merge from '../merge';
 import { getPath, getStyleValue as getValue } from '../style';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
+import { sortContainerQueries } from '../cssContainerQueries';
 import defaultSxConfig from './defaultSxConfig';
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
@@ -115,7 +116,7 @@ export function unstable_createStyleFunctionSx() {
           }
         }
       });
-      return removeUnusedBreakpoints(breakpointsKeys, css);
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }

package/node/Container/createContainer.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createContainer;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -17,7 +15,6 @@ var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
 var _styled = _interopRequireDefault(require("../styled"));
 var _createTheme = _interopRequireDefault(require("../createTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
 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 defaultTheme = (0, _createTheme.default)();
@@ -61,20 +58,20 @@ function createContainer(options = {}) {
   const ContainerRoot = createStyledComponent(({
     theme,
     ownerState
-  }) => (0, _extends2.default)({
+  }) => ({
     width: '100%',
     marginLeft: 'auto',
     boxSizing: 'border-box',
     marginRight: 'auto',
-    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)
-    }
+    ...(!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
@@ -91,51 +88,58 @@ function createContainer(options = {}) {
   }, {}), ({
     theme,
     ownerState
-  }) => (0, _extends2.default)({}, ownerState.maxWidth === 'xs' && {
+  }) => ({
     // @ts-ignore module augmentation fails if custom breakpoints are used
-    [theme.breakpoints.up('xs')]: {
+    ...(ownerState.maxWidth === 'xs' && {
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-    }
-  }, ownerState.maxWidth &&
-  // @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
+        maxWidth: Math.max(theme.breakpoints.values.xs, 444)
+      }
+    }),
+    ...(ownerState.maxWidth &&
     // @ts-ignore module augmentation fails if custom breakpoints are used
-    [theme.breakpoints.up(ownerState.maxWidth)]: {
+    ownerState.maxWidth !== 'xs' && {
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
-    }
+      [theme.breakpoints.up(ownerState.maxWidth)]: {
+        // @ts-ignore module augmentation fails if custom breakpoints are used
+        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'
-      } = props,
-      other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-    const ownerState = (0, _extends2.default)({}, props, {
+      className,
+      component = 'div',
+      disableGutters = false,
+      fixed = false,
+      maxWidth = 'lg',
+      classes: classesProp,
+      ...other
+    } = props;
+    const ownerState = {
+      ...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
-      (0, _jsxRuntime.jsx)(ContainerRoot, (0, _extends2.default)({
+      (0, _jsxRuntime.jsx)(ContainerRoot, {
         as: component
         // @ts-ignore module augmentation fails if custom breakpoints are used
         ,
         ownerState: ownerState,
         className: (0, _clsx.default)(classes.root, className),
-        ref: ref
-      }, other))
+        ref: ref,
+        ...other
+      })
     );
   });
   process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {

package/node/RtlProvider/index.js

@@ -5,23 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRtl = exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value"];
 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 RtlContext = /*#__PURE__*/React.createContext();
-function RtlProvider(_ref) {
-  let {
-      value
-    } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, (0, _extends2.default)({
-    value: value != null ? value : true
-  }, props));
+function RtlProvider({
+  value,
+  ...props
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, {
+    value: value != null ? value : true,
+    ...props
+  });
 }
 process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
   children: _propTypes.default.node,

package/node/Stack/createStack.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = createStack;
 exports.style = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -21,7 +19,6 @@ var _createTheme = _interopRequireDefault(require("../createTheme"));
 var _breakpoints = require("../breakpoints");
 var _spacing = require("../spacing");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 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 defaultTheme = (0, _createTheme.default)();
@@ -70,17 +67,18 @@ const style = ({
   ownerState,
   theme
 }) => {
-  let styles = (0, _extends2.default)({
+  let styles = {
     display: 'flex',
-    flexDirection: 'column'
-  }, (0, _breakpoints.handleBreakpoints)({
-    theme
-  }, (0, _breakpoints.resolveBreakpointValues)({
-    values: ownerState.direction,
-    breakpoints: theme.breakpoints.values
-  }), propValue => ({
-    flexDirection: propValue
-  })));
+    flexDirection: 'column',
+    ...(0, _breakpoints.handleBreakpoints)({
+      theme
+    }, (0, _breakpoints.resolveBreakpointValues)({
+      values: ownerState.direction,
+      breakpoints: theme.breakpoints.values
+    }), propValue => ({
+      flexDirection: propValue
+    }))
+  };
   if (ownerState.spacing) {
     const transformer = (0, _spacing.createUnarySpacing)(theme);
     const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
@@ -149,29 +147,29 @@ function createStack(options = {}) {
     const themeProps = useThemeProps(inProps);
     const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
     const {
-        component = 'div',
-        direction = 'column',
-        spacing = 0,
-        divider,
-        children,
-        className,
-        useFlexGap = false
-      } = props,
-      other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      component = 'div',
+      direction = 'column',
+      spacing = 0,
+      divider,
+      children,
+      className,
+      useFlexGap = false,
+      ...other
+    } = props;
     const ownerState = {
       direction,
       spacing,
       useFlexGap
     };
     const classes = useUtilityClasses();
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, {
       as: component,
       ownerState: ownerState,
       ref: ref,
-      className: (0, _clsx.default)(classes.root, className)
-    }, other, {
+      className: (0, _clsx.default)(classes.root, className),
+      ...other,
       children: divider ? joinChildren(children, divider) : children
-    }));
+    });
   });
   process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
     children: _propTypes.default.node,

package/node/ThemeProvider/ThemeProvider.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _privateTheming = require("@mui/private-theming");
@@ -23,9 +22,10 @@ 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 ? (0, _extends2.default)({}, upperTheme, {
+      const result = themeId ? {
+        ...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) {
@@ -33,9 +33,13 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? (0, _extends2.default)({}, upperTheme, {
+    return themeId ? {
+      ...upperTheme,
       [themeId]: localTheme
-    }) : (0, _extends2.default)({}, upperTheme, localTheme);
+    } : {
+      ...upperTheme,
+      ...localTheme
+    };
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 

package/node/Unstable_Grid/createGrid.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createGrid;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -20,7 +18,6 @@ var _styleFunctionSx = require("../styleFunctionSx");
 var _createTheme = _interopRequireDefault(require("../createTheme"));
 var _gridGenerator = require("./gridGenerator");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"];
 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 defaultTheme = (0, _createTheme.default)();
@@ -70,20 +67,20 @@ function createGrid(options = {}) {
     const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
     const overflow = React.useContext(GridOverflowContext);
     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
-      } = props,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      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;
     // 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) {
@@ -106,7 +103,8 @@ 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 = (0, _extends2.default)({}, props, {
+    const ownerState = {
+      ...props,
       level,
       columns,
       container,
@@ -120,24 +118,24 @@ 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__*/(0, _jsxRuntime.jsx)(GridRoot, (0, _extends2.default)({
+    let result = /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRoot, {
       ref: ref,
       as: component,
       ownerState: ownerState,
-      className: (0, _clsx.default)(classes.root, className)
-    }, other, {
+      className: (0, _clsx.default)(classes.root, className),
+      ...other,
       children: React.Children.map(children, child => {
         if ( /*#__PURE__*/React.isValidElement(child) && (0, _isMuiElement.default)(child, ['Grid'])) {
-          var _child$props$unstable;
+          var _unstable_level;
           return /*#__PURE__*/React.cloneElement(child, {
-            unstable_level: (_child$props$unstable = child.props.unstable_level) != null ? _child$props$unstable : level + 1
+            unstable_level: (_unstable_level = child.props.unstable_level) != null ? _unstable_level : level + 1
           });
         }
         return child;
       })
-    }));
+    });
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
       // There are 2 possibilities that should wrap with the GridOverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.

package/node/Unstable_Grid/gridGenerator.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _traverseBreakpoints = require("./traverseBreakpoints");
 function appendLevel(level) {
   if (!level) {
@@ -178,23 +176,27 @@ const generateGridStyles = ({
 }) => {
   const getSelfSpacing = createGetSelfSpacing(ownerState);
   const getParentSpacing = createGetParentSpacing(ownerState);
-  return (0, _extends2.default)({
+  return {
     minWidth: 0,
-    boxSizing: 'border-box'
-  }, ownerState.container && (0, _extends2.default)({
-    display: 'flex',
-    flexWrap: 'wrap'
-  }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
-    flexWrap: ownerState.wrap
-  }, {
-    margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`
-  }, ownerState.disableEqualOverflow && {
-    margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
-  }), (!ownerState.container || isNestedContainer(ownerState)) && (0, _extends2.default)({
-    padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`
-  }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
-    padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
-  }));
+    boxSizing: 'border-box',
+    ...(ownerState.container && {
+      display: 'flex',
+      flexWrap: 'wrap',
+      ...(ownerState.wrap && ownerState.wrap !== 'wrap' && {
+        flexWrap: ownerState.wrap
+      }),
+      margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`,
+      ...(ownerState.disableEqualOverflow && {
+        margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
+      })
+    }),
+    ...((!ownerState.container || isNestedContainer(ownerState)) && {
+      padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`,
+      ...((ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
+        padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
+      })
+    })
+  };
 };
 exports.generateGridStyles = generateGridStyles;
 const generateSizeClassNames = gridSize => {