@mui/material 5.8.3 → 5.8.6

package/README.md

@@ -7,11 +7,13 @@
 
 **MUI Core** contains foundational React UI component libraries for shipping new features faster.
 
-- _Material UI_ is a comprehensive library of components that features our implementation of Google's [Material Design](https://material.io/design/introduction/) system.
+- [_Material UI_](https://mui.com/material-ui/getting-started/overview/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://material.io/design/introduction/) system.
 
-- _MUI Base_ is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
+- [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) is a beautifully designed library of React UI components.
 
-- _MUI System_ is a collection of CSS utilities to help you rapidly lay out custom designs.
+- [_MUI Base_](https://mui.com/base/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
+
+- [_MUI System_](https://mui.com/system/basics/) is a collection of CSS utilities to help you rapidly lay out custom designs.
 
 <div align="center">
 
@@ -134,15 +136,10 @@ Here is an example of a basic app using Material UI's `Button` component:
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import Button from '@mui/material/Button';
 
 function App() {
-  return (
-    <Button variant="contained" color="primary">
-      Hello World
-    </Button>
-  );
+  return <Button variant="contained">Hello World</Button>;
 }
 ```
 

package/Skeleton/Skeleton.js

@@ -79,7 +79,7 @@ const SkeletonRoot = styled('span', {
   return _extends({
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
-    backgroundColor: alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
     height: '1.2em'
   }, ownerState.variant === 'text' && {
     marginTop: 0,
@@ -118,7 +118,12 @@ const SkeletonRoot = styled('span', {
 
       &::after {
         animation: ${0} 1.6s linear 0.5s infinite;
-        background: linear-gradient(90deg, transparent, ${0}, transparent);
+        background: linear-gradient(
+          90deg,
+          transparent,
+          ${0},
+          transparent
+        );
         content: '';
         position: absolute;
         transform: translateX(-100%); /* Avoid flash during server-side hydration */
@@ -127,7 +132,7 @@ const SkeletonRoot = styled('span', {
         right: 0;
         top: 0;
       }
-    `), waveKeyframe, theme.palette.action.hover));
+    `), waveKeyframe, (theme.vars || theme).palette.action.hover));
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/Slider/Slider.d.ts

@@ -3,6 +3,7 @@ import {
   ExtendSliderUnstyledTypeMap,
   ExtendSliderUnstyled,
   SliderUnstyledTypeMap,
+  SliderValueLabelProps,
 } from '@mui/base/SliderUnstyled';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
@@ -55,13 +56,14 @@ export type SliderTypeMap<
   defaultComponent: D;
 }>;
 
+export { SliderValueLabelProps } from '@mui/base/SliderUnstyled';
+
 type SliderRootProps = NonNullable<SliderTypeMap['props']['componentsProps']>['root'];
 type SliderMarkProps = NonNullable<SliderTypeMap['props']['componentsProps']>['mark'];
 type SliderMarkLabelProps = NonNullable<SliderTypeMap['props']['componentsProps']>['markLabel'];
 type SliderRailProps = NonNullable<SliderTypeMap['props']['componentsProps']>['rail'];
 type SliderTrackProps = NonNullable<SliderTypeMap['props']['componentsProps']>['track'];
 type SliderThumbProps = NonNullable<SliderTypeMap['props']['componentsProps']>['thumb'];
-type SliderValueLabelProps = NonNullable<SliderTypeMap['props']['componentsProps']>['valueLabel'];
 type SliderInputProps = NonNullable<SliderTypeMap['props']['componentsProps']>['input'];
 
 export const SliderRoot: React.FC<SliderRootProps>;

package/Slider/Slider.js

@@ -34,7 +34,7 @@ const SliderRoot = styled('span', {
   position: 'relative',
   cursor: 'pointer',
   touchAction: 'none',
-  color: theme.palette[ownerState.color].main,
+  color: (theme.vars || theme).palette[ownerState.color].main,
   WebkitTapHighlightColor: 'transparent'
 }, ownerState.orientation === 'horizontal' && _extends({
   height: 4,
@@ -69,7 +69,7 @@ const SliderRoot = styled('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}`]: {
@@ -162,8 +162,8 @@ const SliderTrack = styled('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
   });
 });
 process.env.NODE_ENV !== "production" ? SliderTrack.propTypes
