@mui/material 5.6.2 → 5.7.0

package/legacy/MobileStepper/MobileStepper.js

@@ -43,20 +43,20 @@ var MobileStepperRoot = styled(Paper, {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    background: theme.palette.background.default,
+    background: (theme.vars || theme).palette.background.default,
     padding: 8
   }, ownerState.position === 'bottom' && {
     position: 'fixed',
     bottom: 0,
     left: 0,
     right: 0,
-    zIndex: theme.zIndex.mobileStepper
+    zIndex: (theme.vars || theme).zIndex.mobileStepper
   }, ownerState.position === 'top' && {
     position: 'fixed',
     top: 0,
     left: 0,
     right: 0,
-    zIndex: theme.zIndex.mobileStepper
+    zIndex: (theme.vars || theme).zIndex.mobileStepper
   });
 });
 var MobileStepperDots = styled('div', {
@@ -90,13 +90,13 @@ var MobileStepperDot = styled('div', {
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest
     }),
-    backgroundColor: theme.palette.action.disabled,
+    backgroundColor: (theme.vars || theme).palette.action.disabled,
     borderRadius: '50%',
     width: 8,
     height: 8,
     margin: '0 2px'
   }, dotActive && {
-    backgroundColor: theme.palette.primary.main
+    backgroundColor: (theme.vars || theme).palette.primary.main
   }));
 });
 var MobileStepperProgress = styled(LinearProgress, {

package/legacy/Modal/Modal.js

@@ -27,7 +27,7 @@ var ModalRoot = styled('div', {
       ownerState = _ref.ownerState;
   return _extends({
     position: 'fixed',
-    zIndex: theme.zIndex.modal,
+    zIndex: (theme.vars || theme).zIndex.modal,
     right: 0,
     bottom: 0,
     top: 0,

package/legacy/PaginationItem/PaginationItem.js

@@ -62,10 +62,10 @@ var PaginationItemEllipsis = styled('div', {
     minWidth: 32,
     padding: '0 6px',
     margin: '0 3px',
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     height: 'auto'
   }, "&.".concat(paginationItemClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), ownerState.size === 'small' && {
     minWidth: 26,
     borderRadius: 26 / 2,
@@ -95,34 +95,34 @@ var PaginationItemPage = styled(ButtonBase, {
     height: 32,
     padding: '0 6px',
     margin: '0 3px',
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   }, _defineProperty(_extends3, "&.".concat(paginationItemClasses.focusVisible), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_extends3, "&.".concat(paginationItemClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), _defineProperty(_extends3, "transition", theme.transitions.create(['color', 'background-color'], {
     duration: theme.transitions.duration.short
   })), _defineProperty(_extends3, '&:hover', {
-    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(_extends3, "&.".concat(paginationItemClasses.selected), (_$concat = {
-    backgroundColor: theme.palette.action.selected,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
     '&:hover': {
-      backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selected, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.action.selected, 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(_$concat, "&.".concat(paginationItemClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selected, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   }), _defineProperty(_$concat, "&.".concat(paginationItemClasses.disabled), {
     opacity: 1,
-    color: theme.palette.action.disabled,
-    backgroundColor: theme.palette.action.selected
+    color: (theme.vars || theme).palette.action.disabled,
+    backgroundColor: (theme.vars || theme).palette.action.selected
   }), _$concat)), _extends3), ownerState.size === 'small' && {
     minWidth: 26,
     height: 26,
@@ -136,43 +136,43 @@ var PaginationItemPage = styled(ButtonBase, {
     padding: '0 10px',
     fontSize: theme.typography.pxToRem(15)
   }, ownerState.shape === 'rounded' && {
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   });
 }, function (_ref3) {
   var theme = _ref3.theme,
       ownerState = _ref3.ownerState;
   return _extends({}, ownerState.variant === 'text' && _defineProperty({}, "&.".concat(paginationItemClasses.selected), _extends({}, ownerState.color !== 'standard' && _defineProperty({
-    color: theme.palette[ownerState.color].contrastText,
-    backgroundColor: theme.palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
     '&:hover': {
-      backgroundColor: theme.palette[ownerState.color].dark,
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette[ownerState.color].main
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }
   }, "&.".concat(paginationItemClasses.focusVisible), {
-    backgroundColor: theme.palette[ownerState.color].dark
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
   }), _defineProperty({}, "&.".concat(paginationItemClasses.disabled), {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }))), ownerState.variant === 'outlined' && _defineProperty({
-    border: "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+    border: 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)')
   }, "&.".concat(paginationItemClasses.selected), _extends({}, ownerState.color !== 'standard' && _defineProperty({
-    color: theme.palette[ownerState.color].main,
-    border: "1px solid ".concat(alpha(theme.palette[ownerState.color].main, 0.5)),
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : alpha(theme.palette[ownerState.color].main, 0.5)),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.activatedOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
     '&:hover': {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / calc(").concat(theme.vars.palette.action.activatedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   }, "&.".concat(paginationItemClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / calc(").concat(theme.vars.palette.action.activatedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
   }), _defineProperty({}, "&.".concat(paginationItemClasses.disabled), {
-    borderColor: theme.palette.action.disabledBackground,
-    color: theme.palette.action.disabled
+    borderColor: (theme.vars || theme).palette.action.disabledBackground,
+    color: (theme.vars || theme).palette.action.disabled
   }))));
 });
 var PaginationItemPageIcon = styled('div', {

package/legacy/Rating/Rating.js

@@ -88,7 +88,7 @@ var RatingRoot = styled('span', {
     textAlign: 'left',
     WebkitTapHighlightColor: 'transparent'
   }, _defineProperty(_extends2, "&.".concat(ratingClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
     pointerEvents: 'none'
   }), _defineProperty(_extends2, "&.".concat(ratingClasses.focusVisible, " .").concat(ratingClasses.iconActive), {
     outline: '1px solid #999'
@@ -140,7 +140,7 @@ var RatingIcon = styled('span', {
   }, ownerState.iconActive && {
     transform: 'scale(1.2)'
   }, ownerState.iconEmpty && {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   });
 });
 var RatingDecimal = styled('span', {

package/legacy/Snackbar/Snackbar.js

@@ -47,7 +47,7 @@ var SnackbarRoot = styled('div', {
   });
 
   return _extends({
-    zIndex: theme.zIndex.snackbar,
+    zIndex: (theme.vars || theme).zIndex.snackbar,
     position: 'fixed',
     display: 'flex',
     left: 8,

package/legacy/SpeedDial/SpeedDial.js

@@ -69,7 +69,7 @@ var SpeedDialRoot = styled('div', {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
-    zIndex: theme.zIndex.speedDial,
+    zIndex: (theme.vars || theme).zIndex.speedDial,
     display: 'flex',
     alignItems: 'center',
     pointerEvents: 'none'

package/legacy/StepIcon/StepIcon.js

@@ -44,13 +44,13 @@ var StepIconRoot = styled(SvgIcon, {
     transition: theme.transitions.create('color', {
       duration: theme.transitions.duration.shortest
     }),
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }, _defineProperty(_ref2, "&.".concat(stepIconClasses.completed), {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }), _defineProperty(_ref2, "&.".concat(stepIconClasses.active), {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }), _defineProperty(_ref2, "&.".concat(stepIconClasses.error), {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }), _ref2;
 });
 var StepIconText = styled('text', {
@@ -62,7 +62,7 @@ var StepIconText = styled('text', {
 })(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    fill: theme.palette.primary.contrastText,
+    fill: (theme.vars || theme).palette.primary.contrastText,
     fontSize: theme.typography.caption.fontSize,
     fontFamily: theme.typography.fontFamily
   };

package/legacy/StepLabel/StepLabel.js

@@ -70,16 +70,16 @@ var StepLabelLabel = styled('span', {
       duration: theme.transitions.duration.shortest
     })
   }, _defineProperty(_extends3, "&.".concat(stepLabelClasses.active), {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.completed), {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.alternativeLabel), {
     textAlign: 'center',
     marginTop: 16
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.error), {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }), _extends3));
 });
 var StepLabelIconContainer = styled('span', {
@@ -108,7 +108,7 @@ var StepLabelLabelContainer = styled('span', {
   var theme = _ref4.theme;
   return {
     width: '100%',
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   };
 });
 var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {

package/legacy/Stepper/StepperContext.js

@@ -1,12 +1,20 @@
 import * as React from 'react';
+
 /**
- * @ignore - internal component.
+ * Provides information about the current step in Stepper.
  */
-
 var StepperContext = /*#__PURE__*/React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   StepperContext.displayName = 'StepperContext';
 }
+/**
+ * Returns the current StepperContext or an empty object if no StepperContext
+ * has been defined in the component tree.
+ */
+
 
+export function useStepperContext() {
+  return React.useContext(StepperContext);
+}
 export default StepperContext;

package/legacy/Stepper/index.js

@@ -1,3 +1,5 @@
 export { default } from './Stepper';
 export { default as stepperClasses } from './stepperClasses';
-export * from './stepperClasses';
+export * from './stepperClasses';
+export { default as StepperContext } from './StepperContext';
+export * from './StepperContext';

package/legacy/SvgIcon/SvgIcon.js

@@ -29,7 +29,7 @@ var SvgIconRoot = styled('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles["color".concat(capitalize(ownerState.color))], styles["fontSize".concat(capitalize(ownerState.fontSize))]];
   }
 })(function (_ref) {
-  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$palette$ownerS, _theme$palette, _theme$palette$ownerS2, _theme$palette2, _theme$palette2$actio, _theme$palette3, _theme$palette3$actio;
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
@@ -50,9 +50,9 @@ var SvgIconRoot = styled('svg', {
       large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
-    color: (_theme$palette$ownerS = (_theme$palette = theme.palette) == null ? void 0 : (_theme$palette$ownerS2 = _theme$palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
-      action: (_theme$palette2 = theme.palette) == null ? void 0 : (_theme$palette2$actio = _theme$palette2.action) == null ? void 0 : _theme$palette2$actio.active,
-      disabled: (_theme$palette3 = theme.palette) == null ? void 0 : (_theme$palette3$actio = _theme$palette3.action) == null ? void 0 : _theme$palette3$actio.disabled,
+    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
+      action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
+      disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
       inherit: undefined
     }[ownerState.color]
   };

package/legacy/Tab/Tab.js

@@ -73,19 +73,19 @@ var TabRoot = styled(ButtonBase, {
   }, _defineProperty(_ref3, "&.".concat(tabClasses.selected), {
     opacity: 1
   }), _defineProperty(_ref3, "&.".concat(tabClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), _ref3), ownerState.textColor === 'primary' && (_ref4 = {
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, _defineProperty(_ref4, "&.".concat(tabClasses.selected), {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }), _defineProperty(_ref4, "&.".concat(tabClasses.disabled), {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }), _ref4), ownerState.textColor === 'secondary' && (_ref5 = {
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, _defineProperty(_ref5, "&.".concat(tabClasses.selected), {
-    color: theme.palette.secondary.main
+    color: (theme.vars || theme).palette.secondary.main
   }), _defineProperty(_ref5, "&.".concat(tabClasses.disabled), {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }), _ref5), ownerState.fullWidth && {
     flexShrink: 1,
     flexGrow: 1,

package/legacy/Table/Table.js

@@ -36,7 +36,7 @@ var TableRoot = styled('table', {
     borderSpacing: 0,
     '& caption': _extends({}, theme.typography.body2, {
       padding: theme.spacing(2),
-      color: theme.palette.text.secondary,
+      color: (theme.vars || theme).palette.text.secondary,
       textAlign: 'left',
       captionSide: 'bottom'
     })

package/legacy/TablePagination/TablePagination.js

@@ -32,7 +32,7 @@ var TablePaginationRoot = styled(TableCell, {
   var theme = _ref.theme;
   return {
     overflow: 'auto',
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontSize: theme.typography.pxToRem(14),
     // Increase the specificity to override TableCell.
     '&:last-child': {

package/legacy/TableRow/TableRow.js

@@ -42,11 +42,11 @@ var TableRowRoot = styled('tr', {
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 0
   }, _defineProperty(_ref2, "&.".concat(tableRowClasses.hover, ":hover"), {
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: (theme.vars || theme).palette.action.hover
   }), _defineProperty(_ref2, "&.".concat(tableRowClasses.selected), {
-    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),
     '&:hover': {
-      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)
     }
   }), _ref2;
 });

package/legacy/TableSortLabel/TableSortLabel.js

@@ -41,18 +41,18 @@ var TableSortLabelRoot = styled(ButtonBase, {
     flexDirection: 'inherit',
     alignItems: 'center',
     '&:focus': {
-      color: theme.palette.text.secondary
+      color: (theme.vars || theme).palette.text.secondary
     },
     '&:hover': _defineProperty({
-      color: theme.palette.text.secondary
+      color: (theme.vars || theme).palette.text.secondary
     }, "& .".concat(tableSortLabelClasses.icon), {
       opacity: 0.5
     })
   }, "&.".concat(tableSortLabelClasses.active), _defineProperty({
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   }, "& .".concat(tableSortLabelClasses.icon), {
     opacity: 1,
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }));
 });
 var TableSortLabelIcon = styled('span', {

package/legacy/Tabs/Tabs.js

@@ -182,9 +182,9 @@ var TabsIndicator = styled('span', {
     width: '100%',
     transition: theme.transitions.create()
   }, ownerState.indicatorColor === 'primary' && {
-    backgroundColor: theme.palette.primary.main
+    backgroundColor: (theme.vars || theme).palette.primary.main
   }, ownerState.indicatorColor === 'secondary' && {
-    backgroundColor: theme.palette.secondary.main
+    backgroundColor: (theme.vars || theme).palette.secondary.main
   }, ownerState.vertical && {
     height: '100%',
     width: 2,

package/legacy/ToggleButton/ToggleButton.js

@@ -40,31 +40,38 @@ var ToggleButtonRoot = styled(ButtonBase, {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   var selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+  var selectedColorChannel;
+
+  if (theme.vars) {
+    selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
+    selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
+  }
+
   return _extends({}, theme.typography.button, {
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     padding: 11,
-    border: "1px solid ".concat(theme.palette.divider),
-    color: theme.palette.action.active
+    border: "1px solid ".concat((theme.vars || theme).palette.divider),
+    color: (theme.vars || theme).palette.action.active
   }, ownerState.fullWidth && {
     width: '100%'
   }, (_extends2 = {}, _defineProperty(_extends2, "&.".concat(toggleButtonClasses.disabled), {
-    color: theme.palette.action.disabled,
-    border: "1px solid ".concat(theme.palette.action.disabledBackground)
+    color: (theme.vars || theme).palette.action.disabled,
+    border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
   }), _defineProperty(_extends2, '&:hover', {
     textDecoration: 'none',
     // Reset on mouse devices
-    backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
   }), _defineProperty(_extends2, "&.".concat(toggleButtonClasses.selected), {
     color: selectedColor,
-    backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(selectedColor, theme.palette.action.selectedOpacity),
     '&:hover': {
-      backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity)
+        backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(selectedColor, theme.palette.action.selectedOpacity)
       }
     }
   }), _extends2), ownerState.size === 'small' && {

package/legacy/ToggleButtonGroup/ToggleButtonGroup.js

@@ -37,7 +37,7 @@ var ToggleButtonGroupRoot = styled('div', {
       theme = _ref3.theme;
   return _extends({
     display: 'inline-flex',
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.orientation === 'vertical' && {
     flexDirection: 'column'
   }, ownerState.fullWidth && {

package/legacy/Tooltip/Tooltip.js

@@ -55,7 +55,7 @@ var TooltipPopper = styled(Popper, {
       ownerState = _ref.ownerState,
       open = _ref.open;
   return _extends({
-    zIndex: theme.zIndex.tooltip,
+    zIndex: (theme.vars || theme).zIndex.tooltip,
     pointerEvents: 'none'
   }, !ownerState.disableInteractive && {
     pointerEvents: 'auto'
@@ -112,9 +112,9 @@ var TooltipTooltip = styled('div', {
   var theme = _ref3.theme,
       ownerState = _ref3.ownerState;
   return _extends({
-    backgroundColor: alpha(theme.palette.grey[700], 0.92),
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.common.white,
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.grey.darkChannel, " / 0.92)") : alpha(theme.palette.grey[700], 0.92),
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    color: (theme.vars || theme).palette.common.white,
     fontFamily: theme.typography.fontFamily,
     padding: '4px 8px',
     fontSize: theme.typography.pxToRem(11),
@@ -178,7 +178,7 @@ var TooltipArrow = styled('span', {
     /* = width / sqrt(2) = (length of the hypotenuse) */
     ,
     boxSizing: 'border-box',
-    color: alpha(theme.palette.grey[700], 0.9),
+    color: theme.vars ? "rgba(".concat(theme.vars.palette.grey.darkChannel, " / 0.9)") : alpha(theme.palette.grey[700], 0.9),
     '&::before': {
       content: '""',
       margin: 'auto',

package/legacy/className/index.js

@@ -1,9 +1,2 @@
-/**
- * Caution! this module must not include unstyled components import from `@mui/base`, otherwise, it will break the ClassNameGenerator.
- * ❌ import { ... } from '@mui/base';
- * ✅ import { ... } from '@mui/base/utils'; // must be specific base module
- *
- * Issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401
- */
 // eslint-disable-next-line import/prefer-default-export
-export { unstable_ClassNameGenerator } from '@mui/base/className';
+export { unstable_ClassNameGenerator } from '@mui/private-classnames';

package/legacy/index.js

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

package/legacy/locale/index.js

@@ -636,7 +636,7 @@ export var csCZ = {
         'aria-label': 'Navigace stránkováním',
         getItemAriaLabel: function getItemAriaLabel(type, page, selected) {
           if (type === 'page') {
-            return "".concat(selected ? '' : 'Jít na ').concat(page, " str\xE1nku");
+            return "".concat(selected ? '' : 'Jít na ').concat(page, ". str\xE1nku");
           }
 
           if (type === 'first') {

package/legacy/styles/createPalette.js

@@ -278,7 +278,8 @@ export default function createPalette(palette) {
 
   var paletteOutput = deepmerge(_extends({
     // A collection of common colors.
-    common: common,
+    common: _extends({}, common),
+    // prevent mutable object.
     // The palette mode, can be light or dark.
     mode: mode,
     // The colors used to represent primary interface elements for a user.