@mui/material 5.11.10 → 5.11.12

package/node/Stack/Stack.js

@@ -4,134 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.style = exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
+exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
-var _utils = require("@mui/utils");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["component", "direction", "spacing", "divider", "children"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/**
- * Return an array with the separator React element interspersed between
- * each React node of the input children.
- *
- * > joinChildren([1,2,3], 0)
- * [1,0,2,0,3]
- */
-function joinChildren(children, separator) {
-  const childrenArray = React.Children.toArray(children).filter(Boolean);
-  return childrenArray.reduce((output, child, index) => {
-    output.push(child);
-    if (index < childrenArray.length - 1) {
-      output.push( /*#__PURE__*/React.cloneElement(separator, {
-        key: `separator-${index}`
-      }));
-    }
-    return output;
-  }, []);
-}
-const getSideFromDirection = direction => {
-  return {
-    row: 'Left',
-    'row-reverse': 'Right',
-    column: 'Top',
-    'column-reverse': 'Bottom'
-  }[direction];
-};
-const style = ({
-  ownerState,
-  theme
-}) => {
-  let styles = (0, _extends2.default)({
-    display: 'flex',
-    flexDirection: 'column'
-  }, (0, _system.handleBreakpoints)({
-    theme
-  }, (0, _system.unstable_resolveBreakpointValues)({
-    values: ownerState.direction,
-    breakpoints: theme.breakpoints.values
-  }), propValue => ({
-    flexDirection: propValue
-  })));
-  if (ownerState.spacing) {
-    const transformer = (0, _system.createUnarySpacing)(theme);
-    const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-      if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
-        acc[breakpoint] = true;
-      }
-      return acc;
-    }, {});
-    const directionValues = (0, _system.unstable_resolveBreakpointValues)({
-      values: ownerState.direction,
-      base
-    });
-    const spacingValues = (0, _system.unstable_resolveBreakpointValues)({
-      values: ownerState.spacing,
-      base
-    });
-    if (typeof directionValues === 'object') {
-      Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
-        const directionValue = directionValues[breakpoint];
-        if (!directionValue) {
-          const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
-          directionValues[breakpoint] = previousDirectionValue;
-        }
-      });
-    }
-    const styleFromPropValue = (propValue, breakpoint) => {
-      return {
-        '& > :not(style) + :not(style)': {
-          margin: 0,
-          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: (0, _system.getValue)(transformer, propValue)
-        }
-      };
-    };
-    styles = (0, _utils.deepmerge)(styles, (0, _system.handleBreakpoints)({
-      theme
-    }, spacingValues, styleFromPropValue));
-  }
-  styles = (0, _system.mergeBreakpointsInOrder)(theme.breakpoints, styles);
-  return styles;
-};
-exports.style = style;
-const StackRoot = (0, _styled.default)('div', {
-  name: 'MuiStack',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    return [styles.root];
-  }
-})(style);
-const Stack = /*#__PURE__*/React.forwardRef(function Stack(inProps, ref) {
-  const themeProps = (0, _useThemeProps.default)({
+const Stack = (0, _system.createStack)({
+  createStyledComponent: (0, _styled.default)('div', {
+    name: 'MuiStack',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  useThemeProps: inProps => (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiStack'
-  });
-  const props = (0, _system.unstable_extendSxProp)(themeProps);
-  const {
-      component = 'div',
-      direction = 'column',
-      spacing = 0,
-      divider,
-      children
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = {
-    direction,
-    spacing
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, (0, _extends2.default)({
-    as: component,
-    ownerState: ownerState,
-    ref: ref
-  }, other, {
-    children: divider ? joinChildren(children, divider) : children
-  }));
+  })
 });
 process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/node/Stack/index.js

@@ -10,4 +10,11 @@ Object.defineProperty(exports, "default", {
     return _Stack.default;
   }
 });
-var _Stack = _interopRequireDefault(require("./Stack"));
+Object.defineProperty(exports, "stackClasses", {
+  enumerable: true,
+  get: function () {
+    return _stackClasses.default;
+  }
+});
+var _Stack = _interopRequireDefault(require("./Stack"));
+var _stackClasses = _interopRequireDefault(require("./stackClasses"));

package/node/Stack/stackClasses.js

@@ -0,0 +1,16 @@
+"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 _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
+function getStackUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiStack', slot);
+}
+const stackClasses = (0, _utils.unstable_generateUtilityClasses)('MuiStack', ['root']);
+var _default = stackClasses;
+exports.default = _default;

package/node/Unstable_Grid2/Grid2.js

@@ -14,7 +14,6 @@ const Grid2 = (0, _Unstable_Grid.createGrid)({
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps: inProps => (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiGrid2'

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.10
+ * @mui/material v5.11.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/CssVarsProvider.js

@@ -4,19 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useColorScheme = exports.shouldSkipGeneratingVar = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
+exports.useColorScheme = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _system = require("@mui/system");
 var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
-const shouldSkipGeneratingVar = keys => {
-  var _keys$;
-  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
-  // ends with sxConfig
-  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
-};
-exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
 const defaultTheme = (0, _experimental_extendTheme.default)();
 const {
   CssVarsProvider,
@@ -43,7 +36,6 @@ const {
     };
     return newTheme;
   },
-  shouldSkipGeneratingVar,
   excludeVariablesFromRoot: _excludeVariablesFromRoot.default
 });
 exports.getInitColorSchemeScript = getInitColorSchemeScript;

package/node/styles/createTheme.js

@@ -44,6 +44,7 @@ Please use another name.` : (0, _utils.formatMuiErrorMessage)(18));
   muiTheme = (0, _utils.deepmerge)(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);
   if (process.env.NODE_ENV !== 'production') {
+    // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
     const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
     const traverse = (node, component) => {
       let key;

package/node/styles/experimental_extendTheme.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createGetCssVar = void 0;
 exports.default = extendTheme;
+exports.defaultShouldSkipGeneratingVar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _utils = require("@mui/utils");
 var _system = require("@mui/system");
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
-const _excluded = ["colorSchemes", "cssVarPrefix"],
+const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
   _excluded2 = ["palette"];
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
@@ -50,11 +51,19 @@ const silent = fn => {
 };
 const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
 exports.createGetCssVar = createGetCssVar;
+const defaultShouldSkipGeneratingVar = keys => {
+  var _keys$;
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  // ends with sxConfig
+  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+};
+exports.defaultShouldSkipGeneratingVar = defaultShouldSkipGeneratingVar;
 function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
   const {
       colorSchemes: colorSchemesInput = {},
-      cssVarPrefix = 'mui'
+      cssVarPrefix = 'mui',
+      shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar
     } = options,
     input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
   const getCssVar = createGetCssVar(cssVarPrefix);
@@ -100,6 +109,12 @@ function extendTheme(options = {}, ...args) {
   });
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette;
+    const setCssVarColor = cssVar => {
+      const tokens = cssVar.split('-');
+      const color = tokens[1];
+      const colorToken = tokens[2];
+      return getCssVar(cssVar, palette[color][colorToken]);
+    };
 
     // attach black & white channels to common node
     if (key === 'light') {
@@ -117,10 +132,10 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoColor', (0, _system.private_safeDarken)(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', (0, _system.private_safeDarken)(palette.success.light, 0.6));
       setColor(palette.Alert, 'warningColor', (0, _system.private_safeDarken)(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
-      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
-      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
-      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
+      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-main'));
       setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
       setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
       setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
@@ -129,15 +144,15 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoStandardBg', (0, _system.private_safeLighten)(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', (0, _system.private_safeLighten)(palette.success.light, 0.9));
       setColor(palette.Alert, 'warningStandardBg', (0, _system.private_safeLighten)(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
-      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
-      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
-      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
-      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
-      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
-      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
-      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
-      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
+      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
+      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
       setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
@@ -147,7 +162,7 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.LinearProgress, 'infoBg', (0, _system.private_safeLighten)(palette.info.main, 0.62));
       setColor(palette.LinearProgress, 'successBg', (0, _system.private_safeLighten)(palette.success.main, 0.62));
       setColor(palette.LinearProgress, 'warningBg', (0, _system.private_safeLighten)(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
       setColor(palette.Slider, 'primaryTrack', (0, _system.private_safeLighten)(palette.primary.main, 0.62));
       setColor(palette.Slider, 'secondaryTrack', (0, _system.private_safeLighten)(palette.secondary.main, 0.62));
       setColor(palette.Slider, 'errorTrack', (0, _system.private_safeLighten)(palette.error.main, 0.62));
@@ -158,10 +173,10 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
       setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.private_safeEmphasize)(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
-      setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
-      setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
-      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
+      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
+      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-100'));
       setColor(palette.Switch, 'primaryDisabledColor', (0, _system.private_safeLighten)(palette.primary.main, 0.62));
       setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.private_safeLighten)(palette.secondary.main, 0.62));
       setColor(palette.Switch, 'errorDisabledColor', (0, _system.private_safeLighten)(palette.error.main, 0.62));
@@ -175,10 +190,10 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoColor', (0, _system.private_safeLighten)(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', (0, _system.private_safeLighten)(palette.success.light, 0.6));
       setColor(palette.Alert, 'warningColor', (0, _system.private_safeLighten)(palette.warning.light, 0.6));
-      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
-      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
-      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
-      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
+      setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-dark'));
       setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
       setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
       setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
@@ -187,17 +202,17 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoStandardBg', (0, _system.private_safeDarken)(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', (0, _system.private_safeDarken)(palette.success.light, 0.9));
       setColor(palette.Alert, 'warningStandardBg', (0, _system.private_safeDarken)(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
-      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
-      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
-      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
-      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
-      setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
-      setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
-      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
-      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
-      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
-      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
+      setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
+      setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
+      setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
+      setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));
       setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
@@ -207,7 +222,7 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.LinearProgress, 'infoBg', (0, _system.private_safeDarken)(palette.info.main, 0.5));
       setColor(palette.LinearProgress, 'successBg', (0, _system.private_safeDarken)(palette.success.main, 0.5));
       setColor(palette.LinearProgress, 'warningBg', (0, _system.private_safeDarken)(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
       setColor(palette.Slider, 'primaryTrack', (0, _system.private_safeDarken)(palette.primary.main, 0.5));
       setColor(palette.Slider, 'secondaryTrack', (0, _system.private_safeDarken)(palette.secondary.main, 0.5));
       setColor(palette.Slider, 'errorTrack', (0, _system.private_safeDarken)(palette.error.main, 0.5));
@@ -218,10 +233,10 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
       setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.private_safeEmphasize)(palette.background.paper, 0.15));
-      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
-      setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
-      setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
-      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
+      setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
+      setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-600'));
       setColor(palette.Switch, 'primaryDisabledColor', (0, _system.private_safeDarken)(palette.primary.main, 0.55));
       setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.private_safeDarken)(palette.secondary.main, 0.55));
       setColor(palette.Switch, 'errorDisabledColor', (0, _system.private_safeDarken)(palette.error.main, 0.55));
@@ -274,6 +289,17 @@ function extendTheme(options = {}, ...args) {
     });
   });
   theme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), theme);
+  const parserConfig = {
+    prefix: cssVarPrefix,
+    shouldSkipGeneratingVar
+  };
+  const {
+    vars: themeVars,
+    generateCssVars
+  } = (0, _system.unstable_prepareCssVars)(theme, parserConfig);
+  theme.vars = themeVars;
+  theme.generateCssVars = generateCssVars;
+  theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = (0, _extends2.default)({}, _system.unstable_defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {
     return (0, _system.unstable_styleFunctionSx)({

package/node/useAutocomplete/useAutocomplete.js

@@ -7,18 +7,20 @@ var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _AutocompleteUnstyled.useAutocomplete;
+    return _useAutocomplete.default;
   }
 });
-var _AutocompleteUnstyled = require("@mui/base/AutocompleteUnstyled");
-Object.keys(_AutocompleteUnstyled).forEach(function (key) {
+var _useAutocomplete = _interopRequireWildcard(require("@mui/base/useAutocomplete"));
+Object.keys(_useAutocomplete).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _AutocompleteUnstyled[key]) return;
+  if (key in exports && exports[key] === _useAutocomplete[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _AutocompleteUnstyled[key];
+      return _useAutocomplete[key];
     }
   });
-});
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.11.10",
+  "version": "5.11.12",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -45,12 +45,12 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@mui/base": "5.0.0-alpha.118",
-    "@mui/core-downloads-tracker": "^5.11.9",
-    "@mui/system": "^5.11.9",
+    "@babel/runtime": "^7.21.0",
+    "@mui/base": "5.0.0-alpha.119",
+    "@mui/core-downloads-tracker": "^5.11.12",
+    "@mui/system": "^5.11.12",
     "@mui/types": "^7.2.3",
-    "@mui/utils": "^5.11.9",
+    "@mui/utils": "^5.11.12",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
     "csstype": "^3.1.1",

package/styles/CssVarsProvider.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { SupportedColorScheme } from './experimental_extendTheme';
-declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
 declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
     theme?: {
         cssVarPrefix?: string | undefined;
@@ -13,4 +12,4 @@ declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial
     disableNestedContext?: boolean | undefined;
     disableStyleSheetGeneration?: boolean | undefined;
 }>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/CssVarsProvider.js

@@ -3,12 +3,6 @@ import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_style
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
-const shouldSkipGeneratingVar = keys => {
-  var _keys$;
-  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
-  // ends with sxConfig
-  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
-};
 const defaultTheme = experimental_extendTheme();
 const {
   CssVarsProvider,
@@ -35,7 +29,6 @@ const {
     };
     return newTheme;
   },
-  shouldSkipGeneratingVar,
   excludeVariablesFromRoot
 });
-export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider };

package/styles/createTheme.js

@@ -37,6 +37,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
   if (process.env.NODE_ENV !== 'production') {
+    // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
     const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
     const traverse = (node, component) => {
       let key;

package/styles/experimental_extendTheme.d.ts

@@ -281,6 +281,14 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * Color schemes configuration
    */
   colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
+  /**
+   * A function to determine if the key, value should be attached as CSS Variable
+   * `keys` is an array that represents the object path keys.
+   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+   *  then, keys = ['foo', 'bar']
+   *        value = 'var(--test)'
+   */
+  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
 }
 
 // should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
@@ -402,6 +410,14 @@ export interface CssVarsTheme extends ColorSystem {
   shadows: Theme['shadows'];
   mixins: Theme['mixins'];
   zIndex: Theme['zIndex'];
+  /**
+   * A function to determine if the key, value should be attached as CSS Variable
+   * `keys` is an array that represents the object path keys.
+   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+   *  then, keys = ['foo', 'bar']
+   *        value = 'var(--test)'
+   */
+  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
   unstable_sxConfig: SxConfig;
   unstable_sx: (props: SxProps<CssVarsTheme>) => CSSObject;
 }