@mui/system - npm Package Compare versions

Comparing version 6.0.0-dev.240424162023-9968b4889d to 6.0.0-rc.0

Box/Box.d.ts

@@ -186,7 +186,2 @@ import * as React from 'react';
   children?: React.ReactNode;
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component?: React.ElementType;
   ref?: React.Ref<unknown>;
@@ -193,0 +188,0 @@ /**

breakpoints/breakpoints.d.ts

 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import type { Breakpoint } from '../createTheme';
@@ -4,0 +4,0 @@ import { ResponsiveStyleValue } from '../styleFunctionSx';

breakpoints/breakpoints.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
@@ -56,3 +55,3 @@ import deepmerge from '@mui/utils/deepmerge';
       // key is breakpoint
-      else if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+      else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
         const mediaKey = themeBreakpoints.up(breakpoint);
@@ -80,5 +79,6 @@ acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
         acc = acc || {};
-        acc[themeBreakpoints.up(key)] = styleFunction(_extends({
-          theme
-        }, props[key]));
+        acc[themeBreakpoints.up(key)] = styleFunction({
+          theme,
+          ...props[key]
+        });
       }
@@ -89,3 +89,4 @@ return acc;
   };
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
+    ...styleFunction.propTypes,
     xs: PropTypes.object,
@@ -96,3 +97,3 @@ sm: PropTypes.object,
     xl: PropTypes.object
-  }) : {};
+  } : {};
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
@@ -99,0 +100,0 @@ return newStyleFunction;

colorManipulator/colorManipulator.js

@@ -58,3 +58,3 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
   const type = color.substring(0, marker);
-  if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
+  if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
@@ -71,3 +71,3 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : _formatMuiErrorMessage(9, color));
     }
-    if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
+    if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
@@ -95,3 +95,3 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : _formatMuiErrorMessage(10, colorSpace));
   const decomposedColor = decomposeColor(color);
-  return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
+  return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.includes('hsl') && idx !== 0 ? `${val}%` : val).join(' ');
 };
@@ -124,10 +124,10 @@ export const private_safeColorChannel = (color, warning) => {
   } = color;
-  if (type.indexOf('rgb') !== -1) {
+  if (type.includes('rgb')) {
     // Only convert the first 3 values to int (i.e. not alpha)
     values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
-  } else if (type.indexOf('hsl') !== -1) {
+  } else if (type.includes('hsl')) {
     values[1] = `${values[1]}%`;
     values[2] = `${values[2]}%`;
   }
-  if (type.indexOf('color') !== -1) {
+  if (type.includes('color')) {
     values = `${colorSpace} ${values.join(' ')}`;
@@ -147,3 +147,3 @@ } else {
   // Idempotent
-  if (color.indexOf('#') === 0) {
+  if (color.startsWith('#')) {
     return color;
@@ -259,5 +259,5 @@ }
   coefficient = clampWrapper(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
+  if (color.type.includes('hsl')) {
     color.values[2] *= 1 - coefficient;
-  } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
+  } else if (color.type.includes('rgb') || color.type.includes('color')) {
     for (let i = 0; i < 3; i += 1) {
@@ -289,9 +289,9 @@ color.values[i] *= 1 - coefficient;
   coefficient = clampWrapper(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
+  if (color.type.includes('hsl')) {
     color.values[2] += (100 - color.values[2]) * coefficient;
-  } else if (color.type.indexOf('rgb') !== -1) {
+  } else if (color.type.includes('rgb')) {
     for (let i = 0; i < 3; i += 1) {
       color.values[i] += (255 - color.values[i]) * coefficient;
     }
-  } else if (color.type.indexOf('color') !== -1) {
+  } else if (color.type.includes('color')) {
     for (let i = 0; i < 3; i += 1) {
@@ -298,0 +298,0 @@ color.values[i] += (1 - color.values[i]) * coefficient;

Container/createContainer.js

@@ -1,4 +0,1 @@
-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';
@@ -55,3 +52,3 @@ import PropTypes from 'prop-types';
     ownerState
-  }) => _extends({
+  }) => ({
     width: '100%',
@@ -61,11 +58,11 @@ marginLeft: 'auto',
     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)
-    }
+    ...(!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)
+      }
+    })
   }), ({
@@ -87,16 +84,20 @@ 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}`
+      }
+    })
   }));
@@ -106,10 +107,12 @@ const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
     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,
@@ -119,3 +122,3 @@ disableGutters,
       maxWidth
-    });
+    };
 
@@ -127,3 +130,3 @@ // @ts-ignore module augmentation fails if custom breakpoints are used
       // @ts-ignore theme is injected by the styled util
-      _jsx(ContainerRoot, _extends({
+      _jsx(ContainerRoot, {
         as: component
@@ -134,4 +137,5 @@ // @ts-ignore module augmentation fails if custom breakpoints are used
         className: clsx(classes.root, className),
-        ref: ref
-      }, other))
+        ref: ref,
+        ...other
+      })
     );
@@ -138,0 +142,0 @@ });

createBox/createBox.js

 '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';
@@ -24,16 +21,16 @@ import clsx from 'clsx';
     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;
 }

createStyled/createStyled.js

@@ -1,6 +0,1 @@
-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 */
@@ -13,15 +8,4 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import styleFunctionSx from '../styleFunctionSx';
-function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
-}
+export const systemDefaultTheme = createTheme();
 
-// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
-function isStringTag(tag) {
-  return typeof tag === 'string' &&
-  // 96 is one less than the char code
-  // for "a" so this is checking that
-  // it's a lowercase character
-  tag.charCodeAt(0) > 96;
-}
-
 // Update /system/styled/#api in case if this changes
@@ -31,15 +15,17 @@ export function shouldForwardProp(prop) {
 }
-export const systemDefaultTheme = createTheme();
-const lowercaseFirstLetter = string => {
-  if (!string) {
-    return string;
+function resolveTheme(themeId, theme, defaultTheme) {
+  return isObjectEmpty(theme) ? defaultTheme : theme[themeId] || theme;
+}
+const PROCESSED_PROPS = Symbol('mui.processed_props');
+function attachTheme(props, themeId, defaultTheme) {
+  if (PROCESSED_PROPS in props) {
+    return props[PROCESSED_PROPS];
   }
-  return string.charAt(0).toLowerCase() + string.slice(1);
-};
-function resolveTheme({
-  defaultTheme,
-  theme,
-  themeId
-}) {
-  return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
+  const processedProps = {
+    ...props,
+    theme: resolveTheme(themeId, props.theme, defaultTheme)
+  };
+  props[PROCESSED_PROPS] = processedProps;
+  processedProps[PROCESSED_PROPS] = processedProps;
+  return processedProps;
 }
@@ -50,48 +36,55 @@ function defaultOverridesResolver(slot) {
   }
-  return (props, styles) => styles[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;
-  if (Array.isArray(resolvedStylesArg)) {
-    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
-      ownerState
-    }, props)));
+function processStyle(style, props) {
+  const resolvedStyle = typeof style === 'function' ? style(props) : style;
+  if (Array.isArray(resolvedStyle)) {
+    return resolvedStyle.flatMap(subStyle => processStyle(subStyle, props));
   }
-  if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
+  if (Array.isArray(resolvedStyle?.variants)) {
     const {
-        variants = []
-      } = resolvedStylesArg,
-      otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2);
+      variants,
+      ...otherStyles
+    } = resolvedStyle;
     let result = otherStyles;
-    variants.forEach(variant => {
-      let isMatch = true;
+    let mergedState; // We might not need it, initalized lazily
+
+    /* eslint-disable no-labels */
+    variantLoop: for (let i = 0; i < variants.length; i += 1) {
+      const variant = variants[i];
       if (typeof variant.props === 'function') {
-        isMatch = variant.props(_extends({
-          ownerState
-        }, props, ownerState));
+        mergedState ??= {
+          ...props,
+          ...props.ownerState,
+          ownerState: props.ownerState
+        };
+        if (!variant.props(mergedState)) {
+          continue;
+        }
       } else {
-        Object.keys(variant.props).forEach(key => {
-          if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-            isMatch = false;
+        for (const key in variant.props) {
+          if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
+            continue variantLoop;
           }
-        });
-      }
-      if (isMatch) {
-        if (!Array.isArray(result)) {
-          result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style(_extends({
-          ownerState
-        }, props, ownerState)) : variant.style);
       }
-    });
+      if (!Array.isArray(result)) {
+        result = [result];
+      }
+      if (typeof variant.style === 'function') {
+        mergedState ??= {
+          ...props,
+          ...props.ownerState,
+          ownerState: props.ownerState
+        };
+        result.push(variant.style(mergedState));
+      } else {
+        result.push(variant.style);
+      }
+    }
+    /* eslint-enable no-labels */
+
     return result;
   }
-  return resolvedStylesArg;
+  return resolvedStyle;
 }
@@ -106,23 +99,18 @@ export default function createStyled(input = {}) {
   const systemSx = props => {
-    return styleFunctionSx(_extends({}, props, {
-      theme: resolveTheme(_extends({}, props, {
-        defaultTheme,
-        themeId
-      }))
-    }));
+    return styleFunctionSx(attachTheme(props, themeId, defaultTheme));
   };
   systemSx.__mui_systemSx = true;
-  return (tag, inputOptions = {}) => {
+  const styled = (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;
 
@@ -156,30 +144,22 @@ // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     }
-    const defaultStyledResolver = styledEngineStyled(tag, _extends({
+    const defaultStyledResolver = styledEngineStyled(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label
-    }, options));
-    const transformStyleArg = stylesArg => {
+      label,
+      ...options
+    });
+    const transformStyleArg = style => {
       // 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, {
-          theme: resolveTheme({
-            theme: props.theme,
-            defaultTheme,
-            themeId
-          })
-        }));
+      if (typeof style === 'function' && style.__emotion_real !== style || isPlainObject(style)) {
+        return props => processStyle(style, attachTheme(props, themeId, defaultTheme));
       }
-      return stylesArg;
+      return style;
     };
-    const muiStyledResolver = (styleArg, ...expressions) => {
-      let transformedStyleArg = transformStyleArg(styleArg);
+    const muiStyledResolver = (style, ...expressions) => {
+      let transformedStyle = transformStyleArg(style);
       const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }));
+          const theme = resolveTheme(themeId, props.theme, defaultTheme);
           if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
@@ -190,8 +170,9 @@ return null;
           const resolvedStyleOverrides = {};
+          const propsWithTheme = attachTheme(props, themeId, defaultTheme);
+
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
-          Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
-              theme
-            }));
-          });
+          // eslint-disable-next-line guard-for-in
+          for (const slotKey in styleOverrides) {
+            resolvedStyleOverrides[slotKey] = processStyle(styleOverrides[slotKey], propsWithTheme);
+          }
           return overridesResolver(props, resolvedStyleOverrides);
@@ -202,12 +183,10 @@ });
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }));
+          const theme = resolveTheme(themeId, props.theme, defaultTheme);
           const themeVariants = theme?.components?.[componentName]?.variants;
-          return processStyleArg({
+          if (!themeVariants) {
+            return null;
+          }
+          return processStyle({
             variants: themeVariants
-          }, _extends({}, props, {
-            theme
-          }));
+          }, attachTheme(props, themeId, defaultTheme));
         });
@@ -219,9 +198,9 @@ }
       const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-      if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
+      if (Array.isArray(style) && numOfCustomFnsApplied > 0) {
         const placeholders = new Array(numOfCustomFnsApplied).fill('');
         // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
-        transformedStyleArg = [...styleArg, ...placeholders];
-        transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
+        transformedStyle = [...style, ...placeholders];
+        transformedStyle.raw = [...style.raw, ...placeholders];
       }
-      const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
+      const Component = defaultStyledResolver(transformedStyle, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== 'production') {
@@ -247,2 +226,25 @@ let displayName;
   };
