@mui/system 5.15.9 → 5.15.11

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/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.

package/esm/colorManipulator.js

@@ -1,6 +1,6 @@
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 /* eslint-disable @typescript-eslint/naming-convention */
-import { clamp } from '@mui/utils';
+import clamp from '@mui/utils/clamp';
 /**
  * Returns a number whose value is limited to the given range.
  * @param {number} value The value to be clamped

package/esm/createStyled.js

@@ -5,7 +5,9 @@ const _excluded = ["ownerState"],
   _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { getDisplayName, unstable_capitalize as capitalize, isPlainObject } from '@mui/utils';
+import { isPlainObject } from '@mui/utils/deepmerge';
+import capitalize from '@mui/utils/capitalize';
+import getDisplayName from '@mui/utils/getDisplayName';
 import createTheme from './createTheme';
 import styleFunctionSx from './styleFunctionSx';
 function isEmpty(obj) {
@@ -69,7 +71,7 @@ function processStyleArg(callableStyle, _ref) {
       if (typeof variant.props === 'function') {
         isMatch = variant.props(_extends({
           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]) {
@@ -83,7 +85,7 @@ function processStyleArg(callableStyle, _ref) {
         }
         result.push(typeof variant.style === 'function' ? variant.style(_extends({
           ownerState
-        }, props)) : variant.style);
+        }, props, ownerState)) : variant.style);
       }
     });
     return result;

package/esm/createTheme/createTheme.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["breakpoints", "palette", "spacing", "shape"];
-import { deepmerge } from '@mui/utils';
+import deepmerge from '@mui/utils/deepmerge';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
 import createSpacing from './createSpacing';

package/esm/cssVars/createCssVarsProvider.js

@@ -4,7 +4,7 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { deepmerge } from '@mui/utils';
+import deepmerge from '@mui/utils/deepmerge';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import ThemeProvider from '../ThemeProvider';
@@ -36,6 +36,9 @@ export default 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) {

package/esm/cssVars/prepareCssVars.js

@@ -1,13 +1,14 @@
 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 = ["colorSchemes", "components"],
-  _excluded2 = ["light"];
-import { deepmerge } from '@mui/utils';
+const _excluded = ["colorSchemes", "components", "defaultColorScheme"];
+import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './cssVarsParser';
 function prepareCssVars(theme, parserConfig) {
   // @ts-ignore - ignore components do not exist
   const {
-      colorSchemes = {}
+      colorSchemes = {},
+      defaultColorScheme = 'light'
     } = theme,
     otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
   const {
@@ -18,9 +19,9 @@ function prepareCssVars(theme, parserConfig) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      light
+      [defaultColorScheme]: light
     } = colorSchemes,
-    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2);
+    otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
     const {
       vars,
@@ -34,28 +35,34 @@ function prepareCssVars(theme, parserConfig) {
     };
   });
   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
     } = cssVarsParser(light, parserConfig);
     themeVars = deepmerge(themeVars, varsWithDefaults);
-    colorSchemesMap.light = {
+    colorSchemesMap[defaultColorScheme] = {
       css,
       vars
     };
   }
   const generateCssVars = colorScheme => {
+    var _parserConfig$getSele2;
     if (!colorScheme) {
+      var _parserConfig$getSele;
+      const css = _extends({}, rootCss);
       return {
-        css: _extends({}, 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 = _extends({}, colorSchemesMap[colorScheme].css);
     return {
-      css: _extends({}, 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/index.js

@@ -42,6 +42,7 @@ export { default as shape } from './createTheme/shape';
 export { default as useThemeProps, getThemeProps } from './useThemeProps';
 export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
+export { default as useMediaQuery } from './useMediaQuery';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';

package/esm/merge.js

@@ -1,4 +1,4 @@
-import { deepmerge } from '@mui/utils';
+import deepmerge from '@mui/utils/deepmerge';
 function merge(acc, item) {
   if (!item) {
     return acc;

package/esm/propsToClassKey.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["variant"];
-import { unstable_capitalize as capitalize } from '@mui/utils';
+import capitalize from '@mui/utils/capitalize';
 function isEmpty(string) {
   return string.length === 0;
 }

package/esm/style.js

@@ -1,4 +1,4 @@
-import { unstable_capitalize as capitalize } from '@mui/utils';
+import capitalize from '@mui/utils/capitalize';
 import responsivePropType from './responsivePropType';
 import { handleBreakpoints } from './breakpoints';
 export function getPath(obj, path, checkVars = true) {

package/esm/styleFunctionSx/extendSxProp.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["sx"];
-import { isPlainObject } from '@mui/utils';
+import { isPlainObject } from '@mui/utils/deepmerge';
 import defaultSxConfig from './defaultSxConfig';
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;

package/esm/styleFunctionSx/styleFunctionSx.js

@@ -1,4 +1,4 @@
-import { unstable_capitalize as capitalize } from '@mui/utils';
+import capitalize from '@mui/utils/capitalize';
 import merge from '../merge';
 import { getPath, getStyleValue as getValue } from '../style';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';

package/esm/useMediaQuery/index.js

@@ -0,0 +1,2 @@
+export { default } from './useMediaQuery';
+export * from './useMediaQuery';