@mui/material 5.8.3 → 5.8.6

package/legacy/AppBar/AppBar.js

@@ -19,6 +19,12 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     root: ['root', "color".concat(capitalize(color)), "position".concat(capitalize(position))]
   };
   return composeClasses(slots, getAppBarUtilityClass, classes);
+}; // var2 is the fallback.
+// Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
+
+
+var joinVars = function joinVars(var1, var2) {
+  return "".concat(var1 == null ? void 0 : var1.replace(')', ''), ", ").concat(var2, ")");
 };
 
 var AppBarRoot = styled(Paper, {
@@ -41,7 +47,7 @@ var AppBarRoot = styled(Paper, {
     flexShrink: 0
   }, ownerState.position === 'fixed' && {
     position: 'fixed',
-    zIndex: theme.zIndex.appBar,
+    zIndex: (theme.vars || theme).zIndex.appBar,
     top: 0,
     left: 'auto',
     right: 0,
@@ -51,14 +57,14 @@ var AppBarRoot = styled(Paper, {
     }
   }, ownerState.position === 'absolute' && {
     position: 'absolute',
-    zIndex: theme.zIndex.appBar,
+    zIndex: (theme.vars || theme).zIndex.appBar,
     top: 0,
     left: 'auto',
     right: 0
   }, ownerState.position === 'sticky' && {
     // ⚠️ sticky is not supported by IE11.
     position: 'sticky',
-    zIndex: theme.zIndex.appBar,
+    zIndex: (theme.vars || theme).zIndex.appBar,
     top: 0,
     left: 'auto',
     right: 0
@@ -66,7 +72,7 @@ var AppBarRoot = styled(Paper, {
     position: 'static'
   }, ownerState.position === 'relative' && {
     position: 'relative'
-  }, ownerState.color === 'default' && {
+  }, !theme.vars && _extends({}, ownerState.color === 'default' && {
     backgroundColor: backgroundColorDefault,
     color: theme.palette.getContrastText(backgroundColorDefault)
   }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
@@ -82,6 +88,19 @@ var AppBarRoot = styled(Paper, {
     color: 'inherit'
   }, theme.palette.mode === 'dark' && {
     backgroundImage: 'none'
+  })), theme.vars && _extends({}, ownerState.color === 'default' && {
+    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
+    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
+  }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
+    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
+    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+  }, {
+    backgroundColor: 'var(--AppBar-background)',
+    color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
+  }, ownerState.color === 'transparent' && {
+    backgroundImage: 'none',
+    backgroundColor: 'transparent',
+    color: 'inherit'
   }));
 });
 var AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {

package/legacy/Avatar/Avatar.js

@@ -47,13 +47,16 @@ var AvatarRoot = styled('div', {
     overflow: 'hidden',
     userSelect: 'none'
   }, ownerState.variant === 'rounded' && {
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.variant === 'square' && {
     borderRadius: 0
-  }, ownerState.colorDefault && {
-    color: theme.palette.background.default,
+  }, ownerState.colorDefault && _extends({
+    color: (theme.vars || theme).palette.background.default
+  }, theme.vars ? {
+    backgroundColor: theme.vars.palette.Avatar.defaultBg
+  } : {
     backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-  });
+  }));
 });
 var AvatarImg = styled('img', {
   name: 'MuiAvatar',

package/legacy/Badge/Badge.js

@@ -325,8 +325,8 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    badge: PropTypes.object,
-    root: PropTypes.object
+    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
 
   /**

package/legacy/Button/buttonClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }
-var buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+var buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
 export default buttonClasses;

package/legacy/Chip/Chip.js

@@ -53,6 +53,7 @@ var ChipRoot = styled('div', {
   var theme = _ref11.theme,
       ownerState = _ref11.ownerState;
   var deleteIconColor = alpha(theme.palette.text.primary, 0.26);
+  var textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
   return _extends((_extends2 = {
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
@@ -61,8 +62,8 @@ var ChipRoot = styled('div', {
     alignItems: 'center',
     justifyContent: 'center',
     height: 32,
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.action.selected,
+    color: (theme.vars || theme).palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
     transition: theme.transitions.create(['background-color', 'box-shadow']),
@@ -78,21 +79,21 @@ var ChipRoot = styled('div', {
     verticalAlign: 'middle',
     boxSizing: 'border-box'
   }, _defineProperty(_extends2, "&.".concat(chipClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
     pointerEvents: 'none'
   }), _defineProperty(_extends2, "& .".concat(chipClasses.avatar), {
     marginLeft: 5,
     marginRight: -6,
     width: 24,
     height: 24,
-    color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+    color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
     fontSize: theme.typography.pxToRem(12)
   }), _defineProperty(_extends2, "& .".concat(chipClasses.avatarColorPrimary), {
-    color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.primary.dark
+    color: (theme.vars || theme).palette.primary.contrastText,
+    backgroundColor: (theme.vars || theme).palette.primary.dark
   }), _defineProperty(_extends2, "& .".concat(chipClasses.avatarColorSecondary), {
-    color: theme.palette.secondary.contrastText,
-    backgroundColor: theme.palette.secondary.dark
+    color: (theme.vars || theme).palette.secondary.contrastText,
+    backgroundColor: (theme.vars || theme).palette.secondary.dark
   }), _defineProperty(_extends2, "& .".concat(chipClasses.avatarSmall), {
     marginLeft: 4,
     marginRight: -4,
@@ -100,7 +101,7 @@ var ChipRoot = styled('div', {
     height: 18,
     fontSize: theme.typography.pxToRem(10)
   }), _defineProperty(_extends2, "& .".concat(chipClasses.icon), _extends({
-    color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+    color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
     marginLeft: 5,
     marginRight: -6
   }, ownerState.size === 'small' && {
@@ -111,31 +112,31 @@ var ChipRoot = styled('div', {
     color: 'inherit'
   })), _defineProperty(_extends2, "& .".concat(chipClasses.deleteIcon), _extends({
     WebkitTapHighlightColor: 'transparent',
-    color: deleteIconColor,
+    color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.26)") : deleteIconColor,
     fontSize: 22,
     cursor: 'pointer',
     margin: '0 5px 0 -6px',
     '&:hover': {
-      color: alpha(deleteIconColor, 0.4)
+      color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.4)") : alpha(deleteIconColor, 0.4)
     }
   }, ownerState.size === 'small' && {
     fontSize: 16,
     marginRight: 4,
     marginLeft: -4
   }, ownerState.color !== 'default' && {
-    color: alpha(theme.palette[ownerState.color].contrastText, 0.7),
+    color: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].contrastTextChannel, " / 0.7)") : alpha(theme.palette[ownerState.color].contrastText, 0.7),
     '&:hover, &:active': {
-      color: theme.palette[ownerState.color].contrastText
+      color: (theme.vars || theme).palette[ownerState.color].contrastText
     }
   })), _extends2), ownerState.size === 'small' && {
     height: 24
   }, ownerState.color !== 'default' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.onDelete && _defineProperty({}, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   }), ownerState.onDelete && ownerState.color !== 'default' && _defineProperty({}, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: theme.palette[ownerState.color].dark
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
   }));
 }, function (_ref14) {
   var _ref15;
@@ -147,14 +148,14 @@ var ChipRoot = styled('div', {
     WebkitTapHighlightColor: 'transparent',
     cursor: 'pointer',
     '&:hover': {
-      backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
     }
   }, _defineProperty(_ref15, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   }), _defineProperty(_ref15, '&:active', {
-    boxShadow: theme.shadows[1]
+    boxShadow: (theme.vars || theme).shadows[1]
   }), _ref15), ownerState.clickable && ownerState.color !== 'default' && _defineProperty({}, "&:hover, &.".concat(chipClasses.focusVisible), {
-    backgroundColor: theme.palette[ownerState.color].dark
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
   }));
 }, function (_ref17) {
   var _ref18, _ref19;
@@ -163,11 +164,11 @@ var ChipRoot = styled('div', {
       ownerState = _ref17.ownerState;
   return _extends({}, ownerState.variant === 'outlined' && (_ref18 = {
     backgroundColor: 'transparent',
-    border: "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700])
+    border: theme.vars ? "1px solid ".concat(theme.vars.palette.Chip.defaultBorder) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700])
   }, _defineProperty(_ref18, "&.".concat(chipClasses.clickable, ":hover"), {
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: (theme.vars || theme).palette.action.hover
   }), _defineProperty(_ref18, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_ref18, "& .".concat(chipClasses.avatar), {
     marginLeft: 4
   }), _defineProperty(_ref18, "& .".concat(chipClasses.avatarSmall), {
@@ -181,16 +182,16 @@ var ChipRoot = styled('div', {
   }), _defineProperty(_ref18, "& .".concat(chipClasses.deleteIconSmall), {
     marginRight: 3
   }), _ref18), ownerState.variant === 'outlined' && ownerState.color !== 'default' && (_ref19 = {
-    color: theme.palette[ownerState.color].main,
-    border: "1px solid ".concat(alpha(theme.palette[ownerState.color].main, 0.7))
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.7)") : alpha(theme.palette[ownerState.color].main, 0.7))
   }, _defineProperty(_ref19, "&.".concat(chipClasses.clickable, ":hover"), {
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
   }), _defineProperty(_ref19, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
   }), _defineProperty(_ref19, "& .".concat(chipClasses.deleteIcon), {
-    color: alpha(theme.palette[ownerState.color].main, 0.7),
+    color: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.7)") : alpha(theme.palette[ownerState.color].main, 0.7),
     '&:hover, &:active': {
-      color: theme.palette[ownerState.color].main
+      color: (theme.vars || theme).palette[ownerState.color].main
     }
   }), _ref19));
 });

package/legacy/Dialog/Dialog.js

@@ -121,7 +121,7 @@ var DialogPaper = styled(Paper, {
     maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : "".concat(theme.breakpoints.values.xs).concat(theme.breakpoints.unit)
   }, "&.".concat(dialogClasses.paperScrollBody), _defineProperty({}, theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2), {
     maxWidth: 'calc(100% - 64px)'
-  })), ownerState.maxWidth !== 'xs' && _defineProperty({
+  })), ownerState.maxWidth && ownerState.maxWidth !== 'xs' && _defineProperty({
     maxWidth: "".concat(theme.breakpoints.values[ownerState.maxWidth]).concat(theme.breakpoints.unit)
   }, "&.".concat(dialogClasses.paperScrollBody), _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2), {
     maxWidth: 'calc(100% - 64px)'
@@ -226,12 +226,16 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   }, [ariaLabelledby]);
   return /*#__PURE__*/_jsx(DialogRoot, _extends({
     className: clsx(classes.root, className),
-    BackdropProps: _extends({
-      transitionDuration: transitionDuration,
-      as: BackdropComponent
-    }, BackdropProps),
     closeAfterTransition: true,
-    BackdropComponent: DialogBackdrop,
+    components: {
+      Backdrop: DialogBackdrop
+    },
+    componentsProps: {
+      backdrop: _extends({
+        transitionDuration: transitionDuration,
+        as: BackdropComponent
+      }, BackdropProps)
+    },
     disableEscapeKeyDown: disableEscapeKeyDown,
     onClose: onClose,
     open: open,
@@ -287,6 +291,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `components.Backdrop` instead.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',

package/legacy/FilledInput/FilledInput.js

@@ -35,36 +35,38 @@ var FilledInputRoot = styled(InputBaseRoot, {
     return [].concat(_toConsumableArray(inputBaseRootOverridesResolver(props, styles)), [!ownerState.disableUnderline && styles.underline]);
   }
 })(function (_ref) {
-  var _extends2, _theme$palette, _ref2;
+  var _extends2, _palette, _ref2;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   var light = theme.palette.mode === 'light';
   var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   var backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
+  var hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
+  var disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
   return _extends((_extends2 = {
     position: 'relative',
-    backgroundColor: backgroundColor,
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius,
+    backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,
+    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shorter,
       easing: theme.transitions.easing.easeOut
     }),
     '&:hover': {
-      backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)',
+      backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBg : hoverBackground,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: backgroundColor
+        backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
       }
     }
   }, _defineProperty(_extends2, "&.".concat(filledInputClasses.focused), {
-    backgroundColor: backgroundColor
+    backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
   }), _defineProperty(_extends2, "&.".concat(filledInputClasses.disabled), {
-    backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
+    backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
   }), _extends2), !ownerState.disableUnderline && (_ref2 = {
     '&:after': {
-      borderBottom: "2px solid ".concat((_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main),
+      borderBottom: "2px solid ".concat((_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main),
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -84,11 +86,11 @@ var FilledInputRoot = styled(InputBaseRoot, {
     // See https://github.com/mui/material-ui/issues/31766
     transform: 'scaleX(1) translateX(0)'
   }), _defineProperty(_ref2, "&.".concat(filledInputClasses.error, ":after"), {
-    borderBottomColor: theme.palette.error.main,
+    borderBottomColor: (theme.vars || theme).palette.error.main,
     transform: 'scaleX(1)' // error is always underlined in red
 
   }), _defineProperty(_ref2, '&:before', {
-    borderBottom: "1px solid ".concat(bottomLineColor),
+    borderBottom: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputUnderline, ")") : bottomLineColor),
     left: 0,
     bottom: 0,
     // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -101,7 +103,7 @@ var FilledInputRoot = styled(InputBaseRoot, {
     pointerEvents: 'none' // Transparent to the hover style.
 
   }), _defineProperty(_ref2, "&:hover:not(.".concat(filledInputClasses.disabled, "):before"), {
-    borderBottom: "1px solid ".concat(theme.palette.text.primary)
+    borderBottom: "1px solid ".concat((theme.vars || theme).palette.text.primary)
   }), _defineProperty(_ref2, "&.".concat(filledInputClasses.disabled, ":before"), {
     borderBottomStyle: 'dotted'
   }), _ref2), ownerState.startAdornment && {
@@ -129,7 +131,8 @@ var FilledInputInput = styled(InputBaseInput, {
     paddingTop: 25,
     paddingRight: 12,
     paddingBottom: 8,
-    paddingLeft: 12,
+    paddingLeft: 12
+  }, !theme.vars && {
     '&:-webkit-autofill': {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
@@ -137,7 +140,18 @@ var FilledInputInput = styled(InputBaseInput, {
       borderTopLeftRadius: 'inherit',
       borderTopRightRadius: 'inherit'
     }
-  }, ownerState.size === 'small' && {
+  }, theme.vars && _defineProperty({
+    '&:-webkit-autofill': {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
+    }
+  }, theme.getColorSchemeSelector('dark'), {
+    '&:-webkit-autofill': {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }
+  }), ownerState.size === 'small' && {
     paddingTop: 21,
     paddingBottom: 4
   }, ownerState.hiddenLabel && {

package/legacy/Grid/Grid.js

@@ -21,6 +21,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import requirePropFactory from '../utils/requirePropFactory';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useTheme from '../styles/useTheme';
 import GridContext from './GridContext';
 import gridClasses, { getGridUtilityClass } from './gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -193,26 +194,29 @@ export function generateColumnGap(_ref5) {
 
   return styles;
 }
-export function resolveSpacingClasses(spacing, container) {
+export function resolveSpacingStyles(spacing, breakpoints) {
   var styles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-  // in case of grid item or undefined/null or `spacing` <= 0
-  if (!container || !spacing || spacing <= 0) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
     return [];
   } // in case of string/number `spacing`
 
 
   if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
-    return [styles["spacing-xs-".concat(String(spacing))] || "spacing-xs-".concat(String(spacing))];
+    return [styles["spacing-xs-".concat(String(spacing))]];
   } // in case of object `spacing`
 
 
-  var xs = spacing.xs,
-      sm = spacing.sm,
-      md = spacing.md,
-      lg = spacing.lg,
-      xl = spacing.xl;
-  return [Number(xs) > 0 && (styles["spacing-xs-".concat(String(xs))] || "spacing-xs-".concat(String(xs))), Number(sm) > 0 && (styles["spacing-sm-".concat(String(sm))] || "spacing-sm-".concat(String(sm))), Number(md) > 0 && (styles["spacing-md-".concat(String(md))] || "spacing-md-".concat(String(md))), Number(lg) > 0 && (styles["spacing-lg-".concat(String(lg))] || "spacing-lg-".concat(String(lg))), Number(xl) > 0 && (styles["spacing-xl-".concat(String(xl))] || "spacing-xl-".concat(String(xl)))];
+  var spacingStyles = [];
+  breakpoints.forEach(function (breakpoint) {
+    var value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      spacingStyles.push(styles["spacing-".concat(breakpoint, "-").concat(String(value))]);
+    }
+  });
+  return spacingStyles;
 } // Default CSS values
 // flex: '0 1 auto',
 // flexDirection: 'row',
@@ -224,19 +228,29 @@ var GridRoot = styled('div', {
   name: 'MuiGrid',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
-    var _props$ownerState = props.ownerState,
-        container = _props$ownerState.container,
-        direction = _props$ownerState.direction,
-        item = _props$ownerState.item,
-        lg = _props$ownerState.lg,
-        md = _props$ownerState.md,
-        sm = _props$ownerState.sm,
-        spacing = _props$ownerState.spacing,
-        wrap = _props$ownerState.wrap,
-        xl = _props$ownerState.xl,
-        xs = _props$ownerState.xs,
-        zeroMinWidth = _props$ownerState.zeroMinWidth;
-    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth].concat(_toConsumableArray(resolveSpacingClasses(spacing, container, styles)), [direction !== 'row' && styles["direction-xs-".concat(String(direction))], wrap !== 'wrap' && styles["wrap-xs-".concat(String(wrap))], xs !== false && styles["grid-xs-".concat(String(xs))], sm !== false && styles["grid-sm-".concat(String(sm))], md !== false && styles["grid-md-".concat(String(md))], lg !== false && styles["grid-lg-".concat(String(lg))], xl !== false && styles["grid-xl-".concat(String(xl))]]);
+    var ownerState = props.ownerState;
+    var container = ownerState.container,
+        direction = ownerState.direction,
+        item = ownerState.item,
+        spacing = ownerState.spacing,
+        wrap = ownerState.wrap,
+        zeroMinWidth = ownerState.zeroMinWidth,
+        breakpoints = ownerState.breakpoints;
+    var spacingStyles = []; // in case of grid item
+
+    if (container) {
+      spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
+    }
+
+    var breakpointsStyles = [];
+    breakpoints.forEach(function (breakpoint) {
+      var value = ownerState[breakpoint];
+
+      if (value) {
+        breakpointsStyles.push(styles["grid-".concat(breakpoint, "-").concat(String(value))]);
+      }
+    });
+    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth].concat(_toConsumableArray(spacingStyles), [direction !== 'row' && styles["direction-xs-".concat(String(direction))], wrap !== 'wrap' && styles["wrap-xs-".concat(String(wrap))]], breakpointsStyles);
   }
 })(function (_ref7) {
   var ownerState = _ref7.ownerState;
@@ -255,22 +269,55 @@ var GridRoot = styled('div', {
     flexWrap: ownerState.wrap
   });
 }, generateDirection, generateRowGap, generateColumnGap, generateGrid);
+export function resolveSpacingClasses(spacing, breakpoints) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
+    return [];
+  } // in case of string/number `spacing`
+
+
+  if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
+    return ["spacing-xs-".concat(String(spacing))];
+  } // in case of object `spacing`
+
+
+  var classes = [];
+  breakpoints.forEach(function (breakpoint) {
+    var value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      var className = "spacing-".concat(breakpoint, "-").concat(String(value));
+      classes.push(className);
+    }
+  });
+  return classes;
+}
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
       container = ownerState.container,
       direction = ownerState.direction,
       item = ownerState.item,
