@mui/material 5.8.3 → 5.8.6

package/node/Link/Link.js

@@ -21,8 +21,6 @@ var _utils = require("@mui/utils");
 
 var _base = require("@mui/base");
 
-var _system = require("@mui/system");
-
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -37,6 +35,8 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 
 var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
 
+var _getTextDecoration = _interopRequireWildcard(require("./getTextDecoration"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
@@ -45,18 +45,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const colorTransformations = {
-  primary: 'primary.main',
-  textPrimary: 'text.primary',
-  secondary: 'secondary.main',
-  textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-
-const transformDeprecatedColors = color => {
-  return colorTransformations[color] || color;
-};
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -83,7 +71,6 @@ const LinkRoot = (0, _styled.default)(_Typography.default, {
   theme,
   ownerState
 }) => {
-  const color = (0, _system.getPath)(theme, `palette.${transformDeprecatedColors(ownerState.color)}`) || ownerState.color;
   return (0, _extends2.default)({}, ownerState.underline === 'none' && {
     textDecoration: 'none'
   }, ownerState.underline === 'hover' && {
@@ -91,13 +78,18 @@ const LinkRoot = (0, _styled.default)(_Typography.default, {
     '&:hover': {
       textDecoration: 'underline'
     }
-  }, ownerState.underline === 'always' && {
-    textDecoration: 'underline',
-    textDecorationColor: color !== 'inherit' ? (0, _system.alpha)(color, 0.4) : undefined,
+  }, ownerState.underline === 'always' && (0, _extends2.default)({
+    textDecoration: 'underline'
+  }, ownerState.color !== 'inherit' && {
+    textDecorationColor: (0, _getTextDecoration.default)({
+      theme,
+      ownerState
+    })
+  }, {
     '&:hover': {
       textDecorationColor: 'inherit'
     }
-  }, ownerState.component === 'button' && {
+  }), ownerState.component === 'button' && {
     position: 'relative',
     WebkitTapHighlightColor: 'transparent',
     backgroundColor: 'transparent',
@@ -194,7 +186,7 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     ref: handlerRef,
     ownerState: ownerState,
     variant: variant,
-    sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
+    sx: [...(!Object.keys(_getTextDecoration.colorTransformations).includes(color) ? [{
       color
     }] : []), ...(Array.isArray(sx) ? sx : [sx])]
   }, other));

package/node/Link/getTextDecoration.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.colorTransformations = void 0;
+
+var _system = require("@mui/system");
+
+const colorTransformations = {
+  primary: 'primary.main',
+  textPrimary: 'text.primary',
+  secondary: 'secondary.main',
+  textSecondary: 'text.secondary',
+  error: 'error.main'
+};
+exports.colorTransformations = colorTransformations;
+
+const transformDeprecatedColors = color => {
+  return colorTransformations[color] || color;
+};
+
+const getTextDecoration = ({
+  theme,
+  ownerState
+}) => {
+  const transformedColor = transformDeprecatedColors(ownerState.color);
+  const color = (0, _system.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = (0, _system.getPath)(theme, `palette.${transformedColor}Channel`);
+
+  if ('vars' in theme && channelColor) {
+    return `rgba(${channelColor} / 0.4)`;
+  }
+
+  return (0, _system.alpha)(color, 0.4);
+};
+
+var _default = getTextDecoration;
+exports.default = _default;

package/node/Modal/Modal.js

@@ -29,7 +29,7 @@ var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["BackdropComponent", "closeAfterTransition", "children", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted"];
+const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -88,7 +88,7 @@ const ModalBackdrop = (0, _styled.default)(_Backdrop.default, {
  */
 
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _componentsProps$root;
+  var _ref, _components$Root;
 
   const props = (0, _useThemeProps.default)({
     name: 'MuiModal',
@@ -96,8 +96,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   });
   const {
     BackdropComponent = ModalBackdrop,
+    BackdropProps,
     closeAfterTransition = false,
     children,
+    component,
     components = {},
     componentsProps = {},
     disableAutoFocus = false,
@@ -107,7 +109,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus = false,
     disableScrollLock = false,
     hideBackdrop = false,
-    keepMounted = false
+    keepMounted = false,
+    // eslint-disable-next-line react/prop-types
+    theme
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [exited, setExited] = React.useState(true);
@@ -126,16 +130,19 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     exited
   });
   const classes = extendUtilityClasses(ownerState);
+  const Root = (_ref = (_components$Root = components.Root) != null ? _components$Root : component) != null ? _ref : ModalRoot;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalUnstyled.default, (0, _extends2.default)({
     components: (0, _extends2.default)({
-      Root: ModalRoot
+      Root,
+      Backdrop: BackdropComponent
     }, components),
     componentsProps: {
-      root: (0, _extends2.default)({}, componentsProps.root, (!components.Root || !(0, _base.isHostComponent)(components.Root)) && {
-        ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-      })
+      root: (0, _extends2.default)({}, componentsProps.root, !(0, _base.isHostComponent)(Root) && {
+        as: component,
+        theme
+      }),
+      backdrop: (0, _extends2.default)({}, BackdropProps, componentsProps.backdrop)
     },
-    BackdropComponent: BackdropComponent,
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
     ref: ref
@@ -155,6 +162,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',
@@ -169,6 +177,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.default.object,
 
@@ -188,12 +197,19 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   closeAfterTransition: _propTypes.default.bool,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+
   /**
    * The components used for each slot inside the Modal.
    * Either a string to use a HTML element or a component.
    * @default {}
    */
   components: _propTypes.default.shape({
+    Backdrop: _propTypes.default.elementType,
     Root: _propTypes.default.elementType
   }),
 
@@ -202,6 +218,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.object,
     root: _propTypes.default.object
   }),
 

package/node/OutlinedInput/OutlinedInput.js

@@ -66,25 +66,25 @@ const OutlinedInputRoot = (0, _styled.default)(_InputBase.InputBaseRoot, {
   const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
   return (0, _extends2.default)({
     position: 'relative',
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: theme.palette.text.primary
+      borderColor: (theme.vars || theme).palette.text.primary
     },
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
-        borderColor
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
       }
     },
     [`&.${_outlinedInputClasses.default.focused} .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: theme.palette[ownerState.color].main,
+      borderColor: (theme.vars || theme).palette[ownerState.color].main,
       borderWidth: 2
     },
     [`&.${_outlinedInputClasses.default.error} .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: theme.palette.error.main
+      borderColor: (theme.vars || theme).palette.error.main
     },
     [`&.${_outlinedInputClasses.default.disabled} .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: theme.palette.action.disabled
+      borderColor: (theme.vars || theme).palette.action.disabled
     }
   }, ownerState.startAdornment && {
     paddingLeft: 14
@@ -102,9 +102,12 @@ const NotchedOutlineRoot = (0, _styled.default)(_NotchedOutline.default, {
   overridesResolver: (props, styles) => styles.notchedOutline
 })(({
   theme
-}) => ({
-  borderColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-}));
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return {
+    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+  };
+});
 const OutlinedInputInput = (0, _styled.default)(_InputBase.InputBaseComponent, {
   name: 'MuiOutlinedInput',
   slot: 'Input',
@@ -113,13 +116,25 @@ const OutlinedInputInput = (0, _styled.default)(_InputBase.InputBaseComponent, {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  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'
   }
+}, theme.vars && {
+  '&:-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 && {
@@ -153,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/Popover/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,7 +19,19 @@ Object.defineProperty(exports, "popoverClasses", {
   }
 });
 
-var _Popover = _interopRequireDefault(require("./Popover"));
+var _Popover = _interopRequireWildcard(require("./Popover"));
+
+Object.keys(_Popover).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Popover[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Popover[key];
+    }
+  });
+});
 
 var _popoverClasses = _interopRequireWildcard(require("./popoverClasses"));
 

package/node/Skeleton/Skeleton.js

@@ -97,7 +97,7 @@ const SkeletonRoot = (0, _styled.default)('span', {
   return (0, _extends2.default)({
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
-    backgroundColor: (0, _styles.alpha)(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
     height: '1.2em'
   }, ownerState.variant === 'text' && {
     marginTop: 0,
@@ -136,7 +136,12 @@ const SkeletonRoot = (0, _styled.default)('span', {
 
       &::after {
         animation: ${waveKeyframe} 1.6s linear 0.5s infinite;
-        background: linear-gradient(90deg, transparent, ${theme.palette.action.hover}, transparent);
+        background: linear-gradient(
+          90deg,
+          transparent,
+          ${(theme.vars || theme).palette.action.hover},
+          transparent
+        );
         content: '';
         position: absolute;
         transform: translateX(-100%); /* Avoid flash during server-side hydration */

package/node/Slider/Slider.js

@@ -64,7 +64,7 @@ const SliderRoot = (0, _styled.default)('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' && (0, _extends2.default)({
   height: 4,
@@ -99,7 +99,7 @@ const SliderRoot = (0, _styled.default)('span', {
   [`&.${sliderClasses.disabled}`]: {
     pointerEvents: 'none',
     cursor: 'default',
-    color: theme.palette.grey[400]
+    color: (theme.vars || theme).palette.grey[400]
   },
   [`&.${sliderClasses.dragging}`]: {
     [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
@@ -192,8 +192,8 @@ const SliderTrack = (0, _styled.default)('span', {
   }, ownerState.track === false && {
     display: 'none'
   }, ownerState.track === 'inverted' && {
-    backgroundColor: color,
-    borderColor: color
+    backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
+    borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
   });
 });
 exports.SliderTrack = SliderTrack;
@@ -252,7 +252,7 @@ const SliderThumb = (0, _styled.default)('span', {
     borderRadius: 'inherit',
     width: '100%',
     height: '100%',
-    boxShadow: theme.shadows[2]
+    boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.size === 'small' && {
     boxShadow: 'none'
   }),
@@ -268,13 +268,13 @@ const SliderThumb = (0, _styled.default)('span', {
     transform: 'translate(-50%, -50%)'
   },
   [`&:hover, &.${sliderClasses.focusVisible}`]: {
-    boxShadow: `0px 0px 0px 8px ${(0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
+    boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
     '@media (hover: none)': {
       boxShadow: 'none'
     }
   },
   [`&.${sliderClasses.active}`]: {
-    boxShadow: `0px 0px 0px 14px ${(0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`
+    boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`
   },
   [`&.${sliderClasses.disabled}`]: {
     '&:hover': {
@@ -317,9 +317,9 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   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',
@@ -389,7 +389,7 @@ const SliderMark = (0, _styled.default)('span', {
   left: '50%',
   transform: 'translate(-50%, 1px)'
 }, markActive && {
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   opacity: 0.8
 }));
 exports.SliderMark = SliderMark;
@@ -416,7 +416,7 @@ const SliderMarkLabel = (0, _styled.default)('span', {
   ownerState,
   markLabelActive
 }) => (0, _extends2.default)({}, theme.typography.body2, {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   position: 'absolute',
   whiteSpace: 'nowrap'
 }, ownerState.orientation === 'horizontal' && {
@@ -432,7 +432,7 @@ const SliderMarkLabel = (0, _styled.default)('span', {
     left: 44
   }
 }, markLabelActive && {
-  color: theme.palette.text.primary
+  color: (theme.vars || theme).palette.text.primary
 }));
 exports.SliderMarkLabel = SliderMarkLabel;
 process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes
@@ -606,22 +606,24 @@ 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({
         Root: _propTypes.default.elementType
       }),
+      open: _propTypes.default.bool,
       style: _propTypes.default.object,
-      value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
+      value: _propTypes.default.number,
       valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
 
   /**

package/node/Snackbar/Snackbar.js

@@ -70,15 +70,11 @@ const SnackbarRoot = (0, _styled.default)('div', {
   theme,
   ownerState
 }) => {
-  const center = (0, _extends2.default)({}, !ownerState.isRtl && {
+  const center = {
     left: '50%',
     right: 'auto',
     transform: 'translateX(-50%)'
-  }, ownerState.isRtl && {
-    right: '50%',
-    left: 'auto',
-    transform: 'translateX(50%)'
-  });
+  };
   return (0, _extends2.default)({
     zIndex: (theme.vars || theme).zIndex.snackbar,
     position: 'fixed',
@@ -100,19 +96,13 @@ const SnackbarRoot = (0, _styled.default)('div', {
       top: 24
     } : {
       bottom: 24
-    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && (0, _extends2.default)({}, !ownerState.isRtl && {
+    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
       left: 24,
       right: 'auto'
-    }, ownerState.isRtl && {
+    }, ownerState.anchorOrigin.horizontal === 'right' && {
       right: 24,
       left: 'auto'
-    }), ownerState.anchorOrigin.horizontal === 'right' && (0, _extends2.default)({}, !ownerState.isRtl && {
-      right: 24,
-      left: 'auto'
-    }, ownerState.isRtl && {
-      left: 24,
-      right: 'auto'
-    }))
+    })
   });
 });
 const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
@@ -157,13 +147,11 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   } = props,
         TransitionProps = (0, _objectWithoutPropertiesLoose2.default)(props.TransitionProps, _excluded),
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
-  const isRtl = theme.direction === 'rtl';
   const ownerState = (0, _extends2.default)({}, props, {
     anchorOrigin: {
       vertical,
       horizontal
-    },
-    isRtl
+    }
   });
   const classes = useUtilityClasses(ownerState);
   const timerAutoHide = React.useRef();

package/node/SnackbarContent/SnackbarContent.js

@@ -59,13 +59,13 @@ 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.palette.getContrastText(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/node/SpeedDialAction/SpeedDialAction.js

@@ -70,10 +70,10 @@ const SpeedDialActionFab = (0, _styled.default)(_Fab.default, {
   ownerState
 }) => (0, _extends2.default)({
   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: (0, _system.emphasize)(theme.palette.background.paper, 0.15)
+    backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : (0, _system.emphasize)(theme.palette.background.paper, 0.15)
   },
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter
@@ -126,10 +126,10 @@ const SpeedDialActionStaticTooltipLabel = (0, _styled.default)('span', {
 }) => (0, _extends2.default)({
   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/node/Stack/Stack.js

@@ -80,7 +80,7 @@ const style = ({
   if (ownerState.spacing) {
     const transformer = (0, _system.createUnarySpacing)(theme);
     const base = Object.keys(theme.breakpoints.values).reduce((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/node/StepConnector/StepConnector.js

@@ -89,17 +89,20 @@ const StepConnectorLine = (0, _styled.default)('span', {
 })(({
   ownerState,
   theme
-}) => (0, _extends2.default)({
-  display: 'block',
-  borderColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-}, ownerState.orientation === 'horizontal' && {
-  borderTopStyle: 'solid',
-  borderTopWidth: 1
-}, ownerState.orientation === 'vertical' && {
-  borderLeftStyle: 'solid',
-  borderLeftWidth: 1,
-  minHeight: 24
-}));
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
+  return (0, _extends2.default)({
+    display: 'block',
+    borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor
+  }, ownerState.orientation === 'horizontal' && {
+    borderTopStyle: 'solid',
+    borderTopWidth: 1
+  }, ownerState.orientation === 'vertical' && {
+    borderLeftStyle: 'solid',
+    borderLeftWidth: 1,
+    minHeight: 24
+  });
+});
 const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inProps, ref) {
   const props = (0, _useThemeProps.default)({
     props: inProps,

package/node/StepContent/StepContent.js

@@ -69,7 +69,7 @@ const StepContentRoot = (0, _styled.default)('div', {
   paddingLeft: 8 + 12,
   // margin + half icon
   paddingRight: 8,
-  borderLeft: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
+  borderLeft: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
 }, ownerState.last && {
   borderLeft: 'none'
 }));