@mui/material 5.8.3 → 5.8.4

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.3
+/** @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.
@@ -1330,32 +1330,6 @@
   var reactIs_5 = reactIs.Memo;
   reactIs.isValidElementType;
 
-  /**
-   * Copyright 2015, Yahoo! Inc.
-   * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
-   */
-  var REACT_STATICS = {
-    childContextTypes: true,
-    contextType: true,
-    contextTypes: true,
-    defaultProps: true,
-    displayName: true,
-    getDefaultProps: true,
-    getDerivedStateFromError: true,
-    getDerivedStateFromProps: true,
-    mixins: true,
-    propTypes: true,
-    type: true
-  };
-  var KNOWN_STATICS = {
-    name: true,
-    length: true,
-    prototype: true,
-    caller: true,
-    callee: true,
-    arguments: true,
-    arity: true
-  };
   var FORWARD_REF_STATICS = {
     '$$typeof': true,
     render: true,
@@ -1375,61 +1349,6 @@
   TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
   TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
 
-  function getStatics(component) {
-    // React v16.11 and below
-    if (reactIs.isMemo(component)) {
-      return MEMO_STATICS;
-    } // React v16.12 and above
-
-
-    return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
-  }
-
-  var defineProperty = Object.defineProperty;
-  var getOwnPropertyNames = Object.getOwnPropertyNames;
-  var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
-  var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-  var getPrototypeOf = Object.getPrototypeOf;
-  var objectPrototype = Object.prototype;
-  function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
-    if (typeof sourceComponent !== 'string') {
-      // don't hoist over string (html) components
-      if (objectPrototype) {
-        var inheritedComponent = getPrototypeOf(sourceComponent);
-
-        if (inheritedComponent && inheritedComponent !== objectPrototype) {
-          hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
-        }
-      }
-
-      var keys = getOwnPropertyNames(sourceComponent);
-
-      if (getOwnPropertySymbols$1) {
-        keys = keys.concat(getOwnPropertySymbols$1(sourceComponent));
-      }
-
-      var targetStatics = getStatics(targetComponent);
-      var sourceStatics = getStatics(sourceComponent);
-
-      for (var i = 0; i < keys.length; ++i) {
-        var key = keys[i];
-
-        if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
-          var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
-
-          try {
-            // Avoid failures from read-only properties
-            defineProperty(targetComponent, key, descriptor);
-          } catch (e) {}
-        }
-      }
-    }
-
-    return targetComponent;
-  }
-
-  var hoistNonReactStatics_cjs = hoistNonReactStatics;
-
   var isBrowser$4 = typeof document !== 'undefined';
   function getRegisteredStyles(registered, registeredStyles, classNames) {
     var rawClassName = '';
@@ -4793,7 +4712,7 @@
 
     if (element == null || // When server-side rendering React doesn't warn either.
     // This is not an accurate check for SSR.
-    // This is only in place for emotion compat.
+    // This is only in place for Emotion compat.
     // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
     typeof window === 'undefined') {
       return null;
@@ -5762,9 +5681,11 @@
       if (Array.isArray(breakpointValues)) {
         acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
         previous = i;
-      } else {
-        acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+      } else if (typeof breakpointValues === 'object') {
+        acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
         previous = breakpoint;
+      } else {
+        acc[breakpoint] = breakpointValues;
       }
 
       return acc;
@@ -6468,7 +6389,7 @@
       } = props || {};
 
       if (!sx) {
-        return null; // emotion & styled-components will neglect null
+        return null; // Emotion & styled-components will neglect null
       }
       /*
        * Receive `sxInput` as object or callback
@@ -7063,7 +6984,7 @@
 
       const muiStyledResolver = (styleArg, ...expressions) => {
         const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
-          // On the server emotion doesn't use React.forwardRef for creating components, so the created
+          // On the server Emotion doesn't use React.forwardRef for creating components, so the created
           // component stays as a function. This condition makes sure that we do not interpolate functions
           // which are basically components used as a selectors.
           // eslint-disable-next-line no-underscore-dangle
@@ -7122,7 +7043,7 @@
 
           transformedStyleArg = [...styleArg, ...placeholders];
           transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-        } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+        } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         // eslint-disable-next-line no-underscore-dangle
@@ -7243,7 +7164,7 @@
    * Returns an object with the type and values of a color.
    *
    * Note: Does not support rgb % values.
-   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
    * @returns {object} - A MUI color object: {type: string, values: number[]}
    */
 
@@ -7295,7 +7216,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   /**
    * Returns a channel created from the input color.
    *
-   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
    * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
    */
 
@@ -7306,7 +7227,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   /**
    * Converts a color object with type and values to a string.
    * @param {object} color - Decomposed color
-   * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+   * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
    * @param {array} color.values - [n,n,n] or [n,n,n,n]
    * @returns {string} A CSS color string
    */
@@ -12378,11 +12299,23 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
   }
 
