@mui/system 5.13.1 → 5.13.2

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,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 function appendLevel(level) {
   if (!level) {
     return '';
@@ -203,27 +204,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/breakpoints.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
 import merge from './merge';
@@ -58,23 +59,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(_extends({
+          theme
+        }, props[key]));
       }
       return acc;
     }, null);
     return merge(base, extended);
   };
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
-    ...styleFunction.propTypes,
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
     xs: PropTypes.object,
     sm: PropTypes.object,
     md: PropTypes.object,
     lg: PropTypes.object,
     xl: PropTypes.object
-  } : {};
+  }) : {};
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
   return newStyleFunction;
 }

package/modern/createBox.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "component"];
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
@@ -16,18 +19,18 @@ export default function createBox(options = {}) {
   })(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme(defaultTheme);
-    const {
-      className,
-      component = 'div',
-      ...other
-    } = extendSxProp(inProps);
-    return /*#__PURE__*/_jsx(BoxRoot, {
+    const _extendSxProp = extendSxProp(inProps),
+      {
+        className,
+        component = 'div'
+      } = _extendSxProp,
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded);
+    return /*#__PURE__*/_jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
       className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme[themeId] || theme : theme,
-      ...other
-    });
+      theme: themeId ? theme[themeId] || theme : theme
+    }, other));
   });
   return Box;
 }

package/modern/createStyled.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import { getDisplayName } from '@mui/utils';
@@ -79,27 +82,25 @@ export default function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx({
-      ...props,
-      theme: resolveTheme({
-        ...props,
+    return styleFunctionSx(_extends({}, props, {
+      theme: resolveTheme(_extends({}, 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.
     processStyles(tag, styles => styles.filter(style => !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 = _objectWithoutPropertiesLoose(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;
@@ -120,43 +121,38 @@ export default function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styledEngineStyled(tag, {
+    const defaultStyledResolver = styledEngineStyled(tag, _extends({
       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(_extends({}, props, {
+            theme: resolveTheme(_extends({}, props, {
               defaultTheme,
               themeId
-            })
-          });
+            }))
+          }));
         } : stylesArg;
       }) : [];
       let transformedStyleArg = styleArg;
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme({
-            ...props,
+          const theme = resolveTheme(_extends({}, 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(_extends({}, props, {
                 theme
-              }) : slotStyle;
+              })) : slotStyle;
             });
             return overridesResolver(props, resolvedStyleOverrides);
           }
@@ -165,11 +161,10 @@ export default function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme({
-            ...props,
+          const theme = resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
-          });
+          }));
           return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
@@ -188,14 +183,12 @@ export default 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(_extends({}, props, {
+          theme: resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
-          })
-        });
+          }))
+        }));
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== 'production') {

package/modern/createTheme/createBreakpoints.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/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.
 export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
@@ -9,34 +12,33 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return {
-      ...acc,
+    return _extends({}, acc, {
       [obj.key]: obj.val
-    };
+    });
   }, {});
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
 export default 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 = _objectWithoutPropertiesLoose(breakpoints, _excluded);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -68,7 +70,7 @@ export default function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return {
+  return _extends({
     keys,
     values: sortedValues,
     up,
@@ -76,7 +78,6 @@ export default function createBreakpoints(breakpoints) {
     between,
     only,
     not,
-    unit,
-    ...other
-  };
+    unit
+  }, other);
 }

package/modern/createTheme/createTheme.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["breakpoints", "palette", "spacing", "shape"];
 import { deepmerge } from '@mui/utils';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
