@mui/material 5.11.11 → 5.11.12

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.11
+ * @mui/material v5.11.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -6844,7 +6844,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var styleFunctionSx$1 = styleFunctionSx;
 
-  const _excluded$2m = ["sx"];
+  const _excluded$2n = ["sx"];
   const splitProps = props => {
     var _props$theme$unstable, _props$theme;
     const result = {
@@ -6865,7 +6865,7 @@
     const {
         sx: inSx
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2m);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2n);
     const {
       systemProps,
       otherProps
@@ -6891,7 +6891,7 @@
 
   function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-  const _excluded$2l = ["values", "unit", "step"];
+  const _excluded$2m = ["values", "unit", "step"];
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
       key,
@@ -6926,7 +6926,7 @@
         unit = 'px',
         step = 5
       } = breakpoints,
-      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2l);
+      other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2m);
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
     function up(key) {
@@ -7005,7 +7005,7 @@
     return spacing;
   }
 
-  const _excluded$2k = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2l = ["breakpoints", "palette", "spacing", "shape"];
   function createTheme$1(options = {}, ...args) {
     const {
         breakpoints: breakpointsInput = {},
@@ -7013,7 +7013,7 @@
         spacing: spacingInput,
         shape: shapeInput = {}
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$2k);
+      other = _objectWithoutPropertiesLoose(options, _excluded$2l);
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
     let muiTheme = deepmerge({
@@ -7124,7 +7124,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2j = ["className", "component"];
+  const _excluded$2k = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -7141,7 +7141,7 @@
           className,
           component = 'div'
         } = _extendSxProp,
-        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2j);
+        other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2k);
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
         ref: ref,
@@ -7152,7 +7152,7 @@
     return Box;
   }
 
-  const _excluded$2i = ["variant"];
+  const _excluded$2j = ["variant"];
   function isEmpty$3(string) {
     return string.length === 0;
   }
@@ -7166,7 +7166,7 @@
     const {
         variant
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$2i);
+      other = _objectWithoutPropertiesLoose(props, _excluded$2j);
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
       if (key === 'color') {
@@ -7178,8 +7178,8 @@
     return classKey;
   }
 
-  const _excluded$2h = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-    _excluded2$c = ["theme"],
+  const _excluded$2i = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+    _excluded2$d = ["theme"],
     _excluded3$1 = ["theme"];
   function isEmpty$2(obj) {
     return Object.keys(obj).length === 0;
@@ -7265,7 +7265,7 @@
           skipSx: inputSkipSx,
           overridesResolver
         } = inputOptions,
-        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2h);
+        options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2i);
 
       // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
       const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -7299,7 +7299,7 @@
             let {
                 theme: themeInput
               } = _ref,
-              other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
+              other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
             return stylesArg(_extends({
               theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
             }, other));
@@ -7776,133 +7776,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) ;
   }
 
