@mui/system 5.13.1 → 5.13.5

package/Unstable_Grid/gridGenerator.js

@@ -1,9 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traverseBreakpoints = exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = exports.filterBreakpointKeys = void 0;
+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) {
     return '';
@@ -32,57 +35,13 @@ function getParentColumns(ownerState) {
   }
   return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
 }
-const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
-exports.filterBreakpointKeys = filterBreakpointKeys;
-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);
-  }
-};
-exports.traverseBreakpoints = traverseBreakpoints;
 const generateGridSizeStyles = ({
   theme,
   ownerState
 }) => {
   const getSelfSpacing = createGetSelfSpacing(ownerState);
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
     let style = {};
     if (value === true) {
       style = {
@@ -117,7 +76,7 @@ const generateGridOffsetStyles = ({
   ownerState
 }) => {
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
     let style = {};
     if (value === 'auto') {
       style = {
@@ -146,7 +105,7 @@ const generateGridColumnsStyles = ({
   } : {
     '--Grid-columns': 12
   };
-  traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
     appendStyle(styles, {
       [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
     });
@@ -167,7 +126,7 @@ const generateGridRowSpacingStyles = ({
     // It will be overridden if spacing props are provided
     [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
   } : {};
-  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
     var _theme$spacing;
     appendStyle(styles, {
       [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
@@ -189,7 +148,7 @@ const generateGridColumnSpacingStyles = ({
     // It will be overridden if spacing props are provided
     [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
   } : {};
-  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
     var _theme$spacing2;
     appendStyle(styles, {
       [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
@@ -206,7 +165,7 @@ const generateGridDirectionStyles = ({
     return {};
   }
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
     appendStyle(styles, {
       flexDirection: value
     });
@@ -219,27 +178,23 @@ const generateGridStyles = ({
 }) => {
   const getSelfSpacing = createGetSelfSpacing(ownerState);
   const getParentSpacing = createGetParentSpacing(ownerState);
-  return {
+  return (0, _extends2.default)({
     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 && (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')}`
+  }));
 };
 exports.generateGridStyles = generateGridStyles;
 const generateSizeClassNames = gridSize => {

package/Unstable_Grid/index.d.ts

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

package/Unstable_Grid/index.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   createGrid: true,
-  gridClasses: true
+  gridClasses: true,
+  unstable_traverseBreakpoints: true
 };
 Object.defineProperty(exports, "createGrid", {
   enumerable: true,
@@ -26,6 +27,12 @@ Object.defineProperty(exports, "gridClasses", {
     return _gridClasses.default;
   }
 });
+Object.defineProperty(exports, "unstable_traverseBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _traverseBreakpoints.traverseBreakpoints;
+  }
+});
 var _Grid = _interopRequireDefault(require("./Grid"));
 var _createGrid = _interopRequireDefault(require("./createGrid"));
 var _GridProps = require("./GridProps");
@@ -52,5 +59,6 @@ Object.keys(_gridClasses).forEach(function (key) {
     }
   });
 });
+var _traverseBreakpoints = require("./traverseBreakpoints");
 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; }

package/Unstable_Grid/traverseBreakpoints.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
+interface Iterator<T> {
+    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
+}
+export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
+export {};

package/Unstable_Grid/traverseBreakpoints.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.traverseBreakpoints = exports.filterBreakpointKeys = void 0;
+const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
+exports.filterBreakpointKeys = filterBreakpointKeys;
+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);
+  }
+};
+exports.traverseBreakpoints = traverseBreakpoints;

package/breakpoints.js

@@ -12,6 +12,7 @@ exports.mergeBreakpointsInOrder = mergeBreakpointsInOrder;
 exports.removeUnusedBreakpoints = removeUnusedBreakpoints;
 exports.resolveBreakpointValues = resolveBreakpointValues;
 exports.values = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _merge = _interopRequireDefault(require("./merge"));
@@ -71,23 +72,21 @@ function breakpoints(styleFunction) {
     const extended = themeBreakpoints.keys.reduce((acc, key) => {
       if (props[key]) {
         acc = acc || {};
-        acc[themeBreakpoints.up(key)] = styleFunction({
-          theme,
-          ...props[key]
-        });
+        acc[themeBreakpoints.up(key)] = styleFunction((0, _extends2.default)({
+          theme
+        }, props[key]));
       }
       return acc;
     }, null);
     return (0, _merge.default)(base, extended);
   };
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
-    ...styleFunction.propTypes,
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? (0, _extends2.default)({}, styleFunction.propTypes, {
     xs: _propTypes.default.object,
     sm: _propTypes.default.object,
     md: _propTypes.default.object,
     lg: _propTypes.default.object,
     xl: _propTypes.default.object
-  } : {};
+  }) : {};
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
   return newStyleFunction;
 }

package/createBox.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createBox;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styledEngine = _interopRequireDefault(require("@mui/styled-engine"));
 var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "component"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function createBox(options = {}) {
@@ -25,18 +28,18 @@ function createBox(options = {}) {
   })(_styleFunctionSx.default);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = (0, _useTheme.default)(defaultTheme);
-    const {
-      className,
-      component = 'div',
-      ...other
-    } = (0, _styleFunctionSx.extendSxProp)(inProps);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxRoot, {
+    const _extendSxProp = (0, _styleFunctionSx.extendSxProp)(inProps),
+      {
+        className,
+        component = 'div'
+      } = _extendSxProp,
+      other = (0, _objectWithoutPropertiesLoose2.default)(_extendSxProp, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxRoot, (0, _extends2.default)({
       as: component,
       ref: ref,
       className: (0, _clsx.default)(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme[themeId] || theme : theme,
-      ...other
-    });
+      theme: themeId ? theme[themeId] || theme : theme
+    }, other));
   });
   return Box;
 }

package/createStyled.js

@@ -7,15 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = createStyled;
 exports.shouldForwardProp = shouldForwardProp;
 exports.systemDefaultTheme = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
 var _utils = require("@mui/utils");
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 var _propsToClassKey = _interopRequireDefault(require("./propsToClassKey"));
 var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx"));
+const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+/* eslint-disable no-underscore-dangle */
 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; }
-/* eslint-disable no-underscore-dangle */
-
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -93,27 +95,25 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return (0, _styleFunctionSx.default)({
-      ...props,
-      theme: resolveTheme({
-        ...props,
+    return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {
+      theme: resolveTheme((0, _extends2.default)({}, props, {
         defaultTheme,
         themeId
-      })
-    });
+      }))
+    }));
   };
   systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
     // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
     (0, _styledEngine.internal_processStyles)(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
     const {
-      name: componentName,
-      slot: componentSlot,
-      skipVariantsResolver: inputSkipVariantsResolver,
-      skipSx: inputSkipSx,
-      overridesResolver,
-      ...options
-    } = inputOptions;
+        name: componentName,
+        slot: componentSlot,
+        skipVariantsResolver: inputSkipVariantsResolver,
+        skipSx: inputSkipSx,
+        overridesResolver
+      } = inputOptions,
+      options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -134,43 +134,38 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = (0, _styledEngine.default)(tag, {
+    const defaultStyledResolver = (0, _styledEngine.default)(tag, (0, _extends2.default)({
       shouldForwardProp: shouldForwardPropOption,
-      label,
-      ...options
-    });
+      label
+    }, options));
     const muiStyledResolver = (styleArg, ...expressions) => {
       const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
         // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
-          return stylesArg({
-            ...props,
-            theme: resolveTheme({
-              ...props,
+          return stylesArg((0, _extends2.default)({}, props, {
+            theme: resolveTheme((0, _extends2.default)({}, props, {
               defaultTheme,
               themeId
-            })
-          });
+            }))
+          }));
         } : stylesArg;
       }) : [];
       let transformedStyleArg = styleArg;
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme({
-            ...props,
+          const theme = resolveTheme((0, _extends2.default)({}, props, {
             defaultTheme,
             themeId
-          });
+          }));
           const styleOverrides = getStyleOverrides(componentName, theme);
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle({
-                ...props,
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle((0, _extends2.default)({}, props, {
                 theme
-              }) : slotStyle;
+              })) : slotStyle;
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }
@@ -179,11 +174,10 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme({
-            ...props,
+          const theme = resolveTheme((0, _extends2.default)({}, props, {
             defaultTheme,
             themeId
-          });
+          }));
           return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
