@mui/system 5.15.9 → 5.15.12

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';

package/esm/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,126 @@
+'use client';
+
+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) {
+  const [match, setMatch] = React.useState(() => {
+    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;
+  });
+  useEnhancedEffect(() => {
+    let active = true;
+    if (!matchMedia) {
+      return undefined;
+    }
+    const queryList = matchMedia(query);
+    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);
+      }
+    };
+    updateMatch();
+    // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+    queryList.addListener(updateMatch);
+    return () => {
+      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
+const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
+  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
+  const getServerSnapshot = React.useMemo(() => {
+    if (noSsr && matchMedia) {
+      return () => matchMedia(query).matches;
+    }
+    if (ssrMatchMedia !== null) {
+      const {
+        matches
+      } = ssrMatchMedia(query);
+      return () => matches;
+    }
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (matchMedia === null) {
+      return [getDefaultSnapshot, () => () => {}];
+    }
+    const mediaQueryList = matchMedia(query);
+    return [() => mediaQueryList.matches, notify => {
+      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+      mediaQueryList.addListener(notify);
+      return () => {
+        mediaQueryList.removeListener(notify);
+      };
+    }];
+  }, [getDefaultSnapshot, matchMedia, query]);
+  const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return match;
+}
+export default function useMediaQuery(queryInput, options = {}) {
+  const 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.
+  const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+  const {
+    defaultMatches = false,
+    matchMedia = supportMatchMedia ? window.matchMedia : null,
+    ssrMatchMedia = null,
+    noSsr = false
+  } = getThemeProps({
+    name: 'MuiUseMediaQuery',
+    props: options,
+    theme
+  });
+  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'));
+    }
+  }
+  let 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
+  const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+  const 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,
+      match
+    });
+  }
+  return match;
+}

package/esm/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) {
   const {
     theme,

package/index.d.ts

@@ -153,6 +153,9 @@ export * from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './useThemeWithoutDefault';
 
+export { default as useMediaQuery } from './useMediaQuery';
+export * from './useMediaQuery';
+
 export * from './colorManipulator';
 
 export { default as ThemeProvider } from './ThemeProvider';

package/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
@@ -52,6 +52,7 @@ var _exportNames = {
   getThemeProps: true,
   useTheme: true,
   useThemeWithoutDefault: true,
+  useMediaQuery: true,
   ThemeProvider: true,
   unstable_createCssVarsProvider: true,
   unstable_createGetCssVar: true,
@@ -347,6 +348,12 @@ Object.defineProperty(exports, "unstable_styleFunctionSx", {
     return _styleFunctionSx.default;
   }
 });
+Object.defineProperty(exports, "useMediaQuery", {
+  enumerable: true,
+  get: function () {
+    return _useMediaQuery.default;
+  }
+});
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
@@ -493,6 +500,7 @@ var _shape = _interopRequireDefault(require("./createTheme/shape"));
 var _useThemeProps = _interopRequireWildcard(require("./useThemeProps"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _useThemeWithoutDefault = _interopRequireDefault(require("./useThemeWithoutDefault"));
+var _useMediaQuery = _interopRequireDefault(require("./useMediaQuery"));
 var _colorManipulator = require("./colorManipulator");
 Object.keys(_colorManipulator).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/legacy/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';
 var Box = createBox({

package/legacy/Box/boxClasses.js

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

package/legacy/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/legacy/Container/createContainer.js

@@ -4,7 +4,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 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/legacy/Stack/createStack.js

@@ -5,7 +5,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 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/legacy/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/legacy/ThemeProvider/ThemeProvider.js

@@ -5,7 +5,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/legacy/Unstable_Grid/createGrid.js

@@ -5,7 +5,9 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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';
@@ -38,7 +40,10 @@ export default function createGrid() {
     useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
     _options$componentNam = options.componentName,
     componentName = _options$componentNam === void 0 ? 'MuiGrid' : _options$componentNam;
-  var OverflowContext = /*#__PURE__*/React.createContext(undefined);
+  var GridOverflowContext = /*#__PURE__*/React.createContext(undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    GridOverflowContext.displayName = 'GridOverflowContext';
+  }
   var useUtilityClasses = function useUtilityClasses(ownerState, theme) {
     var container = ownerState.container,
       direction = ownerState.direction,
@@ -58,7 +63,7 @@ export default function createGrid() {
     var theme = useTheme();
     var themeProps = useThemeProps(inProps);
     var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-    var overflow = React.useContext(OverflowContext);
+    var overflow = React.useContext(GridOverflowContext);
     var className = props.className,
       children = props.children,
       _props$columns = props.columns,
@@ -138,10 +143,10 @@ export default function createGrid() {
       })
     }));
     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/legacy/Unstable_Grid/gridClasses.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-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/legacy/breakpoints.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 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/legacy/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/legacy/createStyled.js

@@ -5,7 +5,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 /* 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, _ref2) {
       if (typeof variant.props === 'function') {
         isMatch = variant.props(_extends({
           ownerState: ownerState
-        }, props));
+        }, props, ownerState));
       } else {
         Object.keys(variant.props).forEach(function (key) {
           if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -83,7 +85,7 @@ function processStyleArg(callableStyle, _ref2) {
         }
         result.push(typeof variant.style === 'function' ? variant.style(_extends({
           ownerState: ownerState
-        }, props)) : variant.style);
+        }, props, ownerState)) : variant.style);
       }
     });
     return result;

package/legacy/createTheme/createTheme.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { deepmerge } from '@mui/utils';
+import deepmerge from '@mui/utils/deepmerge';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
 import createSpacing from './createSpacing';

package/legacy/cssVars/createCssVarsProvider.js

@@ -6,7 +6,7 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 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: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
   }
   var ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    ColorSchemeContext.displayName = 'ColorSchemeContext';
+  }
   var useColorScheme = function useColorScheme() {
     var value = React.useContext(ColorSchemeContext);
     if (!value) {