-  /**
-   * This function create an object from keys, value and then assign to target
-   *
-   * @param {Object} obj : the target object to be assigned
-   * @param {string[]} keys
-   * @param {string | number} value
-   *
-   * @example
-   * const source = {}
-   * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
-   * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
-   *
-   * @example
-   * const source = { palette: { primary: 'var(--palette-primary)' } }
-   * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
-   * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
-   */
-  const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
-    let temp = obj;
-    keys.forEach((k, index) => {
-      if (index === keys.length - 1) {
-        if (Array.isArray(temp)) {
-          temp[Number(k)] = value;
-        } else if (temp && typeof temp === 'object') {
-          temp[k] = value;
-        }
-      } else if (temp && typeof temp === 'object') {
-        if (!temp[k]) {
-          temp[k] = arrayKeys.includes(k) ? [] : {};
-        }
-        temp = temp[k];
-      }
-    });
-  };
-
-  /**
-   *
-   * @param {Object} obj : source object
-   * @param {Function} callback : a function that will be called when
-   *                   - the deepest key in source object is reached
-   *                   - the value of the deepest key is NOT `undefined` | `null`
-   *
-   * @example
-   * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
-   * // ['palette', 'primary', 'main'] '#000000'
-   */
-  const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
-    function recurse(object, parentKeys = [], arrayKeys = []) {
-      Object.entries(object).forEach(([key, value]) => {
-        if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
-          if (value !== undefined && value !== null) {
-            if (typeof value === 'object' && Object.keys(value).length > 0) {
-              recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
-            } else {
-              callback([...parentKeys, key], value, arrayKeys);
-            }
-          }
-        }
-      });
-    }
-    recurse(obj);
-  };
-  const getCssValue = (keys, value) => {
-    if (typeof value === 'number') {
-      if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-        // CSS property that are unitless
-        return value;
-      }
-      const lastKey = keys[keys.length - 1];
-      if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
-        // opacity values are unitless
-        return value;
-      }
-      return `${value}px`;
-    }
-    return value;
-  };
-
-  /**
-   * a function that parse theme and return { css, vars }
-   *
-   * @param {Object} theme
-   * @param {{
-   *  prefix?: string,
-   *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
-   * }} options.
-   *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
-   *
-   * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
-   *
-   * @example
-   * const { css, vars } = parser({
-   *   fontSize: 12,
-   *   lineHeight: 1.2,
-   *   palette: { primary: { 500: 'var(--color)' } }
-   * }, { prefix: 'foo' })
-   *
-   * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
-   * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
-   */
-  function cssVarsParser(theme, options) {
-    const {
-      prefix,
-      shouldSkipGeneratingVar
-    } = options || {};
-    const css = {};
-    const vars = {};
-    walkObjectDeep(theme, (keys, value, arrayKeys) => {
-      if (typeof value === 'string' || typeof value === 'number') {
-        if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
-          // only create css & var if `shouldSkipGeneratingVar` return false
-          const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
-          Object.assign(css, {
-            [cssVar]: getCssValue(keys, value)
-          });
-          assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
-        }
-      }
-    }, keys => keys[0] === 'vars' // skip 'vars/*' paths
-    );
-
-    return {
-      css,
-      vars
-    };
-  }
-
   const DEFAULT_MODE_STORAGE_KEY = 'mode';
   const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
   const DEFAULT_ATTRIBUTE = 'data-color-scheme';
@@ -8162,7 +8035,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  const _excluded$2g = ["colorSchemes", "components", "cssVarPrefix"];
+  const _excluded$2h = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
     const {
@@ -8173,7 +8046,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       defaultMode: designSystemMode = 'light',
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
-      shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
       resolveTheme,
       excludeVariablesFromRoot
     } = options;
@@ -8201,7 +8073,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       colorSchemeSelector = ':root',
-      shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,
       disableNestedContext = false,
       disableStyleSheetGeneration = false
     }) {
@@ -8212,9 +8083,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const {
           colorSchemes = {},
           components = {},
+          generateCssVars = () => ({
+            vars: {},
+            css: {}
+          }),
           cssVarPrefix
         } = themeProp,
-        restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2g);
+        restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2h);
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -8269,10 +8144,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const {
         css: rootCss,
         vars: rootVars
-      } = cssVarsParser(restThemeProp, {
-        prefix: cssVarPrefix,
-        shouldSkipGeneratingVar
-      });
+      } = generateCssVars();
 
       // 3. Start composing the theme object
       const theme = _extends({}, restThemeProp, {
@@ -8292,10 +8164,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         const {
           css,
           vars
-        } = cssVarsParser(scheme, {
-          prefix: cssVarPrefix,
-          shouldSkipGeneratingVar
-        });
+        } = generateCssVars(key);
         theme.vars = deepmerge(theme.vars, vars);
         if (key === calculatedColorScheme) {
           // 4.1 Merge the selected color scheme to the theme
@@ -8334,6 +8203,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
         }
       });