+  return styled;
+}
+function isObjectEmpty(object) {
+  // eslint-disable-next-line
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
+
+// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
+function isStringTag(tag) {
+  return typeof tag === 'string' &&
+  // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96;
+}
+function lowercaseFirstLetter(string) {
+  if (!string) {
+    return string;
+  }
+  return string.charAt(0).toLowerCase() + string.slice(1);
 }

createTheme/applyStyles.d.ts

@@ -9,3 +9,3 @@ import { CSSObject } from '@mui/styled-engine';
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
@@ -12,0 +12,0 @@ *

createTheme/applyStyles.js

@@ -5,3 +5,3 @@ /**
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
@@ -63,6 +63,12 @@ *
   const theme = this;
-  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
-    // If CssVarsProvider is used as a provider,
-    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
-    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+  if (theme.vars) {
+    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
+      return {};
+    }
+    // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
+    let selector = theme.getColorSchemeSelector(key);
+    if (selector.includes('data-') || selector.includes('.')) {
+      // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
+      selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
+    }
     return {
@@ -69,0 +75,0 @@ [selector]: styles

createTheme/createSpacing.d.ts

@@ -10,2 +10,2 @@ export type SpacingOptions = number | string | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
 }
-export default function createSpacing(spacingInput?: SpacingOptions, transform?: Spacing | (() => undefined) | ((abs: string | number) => number)): Spacing;
+export default function createSpacing(spacingInput?: SpacingOptions, transform?: Spacing | (() => undefined) | ((abs: number | string) => number | number)): Spacing;

createTheme/createTheme.d.ts

 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
+import { Breakpoints, BreakpointsOptions } from '../createBreakpoints/createBreakpoints';
 import { Shape, ShapeOptions } from './shape';
@@ -9,3 +9,7 @@ import { Spacing, SpacingOptions } from './createSpacing';
 
-export { Breakpoint, BreakpointOverrides } from './createBreakpoints';
+export {
+  Breakpoint,
+  Breakpoints,
+  BreakpointOverrides,
+} from '../createBreakpoints/createBreakpoints';
 
@@ -12,0 +16,0 @@ export type Direction = 'ltr' | 'rtl';

createTheme/createTheme.js

@@ -1,6 +0,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 createBreakpoints from '../createBreakpoints/createBreakpoints';
 import cssContainerQueries from '../cssContainerQueries';
@@ -14,8 +11,8 @@ import shape from './shape';
   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);
@@ -28,7 +25,11 @@ const spacing = createSpacing(spacingInput);
     // Inject component definitions.
-    palette: _extends({
-      mode: 'light'
-    }, paletteInput),
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
     spacing,
-    shape: _extends({}, shape, shapeInput)
+    shape: {
+      ...shape,
+      ...shapeInput
+    }
   }, other);
@@ -38,3 +39,6 @@ muiTheme = cssContainerQueries(muiTheme);
   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) {
@@ -41,0 +45,0 @@ return styleFunctionSx({

createTheme/index.js

 export { default } from './createTheme';
-export { default as private_createBreakpoints } from './createBreakpoints';
+export { default as private_createBreakpoints } from '../createBreakpoints/createBreakpoints';
 export { default as unstable_applyStyles } from './applyStyles';

cssContainerQueries/cssContainerQueries.d.ts

@@ -1,2 +0,2 @@
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 interface ContainerQueries {
@@ -3,0 +3,0 @@ up: Breakpoints['up'];

cssContainerQueries/cssContainerQueries.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
@@ -25,13 +24,15 @@ /**
     return acc;
-  }, _extends({}, css));
+  }, {
+    ...css
+  });
 }
 export function isCqShorthand(breakpointKeys, value) {
-  return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
 export function getContainerQuery(theme, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(21, `(${shorthand})`));
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(18, `(${shorthand})`));
     }
@@ -41,3 +42,3 @@ return null;
   const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme.containerQueries(containerName).up(value);
@@ -56,3 +57,3 @@ }
         // `@container` does not work with `not all and`, so need to invert the logic
-        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
       }
@@ -68,5 +69,6 @@ return result;
   attachCq(containerQueries);
-  return _extends({}, themeInput, {
+  return {
+    ...themeInput,
     containerQueries
-  });
+  };
 }

cssVars/createCssVarsProvider.d.ts

 import * as React from 'react';
-import getInitColorSchemeScript from './getInitColorSchemeScript';
-import { Mode, Result } from './useCurrentColorScheme';
+import InitColorSchemeScript from '../InitColorSchemeScript';
+import { Result } from './useCurrentColorScheme';
 
@@ -33,7 +33,2 @@ export interface ColorSchemeContextValue<SupportedColorScheme extends string>
   /**
-   * Design system default mode
-   * @default 'light'
-   */
-  defaultMode?: Mode;
-  /**
    * Disable CSS transitions when switching between modes or color schemes
@@ -57,4 +52,6 @@ * @default false
           {
+            cssVariables?: false;
             cssVarPrefix?: string;
-            colorSchemes: Record<ColorScheme, Record<string, any>>;
+            colorSchemes: Partial<Record<ColorScheme, any>>;
+            colorSchemeSelector?: 'media' | 'class' | 'data' | string;
           }
@@ -73,7 +70,2 @@ >;
         /**
-         * The CSS selector for attaching the generated custom properties
-         * @default ':root'
-         */
-        colorSchemeSelector?: string;
-        /**
          * The window that attaches the 'storage' event listener
@@ -96,5 +88,5 @@ * @default window
     >,
-  ) => React.ReactElement;
+  ) => React.ReactElement<any>;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
-  getInitColorSchemeScript: typeof getInitColorSchemeScript;
+  getInitColorSchemeScript: typeof InitColorSchemeScript;
 }
@@ -101,0 +93,0 @@

cssVars/createCssVarsProvider.js

@@ -1,5 +0,1 @@
-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';
@@ -10,3 +6,3 @@ import PropTypes from 'prop-types';
 import ThemeProvider from '../ThemeProvider';
-import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
@@ -25,13 +21,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     theme: defaultTheme = {},
-    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    defaultMode: designSystemMode = 'light',
-    defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
+    defaultColorScheme,
     resolveTheme
   } = options;
-  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.dark]) {
-    console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
-  }
+  const defaultContext = {
+    allColorSchemes: [],
+    colorScheme: undefined,
+    darkColorScheme: undefined,
+    lightColorScheme: undefined,
+    mode: undefined,
+    setColorScheme: () => {},
+    setMode: () => {},
+    systemMode: undefined
+  };
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -41,18 +42,9 @@ if (process.env.NODE_ENV !== 'production') {
   }
-  const useColorScheme = () => {
-    const value = React.useContext(ColorSchemeContext);
-    if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : _formatMuiErrorMessage(19));
-    }
-    return value;
-  };
+  const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
   function CssVarsProvider(props) {
     const {
       children,
-      theme: themeProp = defaultTheme,
+      theme: themeProp,
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
-      attribute = defaultAttribute,
-      defaultMode = designSystemMode,
-      defaultColorScheme = designSystemColorScheme,
       disableTransitionOnChange = designSystemTransitionOnChange,
@@ -62,3 +54,2 @@ storageWindow = typeof window === 'undefined' ? undefined : window,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-      colorSchemeSelector = ':root',
       disableNestedContext = false,
@@ -71,13 +62,20 @@ disableStyleSheetGeneration = false
     const nested = !!ctx && !disableNestedContext;
-    const scopedTheme = themeProp[themeId];
-    const _ref = scopedTheme || themeProp,
-      {
-        colorSchemes = {},
-        components = {},
-        cssVarPrefix
-      } = _ref,
-      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
-    const allColorSchemes = Object.keys(colorSchemes);
+    const initialTheme = React.useMemo(() => {
+      if (themeProp) {
+        return themeProp;
+      }
+      return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
+    }, [themeProp]);
+    const scopedTheme = initialTheme[themeId];
+    const {
+      colorSchemes = {},
+      components = {},
+      cssVarPrefix,
+      ...restThemeProp
+    } = scopedTheme || initialTheme;
+    const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
+    const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
@@ -108,24 +106,6 @@ // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     }
-    const calculatedMode = (() => {
-      if (mode) {
-        return mode;
-      }
-      // This scope occurs on the server
-      if (defaultMode === 'system') {
-        return designSystemMode;
-      }
-      return defaultMode;
-    })();
-    const calculatedColorScheme = (() => {
-      if (!colorScheme) {
-        // This scope occurs on the server
-        if (calculatedMode === 'dark') {
-          return defaultDarkColorScheme;
-        }
-        // use light color scheme, if default mode is 'light' | 'system'
-        return defaultLightColorScheme;
-      }
-      return colorScheme;
-    })();
 
+    // `colorScheme` is undefined on the server and hydration phase
+    const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
+
     // 2. get the `vars` object that refers to the CSS custom properties
@@ -135,3 +115,4 @@ const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
     // 3. Start composing the theme object
-    const theme = _extends({}, restThemeProp, {
+    const theme = {
+      ...restThemeProp,
       components,
@@ -141,3 +122,3 @@ colorSchemes,
       vars: themeVars
-    });
+    };
     if (typeof theme.generateSpacing === 'function') {
@@ -148,4 +129,5 @@ theme.spacing = theme.generateSpacing();
     // 4. Resolve the color scheme and merge it to the theme
-    Object.entries(colorSchemes).forEach(([key, scheme]) => {
-      if (key === calculatedColorScheme) {
+    if (calculatedColorScheme) {
+      const scheme = colorSchemes[calculatedColorScheme];
+      if (scheme && typeof scheme === 'object') {
         // 4.1 Merge the selected color scheme to the theme
@@ -155,3 +137,6 @@ Object.keys(scheme).forEach(schemeKey => {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
+            theme[schemeKey] = {
+              ...theme[schemeKey],
+              ...scheme[schemeKey]
+            };
           } else {
@@ -161,21 +146,3 @@ theme[schemeKey] = scheme[schemeKey];
         });
-        if (theme.palette) {
-          theme.palette.colorScheme = key;
-        }
       }
-    });
-    const resolvedDefaultColorScheme = (() => {
-      if (typeof defaultColorScheme === 'string') {
-        return defaultColorScheme;
-      }
-      if (defaultMode === 'dark') {
-        return defaultColorScheme.dark;
-      }
-      return defaultColorScheme.light;
-    })();
-    themeProp.defaultColorScheme = resolvedDefaultColorScheme;
-    themeProp.colorSchemeSelector = colorSchemeSelector;
-    themeProp.attribute = attribute;
-    if (!theme.getColorSchemeSelector) {
-      theme.getColorSchemeSelector = targetColorScheme => `[${attribute}="${targetColorScheme}"] &`;
     }
@@ -185,8 +152,38 @@
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    const colorSchemeSelector = restThemeProp.colorSchemeSelector;
     React.useEffect(() => {
-      if (colorScheme && colorSchemeNode) {
-        // attaches attribute to <html> because the css variables are attached to :root (html)
-        colorSchemeNode.setAttribute(attribute, colorScheme);
+      if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
+        const selector = colorSchemeSelector;
+        let rule = colorSchemeSelector;
+        if (selector === 'class') {
+          rule = `.%s`;
+        }
+        if (selector === 'data') {
+          rule = `[data-%s]`;
+        }
+        if (selector?.startsWith('data-') && !selector.includes('%s')) {
+          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+          rule = `[${selector}="%s"]`;
+        }
+        if (rule.startsWith('.')) {
+          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => rule.substring(1).replace('%s', scheme)));
+          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
+        } else {
+          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
+          if (matches) {
+            const [attr, value] = matches[1].split('=');
+            if (!value) {
+              // for attributes like `data-theme-dark`, `data-theme-light`
+              // remove all the existing data attributes before setting the new one
+              allColorSchemes.forEach(scheme => {
+                colorSchemeNode.removeAttribute(attr.replace(colorScheme, scheme));
+              });
+            }
+            colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
+          } else {
+            colorSchemeNode.setAttribute(rule, colorScheme);
+          }
+        }
       }
-    }, [colorScheme, attribute, colorSchemeNode]);
+    }, [colorScheme, colorSchemeSelector, colorSchemeNode, allColorSchemes]);
 
@@ -229,3 +226,3 @@ // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
+    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -254,6 +251,2 @@ }
     /**
-     * The body attribute name to attach colorScheme.
-     */
-    attribute: PropTypes.string,
-    /**
      * The component tree.
@@ -267,6 +260,2 @@ */
     /**
-     * The CSS selector for attaching the generated custom properties
-     */
-    colorSchemeSelector: PropTypes.string,
-    /**
      * localStorage key used to store `colorScheme`
@@ -276,10 +265,2 @@ */
     /**
-     * The initial color scheme used.
-     */
-    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    /**
-     * The initial mode used.
-     */
-    defaultMode: PropTypes.string,
-    /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
@@ -316,12 +297,11 @@ */
   } : void 0;
-  const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
-  const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
-    attribute: defaultAttribute,
+  const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+  const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+  const getInitColorSchemeScript = params => InitColorSchemeScript({
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey
-  }, params));
+    modeStorageKey: defaultModeStorageKey,
+    ...params
+  });
   return {
@@ -328,0 +308,0 @@ CssVarsProvider,

cssVars/createCssVarsTheme.d.ts

 import { DefaultCssVarsTheme } from './prepareCssVars';
 interface Theme extends DefaultCssVarsTheme {
     cssVarPrefix?: string;
+    colorSchemeSelector?: 'media' | string;
     shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
 }
-declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>(theme: T): T & {
+declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>({ colorSchemeSelector, ...theme }: T): T & {
     vars: ThemeVars;
@@ -8,0 +9,0 @@ generateThemeVars: () => ThemeVars;

cssVars/createCssVarsTheme.js

@@ -1,13 +0,21 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import prepareCssVars from './prepareCssVars';
-function createCssVarsTheme(theme) {
+import { createGetColorSchemeSelector } from './getColorSchemeSelector';
+import { DEFAULT_ATTRIBUTE } from '../InitColorSchemeScript/InitColorSchemeScript';
+function createCssVarsTheme({
+  colorSchemeSelector = `[${DEFAULT_ATTRIBUTE}="%s"]`,
+  ...theme
+}) {
   const output = theme;
-  const result = prepareCssVars(output, _extends({}, theme, {
-    prefix: theme.cssVarPrefix
-  }));
+  const result = prepareCssVars(output, {
+    ...theme,
+    prefix: theme.cssVarPrefix,
+    colorSchemeSelector
+  });
   output.vars = result.vars;
   output.generateThemeVars = result.generateThemeVars;
   output.generateStyleSheets = result.generateStyleSheets;
+  output.colorSchemeSelector = colorSchemeSelector;
+  output.getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
   return output;
 }
 export default createCssVarsTheme;

cssVars/cssVarsParser.d.ts

@@ -21,3 +21,3 @@ type NestedRecord<V = any> = {
  */
-export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
+export declare const assignNestedKeys: <T extends Record<string, any> | null | undefined | string = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
 /**
@@ -24,0 +24,0 @@ *

cssVars/index.d.ts

 export { default } from './createCssVarsProvider';
 export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
@@ -8,1 +7,2 @@ export { default as prepareTypographyVars } from './prepareTypographyVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';
+export { createGetColorSchemeSelector } from './getColorSchemeSelector';

cssVars/index.js

 'use client';
 
 export { default } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as prepareTypographyVars } from './prepareTypographyVars';
-export { default as createCssVarsTheme } from './createCssVarsTheme';
+export { default as createCssVarsTheme } from './createCssVarsTheme';
+export { createGetColorSchemeSelector } from './getColorSchemeSelector';

cssVars/prepareCssVars.d.ts

 export interface DefaultCssVarsTheme {
-    attribute?: string;
     colorSchemes?: Record<string, any>;
     defaultColorScheme?: string;
 }
-declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, { getSelector, ...parserConfig }?: {
+declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
     prefix?: string;
+    colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+    disableCssColorScheme?: boolean;
     shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
@@ -9,0 +10,0 @@ getSelector?: (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | Record<string, any>;

cssVars/prepareCssVars.js

@@ -1,19 +0,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, parserConfig = {}) {
+  const {
+    getSelector = defaultGetSelector,
+    disableCssColorScheme,
+    colorSchemeSelector: selector
+  } = parserConfig;
   // @ts-ignore - ignore components do not exist
   const {
-      colorSchemes = {},
-      defaultColorScheme = 'light'
-    } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded2);
+    colorSchemes = {},
+    components,
+    defaultColorScheme = 'light',
+    ...otherTheme
+  } = theme;
   const {
@@ -27,5 +24,5 @@ vars: rootVars,
   const {
-      [defaultColorScheme]: defaultScheme
-    } = colorSchemes,
-    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
+    [defaultColorScheme]: defaultScheme,
+    ...otherColorSchemes
+  } = colorSchemes;
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
@@ -56,4 +53,39 @@ const {
   }
+  function defaultGetSelector(colorScheme, cssObject) {
+    let rule = selector;
+    if (selector === 'class') {
+      rule = '.%s';
+    }
+    if (selector === 'data') {
+      rule = '[data-%s]';
+    }
+    if (selector?.startsWith('data-') && !selector.includes('%s')) {
+      // 'data-joy-color-scheme' -> '[data-joy-color-scheme="%s"]'
+      rule = `[${selector}="%s"]`;
+    }
+    if (colorScheme) {
+      if (rule === 'media') {
+        if (theme.defaultColorScheme === colorScheme) {
+          return ':root';
+        }
+        const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject
+          }
+        };
+      }
+      if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
+        return rule.replace('%s', String(colorScheme));
+      }
+    }
+    return ':root';
+  }
   const generateThemeVars = () => {
-    let vars = _extends({}, rootVars);
+    let vars = {
+      ...rootVars
+    };
     Object.entries(colorSchemesMap).forEach(([, {
@@ -69,14 +101,18 @@ vars: schemeVars
     const colorScheme = theme.defaultColorScheme || 'light';
-    function insertStyleSheet(selector, css) {
+    function insertStyleSheet(key, css) {
       if (Object.keys(css).length) {
-        stylesheets.push(typeof selector === 'string' ? {
-          [selector]: _extends({}, css)
-        } : selector);
+        stylesheets.push(typeof key === 'string' ? {
+          [key]: {
+            ...css
+          }
+        } : key);
       }
     }
-    insertStyleSheet(getSelector?.(undefined, _extends({}, rootCss)) || ':root', rootCss);
+    insertStyleSheet(getSelector(undefined, {
+      ...rootCss
+    }), rootCss);
     const {
-        [colorScheme]: defaultSchemeVal
-      } = colorSchemesMap,
-      rest = _objectWithoutPropertiesLoose(colorSchemesMap, [colorScheme].map(_toPropertyKey));
+      [colorScheme]: defaultSchemeVal,
+      ...other
+    } = colorSchemesMap;
     if (defaultSchemeVal) {
@@ -87,8 +123,26 @@ // default color scheme has to come before other color schemes
       } = defaultSchemeVal;
-      insertStyleSheet(getSelector?.(colorScheme, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+      const cssColorSheme = colorSchemes[colorScheme]?.palette?.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
+        ...css
+      };
+      insertStyleSheet(getSelector(colorScheme, {
+        ...finalCss
+      }), finalCss);
     }
-    Object.entries(rest).forEach(([key, {
+    Object.entries(other).forEach(([key, {
       css
     }]) => {
-      insertStyleSheet(getSelector?.(key, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+      const cssColorSheme = colorSchemes[key]?.palette?.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
+        ...css
+      };
+      insertStyleSheet(getSelector(key, {
+        ...finalCss
+      }), finalCss);
     });
@@ -95,0 +149,0 @@ return stylesheets;

cssVars/useCurrentColorScheme.d.ts

@@ -8,7 +8,7 @@ export type Mode = 'light' | 'dark' | 'system';
      */
-    mode: Mode | undefined;
+    mode: 'light' | 'dark' | 'system' | undefined;
     /**
      * Only valid if `mode: 'system'`, either 'light' | 'dark'.
      */
-    systemMode: SystemMode | undefined;
+    systemMode: 'light' | 'dark' | undefined;
     /**
@@ -15,0 +15,0 @@ * The color scheme for the light mode.

cssVars/useCurrentColorScheme.js

 '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';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 export function getSystemMode(mode) {
-  if (typeof window !== 'undefined' && mode === 'system') {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -63,2 +62,3 @@ if (mql.matches) {
   const joinedColorSchemes = supportedColorSchemes.join(',');
+  const isMultiSchemes = supportedColorSchemes.length > 1;
   const [state, setState] = React.useState(() => {
@@ -75,2 +75,11 @@ const initialMode = initializeValue(modeStorageKey, defaultMode);
   });
+  // This could be improved with `React.useSyncExternalStore` in the future.
+  const [, setHasMounted] = React.useState(false);
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    if (isMultiSchemes) {
+      setHasMounted(true); // to rerender the component after hydration
+    }
+    hasMounted.current = true;
+  }, [isMultiSchemes]);
   const colorScheme = getColorScheme(state);
@@ -89,6 +98,7 @@ const setMode = React.useCallback(mode => {
       }
-      return _extends({}, currentState, {
+      return {
+        ...currentState,
         mode: newMode,
         systemMode: getSystemMode(newMode)
-      });
+      };
     });
@@ -105,6 +115,7 @@ }, [modeStorageKey, defaultMode]);
         }
-        return _extends({}, currentState, {
+        return {
+          ...currentState,
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
-        });
+        };
       });
@@ -116,3 +127,5 @@ } else if (typeof value === 'string') {
         setState(currentState => {
-          const newState = _extends({}, currentState);
+          const newState = {
+            ...currentState
+          };
           processState(currentState, mode => {
@@ -136,3 +149,5 @@ try {
       setState(currentState => {
-        const newState = _extends({}, currentState);
+        const newState = {
+          ...currentState
+        };
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
@@ -177,5 +192,6 @@ const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         }
-        return _extends({}, currentState, {
+        return {
+          ...currentState,
           systemMode
-        });
+        };
       });
@@ -189,2 +205,5 @@ }
   React.useEffect(() => {
+    if (typeof window.matchMedia !== 'function' || !isMultiSchemes) {
+      return undefined;
+    }
     const handler = (...args) => mediaListener.current(...args);
@@ -201,7 +220,7 @@
     };
-  }, []);
+  }, [isMultiSchemes]);
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    if (storageWindow) {
+    if (storageWindow && isMultiSchemes) {
       const handleStorage = event => {
@@ -233,8 +252,11 @@ const value = event.newValue;
     return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return _extends({}, state, {
-    colorScheme,
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
+  return {
+    ...state,
+    mode: hasMounted.current || !isMultiSchemes ? state.mode : undefined,
+    systemMode: hasMounted.current || !isMultiSchemes ? state.systemMode : undefined,
+    colorScheme: hasMounted.current || !isMultiSchemes ? colorScheme : undefined,
     setMode,
     setColorScheme
-  });
+  };
 }

index.d.ts

@@ -80,4 +80,4 @@ // disable automatic export
 
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
-export * from './createTheme/createBreakpoints';
+export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
+export * from './createBreakpoints/createBreakpoints';
 
@@ -121,6 +121,8 @@ export { default as createSpacing } from './createTheme/createSpacing';
 
-export { default as Unstable_Grid } from './Unstable_Grid';
-export * from './Unstable_Grid';
+export { default as Grid } from './Grid';
+export * from './Grid';
 
 export { default as Stack } from './Stack';
 export * from './Stack';
+
+export * from './version';

index.js

 /**
- * @mui/system v6.0.0-dev.240424162023-9968b4889d
+ * @mui/system v6.0.0-rc.0
  *
@@ -38,3 +38,3 @@ * @license MIT
 export function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(20));
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(19));
 }
@@ -48,3 +48,3 @@ export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as createTheme } from './createTheme';
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
+export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
 export { default as createSpacing } from './createTheme/createSpacing';
@@ -66,2 +66,3 @@ export { default as shape } from './createTheme/shape';
 export * from './RtlProvider';
+export * from './version';
 
@@ -73,5 +74,5 @@ /** ----------------- */
 export * from './Container';
-export { default as Unstable_Grid } from './Unstable_Grid/Grid';
-export * from './Unstable_Grid';
+export { default as Grid } from './Grid/Grid';
+export * from './Grid';
 export { default as Stack } from './Stack/Stack';
 export * from './Stack';

modern/breakpoints/breakpoints.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
@@ -56,3 +55,3 @@ import deepmerge from '@mui/utils/deepmerge';
       // key is breakpoint
-      else if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+      else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
         const mediaKey = themeBreakpoints.up(breakpoint);
@@ -80,5 +79,6 @@ acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
         acc = acc || {};
-        acc[themeBreakpoints.up(key)] = styleFunction(_extends({
-          theme
-        }, props[key]));
+        acc[themeBreakpoints.up(key)] = styleFunction({
+          theme,
+          ...props[key]
+        });
       }
@@ -89,3 +89,4 @@ return acc;
   };
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
+    ...styleFunction.propTypes,
     xs: PropTypes.object,
@@ -96,3 +97,3 @@ sm: PropTypes.object,
     xl: PropTypes.object
-  }) : {};
+  } : {};
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
@@ -99,0 +100,0 @@ return newStyleFunction;