-      lg = ownerState.lg,
-      md = ownerState.md,
-      sm = ownerState.sm,
       spacing = ownerState.spacing,
       wrap = ownerState.wrap,
-      xl = ownerState.xl,
-      xs = ownerState.xs,
-      zeroMinWidth = ownerState.zeroMinWidth;
+      zeroMinWidth = ownerState.zeroMinWidth,
+      breakpoints = ownerState.breakpoints;
+  var spacingClasses = []; // in case of grid item
+
+  if (container) {
+    spacingClasses = resolveSpacingClasses(spacing, breakpoints);
+  }
+
+  var breakpointsClasses = [];
+  breakpoints.forEach(function (breakpoint) {
+    var value = ownerState[breakpoint];
+
+    if (value) {
+      breakpointsClasses.push("grid-".concat(breakpoint, "-").concat(String(value)));
+    }
+  });
   var slots = {
-    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth'].concat(_toConsumableArray(resolveSpacingClasses(spacing, container)), [direction !== 'row' && "direction-xs-".concat(String(direction)), wrap !== 'wrap' && "wrap-xs-".concat(String(wrap)), xs !== false && "grid-xs-".concat(String(xs)), sm !== false && "grid-sm-".concat(String(sm)), md !== false && "grid-md-".concat(String(md)), lg !== false && "grid-lg-".concat(String(lg)), xl !== false && "grid-xl-".concat(String(xl))])
+    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth'].concat(_toConsumableArray(spacingClasses), [direction !== 'row' && "direction-xs-".concat(String(direction)), wrap !== 'wrap' && "wrap-xs-".concat(String(wrap))], breakpointsClasses)
   };
   return composeClasses(slots, getGridUtilityClass, classes);
 };
