@mui/material 5.8.6 → 5.8.7

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.6
+/** @license MUI v5.8.7
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -560,6 +560,7 @@
   }
 
   var StyleSheet = /*#__PURE__*/function () {
+    // Using Node instead of HTMLElement since container may be a ShadowRoot
     function StyleSheet(options) {
       var _this = this;
 
@@ -918,8 +919,7 @@
       }
     }
 
-    var inserted = {}; // $FlowFixMe
-
+    var inserted = {};
     var container;
     var nodesToHydrate = [];
 
@@ -1574,6 +1574,8 @@
     };
   }
 
+  var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
+
   function handleInterpolation(mergedProps, registered, interpolation) {
     if (interpolation == null) {
       return '';
@@ -1581,7 +1583,7 @@
 
     if (interpolation.__emotion_styles !== undefined) {
       if (interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-        throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
+        throw new Error(noComponentSelectorMessage);
       }
 
       return interpolation;
@@ -1691,7 +1693,7 @@
           }
         } else {
           if (_key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
-            throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
+            throw new Error(noComponentSelectorMessage);
           }
 
           if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
@@ -1961,7 +1963,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.9.0",
+  	version: "11.9.3",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -1989,8 +1991,8 @@
   	dependencies: {
   		"@babel/runtime": "^7.13.10",
   		"@emotion/babel-plugin": "^11.7.1",
-  		"@emotion/cache": "^11.7.1",
-  		"@emotion/serialize": "^1.0.3",
+  		"@emotion/cache": "^11.9.3",
+  		"@emotion/serialize": "^1.0.4",
   		"@emotion/utils": "^1.1.0",
   		"@emotion/weak-memoize": "^0.2.5",
   		"hoist-non-react-statics": "^3.3.1"
@@ -2009,12 +2011,11 @@
   	},
   	devDependencies: {
   		"@babel/core": "^7.13.10",
+  		"@definitelytyped/dtslint": "0.0.112",
   		"@emotion/css": "11.9.0",
   		"@emotion/css-prettifier": "1.0.1",
   		"@emotion/server": "11.4.0",
-  		"@emotion/styled": "11.8.1",
-  		"@types/react": "^16.9.11",
-  		dtslint: "^4.2.1",
+  		"@emotion/styled": "11.9.3",
   		"html-tag-names": "^1.1.2",
   		react: "16.14.0",
   		"svg-tag-names": "^1.1.1",
@@ -6547,7 +6548,7 @@
   	return str;
   }
 
-  function clsx () {
+  function clsx() {
   	var i=0, tmp, x, str='';
   	while (i < arguments.length) {
   		if (tmp = arguments[i++]) {
@@ -7573,13 +7574,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    * @param {Object} theme
    * @param {{
    *  prefix?: string,
-   *  basePrefix?: string,
    *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
    * }} options.
-   *  `basePrefix`: defined by design system.
-   *  `prefix`: defined by application
-   *
-   *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+   *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
    *
    * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
    *
@@ -7590,16 +7587,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *   palette: { primary: { 500: 'var(--color)' } }
    * }, { prefix: 'foo' })
    *
-   * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
-   * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
-   * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+   * 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)' } } }
+   * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
    */
 
 
   function cssVarsParser(theme, options) {
     const {
       prefix,
-      basePrefix = '',
       shouldSkipGeneratingVar
     } = options || {};
     const css = {};
@@ -7607,16 +7603,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const parsedTheme = {};
     walkObjectDeep(theme, (keys, value, arrayKeys) => {
       if (typeof value === 'string' || typeof value === 'number') {
-        if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-          // for CSS variable, apply prefix or remove basePrefix from the variable
-          if (!basePrefix && prefix) {
-            value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
-          } else {
-            value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
-            : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
-          }
-        }
-
         if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
           // only create css & var if `shouldSkipGeneratingVar` return false
           const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
@@ -7911,34 +7897,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  /**
-   * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
-   * and they does not need to remember the prefix (defined once).
-   */
-  function createGetCssVar(prefix = '') {
-    function appendVar(...vars) {
-      if (!vars.length) {
-        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))/)) {
-        return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
-      }
-
-      return `, ${value}`;
-    } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
-
-
-    const getCssVar = (field, ...vars) => {
-      return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-    };
-
-    return getCssVar;
-  }
-
-  const _excluded$2g = ["colorSchemes", "components"];
+  const _excluded$2g = ["colorSchemes", "components", "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 {
@@ -7950,8 +7909,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
       enableColorScheme: designSystemEnableColorScheme = true,
-      prefix: designSystemPrefix = '',
-      shouldSkipGeneratingVar,
+      shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
       resolveTheme
     } = options;
 
@@ -7974,7 +7932,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     function CssVarsProvider({
       children,
       theme: themeProp = defaultTheme,
-      prefix = designSystemPrefix,
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
       attribute = defaultAttribute,
@@ -7985,13 +7942,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       storageWindow = typeof window === 'undefined' ? undefined : window,
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-      colorSchemeSelector = ':root'
+      colorSchemeSelector = ':root',
+      shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
     }) {
       const hasMounted = React__namespace.useRef(false);
 
       const {
         colorSchemes = {},
-        components = {}
+        components = {},
+        cssVarPrefix
       } = themeProp,
             restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2g);
 
@@ -8036,16 +7995,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         vars: rootVars,
         parsedTheme
       } = cssVarsParser(theme, {
-        prefix,
-        basePrefix: designSystemPrefix,
+        prefix: cssVarPrefix,
         shouldSkipGeneratingVar
       });
       theme = _extends({}, parsedTheme, {
         components,
         colorSchemes,
-        prefix,
+        cssVarPrefix,
         vars: rootVars,
-        getCssVar: createGetCssVar(prefix),
         getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
       });
       const defaultColorSchemeStyleSheet = {};
@@ -8056,8 +8013,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           vars,
           parsedTheme: parsedScheme
         } = cssVarsParser(scheme, {
-          prefix,
-          basePrefix: designSystemPrefix,
+          prefix: cssVarPrefix,
           shouldSkipGeneratingVar
         });
         theme.vars = deepmerge(theme.vars, vars);
@@ -8221,9 +8177,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       modeStorageKey: PropTypes.string,
 
       /**
-       * CSS variable prefix.
+       * A function to determine if the key, value should be attached as CSS Variable
        */
-      prefix: PropTypes.string,
+      shouldSkipGeneratingVar: PropTypes.func,
 
       /**
        * The window that attaches the 'storage' event listener
@@ -8251,6 +8207,33 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
+  /**
+   * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+   * and they does not need to remember the prefix (defined once).
+   */
+  function createGetCssVar$1(prefix = '') {
+    function appendVar(...vars) {
+      if (!vars.length) {
+        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))/)) {
+        return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
+      }
+
+      return `, ${value}`;
+    } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+    const getCssVar = (field, ...fallbacks) => {
+      return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
+    };
+
+    return getCssVar;
+  }
+
   const _excluded$2f = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$4 = createTheme$1();
   const defaultCreateStyledComponent = systemStyled('div', {
@@ -8534,12 +8517,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return componentProps;
   }
 
-  /**
-   * Creates a type that is T with removed properties that are functions with names beginning with `on`.
-   * Note that it does not exactly follow the logic of `omitEventHandlers` as it also removes fields where
-   * `on` is followed by a non-letter character,
-   */
-
   /**
    * Removes event handlers from the given object.
    * A field is considered an event handler if it is a function with a name beginning with `on`.
@@ -8724,13 +8701,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       autoHighlight = false,
       autoSelect = false,
       blurOnSelect = false,
-      disabled: disabledProp,
       clearOnBlur = !props.freeSolo,
       clearOnEscape = false,
       componentName = 'useAutocomplete',
       defaultValue = props.multiple ? [] : null,
       disableClearable = false,
       disableCloseOnSelect = false,
+      disabled: disabledProp,
       disabledItemsFocusable = false,
       disableListWrap = false,
       filterOptions = defaultFilterOptions,
@@ -8742,12 +8719,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
         return (_option$label = option.label) != null ? _option$label : option;
       },
-      isOptionEqualToValue = (option, value) => option === value,
       groupBy,
       handleHomeEndKeys = !props.freeSolo,
       id: idProp,
       includeInputInList = false,
       inputValue: inputValueProp,
+      isOptionEqualToValue = (option, value) => option === value,
       multiple = false,
       onChange,
       onClose,
@@ -16070,7 +16047,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Paper$1 = Paper;
 
-  const _excluded$22 = ["colorSchemes"],
+  const _excluded$22 = ["colorSchemes", "cssVarPrefix"],
         _excluded2$9 = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
@@ -16093,14 +16070,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     obj[key] = obj[key] || defaultValue;
   }
 
+  const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
   function extendTheme(options = {}, ...args) {
     var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
     const {
-      colorSchemes: colorSchemesInput = {}
+      colorSchemes: colorSchemesInput = {},
+      cssVarPrefix = 'mui'
     } = options,
           input = _objectWithoutPropertiesLoose(options, _excluded$22);
 
+    const getCssVar = createGetCssVar(cssVarPrefix);
+
     const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
     })),
@@ -16118,6 +16099,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     let theme = _extends({}, muiTheme, {
+      cssVarPrefix,
+      getCssVar,
       colorSchemes: _extends({}, colorSchemesInput, {
         light: _extends({}, colorSchemesInput.light, {
           palette: lightPalette,
@@ -16161,10 +16144,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
         setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
         setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
-        setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-main)');
-        setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-main)');
-        setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-main)');
-        setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-main)');
+        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, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
         setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
         setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
@@ -16173,15 +16156,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
         setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
         setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
-        setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-light)');
-        setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-light)');
-        setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-light)');
-        setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-light)');
-        setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
-        setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
-        setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
-        setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
-        setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
+        setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
+        setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
+        setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
+        setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+        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.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)');
@@ -16191,19 +16174,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
         setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
         setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
-        setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)');
+        setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
         setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
         setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
         setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
         setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
         setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
         setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
-        setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8));
+        const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+        setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+        setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
         setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
-        setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
-        setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
-        setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
-        setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)');
+        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.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
         setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
         setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
@@ -16217,10 +16202,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
         setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
         setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
-        setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-dark)');
-        setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-dark)');
-        setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-dark)');
-        setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-dark)');
+        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, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
         setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
         setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
@@ -16229,19 +16214,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
         setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
         setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
-        setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-main)');
-        setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-main)');
-        setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-main)');
-        setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-main)');
-        setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
-        setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
-
-        setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
-
-        setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
-        setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
-        setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
-        setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');
+        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.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)');
@@ -16251,19 +16236,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
         setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
         setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
-        setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)');
+        setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
         setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
         setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
         setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
         setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
         setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
         setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
-        setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98));
+        const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+        setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+        setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
         setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
-        setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
-        setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
-        setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
-        setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)');
+        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.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
         setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
         setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
@@ -16319,9 +16306,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return theme;
   }
 
+  const shouldSkipGeneratingVar = keys => {
+    var _keys$;
+
+    return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  };
+
   const defaultTheme$1 = extendTheme();
   const {
-    CssVarsProvider: Experimental_CssVarsProvider,
+    CssVarsProvider,
     useColorScheme,
     getInitColorSchemeScript
   } = createCssVarsProvider({
@@ -16333,7 +16326,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       light: 'light',
       dark: 'dark'
     },
-    prefix: 'mui',
     resolveTheme: theme => {
       const newTheme = _extends({}, theme, {
         typography: createTypography(theme.palette, theme.typography)
@@ -16341,11 +16333,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       return newTheme;
     },
-    shouldSkipGeneratingVar: keys => {
-      var _keys$;
-
-      return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
-    }
+    shouldSkipGeneratingVar
   });
 
   function getSvgIconUtilityClass(slot) {
@@ -22589,7 +22577,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   });
   const Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
-    var _componentsProps$clea, _componentsProps$pape;
+    var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
 
     const props = useThemeProps({
       props: inProps,
@@ -22790,8 +22778,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 disabled: disabled,
                 "aria-label": popupOpen ? closeText : openText,
                 title: popupOpen ? closeText : openText,
-                className: clsx(classes.popupIndicator),
-                ownerState: ownerState,
+                ownerState: ownerState
+              }, componentsProps.popupIndicator, {
+                className: clsx(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
                 children: popupIcon
               })) : null]
             })
@@ -22802,9 +22791,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             readOnly
           }, getInputProps())
         })
-      })), popupOpen && anchorEl ? /*#__PURE__*/jsxRuntime_1(AutocompletePopper, {
+      })), popupOpen && anchorEl ? /*#__PURE__*/jsxRuntime_1(AutocompletePopper, _extends({
         as: PopperComponent,
-        className: clsx(classes.popper),
         disablePortal: disablePortal,
         style: {
           width: anchorEl ? anchorEl.clientWidth : null
@@ -22812,7 +22800,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ownerState: ownerState,
         role: "presentation",
         anchorEl: anchorEl,
-        open: true,
+        open: true
+      }, componentsProps.popper, {
+        className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
         children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, _extends({
           ownerState: ownerState,
           as: PaperComponent
@@ -22849,7 +22839,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             })
           })) : null]
         }))