@@ -222,7 +222,7 @@ const SliderThumb = styled('span', {
     borderRadius: 'inherit',
     width: '100%',
     height: '100%',
-    boxShadow: theme.shadows[2]
+    boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.size === 'small' && {
     boxShadow: 'none'
   }),
@@ -238,13 +238,13 @@ const SliderThumb = styled('span', {
     transform: 'translate(-50%, -50%)'
   },
   [`&:hover, &.${sliderClasses.focusVisible}`]: {
-    boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[ownerState.color].main, 0.16)}`,
+    boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`,
     '@media (hover: none)': {
       boxShadow: 'none'
     }
   },
   [`&.${sliderClasses.active}`]: {
-    boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[ownerState.color].main, 0.16)}`
+    boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`
   },
   [`&.${sliderClasses.disabled}`]: {
     '&:hover': {
@@ -287,9 +287,9 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   transformOrigin: 'bottom center',
   transform: 'translateY(-100%) scale(0)',
   position: 'absolute',
-  backgroundColor: theme.palette.grey[600],
+  backgroundColor: (theme.vars || theme).palette.grey[600],
   borderRadius: 2,
-  color: theme.palette.common.white,
+  color: (theme.vars || theme).palette.common.white,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -359,7 +359,7 @@ const SliderMark = styled('span', {
   left: '50%',
   transform: 'translate(-50%, 1px)'
 }, markActive && {
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   opacity: 0.8
 }));
 process.env.NODE_ENV !== "production" ? SliderMark.propTypes
@@ -386,7 +386,7 @@ const SliderMarkLabel = styled('span', {
   ownerState,
   markLabelActive
 }) => _extends({}, theme.typography.body2, {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   position: 'absolute',
   whiteSpace: 'nowrap'
 }, ownerState.orientation === 'horizontal' && {
@@ -402,7 +402,7 @@ const SliderMarkLabel = styled('span', {
     left: 44
   }
 }, markLabelActive && {
-  color: theme.palette.text.primary
+  color: (theme.vars || theme).palette.text.primary
 }));
 process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes
 /* remove-proptypes */
@@ -579,22 +579,24 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    input: PropTypes.object,
-    mark: PropTypes.object,
-    markLabel: PropTypes.object,
-    rail: PropTypes.object,
-    root: PropTypes.object,
-    thumb: PropTypes.object,
-    track: PropTypes.object,
-    valueLabel: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      children: PropTypes.element,
       className: PropTypes.string,
       components: PropTypes.shape({
         Root: PropTypes.elementType
       }),
+      open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+      value: PropTypes.number,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
 
   /**

package/Snackbar/Snackbar.js

@@ -41,16 +41,11 @@ const SnackbarRoot = styled('div', {
   theme,
   ownerState
 }) => {
-  const center = _extends({}, !ownerState.isRtl && {
+  const center = {
     left: '50%',
     right: 'auto',
     transform: 'translateX(-50%)'
-  }, ownerState.isRtl && {
-    right: '50%',
-    left: 'auto',
-    transform: 'translateX(50%)'
-  });
-
+  };
   return _extends({
     zIndex: (theme.vars || theme).zIndex.snackbar,
     position: 'fixed',
@@ -72,19 +67,13 @@ const SnackbarRoot = styled('div', {
       top: 24
     } : {
       bottom: 24
-    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && _extends({}, !ownerState.isRtl && {
+    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
       left: 24,
       right: 'auto'
-    }, ownerState.isRtl && {
+    }, ownerState.anchorOrigin.horizontal === 'right' && {
       right: 24,
       left: 'auto'
-    }), ownerState.anchorOrigin.horizontal === 'right' && _extends({}, !ownerState.isRtl && {
-      right: 24,
-      left: 'auto'
-    }, ownerState.isRtl && {
-      left: 24,
-      right: 'auto'
-    }))
+    })
   });
 });
 const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
@@ -131,14 +120,11 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
         TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
         other = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  const isRtl = theme.direction === 'rtl';
-
   const ownerState = _extends({}, props, {
     anchorOrigin: {
       vertical,
       horizontal
-    },
-    isRtl
+    }
   });
 
   const classes = useUtilityClasses(ownerState);

package/SnackbarContent/SnackbarContent.js

@@ -35,13 +35,13 @@ const SnackbarContentRoot = styled(Paper, {
   const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
   const backgroundColor = emphasize(theme.palette.background.default, emphasis);
   return _extends({}, 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/SpeedDialAction/SpeedDialAction.js

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

package/Stack/Stack.js

@@ -59,7 +59,7 @@ export const style = ({
   if (ownerState.spacing) {
     const transformer = 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/StepConnector/StepConnector.js

@@ -63,17 +63,20 @@ const StepConnectorLine = styled('span', {
 })(({
   ownerState,
   theme
-}) => _extends({
-  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 _extends({
+    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 = useThemeProps({
     props: inProps,

package/StepContent/StepContent.js

@@ -43,7 +43,7 @@ const StepContentRoot = styled('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'
 }));

package/StepIcon/StepIcon.js

@@ -120,8 +120,9 @@ const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
       })), /*#__PURE__*/_jsx(StepIconText, {
         className: classes.text,
         x: "12",
-        y: "16",
+        y: "12",
         textAnchor: "middle",
+        dominantBaseline: "central",
         ownerState: ownerState,
         children: icon
       })]

