@mui/system 5.15.9 → 5.15.12

package/legacy/cssVars/prepareCssVars.js

@@ -1,22 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { deepmerge } from '@mui/utils';
+import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './cssVarsParser';
 function prepareCssVars(theme, parserConfig) {
   // @ts-ignore - ignore components do not exist
   var _theme$colorSchemes = theme.colorSchemes,
     colorSchemes = _theme$colorSchemes === void 0 ? {} : _theme$colorSchemes,
     components = theme.components,
-    otherTheme = _objectWithoutProperties(theme, ["colorSchemes", "components"]);
+    _theme$defaultColorSc = theme.defaultColorScheme,
+    defaultColorScheme = _theme$defaultColorSc === void 0 ? 'light' : _theme$defaultColorSc,
+    otherTheme = _objectWithoutProperties(theme, ["colorSchemes", "components", "defaultColorScheme"]);
   var _cssVarsParser = cssVarsParser(otherTheme, parserConfig),
     rootVars = _cssVarsParser.vars,
     rootCss = _cssVarsParser.css,
     rootVarsWithDefaults = _cssVarsParser.varsWithDefaults;
   var themeVars = rootVarsWithDefaults;
   var colorSchemesMap = {};
-  var light = colorSchemes.light,
-    otherColorSchemes = _objectWithoutProperties(colorSchemes, ["light"]);
+  var light = colorSchemes[defaultColorScheme],
+    otherColorSchemes = _objectWithoutProperties(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
   Object.entries(otherColorSchemes || {}).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
@@ -32,27 +35,33 @@ 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
     var _cssVarsParser3 = cssVarsParser(light, parserConfig),
-      css = _cssVarsParser3.css,
+      _css = _cssVarsParser3.css,
       vars = _cssVarsParser3.vars,
       varsWithDefaults = _cssVarsParser3.varsWithDefaults;
     themeVars = deepmerge(themeVars, varsWithDefaults);
-    colorSchemesMap.light = {
-      css: css,
+    colorSchemesMap[defaultColorScheme] = {
+      css: _css,
       vars: vars
     };
   }
   var generateCssVars = function generateCssVars(colorScheme) {
+    var _parserConfig$getSele2;
     if (!colorScheme) {
+      var _parserConfig$getSele;
+      var _css2 = _extends({}, rootCss);
       return {
-        css: _extends({}, rootCss),
-        vars: rootVars
+        css: _css2,
+        vars: rootVars,
+        selector: (parserConfig == null || (_parserConfig$getSele = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele.call(parserConfig, colorScheme, _css2)) || ':root'
       };
     }
+    var css = _extends({}, colorSchemesMap[colorScheme].css);
     return {
-      css: _extends({}, colorSchemesMap[colorScheme].css),
-      vars: colorSchemesMap[colorScheme].vars
+      css: css,
+      vars: colorSchemesMap[colorScheme].vars,
+      selector: (parserConfig == null || (_parserConfig$getSele2 = parserConfig.getSelector) == null ? void 0 : _parserConfig$getSele2.call(parserConfig, colorScheme, css)) || ':root'
     };
   };
   return {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.9
+ * @mui/system v5.15.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -49,6 +49,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/legacy/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/legacy/propsToClassKey.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { unstable_capitalize as capitalize } from '@mui/utils';
+import capitalize from '@mui/utils/capitalize';
 function isEmpty(string) {
   return string.length === 0;
 }

package/legacy/style.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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) {

package/legacy/styleFunctionSx/extendSxProp.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { isPlainObject } from '@mui/utils';
+import { isPlainObject } from '@mui/utils/deepmerge';
 import defaultSxConfig from './defaultSxConfig';
 var splitProps = function splitProps(props) {
   var _props$theme$unstable, _props$theme;

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -1,6 +1,6 @@
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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/legacy/useMediaQuery/index.js

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

package/legacy/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,145 @@
+'use client';
+
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { getThemeProps } from '../useThemeProps';
+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) {
+  var _React$useState = React.useState(function () {
+      if (noSsr && matchMedia) {
+        return matchMedia(query).matches;
+      }
+      if (ssrMatchMedia) {
+        return ssrMatchMedia(query).matches;
+      }
+
+      // Once the component is mounted, we rely on the
+      // event listeners to return the correct matches value.
+      return defaultMatches;
+    }),
+    match = _React$useState[0],
+    setMatch = _React$useState[1];
+  useEnhancedEffect(function () {
+    var active = true;
+    if (!matchMedia) {
+      return undefined;
+    }
+    var queryList = matchMedia(query);
+    var updateMatch = function 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);
+      }
+    };
+    updateMatch();
+    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+    queryList.addListener(updateMatch);
+    return function () {
+      active = false;
+      queryList.removeListener(updateMatch);
+    };
+  }, [query, matchMedia]);
+  return match;
+}
+
+// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
+var maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
+  var getDefaultSnapshot = React.useCallback(function () {
+    return defaultMatches;
+  }, [defaultMatches]);
+  var getServerSnapshot = React.useMemo(function () {
+    if (noSsr && matchMedia) {
+      return function () {
+        return matchMedia(query).matches;
+      };
+    }
+    if (ssrMatchMedia !== null) {
+      var _ssrMatchMedia = ssrMatchMedia(query),
+        matches = _ssrMatchMedia.matches;
+      return function () {
+        return matches;
+      };
+    }
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
+  var _React$useMemo = React.useMemo(function () {
+      if (matchMedia === null) {
+        return [getDefaultSnapshot, function () {
+          return function () {};
+        }];
+      }
+      var mediaQueryList = matchMedia(query);
+      return [function () {
+        return mediaQueryList.matches;
+      }, function (notify) {
+        // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+        mediaQueryList.addListener(notify);
+        return function () {
+          mediaQueryList.removeListener(notify);
+        };
+      }];
+    }, [getDefaultSnapshot, matchMedia, query]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+    getSnapshot = _React$useMemo2[0],
+    subscribe = _React$useMemo2[1];
+  var match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return match;
+}
+export default function useMediaQuery(queryInput) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var theme = useTheme();
+  // Wait for jsdom to support the match media feature.
+  // All the browsers MUI support have this built-in.
+  // This defensive check is here for simplicity.
+  // Most of the time, the match media logic isn't central to people tests.
+  var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+  var _getThemeProps = getThemeProps({
+      name: 'MuiUseMediaQuery',
+      props: options,
+      theme: theme
+    }),
+    _getThemeProps$defaul = _getThemeProps.defaultMatches,
+    defaultMatches = _getThemeProps$defaul === void 0 ? false : _getThemeProps$defaul,
+    _getThemeProps$matchM = _getThemeProps.matchMedia,
+    matchMedia = _getThemeProps$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _getThemeProps$matchM,
+    _getThemeProps$ssrMat = _getThemeProps.ssrMatchMedia,
+    ssrMatchMedia = _getThemeProps$ssrMat === void 0 ? null : _getThemeProps$ssrMat,
+    _getThemeProps$noSsr = _getThemeProps.noSsr,
+    noSsr = _getThemeProps$noSsr === void 0 ? false : _getThemeProps$noSsr;
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof queryInput === 'function' && theme === null) {
+      console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
+    }
+  }
+  var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+  query = query.replace(/^@media( ?)/m, '');
+
+  // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
+  var useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+  var match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue({
+      query: query,
+      match: match
+    });
+  }
+  return match;
+}

