@mui/system 5.15.9 → 5.15.12

package/Container/containerClasses.js

@@ -1,13 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getContainerUtilityClass = getContainerUtilityClass;
-var _utils = require("@mui/utils");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getContainerUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiContainer', slot);
+  return (0, _generateUtilityClass.default)('MuiContainer', slot);
 }
-const containerClasses = (0, _utils.unstable_generateUtilityClasses)('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
+const containerClasses = (0, _generateUtilityClasses.default)('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
 var _default = exports.default = containerClasses;

package/Container/createContainer.js

@@ -10,7 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
 var _styled = _interopRequireDefault(require("../styled"));
 var _createTheme = _interopRequireDefault(require("../createTheme"));
@@ -26,7 +28,7 @@ const defaultCreateStyledComponent = (0, _styled.default)('div', {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[`maxWidth${(0, _utils.unstable_capitalize)(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
+    return [styles.root, styles[`maxWidth${(0, _capitalize.default)(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
   }
 });
 const useThemePropsDefault = inProps => (0, _useThemeProps.default)({
@@ -36,7 +38,7 @@ const useThemePropsDefault = inProps => (0, _useThemeProps.default)({
 });
 const useUtilityClasses = (ownerState, componentName) => {
   const getContainerUtilityClass = slot => {
-    return (0, _utils.unstable_generateUtilityClass)(componentName, slot);
+    return (0, _generateUtilityClass.default)(componentName, slot);
   };
   const {
     classes,
@@ -45,9 +47,9 @@ const useUtilityClasses = (ownerState, componentName) => {
     maxWidth
   } = ownerState;
   const slots = {
-    root: ['root', maxWidth && `maxWidth${(0, _utils.unstable_capitalize)(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+    root: ['root', maxWidth && `maxWidth${(0, _capitalize.default)(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
   };
-  return (0, _utils.unstable_composeClasses)(slots, getContainerUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, getContainerUtilityClass, classes);
 };
 function createContainer(options = {}) {
   const {

package/Stack/createStack.js

@@ -11,7 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styled = _interopRequireDefault(require("../styled"));
 var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
 var _styleFunctionSx = require("../styleFunctionSx");
@@ -121,7 +123,7 @@ const style = ({
         }
       };
     };
-    styles = (0, _utils.deepmerge)(styles, (0, _breakpoints.handleBreakpoints)({
+    styles = (0, _deepmerge.default)(styles, (0, _breakpoints.handleBreakpoints)({
       theme
     }, spacingValues, styleFromPropValue));
   }
@@ -140,7 +142,7 @@ function createStack(options = {}) {
     const slots = {
       root: ['root']
     };
-    return (0, _utils.unstable_composeClasses)(slots, slot => (0, _utils.unstable_generateUtilityClass)(componentName, slot), {});
+    return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)(componentName, slot), {});
   };
   const StackRoot = createStyledComponent(style);
   const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {

package/Stack/stackClasses.js

@@ -1,13 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getStackUtilityClass = getStackUtilityClass;
-var _utils = require("@mui/utils");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getStackUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiStack', slot);
+  return (0, _generateUtilityClass.default)('MuiStack', slot);
 }
-const stackClasses = (0, _utils.unstable_generateUtilityClasses)('MuiStack', ['root']);
+const stackClasses = (0, _generateUtilityClasses.default)('MuiStack', ['root']);
 var _default = exports.default = stackClasses;

package/ThemeProvider/ThemeProvider.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _privateTheming = require("@mui/private-theming");
-var _utils = require("@mui/utils");
+var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
 var _styledEngine = require("@mui/styled-engine");
 var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -87,6 +87,6 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes /* remove-propty
   themeId: _propTypes.default.string
 } : void 0;
 if (process.env.NODE_ENV !== 'production') {
-  process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = (0, _utils.exactProp)(ThemeProvider.propTypes) : void 0;
+  process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = (0, _exactProp.default)(ThemeProvider.propTypes) : void 0;
 }
 var _default = exports.default = ThemeProvider;

package/Unstable_Grid/createGrid.js

@@ -10,7 +10,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _isMuiElement = _interopRequireDefault(require("@mui/utils/isMuiElement"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styled = _interopRequireDefault(require("../styled"));
 var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
@@ -43,7 +45,10 @@ function createGrid(options = {}) {
     useThemeProps = useThemePropsDefault,
     componentName = 'MuiGrid'
   } = options;
-  const OverflowContext = /*#__PURE__*/React.createContext(undefined);
+  const GridOverflowContext = /*#__PURE__*/React.createContext(undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    GridOverflowContext.displayName = 'GridOverflowContext';
+  }
   const useUtilityClasses = (ownerState, theme) => {
     const {
       container,
@@ -55,7 +60,7 @@ function createGrid(options = {}) {
     const slots = {
       root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...(0, _gridGenerator.generateDirectionClasses)(direction), ...(0, _gridGenerator.generateSizeClassNames)(gridSize), ...(container ? (0, _gridGenerator.generateSpacingClassNames)(spacing, theme.breakpoints.keys[0]) : [])]
     };
-    return (0, _utils.unstable_composeClasses)(slots, slot => (0, _utils.unstable_generateUtilityClass)(componentName, slot), {});
+    return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)(componentName, slot), {});
   };
   const GridRoot = createStyledComponent(_gridGenerator.generateGridColumnsStyles, _gridGenerator.generateGridColumnSpacingStyles, _gridGenerator.generateGridRowSpacingStyles, _gridGenerator.generateGridSizeStyles, _gridGenerator.generateGridDirectionStyles, _gridGenerator.generateGridStyles, _gridGenerator.generateGridOffsetStyles);
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
@@ -63,7 +68,7 @@ function createGrid(options = {}) {
     const theme = (0, _useTheme.default)();
     const themeProps = useThemeProps(inProps);
     const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
-    const overflow = React.useContext(OverflowContext);
+    const overflow = React.useContext(GridOverflowContext);
     const {
         className,
         children,
@@ -124,7 +129,7 @@ function createGrid(options = {}) {
       className: (0, _clsx.default)(classes.root, className)
     }, other, {
       children: React.Children.map(children, child => {
-        if ( /*#__PURE__*/React.isValidElement(child) && (0, _utils.unstable_isMuiElement)(child, ['Grid'])) {
+        if ( /*#__PURE__*/React.isValidElement(child) && (0, _isMuiElement.default)(child, ['Grid'])) {
           var _child$props$unstable;
           return /*#__PURE__*/React.cloneElement(child, {
             unstable_level: (_child$props$unstable = child.props.unstable_level) != null ? _child$props$unstable : level + 1
@@ -134,10 +139,10 @@ function createGrid(options = {}) {
       })
     }));
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
-      // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+      // There are 2 possibilities that should wrap with the GridOverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.
       // 2. It is a nested grid with different `disableEqualOverflow` from the context.
-      result = /*#__PURE__*/(0, _jsxRuntime.jsx)(OverflowContext.Provider, {
+      result = /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverflowContext.Provider, {
         value: disableEqualOverflow,
         children: result
       });

package/Unstable_Grid/gridClasses.js

@@ -1,19 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getGridUtilityClass = getGridUtilityClass;
-var _utils = require("@mui/utils");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getGridUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiGrid', slot);
+  return (0, _generateUtilityClass.default)('MuiGrid', slot);
 }
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-const gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiGrid', ['root', 'container', 'item',
+const gridClasses = (0, _generateUtilityClasses.default)('MuiGrid', ['root', 'container', 'item',
 // spacings
 ...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
 // direction values

package/breakpoints.js

@@ -14,7 +14,7 @@ exports.resolveBreakpointValues = resolveBreakpointValues;
 exports.values = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _merge = _interopRequireDefault(require("./merge"));
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
@@ -110,7 +110,7 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
 }
 function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
   const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
-  const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => (0, _utils.deepmerge)(prev, next), {});
+  const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => (0, _deepmerge.default)(prev, next), {});
   return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
 }
 

package/colorManipulator.js

@@ -23,7 +23,7 @@ exports.private_safeLighten = private_safeLighten;
 exports.recomposeColor = recomposeColor;
 exports.rgbToHex = rgbToHex;
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
-var _utils = require("@mui/utils");
+var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
 /* eslint-disable @typescript-eslint/naming-convention */
 
 /**
@@ -39,7 +39,7 @@ function clampWrapper(value, min = 0, max = 1) {
       console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
     }
   }
-  return (0, _utils.clamp)(value, min, max);
+  return (0, _clamp.default)(value, min, max);
 }
 
 /**

package/createStyled.js

@@ -10,7 +10,9 @@ 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"));
-var _utils = require("@mui/utils");
+var _deepmerge = require("@mui/utils/deepmerge");
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _getDisplayName = _interopRequireDefault(require("@mui/utils/getDisplayName"));
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 var _styleFunctionSx = _interopRequireDefault(require("./styleFunctionSx"));
 const _excluded = ["ownerState"],
@@ -80,7 +82,7 @@ function processStyleArg(callableStyle, _ref) {
       if (typeof variant.props === 'function') {
         isMatch = variant.props((0, _extends2.default)({
           ownerState
-        }, props));
+        }, props, ownerState));
       } else {
         Object.keys(variant.props).forEach(key => {
           if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -94,7 +96,7 @@ function processStyleArg(callableStyle, _ref) {
         }
         result.push(typeof variant.style === 'function' ? variant.style((0, _extends2.default)({
           ownerState
-        }, props)) : variant.style);
+        }, props, ownerState)) : variant.style);
       }
     });
     return result;
@@ -166,7 +168,7 @@ function createStyled(input = {}) {
       // 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, _utils.isPlainObject)(stylesArg)) {
+      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,
@@ -229,10 +231,10 @@ function createStyled(input = {}) {
       if (process.env.NODE_ENV !== 'production') {
         let displayName;
         if (componentName) {
-          displayName = `${componentName}${(0, _utils.unstable_capitalize)(componentSlot || '')}`;
+          displayName = `${componentName}${(0, _capitalize.default)(componentSlot || '')}`;
         }
         if (displayName === undefined) {
-          displayName = `Styled(${(0, _utils.getDisplayName)(tag)})`;
+          displayName = `Styled(${(0, _getDisplayName.default)(tag)})`;
         }
         Component.displayName = displayName;
       }

package/createTheme/createSpacing.d.ts

@@ -2,7 +2,7 @@ export type SpacingOptions = number | Spacing | ((abs: number) => number | strin
 export type SpacingArgument = number | string;
 export interface Spacing {
     (): string;
-    (value: number): string;
+    (value: SpacingArgument): string;
     (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
     (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
     (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;

package/createTheme/createTheme.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _utils = require("@mui/utils");
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
 var _shape = _interopRequireDefault(require("./shape"));
 var _createSpacing = _interopRequireDefault(require("./createSpacing"));
@@ -25,7 +25,7 @@ function createTheme(options = {}, ...args) {
     other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
   const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
   const spacing = (0, _createSpacing.default)(spacingInput);
-  let muiTheme = (0, _utils.deepmerge)({
+  let muiTheme = (0, _deepmerge.default)({
     breakpoints,
     direction: 'ltr',
     components: {},
@@ -37,7 +37,7 @@ function createTheme(options = {}, ...args) {
     shape: (0, _extends2.default)({}, _shape.default, shapeInput)
   }, other);
   muiTheme.applyStyles = _applyStyles.default;
-  muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), 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_sx = function sx(props) {
     return (0, _styleFunctionSx.default)({

package/cssVars/createCssVarsProvider.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _styledEngine = require("@mui/styled-engine");
 var _privateTheming = require("@mui/private-theming");
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
@@ -45,6 +45,9 @@ function createCssVarsProvider(options) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
   }
   const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    ColorSchemeContext.displayName = 'ColorSchemeContext';
+  }
   const useColorScheme = () => {
     const value = React.useContext(ColorSchemeContext);
     if (!value) {
@@ -159,7 +162,7 @@ function createCssVarsProvider(options) {
         css,
         vars
       } = generateCssVars(key);
-      theme.vars = (0, _utils.deepmerge)(theme.vars, vars);
+      theme.vars = (0, _deepmerge.default)(theme.vars, vars);
       if (key === calculatedColorScheme) {
         // 4.1 Merge the selected color scheme to the theme
         Object.keys(scheme).forEach(schemeKey => {
@@ -197,7 +200,7 @@ function createCssVarsProvider(options) {
         otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
       }
     });
-    theme.vars = (0, _utils.deepmerge)(theme.vars, rootVars);
+    theme.vars = (0, _deepmerge.default)(theme.vars, rootVars);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.

package/cssVars/createCssVarsTheme.d.ts

@@ -10,6 +10,7 @@ declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<st
             [x: string]: string | number;
         };
         vars: ThemeVars;
+        selector: any;
     };
 };
 export default createCssVarsTheme;

package/cssVars/prepareCssVars.d.ts

@@ -1,9 +1,11 @@
 export interface DefaultCssVarsTheme {
-    colorSchemes: Record<string, any>;
+    colorSchemes?: Record<string, any>;
+    defaultColorScheme?: string;
 }
-declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
+declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>, Selector = any>(theme: T, parserConfig?: {
     prefix?: string;
     shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+    getSelector?: (colorScheme: string | undefined, css: Record<string, any>) => Selector;
 }): {
     vars: ThemeVars;
     generateCssVars: (colorScheme?: string) => {
@@ -11,6 +13,7 @@ declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends
             [x: string]: string | number;
         };
         vars: ThemeVars;
+        selector: string | NonNullable<Selector>;
     };
 };
 export default prepareCssVars;

package/cssVars/prepareCssVars.js

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 _utils = require("@mui/utils");
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
-const _excluded = ["colorSchemes", "components"],
-  _excluded2 = ["light"];
+const _excluded = ["colorSchemes", "components", "defaultColorScheme"];
 function prepareCssVars(theme, parserConfig) {
   // @ts-ignore - ignore components do not exist
   const {
-      colorSchemes = {}
+      colorSchemes = {},
+      defaultColorScheme = 'light'
     } = theme,
     otherTheme = (0, _objectWithoutPropertiesLoose2.default)(theme, _excluded);
   const {
@@ -25,44 +26,50 @@ function prepareCssVars(theme, parserConfig) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      light
+      [defaultColorScheme]: light
     } = colorSchemes,
-    otherColorSchemes = (0, _objectWithoutPropertiesLoose2.default)(colorSchemes, _excluded2);
+    otherColorSchemes = (0, _objectWithoutPropertiesLoose2.default)(colorSchemes, [defaultColorScheme].map(_toPropertyKey2.default));
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
     const {
       vars,
       css,
       varsWithDefaults
     } = (0, _cssVarsParser.default)(scheme, parserConfig);
-    themeVars = (0, _utils.deepmerge)(themeVars, varsWithDefaults);
+    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
     colorSchemesMap[key] = {
       css,
       vars
     };
   });
   if (light) {
-    // light color scheme vars should be merged last to set as default
+    // default color scheme vars should be merged last to set as default
     const {
       css,
       vars,
       varsWithDefaults
     } = (0, _cssVarsParser.default)(light, parserConfig);
-    themeVars = (0, _utils.deepmerge)(themeVars, varsWithDefaults);
-    colorSchemesMap.light = {
+    themeVars = (0, _deepmerge.default)(themeVars, varsWithDefaults);
+    colorSchemesMap[defaultColorScheme] = {
       css,
       vars
     };
   }
   const generateCssVars = colorScheme => {
+    var _parserConfig$getSele2;
     if (!colorScheme) {
+      var _parserConfig$getSele;
+      const css = (0, _extends2.default)({}, rootCss);
       return {
-        css: (0, _extends2.default)({}, rootCss),
-        vars: rootVars
+        css,
+        vars: rootVars,
+        selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, css)) || ':root'
       };
     }
+    const css = (0, _extends2.default)({}, colorSchemesMap[colorScheme].css);
     return {
-      css: (0, _extends2.default)({}, colorSchemesMap[colorScheme].css),
-      vars: colorSchemesMap[colorScheme].vars
+      css,
+      vars: colorSchemesMap[colorScheme].vars,
+      selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
     };
   };
   return {

package/esm/Box/Box.js

@@ -1,7 +1,7 @@
 'use client';
 
 import PropTypes from 'prop-types';
-import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/utils';
+import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
 import createBox from '../createBox';
 import boxClasses from './boxClasses';
 const Box = createBox({

package/esm/Box/boxClasses.js

@@ -1,3 +1,3 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 const boxClasses = generateUtilityClasses('MuiBox', ['root']);
 export default boxClasses;

package/esm/Container/containerClasses.js

@@ -1,4 +1,5 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getContainerUtilityClass(slot) {
   return generateUtilityClass('MuiContainer', slot);
 }

package/esm/Container/createContainer.js

@@ -4,7 +4,9 @@ const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidt
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_capitalize as capitalize, unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import capitalize from '@mui/utils/capitalize';
 import useThemePropsSystem from '../useThemeProps';
 import systemStyled from '../styled';
 import createTheme from '../createTheme';

package/esm/Stack/createStack.js

@@ -4,7 +4,9 @@ const _excluded = ["component", "direction", "spacing", "divider", "children", "
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { deepmerge, unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
+import deepmerge from '@mui/utils/deepmerge';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
 import systemStyled from '../styled';
 import useThemePropsSystem from '../useThemeProps';
 import { extendSxProp } from '../styleFunctionSx';

package/esm/Stack/stackClasses.js

@@ -1,4 +1,5 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getStackUtilityClass(slot) {
   return generateUtilityClass('MuiStack', slot);
 }

package/esm/ThemeProvider/ThemeProvider.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
-import { exactProp } from '@mui/utils';
+import exactProp from '@mui/utils/exactProp';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Unstable_Grid/createGrid.js

@@ -4,7 +4,9 @@ const _excluded = ["className", "children", "columns", "container", "component",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_isMuiElement as isMuiElement } from '@mui/utils';
+import isMuiElement from '@mui/utils/isMuiElement';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
 import systemStyled from '../styled';
 import useThemePropsSystem from '../useThemeProps';
 import useTheme from '../useTheme';
@@ -34,7 +36,10 @@ export default function createGrid(options = {}) {
     useThemeProps = useThemePropsDefault,
     componentName = 'MuiGrid'
   } = options;
-  const OverflowContext = /*#__PURE__*/React.createContext(undefined);
+  const GridOverflowContext = /*#__PURE__*/React.createContext(undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    GridOverflowContext.displayName = 'GridOverflowContext';
+  }
   const useUtilityClasses = (ownerState, theme) => {
     const {
       container,
@@ -54,7 +59,7 @@ export default function createGrid(options = {}) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-    const overflow = React.useContext(OverflowContext);
+    const overflow = React.useContext(GridOverflowContext);
     const {
         className,
         children,
@@ -125,10 +130,10 @@ export default function createGrid(options = {}) {
       })
     }));
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
-      // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+      // There are 2 possibilities that should wrap with the GridOverflowContext to communicate with the nested grids:
       // 1. It is the root grid with `disableEqualOverflow`.
       // 2. It is a nested grid with different `disableEqualOverflow` from the context.
-      result = /*#__PURE__*/_jsx(OverflowContext.Provider, {
+      result = /*#__PURE__*/_jsx(GridOverflowContext.Provider, {
         value: disableEqualOverflow,
         children: result
       });

package/esm/Unstable_Grid/gridClasses.js

@@ -1,4 +1,5 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getGridUtilityClass(slot) {
   return generateUtilityClass('MuiGrid', slot);
 }

package/esm/breakpoints.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
-import { deepmerge } from '@mui/utils';
+import deepmerge from '@mui/utils/deepmerge';
 import merge from './merge';
 
 // The breakpoint **start** at this value.