+      theme.vars = deepmerge(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.
@@ -8458,10 +8328,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        * The key in the local storage used to store current color scheme.
        */
       modeStorageKey: PropTypes.string,
-      /**
-       * A function to determine if the key, value should be attached as CSS Variable
-       */
-      shouldSkipGeneratingVar: PropTypes.func,
       /**
        * The window that attaches the 'storage' event listener
        * @default window
@@ -8499,7 +8365,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         return '';
       }
       const value = vars[0];
-      if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
+      if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))|^(-?(\d*\.)?\d+)$|(\d+ \d+ \d+)/)) {
         return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
       }
       return `, ${value}`;
@@ -8512,6 +8378,195 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getCssVar;
   }
 
+  /**
+   * This function create an object from keys, value and then assign to target
+   *
+   * @param {Object} obj : the target object to be assigned
+   * @param {string[]} keys
+   * @param {string | number} value
+   *
+   * @example
+   * const source = {}
+   * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+   * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+   *
+   * @example
+   * const source = { palette: { primary: 'var(--palette-primary)' } }
+   * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+   * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+   */
+  const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
+    let temp = obj;
+    keys.forEach((k, index) => {
+      if (index === keys.length - 1) {
+        if (Array.isArray(temp)) {
+          temp[Number(k)] = value;
+        } else if (temp && typeof temp === 'object') {
+          temp[k] = value;
+        }
+      } else if (temp && typeof temp === 'object') {
+        if (!temp[k]) {
+          temp[k] = arrayKeys.includes(k) ? [] : {};
+        }
+        temp = temp[k];
+      }
+    });
+  };
+
+  /**
+   *
+   * @param {Object} obj : source object
+   * @param {Function} callback : a function that will be called when
+   *                   - the deepest key in source object is reached
+   *                   - the value of the deepest key is NOT `undefined` | `null`
+   *
+   * @example
+   * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+   * // ['palette', 'primary', 'main'] '#000000'
+   */
+  const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
+    function recurse(object, parentKeys = [], arrayKeys = []) {
+      Object.entries(object).forEach(([key, value]) => {
+        if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+          if (value !== undefined && value !== null) {
+            if (typeof value === 'object' && Object.keys(value).length > 0) {
+              recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
+            } else {
+              callback([...parentKeys, key], value, arrayKeys);
+            }
+          }
+        }
+      });
+    }
+    recurse(obj);
+  };
+  const getCssValue = (keys, value) => {
+    if (typeof value === 'number') {
+      if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
+        // CSS property that are unitless
+        return value;
+      }
+      const lastKey = keys[keys.length - 1];
+      if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
+        // opacity values are unitless
+        return value;
+      }
+      return `${value}px`;
+    }
+    return value;
+  };
+
+  /**
+   * a function that parse theme and return { css, vars }
+   *
+   * @param {Object} theme
+   * @param {{
+   *  prefix?: string,
+   *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+   * }} options.
+   *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
+   *
+   * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
+   *
+   * @example
+   * const { css, vars } = parser({
+   *   fontSize: 12,
+   *   lineHeight: 1.2,
+   *   palette: { primary: { 500: 'var(--color)' } }
+   * }, { prefix: 'foo' })
+   *
+   * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+   * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+   */
+  function cssVarsParser(theme, options) {
+    const {
+      prefix,
+      shouldSkipGeneratingVar
+    } = options || {};
+    const css = {};
+    const vars = {};
+    const varsWithDefaults = {};
+    walkObjectDeep(theme, (keys, value, arrayKeys) => {
+      if (typeof value === 'string' || typeof value === 'number') {
+        if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
+          // only create css & var if `shouldSkipGeneratingVar` return false
+          const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+          Object.assign(css, {
+            [cssVar]: getCssValue(keys, value)
+          });
+          assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
+          assignNestedKeys(varsWithDefaults, keys, `var(${cssVar}, ${value})`, arrayKeys);
+        }
+      }
+    }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+    );
+
+    return {
+      css,
+      vars,
+      varsWithDefaults
+    };
+  }
+
+  const _excluded$2g = ["colorSchemes", "components"],
+    _excluded2$c = ["light"];
+  function prepareCssVars(theme, parserConfig) {
+    // @ts-ignore - ignore components do not exist
+    const {
+        colorSchemes = {}
+      } = theme,
+      otherTheme = _objectWithoutPropertiesLoose(theme, _excluded$2g);
+    const {
+      vars: rootVars,
+      css: rootCss,
+      varsWithDefaults: rootVarsWithDefaults
+    } = cssVarsParser(otherTheme, parserConfig);
+    let themeVars = rootVarsWithDefaults;
+    const colorSchemesMap = {};
+    const {
+        light
+      } = colorSchemes,
+      otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2$c);
+    Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
+      const {
+        vars,
+        css,
+        varsWithDefaults
+      } = cssVarsParser(scheme, parserConfig);
+      themeVars = deepmerge(themeVars, varsWithDefaults);
+      colorSchemesMap[key] = {
+        css,
+        vars
+      };
+    });
+    if (light) {
+      // light color scheme vars should be merged last to set as default
+      const {
+        css,
+        vars,
+        varsWithDefaults
+      } = cssVarsParser(light, parserConfig);
+      themeVars = deepmerge(themeVars, varsWithDefaults);
+      colorSchemesMap.light = {
+        css,
+        vars
+      };
+    }
+    const generateCssVars = colorScheme => {
+      if (!colorScheme) {
+        return {
+          css: rootCss,
+          vars: rootVars
+        };
+      }
+      return colorSchemesMap[colorScheme];
+    };
+    return {
+      vars: themeVars,
+      generateCssVars
+    };
+  }
+
   const _excluded$2f = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$6 = createTheme$1();
   const defaultCreateStyledComponent$2 = systemStyled('div', {
@@ -10105,7 +10160,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   };
   var getOverlayAlpha$1 = getOverlayAlpha;
 
-  const _excluded$27 = ["colorSchemes", "cssVarPrefix"],
+  const _excluded$27 = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
     _excluded2$a = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
@@ -10142,11 +10197,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return undefined;
   };
   const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
