@mui/material 5.8.5 → 5.9.0

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)/)
+  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,12 +54,14 @@ export default function extendTheme(options = {}, ...args) {
   });
 
   let theme = _extends({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
     colorSchemes: _extends({}, colorSchemesInput, {
       light: _extends({}, colorSchemesInput.light, {
         palette: lightPalette,
         opacity: _extends({
           inputPlaceholder: 0.42,
-          inputTouchBottomLine: 0.42,
+          inputUnderline: 0.42,
           switchTrackDisabled: 0.12,
           switchTrack: 0.38
         }, colorSchemesInput.light?.opacity),
@@ -65,7 +71,7 @@ export default function extendTheme(options = {}, ...args) {
         palette: darkPalette,
         opacity: _extends({
           inputPlaceholder: 0.5,
-          inputTouchBottomLine: 0.7,
+          inputUnderline: 0.7,
           switchTrackDisabled: 0.2,
           switchTrack: 0.3
         }, colorSchemesInput.dark?.opacity),
@@ -86,14 +92,34 @@ export default function extendTheme(options = {}, ...args) {
     } // assign component variables
 
 
-    assignNode(palette, ['AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
 
     if (key === '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, 'errorColor', darken(palette.error.light, 0.6));
+      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', 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));
+      setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
+      setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
+      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', 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)');
@@ -103,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));
@@ -125,15 +153,35 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
       setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     } else {
-      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
-      setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
+      setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
+      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', 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));
+      setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
+      setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
+      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', 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', 'var(--mui-palette-text-primary)'); // specific for dark mode
+      setColor(palette.AppBar, 'darkColor', getCssVar('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.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)');
@@ -143,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/Alert/Alert.js

@@ -90,22 +90,30 @@ const AlertRoot = (0, _styled.default)(_Paper.default, {
     display: 'flex',
     padding: '6px 16px'
   }, color && ownerState.variant === 'standard' && {
-    color: getColor(theme.palette[color].light, 0.6),
-    backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9),
-    [`& .${_alertClasses.default.icon}`]: {
+    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+    backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+    [`& .${_alertClasses.default.icon}`]: theme.vars ? {
+      color: theme.vars.palette.Alert[`${color}IconColor`]
+    } : {
       color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
     }
   }, color && ownerState.variant === 'outlined' && {
-    color: getColor(theme.palette[color].light, 0.6),
-    border: `1px solid ${theme.palette[color].light}`,
-    [`& .${_alertClasses.default.icon}`]: {
+    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+    border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+    [`& .${_alertClasses.default.icon}`]: theme.vars ? {
+      color: theme.vars.palette.Alert[`${color}IconColor`]
+    } : {
       color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
     }
-  }, color && ownerState.variant === 'filled' && {
-    color: '#fff',
-    fontWeight: theme.typography.fontWeightMedium,
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main
-  });
+  }, color && ownerState.variant === 'filled' && (0, _extends2.default)({
+    fontWeight: theme.typography.fontWeightMedium
+  }, theme.vars ? {
+    color: theme.vars.palette.Alert[`${color}FilledColor`],
+    backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+  } : {
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+    color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+  }));
 });
 const AlertIcon = (0, _styled.default)('div', {
   name: 'MuiAlert',

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

@@ -121,7 +121,7 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
 
     },
     '&:before': {
-      borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})` : bottomLineColor}`,
+      borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242

package/node/Input/Input.js

@@ -68,7 +68,7 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
   if (theme.vars) {
-    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`;
+    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
   }
 
   return (0, _extends2.default)({

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

@@ -168,12 +168,25 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     muiFormControl,
     states: ['required']
   });
+  const ownerState = (0, _extends2.default)({}, props, {
+    color: fcs.color || 'primary',
+    disabled: fcs.disabled,
+    error: fcs.error,
+    focused: fcs.focused,
+    formControl: muiFormControl,
+    fullWidth,
+    hiddenLabel: fcs.hiddenLabel,
+    multiline,
+    size: fcs.size,
+    type
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, (0, _extends2.default)({
     components: (0, _extends2.default)({
       Root: OutlinedInputRoot,
       Input: OutlinedInputInput
     }, components),
     renderSuffix: state => /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedOutlineRoot, {
+      ownerState: ownerState,
       className: classes.notchedOutline,
       label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [label, "\xA0", '*']

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

@@ -606,14 +606,14 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
-    input: _propTypes.default.object,
-    mark: _propTypes.default.object,
-    markLabel: _propTypes.default.object,
-    rail: _propTypes.default.object,
-    root: _propTypes.default.object,
-    thumb: _propTypes.default.object,
-    track: _propTypes.default.object,
-    valueLabel: _propTypes.default.shape({
+    input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    mark: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    markLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    rail: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    thumb: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    track: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    valueLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
       children: _propTypes.default.element,
       className: _propTypes.default.string,
       components: _propTypes.default.shape({
@@ -623,7 +623,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
       style: _propTypes.default.object,
       value: _propTypes.default.number,
       valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
 
   /**

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

@@ -570,8 +570,16 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   React.useEffect(() => {
     const handleResize = (0, _debounce.default)(() => {
-      updateIndicatorState();
-      updateScrollButtonState();
+      // If the Tabs component is replaced by Suspense with a fallback, the last
+      // ResizeObserver's handler that runs because of the change in the layout is trying to
+      // access a dom node that is no longer there (as the fallback component is being shown instead).
+      // See https://github.com/mui/material-ui/issues/33276
+      // TODO: Add tests that will ensure the component is not failing when
+      // replaced by Suspense with a fallback, once React is updated to version 18
+      if (tabsRef.current) {
+        updateIndicatorState();
+        updateScrollButtonState();
+      }
     });
     const win = (0, _ownerWindow.default)(tabsRef.current);
     win.addEventListener('resize', handleResize);

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
+});