@mui/material 5.8.1 → 5.8.4

package/umd/material-ui.development.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.
@@ -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
    */
@@ -7711,9 +7632,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
-  const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
-  const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+  const DEFAULT_MODE_STORAGE_KEY = 'mode';
+  const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+  const DEFAULT_ATTRIBUTE = 'data-color-scheme';
   function getInitColorSchemeScript$1(options) {
     const {
       enableSystem = false,
@@ -8010,6 +7931,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   function createCssVarsProvider(options) {
     const {
       theme: defaultTheme = {},
+      attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
+      modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+      colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
       defaultMode: desisgnSystemMode = 'light',
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -8039,9 +7963,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       children,
       theme: themeProp = defaultTheme,
       prefix = designSystemPrefix,
-      modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-      colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-      attribute = DEFAULT_ATTRIBUTE,
+      modeStorageKey = defaultModeStorageKey,
+      colorSchemeStorageKey = defaultColorSchemeStorageKey,
+      attribute = defaultAttribute,
       defaultMode = desisgnSystemMode,
       defaultColorScheme = designSystemColorScheme,
       disableTransitionOnChange = designSystemTransitionOnChange,
@@ -8109,7 +8033,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         colorSchemes,
         prefix,
         vars: rootVars,
-        getCssVar: createGetCssVar(prefix)
+        getCssVar: createGetCssVar(prefix),
+        getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
       });
       const defaultColorSchemeStyleSheet = {};
       const otherColorSchemesStyleSheet = {};
@@ -8299,10 +8224,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        */
       theme: PropTypes.object
     } ;
+
+    const getInitColorSchemeScript = params => getInitColorSchemeScript$1(_extends({
+      attribute: defaultAttribute,
+      colorSchemeStorageKey: defaultColorSchemeStorageKey,
+      modeStorageKey: defaultModeStorageKey
+    }, params));
+
     return {
       CssVarsProvider,
       useColorScheme,
-      getInitColorSchemeScript: getInitColorSchemeScript$1
+      getInitColorSchemeScript
     };
   }
 
@@ -9591,13 +9523,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  function useBadge(props) {
+  function useBadge(parameters) {
     const {
       badgeContent: badgeContentProp,
       invisible: invisibleProp = false,
       max: maxProp = 99,
       showZero = false
-    } = props;
+    } = parameters;
     const prevProps = usePreviousProps$1({
       badgeContent: badgeContentProp,
       max: maxProp
@@ -9611,7 +9543,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const {
       badgeContent,
       max = maxProp
-    } = invisible ? prevProps : props;
+    } = invisible ? prevProps : parameters;
     const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
     return {
       badgeContent,
@@ -9638,8 +9570,21 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
     return composeClasses(slots, getBadgeUnstyledUtilityClass, undefined);
   };
+  /**
+   *
+   * Demos:
+   *
+   * - [Badge](https://mui.com/base/react-badge/)
+   *
+   * API:
+   *
+   * - [BadgeUnstyled API](https://mui.com/base/api/badge-unstyled/)
+   */
+
 
   const BadgeUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BadgeUnstyled(props, ref) {
+    var _componentsProps$root, _componentsProps$badg;
+
     const {
       component,
       children,
@@ -9669,15 +9614,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     const classes = useUtilityClasses$1O(ownerState);
     const Root = component || components.Root || 'span';
-    const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
+    const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root, {
+      ref,
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className)
+    }), ownerState);
     const Badge = components.Badge || 'span';
-    const badgeProps = appendOwnerState(Badge, componentsProps.badge, ownerState);
+    const badgeProps = appendOwnerState(Badge, _extends({}, componentsProps.badge, {
+      className: clsx(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
+    }), ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
-      ref: ref
-    }, other, {
-      className: clsx(classes.root, rootProps.className, className),
       children: [children, /*#__PURE__*/jsxRuntime_1(Badge, _extends({}, badgeProps, {
-        className: clsx(classes.badge, badgeProps.className),
         children: displayValue
       }))]
     }));