@@ -280,6 +327,10 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     props: inProps,
     name: 'MuiGrid'
   });
+
+  var _useTheme = useTheme(),
+      breakpoints = _useTheme.breakpoints;
+
   var props = extendSxProp(themeProps);
 
   var className = props.className,
@@ -293,45 +344,43 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
       direction = _props$direction === void 0 ? 'row' : _props$direction,
       _props$item = props.item,
       item = _props$item === void 0 ? false : _props$item,
-      _props$lg = props.lg,
-      lg = _props$lg === void 0 ? false : _props$lg,
-      _props$md = props.md,
-      md = _props$md === void 0 ? false : _props$md,
       rowSpacingProp = props.rowSpacing,
-      _props$sm = props.sm,
-      sm = _props$sm === void 0 ? false : _props$sm,
       _props$spacing = props.spacing,
       spacing = _props$spacing === void 0 ? 0 : _props$spacing,
       _props$wrap = props.wrap,
       wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,
-      _props$xl = props.xl,
-      xl = _props$xl === void 0 ? false : _props$xl,
-      _props$xs = props.xs,
-      xs = _props$xs === void 0 ? false : _props$xs,
       _props$zeroMinWidth = props.zeroMinWidth,
       zeroMinWidth = _props$zeroMinWidth === void 0 ? false : _props$zeroMinWidth,