@@ -6,12 +9,12 @@ import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
 import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
 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 = _objectWithoutPropertiesLoose(options, _excluded);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -19,21 +22,14 @@ function createTheme(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: {
-      mode: 'light',
-      ...paletteInput
-    },
+    palette: _extends({
+      mode: 'light'
+    }, paletteInput),
     spacing,
-    shape: {
-      ...shape,
-      ...shapeInput
-    }
+    shape: _extends({}, shape, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig,
-    ...other?.unstable_sxConfig
-  };
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/modern/cssVars/createCssVarsProvider.js

@@ -1,4 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { deepmerge } from '@mui/utils';
@@ -55,16 +58,17 @@ export default function createCssVarsProvider(options) {
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const scopedTheme = themeProp[themeId];
-    const {
-      colorSchemes = {},
-      components = {},
-      generateCssVars = () => ({
-        vars: {},
-        css: {}
-      }),
-      cssVarPrefix,
-      ...restThemeProp
-    } = scopedTheme || themeProp;
+    const _ref = scopedTheme || themeProp,
+      {
+        colorSchemes = {},
+        components = {},
+        generateCssVars = () => ({
+          vars: {},
+          css: {}
+        }),
+        cssVarPrefix
+      } = _ref,
+      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -122,14 +126,13 @@ export default function createCssVarsProvider(options) {
     } = generateCssVars();
 
     // 3. Start composing the theme object
-    const theme = {
-      ...restThemeProp,
+    const theme = _extends({}, restThemeProp, {
       components,
       colorSchemes,
       cssVarPrefix,
       vars: rootVars,
       getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
-    };
+    });
 
     // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
     //    The default color scheme stylesheet is constructed to have the least CSS specificity.
@@ -147,10 +150,7 @@ export default function createCssVarsProvider(options) {
         Object.keys(scheme).forEach(schemeKey => {
           if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = {
-              ...theme[schemeKey],
-              ...scheme[schemeKey]
-            };
+            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
           } else {
             theme[schemeKey] = scheme[schemeKey];
           }
@@ -320,15 +320,14 @@ export default function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
   const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript({
+  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey,
-    ...params
-  });
+    modeStorageKey: defaultModeStorageKey
+  }, params));
   return {
     CssVarsProvider,
     useColorScheme,

package/modern/cssVars/createCssVarsTheme.js

@@ -1,16 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
 import prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
   const {
-    cssVarPrefix,
-    shouldSkipGeneratingVar,
-    ...otherTheme
-  } = theme;
-  return {
-    ...theme,
-    ...prepareCssVars(otherTheme, {
-      prefix: cssVarPrefix,
+      cssVarPrefix,
       shouldSkipGeneratingVar
-    })
-  };
+    } = theme,
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
+  return _extends({}, theme, prepareCssVars(otherTheme, {
+    prefix: cssVarPrefix,
+    shouldSkipGeneratingVar
+  }));
 }
 export default createCssVarsTheme;

package/modern/cssVars/prepareCssVars.js

@@ -1,12 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["colorSchemes", "components"],
+  _excluded2 = ["light"];
 import { deepmerge } from '@mui/utils';
 import cssVarsParser from './cssVarsParser';
 function prepareCssVars(theme, parserConfig) {
   // @ts-ignore - ignore components do not exist
   const {
-    colorSchemes = {},
-    components,
-    ...otherTheme
-  } = theme;
+      colorSchemes = {}
+    } = theme,
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
   const {
     vars: rootVars,
     css: rootCss,
@@ -15,9 +18,9 @@ function prepareCssVars(theme, parserConfig) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-    light,
-    ...otherColorSchemes
-  } = colorSchemes;
+      light
+    } = colorSchemes,
+    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2);
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
     const {
       vars,
@@ -46,16 +49,12 @@ function prepareCssVars(theme, parserConfig) {
   const generateCssVars = colorScheme => {
     if (!colorScheme) {
       return {
-        css: {
-          ...rootCss
-        },
+        css: _extends({}, rootCss),
         vars: rootVars
       };
     }
     return {
-      css: {
-        ...colorSchemesMap[colorScheme].css
-      },
+      css: _extends({}, colorSchemesMap[colorScheme].css),
       vars: colorSchemesMap[colorScheme].vars
     };
   };