modern/colorManipulator/colorManipulator.js

@@ -58,3 +58,3 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
   const type = color.substring(0, marker);
-  if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
+  if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
@@ -71,3 +71,3 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : _formatMuiErrorMessage(9, color));
     }
-    if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
+    if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
@@ -95,3 +95,3 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : _formatMuiErrorMessage(10, colorSpace));
   const decomposedColor = decomposeColor(color);
-  return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
+  return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.includes('hsl') && idx !== 0 ? `${val}%` : val).join(' ');
 };
@@ -124,10 +124,10 @@ export const private_safeColorChannel = (color, warning) => {
   } = color;
-  if (type.indexOf('rgb') !== -1) {
+  if (type.includes('rgb')) {
     // Only convert the first 3 values to int (i.e. not alpha)
     values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
-  } else if (type.indexOf('hsl') !== -1) {
+  } else if (type.includes('hsl')) {
     values[1] = `${values[1]}%`;
     values[2] = `${values[2]}%`;
   }
-  if (type.indexOf('color') !== -1) {
+  if (type.includes('color')) {
     values = `${colorSpace} ${values.join(' ')}`;
@@ -147,3 +147,3 @@ } else {
   // Idempotent
-  if (color.indexOf('#') === 0) {
+  if (color.startsWith('#')) {
     return color;
@@ -259,5 +259,5 @@ }
   coefficient = clampWrapper(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
+  if (color.type.includes('hsl')) {
     color.values[2] *= 1 - coefficient;
-  } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
+  } else if (color.type.includes('rgb') || color.type.includes('color')) {
     for (let i = 0; i < 3; i += 1) {
@@ -289,9 +289,9 @@ color.values[i] *= 1 - coefficient;
   coefficient = clampWrapper(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
+  if (color.type.includes('hsl')) {
     color.values[2] += (100 - color.values[2]) * coefficient;
-  } else if (color.type.indexOf('rgb') !== -1) {
+  } else if (color.type.includes('rgb')) {
     for (let i = 0; i < 3; i += 1) {
       color.values[i] += (255 - color.values[i]) * coefficient;
     }
-  } else if (color.type.indexOf('color') !== -1) {
+  } else if (color.type.includes('color')) {
     for (let i = 0; i < 3; i += 1) {
@@ -298,0 +298,0 @@ color.values[i] += (1 - color.values[i]) * coefficient;

modern/Container/createContainer.js

@@ -1,4 +0,1 @@
-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';
@@ -55,3 +52,3 @@ import PropTypes from 'prop-types';
     ownerState
-  }) => _extends({
+  }) => ({
     width: '100%',
@@ -61,11 +58,11 @@ marginLeft: 'auto',
     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)
-    }
+    ...(!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)
+      }
+    })
   }), ({
@@ -87,16 +84,20 @@ 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}`
+      }
+    })
   }));
@@ -106,10 +107,12 @@ const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
     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,
@@ -119,3 +122,3 @@ disableGutters,
       maxWidth
-    });
+    };
 
@@ -127,3 +130,3 @@ // @ts-ignore module augmentation fails if custom breakpoints are used
       // @ts-ignore theme is injected by the styled util
-      _jsx(ContainerRoot, _extends({
+      _jsx(ContainerRoot, {
         as: component
@@ -134,4 +137,5 @@ // @ts-ignore module augmentation fails if custom breakpoints are used
         className: clsx(classes.root, className),
-        ref: ref
-      }, other))
+        ref: ref,
+        ...other
+      })
     );
@@ -138,0 +142,0 @@ });

modern/createBox/createBox.js

 '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';
@@ -24,16 +21,16 @@ import clsx from 'clsx';
     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;
 }

modern/createStyled/createStyled.js

@@ -1,6 +0,1 @@
-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 */
@@ -13,15 +8,4 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import styleFunctionSx from '../styleFunctionSx';
-function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
-}
+export const systemDefaultTheme = createTheme();
 
-// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
-function isStringTag(tag) {
-  return typeof tag === 'string' &&
-  // 96 is one less than the char code
-  // for "a" so this is checking that
-  // it's a lowercase character
-  tag.charCodeAt(0) > 96;
-}
-
 // Update /system/styled/#api in case if this changes
@@ -31,15 +15,17 @@ export function shouldForwardProp(prop) {
 }
-export const systemDefaultTheme = createTheme();
-const lowercaseFirstLetter = string => {
-  if (!string) {
-    return string;
+function resolveTheme(themeId, theme, defaultTheme) {
+  return isObjectEmpty(theme) ? defaultTheme : theme[themeId] || theme;
+}
+const PROCESSED_PROPS = Symbol('mui.processed_props');
+function attachTheme(props, themeId, defaultTheme) {
+  if (PROCESSED_PROPS in props) {
+    return props[PROCESSED_PROPS];
   }
-  return string.charAt(0).toLowerCase() + string.slice(1);
-};
-function resolveTheme({
-  defaultTheme,
-  theme,
-  themeId
-}) {
-  return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
+  const processedProps = {
+    ...props,
+    theme: resolveTheme(themeId, props.theme, defaultTheme)
+  };
+  props[PROCESSED_PROPS] = processedProps;
+  processedProps[PROCESSED_PROPS] = processedProps;
+  return processedProps;
 }
@@ -50,48 +36,55 @@ function defaultOverridesResolver(slot) {
   }
-  return (props, styles) => styles[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;
-  if (Array.isArray(resolvedStylesArg)) {
-    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
-      ownerState
-    }, props)));
+function processStyle(style, props) {
+  const resolvedStyle = typeof style === 'function' ? style(props) : style;
+  if (Array.isArray(resolvedStyle)) {
+    return resolvedStyle.flatMap(subStyle => processStyle(subStyle, props));
   }
-  if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
+  if (Array.isArray(resolvedStyle?.variants)) {
     const {
-        variants = []
-      } = resolvedStylesArg,
-      otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2);
+      variants,
+      ...otherStyles
+    } = resolvedStyle;
     let result = otherStyles;
-    variants.forEach(variant => {
-      let isMatch = true;
+    let mergedState; // We might not need it, initalized lazily
+
+    /* eslint-disable no-labels */
+    variantLoop: for (let i = 0; i < variants.length; i += 1) {
+      const variant = variants[i];
       if (typeof variant.props === 'function') {
-        isMatch = variant.props(_extends({
-          ownerState
-        }, props, ownerState));
+        mergedState ?? (mergedState = {
+          ...props,
+          ...props.ownerState,
+          ownerState: props.ownerState
+        });
+        if (!variant.props(mergedState)) {
+          continue;
+        }
       } else {
-        Object.keys(variant.props).forEach(key => {
-          if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-            isMatch = false;
+        for (const key in variant.props) {
+          if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
+            continue variantLoop;
           }
+        }
+      }
+      if (!Array.isArray(result)) {
+        result = [result];
+      }
+      if (typeof variant.style === 'function') {
+        mergedState ?? (mergedState = {
+          ...props,
+          ...props.ownerState,
+          ownerState: props.ownerState
         });
+        result.push(variant.style(mergedState));
+      } else {
+        result.push(variant.style);
       }
-      if (isMatch) {
-        if (!Array.isArray(result)) {
-          result = [result];
-        }
-        result.push(typeof variant.style === 'function' ? variant.style(_extends({
-          ownerState
-        }, props, ownerState)) : variant.style);
-      }
-    });
+    }
+    /* eslint-enable no-labels */
+
     return result;
   }
-  return resolvedStylesArg;
+  return resolvedStyle;
 }
@@ -106,23 +99,18 @@ export default function createStyled(input = {}) {
   const systemSx = props => {
-    return styleFunctionSx(_extends({}, props, {
-      theme: resolveTheme(_extends({}, props, {
-        defaultTheme,
-        themeId
-      }))
-    }));
+    return styleFunctionSx(attachTheme(props, themeId, defaultTheme));
   };
   systemSx.__mui_systemSx = true;
-  return (tag, inputOptions = {}) => {
+  const styled = (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;
 
@@ -156,30 +144,22 @@ // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     }
-    const defaultStyledResolver = styledEngineStyled(tag, _extends({
+    const defaultStyledResolver = styledEngineStyled(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label
-    }, options));
-    const transformStyleArg = stylesArg => {
+      label,
+      ...options
+    });
+    const transformStyleArg = style => {
       // 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, {
-          theme: resolveTheme({
-            theme: props.theme,
-            defaultTheme,
-            themeId
-          })
-        }));
+      if (typeof style === 'function' && style.__emotion_real !== style || isPlainObject(style)) {
+        return props => processStyle(style, attachTheme(props, themeId, defaultTheme));
       }
-      return stylesArg;
+      return style;
     };
-    const muiStyledResolver = (styleArg, ...expressions) => {
-      let transformedStyleArg = transformStyleArg(styleArg);
+    const muiStyledResolver = (style, ...expressions) => {
+      let transformedStyle = transformStyleArg(style);
       const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }));
+          const theme = resolveTheme(themeId, props.theme, defaultTheme);
           if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
@@ -190,8 +170,9 @@ return null;
           const resolvedStyleOverrides = {};
+          const propsWithTheme = attachTheme(props, themeId, defaultTheme);
+
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
-          Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
-              theme
-            }));
-          });
+          // eslint-disable-next-line guard-for-in
+          for (const slotKey in styleOverrides) {
+            resolvedStyleOverrides[slotKey] = processStyle(styleOverrides[slotKey], propsWithTheme);
+          }
           return overridesResolver(props, resolvedStyleOverrides);
@@ -202,12 +183,10 @@ });
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }));
+          const theme = resolveTheme(themeId, props.theme, defaultTheme);
           const themeVariants = theme?.components?.[componentName]?.variants;
-          return processStyleArg({
+          if (!themeVariants) {
+            return null;
+          }
+          return processStyle({
             variants: themeVariants
-          }, _extends({}, props, {
-            theme
-          }));
+          }, attachTheme(props, themeId, defaultTheme));
         });
@@ -219,9 +198,9 @@ }
       const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-      if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
+      if (Array.isArray(style) && numOfCustomFnsApplied > 0) {
         const placeholders = new Array(numOfCustomFnsApplied).fill('');
         // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
-        transformedStyleArg = [...styleArg, ...placeholders];
-        transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
+        transformedStyle = [...style, ...placeholders];
+        transformedStyle.raw = [...style.raw, ...placeholders];
       }
-      const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
+      const Component = defaultStyledResolver(transformedStyle, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== 'production') {
@@ -247,2 +226,25 @@ let displayName;
   };
+  return styled;
+}
+function isObjectEmpty(object) {
+  // eslint-disable-next-line
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
+
+// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
+function isStringTag(tag) {
+  return typeof tag === 'string' &&
+  // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96;
+}
+function lowercaseFirstLetter(string) {
+  if (!string) {
+    return string;
+  }
+  return string.charAt(0).toLowerCase() + string.slice(1);
 }

modern/createTheme/applyStyles.js

@@ -5,3 +5,3 @@ /**
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
@@ -63,6 +63,12 @@ *
   const theme = this;
-  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
-    // If CssVarsProvider is used as a provider,
-    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
-    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+  if (theme.vars) {
+    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
+      return {};
+    }
+    // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
+    let selector = theme.getColorSchemeSelector(key);
+    if (selector.includes('data-') || selector.includes('.')) {
+      // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
+      selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
+    }
     return {
@@ -69,0 +75,0 @@ [selector]: styles

modern/createTheme/createTheme.js

@@ -1,6 +0,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 createBreakpoints from '../createBreakpoints/createBreakpoints';
 import cssContainerQueries from '../cssContainerQueries';
@@ -14,8 +11,8 @@ import shape from './shape';
   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);
@@ -28,7 +25,11 @@ const spacing = createSpacing(spacingInput);
     // Inject component definitions.
-    palette: _extends({
-      mode: 'light'
-    }, paletteInput),
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
     spacing,
-    shape: _extends({}, shape, shapeInput)
+    shape: {
+      ...shape,
+      ...shapeInput
+    }
   }, other);
@@ -38,3 +39,6 @@ muiTheme = cssContainerQueries(muiTheme);
   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) {
@@ -41,0 +45,0 @@ return styleFunctionSx({

modern/createTheme/index.js

 export { default } from './createTheme';
-export { default as private_createBreakpoints } from './createBreakpoints';
+export { default as private_createBreakpoints } from '../createBreakpoints/createBreakpoints';
 export { default as unstable_applyStyles } from './applyStyles';

modern/cssContainerQueries/cssContainerQueries.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
@@ -25,13 +24,15 @@ /**
     return acc;
-  }, _extends({}, css));
+  }, {
+    ...css
+  });
 }
 export function isCqShorthand(breakpointKeys, value) {
-  return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
 export function getContainerQuery(theme, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(21, `(${shorthand})`));
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : _formatMuiErrorMessage(18, `(${shorthand})`));
     }
@@ -41,3 +42,3 @@ return null;
   const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme.containerQueries(containerName).up(value);
@@ -56,3 +57,3 @@ }
         // `@container` does not work with `not all and`, so need to invert the logic
-        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
       }
@@ -68,5 +69,6 @@ return result;
   attachCq(containerQueries);
-  return _extends({}, themeInput, {
+  return {
+    ...themeInput,
     containerQueries
-  });
+  };
 }

modern/cssVars/createCssVarsProvider.js

@@ -1,5 +0,1 @@
-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';
@@ -10,3 +6,3 @@ import PropTypes from 'prop-types';
 import ThemeProvider from '../ThemeProvider';
-import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
@@ -25,13 +21,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     theme: defaultTheme = {},
-    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    defaultMode: designSystemMode = 'light',
-    defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
+    defaultColorScheme,
     resolveTheme
   } = options;
-  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme?.dark]) {
-    console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
-  }
+  const defaultContext = {
+    allColorSchemes: [],
+    colorScheme: undefined,
+    darkColorScheme: undefined,
+    lightColorScheme: undefined,
+    mode: undefined,
+    setColorScheme: () => {},
+    setMode: () => {},
+    systemMode: undefined
+  };
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -41,18 +42,9 @@ if (process.env.NODE_ENV !== 'production') {
   }
-  const useColorScheme = () => {
-    const value = React.useContext(ColorSchemeContext);
-    if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : _formatMuiErrorMessage(19));
-    }
-    return value;
-  };
+  const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
   function CssVarsProvider(props) {
     const {
       children,
-      theme: themeProp = defaultTheme,
+      theme: themeProp,
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
-      attribute = defaultAttribute,
-      defaultMode = designSystemMode,
-      defaultColorScheme = designSystemColorScheme,
       disableTransitionOnChange = designSystemTransitionOnChange,
@@ -62,3 +54,2 @@ storageWindow = typeof window === 'undefined' ? undefined : window,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-      colorSchemeSelector = ':root',
       disableNestedContext = false,
@@ -71,13 +62,20 @@ disableStyleSheetGeneration = false
     const nested = !!ctx && !disableNestedContext;
-    const scopedTheme = themeProp[themeId];
-    const _ref = scopedTheme || themeProp,
-      {
-        colorSchemes = {},
-        components = {},
-        cssVarPrefix
-      } = _ref,
-      restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
-    const allColorSchemes = Object.keys(colorSchemes);
+    const initialTheme = React.useMemo(() => {
+      if (themeProp) {
+        return themeProp;
+      }
+      return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
+    }, [themeProp]);
+    const scopedTheme = initialTheme[themeId];
+    const {
+      colorSchemes = {},
+      components = {},
+      cssVarPrefix,
+      ...restThemeProp
+    } = scopedTheme || initialTheme;
+    const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
+    const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
@@ -108,24 +106,6 @@ // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     }
-    const calculatedMode = (() => {
-      if (mode) {
-        return mode;
-      }
-      // This scope occurs on the server
-      if (defaultMode === 'system') {
-        return designSystemMode;
-      }
-      return defaultMode;
-    })();
-    const calculatedColorScheme = (() => {
-      if (!colorScheme) {
-        // This scope occurs on the server
-        if (calculatedMode === 'dark') {
-          return defaultDarkColorScheme;
-        }
-        // use light color scheme, if default mode is 'light' | 'system'
-        return defaultLightColorScheme;
-      }
-      return colorScheme;
-    })();
 
+    // `colorScheme` is undefined on the server and hydration phase
+    const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
+
     // 2. get the `vars` object that refers to the CSS custom properties
@@ -135,3 +115,4 @@ const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
     // 3. Start composing the theme object
-    const theme = _extends({}, restThemeProp, {
+    const theme = {
+      ...restThemeProp,
       components,
@@ -141,3 +122,3 @@ colorSchemes,
       vars: themeVars
-    });
+    };
     if (typeof theme.generateSpacing === 'function') {
@@ -148,4 +129,5 @@ theme.spacing = theme.generateSpacing();
     // 4. Resolve the color scheme and merge it to the theme
-    Object.entries(colorSchemes).forEach(([key, scheme]) => {
-      if (key === calculatedColorScheme) {
+    if (calculatedColorScheme) {
+      const scheme = colorSchemes[calculatedColorScheme];
+      if (scheme && typeof scheme === 'object') {
         // 4.1 Merge the selected color scheme to the theme
@@ -155,3 +137,6 @@ Object.keys(scheme).forEach(schemeKey => {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
+            theme[schemeKey] = {
+              ...theme[schemeKey],
+              ...scheme[schemeKey]
+            };
           } else {
@@ -161,21 +146,3 @@ theme[schemeKey] = scheme[schemeKey];
         });
-        if (theme.palette) {
-          theme.palette.colorScheme = key;
-        }
       }
-    });
-    const resolvedDefaultColorScheme = (() => {
-      if (typeof defaultColorScheme === 'string') {
-        return defaultColorScheme;
-      }
-      if (defaultMode === 'dark') {
-        return defaultColorScheme.dark;
-      }
-      return defaultColorScheme.light;
-    })();
-    themeProp.defaultColorScheme = resolvedDefaultColorScheme;
-    themeProp.colorSchemeSelector = colorSchemeSelector;
-    themeProp.attribute = attribute;
-    if (!theme.getColorSchemeSelector) {
-      theme.getColorSchemeSelector = targetColorScheme => `[${attribute}="${targetColorScheme}"] &`;
     }
@@ -185,8 +152,38 @@
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    const colorSchemeSelector = restThemeProp.colorSchemeSelector;
     React.useEffect(() => {
-      if (colorScheme && colorSchemeNode) {
-        // attaches attribute to <html> because the css variables are attached to :root (html)
-        colorSchemeNode.setAttribute(attribute, colorScheme);
+      if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
+        const selector = colorSchemeSelector;
+        let rule = colorSchemeSelector;
+        if (selector === 'class') {
+          rule = `.%s`;
+        }
+        if (selector === 'data') {
+          rule = `[data-%s]`;
+        }
+        if (selector?.startsWith('data-') && !selector.includes('%s')) {
+          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+          rule = `[${selector}="%s"]`;
+        }
+        if (rule.startsWith('.')) {
+          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => rule.substring(1).replace('%s', scheme)));
+          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
+        } else {
+          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
+          if (matches) {
+            const [attr, value] = matches[1].split('=');
+            if (!value) {
+              // for attributes like `data-theme-dark`, `data-theme-light`
+              // remove all the existing data attributes before setting the new one
+              allColorSchemes.forEach(scheme => {
+                colorSchemeNode.removeAttribute(attr.replace(colorScheme, scheme));
+              });
+            }
+            colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
+          } else {
+            colorSchemeNode.setAttribute(rule, colorScheme);
+          }
+        }
       }
-    }, [colorScheme, attribute, colorSchemeNode]);
+    }, [colorScheme, colorSchemeSelector, colorSchemeNode, allColorSchemes]);
 
@@ -229,3 +226,3 @@ // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
+    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -254,6 +251,2 @@ }
     /**
-     * The body attribute name to attach colorScheme.
-     */
-    attribute: PropTypes.string,
-    /**
      * The component tree.
@@ -267,6 +260,2 @@ */
     /**
-     * The CSS selector for attaching the generated custom properties
-     */
-    colorSchemeSelector: PropTypes.string,
-    /**
      * localStorage key used to store `colorScheme`
@@ -276,10 +265,2 @@ */
     /**
-     * The initial color scheme used.
-     */
-    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    /**
-     * The initial mode used.
-     */
-    defaultMode: PropTypes.string,
-    /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
@@ -316,12 +297,11 @@ */
   } : void 0;
-  const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
-  const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
-    attribute: defaultAttribute,
+  const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+  const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+  const getInitColorSchemeScript = params => InitColorSchemeScript({
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey
-  }, params));
+    modeStorageKey: defaultModeStorageKey,
+    ...params
+  });
   return {
@@ -328,0 +308,0 @@ CssVarsProvider,

modern/cssVars/createCssVarsTheme.js

@@ -1,13 +0,21 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import prepareCssVars from './prepareCssVars';
-function createCssVarsTheme(theme) {
+import { createGetColorSchemeSelector } from './getColorSchemeSelector';
+import { DEFAULT_ATTRIBUTE } from '../InitColorSchemeScript/InitColorSchemeScript';
+function createCssVarsTheme({
+  colorSchemeSelector = `[${DEFAULT_ATTRIBUTE}="%s"]`,
+  ...theme
+}) {
   const output = theme;
-  const result = prepareCssVars(output, _extends({}, theme, {
-    prefix: theme.cssVarPrefix
-  }));
+  const result = prepareCssVars(output, {
+    ...theme,
+    prefix: theme.cssVarPrefix,
+    colorSchemeSelector
+  });
   output.vars = result.vars;
   output.generateThemeVars = result.generateThemeVars;
   output.generateStyleSheets = result.generateStyleSheets;
+  output.colorSchemeSelector = colorSchemeSelector;
+  output.getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);
   return output;
 }
 export default createCssVarsTheme;

modern/cssVars/index.js

 'use client';
 
 export { default } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as prepareTypographyVars } from './prepareTypographyVars';
-export { default as createCssVarsTheme } from './createCssVarsTheme';
+export { default as createCssVarsTheme } from './createCssVarsTheme';
+export { createGetColorSchemeSelector } from './getColorSchemeSelector';

modern/cssVars/prepareCssVars.js

@@ -1,19 +0,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, parserConfig = {}) {
+  const {
+    getSelector = defaultGetSelector,
+    disableCssColorScheme,
+    colorSchemeSelector: selector
+  } = parserConfig;
   // @ts-ignore - ignore components do not exist
   const {
-      colorSchemes = {},
-      defaultColorScheme = 'light'
-    } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded2);
+    colorSchemes = {},
+    components,
+    defaultColorScheme = 'light',
+    ...otherTheme
+  } = theme;
   const {
@@ -27,5 +24,5 @@ vars: rootVars,
   const {
-      [defaultColorScheme]: defaultScheme
-    } = colorSchemes,
-    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
+    [defaultColorScheme]: defaultScheme,
+    ...otherColorSchemes
+  } = colorSchemes;
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
@@ -56,4 +53,39 @@ const {
   }
+  function defaultGetSelector(colorScheme, cssObject) {
+    let rule = selector;
+    if (selector === 'class') {
+      rule = '.%s';
+    }
+    if (selector === 'data') {
+      rule = '[data-%s]';
+    }
+    if (selector?.startsWith('data-') && !selector.includes('%s')) {
+      // 'data-joy-color-scheme' -> '[data-joy-color-scheme="%s"]'
+      rule = `[${selector}="%s"]`;
+    }
+    if (colorScheme) {
+      if (rule === 'media') {
+        if (theme.defaultColorScheme === colorScheme) {
+          return ':root';
+        }
+        const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject
+          }
+        };
+      }
+      if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
+        return rule.replace('%s', String(colorScheme));
+      }
+    }
+    return ':root';
+  }
   const generateThemeVars = () => {
-    let vars = _extends({}, rootVars);
+    let vars = {
+      ...rootVars
+    };
     Object.entries(colorSchemesMap).forEach(([, {
@@ -69,14 +101,18 @@ vars: schemeVars
     const colorScheme = theme.defaultColorScheme || 'light';
-    function insertStyleSheet(selector, css) {
+    function insertStyleSheet(key, css) {
       if (Object.keys(css).length) {
-        stylesheets.push(typeof selector === 'string' ? {
-          [selector]: _extends({}, css)
-        } : selector);
+        stylesheets.push(typeof key === 'string' ? {
+          [key]: {
+            ...css
+          }
+        } : key);
       }
     }
-    insertStyleSheet(getSelector?.(undefined, _extends({}, rootCss)) || ':root', rootCss);
+    insertStyleSheet(getSelector(undefined, {
+      ...rootCss
+    }), rootCss);
     const {
-        [colorScheme]: defaultSchemeVal
-      } = colorSchemesMap,
-      rest = _objectWithoutPropertiesLoose(colorSchemesMap, [colorScheme].map(_toPropertyKey));
+      [colorScheme]: defaultSchemeVal,
+      ...other
+    } = colorSchemesMap;
     if (defaultSchemeVal) {
@@ -87,8 +123,26 @@ // default color scheme has to come before other color schemes
       } = defaultSchemeVal;
-      insertStyleSheet(getSelector?.(colorScheme, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+      const cssColorSheme = colorSchemes[colorScheme]?.palette?.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
+        ...css
+      };
+      insertStyleSheet(getSelector(colorScheme, {
+        ...finalCss
+      }), finalCss);
     }
-    Object.entries(rest).forEach(([key, {
+    Object.entries(other).forEach(([key, {
       css
     }]) => {
-      insertStyleSheet(getSelector?.(key, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+      const cssColorSheme = colorSchemes[key]?.palette?.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
+        ...css
+      };
+      insertStyleSheet(getSelector(key, {
+        ...finalCss
+      }), finalCss);
     });
@@ -95,0 +149,0 @@ return stylesheets;

modern/cssVars/useCurrentColorScheme.js

 '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';
+import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from '../InitColorSchemeScript/InitColorSchemeScript';
 export function getSystemMode(mode) {
-  if (typeof window !== 'undefined' && mode === 'system') {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -63,2 +62,3 @@ if (mql.matches) {
   const joinedColorSchemes = supportedColorSchemes.join(',');
+  const isMultiSchemes = supportedColorSchemes.length > 1;
   const [state, setState] = React.useState(() => {
@@ -75,2 +75,11 @@ const initialMode = initializeValue(modeStorageKey, defaultMode);
   });
+  // This could be improved with `React.useSyncExternalStore` in the future.
+  const [, setHasMounted] = React.useState(false);
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    if (isMultiSchemes) {
+      setHasMounted(true); // to rerender the component after hydration
+    }
+    hasMounted.current = true;
+  }, [isMultiSchemes]);
   const colorScheme = getColorScheme(state);
@@ -89,6 +98,7 @@ const setMode = React.useCallback(mode => {
       }
-      return _extends({}, currentState, {
+      return {
+        ...currentState,
         mode: newMode,
         systemMode: getSystemMode(newMode)
-      });
+      };
     });
@@ -105,6 +115,7 @@ }, [modeStorageKey, defaultMode]);
         }
-        return _extends({}, currentState, {
+        return {
+          ...currentState,
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
-        });
+        };
       });
@@ -116,3 +127,5 @@ } else if (typeof value === 'string') {
         setState(currentState => {
-          const newState = _extends({}, currentState);
+          const newState = {
+            ...currentState
+          };
           processState(currentState, mode => {
@@ -136,3 +149,5 @@ try {
       setState(currentState => {
-        const newState = _extends({}, currentState);
+        const newState = {
+          ...currentState
+        };
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
@@ -177,5 +192,6 @@ const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
         }
-        return _extends({}, currentState, {
+        return {
+          ...currentState,
           systemMode
-        });
+        };
       });
@@ -189,2 +205,5 @@ }
   React.useEffect(() => {
+    if (typeof window.matchMedia !== 'function' || !isMultiSchemes) {
+      return undefined;
+    }
     const handler = (...args) => mediaListener.current(...args);
@@ -201,7 +220,7 @@
     };
-  }, []);
+  }, [isMultiSchemes]);
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    if (storageWindow) {
+    if (storageWindow && isMultiSchemes) {
       const handleStorage = event => {
@@ -233,8 +252,11 @@ const value = event.newValue;
     return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return _extends({}, state, {
-    colorScheme,
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
+  return {
+    ...state,
+    mode: hasMounted.current || !isMultiSchemes ? state.mode : undefined,
+    systemMode: hasMounted.current || !isMultiSchemes ? state.systemMode : undefined,
+    colorScheme: hasMounted.current || !isMultiSchemes ? colorScheme : undefined,
     setMode,
     setColorScheme
-  });
+  };
 }

modern/index.js

 /**
- * @mui/system v6.0.0-dev.240424162023-9968b4889d
+ * @mui/system v6.0.0-rc.0
  *
@@ -38,3 +38,3 @@ * @license MIT
 export function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(20));
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : _formatMuiErrorMessage(19));
 }
@@ -48,3 +48,3 @@ export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as createTheme } from './createTheme';
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
+export { default as createBreakpoints } from './createBreakpoints/createBreakpoints';
 export { default as createSpacing } from './createTheme/createSpacing';
@@ -66,2 +66,3 @@ export { default as shape } from './createTheme/shape';
 export * from './RtlProvider';
+export * from './version';
 
@@ -73,5 +74,5 @@ /** ----------------- */
 export * from './Container';
-export { default as Unstable_Grid } from './Unstable_Grid/Grid';
-export * from './Unstable_Grid';
+export { default as Grid } from './Grid/Grid';
+export * from './Grid';
 export { default as Stack } from './Stack/Stack';
 export * from './Stack';

modern/propsToClassKey/propsToClassKey.js

@@ -1,3 +0,1 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["variant"];
 import capitalize from '@mui/utils/capitalize';
@@ -15,5 +13,5 @@ function isEmpty(string) {
   const {
-      variant
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    variant,
+    ...other
+  } = props;
   let classKey = variant || '';
@@ -20,0 +18,0 @@ Object.keys(other).sort().forEach(key => {

modern/RtlProvider/index.js

@@ -1,4 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value"];
 import * as React from 'react';
@@ -8,10 +5,10 @@ import PropTypes from 'prop-types';
 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
+  });
 }
@@ -18,0 +15,0 @@ process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {

modern/spacing/spacing.js

@@ -112,3 +112,3 @@ import responsivePropType from '../responsivePropType';
   // it's doesn't worth the bundle size.
-  if (keys.indexOf(prop) === -1) {
+  if (!keys.includes(prop)) {
     return null;
@@ -115,0 +115,0 @@ }

modern/Stack/createStack.js

@@ -1,4 +0,1 @@
-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';
@@ -63,13 +60,14 @@ import PropTypes from 'prop-types';
 }) => {
-  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) {
@@ -142,11 +140,11 @@ const transformer = createUnarySpacing(theme);
     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 = {
@@ -158,10 +156,10 @@ direction,
     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
-    }));
+    });
   });
@@ -168,0 +166,0 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {

modern/styleFunctionSx/extendSxProp.js

@@ -1,4 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["sx"];
 import { isPlainObject } from '@mui/utils/deepmerge';
@@ -23,5 +20,5 @@ import defaultSxConfig from './defaultSxConfig';
   const {
-      sx: inSx
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    sx: inSx,
+    ...other
+  } = props;
   const {
@@ -40,10 +37,17 @@ systemProps,
       }
-      return _extends({}, systemProps, result);
+      return {
+        ...systemProps,
+        ...result
+      };
     };
   } else {
-    finalSx = _extends({}, systemProps, inSx);
+    finalSx = {
+      ...systemProps,
+      ...inSx
+    };
   }
-  return _extends({}, otherProps, {
+  return {
+    ...otherProps,
     sx: finalSx
-  });
+  };
 }

modern/ThemeProvider/ThemeProvider.js

 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -11,2 +10,3 @@ import PropTypes from 'prop-types';
 import RtlProvider from '../RtlProvider';
+import DefaultPropsProvider from '../DefaultPropsProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,5 +19,6 @@ const EMPTY_THEME = {};
       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.
@@ -30,5 +31,9 @@ // see the test case "use provided theme from a callback" in ThemeProvider.test.js
     }
-    return themeId ? _extends({}, upperTheme, {
+    return themeId ? {
+      ...upperTheme,
       [themeId]: localTheme
-    }) : _extends({}, upperTheme, localTheme);
+    } : {
+      ...upperTheme,
+      ...localTheme
+    };
   }, [themeId, upperTheme, localTheme, isPrivate]);
@@ -66,3 +71,6 @@ }
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+          value: engineTheme?.components,
+          children: children
+        })
       })
@@ -69,0 +77,0 @@ })

modern/useMediaQuery/useMediaQuery.js

@@ -7,15 +7,2 @@ 'use client';
 import useTheme from '../useThemeWithoutDefault';
-
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
@@ -35,3 +22,2 @@ const [match, setMatch] = React.useState(() => {
   useEnhancedEffect(() => {
-    let active = true;
     if (!matchMedia) {
@@ -42,15 +28,8 @@ return undefined;
     const updateMatch = () => {
-      // Workaround Safari wrong implementation of matchMedia
-      // TODO can we remove it?
-      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
-      if (active) {
-        setMatch(queryList.matches);
-      }
+      setMatch(queryList.matches);
     };
     updateMatch();
-    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-    queryList.addListener(updateMatch);
+    queryList.addEventListener('change', updateMatch);
     return () => {
-      active = false;
-      queryList.removeListener(updateMatch);
+      queryList.removeEventListener('change', updateMatch);
     };
@@ -83,6 +62,5 @@ }, [query, matchMedia]);
     return [() => mediaQueryList.matches, notify => {
-      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-      mediaQueryList.addListener(notify);
+      mediaQueryList.addEventListener('change', notify);
       return () => {
-        mediaQueryList.removeListener(notify);
+        mediaQueryList.removeEventListener('change', notify);
       };
@@ -89,0 +67,0 @@ }];

modern/useThemeProps/useThemeProps.js

@@ -15,3 +15,3 @@ 'use client';
   }
-  const mergedProps = getThemeProps({
+  return getThemeProps({
     theme,
@@ -21,3 +21,2 @@ name,
   });
-  return mergedProps;
 }

node/breakpoints/breakpoints.js

@@ -15,3 +15,2 @@ "use strict";
 exports.values = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -70,3 +69,3 @@ var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
       // key is breakpoint
-      else if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+      else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
         const mediaKey = themeBreakpoints.up(breakpoint);
@@ -94,5 +93,6 @@ acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
         acc = acc || {};
-        acc[themeBreakpoints.up(key)] = styleFunction((0, _extends2.default)({
-          theme
-        }, props[key]));
+        acc[themeBreakpoints.up(key)] = styleFunction({
+          theme,
+          ...props[key]
+        });
       }
@@ -103,3 +103,4 @@ return acc;
   };
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? (0, _extends2.default)({}, styleFunction.propTypes, {
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
+    ...styleFunction.propTypes,
     xs: _propTypes.default.object,
@@ -110,3 +111,3 @@ sm: _propTypes.default.object,
     xl: _propTypes.default.object
-  }) : {};
+  } : {};
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
@@ -116,4 +117,3 @@ return newStyleFunction;
 function createEmptyBreakpointObject(breakpointsInput = {}) {
-  var _breakpointsInput$key;
-  const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
     const breakpointStyleKey = breakpointsInput.up(key);
@@ -120,0 +120,0 @@ acc[breakpointStyleKey] = {};

node/colorManipulator/colorManipulator.js

@@ -83,3 +83,3 @@ "use strict";
   const type = color.substring(0, marker);
-  if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
+  if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
@@ -96,3 +96,3 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : (0, _formatMuiErrorMessage2.default)(9, color));
     }
-    if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
+    if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
@@ -120,3 +120,3 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : (0, _formatMuiErrorMessage2.default)(10, colorSpace));
   const decomposedColor = decomposeColor(color);
-  return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
+  return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.includes('hsl') && idx !== 0 ? `${val}%` : val).join(' ');
 };
@@ -151,10 +151,10 @@ exports.colorChannel = colorChannel;
   } = color;
-  if (type.indexOf('rgb') !== -1) {
+  if (type.includes('rgb')) {
     // Only convert the first 3 values to int (i.e. not alpha)
     values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
-  } else if (type.indexOf('hsl') !== -1) {
+  } else if (type.includes('hsl')) {
     values[1] = `${values[1]}%`;
     values[2] = `${values[2]}%`;
   }
-  if (type.indexOf('color') !== -1) {
+  if (type.includes('color')) {
     values = `${colorSpace} ${values.join(' ')}`;
@@ -174,3 +174,3 @@ } else {
   // Idempotent
-  if (color.indexOf('#') === 0) {
+  if (color.startsWith('#')) {
     return color;
@@ -286,5 +286,5 @@ }
   coefficient = clampWrapper(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
+  if (color.type.includes('hsl')) {
     color.values[2] *= 1 - coefficient;
-  } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
+  } else if (color.type.includes('rgb') || color.type.includes('color')) {
     for (let i = 0; i < 3; i += 1) {
@@ -316,9 +316,9 @@ color.values[i] *= 1 - coefficient;
   coefficient = clampWrapper(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
+  if (color.type.includes('hsl')) {
     color.values[2] += (100 - color.values[2]) * coefficient;
-  } else if (color.type.indexOf('rgb') !== -1) {
+  } else if (color.type.includes('rgb')) {
     for (let i = 0; i < 3; i += 1) {
       color.values[i] += (255 - color.values[i]) * coefficient;
     }
-  } else if (color.type.indexOf('color') !== -1) {
+  } else if (color.type.includes('color')) {
     for (let i = 0; i < 3; i += 1) {
@@ -325,0 +325,0 @@ color.values[i] += (1 - color.values[i]) * coefficient;

node/Container/createContainer.js

@@ -8,4 +8,2 @@ "use strict";
 exports.default = createContainer;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -21,3 +19,2 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -66,3 +63,3 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     ownerState
-  }) => (0, _extends2.default)({
+  }) => ({
     width: '100%',
@@ -72,11 +69,11 @@ marginLeft: 'auto',
     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)
-    }
+    ...(!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)
+      }
+    })
   }), ({
@@ -98,16 +95,20 @@ theme,
     ownerState
-  }) => (0, _extends2.default)({}, 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}`
+      }
+    })
   }));
