@mui/material 5.6.2 → 5.7.0

package/modern/MobileStepper/MobileStepper.js

@@ -47,20 +47,20 @@ const 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
 }));
 const MobileStepperDots = styled('div', {
   name: 'MuiMobileStepper',
@@ -90,13 +90,13 @@ const 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
 })));
 const MobileStepperProgress = styled(LinearProgress, {
   name: 'MuiMobileStepper',

package/modern/Modal/Modal.js

@@ -30,7 +30,7 @@ const ModalRoot = styled('div', {
   ownerState
 }) => _extends({
   position: 'fixed',
-  zIndex: theme.zIndex.modal,
+  zIndex: (theme.vars || theme).zIndex.modal,
   right: 0,
   bottom: 0,
   top: 0,

package/modern/PaginationItem/PaginationItem.js

@@ -66,10 +66,10 @@ const 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',
   [`&.${paginationItemClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }
 }, ownerState.size === 'small' && {
   minWidth: 26,
@@ -97,39 +97,39 @@ const PaginationItemPage = styled(ButtonBase, {
   height: 32,
   padding: '0 6px',
   margin: '0 3px',
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   [`&.${paginationItemClasses.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${paginationItemClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
   transition: theme.transitions.create(['color', 'background-color'], {
     duration: theme.transitions.duration.short
   }),
   '&: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'
     }
   },
   [`&.${paginationItemClasses.selected}`]: {
-    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(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${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
       }
     },
     [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     },
     [`&.${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
     }
   }
 }, ownerState.size === 'small' && {
@@ -145,49 +145,49 @@ const PaginationItemPage = styled(ButtonBase, {
   padding: '0 10px',
   fontSize: theme.typography.pxToRem(15)
 }, ownerState.shape === 'rounded' && {
-  borderRadius: theme.shape.borderRadius
+  borderRadius: (theme.vars || theme).shape.borderRadius
 }), ({
   theme,
   ownerState
 }) => _extends({}, ownerState.variant === 'text' && {
   [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-    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
       }
     },
     [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: theme.palette[ownerState.color].dark
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
   }, {
     [`&.${paginationItemClasses.disabled}`]: {
-      color: theme.palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     }
   })
 }, ownerState.variant === 'outlined' && {
-  border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+  border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
   [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-    color: theme.palette[ownerState.color].main,
-    border: `1px solid ${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 ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)}`,
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${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(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${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'
       }
     },
     [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
     }
   }, {
     [`&.${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
     }
   })
 }));

package/modern/Rating/Rating.js

@@ -92,7 +92,7 @@ const RatingRoot = styled('span', {
   textAlign: 'left',
   WebkitTapHighlightColor: 'transparent',
   [`&.${ratingClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
     pointerEvents: 'none'
   },
   [`&.${ratingClasses.focusVisible} .${ratingClasses.iconActive}`]: {
@@ -145,7 +145,7 @@ const RatingIcon = styled('span', {
 }, ownerState.iconActive && {
   transform: 'scale(1.2)'
 }, ownerState.iconEmpty && {
-  color: theme.palette.action.disabled
+  color: (theme.vars || theme).palette.action.disabled
 }));
 const RatingDecimal = styled('span', {
   name: 'MuiRating',

package/modern/Snackbar/Snackbar.js

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

package/modern/SpeedDial/SpeedDial.js

@@ -74,7 +74,7 @@ const SpeedDialRoot = styled('div', {
   theme,
   ownerState
 }) => _extends({
-  zIndex: theme.zIndex.speedDial,
+  zIndex: (theme.vars || theme).zIndex.speedDial,
   display: 'flex',
   alignItems: 'center',
   pointerEvents: 'none'

package/modern/StepIcon/StepIcon.js

@@ -42,15 +42,15 @@ const 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,
   [`&.${stepIconClasses.completed}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   },
   [`&.${stepIconClasses.active}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   },
   [`&.${stepIconClasses.error}`]: {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 }));
 const StepIconText = styled('text', {
@@ -60,7 +60,7 @@ const StepIconText = styled('text', {
 })(({
   theme
 }) => ({
-  fill: theme.palette.primary.contrastText,
+  fill: (theme.vars || theme).palette.primary.contrastText,
   fontSize: theme.typography.caption.fontSize,
   fontFamily: theme.typography.fontFamily
 }));

package/modern/StepLabel/StepLabel.js

@@ -69,11 +69,11 @@ const StepLabelLabel = styled('span', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${stepLabelClasses.active}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   },
   [`&.${stepLabelClasses.completed}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   },
   [`&.${stepLabelClasses.alternativeLabel}`]: {
@@ -81,7 +81,7 @@ const StepLabelLabel = styled('span', {
     marginTop: 16
   },
   [`&.${stepLabelClasses.error}`]: {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 }));
 const StepLabelIconContainer = styled('span', {
@@ -105,7 +105,7 @@ const StepLabelLabelContainer = styled('span', {
   theme
 }) => ({
   width: '100%',
-  color: theme.palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = useThemeProps({

package/modern/Stepper/StepperContext.js

@@ -1,12 +1,20 @@
 import * as React from 'react';
+
 /**
- * @ignore - internal component.
+ * Provides information about the current step in Stepper.
  */
-
 const 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/modern/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/modern/SvgIcon/SvgIcon.js

@@ -53,9 +53,9 @@ const SvgIconRoot = styled('svg', {
     large: theme.typography?.pxToRem?.(35) || '2.1875'
   }[ownerState.fontSize],
   // TODO v5 deprecate, v6 remove for sx
-  color: theme.palette?.[ownerState.color]?.main ?? {
-    action: theme.palette?.action?.active,
-    disabled: theme.palette?.action?.disabled,
+  color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
+    action: (theme.vars || theme).palette?.action?.active,
+    disabled: (theme.vars || theme).palette?.action?.disabled,
     inherit: undefined
   }[ownerState.color]
 }));

package/modern/Tab/Tab.js

@@ -78,23 +78,23 @@ const TabRoot = styled(ButtonBase, {
     opacity: 1
   },
   [`&.${tabClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }
 }, ownerState.textColor === 'primary' && {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${tabClasses.selected}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   },
   [`&.${tabClasses.disabled}`]: {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }
 }, ownerState.textColor === 'secondary' && {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${tabClasses.selected}`]: {
-    color: theme.palette.secondary.main
+    color: (theme.vars || theme).palette.secondary.main
   },
   [`&.${tabClasses.disabled}`]: {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }
 }, ownerState.fullWidth && {
   flexShrink: 1,

package/modern/Table/Table.js

@@ -41,7 +41,7 @@ const 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/modern/TablePagination/TablePagination.js

@@ -30,7 +30,7 @@ const TablePaginationRoot = styled(TableCell, {
   theme
 }) => ({
   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/modern/TableRow/TableRow.js

@@ -44,12 +44,12 @@ const TableRowRoot = styled('tr', {
   // We disable the focus ring for mouse, touch and keyboard users.
   outline: 0,
   [`&.${tableRowClasses.hover}:hover`]: {
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: (theme.vars || theme).palette.action.hover
   },
   [`&.${tableRowClasses.selected}`]: {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${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(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
     }
   }
 }));

package/modern/TableSortLabel/TableSortLabel.js

@@ -45,19 +45,19 @@ const TableSortLabelRoot = styled(ButtonBase, {
   flexDirection: 'inherit',
   alignItems: 'center',
   '&:focus': {
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   },
   '&:hover': {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     [`& .${tableSortLabelClasses.icon}`]: {
       opacity: 0.5
     }
   },
   [`&.${tableSortLabelClasses.active}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     [`& .${tableSortLabelClasses.icon}`]: {
       opacity: 1,
-      color: theme.palette.text.secondary
+      color: (theme.vars || theme).palette.text.secondary
     }
   }
 }));

package/modern/Tabs/Tabs.js

@@ -193,9 +193,9 @@ const 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/modern/ToggleButton/ToggleButton.js

@@ -42,35 +42,42 @@ const ToggleButtonRoot = styled(ButtonBase, {
   theme,
   ownerState
 }) => {
-  const selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+  let selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+  let 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 ${theme.palette.divider}`,
-    color: theme.palette.action.active
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    color: (theme.vars || theme).palette.action.active
   }, ownerState.fullWidth && {
     width: '100%'
   }, {
     [`&.${toggleButtonClasses.disabled}`]: {
-      color: theme.palette.action.disabled,
-      border: `1px solid ${theme.palette.action.disabledBackground}`
+      color: (theme.vars || theme).palette.action.disabled,
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
     },
     '&:hover': {
       textDecoration: 'none',
       // Reset on mouse devices
-      backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${toggleButtonClasses.selected}`]: {
       color: selectedColor,
-      backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${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(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${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(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(selectedColor, theme.palette.action.selectedOpacity)
         }
       }
     }

package/modern/ToggleButtonGroup/ToggleButtonGroup.js

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

package/modern/Tooltip/Tooltip.js

@@ -56,7 +56,7 @@ const TooltipPopper = styled(Popper, {
   ownerState,
   open
 }) => _extends({
-  zIndex: theme.zIndex.tooltip,
+  zIndex: (theme.vars || theme).zIndex.tooltip,
   pointerEvents: 'none'
 }, !ownerState.disableInteractive && {
   pointerEvents: 'auto'
@@ -117,9 +117,9 @@ const TooltipTooltip = styled('div', {
   theme,
   ownerState
 }) => _extends({
-  backgroundColor: alpha(theme.palette.grey[700], 0.92),
-  borderRadius: theme.shape.borderRadius,
-  color: theme.palette.common.white,
+  backgroundColor: theme.vars ? `rgba(${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),
@@ -185,7 +185,7 @@ const 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(${theme.vars.palette.grey.darkChannel} / 0.9)` : alpha(theme.palette.grey[700], 0.9),
   '&::before': {
     content: '""',
     margin: 'auto',

package/modern/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/modern/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/modern/locale/index.js

@@ -619,7 +619,7 @@ export const csCZ = {
         'aria-label': 'Navigace stránkováním',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'Jít na '}${page} stránku`;
+            return `${selected ? '' : 'Jít na '}${page}. stránku`;
           }
 
           if (type === 'first') {

package/modern/styles/createPalette.js

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