@mui/system 5.13.1 → 5.13.5

package/legacy/cssVars/createCssVarsProvider.js

@@ -1,10 +1,9 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-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 { deepmerge } from '@mui/utils';
@@ -144,7 +143,7 @@ export default function createCssVarsProvider(options) {
     var _generateCssVars = generateCssVars(),
       rootCss = _generateCssVars.css,
       rootVars = _generateCssVars.vars; // 3. Start composing the theme object
-    var theme = _objectSpread(_objectSpread({}, restThemeProp), {}, {
+    var theme = _extends({}, restThemeProp, {
       components: components,
       colorSchemes: colorSchemes,
       cssVarPrefix: cssVarPrefix,
@@ -172,7 +171,7 @@ export default function createCssVarsProvider(options) {
         Object.keys(scheme).forEach(function (schemeKey) {
           if (scheme[schemeKey] && _typeof(scheme[schemeKey]) === 'object') {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = _objectSpread(_objectSpread({}, theme[schemeKey]), scheme[schemeKey]);
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
           } else {
             theme[schemeKey] = scheme[schemeKey];
           }
@@ -345,7 +344,7 @@ export default function createCssVarsProvider(options) {
   var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
   var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
-    return systemGetInitColorSchemeScript(_objectSpread({
+    return systemGetInitColorSchemeScript(_extends({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
       defaultMode: designSystemMode,

package/legacy/cssVars/createCssVarsTheme.js

@@ -1,13 +1,11 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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 prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
   var cssVarPrefix = theme.cssVarPrefix,
     shouldSkipGeneratingVar = theme.shouldSkipGeneratingVar,
     otherTheme = _objectWithoutProperties(theme, ["cssVarPrefix", "shouldSkipGeneratingVar"]);
-  return _objectSpread(_objectSpread({}, theme), prepareCssVars(otherTheme, {
+  return _extends({}, theme, prepareCssVars(otherTheme, {
     prefix: cssVarPrefix,
     shouldSkipGeneratingVar: shouldSkipGeneratingVar
   }));

package/legacy/cssVars/prepareCssVars.js

@@ -1,8 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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 { deepmerge } from '@mui/utils';
 import cssVarsParser from './cssVarsParser';
 function prepareCssVars(theme, parserConfig) {
@@ -48,12 +46,12 @@ function prepareCssVars(theme, parserConfig) {
   var generateCssVars = function generateCssVars(colorScheme) {
     if (!colorScheme) {
       return {
-        css: _objectSpread({}, rootCss),
+        css: _extends({}, rootCss),
         vars: rootVars
       };
     }
     return {
-      css: _objectSpread({}, colorSchemesMap[colorScheme].css),
+      css: _extends({}, colorSchemesMap[colorScheme].css),
       vars: colorSchemesMap[colorScheme].vars
     };
   };

package/legacy/cssVars/useCurrentColorScheme.js

@@ -1,6 +1,4 @@
-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 _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) {
@@ -89,7 +87,7 @@ export default function useCurrentColorScheme(options) {
       } catch (e) {
         // Unsupported
       }
-      return _objectSpread(_objectSpread({}, currentState), {}, {
+      return _extends({}, currentState, {
         mode: newMode,
         systemMode: getSystemMode(newMode)
       });
@@ -104,7 +102,7 @@ export default function useCurrentColorScheme(options) {
         } catch (e) {
           // Unsupported
         }
-        return _objectSpread(_objectSpread({}, currentState), {}, {
+        return _extends({}, currentState, {
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
         });
@@ -114,7 +112,7 @@ export default function useCurrentColorScheme(options) {
         console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
       } else {
         setState(function (currentState) {
-          var newState = _objectSpread({}, currentState);
+          var newState = _extends({}, currentState);
           processState(currentState, function (mode) {
             try {
               localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
@@ -133,7 +131,7 @@ export default function useCurrentColorScheme(options) {
       }
     } else {
       setState(function (currentState) {
-        var newState = _objectSpread({}, currentState);
+        var newState = _extends({}, currentState);
         var newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
         var newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         if (newLightColorScheme) {
@@ -167,7 +165,7 @@ export default function useCurrentColorScheme(options) {
   var handleMediaQuery = React.useCallback(function (e) {
     if (state.mode === 'system') {
       setState(function (currentState) {
-        return _objectSpread(_objectSpread({}, currentState), {}, {
+        return _extends({}, currentState, {
           systemMode: e != null && e.matches ? 'dark' : 'light'
         });
       });
@@ -223,7 +221,7 @@ export default function useCurrentColorScheme(options) {
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return _objectSpread(_objectSpread({}, state), {}, {
+  return _extends({}, state, {
     colorScheme: colorScheme,
     setMode: setMode,
     setColorScheme: setColorScheme

package/legacy/index.js

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

package/legacy/styleFunctionSx/extendSxProp.js

@@ -1,8 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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 { isPlainObject } from '@mui/utils';
 import defaultSxConfig from './defaultSxConfig';
 var splitProps = function splitProps(props) {
@@ -36,12 +34,12 @@ export default function extendSxProp(props) {
       if (!isPlainObject(result)) {
         return systemProps;
       }
-      return _objectSpread(_objectSpread({}, systemProps), result);
+      return _extends({}, systemProps, result);
     };
   } else {
-    finalSx = _objectSpread(_objectSpread({}, systemProps), inSx);
+    finalSx = _extends({}, systemProps, inSx);
   }
-  return _objectSpread(_objectSpread({}, otherProps), {}, {
+  return _extends({}, otherProps, {
     sx: finalSx
   });
 }

package/modern/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/modern/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/modern/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/modern/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';
@@ -52,20 +55,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) {
@@ -88,8 +91,7 @@ export default function createGrid(options = {}) {
     const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
     const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
     const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
-    const ownerState = {
-      ...props,
+    const ownerState = _extends({}, props, {
       level,
       columns,
       container,
@@ -103,15 +105,15 @@ export default function createGrid(options = {}) {
       disableEqualOverflow: disableEqualOverflow ?? overflow ?? 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'])) {
           return /*#__PURE__*/React.cloneElement(child, {
@@ -120,7 +122,7 @@ export default function createGrid(options = {}) {
         }
         return child;
       })
-    });
+    }));
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (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`.

package/modern/Unstable_Grid/gridGenerator.js

@@ -1,3 +1,5 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { traverseBreakpoints } from './traverseBreakpoints';
 function appendLevel(level) {
   if (!level) {
     return '';
@@ -26,48 +28,6 @@ function getParentColumns(ownerState) {
   }
   return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
 }
-export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
-export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
-  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
-
-  if (Array.isArray(responsive)) {
-    responsive.forEach((breakpointValue, index) => {
-      iterator((responsiveStyles, style) => {
-        if (index <= breakpoints.keys.length - 1) {
-          if (index === 0) {
-            Object.assign(responsiveStyles, style);
-          } else {
-            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
-          }
-        }
-      }, breakpointValue);
-    });
-  } else if (responsive && typeof responsive === 'object') {
-    // prevent null
-    // responsive could be a very big object, pick the smallest responsive values
-
-    const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
-    keys.forEach(key => {
-      if (breakpoints.keys.indexOf(key) !== -1) {
-        // @ts-ignore already checked that responsive is an object
-        const breakpointValue = responsive[key];
-        if (breakpointValue !== undefined) {
-          iterator((responsiveStyles, style) => {
-            if (smallestBreakpoint === key) {
-              Object.assign(responsiveStyles, style);
-            } else {
-              responsiveStyles[breakpoints.up(key)] = style;
-            }
-          }, breakpointValue);
-        }
-      }
-    });
-  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
-    iterator((responsiveStyles, style) => {
-      Object.assign(responsiveStyles, style);
-    }, responsive);
-  }
-};
 export const generateGridSizeStyles = ({
   theme,
   ownerState
@@ -203,27 +163,23 @@ export const generateGridStyles = ({
 }) => {
   const getSelfSpacing = createGetSelfSpacing(ownerState);
   const getParentSpacing = createGetParentSpacing(ownerState);
-  return {
+  return _extends({
     minWidth: 0,
-    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')}`
-      })
-    })
-  };
+    boxSizing: 'border-box'
+  }, ownerState.container && _extends({
+    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)) && _extends({
+    padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`
+  }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
+    padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
+  }));
 };
 export const generateSizeClassNames = gridSize => {
   const classNames = [];

package/modern/Unstable_Grid/index.js

@@ -2,4 +2,5 @@ export { default } from './Grid';
 export { default as createGrid } from './createGrid';
 export * from './GridProps';
 export { default as gridClasses } from './gridClasses';
-export * from './gridClasses';
+export * from './gridClasses';
+export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';

package/modern/Unstable_Grid/traverseBreakpoints.js

@@ -0,0 +1,42 @@
+export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
+export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
+  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
+
+  if (Array.isArray(responsive)) {
+    responsive.forEach((breakpointValue, index) => {
+      iterator((responsiveStyles, style) => {
+        if (index <= breakpoints.keys.length - 1) {
+          if (index === 0) {
+            Object.assign(responsiveStyles, style);
+          } else {
+            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
+          }
+        }
+      }, breakpointValue);
+    });
+  } else if (responsive && typeof responsive === 'object') {
+    // prevent null
+    // responsive could be a very big object, pick the smallest responsive values
+
+    const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
+    keys.forEach(key => {
+      if (breakpoints.keys.indexOf(key) !== -1) {
+        // @ts-ignore already checked that responsive is an object
+        const breakpointValue = responsive[key];
+        if (breakpointValue !== undefined) {
+          iterator((responsiveStyles, style) => {
+            if (smallestBreakpoint === key) {
+              Object.assign(responsiveStyles, style);
+            } else {
+              responsiveStyles[breakpoints.up(key)] = style;
+            }
+          }, breakpointValue);
+        }
+      }
+    });
+  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
+    iterator((responsiveStyles, style) => {
+      Object.assign(responsiveStyles, style);
+    }, responsive);
+  }
+};