@@ -117,10 +118,12 @@ const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
     const {
-        className,
-        component = 'div',
-        disableGutters = false,
-        fixed = false,
-        maxWidth = 'lg'
-      } = props,
-      other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-    const ownerState = (0, _extends2.default)({}, props, {
+      className,
+      component = 'div',
+      disableGutters = false,
+      fixed = false,
+      maxWidth = 'lg',
+      classes: classesProp,
+      ...other
+    } = props;
+    const ownerState = {
+      ...props,
       component,
@@ -130,3 +133,3 @@ disableGutters,
       maxWidth
-    });
+    };
 
@@ -138,3 +141,3 @@ // @ts-ignore module augmentation fails if custom breakpoints are used
       // @ts-ignore theme is injected by the styled util
-      (0, _jsxRuntime.jsx)(ContainerRoot, (0, _extends2.default)({
+      (0, _jsxRuntime.jsx)(ContainerRoot, {
         as: component
@@ -145,4 +148,5 @@ // @ts-ignore module augmentation fails if custom breakpoints are used
         className: (0, _clsx.default)(classes.root, className),
-        ref: ref
-      }, other))
+        ref: ref,
+        ...other
+      })
     );
@@ -149,0 +153,0 @@ });

node/createBox/createBox.js

@@ -9,4 +9,2 @@ "use strict";
 exports.default = createBox;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -18,3 +16,2 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "component"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -34,16 +31,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     const theme = (0, _useTheme.default)(defaultTheme);