+  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)/));
+  };
   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 = _objectWithoutPropertiesLoose(options, _excluded$27);
     const getCssVar = createGetCssVar(cssVarPrefix);
@@ -10192,6 +10254,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     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') {
@@ -10209,10 +10277,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'infoColor', private_safeDarken(palette.info.light, 0.6));
         setColor(palette.Alert, 'successColor', private_safeDarken(palette.success.light, 0.6));
         setColor(palette.Alert, 'warningColor', 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)));
@@ -10221,15 +10289,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'infoStandardBg', private_safeLighten(palette.info.light, 0.9));
         setColor(palette.Alert, 'successStandardBg', private_safeLighten(palette.success.light, 0.9));
         setColor(palette.Alert, 'warningStandardBg', 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)');
@@ -10239,7 +10307,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.LinearProgress, 'infoBg', private_safeLighten(palette.info.main, 0.62));
         setColor(palette.LinearProgress, 'successBg', private_safeLighten(palette.success.main, 0.62));
         setColor(palette.LinearProgress, 'warningBg', 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', private_safeLighten(palette.primary.main, 0.62));
         setColor(palette.Slider, 'secondaryTrack', private_safeLighten(palette.secondary.main, 0.62));
         setColor(palette.Slider, 'errorTrack', private_safeLighten(palette.error.main, 0.62));
@@ -10250,10 +10318,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
         setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
         setColor(palette.SpeedDialAction, 'fabHoverBg', 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', private_safeLighten(palette.primary.main, 0.62));
         setColor(palette.Switch, 'secondaryDisabledColor', private_safeLighten(palette.secondary.main, 0.62));
         setColor(palette.Switch, 'errorDisabledColor', private_safeLighten(palette.error.main, 0.62));
@@ -10267,10 +10335,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'infoColor', private_safeLighten(palette.info.light, 0.6));
         setColor(palette.Alert, 'successColor', private_safeLighten(palette.success.light, 0.6));
         setColor(palette.Alert, 'warningColor', 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)));
@@ -10279,17 +10347,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'infoStandardBg', private_safeDarken(palette.info.light, 0.9));
         setColor(palette.Alert, 'successStandardBg', private_safeDarken(palette.success.light, 0.9));
         setColor(palette.Alert, 'warningStandardBg', 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)');