-      other = _objectWithoutProperties(props, ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "lg", "md", "rowSpacing", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"]);
+      other = _objectWithoutProperties(props, ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"]);
 
   var rowSpacing = rowSpacingProp || spacing;
   var columnSpacing = columnSpacingProp || spacing;
   var columnsContext = React.useContext(GridContext); // columns set with default breakpoint unit of 12
 
   var columns = container ? columnsProp || 12 : columnsContext;
+  var breakpointsValues = {};
+
+  var otherFiltered = _extends({}, other);
+
+  breakpoints.keys.forEach(function (breakpoint) {
+    if (other[breakpoint] != null) {
+      breakpointsValues[breakpoint] = other[breakpoint];
+      delete otherFiltered[breakpoint];
+    }
+  });
 
   var ownerState = _extends({}, props, {
     columns: columns,
     container: container,
     direction: direction,
     item: item,
-    lg: lg,
-    md: md,
-    sm: sm,
     rowSpacing: rowSpacing,
     columnSpacing: columnSpacing,
     wrap: wrap,
-    xl: xl,
-    xs: xs,
-    zeroMinWidth: zeroMinWidth
+    zeroMinWidth: zeroMinWidth,
+    spacing: spacing
+  }, breakpointsValues, {
+    breakpoints: breakpoints.keys
   });
 
   var classes = useUtilityClasses(ownerState);
@@ -342,7 +391,7 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
       className: clsx(classes.root, className),
       as: component,
       ref: ref
-    }, other))
+    }, otherFiltered))
   });
 });
 process.env.NODE_ENV !== "production" ? Grid.propTypes