-    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)({
+    const {
+      className,
+      component = 'div',
+      ...other
+    } = (0, _styleFunctionSx.extendSxProp)(inProps);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxRoot, {
       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;
 }

node/createStyled/createStyled.js

@@ -10,4 +10,2 @@ "use strict";
 exports.systemDefaultTheme = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _styledEngine = _interopRequireWildcard(require("@mui/styled-engine"));
@@ -19,20 +17,7 @@ var _deepmerge = require("@mui/utils/deepmerge");
 var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx"));
-const _excluded = ["ownerState"],
-  _excluded2 = ["variants"],
-  _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
-/* eslint-disable no-underscore-dangle */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
-}
+/* eslint-disable no-underscore-dangle */
 
-// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
-function isStringTag(tag) {
-  return typeof tag === 'string' &&
-  // 96 is one less than the char code
-  // for "a" so this is checking that
-  // it's a lowercase character
-  tag.charCodeAt(0) > 96;
-}
+const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
 
@@ -43,15 +28,17 @@ // Update /system/styled/#api in case if this changes
 }
-const systemDefaultTheme = exports.systemDefaultTheme = (0, _createTheme.default)();
-const lowercaseFirstLetter = string => {
-  if (!string) {
-    return string;
+function resolveTheme(themeId, theme, defaultTheme) {
+  return isObjectEmpty(theme) ? defaultTheme : theme[themeId] || theme;
+}
+const PROCESSED_PROPS = Symbol('mui.processed_props');
+function attachTheme(props, themeId, defaultTheme) {
+  if (PROCESSED_PROPS in props) {
+    return props[PROCESSED_PROPS];
   }
-  return string.charAt(0).toLowerCase() + string.slice(1);
-};
-function resolveTheme({
-  defaultTheme,
-  theme,
-  themeId
-}) {
-  return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
+  const processedProps = {
+    ...props,
+    theme: resolveTheme(themeId, props.theme, defaultTheme)
+  };
+  props[PROCESSED_PROPS] = processedProps;
+  processedProps[PROCESSED_PROPS] = processedProps;
+  return processedProps;
 }
@@ -62,48 +49,55 @@ function defaultOverridesResolver(slot) {
   }
-  return (props, styles) => styles[slot];
+  return (_props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
-  let {
-      ownerState
-    } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle((0, _extends2.default)({
-    ownerState
-  }, props)) : callableStyle;
-  if (Array.isArray(resolvedStylesArg)) {
-    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, (0, _extends2.default)({
-      ownerState
-    }, props)));
+function processStyle(style, props) {
+  const resolvedStyle = typeof style === 'function' ? style(props) : style;
+  if (Array.isArray(resolvedStyle)) {
+    return resolvedStyle.flatMap(subStyle => processStyle(subStyle, props));
   }
-  if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
+  if (Array.isArray(resolvedStyle?.variants)) {
     const {
-        variants = []
-      } = resolvedStylesArg,
-      otherStyles = (0, _objectWithoutPropertiesLoose2.default)(resolvedStylesArg, _excluded2);
+      variants,
+      ...otherStyles
+    } = resolvedStyle;
     let result = otherStyles;
-    variants.forEach(variant => {
-      let isMatch = true;
+    let mergedState; // We might not need it, initalized lazily
+
+    /* eslint-disable no-labels */
+    variantLoop: for (let i = 0; i < variants.length; i += 1) {
+      const variant = variants[i];
       if (typeof variant.props === 'function') {
-        isMatch = variant.props((0, _extends2.default)({
-          ownerState
-        }, props, ownerState));
+        mergedState ?? (mergedState = {
+          ...props,
+          ...props.ownerState,
+          ownerState: props.ownerState
+        });
+        if (!variant.props(mergedState)) {
+          continue;
+        }
       } else {
-        Object.keys(variant.props).forEach(key => {
-          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
-            isMatch = false;
+        for (const key in variant.props) {
+          if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
+            continue variantLoop;
           }
+        }
+      }
+      if (!Array.isArray(result)) {
+        result = [result];
+      }
+      if (typeof variant.style === 'function') {
+        mergedState ?? (mergedState = {
+          ...props,
+          ...props.ownerState,
+          ownerState: props.ownerState
         });
+        result.push(variant.style(mergedState));
+      } else {
+        result.push(variant.style);
       }
-      if (isMatch) {
-        if (!Array.isArray(result)) {
-          result = [result];
-        }
-        result.push(typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
-          ownerState
-        }, props, ownerState)) : variant.style);
-      }
-    });
+    }
+    /* eslint-enable no-labels */
+
     return result;
   }