@@ -202,14 +196,12 @@ function createStyled(input = {}) {
       // which are basically components used as a selectors.
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
-        transformedStyleArg = props => styleArg({
-          ...props,
-          theme: resolveTheme({
-            ...props,
+        transformedStyleArg = props => styleArg((0, _extends2.default)({}, props, {
+          theme: resolveTheme((0, _extends2.default)({}, props, {
             defaultTheme,
             themeId
-          })
-        });
+          }))
+        }));
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== 'production') {

package/createTheme/createBreakpoints.js

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.breakpointKeys = void 0;
 exports.default = createBreakpoints;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/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.
 const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
@@ -17,34 +21,33 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return {
-      ...acc,
+    return (0, _extends2.default)({}, acc, {
       [obj.key]: obj.val
-    };
+    });
   }, {});
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
 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,
-    ...other
-  } = breakpoints;
+      unit = 'px',
+      step = 5
+    } = breakpoints,
+    other = (0, _objectWithoutPropertiesLoose2.default)(breakpoints, _excluded);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -76,7 +79,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return {
+  return (0, _extends2.default)({
     keys,
     values: sortedValues,
     up,
@@ -84,7 +87,6 @@ function createBreakpoints(breakpoints) {
     between,
     only,
     not,
-    unit,
-    ...other
-  };
+    unit
+  }, other);
 }

package/createTheme/createTheme.js

@@ -5,20 +5,23 @@ 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 _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
 var _shape = _interopRequireDefault(require("./shape"));
 var _createSpacing = _interopRequireDefault(require("./createSpacing"));
 var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
 var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
+const _excluded = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme(options = {}, ...args) {
   const {
-    breakpoints: breakpointsInput = {},
-    palette: paletteInput = {},
-    spacing: spacingInput,
-    shape: shapeInput = {},
-    ...other
-  } = options;
+      breakpoints: breakpointsInput = {},
+      palette: paletteInput = {},
+      spacing: spacingInput,
+      shape: shapeInput = {}
+    } = options,
+    other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
   const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
   const spacing = (0, _createSpacing.default)(spacingInput);
   let muiTheme = (0, _utils.deepmerge)({
@@ -26,21 +29,14 @@ function createTheme(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: {
-      mode: 'light',
-      ...paletteInput
-    },
+    palette: (0, _extends2.default)({
+      mode: 'light'
+    }, paletteInput),
     spacing,
-    shape: {
-      ..._shape.default,
-      ...shapeInput
-    }
+    shape: (0, _extends2.default)({}, _shape.default, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = {
-    ..._defaultSxConfig.default,
-    ...(other == null ? void 0 : other.unstable_sxConfig)
-  };
+  muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _defaultSxConfig.default, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return (0, _styleFunctionSx.default)({
       sx: props,