@mui/material 5.8.6 → 5.8.7

package/locale/index.d.ts

@@ -1,71 +1,71 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/Autocomplete/Autocomplete.js

@@ -544,8 +544,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               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.popupIndicator?.className),
               children: popupIcon
             })) : null]
           })
@@ -556,9 +557,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           readOnly
         }, getInputProps())
       })
-    })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
+    })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
       as: PopperComponent,
-      className: clsx(classes.popper),
       disablePortal: disablePortal,
       style: {
         width: anchorEl ? anchorEl.clientWidth : null
@@ -566,7 +566,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       ownerState: ownerState,
       role: "presentation",
       anchorEl: anchorEl,
-      open: true,
+      open: true
+    }, componentsProps.popper, {
+      className: clsx(classes.popper, componentsProps.popper?.className),
       children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
         ownerState: ownerState,
         as: PaperComponent
@@ -603,7 +605,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           })
         })) : null]
       }))
-    }) : null]
+    })) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
@@ -705,7 +707,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   componentsProps: PropTypes.shape({
     clearIndicator: PropTypes.object,
-    paper: PropTypes.object
+    paper: PropTypes.object,
+    popper: PropTypes.object,
+    popupIndicator: PropTypes.object
   }),
 
   /**

package/modern/Select/Select.js

@@ -294,7 +294,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    * 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.

package/modern/SnackbarContent/SnackbarContent.js

@@ -35,7 +35,7 @@ const SnackbarContentRoot = styled(Paper, {
   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',

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

package/modern/styles/CssVarsProvider.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable @typescript-eslint/naming-convention */
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
+
+const shouldSkipGeneratingVar = keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
+
 const defaultTheme = experimental_extendTheme();
 const {
-  CssVarsProvider: Experimental_CssVarsProvider,
+  CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = createCssVarsProvider({
@@ -18,7 +19,6 @@ const {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'mui',
   resolveTheme: theme => {
     const newTheme = _extends({}, theme, {
       typography: createTypography(theme.palette, theme.typography)
@@ -26,6 +26,6 @@ const {
 
     return newTheme;
   },
-  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/)
+  shouldSkipGeneratingVar
 });
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };

package/modern/styles/experimental_extendTheme.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes"],
+const _excluded = ["colorSchemes", "cssVarPrefix"],
       _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
-import { colorChannel, alpha, darken, lighten, emphasize } from '@mui/system';
+import { colorChannel, alpha, darken, lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
 import { getOverlayAlpha } from '../Paper/Paper';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -27,12 +27,16 @@ function setColor(obj, key, defaultValue) {
   obj[key] = obj[key] || defaultValue;
 }
 
+export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 export default function extendTheme(options = {}, ...args) {
   const {
-    colorSchemes: colorSchemesInput = {}
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui'
   } = options,
         input = _objectWithoutPropertiesLoose(options, _excluded);
 
+  const getCssVar = createGetCssVar(cssVarPrefix);
+
   const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
     palette: colorSchemesInput.light?.palette
   })),
@@ -50,6 +54,8 @@ export default function extendTheme(options = {}, ...args) {
   });
 
   let theme = _extends({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
     colorSchemes: _extends({}, colorSchemesInput, {
       light: _extends({}, colorSchemesInput.light, {
         palette: lightPalette,
@@ -93,10 +99,10 @@ export default function extendTheme(options = {}, ...args) {
       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));
@@ -105,15 +111,15 @@ export default function extendTheme(options = {}, ...args) {
       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)');
@@ -123,19 +129,21 @@ export default function extendTheme(options = {}, ...args) {
       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));
@@ -149,10 +157,10 @@ export default function extendTheme(options = {}, ...args) {
       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));
@@ -161,19 +169,19 @@ export default function extendTheme(options = {}, ...args) {
       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)');
@@ -183,19 +191,21 @@ export default function extendTheme(options = {}, ...args) {
       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));

package/node/Autocomplete/Autocomplete.js

@@ -389,7 +389,7 @@ const AutocompleteGroupUl = (0, _styled.default)('ul', {
   }
 });
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea, _componentsProps$pape;
+  var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -588,8 +588,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               disabled: disabled,
               "aria-label": popupOpen ? closeText : openText,
               title: popupOpen ? closeText : openText,
-              className: (0, _clsx.default)(classes.popupIndicator),
-              ownerState: ownerState,
+              ownerState: ownerState
+            }, componentsProps.popupIndicator, {
+              className: (0, _clsx.default)(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
               children: popupIcon
             })) : null]
           })
@@ -600,9 +601,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           readOnly
         }, getInputProps())
       })
-    })), popupOpen && anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
+    })), popupOpen && anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, (0, _extends2.default)({
       as: PopperComponent,
-      className: (0, _clsx.default)(classes.popper),
       disablePortal: disablePortal,
       style: {
         width: anchorEl ? anchorEl.clientWidth : null
@@ -610,7 +610,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       ownerState: ownerState,
       role: "presentation",
       anchorEl: anchorEl,
-      open: true,
+      open: true
+    }, componentsProps.popper, {
+      className: (0, _clsx.default)(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, (0, _extends2.default)({
         ownerState: ownerState,
         as: PaperComponent
@@ -647,7 +649,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           })
         })) : null]
       }))
-    }) : null]
+    })) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
@@ -749,7 +751,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   componentsProps: _propTypes.default.shape({
     clearIndicator: _propTypes.default.object,
-    paper: _propTypes.default.object
+    paper: _propTypes.default.object,
+    popper: _propTypes.default.object,
+    popupIndicator: _propTypes.default.object
   }),
 
   /**

package/node/Select/Select.js

@@ -320,7 +320,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    * 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.default.any,
+  value: _propTypes.default.oneOfType([_propTypes.default.oneOf(['']), _propTypes.default.any]),
 
   /**
    * The variant to use.

package/node/SnackbarContent/SnackbarContent.js

@@ -59,7 +59,7 @@ const SnackbarContentRoot = (0, _styled.default)(_Paper.default, {
   const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
   const backgroundColor = (0, _system.emphasize)(theme.palette.background.default, emphasis);
   return (0, _extends2.default)({}, 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',

package/node/index.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.

package/node/styles/CssVarsProvider.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useColorScheme = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
+exports.useColorScheme = exports.shouldSkipGeneratingVar = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,10 +15,16 @@ var _experimental_extendTheme = _interopRequireDefault(require("./experimental_e
 
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 
-/* eslint-disable @typescript-eslint/naming-convention */
+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)/));
+};
+
+exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
 const defaultTheme = (0, _experimental_extendTheme.default)();
 const {
-  CssVarsProvider: Experimental_CssVarsProvider,
+  CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = (0, _system.unstable_createCssVarsProvider)({
@@ -30,19 +36,14 @@ const {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'mui',
   resolveTheme: theme => {
     const newTheme = (0, _extends2.default)({}, theme, {
       typography: (0, _createTypography.default)(theme.palette, theme.typography)
     });
     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
 });
 exports.getInitColorSchemeScript = getInitColorSchemeScript;
 exports.useColorScheme = useColorScheme;
-exports.Experimental_CssVarsProvider = Experimental_CssVarsProvider;
+exports.Experimental_CssVarsProvider = CssVarsProvider;