@mui/system 6.0.0-alpha.6 → 6.0.0-alpha.9

package/modern/Container/createContainer.js

@@ -1,6 +1,3 @@
-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';
@@ -52,20 +49,22 @@ export default function createContainer(options = {}) {
   const ContainerRoot = createStyledComponent(({
     theme,
     ownerState
-  }) => _extends({
+  }) => ({
     width: '100%',
     marginLeft: 'auto',
     boxSizing: 'border-box',
     marginRight: 'auto',
-    display: 'block'
-  }, !ownerState.disableGutters && {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    // @ts-ignore module augmentation fails if custom breakpoints are used
-    [theme.breakpoints.up('sm')]: {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3)
-    }
+    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)
+      }
+    })
   }), ({
     theme,
     ownerState
@@ -82,51 +81,58 @@ export default function createContainer(options = {}) {
   }, {}), ({
     theme,
     ownerState
-  }) => _extends({}, ownerState.maxWidth === 'xs' && {
+  }) => ({
     // @ts-ignore module augmentation fails if custom breakpoints are used
-    [theme.breakpoints.up('xs')]: {
+    ...(ownerState.maxWidth === 'xs' && {
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-    }
-  }, ownerState.maxWidth &&
-  // @ts-ignore module augmentation fails if custom breakpoints are used
-  ownerState.maxWidth !== 'xs' && {
+      [theme.breakpoints.up('xs')]: {
+        // @ts-ignore module augmentation fails if custom breakpoints are used
+        maxWidth: Math.max(theme.breakpoints.values.xs, 444)
+      }
+    }),
+    ...(ownerState.maxWidth &&
     // @ts-ignore module augmentation fails if custom breakpoints are used
-    [theme.breakpoints.up(ownerState.maxWidth)]: {
+    ownerState.maxWidth !== 'xs' && {
       // @ts-ignore module augmentation fails if custom breakpoints are used
-      maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
-    }
+      [theme.breakpoints.up(ownerState.maxWidth)]: {
+        // @ts-ignore module augmentation fails if custom breakpoints are used
+        maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
+      }
+    })
   }));
   const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
     const props = useThemeProps(inProps);
     const {
-        className,
-        component = 'div',
-        disableGutters = false,
-        fixed = false,
-        maxWidth = 'lg'
-      } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded);
-    const ownerState = _extends({}, props, {
+      className,
+      component = 'div',
+      disableGutters = false,
+      fixed = false,
+      maxWidth = 'lg',
+      classes: classesProp,
+      ...other
+    } = props;
+    const ownerState = {
+      ...props,
       component,
       disableGutters,
       fixed,
       maxWidth
-    });
+    };
 
     // @ts-ignore module augmentation fails if custom breakpoints are used
     const classes = useUtilityClasses(ownerState, componentName);
     return (
       /*#__PURE__*/
       // @ts-ignore theme is injected by the styled util
-      _jsx(ContainerRoot, _extends({
+      _jsx(ContainerRoot, {
         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/RtlProvider/index.js

@@ -1,18 +1,15 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
 const RtlContext = /*#__PURE__*/React.createContext();
-function RtlProvider(_ref) {
-  let {
-      value
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/_jsx(RtlContext.Provider, _extends({
-    value: value ?? true
-  }, props));
+function RtlProvider({
+  value,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(RtlContext.Provider, {
+    value: value ?? true,
+    ...props
+  });
 }
 process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
   children: PropTypes.node,

package/modern/Stack/createStack.js

@@ -1,6 +1,3 @@
-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';
@@ -60,17 +57,18 @@ export const style = ({
   ownerState,
   theme
 }) => {
-  let styles = _extends({
+  let styles = {
     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) => {
@@ -138,29 +136,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
-      } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded);
+      component = 'div',
+      direction = 'column',
+      spacing = 0,
+      divider,
+      children,
+      className,
+      useFlexGap = false,
+      ...other
+    } = props;
     const ownerState = {
       direction,
       spacing,
       useFlexGap
     };
     const classes = useUtilityClasses();
-    return /*#__PURE__*/_jsx(StackRoot, _extends({
+    return /*#__PURE__*/_jsx(StackRoot, {
       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,6 +1,5 @@
 'use client';
 
-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';
@@ -15,9 +14,10 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? _extends({}, upperTheme, {
+      const result = themeId ? {
+        ...upperTheme,
         [themeId]: mergedTheme
-      }) : mergedTheme;
+      } : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
       // see the test case "use provided theme from a callback" in ThemeProvider.test.js
       if (isPrivate) {
@@ -25,9 +25,13 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? _extends({}, upperTheme, {
+    return themeId ? {
+      ...upperTheme,
       [themeId]: localTheme
-    }) : _extends({}, upperTheme, localTheme);
+    } : {
+      ...upperTheme,
+      ...localTheme
+    };
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 

package/modern/Unstable_Grid/createGrid.js

@@ -1,6 +1,3 @@
-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';
@@ -60,20 +57,20 @@ export default function createGrid(options = {}) {
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
     const overflow = React.useContext(GridOverflowContext);
     const {
-        className,
-        children,
-        columns: columnsProp = 12,
-        container = false,
-        component = 'div',
-        direction = 'row',
-        wrap = 'wrap',
-        spacing: spacingProp = 0,
-        rowSpacing: rowSpacingProp = spacingProp,
-        columnSpacing: columnSpacingProp = spacingProp,
-        disableEqualOverflow: themeDisableEqualOverflow,
-        unstable_level: level = 0
-      } = props,
-      rest = _objectWithoutPropertiesLoose(props, _excluded);
+      className,
+      children,
+      columns: columnsProp = 12,
+      container = false,
+      component = 'div',
+      direction = 'row',
+      wrap = 'wrap',
+      spacing: spacingProp = 0,
+      rowSpacing: rowSpacingProp = spacingProp,
+      columnSpacing: columnSpacingProp = spacingProp,
+      disableEqualOverflow: themeDisableEqualOverflow,
+      unstable_level: level = 0,
+      ...rest
+    } = props;
     // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
     let disableEqualOverflow = themeDisableEqualOverflow;
     if (level && themeDisableEqualOverflow !== undefined) {
@@ -96,7 +93,8 @@ 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 = _extends({}, props, {
+    const ownerState = {
+      ...props,
       level,
       columns,
       container,
@@ -110,14 +108,14 @@ 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, _extends({
+    let result = /*#__PURE__*/_jsx(GridRoot, {
       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, {
@@ -126,7 +124,7 @@ export default function createGrid(options = {}) {
         }
         return child;
       })
-    }));
+    });
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) {
       // There are 2 possibilities that should wrap with the GridOverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.

package/modern/Unstable_Grid/gridGenerator.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { traverseBreakpoints } from './traverseBreakpoints';
 function appendLevel(level) {
   if (!level) {
@@ -163,23 +162,27 @@ export const generateGridStyles = ({
 }) => {
   const getSelfSpacing = createGetSelfSpacing(ownerState);
   const getParentSpacing = createGetParentSpacing(ownerState);
-  return _extends({
+  return {
     minWidth: 0,
-    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')}`
-  }));
+    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')}`
+      })
+    })
+  };
 };
 export const generateSizeClassNames = gridSize => {
   const classNames = [];

package/modern/breakpoints/breakpoints.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import deepmerge from '@mui/utils/deepmerge';
 import merge from '../merge';
@@ -76,21 +75,23 @@ function breakpoints(styleFunction) {
     const extended = themeBreakpoints.keys.reduce((acc, key) => {
       if (props[key]) {
         acc = acc || {};
-        acc[themeBreakpoints.up(key)] = styleFunction(_extends({
-          theme
-        }, props[key]));
+        acc[themeBreakpoints.up(key)] = styleFunction({
+          theme,
+          ...props[key]
+        });
       }
       return acc;
     }, null);
     return merge(base, extended);
   };
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
+    ...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/createBox.js

@@ -1,8 +1,5 @@
 'use client';
 
-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';
@@ -21,18 +18,18 @@ export default function createBox(options = {}) {
   })(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme(defaultTheme);
-    const _extendSxProp = extendSxProp(inProps),
-      {
-        className,
-        component = 'div'
-      } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded);
-    return /*#__PURE__*/_jsx(BoxRoot, _extends({
+    const {
+      className,
+      component = 'div',
+      ...other
+    } = extendSxProp(inProps);
+    return /*#__PURE__*/_jsx(BoxRoot, {
       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/createStyled.js

@@ -1,8 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ownerState"],
-  _excluded2 = ["variants"],
-  _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import { isPlainObject } from '@mui/utils/deepmerge';
@@ -47,31 +42,35 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
-  let {
-      ownerState
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
-    ownerState
-  }, props)) : callableStyle;
+function processStyleArg(callableStyle, {
+  ownerState,
+  ...props
+}) {
+  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle({
+    ownerState,
+    ...props
+  }) : callableStyle;
   if (Array.isArray(resolvedStylesArg)) {
-    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
-      ownerState
-    }, props)));
+    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, {
+      ownerState,
+      ...props
+    }));
   }
+  const mergedState = {
+    ...props,
+    ...ownerState,
+    ownerState
+  };
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
-        variants = []
-      } = resolvedStylesArg,
-      otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2);
+      variants = [],
+      ...otherStyles
+    } = resolvedStylesArg;
     let result = otherStyles;
     variants.forEach(variant => {
       let isMatch = true;
       if (typeof variant.props === 'function') {
-        isMatch = variant.props(_extends({
-          ownerState
-        }, props, ownerState));
+        isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach(key => {
           if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -83,9 +82,7 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style(_extends({
-          ownerState
-        }, props, ownerState)) : variant.style);
+        result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
       }
     });
     return result;
@@ -100,27 +97,29 @@ export default function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx(_extends({}, props, {
-      theme: resolveTheme(_extends({}, props, {
+    return styleFunctionSx({
+      ...props,
+      theme: resolveTheme({
+        ...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,
-        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-        // For more details: https://github.com/mui/material-ui/pull/37908
-        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
-      } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded3);
+      name: componentName,
+      slot: componentSlot,
+      skipVariantsResolver: inputSkipVariantsResolver,
+      skipSx: inputSkipSx,
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
+      ...options
+    } = inputOptions;
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -149,22 +148,24 @@ export default function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styledEngineStyled(tag, _extends({
+    const defaultStyledResolver = styledEngineStyled(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label
-    }, options));
+      label,
+      ...options
+    });
     const transformStyleArg = 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.
       if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
-        return props => processStyleArg(stylesArg, _extends({}, props, {
+        return props => processStyleArg(stylesArg, {
+          ...props,
           theme: resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
           })
-        }));
+        });
       }
       return stylesArg;
     };
@@ -173,10 +174,11 @@ export default function createStyled(input = {}) {
       const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
+          const theme = resolveTheme({
+            ...props,
             defaultTheme,
             themeId
-          }));
+          });
           if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
             return null;
           }
@@ -184,25 +186,28 @@ export default function createStyled(input = {}) {
           const resolvedStyleOverrides = {};
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
+            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, {
+              ...props,
               theme
-            }));
+            });
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
+          const theme = resolveTheme({
+            ...props,
             defaultTheme,
             themeId
-          }));
+          });
           const themeVariants = theme?.components?.[componentName]?.variants;
           return processStyleArg({
             variants: themeVariants
-          }, _extends({}, props, {
+          }, {
+            ...props,
             theme
-          }));
+          });
         });
       }
       if (!skipSx) {