@mui/system 6.0.0-alpha.5 → 6.0.0-alpha.8

package/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,34 @@ 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
+    }));
   }
   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({
+          ownerState,
+          ...props,
+          ...ownerState
+        });
       } else {
         Object.keys(variant.props).forEach(key => {
           if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -83,9 +81,11 @@ 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({
+          ownerState,
+          ...props,
+          ...ownerState
+        }) : variant.style);
       }
     });
     return result;
@@ -100,27 +100,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 +151,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 +177,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 +189,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) {

package/createTheme/createBreakpoints.js

@@ -1,6 +1,3 @@
-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'];
@@ -12,32 +9,33 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends({}, acc, {
+    return {
+      ...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
-      },
-      unit = 'px',
-      step = 5
-    } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
+    // 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;
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -69,7 +67,7 @@ export default function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends({
+  return {
     keys,
     values: sortedValues,
     up,
@@ -77,6 +75,7 @@ export default function createBreakpoints(breakpoints) {
     between,
     only,
     not,
-    unit
-  }, other);
+    unit,
+    ...other
+  };
 }

package/createTheme/createTheme.js

@@ -1,6 +1,3 @@
-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/deepmerge';
 import createBreakpoints from './createBreakpoints';
 import cssContainerQueries from '../cssContainerQueries';
@@ -11,12 +8,12 @@ import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
 import applyStyles from './applyStyles';
 function createTheme(options = {}, ...args) {
   const {
-      breakpoints: breakpointsInput = {},
-      palette: paletteInput = {},
-      spacing: spacingInput,
-      shape: shapeInput = {}
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded);
+    breakpoints: breakpointsInput = {},
+    palette: paletteInput = {},
+    spacing: spacingInput,
+    shape: shapeInput = {},
+    ...other
+  } = options;
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -24,16 +21,23 @@ function createTheme(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends({
-      mode: 'light'
-    }, paletteInput),
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
     spacing,
-    shape: _extends({}, shape, shapeInput)
+    shape: {
+      ...shape,
+      ...shapeInput
+    }
   }, other);
   muiTheme = cssContainerQueries(muiTheme);
   muiTheme.applyStyles = applyStyles;
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...other?.unstable_sxConfig
+  };
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/cssContainerQueries/cssContainerQueries.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 /**
  * For using in `sx` prop to sort the breakpoint from low to high.
@@ -22,7 +21,9 @@ export function sortContainerQueries(theme, css) {
     delete acc[key];
     acc[key] = value;
     return acc;
-  }, _extends({}, css));
+  }, {
+    ...css
+  });
 }
 export function isCqShorthand(breakpointKeys, value) {
   return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
@@ -62,7 +63,8 @@ export default function cssContainerQueries(themeInput) {
     return node;
   };
   attachCq(containerQueries);
-  return _extends({}, themeInput, {
+  return {
+    ...themeInput,
     containerQueries
-  });
+  };
 }

package/cssVars/createCssVarsProvider.js

@@ -1,7 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
@@ -65,13 +62,12 @@ export default function createCssVarsProvider(options) {
     const ctx = React.useContext(ColorSchemeContext);
     const nested = !!ctx && !disableNestedContext;
     const scopedTheme = themeProp[themeId];
-    const _ref = scopedTheme || themeProp,
-      {
-        colorSchemes = {},
-        components = {},
-        cssVarPrefix
-      } = _ref,
-      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const {
+      colorSchemes = {},
+      components = {},
+      cssVarPrefix,
+      ...restThemeProp
+    } = scopedTheme || themeProp;
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -126,12 +122,13 @@ export default function createCssVarsProvider(options) {
     const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
     // 3. Start composing the theme object
-    const theme = _extends({}, restThemeProp, {
+    const theme = {
+      ...restThemeProp,
       components,
       colorSchemes,
       cssVarPrefix,
       vars: themeVars
-    });
+    };
     if (typeof theme.generateSpacing === 'function') {
       theme.spacing = theme.generateSpacing();
     }
@@ -143,7 +140,10 @@ 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] = _extends({}, theme[schemeKey], scheme[schemeKey]);
+            theme[schemeKey] = {
+              ...theme[schemeKey],
+              ...scheme[schemeKey]
+            };
           } else {
             theme[schemeKey] = scheme[schemeKey];
           }
@@ -299,14 +299,15 @@ 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(_extends({
+  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript({
     attribute: defaultAttribute,
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey
-  }, params));
+    modeStorageKey: defaultModeStorageKey,
+    ...params
+  });
   return {
     CssVarsProvider,
     useColorScheme,

package/cssVars/createCssVarsTheme.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import prepareCssVars from './prepareCssVars';
 function createCssVarsTheme(theme) {
   const output = theme;
-  const result = prepareCssVars(output, _extends({}, theme, {
+  const result = prepareCssVars(output, {
+    ...theme,
     prefix: theme.cssVarPrefix
-  }));
+  });
   output.vars = result.vars;
   output.generateThemeVars = result.generateThemeVars;
   output.generateStyleSheets = result.generateStyleSheets;

package/cssVars/prepareCssVars.js

@@ -1,21 +1,16 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["getSelector"],
-  _excluded2 = ["colorSchemes", "components", "defaultColorScheme"];
 import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './cssVarsParser';
-function prepareCssVars(theme, _ref = {}) {
-  let {
-      getSelector
-    } = _ref,
-    parserConfig = _objectWithoutPropertiesLoose(_ref, _excluded);
+function prepareCssVars(theme, {
+  getSelector,
+  ...parserConfig
+} = {}) {
   // @ts-ignore - ignore components do not exist
   const {
-      colorSchemes = {},
-      defaultColorScheme = 'light'
-    } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded2);
+    colorSchemes = {},
+    components,
+    defaultColorScheme = 'light',
+    ...otherTheme
+  } = theme;
   const {
     vars: rootVars,
     css: rootCss,
@@ -24,9 +19,9 @@ function prepareCssVars(theme, _ref = {}) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      [defaultColorScheme]: defaultScheme
-    } = colorSchemes,
-    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
+    [defaultColorScheme]: defaultScheme,
+    ...otherColorSchemes
+  } = colorSchemes;
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
     const {
       vars,
@@ -53,7 +48,9 @@ function prepareCssVars(theme, _ref = {}) {
     };
   }
   const generateThemeVars = () => {
-    let vars = _extends({}, rootVars);
+    let vars = {
+      ...rootVars
+    };
     Object.entries(colorSchemesMap).forEach(([, {
       vars: schemeVars
     }]) => {
@@ -67,26 +64,34 @@ function prepareCssVars(theme, _ref = {}) {
     function insertStyleSheet(selector, css) {
       if (Object.keys(css).length) {
         stylesheets.push(typeof selector === 'string' ? {
-          [selector]: _extends({}, css)
+          [selector]: {
+            ...css
+          }
         } : selector);
       }
     }
-    insertStyleSheet(getSelector?.(undefined, _extends({}, rootCss)) || ':root', rootCss);
+    insertStyleSheet(getSelector?.(undefined, {
+      ...rootCss
+    }) || ':root', rootCss);
     const {
-        [colorScheme]: defaultSchemeVal
-      } = colorSchemesMap,
-      rest = _objectWithoutPropertiesLoose(colorSchemesMap, [colorScheme].map(_toPropertyKey));
+      [colorScheme]: defaultSchemeVal,
+      ...rest
+    } = colorSchemesMap;
     if (defaultSchemeVal) {
       // default color scheme has to come before other color schemes
       const {
         css
       } = defaultSchemeVal;
-      insertStyleSheet(getSelector?.(colorScheme, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+      insertStyleSheet(getSelector?.(colorScheme, {
+        ...css
+      }) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
     }
     Object.entries(rest).forEach(([key, {
       css
     }]) => {
-      insertStyleSheet(getSelector?.(key, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+      insertStyleSheet(getSelector?.(key, {
+        ...css
+      }) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
     });
     return stylesheets;
   };

package/cssVars/useCurrentColorScheme.js

@@ -1,6 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
 export function getSystemMode(mode) {
@@ -84,10 +83,11 @@ export default function useCurrentColorScheme(options) {
       } catch (e) {
         // Unsupported
       }
-      return _extends({}, currentState, {
+      return {
+        ...currentState,
         mode: newMode,
         systemMode: getSystemMode(newMode)
-      });
+      };
     });
   }, [modeStorageKey, defaultMode]);
   const setColorScheme = React.useCallback(value => {
@@ -99,17 +99,20 @@ export default function useCurrentColorScheme(options) {
         } catch (e) {
           // Unsupported
         }
-        return _extends({}, currentState, {
+        return {
+          ...currentState,
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
-        });
+        };
       });
     } else if (typeof value === 'string') {
       if (value && !joinedColorSchemes.includes(value)) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
-          const newState = _extends({}, currentState);
+          const newState = {
+            ...currentState
+          };
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -128,7 +131,9 @@ export default function useCurrentColorScheme(options) {
       }
     } else {
       setState(currentState => {
-        const newState = _extends({}, currentState);
+        const newState = {
+          ...currentState
+        };
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
         const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         if (newLightColorScheme) {
@@ -168,9 +173,10 @@ export default function useCurrentColorScheme(options) {
         if (currentState.systemMode === systemMode) {
           return currentState;
         }
-        return _extends({}, currentState, {
+        return {
+          ...currentState,
           systemMode
-        });
+        };
       });
     }
   }, [state.mode]);
@@ -222,9 +228,10 @@ export default function useCurrentColorScheme(options) {
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return _extends({}, state, {
+  return {
+    ...state,
     colorScheme,
     setMode,
     setColorScheme
-  });
+  };
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.5
+ * @mui/system v6.0.0-alpha.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the