@mui/system 5.13.1 → 5.13.2

package/Unstable_Grid/createGrid.js

@@ -5,6 +5,8 @@ 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"));
@@ -16,6 +18,7 @@ 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(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 defaultTheme = (0, _createTheme.default)();
@@ -62,20 +65,20 @@ function createGrid(options = {}) {
     const props = (0, _styleFunctionSx.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 = (0, _objectWithoutPropertiesLoose2.default)(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) {
@@ -98,8 +101,7 @@ 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 = (0, _extends2.default)({}, props, {
       level,
       columns,
       container,
@@ -113,15 +115,15 @@ 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, {
+    let result = /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRoot, (0, _extends2.default)({
       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, _utils.unstable_isMuiElement)(child, ['Grid'])) {
           var _child$props$unstable;
@@ -131,7 +133,7 @@ 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`.

package/Unstable_Grid/gridClasses.d.ts

@@ -1,20 +1,20 @@
-export interface GridClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `container={true}`. */
-    container: string;
-    /** Styles applied to the root element if `direction="column"`. */
-    'direction-xs-column': string;
-    /** Styles applied to the root element if `direction="column-reverse"`. */
-    'direction-xs-column-reverse': string;
-    /** Styles applied to the root element if `direction="row-reverse"`. */
-    'direction-xs-row-reverse': string;
-    /** Styles applied to the root element if `wrap="nowrap"`. */
-    'wrap-xs-nowrap': string;
-    /** Styles applied to the root element if `wrap="reverse"`. */
-    'wrap-xs-wrap-reverse': string;
-}
-export type GridClassKey = keyof GridClasses;
-export declare function getGridUtilityClass(slot: string): string;
-declare const gridClasses: GridClasses;
-export default gridClasses;
+export interface GridClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `container={true}`. */
+    container: string;
+    /** Styles applied to the root element if `direction="column"`. */
+    'direction-xs-column': string;
+    /** Styles applied to the root element if `direction="column-reverse"`. */
+    'direction-xs-column-reverse': string;
+    /** Styles applied to the root element if `direction="row-reverse"`. */
+    'direction-xs-row-reverse': string;
+    /** Styles applied to the root element if `wrap="nowrap"`. */
+    'wrap-xs-nowrap': string;
+    /** Styles applied to the root element if `wrap="reverse"`. */
+    'wrap-xs-wrap-reverse': string;
+}
+export type GridClassKey = keyof GridClasses;
+export declare function getGridUtilityClass(slot: string): string;
+declare const gridClasses: GridClasses;
+export default gridClasses;

package/Unstable_Grid/gridGenerator.d.ts

@@ -1,38 +1,38 @@
-import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
-import { Spacing } from '../createTheme/createSpacing';
-import { ResponsiveStyleValue } from '../styleFunctionSx';
-import { GridDirection, GridOwnerState } from './GridProps';
-interface Props {
-    theme: {
-        breakpoints: Breakpoints;
-        spacing?: Spacing;
-    };
-    ownerState: GridOwnerState & {
-        parentDisableEqualOverflow?: boolean;
-    };
-}
-interface Iterator<T> {
-    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
-}
-export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
-export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
-export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {
-    [x: string]: string;
-    '--Grid-columns'?: undefined;
-} | {
-    '--Grid-columns': number;
-};
-export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {
-    [x: string]: string;
-};
-export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {
-    [x: string]: string;
-};
-export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridStyles: ({ ownerState }: Props) => {};
-export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
-export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
-export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
-export {};
+import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+import { Spacing } from '../createTheme/createSpacing';
+import { ResponsiveStyleValue } from '../styleFunctionSx';
+import { GridDirection, GridOwnerState } from './GridProps';
+interface Props {
+    theme: {
+        breakpoints: Breakpoints;
+        spacing?: Spacing;
+    };
+    ownerState: GridOwnerState & {
+        parentDisableEqualOverflow?: boolean;
+    };
+}
+interface Iterator<T> {
+    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
+}
+export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
+export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
+export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {
+    [x: string]: string;
+    '--Grid-columns'?: undefined;
+} | {
+    '--Grid-columns': number;
+};
+export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {
+    [x: string]: string;
+};
+export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {
+    [x: string]: string;
+};
+export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridStyles: ({ ownerState }: Props) => {};
+export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
+export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
+export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
+export {};

package/Unstable_Grid/gridGenerator.js

@@ -1,9 +1,11 @@
 "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;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function appendLevel(level) {
   if (!level) {
     return '';
@@ -219,27 +221,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

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

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/createSpacing.d.ts

@@ -1,10 +1,10 @@
-export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
-export type SpacingArgument = number | string;
-export interface Spacing {
-    (): string;
-    (value: number): string;
-    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
-    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
-    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
-}
-export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
+export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
+export type SpacingArgument = number | string;
+export interface Spacing {
+    (): string;
+    (value: number): string;
+    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
+    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
+    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
+}
+export default function createSpacing(spacingInput?: SpacingOptions): Spacing;