-      }) : null]
+      })) : null]
     });
   });
   Autocomplete.propTypes
@@ -22951,7 +22941,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     componentsProps: PropTypes.shape({
       clearIndicator: PropTypes.object,
-      paper: PropTypes.object
+      paper: PropTypes.object,
+      popper: PropTypes.object,
+      popupIndicator: PropTypes.object
     }),
 
     /**
@@ -41698,7 +41690,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If the value is an object it must have reference equality with the option in order to be selected.
      * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
      */
-    value: PropTypes.any,
+    value: PropTypes.oneOfType([PropTypes.oneOf(['']), PropTypes.any]),
 
     /**
      * The variant to use.
@@ -42719,7 +42711,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
     const backgroundColor = emphasize(theme.palette.background.default, emphasis);
     return _extends({}, theme.typography.body2, {
-      color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColor),
+      color: theme.vars ? theme.vars.palette.SnackbarContent.color : theme.palette.getContrastText(backgroundColor),
       backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,
       display: 'flex',
       alignItems: 'center',
@@ -51784,7 +51776,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.DialogTitle = DialogTitle$1;
   exports.Divider = Divider$1;
   exports.Drawer = Drawer$1;
-  exports.Experimental_CssVarsProvider = Experimental_CssVarsProvider;
+  exports.Experimental_CssVarsProvider = CssVarsProvider;
   exports.Fab = Fab$1;
   exports.Fade = Fade$1;
   exports.FilledInput = FilledInput$1;
@@ -52118,6 +52110,7 @@ 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;
   exports.snackbarClasses = snackbarClasses$1;