@@ -10299,7 +10367,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.LinearProgress, 'infoBg', private_safeDarken(palette.info.main, 0.5));
         setColor(palette.LinearProgress, 'successBg', private_safeDarken(palette.success.main, 0.5));
         setColor(palette.LinearProgress, 'warningBg', 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', private_safeDarken(palette.primary.main, 0.5));
         setColor(palette.Slider, 'secondaryTrack', private_safeDarken(palette.secondary.main, 0.5));
         setColor(palette.Slider, 'errorTrack', private_safeDarken(palette.error.main, 0.5));
@@ -10310,10 +10378,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
         setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
         setColor(palette.SpeedDialAction, 'fabHoverBg', 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', private_safeDarken(palette.primary.main, 0.55));
         setColor(palette.Switch, 'secondaryDisabledColor', private_safeDarken(palette.secondary.main, 0.55));
         setColor(palette.Switch, 'errorDisabledColor', private_safeDarken(palette.error.main, 0.55));
@@ -10366,6 +10434,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       });
     });
     theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+    const parserConfig = {
+      prefix: cssVarPrefix,
+      shouldSkipGeneratingVar
+    };
+    const {
+      vars: themeVars,
+      generateCssVars
+    } = prepareCssVars(theme, parserConfig);
+    theme.vars = themeVars;
+    theme.generateCssVars = generateCssVars;
+    theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
     theme.unstable_sxConfig = _extends({}, defaultSxConfig$1, input == null ? void 0 : input.unstable_sxConfig);
     theme.unstable_sx = function sx(props) {
       return styleFunctionSx$1({
@@ -10382,12 +10461,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
   var excludeVariablesFromRoot$1 = 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$1 = extendTheme();
   const {
     CssVarsProvider,
@@ -10414,7 +10487,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       };
       return newTheme;
     },
-    shouldSkipGeneratingVar,
     excludeVariablesFromRoot: excludeVariablesFromRoot$1
   });
 
@@ -10804,7 +10876,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
   }
 
-  /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
   // Inspired by https://github.com/focus-trap/tabbable
   const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
   function getTabIndex(node) {
@@ -21885,7 +21956,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getAutocompleteUtilityClass(slot) {
     return generateUtilityClass('MuiAutocomplete', slot);
   }
-  const autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
+  const autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
   var autocompleteClasses$1 = autocompleteClasses;
 
   var _ClearIcon, _ArrowDropDownIcon;
@@ -21894,6 +21965,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       classes,
       disablePortal,
+      expanded,
       focused,
       fullWidth,
       hasClearIcon,
@@ -21903,7 +21975,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     } = ownerState;
     const slots = {
-      root: ['root', focused && 'focused', fullWidth && 'fullWidth', hasClearIcon && 'hasClearIcon', hasPopupIcon && 'hasPopupIcon'],
+      root: ['root', expanded && 'expanded', focused && 'focused', fullWidth && 'fullWidth', hasClearIcon && 'hasClearIcon', hasPopupIcon && 'hasPopupIcon'],
       inputRoot: ['inputRoot'],
       input: ['input', inputFocused && 'inputFocused'],
       tag: ['tag', `tagSize${capitalize(size)}`],
@@ -22302,6 +22374,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       getOptionProps,
       value,
       dirty,
+      expanded,
       id,
       popupOpen,
       focused,
@@ -22319,6 +22392,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
     const ownerState = _extends({}, props, {
       disablePortal,
+      expanded,
       focused,
       fullWidth,
       hasClearIcon,
@@ -22765,7 +22839,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      *
      * @param {React.SyntheticEvent} event The event source of the callback.
      * @param {T} option The highlighted option.
-     * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`.
+     * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
      */
     onHighlightChange: PropTypes.func,
     /**
@@ -27812,7 +27886,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = props;
     const classes = useUtilityClasses$19(ownerState);
     const {
-      titleId: id = idProp
+      titleId = idProp
     } = React__namespace.useContext(DialogContext$1);
     return /*#__PURE__*/jsxRuntime_1(DialogTitleRoot, _extends({
       component: "h2",
@@ -27820,7 +27894,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState,
       ref: ref,
       variant: "h6",
-      id: id
+      id: idProp != null ? idProp : titleId
     }, other));
   });
   DialogTitle.propTypes /* remove-proptypes */ = {
@@ -35707,7 +35781,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       },
       transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
       PaperProps: _extends({
-        component: MenuPaper
+        as: MenuPaper
       }, PaperProps, {
         classes: _extends({}, PaperProps.classes, {
           root: classes.paper
@@ -49303,7 +49377,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.scopedCssBaselineClasses = scopedCssBaselineClasses$1;
   exports.selectClasses = selectClasses$1;
   exports.setRef = setRef;
-  exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   exports.skeletonClasses = skeletonClasses$1;
   exports.sliderClasses = sliderClasses$1;
   exports.snackbarClasses = snackbarClasses$1;