-  return resolvedStylesArg;
+  return resolvedStyle;
 }
@@ -118,23 +112,18 @@ function createStyled(input = {}) {
   const systemSx = props => {
-    return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {
-      theme: resolveTheme((0, _extends2.default)({}, props, {
-        defaultTheme,
-        themeId
-      }))
-    }));
+    return (0, _styleFunctionSx.default)(attachTheme(props, themeId, defaultTheme));
   };
   systemSx.__mui_systemSx = true;
-  return (tag, inputOptions = {}) => {
+  const styled = (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)));
+    (0, _styledEngine.internal_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 = (0, _objectWithoutPropertiesLoose2.default)(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;
 
@@ -168,30 +157,22 @@ // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     }
-    const defaultStyledResolver = (0, _styledEngine.default)(tag, (0, _extends2.default)({
+    const defaultStyledResolver = (0, _styledEngine.default)(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label
-    }, options));
-    const transformStyleArg = stylesArg => {
+      label,
+      ...options
+    });
+    const transformStyleArg = style => {
       // 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 || (0, _deepmerge.isPlainObject)(stylesArg)) {
-        return props => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
-          theme: resolveTheme({
-            theme: props.theme,
-            defaultTheme,
-            themeId
-          })
-        }));
+      if (typeof style === 'function' && style.__emotion_real !== style || (0, _deepmerge.isPlainObject)(style)) {
+        return props => processStyle(style, attachTheme(props, themeId, defaultTheme));
       }
-      return stylesArg;
+      return style;
     };
-    const muiStyledResolver = (styleArg, ...expressions) => {
-      let transformedStyleArg = transformStyleArg(styleArg);
+    const muiStyledResolver = (style, ...expressions) => {
+      let transformedStyle = transformStyleArg(style);
       const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme((0, _extends2.default)({}, props, {
-            defaultTheme,
-            themeId
-          }));
+          const theme = resolveTheme(themeId, props.theme, defaultTheme);
           if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
@@ -202,8 +183,9 @@ return null;
           const resolvedStyleOverrides = {};
+          const propsWithTheme = attachTheme(props, themeId, defaultTheme);
+
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
-          Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
-              theme
-            }));
-          });
+          // eslint-disable-next-line guard-for-in
+          for (const slotKey in styleOverrides) {
+            resolvedStyleOverrides[slotKey] = processStyle(styleOverrides[slotKey], propsWithTheme);
+          }
           return overridesResolver(props, resolvedStyleOverrides);
@@ -214,13 +196,10 @@ });
         expressionsWithDefaultTheme.push(props => {
-          var _theme$components;
-          const theme = resolveTheme((0, _extends2.default)({}, props, {
-            defaultTheme,
-            themeId
-          }));
-          const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
-          return processStyleArg({
+          const theme = resolveTheme(themeId, props.theme, defaultTheme);
+          const themeVariants = theme?.components?.[componentName]?.variants;
+          if (!themeVariants) {
+            return null;
+          }
+          return processStyle({
             variants: themeVariants
-          }, (0, _extends2.default)({}, props, {
-            theme
-          }));
+          }, attachTheme(props, themeId, defaultTheme));
         });
@@ -232,9 +211,9 @@ }
       const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-      if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
+      if (Array.isArray(style) && numOfCustomFnsApplied > 0) {
         const placeholders = new Array(numOfCustomFnsApplied).fill('');
         // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
-        transformedStyleArg = [...styleArg, ...placeholders];
-        transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
+        transformedStyle = [...style, ...placeholders];
+        transformedStyle.raw = [...style.raw, ...placeholders];
       }
-      const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
+      const Component = defaultStyledResolver(transformedStyle, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== 'production') {
@@ -260,2 +239,25 @@ let displayName;
   };
+  return styled;
+}
+function isObjectEmpty(object) {
+  // eslint-disable-next-line
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
+
+// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
+function isStringTag(tag) {
+  return typeof tag === 'string' &&
+  // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96;
+}
+function lowercaseFirstLetter(string) {
+  if (!string) {
+    return string;
+  }
+  return string.charAt(0).toLowerCase() + string.slice(1);
 }

node/createTheme/applyStyles.js

@@ -11,3 +11,3 @@ "use strict";
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
@@ -69,6 +69,12 @@ *
   const theme = this;
-  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
-    // If CssVarsProvider is used as a provider,
-    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
-    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+  if (theme.vars) {
+    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
+      return {};
+    }
+    // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
+    let selector = theme.getColorSchemeSelector(key);
+    if (selector.includes('data-') || selector.includes('.')) {
+      // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
+      selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
+    }
     return {
@@ -75,0 +81,0 @@ [selector]: styles

node/createTheme/createTheme.js

@@ -8,6 +8,4 @@ "use strict";
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
+var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
 var _cssContainerQueries = _interopRequireDefault(require("../cssContainerQueries"));
@@ -19,11 +17,10 @@ var _shape = _interopRequireDefault(require("./shape"));
 var _applyStyles = _interopRequireDefault(require("./applyStyles"));
-const _excluded = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme(options = {}, ...args) {
   const {
-      breakpoints: breakpointsInput = {},
-      palette: paletteInput = {},
-      spacing: spacingInput,
-      shape: shapeInput = {}
-    } = options,
-    other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+    breakpoints: breakpointsInput = {},
+    palette: paletteInput = {},
+    spacing: spacingInput,
+    shape: shapeInput = {},
+    ...other
+  } = options;
   const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
@@ -36,7 +33,11 @@ const spacing = (0, _createSpacing.default)(spacingInput);
     // Inject component definitions.
-    palette: (0, _extends2.default)({
-      mode: 'light'
-    }, paletteInput),
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
     spacing,
-    shape: (0, _extends2.default)({}, _shape.default, shapeInput)
+    shape: {
+      ..._shape.default,
+      ...shapeInput
+    }
   }, other);
@@ -46,3 +47,6 @@ muiTheme = (0, _cssContainerQueries.default)(muiTheme);
   muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _defaultSxConfig.default, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ..._defaultSxConfig.default,
+    ...other?.unstable_sxConfig
+  };
   muiTheme.unstable_sx = function sx(props) {
@@ -49,0 +53,0 @@ return (0, _styleFunctionSx.default)({

node/createTheme/index.js

@@ -26,3 +26,3 @@ "use strict";
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
+var _createBreakpoints = _interopRequireDefault(require("../createBreakpoints/createBreakpoints"));
 var _applyStyles = _interopRequireDefault(require("./applyStyles"));

node/cssContainerQueries/cssContainerQueries.js

@@ -11,3 +11,2 @@ "use strict";
 exports.sortContainerQueries = sortContainerQueries;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
@@ -25,5 +24,4 @@ /**
   const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    var _a$match, _b$match;
     const regex = /min-width:\s*([0-9.]+)/;
-    return +(((_a$match = a.match(regex)) == null ? void 0 : _a$match[1]) || 0) - +(((_b$match = b.match(regex)) == null ? void 0 : _b$match[1]) || 0);
+    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
   });
@@ -38,13 +36,15 @@ if (!sorted.length) {
     return acc;
-  }, (0, _extends2.default)({}, css));
+  }, {
+    ...css
+  });
 }
 function isCqShorthand(breakpointKeys, value) {
-  return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
 }
 function getContainerQuery(theme, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : (0, _formatMuiErrorMessage2.default)(21, `(${shorthand})`));
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : (0, _formatMuiErrorMessage2.default)(18, `(${shorthand})`));
     }
@@ -54,3 +54,3 @@ return null;
   const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
   return theme.containerQueries(containerName).up(value);
@@ -69,3 +69,3 @@ }
         // `@container` does not work with `not all and`, so need to invert the logic
-        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
       }
@@ -81,5 +81,6 @@ return result;
   attachCq(containerQueries);
-  return (0, _extends2.default)({}, themeInput, {
+  return {
+    ...themeInput,
     containerQueries
-  });
+  };
 }

node/cssVars/createCssVarsProvider.js

@@ -9,5 +9,2 @@ "use strict";
 exports.default = createCssVarsProvider;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
@@ -18,6 +15,5 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
-var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
+var _InitColorSchemeScript = _interopRequireWildcard(require("../InitColorSchemeScript/InitColorSchemeScript"));
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["colorSchemes", "components", "cssVarPrefix"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -36,13 +32,18 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
     theme: defaultTheme = {},
-    attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
-    modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey: defaultColorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    defaultMode: designSystemMode = 'light',
-    defaultColorScheme: designSystemColorScheme,
+    modeStorageKey: defaultModeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
+    defaultColorScheme,
     resolveTheme
   } = options;
-  if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
-    console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
-  }
+  const defaultContext = {
+    allColorSchemes: [],
+    colorScheme: undefined,
+    darkColorScheme: undefined,
+    lightColorScheme: undefined,
+    mode: undefined,
+    setColorScheme: () => {},
+    setMode: () => {},
+    systemMode: undefined
+  };
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -52,19 +53,9 @@ if (process.env.NODE_ENV !== 'production') {
   }
-  const useColorScheme = () => {
-    const value = React.useContext(ColorSchemeContext);
-    if (!value) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`useColorScheme\` must be called under <CssVarsProvider />` : (0, _formatMuiErrorMessage2.default)(19));
-    }
-    return value;
-  };
+  const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
   function CssVarsProvider(props) {
-    var _restThemeProp$genera, _theme$generateStyleS;
     const {
       children,
-      theme: themeProp = defaultTheme,
+      theme: themeProp,
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
-      attribute = defaultAttribute,
-      defaultMode = designSystemMode,
-      defaultColorScheme = designSystemColorScheme,
       disableTransitionOnChange = designSystemTransitionOnChange,
@@ -74,3 +65,2 @@ storageWindow = typeof window === 'undefined' ? undefined : window,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-      colorSchemeSelector = ':root',
       disableNestedContext = false,
@@ -83,13 +73,20 @@ disableStyleSheetGeneration = false
     const nested = !!ctx && !disableNestedContext;
-    const scopedTheme = themeProp[themeId];
-    const _ref = scopedTheme || themeProp,
-      {
-        colorSchemes = {},
-        components = {},
-        cssVarPrefix
-      } = _ref,
-      restThemeProp = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-    const allColorSchemes = Object.keys(colorSchemes);
+    const initialTheme = React.useMemo(() => {
+      if (themeProp) {
+        return themeProp;
+      }
+      return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
+    }, [themeProp]);
+    const scopedTheme = initialTheme[themeId];
+    const {
+      colorSchemes = {},
+      components = {},
+      cssVarPrefix,
+      ...restThemeProp
+    } = scopedTheme || initialTheme;
+    const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
+    const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
@@ -120,29 +117,12 @@ // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     }
-    const calculatedMode = (() => {
-      if (mode) {
-        return mode;
-      }
-      // This scope occurs on the server
-      if (defaultMode === 'system') {
-        return designSystemMode;
-      }
-      return defaultMode;
-    })();
-    const calculatedColorScheme = (() => {
-      if (!colorScheme) {
-        // This scope occurs on the server
-        if (calculatedMode === 'dark') {
-          return defaultDarkColorScheme;
-        }
-        // use light color scheme, if default mode is 'light' | 'system'
-        return defaultLightColorScheme;
-      }
-      return colorScheme;
-    })();
 
+    // `colorScheme` is undefined on the server and hydration phase
+    const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
+
     // 2. get the `vars` object that refers to the CSS custom properties
-    const themeVars = ((_restThemeProp$genera = restThemeProp.generateThemeVars) == null ? void 0 : _restThemeProp$genera.call(restThemeProp)) || restThemeProp.vars;
+    const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
     // 3. Start composing the theme object
-    const theme = (0, _extends2.default)({}, restThemeProp, {
+    const theme = {
+      ...restThemeProp,
       components,
@@ -152,3 +132,3 @@ colorSchemes,
       vars: themeVars
-    });
+    };
     if (typeof theme.generateSpacing === 'function') {
@@ -159,4 +139,5 @@ theme.spacing = theme.generateSpacing();
     // 4. Resolve the color scheme and merge it to the theme
-    Object.entries(colorSchemes).forEach(([key, scheme]) => {
-      if (key === calculatedColorScheme) {
+    if (calculatedColorScheme) {
+      const scheme = colorSchemes[calculatedColorScheme];
+      if (scheme && typeof scheme === 'object') {
         // 4.1 Merge the selected color scheme to the theme
@@ -166,3 +147,6 @@ Object.keys(scheme).forEach(schemeKey => {
             // shallow merge the 1st level structure of the theme.
-            theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
+            theme[schemeKey] = {
+              ...theme[schemeKey],
+              ...scheme[schemeKey]
+            };
           } else {
@@ -172,21 +156,3 @@ theme[schemeKey] = scheme[schemeKey];
         });
-        if (theme.palette) {
-          theme.palette.colorScheme = key;
-        }
       }
-    });
-    const resolvedDefaultColorScheme = (() => {
-      if (typeof defaultColorScheme === 'string') {
-        return defaultColorScheme;
-      }
-      if (defaultMode === 'dark') {
-        return defaultColorScheme.dark;
-      }
-      return defaultColorScheme.light;
-    })();
-    themeProp.defaultColorScheme = resolvedDefaultColorScheme;
-    themeProp.colorSchemeSelector = colorSchemeSelector;
-    themeProp.attribute = attribute;
-    if (!theme.getColorSchemeSelector) {
-      theme.getColorSchemeSelector = targetColorScheme => `[${attribute}="${targetColorScheme}"] &`;
     }
@@ -196,8 +162,38 @@
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    const colorSchemeSelector = restThemeProp.colorSchemeSelector;
     React.useEffect(() => {
-      if (colorScheme && colorSchemeNode) {
-        // attaches attribute to <html> because the css variables are attached to :root (html)
-        colorSchemeNode.setAttribute(attribute, colorScheme);
+      if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
+        const selector = colorSchemeSelector;
+        let rule = colorSchemeSelector;
+        if (selector === 'class') {
+          rule = `.%s`;
+        }
+        if (selector === 'data') {
+          rule = `[data-%s]`;
+        }
+        if (selector?.startsWith('data-') && !selector.includes('%s')) {
+          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+          rule = `[${selector}="%s"]`;
+        }
+        if (rule.startsWith('.')) {
+          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => rule.substring(1).replace('%s', scheme)));
+          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
+        } else {
+          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
+          if (matches) {
+            const [attr, value] = matches[1].split('=');
+            if (!value) {
+              // for attributes like `data-theme-dark`, `data-theme-light`
+              // remove all the existing data attributes before setting the new one
+              allColorSchemes.forEach(scheme => {
+                colorSchemeNode.removeAttribute(attr.replace(colorScheme, scheme));
+              });
+            }
+            colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
+          } else {
+            colorSchemeNode.setAttribute(rule, colorScheme);
+          }
+        }
       }
-    }, [colorScheme, attribute, colorSchemeNode]);
+    }, [colorScheme, colorSchemeSelector, colorSchemeNode, allColorSchemes]);
 
@@ -240,3 +236,3 @@ // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
     let shouldGenerateStyleSheet = true;
-    if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {
+    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;
@@ -246,3 +242,3 @@ }
       children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-        children: (((_theme$generateStyleS = theme.generateStyleSheets) == null ? void 0 : _theme$generateStyleS.call(theme)) || []).map((styles, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+        children: (theme.generateStyleSheets?.() || []).map((styles, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
           styles: styles
@@ -266,6 +262,2 @@ }, index))
     /**
-     * The body attribute name to attach colorScheme.
-     */
-    attribute: _propTypes.default.string,
-    /**
      * The component tree.
@@ -279,6 +271,2 @@ */
     /**
-     * The CSS selector for attaching the generated custom properties
-     */
-    colorSchemeSelector: _propTypes.default.string,
-    /**
      * localStorage key used to store `colorScheme`
@@ -288,10 +276,2 @@ */
     /**
-     * The initial color scheme used.
-     */
-    defaultColorScheme: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-    /**
-     * The initial mode used.
-     */
-    defaultMode: _propTypes.default.string,
-    /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
@@ -328,12 +308,11 @@ */
   } : void 0;
-  const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
-  const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
-  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
-    attribute: defaultAttribute,
+  const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+  const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+  const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)({
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
-    defaultMode: designSystemMode,
     defaultLightColorScheme,
     defaultDarkColorScheme,
-    modeStorageKey: defaultModeStorageKey
-  }, params));
+    modeStorageKey: defaultModeStorageKey,
+    ...params
+  });
   return {
@@ -340,0 +319,0 @@ CssVarsProvider,

node/cssVars/createCssVarsTheme.js

@@ -8,14 +8,22 @@ "use strict";
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
-function createCssVarsTheme(theme) {
+var _getColorSchemeSelector = require("./getColorSchemeSelector");
+var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
+function createCssVarsTheme({
+  colorSchemeSelector = `[${_InitColorSchemeScript.DEFAULT_ATTRIBUTE}="%s"]`,
+  ...theme
+}) {
   const output = theme;
-  const result = (0, _prepareCssVars.default)(output, (0, _extends2.default)({}, theme, {
-    prefix: theme.cssVarPrefix
-  }));
+  const result = (0, _prepareCssVars.default)(output, {
+    ...theme,
+    prefix: theme.cssVarPrefix,
+    colorSchemeSelector
+  });
   output.vars = result.vars;
   output.generateThemeVars = result.generateThemeVars;
   output.generateStyleSheets = result.generateStyleSheets;
+  output.colorSchemeSelector = colorSchemeSelector;
+  output.getColorSchemeSelector = (0, _getColorSchemeSelector.createGetColorSchemeSelector)(colorSchemeSelector);
   return output;
 }
 var _default = exports.default = createCssVarsTheme;

node/cssVars/index.js

@@ -14,12 +14,12 @@ "use strict";
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "createGetColorSchemeSelector", {
   enumerable: true,
   get: function () {
-    return _createCssVarsProvider.default;
+    return _getColorSchemeSelector.createGetColorSchemeSelector;
   }
 });
-Object.defineProperty(exports, "getInitColorSchemeScript", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _getInitColorSchemeScript.default;
+    return _createCssVarsProvider.default;
   }
@@ -40,5 +40,5 @@ });
 var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
