@mui/material 5.8.3 → 5.8.6

package/modern/Chip/Chip.js

@@ -78,6 +78,7 @@ const ChipRoot = styled('div', {
   ownerState
 }) => {
   const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
+  const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
   return _extends({
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
@@ -86,8 +87,8 @@ const 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']),
@@ -103,7 +104,7 @@ const ChipRoot = styled('div', {
     verticalAlign: 'middle',
     boxSizing: 'border-box',
     [`&.${chipClasses.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity,
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
       pointerEvents: 'none'
     },
     [`& .${chipClasses.avatar}`]: {
@@ -111,16 +112,16 @@ const ChipRoot = styled('div', {
       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)
     },
     [`& .${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
     },
     [`& .${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
     },
     [`& .${chipClasses.avatarSmall}`]: {
       marginLeft: 4,
@@ -130,7 +131,7 @@ const ChipRoot = styled('div', {
       fontSize: theme.typography.pxToRem(10)
     },
     [`& .${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' && {
@@ -142,35 +143,35 @@ const ChipRoot = styled('div', {
     }),
     [`& .${chipClasses.deleteIcon}`]: _extends({
       WebkitTapHighlightColor: 'transparent',
-      color: deleteIconColor,
+      color: theme.vars ? `rgba(${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(${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(${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
       }
     })
   }, 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 && {
     [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${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' && {
     [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: theme.palette[ownerState.color].dark
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
   });
 }, ({
@@ -181,29 +182,29 @@ const 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(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
   },
   [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   },
   '&:active': {
-    boxShadow: theme.shadows[1]
+    boxShadow: (theme.vars || theme).shadows[1]
   }
 }, ownerState.clickable && ownerState.color !== 'default' && {
   [`&:hover, &.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.palette[ownerState.color].dark
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
   }
 }), ({
   theme,
   ownerState
 }) => _extends({}, ownerState.variant === 'outlined' && {
   backgroundColor: 'transparent',
-  border: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+  border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
   [`&.${chipClasses.clickable}:hover`]: {
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: (theme.vars || theme).palette.action.hover
   },
   [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`& .${chipClasses.avatar}`]: {
     marginLeft: 4
@@ -224,18 +225,18 @@ const ChipRoot = styled('div', {
     marginRight: 3
   }
 }, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
-  color: theme.palette[ownerState.color].main,
-  border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.7)}`,
+  color: (theme.vars || theme).palette[ownerState.color].main,
+  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
   [`&.${chipClasses.clickable}:hover`]: {
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
   },
   [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
   },
   [`& .${chipClasses.deleteIcon}`]: {
-    color: alpha(theme.palette[ownerState.color].main, 0.7),
+    color: theme.vars ? `rgba(${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
     }
   }
 }));

package/modern/Dialog/Dialog.js

@@ -125,7 +125,7 @@ const DialogPaper = styled(Paper, {
       maxWidth: 'calc(100% - 64px)'
     }
   }
-}, ownerState.maxWidth !== 'xs' && {
+}, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
   maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,
   [`&.${dialogClasses.paperScrollBody}`]: {
     [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {
@@ -226,12 +226,16 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   }, [ariaLabelledby]);
   return /*#__PURE__*/_jsx(DialogRoot, _extends({
     className: clsx(classes.root, className),
-    BackdropProps: _extends({
-      transitionDuration,
-      as: BackdropComponent
-    }, BackdropProps),
     closeAfterTransition: true,
-    BackdropComponent: DialogBackdrop,
+    components: {
+      Backdrop: DialogBackdrop
+    },
+    componentsProps: {
+      backdrop: _extends({
+        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/modern/FilledInput/FilledInput.js

@@ -42,31 +42,33 @@ const FilledInputRoot = styled(InputBaseRoot, {
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
+  const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
+  const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
   return _extends({
     position: 'relative',
-    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: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
       }
     },
     [`&.${filledInputClasses.focused}`]: {
-      backgroundColor
+      backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
     },
     [`&.${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
     }
   }, !ownerState.disableUnderline && {
     '&:after': {
-      borderBottom: `2px solid ${theme.palette[ownerState.color || 'primary']?.main}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color || 'primary']?.main}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -87,12 +89,12 @@ const FilledInputRoot = styled(InputBaseRoot, {
       transform: 'scaleX(1) translateX(0)'
     },
     [`&.${filledInputClasses.error}:after`]: {
-      borderBottomColor: theme.palette.error.main,
+      borderBottomColor: (theme.vars || theme).palette.error.main,
       transform: 'scaleX(1)' // error is always underlined in red
 
     },
     '&:before': {
-      borderBottom: `1px solid ${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
@@ -106,7 +108,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
 
     },
     [`&:hover:not(.${filledInputClasses.disabled}):before`]: {
-      borderBottom: `1px solid ${theme.palette.text.primary}`
+      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
     },
     [`&.${filledInputClasses.disabled}:before`]: {
       borderBottomStyle: 'dotted'
@@ -136,7 +138,8 @@ const 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',
@@ -144,6 +147,18 @@ const FilledInputInput = styled(InputBaseInput, {
     borderTopLeftRadius: 'inherit',
     borderTopRightRadius: 'inherit'
   }
+}, theme.vars && {
+  '&:-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

package/modern/Grid/Grid.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "lg", "md", "rowSpacing", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"];
+const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
 // A grid component using the following libs as inspiration.
 //
 // For the implementation:
@@ -19,6 +19,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";
@@ -201,26 +202,27 @@ export function generateColumnGap({
 
   return styles;
 }
-export function resolveSpacingClasses(spacing, container, styles = {}) {
-  // in case of grid item or undefined/null or `spacing` <= 0
-  if (!container || !spacing || spacing <= 0) {
+export function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
+  // 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-${String(spacing)}`] || `spacing-xs-${String(spacing)}`];
+    return [styles[`spacing-xs-${String(spacing)}`]];
   } // in case of object `spacing`
 
 
-  const {
-    xs,
-    sm,
-    md,
-    lg,
-    xl
-  } = spacing;
-  return [Number(xs) > 0 && (styles[`spacing-xs-${String(xs)}`] || `spacing-xs-${String(xs)}`), Number(sm) > 0 && (styles[`spacing-sm-${String(sm)}`] || `spacing-sm-${String(sm)}`), Number(md) > 0 && (styles[`spacing-md-${String(md)}`] || `spacing-md-${String(md)}`), Number(lg) > 0 && (styles[`spacing-lg-${String(lg)}`] || `spacing-lg-${String(lg)}`), Number(xl) > 0 && (styles[`spacing-xl-${String(xl)}`] || `spacing-xl-${String(xl)}`)];
+  const spacingStyles = [];
+  breakpoints.forEach(breakpoint => {
+    const value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
+    }
+  });
+  return spacingStyles;
 } // Default CSS values
 // flex: '0 1 auto',
 // flexDirection: 'row',
@@ -232,20 +234,33 @@ const GridRoot = styled('div', {
   name: 'MuiGrid',
   slot: 'Root',
   overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
     const {
       container,
       direction,
       item,
-      lg,
-      md,
-      sm,
       spacing,
       wrap,
-      xl,
-      xs,
-      zeroMinWidth
-    } = props.ownerState;
-    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...resolveSpacingClasses(spacing, container, styles), direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], xs !== false && styles[`grid-xs-${String(xs)}`], sm !== false && styles[`grid-sm-${String(sm)}`], md !== false && styles[`grid-md-${String(md)}`], lg !== false && styles[`grid-lg-${String(lg)}`], xl !== false && styles[`grid-xl-${String(xl)}`]];
+      zeroMinWidth,
+      breakpoints
+    } = ownerState;
+    let spacingStyles = []; // in case of grid item
+
+    if (container) {
+      spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
+    }
+
+    const breakpointsStyles = [];
+    breakpoints.forEach(breakpoint => {
+      const value = ownerState[breakpoint];
+
+      if (value) {
+        breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
+      }
+    });
+    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...spacingStyles, direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], ...breakpointsStyles];
   }
 })(({
   ownerState
@@ -263,6 +278,29 @@ const GridRoot = styled('div', {
 }, ownerState.wrap !== 'wrap' && {
   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-${String(spacing)}`];
+  } // in case of object `spacing`
+
+
+  const classes = [];
+  breakpoints.forEach(breakpoint => {
+    const value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      const className = `spacing-${breakpoint}-${String(value)}`;
+      classes.push(className);
+    }
+  });
+  return classes;
+}
 
 const useUtilityClasses = ownerState => {
   const {
@@ -270,17 +308,27 @@ const useUtilityClasses = ownerState => {
     container,
     direction,
     item,
-    lg,
-    md,
-    sm,
     spacing,
     wrap,
-    xl,
-    xs,
-    zeroMinWidth
+    zeroMinWidth,
+    breakpoints
   } = ownerState;
+  let spacingClasses = []; // in case of grid item
+
+  if (container) {
+    spacingClasses = resolveSpacingClasses(spacing, breakpoints);
+  }
+
+  const breakpointsClasses = [];
+  breakpoints.forEach(breakpoint => {
+    const value = ownerState[breakpoint];
+
+    if (value) {
+      breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
+    }
+  });
   const slots = {
-    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...resolveSpacingClasses(spacing, container), direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
+    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...spacingClasses, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...breakpointsClasses]
   };
   return composeClasses(slots, getGridUtilityClass, classes);
 };
@@ -290,6 +338,9 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     props: inProps,
     name: 'MuiGrid'
   });
+  const {
+    breakpoints
+  } = useTheme();
   const props = extendSxProp(themeProps);
 
   const {
@@ -300,14 +351,9 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     container = false,
     direction = 'row',
     item = false,
-    lg = false,
-    md = false,
     rowSpacing: rowSpacingProp,
-    sm = false,
     spacing = 0,
     wrap = 'wrap',
-    xl = false,
-    xs = false,
     zeroMinWidth = false
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -317,21 +363,29 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   const columnsContext = React.useContext(GridContext); // columns set with default breakpoint unit of 12
 
   const columns = container ? columnsProp || 12 : columnsContext;
+  const breakpointsValues = {};
+
+  const otherFiltered = _extends({}, other);
+
+  breakpoints.keys.forEach(breakpoint => {
+    if (other[breakpoint] != null) {
+      breakpointsValues[breakpoint] = other[breakpoint];
+      delete otherFiltered[breakpoint];
+    }
+  });
 
   const ownerState = _extends({}, props, {
     columns,
     container,
     direction,
     item,
-    lg,
-    md,
-    sm,
     rowSpacing,
     columnSpacing,
     wrap,
-    xl,
-    xs,
-    zeroMinWidth
+    zeroMinWidth,
+    spacing
+  }, breakpointsValues, {
+    breakpoints: breakpoints.keys
   });
 
   const classes = useUtilityClasses(ownerState);
@@ -342,7 +396,7 @@ const 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

package/modern/Grow/Grow.js

@@ -27,10 +27,9 @@ const styles = {
 /*
  TODO v6: remove
  Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
- Remove this workaround once the WebKit bug fix is released.
  */
 
-const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
 /**
  * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
  * [Popover](/material-ui/react-popover/) components.

package/modern/Hidden/withWidth.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getDisplayName } from '@mui/utils';
 import { getThemeProps } from '@mui/system';
-import hoistNonReactStatics from 'hoist-non-react-statics';
 import useTheme from '../styles/useTheme';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
 import useMediaQuery from '../useMediaQuery';
@@ -113,7 +112,6 @@ const withWidth = (options = {}) => Component => {
     WithWidth.displayName = `WithWidth(${getDisplayName(Component)})`;
   }
 
-  hoistNonReactStatics(WithWidth, Component);
   return WithWidth;
 };
 

package/modern/Input/Input.js

@@ -43,7 +43,7 @@ const InputRoot = styled(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 _extends({

package/modern/InputBase/InputBase.js

@@ -97,7 +97,7 @@ export const InputBaseComponent = styled('input', {
   const placeholder = _extends({
     color: 'currentColor'
   }, theme.vars ? {
-    opacity: theme.vars.opacity.placeholder
+    opacity: theme.vars.opacity.inputPlaceholder
   } : {
     opacity: light ? 0.42 : 0.5
   }, {
@@ -110,7 +110,7 @@ export const InputBaseComponent = styled('input', {
     opacity: '0 !important'
   };
   const placeholderVisible = theme.vars ? {
-    opacity: theme.vars.opacity.placeholder
+    opacity: theme.vars.opacity.inputPlaceholder
   } : {
     opacity: light ? 0.42 : 0.5
   };

package/modern/LinearProgress/LinearProgress.js

@@ -84,6 +84,10 @@ const getColorShade = (theme, color) => {
     return 'currentColor';
   }
 
+  if (theme.vars) {
+    return theme.vars.palette.LinearProgress[`${color}Bg`];
+  }
+
   return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5);
 };
 
@@ -176,7 +180,7 @@ const LinearProgressBar1 = styled('span', {
   top: 0,
   transition: 'transform 0.2s linear',
   transformOrigin: 'left',
-  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main
+  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
 }, ownerState.variant === 'determinate' && {
   transition: `transform .${TRANSITION_DURATION}s linear`
 }, ownerState.variant === 'buffer' && {
@@ -209,7 +213,7 @@ const LinearProgressBar2 = styled('span', {
   transition: 'transform 0.2s linear',
   transformOrigin: 'left'
 }, ownerState.variant !== 'buffer' && {
-  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main
+  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
 }, ownerState.color === 'inherit' && {
   opacity: 0.3
 }, ownerState.variant === 'buffer' && {