package/Switch/Switch.js

@@ -101,7 +101,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
   left: 0,
   zIndex: 1,
   // Render above the focus ripple.
-  color: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300],
+  color: theme.vars ? theme.vars.palette.Switch.defaultColor : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`,
   transition: theme.transitions.create(['left', 'transform'], {
     duration: theme.transitions.duration.shortest
   }),
@@ -109,13 +109,13 @@ const SwitchSwitchBase = styled(SwitchBase, {
     transform: 'translateX(20px)'
   },
   [`&.${switchClasses.disabled}`]: {
-    color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
+    color: theme.vars ? theme.vars.palette.Switch.defaultDisabledColor : `${theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]}`
   },
   [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
     opacity: 0.5
   },
   [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
-    opacity: theme.palette.mode === 'light' ? 0.12 : 0.2
+    opacity: theme.vars ? theme.vars.opacity.switchTrackDisabled : `${theme.palette.mode === 'light' ? 0.12 : 0.2}`
   },
   [`& .${switchClasses.input}`]: {
     left: '-100%',
@@ -126,7 +126,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
   ownerState
 }) => _extends({
   '&:hover': {
-    backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -134,19 +134,19 @@ const SwitchSwitchBase = styled(SwitchBase, {
   }
 }, ownerState.color !== 'default' && {
   [`&.${switchClasses.checked}`]: {
-    color: theme.palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].main,
     '&:hover': {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${switchClasses.disabled}`]: {
-      color: theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)
+      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)}`
     }
   },
   [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
-    backgroundColor: theme.palette[ownerState.color].main
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
   }
 }));
 const SwitchTrack = styled('span', {
@@ -163,8 +163,8 @@ const SwitchTrack = styled('span', {
   transition: theme.transitions.create(['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
   }),
-  backgroundColor: theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white,
-  opacity: theme.palette.mode === 'light' ? 0.38 : 0.3
+  backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`,
+  opacity: theme.vars ? theme.vars.opacity.switchTrack : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`
 }));
 const SwitchThumb = styled('span', {
   name: 'MuiSwitch',
@@ -173,7 +173,7 @@ const SwitchThumb = styled('span', {
 })(({
   theme
 }) => ({
-  boxShadow: theme.shadows[1],
+  boxShadow: (theme.vars || theme).shadows[1],
   backgroundColor: 'currentColor',
   width: 20,
   height: 20,

package/Tab/Tab.d.ts

@@ -30,7 +30,6 @@ export type TabTypeMap<P = {}, D extends React.ElementType = 'div'> = ExtendButt
      * The icon to display.
      */
     icon?: string | React.ReactElement;
-
     /**
      * The position of the icon relative to the label.
      * @default 'top'

package/TableCell/TableCell.js

@@ -46,18 +46,18 @@ const TableCellRoot = styled('td', {
   verticalAlign: 'inherit',
   // Workaround for a rendering bug with spanned columns in Chrome 62.0.
   // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
-  borderBottom: `1px solid
+  borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
     ${theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)}`,
   textAlign: 'left',
   padding: 16
 }, ownerState.variant === 'head' && {
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   lineHeight: theme.typography.pxToRem(24),
   fontWeight: theme.typography.fontWeightMedium
 }, ownerState.variant === 'body' && {
-  color: theme.palette.text.primary
+  color: (theme.vars || theme).palette.text.primary
 }, ownerState.variant === 'footer' && {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   lineHeight: theme.typography.pxToRem(21),
   fontSize: theme.typography.pxToRem(12)
 }, ownerState.size === 'small' && {
@@ -89,7 +89,7 @@ const TableCellRoot = styled('td', {
   position: 'sticky',
   top: 0,
   zIndex: 2,
-  backgroundColor: theme.palette.background.default
+  backgroundColor: (theme.vars || theme).palette.background.default
 }));
 /**
  * The component renders a `<th>` element when the parent context is a header

package/Tabs/Tabs.js

@@ -426,6 +426,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       const tab = children[i];
 
       if (totalSize + tab[clientSize] > containerSize) {
+        // If the first item is longer than the container size, then only scroll
+        // by the container size.
+        if (i === 0) {
+          totalSize = containerSize;
+        }
+
         break;
       }
 
@@ -535,8 +541,16 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   React.useEffect(() => {
     const handleResize = debounce(() => {
-      updateIndicatorState();
-      updateScrollButtonState();
+      // If the Tabs component is replaced by Suspense with a fallback, the last
+      // ResizeObserver's handler that runs because of the change in the layout is trying to
+      // access a dom node that is no longer there (as the fallback component is being shown instead).
+      // See https://github.com/mui/material-ui/issues/33276
+      // TODO: Add tests that will ensure the component is not failing when
+      // replaced by Suspense with a fallback, once React is updated to version 18
+      if (tabsRef.current) {
+        updateIndicatorState();
+        updateScrollButtonState();
+      }
     });
     const win = ownerWindow(tabsRef.current);
     win.addEventListener('resize', handleResize);

package/Tooltip/Tooltip.js

@@ -117,7 +117,7 @@ const TooltipTooltip = styled('div', {
   theme,
   ownerState
 }) => _extends({
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` : alpha(theme.palette.grey[700], 0.92),
+  backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92),
   borderRadius: (theme.vars || theme).shape.borderRadius,
   color: (theme.vars || theme).palette.common.white,
   fontFamily: theme.typography.fontFamily,

