@mui/material 5.8.3 → 5.8.6

package/legacy/Grow/Grow.js

@@ -26,10 +26,9 @@ var 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.
  */
 
-var isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+var 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/legacy/Hidden/withWidth.js

@@ -4,7 +4,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';
@@ -119,7 +118,6 @@ var withWidth = function withWidth() {
       WithWidth.displayName = "WithWidth(".concat(getDisplayName(Component), ")");
     }
 
-    hoistNonReactStatics(WithWidth, Component);
     return WithWidth;
   };
 };

package/legacy/Input/Input.js

@@ -43,7 +43,7 @@ var InputRoot = styled(InputBaseRoot, {
   var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
   if (theme.vars) {
-    bottomLineColor = "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputTouchBottomLine, ")");
+    bottomLineColor = "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputUnderline, ")");
   }
 
   return _extends({

package/legacy/InputBase/InputBase.js

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

package/legacy/LinearProgress/LinearProgress.js

@@ -40,6 +40,10 @@ var getColorShade = function getColorShade(theme, color) {
     return 'currentColor';
   }
 
+  if (theme.vars) {
+    return theme.vars.palette.LinearProgress["".concat(color, "Bg")];
+  }
+
   return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5);
 };
 
@@ -124,7 +128,7 @@ var 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 .".concat(TRANSITION_DURATION, "s linear")
   }, ownerState.variant === 'buffer' && {
@@ -154,7 +158,7 @@ var 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' && {

package/legacy/Link/Link.js

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { elementTypeAcceptingRef } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -15,18 +14,8 @@ import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
+import getTextDecoration, { colorTransformations } from './getTextDecoration';
 import { jsx as _jsx } from "react/jsx-runtime";
-var colorTransformations = {
-  primary: 'primary.main',
-  textPrimary: 'text.primary',
-  secondary: 'secondary.main',
-  textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-
-var transformDeprecatedColors = function transformDeprecatedColors(color) {
-  return colorTransformations[color] || color;
-};
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
@@ -49,7 +38,6 @@ var LinkRoot = styled(Typography, {
 })(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
-  var color = getPath(theme, "palette.".concat(transformDeprecatedColors(ownerState.color))) || ownerState.color;
   return _extends({}, ownerState.underline === 'none' && {
     textDecoration: 'none'
   }, ownerState.underline === 'hover' && {
@@ -57,13 +45,18 @@ var LinkRoot = styled(Typography, {
     '&:hover': {
       textDecoration: 'underline'
     }
-  }, ownerState.underline === 'always' && {
-    textDecoration: 'underline',
-    textDecorationColor: color !== 'inherit' ? alpha(color, 0.4) : undefined,
+  }, ownerState.underline === 'always' && _extends({
+    textDecoration: 'underline'
+  }, ownerState.color !== 'inherit' && {
+    textDecorationColor: getTextDecoration({
+      theme: theme,
+      ownerState: ownerState
+    })
+  }, {
     '&:hover': {
       textDecorationColor: 'inherit'
     }
-  }, ownerState.component === 'button' && _defineProperty({
+  }), ownerState.component === 'button' && _defineProperty({
     position: 'relative',
     WebkitTapHighlightColor: 'transparent',
     backgroundColor: 'transparent',

package/legacy/Link/getTextDecoration.js

@@ -0,0 +1,28 @@
+import { alpha, getPath } from '@mui/system';
+export var colorTransformations = {
+  primary: 'primary.main',
+  textPrimary: 'text.primary',
+  secondary: 'secondary.main',
+  textSecondary: 'text.secondary',
+  error: 'error.main'
+};
+
+var transformDeprecatedColors = function transformDeprecatedColors(color) {
+  return colorTransformations[color] || color;
+};
+
+var getTextDecoration = function getTextDecoration(_ref) {
+  var theme = _ref.theme,
+      ownerState = _ref.ownerState;
+  var transformedColor = transformDeprecatedColors(ownerState.color);
+  var color = getPath(theme, "palette.".concat(transformedColor), false) || ownerState.color;
+  var channelColor = getPath(theme, "palette.".concat(transformedColor, "Channel"));
+
+  if ('vars' in theme && channelColor) {
+    return "rgba(".concat(channelColor, " / 0.4)");
+  }
+
+  return alpha(color, 0.4);
+};
+
+export default getTextDecoration;

package/legacy/Modal/Modal.js

@@ -60,7 +60,7 @@ var ModalBackdrop = styled(Backdrop, {
  */
 
 var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _componentsProps$root;
+  var _ref2, _components$Root;
 
   var props = useThemeProps({
     name: 'MuiModal',
@@ -69,9 +69,11 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
 
   var _props$BackdropCompon = props.BackdropComponent,
       BackdropComponent = _props$BackdropCompon === void 0 ? ModalBackdrop : _props$BackdropCompon,
+      BackdropProps = props.BackdropProps,
       _props$closeAfterTran = props.closeAfterTransition,
       closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
       children = props.children,
+      component = props.component,
       _props$components = props.components,
       components = _props$components === void 0 ? {} : _props$components,
       _props$componentsProp = props.componentsProps,
@@ -92,7 +94,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
       _props$keepMounted = props.keepMounted,
       keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
-      other = _objectWithoutProperties(props, ["BackdropComponent", "closeAfterTransition", "children", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted"]);
+      theme = props.theme,
+      other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"]);
 
   var _React$useState = React.useState(true),
       exited = _React$useState[0],
@@ -115,16 +118,19 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   });
 
   var classes = extendUtilityClasses(ownerState);
+  var Root = (_ref2 = (_components$Root = components.Root) != null ? _components$Root : component) != null ? _ref2 : ModalRoot;
   return /*#__PURE__*/_jsx(ModalUnstyled, _extends({
     components: _extends({
-      Root: ModalRoot
+      Root: Root,
+      Backdrop: BackdropComponent
     }, components),
     componentsProps: {
-      root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
-        ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-      })
+      root: _extends({}, componentsProps.root, !isHostComponent(Root) && {
+        as: component,
+        theme: theme
+      }),
+      backdrop: _extends({}, BackdropProps, componentsProps.backdrop)
     },
-    BackdropComponent: BackdropComponent,
     onTransitionEnter: function onTransitionEnter() {
       return setExited(false);
     },
@@ -148,6 +154,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `components.Backdrop` instead.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -162,6 +169,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `componentsProps.backdrop` instead.
    */
   BackdropProps: PropTypes.object,
 
@@ -181,12 +189,19 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   closeAfterTransition: PropTypes.bool,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * The components used for each slot inside the Modal.
    * Either a string to use a HTML element or a component.
    * @default {}
    */
   components: PropTypes.shape({
+    Backdrop: PropTypes.elementType,
     Root: PropTypes.elementType
   }),
 
@@ -195,6 +210,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
+    backdrop: PropTypes.object,
     root: PropTypes.object
   }),
 

package/legacy/OutlinedInput/OutlinedInput.js

@@ -41,18 +41,18 @@ var OutlinedInputRoot = styled(InputBaseRoot, {
   var borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
   return _extends((_extends2 = {
     position: 'relative',
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, _defineProperty(_extends2, "&:hover .".concat(outlinedInputClasses.notchedOutline), {
-    borderColor: theme.palette.text.primary
+    borderColor: (theme.vars || theme).palette.text.primary
   }), _defineProperty(_extends2, '@media (hover: none)', _defineProperty({}, "&:hover .".concat(outlinedInputClasses.notchedOutline), {
-    borderColor: borderColor
+    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : borderColor
   })), _defineProperty(_extends2, "&.".concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline), {
-    borderColor: theme.palette[ownerState.color].main,
+    borderColor: (theme.vars || theme).palette[ownerState.color].main,
     borderWidth: 2
   }), _defineProperty(_extends2, "&.".concat(outlinedInputClasses.error, " .").concat(outlinedInputClasses.notchedOutline), {
-    borderColor: theme.palette.error.main
+    borderColor: (theme.vars || theme).palette.error.main
   }), _defineProperty(_extends2, "&.".concat(outlinedInputClasses.disabled, " .").concat(outlinedInputClasses.notchedOutline), {
-    borderColor: theme.palette.action.disabled
+    borderColor: (theme.vars || theme).palette.action.disabled
   }), _extends2), ownerState.startAdornment && {
     paddingLeft: 14
   }, ownerState.endAdornment && {
@@ -71,8 +71,9 @@ var NotchedOutlineRoot = styled(NotchedOutline, {
   }
 })(function (_ref2) {
   var theme = _ref2.theme;
+  var borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
   return {
-    borderColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : borderColor
   };
 });
 var OutlinedInputInput = styled(InputBaseInput, {
@@ -83,14 +84,25 @@ var OutlinedInputInput = styled(InputBaseInput, {
   var theme = _ref3.theme,
       ownerState = _ref3.ownerState;
   return _extends({
-    padding: '16.5px 14px',
+    padding: '16.5px 14px'
+  }, !theme.vars && {
     '&:-webkit-autofill': {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
       caretColor: theme.palette.mode === 'light' ? null : '#fff',
       borderRadius: 'inherit'
     }
-  }, ownerState.size === 'small' && {
+  }, theme.vars && _defineProperty({
+    '&:-webkit-autofill': {
+      borderRadius: 'inherit'
+    }
+  }, theme.getColorSchemeSelector('dark'), {
+    '&:-webkit-autofill': {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }
+  }), ownerState.size === 'small' && {
     padding: '8.5px 14px'
   }, ownerState.multiline && {
     padding: 0
@@ -129,6 +141,20 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     muiFormControl: muiFormControl,
     states: ['required']
   });
+
+  var ownerState = _extends({}, props, {
+    color: fcs.color || 'primary',
+    disabled: fcs.disabled,
+    error: fcs.error,
+    focused: fcs.focused,
+    formControl: muiFormControl,
+    fullWidth: fullWidth,
+    hiddenLabel: fcs.hiddenLabel,
+    multiline: multiline,
+    size: fcs.size,
+    type: type
+  });
+
   return /*#__PURE__*/_jsx(InputBase, _extends({
     components: _extends({
       Root: OutlinedInputRoot,
@@ -136,6 +162,7 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     }, components),
     renderSuffix: function renderSuffix(state) {
       return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
+        ownerState: ownerState,
         className: classes.notchedOutline,
         label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
           children: [label, "\xA0", '*']

package/legacy/Popover/index.js

@@ -1,3 +1,4 @@
 export { default } from './Popover';
+export * from './Popover';
 export { default as popoverClasses } from './popoverClasses';
 export * from './popoverClasses';

package/legacy/Skeleton/Skeleton.js

@@ -45,7 +45,7 @@ var SkeletonRoot = styled('span', {
   return _extends({
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
-    backgroundColor: alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
     height: '1.2em'
   }, ownerState.variant === 'text' && {
     marginTop: 0,
@@ -74,7 +74,7 @@ var SkeletonRoot = styled('span', {
 }, function (_ref3) {
   var ownerState = _ref3.ownerState,
       theme = _ref3.theme;
-  return ownerState.animation === 'wave' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n\n      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */\n      -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &::after {\n        animation: ", " 1.6s linear 0.5s infinite;\n        background: linear-gradient(90deg, transparent, ", ", transparent);\n        content: '';\n        position: absolute;\n        transform: translateX(-100%); /* Avoid flash during server-side hydration */\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n      }\n    "])), waveKeyframe, theme.palette.action.hover);
+  return ownerState.animation === 'wave' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n\n      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */\n      -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &::after {\n        animation: ", " 1.6s linear 0.5s infinite;\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n        content: '';\n        position: absolute;\n        transform: translateX(-100%); /* Avoid flash during server-side hydration */\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n      }\n    "])), waveKeyframe, (theme.vars || theme).palette.action.hover);
 });
 var Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
   var props = useThemeProps({

package/legacy/Slider/Slider.js

@@ -34,7 +34,7 @@ var SliderRoot = styled('span', {
     position: 'relative',
     cursor: 'pointer',
     touchAction: 'none',
-    color: theme.palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].main,
     WebkitTapHighlightColor: 'transparent'
   }, ownerState.orientation === 'horizontal' && _extends({
     height: 4,
@@ -69,7 +69,7 @@ var SliderRoot = styled('span', {
   }, _defineProperty(_extends2, "&.".concat(sliderClasses.disabled), {
     pointerEvents: 'none',
     cursor: 'default',
-    color: theme.palette.grey[400]
+    color: (theme.vars || theme).palette.grey[400]
   }), _defineProperty(_extends2, "&.".concat(sliderClasses.dragging), _defineProperty({}, "& .".concat(sliderClasses.thumb, ", & .").concat(sliderClasses.track), {
     transition: 'none'
   })), _extends2));
@@ -163,8 +163,8 @@ var SliderTrack = styled('span', {
   }, ownerState.track === false && {
     display: 'none'
   }, ownerState.track === 'inverted' && {
-    backgroundColor: color,
-    borderColor: color
+    backgroundColor: theme.vars ? theme.vars.palette.Slider["".concat(ownerState.color, "Track")] : color,
+    borderColor: theme.vars ? theme.vars.palette.Slider["".concat(ownerState.color, "Track")] : color
   });
 });
 process.env.NODE_ENV !== "production" ? SliderTrack.propTypes
@@ -223,7 +223,7 @@ var SliderThumb = styled('span', {
       borderRadius: 'inherit',
       width: '100%',
       height: '100%',
-      boxShadow: theme.shadows[2]
+      boxShadow: (theme.vars || theme).shadows[2]
     }, ownerState.size === 'small' && {
       boxShadow: 'none'
     }),
@@ -239,12 +239,12 @@ var SliderThumb = styled('span', {
       transform: 'translate(-50%, -50%)'
     }
   }, _defineProperty(_extends3, "&:hover, &.".concat(sliderClasses.focusVisible), {
-    boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette[ownerState.color].main, 0.16)),
+    boxShadow: "0px 0px 0px 8px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16)),
     '@media (hover: none)': {
       boxShadow: 'none'
     }
   }), _defineProperty(_extends3, "&.".concat(sliderClasses.active), {
-    boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette[ownerState.color].main, 0.16))
+    boxShadow: "0px 0px 0px 14px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16))
   }), _defineProperty(_extends3, "&.".concat(sliderClasses.disabled), {
     '&:hover': {
       boxShadow: 'none'
@@ -286,9 +286,9 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
-    backgroundColor: theme.palette.grey[600],
+    backgroundColor: (theme.vars || theme).palette.grey[600],
     borderRadius: 2,
-    color: theme.palette.common.white,
+    color: (theme.vars || theme).palette.common.white,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -363,7 +363,7 @@ var SliderMark = styled('span', {
     left: '50%',
     transform: 'translate(-50%, 1px)'
   }, markActive && {
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
     opacity: 0.8
   });
 });
@@ -395,7 +395,7 @@ var SliderMarkLabel = styled('span', {
       ownerState = _ref7.ownerState,
       markLabelActive = _ref7.markLabelActive;
   return _extends({}, theme.typography.body2, {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     position: 'absolute',
     whiteSpace: 'nowrap'
   }, ownerState.orientation === 'horizontal' && {
@@ -411,7 +411,7 @@ var SliderMarkLabel = styled('span', {
       left: 44
     }
   }, markLabelActive && {
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   });
 });
 process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes
@@ -590,22 +590,24 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    input: PropTypes.object,
-    mark: PropTypes.object,
-    markLabel: PropTypes.object,
-    rail: PropTypes.object,
-    root: PropTypes.object,
-    thumb: PropTypes.object,
-    track: PropTypes.object,
-    valueLabel: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      children: PropTypes.element,
       className: PropTypes.string,
       components: PropTypes.shape({
         Root: PropTypes.elementType
       }),
+      open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+      value: PropTypes.number,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
 
   /**

package/legacy/Snackbar/Snackbar.js

@@ -35,17 +35,11 @@ var SnackbarRoot = styled('div', {
 })(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
-
-  var center = _extends({}, !ownerState.isRtl && {
+  var center = {
     left: '50%',
     right: 'auto',
     transform: 'translateX(-50%)'
-  }, ownerState.isRtl && {
-    right: '50%',
-    left: 'auto',
-    transform: 'translateX(50%)'
-  });
-
+  };
   return _extends({
     zIndex: (theme.vars || theme).zIndex.snackbar,
     position: 'fixed',
@@ -66,19 +60,13 @@ var SnackbarRoot = styled('div', {
     top: 24
   } : {
     bottom: 24
-  }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && _extends({}, !ownerState.isRtl && {
+  }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
     left: 24,
     right: 'auto'
-  }, ownerState.isRtl && {
-    right: 24,
-    left: 'auto'
-  }), ownerState.anchorOrigin.horizontal === 'right' && _extends({}, !ownerState.isRtl && {
+  }, ownerState.anchorOrigin.horizontal === 'right' && {
     right: 24,
     left: 'auto'
-  }, ownerState.isRtl && {
-    left: 24,
-    right: 'auto'
-  }))));
+  })));
 });
 var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   var props = useThemeProps({
@@ -126,14 +114,11 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEnter", "onExited"]),
       other = _objectWithoutProperties(props, ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]);
 
-  var isRtl = theme.direction === 'rtl';
-
   var ownerState = _extends({}, props, {
     anchorOrigin: {
       vertical: vertical,
       horizontal: horizontal
-    },
-    isRtl: isRtl
+    }
   });
 
   var classes = useUtilityClasses(ownerState);

package/legacy/SnackbarContent/SnackbarContent.js

@@ -34,13 +34,13 @@ var SnackbarContentRoot = styled(Paper, {
   var emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
   var backgroundColor = emphasize(theme.palette.background.default, emphasis);
   return _extends({}, theme.typography.body2, _defineProperty({
-    color: theme.palette.getContrastText(backgroundColor),
-    backgroundColor: backgroundColor,
+    color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColor),
+    backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,
     display: 'flex',
     alignItems: 'center',
     flexWrap: 'wrap',
     padding: '6px 16px',
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     flexGrow: 1
   }, theme.breakpoints.up('sm'), {
     flexGrow: 'initial',

package/legacy/SpeedDialAction/SpeedDialAction.js

@@ -41,10 +41,10 @@ var SpeedDialActionFab = styled(Fab, {
       ownerState = _ref.ownerState;
   return _extends({
     margin: 8,
-    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.background.paper,
+    color: (theme.vars || theme).palette.text.secondary,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
     '&:hover': {
-      backgroundColor: emphasize(theme.palette.background.paper, 0.15)
+      backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : emphasize(theme.palette.background.paper, 0.15)
     },
     transition: "".concat(theme.transitions.create('transform', {
       duration: theme.transitions.duration.shorter
@@ -98,10 +98,10 @@ var SpeedDialActionStaticTooltipLabel = styled('span', {
   return _extends({
     position: 'absolute'
   }, theme.typography.body1, {
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[1],
-    color: theme.palette.text.secondary,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    boxShadow: (theme.vars || theme).shadows[1],
+    color: (theme.vars || theme).palette.text.secondary,
     padding: '4px 16px',
     wordBreak: 'keep-all'
   });

package/legacy/Stack/Stack.js

@@ -1,5 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -61,7 +62,7 @@ export var style = function style(_ref) {
   if (ownerState.spacing) {
     var transformer = createUnarySpacing(theme);
     var base = Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
-      if (ownerState.spacing[breakpoint] != null || ownerState.direction[breakpoint] != null) {
+      if (_typeof(ownerState.spacing) === 'object' && ownerState.spacing[breakpoint] != null || _typeof(ownerState.direction) === 'object' && ownerState.direction[breakpoint] != null) {
         acc[breakpoint] = true;
       }
 

package/legacy/StepConnector/StepConnector.js

@@ -57,9 +57,10 @@ var StepConnectorLine = styled('span', {
 })(function (_ref2) {
   var ownerState = _ref2.ownerState,
       theme = _ref2.theme;
+  var borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
   return _extends({
     display: 'block',
-    borderColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
+    borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor
   }, ownerState.orientation === 'horizontal' && {
     borderTopStyle: 'solid',
     borderTopWidth: 1