@mui/material 5.6.3 → 5.8.0

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.3
+/** @license MUI v5.8.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Accordion/Accordion.js

@@ -59,7 +59,7 @@ var AccordionRoot = styled(Paper, {
       height: 1,
       content: '""',
       opacity: 1,
-      backgroundColor: theme.palette.divider,
+      backgroundColor: (theme.vars || theme).palette.divider,
       transition: theme.transitions.create(['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
@@ -83,7 +83,7 @@ var AccordionRoot = styled(Paper, {
       }
     }
   }), _defineProperty(_ref3, "&.".concat(accordionClasses.disabled), {
-    backgroundColor: theme.palette.action.disabledBackground
+    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
   }), _ref3;
 }, function (_ref4) {
   var theme = _ref4.theme,
@@ -91,12 +91,12 @@ var AccordionRoot = styled(Paper, {
   return _extends({}, !ownerState.square && {
     borderRadius: 0,
     '&:first-of-type': {
-      borderTopLeftRadius: theme.shape.borderRadius,
-      borderTopRightRadius: theme.shape.borderRadius
+      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
     },
     '&:last-of-type': {
-      borderBottomLeftRadius: theme.shape.borderRadius,
-      borderBottomRightRadius: theme.shape.borderRadius,
+      borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
       // Fix a rendering issue on Edge
       '@supports (-ms-ime-align: auto)': {
         borderBottomLeftRadius: 0,

package/legacy/AccordionSummary/AccordionSummary.js

@@ -47,9 +47,9 @@ var AccordionSummaryRoot = styled(ButtonBase, {
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition)
   }, _defineProperty(_extends2, "&.".concat(accordionSummaryClasses.focusVisible), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_extends2, "&.".concat(accordionSummaryClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), _defineProperty(_extends2, "&:hover:not(.".concat(accordionSummaryClasses.disabled, ")"), {
     cursor: 'pointer'
   }), _extends2), !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
@@ -87,7 +87,7 @@ var AccordionSummaryExpandIconWrapper = styled('div', {
   var theme = _ref5.theme;
   return _defineProperty({
     display: 'flex',
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     transform: 'rotate(0deg)',
     transition: theme.transitions.create('transform', {
       duration: theme.transitions.duration.shortest

package/legacy/Autocomplete/Autocomplete.js

@@ -192,7 +192,7 @@ var AutocompletePopper = styled(Popper, {
   var theme = _ref10.theme,
       ownerState = _ref10.ownerState;
   return _extends({
-    zIndex: theme.zIndex.modal
+    zIndex: (theme.vars || theme).zIndex.modal
   }, ownerState.disablePortal && {
     position: 'absolute'
   });
@@ -218,7 +218,7 @@ var AutocompleteLoading = styled('div', {
 })(function (_ref12) {
   var theme = _ref12.theme;
   return {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     padding: '14px 16px'
   };
 });
@@ -231,7 +231,7 @@ var AutocompleteNoOptions = styled('div', {
 })(function (_ref13) {
   var theme = _ref13.theme;
   return {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     padding: '14px 16px'
   };
 });
@@ -268,26 +268,26 @@ var AutocompleteListbox = styled('div', {
   }, _defineProperty(_$concat4, theme.breakpoints.up('sm'), {
     minHeight: 'auto'
   }), _defineProperty(_$concat4, "&.".concat(autocompleteClasses.focused), {
-    backgroundColor: theme.palette.action.hover,
+    backgroundColor: (theme.vars || theme).palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
   }), _defineProperty(_$concat4, '&[aria-disabled="true"]', {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
     pointerEvents: 'none'
   }), _defineProperty(_$concat4, "&.".concat(autocompleteClasses.focusVisible), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_$concat4, '&[aria-selected="true"]', (_ariaSelectedTru = {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }, _defineProperty(_ariaSelectedTru, "&.".concat(autocompleteClasses.focused), {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: theme.palette.action.selected
+      backgroundColor: (theme.vars || theme).palette.action.selected
     }
   }), _defineProperty(_ariaSelectedTru, "&.".concat(autocompleteClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   }), _ariaSelectedTru)), _$concat4));
 });
 var AutocompleteGroupLabel = styled(ListSubheader, {
@@ -299,7 +299,7 @@ var AutocompleteGroupLabel = styled(ListSubheader, {
 })(function (_ref16) {
   var theme = _ref16.theme;
   return {
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
     top: -8
   };
 });
@@ -458,7 +458,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       groupedOptions = _useAutocomplete.groupedOptions;
 
   var hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
-  var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
+  var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false; // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
 
   var ownerState = _extends({}, props, {
     disablePortal: disablePortal,
@@ -483,7 +483,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     };
 
     if (renderTags) {
-      startAdornment = renderTags(value, getCustomizedTagProps);
+      startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
       startAdornment = value.map(function (option, index) {
         return /*#__PURE__*/_jsx(Chip, _extends({
@@ -558,10 +558,11 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
         fullWidth: true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
-        InputProps: {
+        InputProps: _extends({
           ref: setAnchorEl,
           className: classes.inputRoot,
-          startAdornment: startAdornment,
+          startAdornment: startAdornment
+        }, (hasClearIcon || hasPopupIcon) && {
           endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
             className: classes.endAdornment,
             ownerState: ownerState,
@@ -581,7 +582,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
               children: popupIcon
             })) : null]
           })