@@ -9687,7 +9633,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
     // ----------------------------------------------------------------------
 
     /**
@@ -12353,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);
       }
     });
@@ -12509,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) {
@@ -12529,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);
@@ -12957,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,
@@ -12997,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);
 
@@ -13033,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();
@@ -13435,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,
@@ -13610,13 +13570,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return cachedSupportsTouchActionNone;
   }
 
-  function useSlider(props) {
+  function useSlider(parameters) {
     const {
-      ref,
       'aria-labelledby': ariaLabelledby,
       defaultValue,
-      disableSwap = false,
       disabled = false,
+      disableSwap = false,
+      isRtl = false,
       marks: marksProp = false,
       max = 100,
       min = 0,
@@ -13624,12 +13584,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onChange,
       onChangeCommitted,
       orientation = 'horizontal',
+      ref,
       scale = Identity$1,
       step = 1,
       tabIndex,
-      value: valueProp,
-      isRtl = false
-    } = props;
+      value: valueProp
+    } = parameters;
     const touchId = React__namespace.useRef(); // We can't use the :active browser pseudo-classes.
     // - The active state isn't triggered when clicking on the rail.
     // - The active state isn't transferred when inversing a range slider.
@@ -14052,7 +14012,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const trackOffset = valueToPercent(range ? values[0] : min, min, max);
     const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
 
-    const getRootProps = otherHandlers => {
+    const getRootProps = (otherHandlers = {}) => {
       const ownEventHandlers = {
         onMouseDown: createHandleMouseDown(otherHandlers || {})
       };
@@ -14079,7 +14039,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       setOpen(-1);
     };
 
-    const getThumbProps = otherHandlers => {
+    const getThumbProps = (otherHandlers = {}) => {
       const ownEventHandlers = {
         onMouseOver: createHandleMouseOver(otherHandlers || {}),
         onMouseLeave: createHandleMouseLeave(otherHandlers || {})
@@ -14090,7 +14050,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       return _extends({}, mergedEventHandlers);
     };
 
-    const getHiddenInputProps = otherHandlers => {
+    const getHiddenInputProps = (otherHandlers = {}) => {
       const ownEventHandlers = {
         onChange: createHandleHiddenInputChange(otherHandlers || {}),
         onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
@@ -14107,9 +14067,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         'aria-valuemin': scale(min),
         name,
         type: 'range',
-        min: props.min,
-        max: props.max,
-        step: props.step,
+        min: parameters.min,
+        max: parameters.max,
+        step: parameters.step,
         disabled
       }, mergedEventHandlers, {
         style: _extends({}, visuallyHidden$1, {
@@ -14122,20 +14082,20 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
 
     return {
+      active,
       axis,
       axisProps,
-      getRootProps,
+      dragging,
+      focusVisible,
       getHiddenInputProps,
+      getRootProps,
       getThumbProps,
-      dragging,
       marks,
-      values,
-      active,
-      focusVisible,
       open,
       range,
+      trackLeap,
       trackOffset,
-      trackLeap
+      values
     };
   }
 
@@ -14316,10 +14276,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             children: /*#__PURE__*/jsxRuntime_1(Thumb, _extends({
               "data-index": index
             }, thumbProps, getThumbProps(), {
-              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible)
-            }, !isHostComponent(Thumb) && {
-              ownerState: _extends({}, ownerState, thumbProps.ownerState)
-            }, {
+              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible),
               style: _extends({}, style, {
                 pointerEvents: disableSwap && active !== index ? 'none' : undefined
               }, thumbProps.style),
@@ -14429,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'])
       })
     }),
@@ -15987,6 +15946,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     getInitColorSchemeScript
   } = createCssVarsProvider({
     theme: defaultTheme$1,
+    attribute: 'data-mui-color-scheme',
+    modeStorageKey: 'mui-mode',
+    colorSchemeStorageKey: 'mui-color-scheme',
     defaultColorScheme: {
       light: 'light',
       dark: 'dark'
@@ -19574,7 +19536,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     slot: 'Message',
     overridesResolver: (props, styles) => styles.message
   })({
-    padding: '8px 0'
+    padding: '8px 0',
+    minWidth: 0,
+    overflow: 'auto'
   });
   const AlertAction = styled$1('div', {
     name: 'MuiAlert',
@@ -24800,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;
 
   /**
@@ -26593,10 +26557,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _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(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${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'
@@ -26604,10 +26568,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }, ownerState.color !== 'default' && {
     [`&.${checkboxClasses$1.checked}, &.${checkboxClasses$1.indeterminate}`]: {
-      color: theme.palette[ownerState.color].main
+      color: (theme.vars || theme).palette[ownerState.color].main
     },
     [`&.${checkboxClasses$1.disabled}`]: {
-      color: theme.palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     }
   }));
 
@@ -30941,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);
@@ -31121,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',
@@ -31152,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
@@ -31183,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 {
@@ -31190,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);
   };
@@ -31210,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 {
@@ -31220,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);
@@ -31237,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);
@@ -31262,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
@@ -31448,12 +31465,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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.
    */
 
-  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.
@@ -31935,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;
   };
 
@@ -33914,6 +33930,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     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.
      */
@@ -34297,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',
@@ -34310,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,
@@ -34336,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' && {
@@ -34344,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',
@@ -41676,7 +41720,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    top: -10,
     transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
@@ -41687,20 +41730,34 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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'
   }));
   SliderValueLabel.propTypes
   /* remove-proptypes */
@@ -41963,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'])
       })
     }),
@@ -42314,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',
@@ -42345,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) {
@@ -42404,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);
@@ -44773,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;
         }
 
@@ -45216,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
         })]
@@ -49777,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];
@@ -51473,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;