@mui/material 5.8.1 → 5.8.4

package/Tabs/Tabs.js

@@ -417,10 +417,26 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scroll(scrollValue);
   };
 
+  const getFirstVisibleTab = tabs => {
+    const containerSize = tabsRef.current[clientSize];
+    const containerStartBound = Math.round(tabsRef.current[scrollStart]);
+    const containerEndBound = Math.round(containerStartBound + containerSize);
+    const offset = vertical ? 'offsetTop' : 'offsetLeft';
+    return tabs.find(tab => {
+      const centerPoint = tab[offset] + tab[clientSize] / 2;
+      return centerPoint >= containerStartBound && centerPoint <= containerEndBound;
+    });
+  };
+
   const getScrollSize = () => {
     const containerSize = tabsRef.current[clientSize];
     let totalSize = 0;
     const children = Array.from(tabListRef.current.children);
+    const firstVisibleTab = getFirstVisibleTab(children);
+
+    if (firstVisibleTab && firstVisibleTab[clientSize] > containerSize) {
+      return firstVisibleTab[clientSize];
+    }
 
     for (let i = 0; i < children.length; i += 1) {
       const tab = children[i];

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.1
+/** @license MUI v5.8.4
  *
  * 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

@@ -90,7 +90,9 @@ var AlertMessage = styled('div', {
     return styles.message;
   }
 })({
-  padding: '8px 0'
+  padding: '8px 0',
+  minWidth: 0,
+  overflow: 'auto'
 });
 var AlertAction = styled('div', {
   name: 'MuiAlert',

package/legacy/Button/buttonClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }
-var buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+var buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
 export default buttonClasses;

package/legacy/Checkbox/Checkbox.js

@@ -43,19 +43,19 @@ var CheckboxRoot = styled(SwitchBase, {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   }, ownerState.color !== 'default' && (_ref2 = {}, _defineProperty(_ref2, "&.".concat(checkboxClasses.checked, ", &.").concat(checkboxClasses.indeterminate), {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }), _defineProperty(_ref2, "&.".concat(checkboxClasses.disabled), {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }), _ref2));
 });
 

package/legacy/Grid/Grid.js

@@ -21,6 +21,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import requirePropFactory from '../utils/requirePropFactory';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useTheme from '../styles/useTheme';
 import GridContext from './GridContext';
 import gridClasses, { getGridUtilityClass } from './gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -193,26 +194,29 @@ export function generateColumnGap(_ref5) {
 
   return styles;
 }
-export function resolveSpacingClasses(spacing, container) {
+export function resolveSpacingStyles(spacing, breakpoints) {
   var styles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-  // in case of grid item or undefined/null or `spacing` <= 0
-  if (!container || !spacing || spacing <= 0) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
     return [];
   } // in case of string/number `spacing`
 
 
   if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
-    return [styles["spacing-xs-".concat(String(spacing))] || "spacing-xs-".concat(String(spacing))];
+    return [styles["spacing-xs-".concat(String(spacing))]];
   } // in case of object `spacing`
 
 
-  var xs = spacing.xs,
-      sm = spacing.sm,
-      md = spacing.md,
-      lg = spacing.lg,
-      xl = spacing.xl;
-  return [Number(xs) > 0 && (styles["spacing-xs-".concat(String(xs))] || "spacing-xs-".concat(String(xs))), Number(sm) > 0 && (styles["spacing-sm-".concat(String(sm))] || "spacing-sm-".concat(String(sm))), Number(md) > 0 && (styles["spacing-md-".concat(String(md))] || "spacing-md-".concat(String(md))), Number(lg) > 0 && (styles["spacing-lg-".concat(String(lg))] || "spacing-lg-".concat(String(lg))), Number(xl) > 0 && (styles["spacing-xl-".concat(String(xl))] || "spacing-xl-".concat(String(xl)))];
+  var spacingStyles = [];
+  breakpoints.forEach(function (breakpoint) {
+    var value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      spacingStyles.push(styles["spacing-".concat(breakpoint, "-").concat(String(value))]);
+    }
+  });
+  return spacingStyles;
 } // Default CSS values
 // flex: '0 1 auto',
 // flexDirection: 'row',
@@ -224,19 +228,29 @@ var GridRoot = styled('div', {
   name: 'MuiGrid',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
-    var _props$ownerState = props.ownerState,
-        container = _props$ownerState.container,
-        direction = _props$ownerState.direction,
-        item = _props$ownerState.item,
-        lg = _props$ownerState.lg,
-        md = _props$ownerState.md,
-        sm = _props$ownerState.sm,
-        spacing = _props$ownerState.spacing,
-        wrap = _props$ownerState.wrap,
-        xl = _props$ownerState.xl,
-        xs = _props$ownerState.xs,
-        zeroMinWidth = _props$ownerState.zeroMinWidth;
-    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth].concat(_toConsumableArray(resolveSpacingClasses(spacing, container, styles)), [direction !== 'row' && styles["direction-xs-".concat(String(direction))], wrap !== 'wrap' && styles["wrap-xs-".concat(String(wrap))], xs !== false && styles["grid-xs-".concat(String(xs))], sm !== false && styles["grid-sm-".concat(String(sm))], md !== false && styles["grid-md-".concat(String(md))], lg !== false && styles["grid-lg-".concat(String(lg))], xl !== false && styles["grid-xl-".concat(String(xl))]]);
+    var ownerState = props.ownerState;
+    var container = ownerState.container,
+        direction = ownerState.direction,
+        item = ownerState.item,
+        spacing = ownerState.spacing,
+        wrap = ownerState.wrap,
+        zeroMinWidth = ownerState.zeroMinWidth,
+        breakpoints = ownerState.breakpoints;
+    var spacingStyles = []; // in case of grid item
+
+    if (container) {
+      spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
+    }
+
+    var breakpointsStyles = [];
+    breakpoints.forEach(function (breakpoint) {
+      var value = ownerState[breakpoint];
+
+      if (value) {
+        breakpointsStyles.push(styles["grid-".concat(breakpoint, "-").concat(String(value))]);
+      }
+    });
+    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth].concat(_toConsumableArray(spacingStyles), [direction !== 'row' && styles["direction-xs-".concat(String(direction))], wrap !== 'wrap' && styles["wrap-xs-".concat(String(wrap))]], breakpointsStyles);
   }
 })(function (_ref7) {
   var ownerState = _ref7.ownerState;
@@ -255,22 +269,55 @@ var GridRoot = styled('div', {
     flexWrap: ownerState.wrap
   });
 }, generateDirection, generateRowGap, generateColumnGap, generateGrid);
+export function resolveSpacingClasses(spacing, breakpoints) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
+    return [];
+  } // in case of string/number `spacing`
+
+
+  if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
+    return ["spacing-xs-".concat(String(spacing))];
+  } // in case of object `spacing`
+
+
+  var classes = [];
+  breakpoints.forEach(function (breakpoint) {
+    var value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      var className = "spacing-".concat(breakpoint, "-").concat(String(value));
+      classes.push(className);
+    }
+  });
+  return classes;
+}
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
       container = ownerState.container,
       direction = ownerState.direction,
       item = ownerState.item,
-      lg = ownerState.lg,
-      md = ownerState.md,
-      sm = ownerState.sm,
       spacing = ownerState.spacing,
       wrap = ownerState.wrap,
-      xl = ownerState.xl,
-      xs = ownerState.xs,
-      zeroMinWidth = ownerState.zeroMinWidth;
+      zeroMinWidth = ownerState.zeroMinWidth,
+      breakpoints = ownerState.breakpoints;
+  var spacingClasses = []; // in case of grid item
+
+  if (container) {
+    spacingClasses = resolveSpacingClasses(spacing, breakpoints);
+  }
+
+  var breakpointsClasses = [];
+  breakpoints.forEach(function (breakpoint) {
+    var value = ownerState[breakpoint];
+
+    if (value) {
+      breakpointsClasses.push("grid-".concat(breakpoint, "-").concat(String(value)));
+    }
+  });
   var slots = {
-    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth'].concat(_toConsumableArray(resolveSpacingClasses(spacing, container)), [direction !== 'row' && "direction-xs-".concat(String(direction)), wrap !== 'wrap' && "wrap-xs-".concat(String(wrap)), xs !== false && "grid-xs-".concat(String(xs)), sm !== false && "grid-sm-".concat(String(sm)), md !== false && "grid-md-".concat(String(md)), lg !== false && "grid-lg-".concat(String(lg)), xl !== false && "grid-xl-".concat(String(xl))])
+    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth'].concat(_toConsumableArray(spacingClasses), [direction !== 'row' && "direction-xs-".concat(String(direction)), wrap !== 'wrap' && "wrap-xs-".concat(String(wrap))], breakpointsClasses)
   };
   return composeClasses(slots, getGridUtilityClass, classes);
 };
@@ -280,6 +327,10 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     props: inProps,
     name: 'MuiGrid'
   });
+
+  var _useTheme = useTheme(),
+      breakpoints = _useTheme.breakpoints;
+
   var props = extendSxProp(themeProps);
 
   var className = props.className,
@@ -293,45 +344,43 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
       direction = _props$direction === void 0 ? 'row' : _props$direction,
       _props$item = props.item,
       item = _props$item === void 0 ? false : _props$item,
-      _props$lg = props.lg,
-      lg = _props$lg === void 0 ? false : _props$lg,
-      _props$md = props.md,
-      md = _props$md === void 0 ? false : _props$md,
       rowSpacingProp = props.rowSpacing,
-      _props$sm = props.sm,
-      sm = _props$sm === void 0 ? false : _props$sm,
       _props$spacing = props.spacing,
       spacing = _props$spacing === void 0 ? 0 : _props$spacing,
       _props$wrap = props.wrap,
       wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,
-      _props$xl = props.xl,
-      xl = _props$xl === void 0 ? false : _props$xl,
-      _props$xs = props.xs,
-      xs = _props$xs === void 0 ? false : _props$xs,
       _props$zeroMinWidth = props.zeroMinWidth,
       zeroMinWidth = _props$zeroMinWidth === void 0 ? false : _props$zeroMinWidth,
-      other = _objectWithoutProperties(props, ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "lg", "md", "rowSpacing", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"]);
+      other = _objectWithoutProperties(props, ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"]);
 
   var rowSpacing = rowSpacingProp || spacing;
   var columnSpacing = columnSpacingProp || spacing;
   var columnsContext = React.useContext(GridContext); // columns set with default breakpoint unit of 12
 
   var columns = container ? columnsProp || 12 : columnsContext;
+  var breakpointsValues = {};
+
+  var otherFiltered = _extends({}, other);
+
+  breakpoints.keys.forEach(function (breakpoint) {
+    if (other[breakpoint] != null) {
+      breakpointsValues[breakpoint] = other[breakpoint];
+      delete otherFiltered[breakpoint];
+    }
+  });
 
   var ownerState = _extends({}, props, {
     columns: columns,
     container: container,
     direction: direction,
     item: item,
-    lg: lg,
-    md: md,
-    sm: sm,
     rowSpacing: rowSpacing,
     columnSpacing: columnSpacing,
     wrap: wrap,
-    xl: xl,
-    xs: xs,
-    zeroMinWidth: zeroMinWidth
+    zeroMinWidth: zeroMinWidth,
+    spacing: spacing
+  }, breakpointsValues, {
+    breakpoints: breakpoints.keys
   });
 
   var classes = useUtilityClasses(ownerState);
@@ -342,7 +391,7 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
       className: clsx(classes.root, className),
       as: component,
       ref: ref
-    }, other))
+    }, otherFiltered))
   });
 });
 process.env.NODE_ENV !== "production" ? Grid.propTypes

package/legacy/Grow/Grow.js

@@ -23,12 +23,12 @@ var styles = {
     transform: 'none'
   }
 };
-/**
- * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
- * Remove this workaround once the WebKit bug fix is released.
+/*
+ TODO v6: remove
+ Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
  */
 
-var isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+var isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
 /**
  * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
  * [Popover](/material-ui/react-popover/) components.

package/legacy/Hidden/withWidth.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getDisplayName } from '@mui/utils';
 import { getThemeProps } from '@mui/system';
-import hoistNonReactStatics from 'hoist-non-react-statics';
 import useTheme from '../styles/useTheme';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
 import useMediaQuery from '../useMediaQuery';
@@ -119,7 +118,6 @@ var withWidth = function withWidth() {
       WithWidth.displayName = "WithWidth(".concat(getDisplayName(Component), ")");
     }
 
-    hoistNonReactStatics(WithWidth, Component);
     return WithWidth;
   };
 };

package/legacy/InputLabel/InputLabel.js

@@ -207,6 +207,12 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   shrink: PropTypes.bool,
 
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: PropTypes.oneOf(['normal', 'small']),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Link/Link.js

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { elementTypeAcceptingRef } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -15,18 +14,8 @@ import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
+import getTextDecoration, { colorTransformations } from './getTextDecoration';
 import { jsx as _jsx } from "react/jsx-runtime";
-var colorTransformations = {
-  primary: 'primary.main',
-  textPrimary: 'text.primary',
-  secondary: 'secondary.main',
-  textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-
-var transformDeprecatedColors = function transformDeprecatedColors(color) {
-  return colorTransformations[color] || color;
-};
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
@@ -49,7 +38,6 @@ var LinkRoot = styled(Typography, {
 })(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
-  var color = getPath(theme, "palette.".concat(transformDeprecatedColors(ownerState.color))) || ownerState.color;
   return _extends({}, ownerState.underline === 'none' && {
     textDecoration: 'none'
   }, ownerState.underline === 'hover' && {
@@ -57,13 +45,18 @@ var LinkRoot = styled(Typography, {
     '&:hover': {
       textDecoration: 'underline'
     }
-  }, ownerState.underline === 'always' && {
-    textDecoration: 'underline',
-    textDecorationColor: color !== 'inherit' ? alpha(color, 0.4) : undefined,
+  }, ownerState.underline === 'always' && _extends({
+    textDecoration: 'underline'
+  }, ownerState.color !== 'inherit' && {
+    textDecorationColor: getTextDecoration({
+      theme: theme,
+      ownerState: ownerState
+    })
+  }, {
     '&:hover': {
       textDecorationColor: 'inherit'
     }
-  }, ownerState.component === 'button' && _defineProperty({
+  }), ownerState.component === 'button' && _defineProperty({
     position: 'relative',
     WebkitTapHighlightColor: 'transparent',
     backgroundColor: 'transparent',

package/legacy/Link/getTextDecoration.js

@@ -0,0 +1,28 @@
+import { alpha, getPath } from '@mui/system';
+export var colorTransformations = {
+  primary: 'primary.main',
+  textPrimary: 'text.primary',
+  secondary: 'secondary.main',
+  textSecondary: 'text.secondary',
+  error: 'error.main'
+};
+
+var transformDeprecatedColors = function transformDeprecatedColors(color) {
+  return colorTransformations[color] || color;
+};
+
+var getTextDecoration = function getTextDecoration(_ref) {
+  var theme = _ref.theme,
+      ownerState = _ref.ownerState;
+  var transformedColor = transformDeprecatedColors(ownerState.color);
+  var color = getPath(theme, "palette.".concat(transformedColor), false) || ownerState.color;
+  var channelColor = getPath(theme, "palette.".concat(transformedColor, "Channel"));
+
+  if ('vars' in theme && channelColor) {
+    return "rgba(".concat(channelColor, " / 0.4)");
+  }
+
+  return alpha(color, 0.4);
+};
+
+export default getTextDecoration;

package/legacy/Popover/index.js

@@ -1,3 +1,4 @@
 export { default } from './Popover';
+export * from './Popover';
 export { default as popoverClasses } from './popoverClasses';
 export * from './popoverClasses';

package/legacy/Slider/Slider.js

@@ -283,7 +283,6 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    top: -10,
     transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
@@ -294,20 +293,34 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     alignItems: 'center',
     justifyContent: 'center',
     padding: '0.25rem 0.75rem'
-  }, ownerState.size === 'small' && {
-    fontSize: theme.typography.pxToRem(12),
-    padding: '0.25rem 0.5rem'
-  }, {
+  }, ownerState.orientation === 'horizontal' && {
+    top: '-10px',
     '&:before': {
       position: 'absolute',
       content: '""',
       width: 8,
       height: 8,
+      transform: 'translate(-50%, 50%) rotate(45deg)',
+      backgroundColor: 'inherit',
       bottom: 0,
-      left: '50%',
+      left: '50%'
+    }
+  }, ownerState.orientation === 'vertical' && {
+    right: '30px',
+    top: '25px',
+    '&:before': {
+      position: 'absolute',
+      content: '""',
+      width: 8,
+      height: 8,
       transform: 'translate(-50%, 50%) rotate(45deg)',
-      backgroundColor: 'inherit'
+      backgroundColor: 'inherit',
+      right: '-20%',
+      top: '25%'
     }
+  }, ownerState.size === 'small' && {
+    fontSize: theme.typography.pxToRem(12),
+    padding: '0.25rem 0.5rem'
   });
 });
 process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes
@@ -585,12 +598,14 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
     thumb: PropTypes.object,
     track: PropTypes.object,
     valueLabel: 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/legacy/Snackbar/Snackbar.js

@@ -35,17 +35,11 @@ var SnackbarRoot = styled('div', {
 })(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
-
-  var center = _extends({}, !ownerState.isRtl && {
+  var 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',
@@ -66,19 +60,13 @@ var 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 && {
-    right: 24,
-    left: 'auto'
-  }), ownerState.anchorOrigin.horizontal === 'right' && _extends({}, !ownerState.isRtl && {
+  }, ownerState.anchorOrigin.horizontal === 'right' && {
     right: 24,
     left: 'auto'
-  }, ownerState.isRtl && {
-    left: 24,
-    right: 'auto'
-  }))));
+  })));
 });
 var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   var props = useThemeProps({
@@ -126,14 +114,11 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEnter", "onExited"]),
       other = _objectWithoutProperties(props, ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]);
 
-  var isRtl = theme.direction === 'rtl';
-
   var ownerState = _extends({}, props, {
     anchorOrigin: {
       vertical: vertical,
       horizontal: horizontal
-    },
-    isRtl: isRtl
+    }
   });
 
   var classes = useUtilityClasses(ownerState);

package/legacy/Stack/Stack.js

@@ -1,5 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -61,7 +62,7 @@ export var style = function style(_ref) {
   if (ownerState.spacing) {
     var transformer = createUnarySpacing(theme);
     var base = Object.keys(theme.breakpoints.values).reduce(function (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/legacy/StepIcon/StepIcon.js

@@ -124,8 +124,9 @@ var 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/legacy/Tabs/Tabs.js

@@ -429,10 +429,26 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scroll(scrollValue);
   };
 
+  var getFirstVisibleTab = function getFirstVisibleTab(tabs) {
+    var containerSize = tabsRef.current[clientSize];
+    var containerStartBound = Math.round(tabsRef.current[scrollStart]);
+    var containerEndBound = Math.round(containerStartBound + containerSize);
+    var offset = vertical ? 'offsetTop' : 'offsetLeft';
+    return tabs.find(function (tab) {
+      var centerPoint = tab[offset] + tab[clientSize] / 2;
+      return centerPoint >= containerStartBound && centerPoint <= containerEndBound;
+    });
+  };
+
   var getScrollSize = function getScrollSize() {
     var containerSize = tabsRef.current[clientSize];
     var totalSize = 0;
     var children = Array.from(tabListRef.current.children);
+    var firstVisibleTab = getFirstVisibleTab(children);
+
+    if (firstVisibleTab && firstVisibleTab[clientSize] > containerSize) {
+      return firstVisibleTab[clientSize];
+    }
 
     for (var i = 0; i < children.length; i += 1) {
       var tab = children[i];

package/legacy/index.js

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