-var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
 var _prepareTypographyVars = _interopRequireDefault(require("./prepareTypographyVars"));
-var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));
+var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));
+var _getColorSchemeSelector = require("./getColorSchemeSelector");

node/cssVars/prepareCssVars.js

@@ -8,20 +8,17 @@ "use strict";
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
-const _excluded = ["getSelector"],
-  _excluded2 = ["colorSchemes", "components", "defaultColorScheme"];
-function prepareCssVars(theme, _ref = {}) {
-  let {
-      getSelector
-    } = _ref,
-    parserConfig = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+function prepareCssVars(theme, parserConfig = {}) {
+  const {
+    getSelector = defaultGetSelector,
+    disableCssColorScheme,
+    colorSchemeSelector: selector
+  } = parserConfig;
   // @ts-ignore - ignore components do not exist
   const {
-      colorSchemes = {},
-      defaultColorScheme = 'light'
-    } = theme,
-    otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded2);
+    colorSchemes = {},
+    components,
+    defaultColorScheme = 'light',
+    ...otherTheme
+  } = theme;
   const {
@@ -35,5 +32,5 @@ vars: rootVars,
   const {
-      [defaultColorScheme]: defaultScheme
-    } = colorSchemes,
-    otherColorSchemes = (0, _objectWithoutPropertiesLoose2.default)(colorSchemes, [defaultColorScheme].map(_toPropertyKey2.default));
+    [defaultColorScheme]: defaultScheme,
+    ...otherColorSchemes
+  } = colorSchemes;
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
@@ -64,4 +61,39 @@ const {
   }
