@mui/material 5.8.6 → 5.9.1

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,
@@ -495,7 +495,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
 
   if (multiple && value.length > 0) {
     const getCustomizedTagProps = params => (0, _extends2.default)({
-      className: (0, _clsx.default)(classes.tag),
+      className: classes.tag,
       disabled
     }, getTagProps(params));
 
@@ -588,21 +588,21 @@ 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]
           })
         }),
         inputProps: (0, _extends2.default)({
-          className: (0, _clsx.default)(classes.input),
+          className: classes.input,
           disabled,
           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/ButtonBase/TouchRipple.js

@@ -247,7 +247,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       const {
         clientX,
         clientY
-      } = event.touches ? event.touches[0] : event;
+      } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
       rippleX = Math.round(clientX - rect.left);
       rippleY = Math.round(clientY - rect.top);
     }

package/node/Modal/Modal.js

@@ -15,11 +15,11 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _base = require("@mui/base");
+var _ModalUnstyled = _interopRequireWildcard(require("@mui/base/ModalUnstyled"));
 
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
 
-var _ModalUnstyled = _interopRequireWildcard(require("@mui/base/ModalUnstyled"));
+var _utils2 = require("@mui/utils");
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
@@ -137,11 +137,11 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       Backdrop: BackdropComponent
     }, components),
     componentsProps: {
-      root: (0, _extends2.default)({}, componentsProps.root, !(0, _base.isHostComponent)(Root) && {
+      root: () => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(componentsProps.root, ownerState), !(0, _utils.isHostComponent)(Root) && {
         as: component,
         theme
       }),
-      backdrop: (0, _extends2.default)({}, BackdropProps, componentsProps.backdrop)
+      backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(componentsProps.backdrop, ownerState))
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
@@ -184,7 +184,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   /**
    * A single child content element.
    */
-  children: _utils.elementAcceptingRef.isRequired,
+  children: _utils2.elementAcceptingRef.isRequired,
 
   /**
    * Override or extend the styles applied to the component.
@@ -218,8 +218,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
-    backdrop: _propTypes.default.object,
-    root: _propTypes.default.object
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
 
   /**
@@ -231,7 +231,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   container: _propTypes.default
   /* @typescript-to-proptypes-ignore */
-  .oneOfType([_utils.HTMLElementType, _propTypes.default.func]),
+  .oneOfType([_utils2.HTMLElementType, _propTypes.default.func]),
 
   /**
    * If `true`, the modal will not automatically shift focus to itself when it opens, and

package/node/ScopedCssBaseline/ScopedCssBaseline.js

@@ -117,7 +117,12 @@ process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    */
-  enableColorScheme: _propTypes.default.bool
+  enableColorScheme: _propTypes.default.bool,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = ScopedCssBaseline;
 exports.default = _default;

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/Slider/Slider.js

@@ -314,7 +314,6 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  transformOrigin: 'bottom center',
   transform: 'translateY(-100%) scale(0)',
   position: 'absolute',
   backgroundColor: (theme.vars || theme).palette.grey[600],
@@ -326,6 +325,7 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   padding: '0.25rem 0.75rem'
 }, ownerState.orientation === 'horizontal' && {
   top: '-10px',
+  transformOrigin: 'bottom center',
   '&:before': {
     position: 'absolute',
     content: '""',
@@ -338,7 +338,8 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   }
 }, ownerState.orientation === 'vertical' && {
   right: '30px',
-  top: '25px',
+  top: '24px',
+  transformOrigin: 'right center',
   '&:before': {
     position: 'absolute',
     content: '""',

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/Tooltip/Tooltip.js

@@ -371,12 +371,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleEnter = event => {
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
       return;
+    } // Workaround for https://github.com/facebook/react/issues/7769
+
+
+    if (!childNode) {
+      setChildNode(event.currentTarget);
     } // Remove the title ahead of time.
     // We don't want to wait for the next render commit.
     // We would risk displaying two tooltips at the same time (native + this one).
-
-
-    if (childNode) {
+    else {
       childNode.removeAttribute('title');
     }
 
@@ -421,8 +424,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
 
   const handleFocus = event => {
     // Workaround for https://github.com/facebook/react/issues/7769
-    // The autoFocus of React might trigger the event before the componentDidMount.
-    // We need to account for this eventuality.
     if (!childNode) {
       setChildNode(event.currentTarget);
     }

package/node/Unstable_Grid2/Grid2.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Unstable_Grid = require("@mui/system/Unstable_Grid");
+
+var _styles = require("../styles");
+
+const Grid2 = (0, _Unstable_Grid.createGrid)({
+  createStyledComponent: (0, _styles.styled)('div', {
+    name: 'MuiGrid2',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  componentName: 'MuiGrid2',
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps: inProps => (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiGrid2'
+  })
+});
+process.env.NODE_ENV !== "production" ? Grid2.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * @ignore
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+var _default = Grid2;
+exports.default = _default;

package/node/Unstable_Grid2/Grid2Props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/Unstable_Grid2/grid2Classes.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getGrid2UtilityClass = getGrid2UtilityClass;
+
+var _base = require("@mui/base");
+
+function getGrid2UtilityClass(slot) {
+  return (0, _base.generateUtilityClass)('MuiGrid2', slot);
+}
+
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const grid2Classes = (0, _base.generateUtilityClasses)('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth', // spacings
+...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
+...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
+...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
+...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+var _default = grid2Classes;
+exports.default = _default;

package/node/Unstable_Grid2/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  grid2Classes: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
+Object.defineProperty(exports, "grid2Classes", {
+  enumerable: true,
+  get: function () {
+    return _grid2Classes.default;
+  }
+});
+
+var _Grid = _interopRequireDefault(require("./Grid2"));
+
+var _Grid2Props = require("./Grid2Props");
+
+Object.keys(_Grid2Props).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Grid2Props[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Grid2Props[key];
+    }
+  });
+});
+
+var _grid2Classes = _interopRequireWildcard(require("./grid2Classes"));
+
+Object.keys(_grid2Classes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _grid2Classes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _grid2Classes[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.6
+/** @license MUI v5.9.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -62,6 +62,7 @@ var _exportNames = {
   FormHelperText: true,
   FormLabel: true,
   Grid: true,
+  Unstable_Grid2: true,
   Grow: true,
   Hidden: true,
   Icon: true,
@@ -918,6 +919,12 @@ Object.defineProperty(exports, "Typography", {
     return _Typography.default;
   }
 });
+Object.defineProperty(exports, "Unstable_Grid2", {
+  enumerable: true,
+  get: function () {
+    return _Unstable_Grid.default;
+  }
+});
 Object.defineProperty(exports, "Zoom", {
   enumerable: true,
   get: function () {
@@ -1692,6 +1699,20 @@ Object.keys(_Grid).forEach(function (key) {
   });
 });
 
+var _Unstable_Grid = _interopRequireWildcard(require("./Unstable_Grid2"));
+
+Object.keys(_Unstable_Grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Unstable_Grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Unstable_Grid[key];
+    }
+  });
+});
+
 var _Grow = _interopRequireWildcard(require("./Grow"));
 
 Object.keys(_Grow).forEach(function (key) {