+  function isAriaHiddenForbiddenOnElement(element) {
+    // The forbidden HTML tags are the ones from ARIA specification that
+    // can be children of body and can't have aria-hidden attribute.
+    // cf. https://www.w3.org/TR/html-aria/#docconformance
+    const forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK'];
+    const isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
+    const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
+    return isForbiddenTagName || isInputHidden;
+  }
+
   function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude = [], show) {
     const blacklist = [mountElement, currentElement, ...elementsToExclude];
-    const blacklistTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE'];
     [].forEach.call(container.children, element => {
-      if (blacklist.indexOf(element) === -1 && blacklistTagNames.indexOf(element.tagName) === -1) {
+      const isNotExcludedElement = blacklist.indexOf(element) === -1;
+      const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
+
+      if (isNotExcludedElement && isNotForbiddenElement) {
         ariaHidden(element, show);
       }
     });
@@ -12534,7 +12467,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
     }
 
-    remove(modal) {
+    remove(modal, ariaHiddenState = true) {
       const modalIndex = this.modals.indexOf(modal);
 
       if (modalIndex === -1) {
@@ -12554,7 +12487,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
         if (modal.modalRef) {
           // In case the modal wasn't in the DOM yet.
-          ariaHidden(modal.modalRef, true);
+          ariaHidden(modal.modalRef, ariaHiddenState);
         }
 
         ariaHiddenSiblings(containerInfo.container, modal.mount, modal.modalRef, containerInfo.hiddenSiblings, false);
@@ -12982,6 +12915,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    */
 
   const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUnstyled(props, ref) {
+    var _props$ariaHidden;
+
     const {
       BackdropComponent,
       BackdropProps,
@@ -13022,6 +12957,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const modalRef = React__namespace.useRef(null);
     const handleRef = useForkRef(modalRef, ref);
     const hasTransition = getHasTransition(props);
+    const ariaHiddenProp = (_props$ariaHidden = props['aria-hidden']) != null ? _props$ariaHidden : true;
 
     const getDoc = () => ownerDocument(mountNodeRef.current);
 
@@ -13058,12 +12994,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (open && isTopModal()) {
         handleMounted();
       } else {
-        ariaHidden(modalRef.current, true);
+        ariaHidden(modalRef.current, ariaHiddenProp);
       }
     });
     const handleClose = React__namespace.useCallback(() => {
-      manager.remove(getModal());
-    }, [manager]);
+      manager.remove(getModal(), ariaHiddenProp);
+    }, [manager, ariaHiddenProp]);
     React__namespace.useEffect(() => {
       return () => {
         handleClose();
@@ -13460,7 +13396,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       })]
     }));
   }
-
   SliderValueLabelUnstyled.propTypes = {
     children: PropTypes.element.isRequired,
     className: PropTypes.string,
@@ -14451,12 +14386,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       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'])
       })
     }),
@@ -24827,7 +24764,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getButtonUtilityClass(slot) {
     return generateUtilityClass('MuiButton', slot);
   }