+  function defaultGetSelector(colorScheme, cssObject) {
+    let rule = selector;
+    if (selector === 'class') {
+      rule = '.%s';
+    }
+    if (selector === 'data') {
+      rule = '[data-%s]';
+    }
+    if (selector?.startsWith('data-') && !selector.includes('%s')) {
+      // 'data-joy-color-scheme' -> '[data-joy-color-scheme="%s"]'
+      rule = `[${selector}="%s"]`;
+    }
+    if (colorScheme) {
+      if (rule === 'media') {
+        if (theme.defaultColorScheme === colorScheme) {
+          return ':root';
+        }
+        const mode = colorSchemes[colorScheme]?.palette?.mode || colorScheme;
+        return {
+          [`@media (prefers-color-scheme: ${mode})`]: {
+            ':root': cssObject
+          }
+        };
+      }
+      if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
+        return rule.replace('%s', String(colorScheme));
+      }
+    }
+    return ':root';
+  }
   const generateThemeVars = () => {
-    let vars = (0, _extends2.default)({}, rootVars);
+    let vars = {
+      ...rootVars
+    };
     Object.entries(colorSchemesMap).forEach(([, {
@@ -77,14 +109,18 @@ vars: schemeVars
     const colorScheme = theme.defaultColorScheme || 'light';
-    function insertStyleSheet(selector, css) {
+    function insertStyleSheet(key, css) {
       if (Object.keys(css).length) {
-        stylesheets.push(typeof selector === 'string' ? {
-          [selector]: (0, _extends2.default)({}, css)
-        } : selector);
+        stylesheets.push(typeof key === 'string' ? {
+          [key]: {
+            ...css
+          }
+        } : key);
       }
     }
-    insertStyleSheet((getSelector == null ? void 0 : getSelector(undefined, (0, _extends2.default)({}, rootCss))) || ':root', rootCss);
+    insertStyleSheet(getSelector(undefined, {
+      ...rootCss
+    }), rootCss);
     const {
-        [colorScheme]: defaultSchemeVal
-      } = colorSchemesMap,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(colorSchemesMap, [colorScheme].map(_toPropertyKey2.default));
+      [colorScheme]: defaultSchemeVal,
+      ...other
+    } = colorSchemesMap;
     if (defaultSchemeVal) {
@@ -95,8 +131,26 @@ // default color scheme has to come before other color schemes
       } = defaultSchemeVal;
-      insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, (0, _extends2.default)({}, css))) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+      const cssColorSheme = colorSchemes[colorScheme]?.palette?.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
+        ...css
+      };
+      insertStyleSheet(getSelector(colorScheme, {
+        ...finalCss
+      }), finalCss);
     }
-    Object.entries(rest).forEach(([key, {
+    Object.entries(other).forEach(([key, {
       css
     }]) => {
-      insertStyleSheet((getSelector == null ? void 0 : getSelector(key, (0, _extends2.default)({}, css))) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+      const cssColorSheme = colorSchemes[key]?.palette?.mode;
+      const finalCss = !disableCssColorScheme && cssColorSheme ? {
+        colorScheme: cssColorSheme,
+        ...css
+      } : {
+        ...css
+      };
+      insertStyleSheet(getSelector(key, {
+        ...finalCss
+      }), finalCss);
     });
@@ -103,0 +157,0 @@ return stylesheets;

node/cssVars/useCurrentColorScheme.js

 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -11,9 +10,8 @@ value: true
 exports.getSystemMode = getSystemMode;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _getInitColorSchemeScript = require("./getInitColorSchemeScript");
+var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getSystemMode(mode) {
-  if (typeof window !== 'undefined' && mode === 'system') {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -69,7 +67,8 @@ if (mql.matches) {
     supportedColorSchemes = [],
-    modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    modeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
+  const isMultiSchemes = supportedColorSchemes.length > 1;
   const [state, setState] = React.useState(() => {
@@ -86,2 +85,11 @@ const initialMode = initializeValue(modeStorageKey, defaultMode);
   });
+  // This could be improved with `React.useSyncExternalStore` in the future.
+  const [, setHasMounted] = React.useState(false);
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    if (isMultiSchemes) {
+      setHasMounted(true); // to rerender the component after hydration
+    }
+    hasMounted.current = true;
+  }, [isMultiSchemes]);
   const colorScheme = getColorScheme(state);
@@ -94,3 +102,3 @@ const setMode = React.useCallback(mode => {
       }
-      const newMode = mode != null ? mode : defaultMode;
+      const newMode = mode ?? defaultMode;
       try {
@@ -101,6 +109,7 @@ localStorage.setItem(modeStorageKey, newMode);
       }
-      return (0, _extends2.default)({}, currentState, {
+      return {
+        ...currentState,
         mode: newMode,
         systemMode: getSystemMode(newMode)
-      });
+      };
     });
@@ -117,6 +126,7 @@ }, [modeStorageKey, defaultMode]);
         }
-        return (0, _extends2.default)({}, currentState, {
+        return {
+          ...currentState,
           lightColorScheme: defaultLightColorScheme,
           darkColorScheme: defaultDarkColorScheme
-        });
+        };
       });
@@ -128,3 +138,5 @@ } else if (typeof value === 'string') {
         setState(currentState => {
-          const newState = (0, _extends2.default)({}, currentState);
+          const newState = {
+            ...currentState
+          };
           processState(currentState, mode => {
@@ -148,3 +160,5 @@ try {
       setState(currentState => {
-        const newState = (0, _extends2.default)({}, currentState);
+        const newState = {
+          ...currentState
+        };
         const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
@@ -183,3 +197,3 @@ const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
       setState(currentState => {
-        const systemMode = event != null && event.matches ? 'dark' : 'light';
+        const systemMode = event?.matches ? 'dark' : 'light';
 
@@ -190,5 +204,6 @@ // Early exit, nothing changed.
         }
-        return (0, _extends2.default)({}, currentState, {
+        return {
+          ...currentState,
           systemMode
-        });
+        };
       });
@@ -202,2 +217,5 @@ }
   React.useEffect(() => {
+    if (typeof window.matchMedia !== 'function' || !isMultiSchemes) {
+      return undefined;
+    }
     const handler = (...args) => mediaListener.current(...args);
@@ -214,7 +232,7 @@
     };
-  }, []);
+  }, [isMultiSchemes]);
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    if (storageWindow) {
+    if (storageWindow && isMultiSchemes) {
       const handleStorage = event => {
@@ -246,8 +264,11 @@ const value = event.newValue;
     return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return (0, _extends2.default)({}, state, {
-    colorScheme,
+  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
+  return {
+    ...state,
+    mode: hasMounted.current || !isMultiSchemes ? state.mode : undefined,
+    systemMode: hasMounted.current || !isMultiSchemes ? state.systemMode : undefined,
+    colorScheme: hasMounted.current || !isMultiSchemes ? colorScheme : undefined,
     setMode,
     setColorScheme
-  });
+  };
 }

node/index.js

 /**
- * @mui/system v6.0.0-dev.240424162023-9968b4889d
+ * @mui/system v6.0.0-rc.0
  *
@@ -67,3 +67,3 @@ * @license MIT
   Container: true,
-  Unstable_Grid: true,
+  Grid: true,
   Stack: true
@@ -89,2 +89,8 @@ };
 });
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
 Object.defineProperty(exports, "RtlProvider", {
@@ -114,8 +120,2 @@ enumerable: true,
 });
-Object.defineProperty(exports, "Unstable_Grid", {
-  enumerable: true,
-  get: function () {
-    return _Grid.default;
-  }
-});
 Object.defineProperty(exports, "borders", {
@@ -515,3 +515,3 @@ enumerable: true,
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-var _createBreakpoints = _interopRequireDefault(require("./createTheme/createBreakpoints"));
+var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints/createBreakpoints"));
 var _createSpacing = _interopRequireDefault(require("./createTheme/createSpacing"));
@@ -554,2 +554,14 @@ var _shape = _interopRequireDefault(require("./createTheme/shape"));
 });
+var _version = require("./version");
+Object.keys(_version).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _version[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _version[key];
+    }
+  });
+});
 var _createContainer = _interopRequireDefault(require("./Container/createContainer"));
@@ -568,12 +580,12 @@ var _Container = _interopRequireWildcard(require("./Container"));
 });
-var _Grid = _interopRequireDefault(require("./Unstable_Grid/Grid"));
-var _Unstable_Grid = require("./Unstable_Grid");
-Object.keys(_Unstable_Grid).forEach(function (key) {
+var _Grid = _interopRequireDefault(require("./Grid/Grid"));
+var _Grid2 = require("./Grid");
+Object.keys(_Grid2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Unstable_Grid[key]) return;
+  if (key in exports && exports[key] === _Grid2[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Unstable_Grid[key];
+      return _Grid2[key];
     }
@@ -600,3 +612,3 @@ });
 function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : (0, _formatMuiErrorMessage2.default)(20));
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`experimental_sx\` has been moved to \`theme.unstable_sx\`.For more details, see https://github.com/mui/material-ui/pull/35150.` : (0, _formatMuiErrorMessage2.default)(19));
 }
@@ -603,0 +615,0 @@

node/propsToClassKey/propsToClassKey.js

@@ -8,5 +8,3 @@ "use strict";
 exports.default = propsToClassKey;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
-const _excluded = ["variant"];
 function isEmpty(string) {
@@ -23,5 +21,5 @@ return string.length === 0;
   const {
-      variant
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    variant,
+    ...other
+  } = props;
   let classKey = variant || '';
@@ -28,0 +26,0 @@ Object.keys(other).sort().forEach(key => {

node/RtlProvider/index.js

@@ -8,19 +8,16 @@ "use strict";
 exports.useRtl = exports.default = void 0;
-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 _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const RtlContext = /*#__PURE__*/React.createContext();
-function RtlProvider(_ref) {
-  let {
-      value
-    } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, (0, _extends2.default)({
-    value: value != null ? value : true
-  }, props));
+function RtlProvider({
+  value,
+  ...props
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, {
+    value: value ?? true,
+    ...props
+  });
 }
@@ -33,5 +30,5 @@ process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
   const value = React.useContext(RtlContext);
-  return value != null ? value : false;
+  return value ?? false;
 };
 exports.useRtl = useRtl;
 var _default = exports.default = RtlProvider;

node/sizing/sizing.js

@@ -23,4 +23,3 @@ "use strict";
     const styleFromPropValue = propValue => {
-      var _props$theme, _props$theme2;
-      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || _breakpoints.values[propValue];
+      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || _breakpoints.values[propValue];
       if (!breakpoint) {
@@ -31,3 +30,3 @@ return {
       }
-      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== 'px') {
+      if (props.theme?.breakpoints?.unit !== 'px') {
         return {
@@ -34,0 +33,0 @@ maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`

node/spacing/spacing.js

@@ -61,4 +61,3 @@ "use strict";
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  var _getPath;
-  const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey, true)) != null ? _getPath : defaultValue;
+  const themeSpacing = (0, _style.getPath)(theme, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
@@ -129,3 +128,3 @@ return val => {
   // it's doesn't worth the bundle size.
-  if (keys.indexOf(prop) === -1) {
+  if (!keys.includes(prop)) {
     return null;
@@ -132,0 +131,0 @@ }

node/Stack/createStack.js

@@ -9,4 +9,2 @@ "use strict";
 exports.style = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -25,3 +23,2 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -75,13 +72,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 }) => {
-  let styles = (0, _extends2.default)({
+  let styles = {
     display: 'flex',
-    flexDirection: 'column'
-  }, (0, _breakpoints.handleBreakpoints)({
-    theme
-  }, (0, _breakpoints.resolveBreakpointValues)({
-    values: ownerState.direction,
-    breakpoints: theme.breakpoints.values
-  }), propValue => ({
-    flexDirection: propValue
-  })));
+    flexDirection: 'column',
+    ...(0, _breakpoints.handleBreakpoints)({
+      theme
+    }, (0, _breakpoints.resolveBreakpointValues)({
+      values: ownerState.direction,
+      breakpoints: theme.breakpoints.values
+    }), propValue => ({
+      flexDirection: propValue
+    }))
+  };
   if (ownerState.spacing) {
@@ -155,11 +153,11 @@ const transformer = (0, _spacing.createUnarySpacing)(theme);
     const {
-        component = 'div',
-        direction = 'column',
-        spacing = 0,
-        divider,
-        children,
-        className,
-        useFlexGap = false
-      } = props,
-      other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      component = 'div',
+      direction = 'column',
+      spacing = 0,
+      divider,
+      children,
+      className,
+      useFlexGap = false,
+      ...other
+    } = props;
     const ownerState = {
@@ -171,10 +169,10 @@ direction,
     const classes = useUtilityClasses();
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, {
       as: component,
       ownerState: ownerState,
       ref: ref,
-      className: (0, _clsx.default)(classes.root, className)
-    }, other, {
+      className: (0, _clsx.default)(classes.root, className),
+      ...other,
       children: divider ? joinChildren(children, divider) : children
-    }));
+    });
   });
@@ -181,0 +179,0 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {

node/styleFunctionSx/extendSxProp.js

@@ -8,9 +8,5 @@ "use strict";
 exports.default = extendSxProp;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _deepmerge = require("@mui/utils/deepmerge");
 var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
-const _excluded = ["sx"];
 const splitProps = props => {
-  var _props$theme$unstable, _props$theme;
   const result = {
@@ -20,3 +16,3 @@ systemProps: {},
   };
-  const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : _defaultSxConfig.default;
+  const config = props?.theme?.unstable_sxConfig ?? _defaultSxConfig.default;
   Object.keys(props).forEach(prop => {
@@ -33,5 +29,5 @@ if (config[prop]) {
   const {
-      sx: inSx
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    sx: inSx,
+    ...other
+  } = props;
   const {
@@ -50,10 +46,17 @@ systemProps,
       }
-      return (0, _extends2.default)({}, systemProps, result);
+      return {
+        ...systemProps,
+        ...result
+      };
     };
   } else {
-    finalSx = (0, _extends2.default)({}, systemProps, inSx);
+    finalSx = {
+      ...systemProps,
+      ...inSx
+    };
   }
-  return (0, _extends2.default)({}, otherProps, {
+  return {
+    ...otherProps,
     sx: finalSx
-  });
+  };
 }

node/styleFunctionSx/styleFunctionSx.js

@@ -73,3 +73,2 @@ "use strict";
   function styleFunctionSx(props) {
-    var _theme$unstable_sxCon;
     const {
@@ -82,3 +81,3 @@ sx,
     }
-    const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : _defaultSxConfig.default;
+    const config = theme.unstable_sxConfig ?? _defaultSxConfig.default;
 
@@ -85,0 +84,0 @@ /*

node/ThemeProvider/ThemeProvider.js

@@ -9,3 +9,2 @@ "use strict";
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -18,2 +17,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RtlProvider = _interopRequireDefault(require("../RtlProvider"));
+var _DefaultPropsProvider = _interopRequireDefault(require("../DefaultPropsProvider"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,5 +28,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? (0, _extends2.default)({}, upperTheme, {
+      const result = themeId ? {
+        ...upperTheme,
         [themeId]: mergedTheme
-      }) : mergedTheme;
+      } : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
@@ -39,5 +40,9 @@ // see the test case "use provided theme from a callback" in ThemeProvider.test.js
     }
-    return themeId ? (0, _extends2.default)({}, upperTheme, {
+    return themeId ? {
+      ...upperTheme,
       [themeId]: localTheme
-    }) : (0, _extends2.default)({}, upperTheme, localTheme);
+    } : {
+      ...upperTheme,
+      ...localTheme
+    };
   }, [themeId, upperTheme, localTheme, isPrivate]);
@@ -75,3 +80,6 @@ }
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultPropsProvider.default, {
+          value: engineTheme?.components,
+          children: children
+        })
       })
@@ -78,0 +86,0 @@ })

node/useMediaQuery/useMediaQuery.js

@@ -15,14 +15,2 @@ "use strict";
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
@@ -42,3 +30,2 @@ const [match, setMatch] = React.useState(() => {
   (0, _useEnhancedEffect.default)(() => {
-    let active = true;
     if (!matchMedia) {
@@ -49,15 +36,8 @@ return undefined;
     const updateMatch = () => {
-      // Workaround Safari wrong implementation of matchMedia
-      // TODO can we remove it?
-      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
-      if (active) {
-        setMatch(queryList.matches);
-      }
+      setMatch(queryList.matches);
     };
     updateMatch();
-    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-    queryList.addListener(updateMatch);
+    queryList.addEventListener('change', updateMatch);
     return () => {
-      active = false;
-      queryList.removeListener(updateMatch);
+      queryList.removeEventListener('change', updateMatch);
     };
@@ -90,6 +70,5 @@ }, [query, matchMedia]);
     return [() => mediaQueryList.matches, notify => {
-      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-      mediaQueryList.addListener(notify);
+      mediaQueryList.addEventListener('change', notify);
       return () => {
-        mediaQueryList.removeListener(notify);
+        mediaQueryList.removeEventListener('change', notify);
       };
@@ -96,0 +75,0 @@ }];

node/useThemeProps/useThemeProps.js

@@ -21,3 +21,3 @@ "use strict";
   }
-  const mergedProps = (0, _getThemeProps.default)({
+  return (0, _getThemeProps.default)({
     theme,
@@ -27,3 +27,2 @@ name,
   });
-  return mergedProps;
 }

package.json

 {
   "name": "@mui/system",
-  "version": "6.0.0-dev.240424162023-9968b4889d",
+  "version": "6.0.0-rc.0",
   "private": false,
@@ -29,10 +29,10 @@ "author": "MUI Team",
   "dependencies": {
-    "@babel/runtime": "^7.24.4",
-    "clsx": "^2.1.0",
+    "@babel/runtime": "^7.25.0",
+    "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.0.0-alpha.3",
-    "@mui/styled-engine": "^6.0.0-alpha.3",
-    "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.3"
+    "@mui/private-theming": "6.0.0-rc.0",
+    "@mui/styled-engine": "6.0.0-rc.0",
+    "@mui/types": "^7.2.15",
+    "@mui/utils": "6.0.0-rc.0"
   },
@@ -42,4 +42,4 @@ "peerDependencies": {
     "@emotion/styled": "^11.3.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -63,3 +63,3 @@ "peerDependenciesMeta": {
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
@@ -66,0 +66,0 @@ "module": "./index.js",

propsToClassKey/propsToClassKey.js

@@ -1,3 +0,1 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["variant"];
 import capitalize from '@mui/utils/capitalize';
@@ -15,5 +13,5 @@ function isEmpty(string) {
   const {
-      variant
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    variant,
+    ...other
+  } = props;
   let classKey = variant || '';
@@ -20,0 +18,0 @@ Object.keys(other).sort().forEach(key => {

RtlProvider/index.js

@@ -1,4 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value"];
 import * as React from 'react';
@@ -8,10 +5,10 @@ import PropTypes from 'prop-types';
 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
+  });
 }
@@ -18,0 +15,0 @@ process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {

spacing/spacing.js

@@ -112,3 +112,3 @@ import responsivePropType from '../responsivePropType';
   // it's doesn't worth the bundle size.
-  if (keys.indexOf(prop) === -1) {
+  if (!keys.includes(prop)) {
     return null;
@@ -115,0 +115,0 @@ }

Stack/createStack.d.ts

 import * as React from 'react';
 import { OverridableComponent } from '@mui/types';
 import { StackTypeMap, StackOwnerState } from './StackProps';
-import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createBreakpoints/createBreakpoints';
 import { Spacing } from '../createTheme/createSpacing';
@@ -6,0 +6,0 @@ interface StyleFunctionProps {

Stack/createStack.js

@@ -1,4 +0,1 @@
-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';
@@ -63,13 +60,14 @@ import PropTypes from 'prop-types';
 }) => {
-  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) {
@@ -142,11 +140,11 @@ const transformer = createUnarySpacing(theme);
     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 = {
@@ -158,10 +156,10 @@ direction,
     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
-    }));
+    });
   });
@@ -168,0 +166,0 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {

styleFunctionSx/extendSxProp.js

@@ -1,4 +0,1 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["sx"];
 import { isPlainObject } from '@mui/utils/deepmerge';
@@ -23,5 +20,5 @@ import defaultSxConfig from './defaultSxConfig';
   const {
-      sx: inSx
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    sx: inSx,
+    ...other
+  } = props;
   const {
@@ -40,10 +37,17 @@ systemProps,
       }
-      return _extends({}, systemProps, result);
+      return {
+        ...systemProps,
+        ...result
+      };
     };
   } else {
-    finalSx = _extends({}, systemProps, inSx);
+    finalSx = {
+      ...systemProps,
+      ...inSx
+    };
   }
-  return _extends({}, otherProps, {
+  return {
+    ...otherProps,
     sx: finalSx
-  });
+  };
 }

ThemeProvider/ThemeProvider.js

 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
@@ -11,2 +10,3 @@ import PropTypes from 'prop-types';
 import RtlProvider from '../RtlProvider';
+import DefaultPropsProvider from '../DefaultPropsProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,5 +19,6 @@ const EMPTY_THEME = {};
       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.
@@ -30,5 +31,9 @@ // see the test case "use provided theme from a callback" in ThemeProvider.test.js
     }
-    return themeId ? _extends({}, upperTheme, {
+    return themeId ? {
+      ...upperTheme,
       [themeId]: localTheme
-    }) : _extends({}, upperTheme, localTheme);
+    } : {
+      ...upperTheme,
+      ...localTheme
+    };
   }, [themeId, upperTheme, localTheme, isPrivate]);
@@ -66,3 +71,6 @@ }
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
+          value: engineTheme?.components,
+          children: children
+        })
       })
@@ -69,0 +77,0 @@ })

useMediaQuery/useMediaQuery.d.ts

@@ -1,19 +0,1 @@
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-export interface MuiMediaQueryListEvent {
-    matches: boolean;
-}
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-export interface MuiMediaQueryList {
-    matches: boolean;
-    addListener: (listener: MuiMediaQueryListListener) => void;
-    removeListener: (listener: MuiMediaQueryListListener) => void;
-}
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-export type MuiMediaQueryListListener = (event: MuiMediaQueryListEvent) => void;
 export interface UseMediaQueryOptions {
@@ -20,0 +2,0 @@ /**

useMediaQuery/useMediaQuery.js

@@ -7,15 +7,2 @@ 'use client';
 import useTheme from '../useThemeWithoutDefault';
-
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
@@ -35,3 +22,2 @@ const [match, setMatch] = React.useState(() => {
   useEnhancedEffect(() => {
-    let active = true;
     if (!matchMedia) {
@@ -42,15 +28,8 @@ return undefined;
     const updateMatch = () => {
-      // Workaround Safari wrong implementation of matchMedia
-      // TODO can we remove it?
-      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
-      if (active) {
-        setMatch(queryList.matches);
-      }
+      setMatch(queryList.matches);
     };
     updateMatch();
-    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-    queryList.addListener(updateMatch);
+    queryList.addEventListener('change', updateMatch);
     return () => {
-      active = false;
-      queryList.removeListener(updateMatch);
+      queryList.removeEventListener('change', updateMatch);
     };
@@ -83,6 +62,5 @@ }, [query, matchMedia]);
     return [() => mediaQueryList.matches, notify => {
-      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-      mediaQueryList.addListener(notify);
+      mediaQueryList.addEventListener('change', notify);
       return () => {
-        mediaQueryList.removeListener(notify);
+        mediaQueryList.removeEventListener('change', notify);
       };
@@ -89,0 +67,0 @@ }];

useThemeProps/useThemeProps.js

@@ -15,3 +15,3 @@ 'use client';
   }
-  const mergedProps = getThemeProps({
+  return getThemeProps({
     theme,
@@ -21,3 +21,2 @@ name,
   });
-  return mergedProps;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1540213

increased by3.25%

Number of package files

473

increased by6.29%

Lines of code

18065

increased by1.29%

Number of low supply chain risk alerts

138

decreased by-2.13%

Dependency changes

• + Added@mui/private-theming@6.0.0-rc.0(transitive)

• + Added@mui/styled-engine@6.0.0-rc.0(transitive)

• + Added@mui/utils@6.0.0-rc.0(transitive)

• - Removed@mui/private-theming@6.0.2(transitive)

• - Removed@mui/styled-engine@6.0.2(transitive)

• - Removed@mui/utils@6.0.2(transitive)

• Updated@babel/runtime@^7.25.0

• Updated@mui/private-theming@6.0.0-rc.0

• Updated@mui/styled-engine@6.0.0-rc.0

• Updated@mui/types@^7.2.15

• Updated@mui/utils@6.0.0-rc.0

• Updatedclsx@^2.1.1