package/legacy/useThemeProps/getThemeProps.js

@@ -1,4 +1,4 @@
-import { internal_resolveProps as resolveProps } from '@mui/utils';
+import resolveProps from '@mui/utils/resolveProps';
 export default function getThemeProps(params) {
   var theme = params.theme,
     name = params.name,

package/merge.js

@@ -1,15 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _utils = require("@mui/utils");
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 function merge(acc, item) {
   if (!item) {
     return acc;
   }
-  return (0, _utils.deepmerge)(acc, item, {
+  return (0, _deepmerge.default)(acc, item, {
     clone: false // No need to clone deep, it's way faster.
   });
 }

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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,
@@ -53,7 +58,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,
@@ -123,10 +128,10 @@ export default function createGrid(options = {}) {
       })
     }));
     if (disableEqualOverflow !== undefined && disableEqualOverflow !== (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/modern/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/modern/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/modern/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/modern/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?.[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/modern/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/modern/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/modern/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,32 @@ 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 => {
     if (!colorScheme) {
+      const css = _extends({}, rootCss);
       return {
-        css: _extends({}, rootCss),
-        vars: rootVars
+        css,
+        vars: rootVars,
+        selector: parserConfig?.getSelector?.(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?.getSelector?.(colorScheme, css) || ':root'
     };
   };
   return {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.9
+ * @mui/system v5.15.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -49,6 +49,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/modern/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/modern/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/modern/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/modern/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 => {
   const result = {

package/modern/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/modern/useMediaQuery/index.js

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