-  const 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']);
+  const 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']);
   var buttonClasses$1 = buttonClasses;
 
   /**
@@ -30968,7 +30905,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
   var gridClasses$1 = gridClasses;
 
-  const _excluded$1d = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "lg", "md", "rowSpacing", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"];
+  const _excluded$1d = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
 
   function getOffset(val) {
     const parse = parseFloat(val);
@@ -31148,26 +31085,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     return styles;
   }
-  function resolveSpacingClasses(spacing, container, styles = {}) {
-    // in case of grid item or undefined/null or `spacing` <= 0
-    if (!container || !spacing || spacing <= 0) {
+  function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
+    // 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-${String(spacing)}`] || `spacing-xs-${String(spacing)}`];
+      return [styles[`spacing-xs-${String(spacing)}`]];
     } // in case of object `spacing`
 
 
-    const {
-      xs,
-      sm,
-      md,
-      lg,
-      xl
-    } = spacing;
-    return [Number(xs) > 0 && (styles[`spacing-xs-${String(xs)}`] || `spacing-xs-${String(xs)}`), Number(sm) > 0 && (styles[`spacing-sm-${String(sm)}`] || `spacing-sm-${String(sm)}`), Number(md) > 0 && (styles[`spacing-md-${String(md)}`] || `spacing-md-${String(md)}`), Number(lg) > 0 && (styles[`spacing-lg-${String(lg)}`] || `spacing-lg-${String(lg)}`), Number(xl) > 0 && (styles[`spacing-xl-${String(xl)}`] || `spacing-xl-${String(xl)}`)];
+    const spacingStyles = [];
+    breakpoints.forEach(breakpoint => {
+      const value = spacing[breakpoint];
+
+      if (Number(value) > 0) {
+        spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
+      }
+    });
+    return spacingStyles;
   } // Default CSS values
   // flex: '0 1 auto',
   // flexDirection: 'row',
@@ -31179,20 +31117,33 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     name: 'MuiGrid',
     slot: 'Root',
     overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
       const {
         container,
         direction,
         item,
-        lg,
-        md,
-        sm,
         spacing,
         wrap,
-        xl,
-        xs,
-        zeroMinWidth
-      } = props.ownerState;
-      return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...resolveSpacingClasses(spacing, container, styles), direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], xs !== false && styles[`grid-xs-${String(xs)}`], sm !== false && styles[`grid-sm-${String(sm)}`], md !== false && styles[`grid-md-${String(md)}`], lg !== false && styles[`grid-lg-${String(lg)}`], xl !== false && styles[`grid-xl-${String(xl)}`]];
+        zeroMinWidth,
+        breakpoints
+      } = ownerState;
+      let spacingStyles = []; // in case of grid item
+
+      if (container) {
+        spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
+      }
+
+      const breakpointsStyles = [];
+      breakpoints.forEach(breakpoint => {
+        const value = ownerState[breakpoint];
+
+        if (value) {
+          breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
+        }
+      });
+      return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...spacingStyles, direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], ...breakpointsStyles];
     }
   })(({
     ownerState
@@ -31210,6 +31161,29 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.wrap !== 'wrap' && {
     flexWrap: ownerState.wrap
   }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
+  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-${String(spacing)}`];
+    } // in case of object `spacing`
+
+
+    const classes = [];
+    breakpoints.forEach(breakpoint => {
+      const value = spacing[breakpoint];
+
+      if (Number(value) > 0) {
+        const className = `spacing-${breakpoint}-${String(value)}`;
+        classes.push(className);
+      }
+    });
+    return classes;
+  }
 
   const useUtilityClasses$_ = ownerState => {
     const {
@@ -31217,17 +31191,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       container,
       direction,
       item,
-      lg,
-      md,
-      sm,
       spacing,
       wrap,
-      xl,
-      xs,
-      zeroMinWidth
+      zeroMinWidth,
+      breakpoints
     } = ownerState;
+    let spacingClasses = []; // in case of grid item
+
+    if (container) {
+      spacingClasses = resolveSpacingClasses(spacing, breakpoints);
+    }
+
+    const breakpointsClasses = [];
+    breakpoints.forEach(breakpoint => {
+      const value = ownerState[breakpoint];
+
+      if (value) {
+        breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
+      }
+    });
     const slots = {
-      root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...resolveSpacingClasses(spacing, container), direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
+      root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...spacingClasses, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...breakpointsClasses]
     };
     return composeClasses(slots, getGridUtilityClass, classes);
   };
@@ -31237,6 +31221,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       props: inProps,
       name: 'MuiGrid'
     });
+    const {
+      breakpoints
+    } = useTheme();
     const props = extendSxProp(themeProps);
 
     const {
@@ -31247,14 +31234,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       container = false,
       direction = 'row',
       item = false,
-      lg = false,
-      md = false,
       rowSpacing: rowSpacingProp,
-      sm = false,
       spacing = 0,
       wrap = 'wrap',
-      xl = false,
-      xs = false,
       zeroMinWidth = false
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1d);
@@ -31264,21 +31246,29 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const columnsContext = React__namespace.useContext(GridContext$1); // columns set with default breakpoint unit of 12
 
     const columns = container ? columnsProp || 12 : columnsContext;
+    const breakpointsValues = {};
+
+    const otherFiltered = _extends({}, other);
+
+    breakpoints.keys.forEach(breakpoint => {
+      if (other[breakpoint] != null) {
+        breakpointsValues[breakpoint] = other[breakpoint];
+        delete otherFiltered[breakpoint];
+      }
+    });
 
     const ownerState = _extends({}, props, {
       columns,
       container,
       direction,
       item,
-      lg,
-      md,
-      sm,
       rowSpacing,
       columnSpacing,
       wrap,
-      xl,
-      xs,
-      zeroMinWidth
+      zeroMinWidth,
+      spacing
+    }, breakpointsValues, {
+      breakpoints: breakpoints.keys
     });
 
     const classes = useUtilityClasses$_(ownerState);
@@ -31289,7 +31279,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className: clsx(classes.root, className),
         as: component,
         ref: ref
-      }, other))
+      }, otherFiltered))
     });
   });
   Grid.propTypes
@@ -31478,10 +31468,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   /*
    TODO v6: remove
    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.
    */
 