-        },
+        }),
         inputProps: _extends({
           className: clsx(classes.input),
           disabled: disabled,
@@ -1067,6 +1068,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    *
    * @param {T[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
+   * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}
    */
   renderTags: PropTypes.func,

package/legacy/AvatarGroup/AvatarGroup.js

@@ -37,7 +37,7 @@ var AvatarGroupRoot = styled('div', {
 
   var theme = _ref.theme;
   return _ref2 = {}, _defineProperty(_ref2, "& .".concat(avatarClasses.root), {
-    border: "2px solid ".concat(theme.palette.background.default),
+    border: "2px solid ".concat((theme.vars || theme).palette.background.default),
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -54,7 +54,7 @@ var AvatarGroupAvatar = styled(Avatar, {
 })(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    border: "2px solid ".concat(theme.palette.background.default),
+    border: "2px solid ".concat((theme.vars || theme).palette.background.default),
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {

package/legacy/Badge/Badge.js

@@ -78,8 +78,8 @@ var BadgeBadge = styled('span', {
       duration: theme.transitions.duration.enteringScreen
     })
   }, 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.variant === 'dot' && {
     borderRadius: RADIUS_DOT,
     height: RADIUS_DOT * 2,

package/legacy/BottomNavigation/BottomNavigation.js

@@ -30,7 +30,7 @@ var BottomNavigationRoot = styled('div', {
     display: 'flex',
     justifyContent: 'center',
     height: 56,
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   };
 });
 var BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {

package/legacy/BottomNavigationAction/BottomNavigationAction.js

@@ -41,7 +41,7 @@ var BottomNavigationActionRoot = styled(ButtonBase, {
     padding: '0px 12px',
     minWidth: 80,
     maxWidth: 168,
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     flexDirection: 'column',
     flex: '1'
   }, !ownerState.showLabel && !ownerState.selected && {
@@ -49,7 +49,7 @@ var BottomNavigationActionRoot = styled(ButtonBase, {
   }, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
     paddingTop: 0
   }, _defineProperty({}, "&.".concat(bottomNavigationActionClasses.selected), {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }));
 });
 var BottomNavigationActionLabel = styled('span', {

package/legacy/Box/Box.js

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import { createBox } from '@mui/system';
+import PropTypes from 'prop-types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 var defaultTheme = createTheme();

package/legacy/ButtonGroup/ButtonGroup.js

@@ -42,9 +42,9 @@ var ButtonGroupRoot = styled('div', {
       ownerState = _ref6.ownerState;
   return _extends({
     display: 'inline-flex',
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[2]
+    boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.disableElevation && {
     boxShadow: 'none'
   }, ownerState.fullWidth && {
@@ -71,25 +71,25 @@ var ButtonGroupRoot = styled('div', {
       borderBottomRightRadius: 0,
       borderBottomLeftRadius: 0
     }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-      borderRight: "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+      borderRight: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
     }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-      borderBottom: "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+      borderBottom: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
     }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      borderColor: alpha(theme.palette[ownerState.color].main, 0.5)
+      borderColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : alpha(theme.palette[ownerState.color].main, 0.5)
     }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
       borderRightColor: 'transparent'
     }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
       borderBottomColor: 'transparent'
     }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && _defineProperty({
-      borderRight: "1px solid ".concat(theme.palette.grey[400])
+      borderRight: "1px solid ".concat((theme.vars || theme).palette.grey[400])
     }, "&.".concat(buttonGroupClasses.disabled), {
-      borderRight: "1px solid ".concat(theme.palette.action.disabled)
+      borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
     }), ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && _defineProperty({
-      borderBottom: "1px solid ".concat(theme.palette.grey[400])
+      borderBottom: "1px solid ".concat((theme.vars || theme).palette.grey[400])
     }, "&.".concat(buttonGroupClasses.disabled), {
-      borderBottom: "1px solid ".concat(theme.palette.action.disabled)
+      borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
     }), ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      borderColor: theme.palette[ownerState.color].dark
+      borderColor: (theme.vars || theme).palette[ownerState.color].dark
     }, {
       '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
         borderRightColor: 'currentColor'

package/legacy/CardActionArea/CardActionArea.js

@@ -36,12 +36,12 @@ var CardActionAreaRoot = styled(ButtonBase, {
     textAlign: 'inherit',
     width: '100%'
   }, _defineProperty(_ref2, "&:hover .".concat(cardActionAreaClasses.focusHighlight), {
-    opacity: theme.palette.action.hoverOpacity,
+    opacity: (theme.vars || theme).palette.action.hoverOpacity,
     '@media (hover: none)': {
       opacity: 0
     }
   }), _defineProperty(_ref2, "&.".concat(cardActionAreaClasses.focusVisible, " .").concat(cardActionAreaClasses.focusHighlight), {
-    opacity: theme.palette.action.focusOpacity
+    opacity: (theme.vars || theme).palette.action.focusOpacity
   }), _ref2;
 });
 var CardActionAreaFocusHighlight = styled('span', {

package/legacy/CircularProgress/CircularProgress.js

@@ -47,7 +47,7 @@ var CircularProgressRoot = styled('span', {
   }, ownerState.variant === 'determinate' && {
     transition: theme.transitions.create('transform')
   }, ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   });
 }, function (_ref2) {
   var ownerState = _ref2.ownerState;

package/legacy/Container/Container.js

@@ -1,104 +1,24 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
+/* eslint-disable material-ui/mui-name-matches-component-name */
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
-import { getContainerUtilityClass } from './containerClasses';
+import { createContainer } from '@mui/system';
 import capitalize from '../utils/capitalize';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-      fixed = ownerState.fixed,
-      disableGutters = ownerState.disableGutters,
-      maxWidth = ownerState.maxWidth;
-  var slots = {
-    root: ['root', maxWidth && "maxWidth".concat(capitalize(String(maxWidth))), fixed && 'fixed', disableGutters && 'disableGutters']
-  };
-  return composeClasses(slots, getContainerUtilityClass, classes);
-};
-
-var ContainerRoot = styled('div', {
-  name: 'MuiContainer',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    var ownerState = props.ownerState;
-    return [styles.root, styles["maxWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
-  }
-})(function (_ref) {
-  var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-  return _extends({
-    width: '100%',
-    marginLeft: 'auto',
-    boxSizing: 'border-box',
-    marginRight: 'auto',
-    display: 'block'
-  }, !ownerState.disableGutters && _defineProperty({
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2)
-  }, theme.breakpoints.up('sm'), {
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3)
-  }));
-}, function (_ref3) {
-  var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
-  return ownerState.fixed && Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
-    var value = theme.breakpoints.values[breakpoint];
-
-    if (value !== 0) {
-      acc[theme.breakpoints.up(breakpoint)] = {
-        maxWidth: "".concat(value).concat(theme.breakpoints.unit)
-      };
+import styled from '../styles/styled';
+import _useThemeProps from '../styles/useThemeProps';
+var Container = createContainer({
+  createStyledComponent: styled('div', {
+    name: 'MuiContainer',
+    slot: 'Root',
+    overridesResolver: function overridesResolver(props, styles) {
+      var ownerState = props.ownerState;
+      return [styles.root, styles["maxWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
     }
-
-    return acc;
-  }, {});
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      ownerState = _ref4.ownerState;
-  return _extends({}, ownerState.maxWidth === 'xs' && _defineProperty({}, theme.breakpoints.up('xs'), {
-    maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-  }), ownerState.maxWidth && ownerState.maxWidth !== 'xs' && _defineProperty({}, theme.breakpoints.up(ownerState.maxWidth), {
-    maxWidth: "".concat(theme.breakpoints.values[ownerState.maxWidth]).concat(theme.breakpoints.unit)
-  }));
-});
-var Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
-  var props = useThemeProps({
-    props: inProps,
-    name: 'MuiContainer'
-  });
-
-  var className = props.className,
-      _props$component = props.component,
-      component = _props$component === void 0 ? 'div' : _props$component,
-      _props$disableGutters = props.disableGutters,
-      disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
-      _props$fixed = props.fixed,
-      fixed = _props$fixed === void 0 ? false : _props$fixed,
-      _props$maxWidth = props.maxWidth,
-      maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
-      other = _objectWithoutProperties(props, ["className", "component", "disableGutters", "fixed", "maxWidth"]);
-
-  var ownerState = _extends({}, props, {
-    component: component,
-    disableGutters: disableGutters,
-    fixed: fixed,
-    maxWidth: maxWidth
-  });
-
-  var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ContainerRoot, _extends({
-    as: component,
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    ref: ref
-  }, other));
+  }),
+  useThemeProps: function useThemeProps(inProps) {
+    return _useThemeProps({
+      props: inProps,
+      name: 'MuiContainer'
+    });
+  }
 });
 process.env.NODE_ENV !== "production" ? Container.propTypes
 /* remove-proptypes */
@@ -118,11 +38,6 @@ process.env.NODE_ENV !== "production" ? Container.propTypes
    */
   classes: PropTypes.object,
 
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/legacy/CssBaseline/CssBaseline.js

@@ -22,12 +22,12 @@ export var html = function html(theme, enableColorScheme) {
 };
 export var body = function body(theme) {
   return _extends({
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   }, theme.typography.body1, {
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: (theme.vars || theme).palette.background.default,
     '@media print': {
       // Save printer ink.
-      backgroundColor: theme.palette.common.white
+      backgroundColor: (theme.vars || theme).palette.common.white
     }
   });
 };
@@ -50,7 +50,7 @@ var _styles = function styles(theme) {
       // Add support for document.body.requestFullScreen().
       // Other elements, if background transparent, are not supported.
       '&::backdrop': {
-        backgroundColor: theme.palette.background.default
+        backgroundColor: (theme.vars || theme).palette.background.default
       }
     })
   };

package/legacy/DialogContent/DialogContent.js

@@ -38,8 +38,8 @@ var DialogContentRoot = styled('div', {
     padding: '20px 24px'
   }, ownerState.dividers ? {
     padding: '16px 24px',
-    borderTop: "1px solid ".concat(theme.palette.divider),
-    borderBottom: "1px solid ".concat(theme.palette.divider)
+    borderTop: "1px solid ".concat((theme.vars || theme).palette.divider),
+    borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider)
   } : _defineProperty({}, ".".concat(dialogTitleClasses.root, " + &"), {
     paddingTop: 0
   }));

package/legacy/Divider/Divider.js

@@ -42,7 +42,7 @@ var DividerRoot = styled('div', {
     flexShrink: 0,
     borderWidth: 0,
     borderStyle: 'solid',
-    borderColor: theme.palette.divider,
+    borderColor: (theme.vars || theme).palette.divider,
     borderBottomWidth: 'thin'
   }, ownerState.absolute && {
     position: 'absolute',
@@ -50,7 +50,7 @@ var DividerRoot = styled('div', {
     left: 0,
     width: '100%'
   }, ownerState.light && {
-    borderColor: alpha(theme.palette.divider, 0.08)
+    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.dividerChannel, " / 0.08)") : alpha(theme.palette.divider, 0.08)
   }, ownerState.variant === 'inset' && {
     marginLeft: 72
   }, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
@@ -78,7 +78,7 @@ var DividerRoot = styled('div', {
     '&::before, &::after': {
       position: 'relative',
       width: '100%',
-      borderTop: "thin solid ".concat(theme.palette.divider),
+      borderTop: "thin solid ".concat((theme.vars || theme).palette.divider),
       top: '50%',
       content: '""',
       transform: 'translateY(50%)'
@@ -94,7 +94,7 @@ var DividerRoot = styled('div', {
       top: '0%',
       left: '50%',
       borderTop: 0,
-      borderLeft: "thin solid ".concat(theme.palette.divider),
+      borderLeft: "thin solid ".concat((theme.vars || theme).palette.divider),
       transform: 'translateX(0%)'
     }
   });

package/legacy/Drawer/Drawer.js

@@ -40,7 +40,7 @@ var DrawerRoot = styled(Modal, {
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    zIndex: theme.zIndex.drawer
+    zIndex: (theme.vars || theme).zIndex.drawer
   };
 });
 var DrawerDockedRoot = styled('div', {
@@ -68,7 +68,7 @@ var DrawerPaper = styled(Paper, {
     flexDirection: 'column',
     height: '100%',
     flex: '1 0 auto',
-    zIndex: theme.zIndex.drawer,
+    zIndex: (theme.vars || theme).zIndex.drawer,
     // Add iOS momentum scrolling for iOS < 13.0
     WebkitOverflowScrolling: 'touch',
     // temporary style
@@ -96,13 +96,13 @@ var DrawerPaper = styled(Paper, {
     height: 'auto',
     maxHeight: '100%'
   }, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-    borderRight: "1px solid ".concat(theme.palette.divider)
+    borderRight: "1px solid ".concat((theme.vars || theme).palette.divider)
   }, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-    borderBottom: "1px solid ".concat(theme.palette.divider)
+    borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider)
   }, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-    borderLeft: "1px solid ".concat(theme.palette.divider)
+    borderLeft: "1px solid ".concat((theme.vars || theme).palette.divider)
   }, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-    borderTop: "1px solid ".concat(theme.palette.divider)
+    borderTop: "1px solid ".concat((theme.vars || theme).palette.divider)
   });
 });
 var oppositeDirection = {