package/index.js

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

package/legacy/Alert/Alert.js

@@ -55,20 +55,28 @@ var AlertRoot = styled(Paper, {
     display: 'flex',
     padding: '6px 16px'
   }, color && ownerState.variant === 'standard' && _defineProperty({
-    color: getColor(theme.palette[color].light, 0.6),
-    backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9)
-  }, "& .".concat(alertClasses.icon), {
+    color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
+    backgroundColor: theme.vars ? theme.vars.palette.Alert["".concat(color, "StandardBg")] : getBackgroundColor(theme.palette[color].light, 0.9)
+  }, "& .".concat(alertClasses.icon), theme.vars ? {
+    color: theme.vars.palette.Alert["".concat(color, "IconColor")]
+  } : {
     color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
   }), color && ownerState.variant === 'outlined' && _defineProperty({
-    color: getColor(theme.palette[color].light, 0.6),
-    border: "1px solid ".concat(theme.palette[color].light)
-  }, "& .".concat(alertClasses.icon), {
+    color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
+    border: "1px solid ".concat((theme.vars || theme).palette[color].light)
+  }, "& .".concat(alertClasses.icon), theme.vars ? {
+    color: theme.vars.palette.Alert["".concat(color, "IconColor")]
+  } : {
     color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
-  }), color && ownerState.variant === 'filled' && {
-    color: '#fff',
-    fontWeight: theme.typography.fontWeightMedium,
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main
-  });
+  }), color && ownerState.variant === 'filled' && _extends({
+    fontWeight: theme.typography.fontWeightMedium
+  }, theme.vars ? {
+    color: theme.vars.palette.Alert["".concat(color, "FilledColor")],
+    backgroundColor: theme.vars.palette.Alert["".concat(color, "FilledBg")]
+  } : {
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+    color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+  }));
 });
 var AlertIcon = styled('div', {
   name: 'MuiAlert',