-  const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+  const 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.
@@ -31963,7 +31952,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       WithWidth.displayName = `WithWidth(${getDisplayName(Component)})`;
     }
 
-    hoistNonReactStatics_cjs(WithWidth, Component);
     return WithWidth;
   };
 
@@ -34331,7 +34319,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const linkClasses = generateUtilityClasses('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
   var linkClasses$1 = linkClasses;
 
-  const _excluded$10 = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
   const colorTransformations = {
     primary: 'primary.main',
     textPrimary: 'text.primary',
@@ -34344,6 +34331,25 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return colorTransformations[color] || color;
   };
 
+  const getTextDecoration = ({
+    theme,
+    ownerState
+  }) => {
+    const transformedColor = transformDeprecatedColors(ownerState.color);
+    const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
+    const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
+
+    if ('vars' in theme && channelColor) {
+      return `rgba(${channelColor} / 0.4)`;
+    }
+
+    return alpha(color, 0.4);
+  };
+
+  var getTextDecoration$1 = getTextDecoration;
+
+  const _excluded$10 = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
+
   const useUtilityClasses$Q = ownerState => {
     const {
       classes,
@@ -34370,7 +34376,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    const color = getPath(theme, `palette.${transformDeprecatedColors(ownerState.color)}`) || ownerState.color;
     return _extends({}, ownerState.underline === 'none' && {
       textDecoration: 'none'
     }, ownerState.underline === 'hover' && {
@@ -34378,13 +34383,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       '&: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$1({
+        theme,
+        ownerState
+      })
+    }, {
       '&:hover': {
         textDecorationColor: 'inherit'
       }
-    }, ownerState.component === 'button' && {
+    }), ownerState.component === 'button' && {
       position: 'relative',
       WebkitTapHighlightColor: 'transparent',
       backgroundColor: 'transparent',
@@ -42010,12 +42020,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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'])
       })
     }),
@@ -42361,16 +42373,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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',
@@ -42392,19 +42399,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         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'
-      }))
+      })
     });
   });
   const Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
@@ -42451,14 +42452,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$z),
           other = _objectWithoutPropertiesLoose(props, _excluded2$2);
 
-    const isRtl = theme.direction === 'rtl';
-
     const ownerState = _extends({}, props, {
       anchorOrigin: {
         vertical,
         horizontal
-      },
-      isRtl
+      }
     });
 
     const classes = useUtilityClasses$s(ownerState);
@@ -44820,7 +44818,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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;
         }
 
@@ -45263,8 +45261,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         })), /*#__PURE__*/jsxRuntime_1(StepIconText, {
           className: classes.text,
           x: "12",
-          y: "16",
+          y: "12",
           textAnchor: "middle",
+          dominantBaseline: "central",
           ownerState: ownerState,
           children: icon
         })]
@@ -49824,10 +49823,26 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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];
@@ -51520,6 +51535,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getMobileStepperUtilityClass = getMobileStepperUtilityClass;
   exports.getModalUtilityClass = getModalUtilityClass;
   exports.getNativeSelectUtilityClasses = getNativeSelectUtilityClasses;
+  exports.getOffsetLeft = getOffsetLeft;
+  exports.getOffsetTop = getOffsetTop;
   exports.getOutlinedInputUtilityClass = getOutlinedInputUtilityClass;
   exports.getPaginationItemUtilityClass = getPaginationItemUtilityClass;
   exports.getPaginationUtilityClass = getPaginationUtilityClass;