@mui/material 5.8.5 → 5.8.6

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.5
+/** @license MUI v5.8.6
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -4624,7 +4624,7 @@
     injectFirst: PropTypes.bool
   } ;
 
-  function isEmpty$3(obj) {
+  function isEmpty$4(obj) {
     return obj === undefined || obj === null || Object.keys(obj).length === 0;
   }
 
@@ -4633,7 +4633,7 @@
       styles,
       defaultTheme = {}
     } = props;
-    const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty$3(themeInput) ? defaultTheme : themeInput) : styles;
+    const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty$4(themeInput) ? defaultTheme : themeInput) : styles;
     return /*#__PURE__*/jsxRuntime_1(Global, {
       styles: globalStyles
     });
@@ -5464,7 +5464,12 @@
     return requiredInteger(props, propName, ...other);
   }
 
+  function validatorNoop() {
+    return null;
+  }
+
   validator.isRequired = requiredInteger;
+  validatorNoop.isRequired = validatorNoop;
   var integerPropType = validator;
 
   /**
@@ -5528,26 +5533,26 @@
   var ClassNameGenerator$1 = ClassNameGenerator;
 
   const globalStateClassesMapping = {
-    active: 'Mui-active',
-    checked: 'Mui-checked',
-    completed: 'Mui-completed',
-    disabled: 'Mui-disabled',
-    error: 'Mui-error',
-    expanded: 'Mui-expanded',
-    focused: 'Mui-focused',
-    focusVisible: 'Mui-focusVisible',
-    required: 'Mui-required',
-    selected: 'Mui-selected'
-  };
-  function generateUtilityClass(componentName, slot) {
+    active: 'active',
+    checked: 'checked',
+    completed: 'completed',
+    disabled: 'disabled',
+    error: 'error',
+    expanded: 'expanded',
+    focused: 'focused',
+    focusVisible: 'focusVisible',
+    required: 'required',
+    selected: 'selected'
+  };
+  function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
     const globalStateClass = globalStateClassesMapping[slot];
-    return globalStateClass || `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
+    return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
   }
 
-  function generateUtilityClasses(componentName, slots) {
+  function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
     const result = {};
     slots.forEach(slot => {
-      result[slot] = generateUtilityClass(componentName, slot);
+      result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
     });
     return result;
   }
@@ -6845,7 +6850,7 @@
 
   const _excluded$2i = ["variant"];
 
-  function isEmpty$2(string) {
+  function isEmpty$3(string) {
     return string.length === 0;
   }
   /**
@@ -6864,9 +6869,9 @@
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
       if (key === 'color') {
-        classKey += isEmpty$2(classKey) ? props[key] : capitalize(props[key]);
+        classKey += isEmpty$3(classKey) ? props[key] : capitalize(props[key]);
       } else {
-        classKey += `${isEmpty$2(classKey) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
+        classKey += `${isEmpty$3(classKey) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
       }
     });
     return classKey;
@@ -6876,7 +6881,7 @@
         _excluded2$c = ["theme"],
         _excluded3$1 = ["theme"];
 
-  function isEmpty$1(obj) {
+  function isEmpty$2(obj) {
     return Object.keys(obj).length === 0;
   }
 
@@ -6995,7 +7000,7 @@
                 other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
 
             return stylesArg(_extends({
-              theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
+              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
             }, other));
           } : stylesArg;
         }) : [];
@@ -7003,7 +7008,7 @@
 
         if (componentName && overridesResolver) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
             const styleOverrides = getStyleOverrides(componentName, theme);
 
             if (styleOverrides) {
@@ -7022,14 +7027,14 @@
 
         if (componentName && !skipVariantsResolver) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
             return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
           });
         }
 
         if (!skipSx) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
             return styleFunctionSx(_extends({}, props, {
               theme
             }));
@@ -7056,7 +7061,7 @@
                 other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
 
             return styleArg(_extends({
-              theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
+              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
             }, other));
           };
         }
@@ -7637,6 +7642,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const DEFAULT_ATTRIBUTE = 'data-color-scheme';
   function getInitColorSchemeScript$1(options) {
     const {
+      enableColorScheme = true,
       enableSystem = false,
       defaultLightColorScheme = 'light',
       defaultDarkColorScheme = 'dark',
@@ -7650,13 +7656,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       dangerouslySetInnerHTML: {
         __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
+        var cssColorScheme = mode;
         var colorScheme = '';
         if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
+            cssColorScheme = 'dark';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
+            cssColorScheme = 'light';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
@@ -7669,6 +7678,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
+        if (${enableColorScheme} && !!cssColorScheme) {
+          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
+        }
       } catch (e) {} })();`
       }
     });
@@ -8228,7 +8240,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const getInitColorSchemeScript = params => getInitColorSchemeScript$1(_extends({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
-      modeStorageKey: defaultModeStorageKey
+      modeStorageKey: defaultModeStorageKey,
+      enableColorScheme: designSystemEnableColorScheme
     }, params));
 
     return {
@@ -8467,21 +8480,26 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return typeof element === 'string';
   }
 
+  /**
+   * Type of the ownerState based on the type of an element it applies to.
+   * This resolves to the provided OwnerState for React components and `undefined` for host components.
+   * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+   */
+
   /**
    * Appends the ownerState object to the props, merging with the existing one if necessary.
    *
-   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
-   * @param existingProps Props of the element.
+   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` is not applied.
+   * @param otherProps Props of the element.
    * @param ownerState
    */
-
-  function appendOwnerState(elementType, existingProps = {}, ownerState) {
+  function appendOwnerState(elementType, otherProps = {}, ownerState) {
     if (isHostComponent(elementType)) {
-      return existingProps;
+      return otherProps;
     }
 
-    return _extends({}, existingProps, {
-      ownerState: _extends({}, existingProps.ownerState, ownerState)
+    return _extends({}, otherProps, {
+      ownerState: _extends({}, otherProps.ownerState, ownerState)
     });
   }
 
@@ -8504,6 +8522,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return result;
   }
 
+  /**
+   * If `componentProps` is a function, calls it with the provided `ownerState`.
+   * Otherwise, just returns `componentProps`.
+   */
+  function resolveComponentProps(componentProps, ownerState) {
+    if (typeof componentProps === 'function') {
+      return componentProps(ownerState);
+    }
+
+    return componentProps;
+  }
+
   /**
    * Creates a type that is T with removed properties that are functions with names beginning with `on`.
    * Note that it does not exactly follow the logic of `omitEventHandlers` as it also removes fields where
@@ -8556,12 +8586,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       // so we can simply merge all the props without having to worry about extracting event handlers.
       const joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className);
 
-      const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps, {
-        className: joinedClasses
-      });
+      const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+
+      const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
+
+      if (joinedClasses.length > 0) {
+        props.className = joinedClasses;
+      }
 
-      if (joinedClasses.length === 0) {
-        delete props.className;
+      if (Object.keys(mergedStyle).length > 0) {
+        props.style = mergedStyle;
       }
 
       return {
@@ -8578,12 +8612,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const internalSlotProps = getSlotProps(eventHandlers);
     const joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className, internalSlotProps == null ? void 0 : internalSlotProps.className);
 
-    const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers, {
-      className: joinedClasses
-    });
+    const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+
+    const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
 
-    if (joinedClasses.length === 0) {
-      delete props.className;
+    if (joinedClasses.length > 0) {
+      props.className = joinedClasses;
+    }
+
+    if (Object.keys(mergedStyle).length > 0) {
+      props.style = mergedStyle;
     }
 
     return {
@@ -8592,18 +8630,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  /**
-   * If `componentProps` is a function, calls it with the provided `ownerState`.
-   * Otherwise, just returns `componentProps`.
-   */
-  function resolveComponentProps(componentProps, ownerState) {
-    if (typeof componentProps === 'function') {
-      return componentProps(ownerState);
-    }
-
-    return componentProps;
-  }
-
   const _excluded$2d = ["elementType", "externalSlotProps", "ownerState"];
 
   /**
@@ -12508,15 +12534,22 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           });
           element.style.paddingRight = `${getPaddingRight(element) + scrollbarSize}px`;
         });
-      } // Improve Gatsby support
-      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      }
 
+      let scrollContainer;
 
-      const parent = container.parentElement;
-      const containerWindow = ownerWindow(container);
-      const scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container; // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+      if (container.parentNode instanceof DocumentFragment) {
+        scrollContainer = ownerDocument(container).body;
+      } else {
+        // Improve Gatsby support
+        // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+        const parent = container.parentElement;
+        const containerWindow = ownerWindow(container);
+        scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+      } // Block the scroll even if no scrollbar is visible to account for mobile keyboard
       // screensize shrink.
 
+
       restoreStyle.push({
         value: scrollContainer.style.overflow,
         property: 'overflow',
@@ -13772,7 +13805,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onFocus: handleFocusVisible,
       ref: focusVisibleRef
     } = useIsFocusVisible();
-    const [focusVisible, setFocusVisible] = React__namespace.useState(-1);
+    const [focusedThumbIndex, setFocusedThumbIndex] = React__namespace.useState(-1);
     const sliderRef = React__namespace.useRef();
     const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
     const handleRef = useForkRef(ref, handleFocusRef);
@@ -13784,7 +13817,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       handleFocusVisible(event);
 
       if (isFocusVisibleRef.current === true) {
-        setFocusVisible(index);
+        setFocusedThumbIndex(index);
       }
 
       setOpen(index);
@@ -13797,7 +13830,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       handleBlurVisible(event);
 
       if (isFocusVisibleRef.current === false) {
-        setFocusVisible(-1);
+        setFocusedThumbIndex(-1);
       }
 
       setOpen(-1);
@@ -13820,8 +13853,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       setActive(-1);
     }
 
-    if (disabled && focusVisible !== -1) {
-      setFocusVisible(-1);
+    if (disabled && focusedThumbIndex !== -1) {
+      setFocusedThumbIndex(-1);
     }
 
     const createHandleHiddenInputChange = otherHandlers => event => {
@@ -13870,7 +13903,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       setValueState(newValue);
-      setFocusVisible(index);
+      setFocusedThumbIndex(index);
 
       if (handleChange) {
         handleChange(event, newValue, index);
@@ -14181,13 +14214,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         onMouseOver: createHandleMouseOver(otherHandlers || {}),
         onMouseLeave: createHandleMouseLeave(otherHandlers || {})
       };
-
-      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
-
-      return _extends({}, mergedEventHandlers);
+      return _extends({}, otherHandlers, ownEventHandlers);
     };
 
     const getHiddenInputProps = (otherHandlers = {}) => {
+      var _parameters$step;
+
       const ownEventHandlers = {
         onChange: createHandleHiddenInputChange(otherHandlers || {}),
         onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
@@ -14206,7 +14238,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         type: 'range',
         min: parameters.min,
         max: parameters.max,
-        step: parameters.step,
+        step: (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
         disabled
       }, mergedEventHandlers, {
         style: _extends({}, visuallyHidden$1, {
@@ -14223,7 +14255,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       axis: axis,
       axisProps,
       dragging,
-      focusVisible,
+      focusedThumbIndex,
       getHiddenInputProps,
       getRootProps,
       getThumbProps,
@@ -14236,7 +14268,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$29 = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+  const _excluded$29 = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 
   const Identity = x => x;
 
@@ -14286,7 +14318,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       marks: marksProp = false,
       max = 100,
       min = 0,
-      onMouseDown,
       orientation = 'horizontal',
       scale = Identity,
       step = 1,
@@ -14325,7 +14356,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       active,
       axis,
       range,
-      focusVisible,
+      focusedThumbIndex,
       dragging,
       marks,
       values,
@@ -14336,37 +14367,69 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }));
     ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
     ownerState.dragging = dragging;
+    ownerState.focusedThumbIndex = focusedThumbIndex;
+    const classes = useUtilityClasses$1M(ownerState);
     const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'span';
-    const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
+    const rootProps = useSlotProps({
+      elementType: Root,
+      getSlotProps: getRootProps,
+      externalSlotProps: componentsProps.root,
+      externalForwardedProps: other,
+      ownerState,
+      className: [classes.root, className]
+    });
     const Rail = (_components$Rail = components.Rail) != null ? _components$Rail : 'span';
-    const railProps = appendOwnerState(Rail, componentsProps.rail, ownerState);
+    const railProps = useSlotProps({
+      elementType: Rail,
+      externalSlotProps: componentsProps.rail,
+      ownerState,
+      className: classes.rail
+    });
     const Track = (_components$Track = components.Track) != null ? _components$Track : 'span';
-    const trackProps = appendOwnerState(Track, componentsProps.track, ownerState);
-
-    const trackStyle = _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
-
+    const trackProps = useSlotProps({
+      elementType: Track,
+      externalSlotProps: componentsProps.track,
+      additionalProps: {
+        style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+      },
+      ownerState,
+      className: classes.track
+    });
     const Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
-    const thumbProps = appendOwnerState(Thumb, componentsProps.thumb, ownerState);
+    const thumbProps = useSlotProps({
+      elementType: Thumb,
+      getSlotProps: getThumbProps,
+      externalSlotProps: componentsProps.thumb,
+      ownerState
+    });
     const ValueLabel = (_components$ValueLabe = components.ValueLabel) != null ? _components$ValueLabe : SliderValueLabelUnstyled;
-    const valueLabelProps = appendOwnerState(ValueLabel, componentsProps.valueLabel, ownerState);
+    const valueLabelProps = useSlotProps({
+      elementType: ValueLabel,
+      externalSlotProps: componentsProps.valueLabel,
+      ownerState
+    });
     const Mark = (_components$Mark = components.Mark) != null ? _components$Mark : 'span';
-    const markProps = appendOwnerState(Mark, componentsProps.mark, ownerState);
+    const markProps = useSlotProps({
+      elementType: Mark,
+      externalSlotProps: componentsProps.mark,
+      ownerState,
+      className: classes.mark
+    });
     const MarkLabel = (_components$MarkLabel = components.MarkLabel) != null ? _components$MarkLabel : 'span';
-    const markLabelProps = appendOwnerState(MarkLabel, componentsProps.markLabel, ownerState);
+    const markLabelProps = useSlotProps({
+      elementType: MarkLabel,
+      externalSlotProps: componentsProps.markLabel,
+      ownerState
+    });
     const Input = components.Input || 'input';
-    const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
-    const hiddenInputProps = getHiddenInputProps();
-    const classes = useUtilityClasses$1M(ownerState);
-    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
-      onMouseDown
-    }), {
-      className: clsx(classes.root, rootProps.className, className),
-      children: [/*#__PURE__*/jsxRuntime_1(Rail, _extends({}, railProps, {
-        className: clsx(classes.rail, railProps.className)
-      })), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps, {
-        className: clsx(classes.track, trackProps.className),
-        style: _extends({}, trackStyle, trackProps.style)
-      })), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+    const inputProps = useSlotProps({
+      elementType: Input,
+      getSlotProps: getHiddenInputProps,
+      externalSlotProps: componentsProps.input,
+      ownerState
+    });
+    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
+      children: [/*#__PURE__*/jsxRuntime_1(Rail, _extends({}, railProps)), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
         const percent = valueToPercent(mark.value, min, max);
         const style = axisProps[axis].offset(percent);
         let markActive;
@@ -14384,7 +14447,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             markActive
           }, {
             style: _extends({}, style, markProps.style),
-            className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
+            className: clsx(markProps.className, markActive && classes.markActive)
           })), mark.label != null ? /*#__PURE__*/jsxRuntime_1(MarkLabel, _extends({
             "aria-hidden": true,
             "data-index": index
@@ -14411,23 +14474,20 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           }, valueLabelProps, {
             className: clsx(classes.valueLabel, valueLabelProps.className),
             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),
+              "data-index": index,
+              "data-focusvisible": focusedThumbIndex === index
+            }, thumbProps, {
+              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
               style: _extends({}, style, {
                 pointerEvents: disableSwap && active !== index ? 'none' : undefined
               }, thumbProps.style),
-              children: /*#__PURE__*/jsxRuntime_1(Input, _extends({}, hiddenInputProps, {
+              children: /*#__PURE__*/jsxRuntime_1(Input, _extends({
                 "data-index": index,
                 "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
                 "aria-valuenow": scale(value),
                 "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
                 value: values[index]
-              }, !isHostComponent(Input) && {
-                ownerState: _extends({}, ownerState, inputProps.ownerState)
-              }, inputProps, {
-                style: _extends({}, hiddenInputProps.style, inputProps.style)
-              }))
+              }, inputProps))
             }))
           }))
         }, index);
@@ -14515,14 +14575,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      input: PropTypes.object,
-      mark: PropTypes.object,
-      markLabel: PropTypes.object,
-      rail: PropTypes.object,
-      root: PropTypes.object,
-      thumb: PropTypes.object,
-      track: PropTypes.object,
-      valueLabel: PropTypes.shape({
+      input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
         children: PropTypes.element,
         className: PropTypes.string,
         components: PropTypes.shape({
@@ -14532,7 +14592,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         style: PropTypes.object,
         value: PropTypes.number,
         valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-      })
+      })])
     }),
 
     /**
@@ -14624,11 +14684,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     onChangeCommitted: PropTypes.func,
 
-    /**
-     * @ignore
-     */
-    onMouseDown: PropTypes.func,
-
     /**
      * The component orientation.
      * @default 'horizontal'
@@ -14716,6 +14771,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       transform: 'translateZ(0)'
     }
   };
+
+  function isEmpty$1(obj) {
+    return obj === undefined || obj === null || Object.keys(obj).length === 0;
+  }
+
   const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function TextareaAutosize(props, ref) {
     const {
       onChange,
@@ -14734,13 +14794,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const shadowRef = React__namespace.useRef(null);
     const renders = React__namespace.useRef(0);
     const [state, setState] = React__namespace.useState({});
-    const syncHeight = React__namespace.useCallback(() => {
+    const getUpdatedState = React__namespace.useCallback(() => {
       const input = inputRef.current;
       const containerWindow = ownerWindow(input);
       const computedStyle = containerWindow.getComputedStyle(input); // If input's width is shrunk and it's not visible, don't sync height.
 
       if (computedStyle.width === '0px') {
-        return;
+        return {};
       }
 
       const inputShallow = shadowRef.current;
@@ -14777,30 +14837,77 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
       const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-      setState(prevState => {
-        // Need a large enough difference to update the height.
-        // This prevents infinite rendering loop.
-        if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
-          renders.current += 1;
-          return {
-            overflow,
-            outerHeightStyle
-          };
-        }
+      return {
+        outerHeightStyle,
+        overflow
+      };
+    }, [maxRows, minRows, props.placeholder]);
 
-        {
-          if (renders.current === 20) {
-            console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
-          }
+    const updateState = (prevState, newState) => {
+      const {
+        outerHeightStyle,
+        overflow
+      } = newState; // Need a large enough difference to update the height.
+      // This prevents infinite rendering loop.
+
+      if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+        renders.current += 1;
+        return {
+          overflow,
+          outerHeightStyle
+        };
+      }
+
+      {
+        if (renders.current === 20) {
+          console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
         }
+      }
+
+      return prevState;
+    };
+
+    const syncHeight = React__namespace.useCallback(() => {
+      const newState = getUpdatedState();
 
-        return prevState;
+      if (isEmpty$1(newState)) {
+        return;
+      }
+
+      setState(prevState => {
+        return updateState(prevState, newState);
       });
-    }, [maxRows, minRows, props.placeholder]);
+    }, [getUpdatedState]);
+
+    const syncHeightWithFlushSycn = () => {
+      const newState = getUpdatedState();
+
+      if (isEmpty$1(newState)) {
+        return;
+      } // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+      // Related issue - https://github.com/facebook/react/issues/24331
+
+
+      ReactDOM.flushSync(() => {
+        setState(prevState => {
+          return updateState(prevState, newState);
+        });
+      });
+    };
+
     React__namespace.useEffect(() => {
       const handleResize = debounce$1(() => {
-        renders.current = 0;
-        syncHeight();
+        renders.current = 0; // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+        // ResizeObserver's handler that runs because of the change in the layout is trying to
+        // access a dom node that is no longer there (as the fallback component is being shown instead).
+        // See https://github.com/mui/material-ui/issues/32640
+        // TODO: Add tests that will ensure the component is not failing when
+        // replaced by Suspense with a fallback, once React is updated to version 18
+
+        if (inputRef.current) {
+          syncHeightWithFlushSycn();
+        }
       });
       const containerWindow = ownerWindow(inputRef.current);
       containerWindow.addEventListener('resize', handleResize);
@@ -14819,7 +14926,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           resizeObserver.disconnect();
         }
       };
-    }, [syncHeight]);
+    });
     useEnhancedEffect$1(() => {
       syncHeight();
     });
@@ -16016,7 +16123,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           palette: lightPalette,
           opacity: _extends({
             inputPlaceholder: 0.42,
-            inputTouchBottomLine: 0.42,
+            inputUnderline: 0.42,
             switchTrackDisabled: 0.12,
             switchTrack: 0.38
           }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
@@ -16026,7 +16133,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           palette: darkPalette,
           opacity: _extends({
             inputPlaceholder: 0.5,
-            inputTouchBottomLine: 0.7,
+            inputUnderline: 0.7,
             switchTrackDisabled: 0.2,
             switchTrack: 0.3
           }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
@@ -16047,9 +16154,29 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } // assign component variables
 
 
-      assignNode(palette, ['AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+      assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
 
       if (key === 'light') {
+        setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-main)');
+        setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-main)');
+        setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-main)');
+        setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-main)');
+        setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
+        setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
+        setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
+        setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
+        setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-light)');
+        setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-light)');
+        setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-light)');
+        setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-light)');
         setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
         setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
         setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
@@ -16086,6 +16213,26 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
         setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
       } else {
+        setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-dark)');
+        setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-dark)');
+        setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-dark)');
+        setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-dark)');
+        setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
+        setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
+        setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
+        setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
+        setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-main)');
+        setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-main)');
+        setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-main)');
+        setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-main)');
         setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
         setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
 
@@ -16194,7 +16341,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       return newTheme;
     },
-    shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+    shouldSkipGeneratingVar: keys => {
+      var _keys$;
+
+      return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+    }
   });
 
   function getSvgIconUtilityClass(slot) {
@@ -19736,22 +19887,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       display: 'flex',
       padding: '6px 16px'
     }, color && ownerState.variant === 'standard' && {
-      color: getColor(theme.palette[color].light, 0.6),
-      backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9),
-      [`& .${alertClasses$1.icon}`]: {
+      color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+      backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+      [`& .${alertClasses$1.icon}`]: theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}IconColor`]
+      } : {
         color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
       }
     }, color && ownerState.variant === 'outlined' && {
-      color: getColor(theme.palette[color].light, 0.6),
-      border: `1px solid ${theme.palette[color].light}`,
-      [`& .${alertClasses$1.icon}`]: {
+      color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+      border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+      [`& .${alertClasses$1.icon}`]: theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}IconColor`]
+      } : {
         color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
       }
-    }, color && ownerState.variant === 'filled' && {
-      color: '#fff',
-      fontWeight: theme.typography.fontWeightMedium,
-      backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main
-    });
+    }, color && ownerState.variant === 'filled' && _extends({
+      fontWeight: theme.typography.fontWeightMedium
+    }, theme.vars ? {
+      color: theme.vars.palette.Alert[`${color}FilledColor`],
+      backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+    } : {
+      backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+      color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+    }));
   });
   const AlertIcon = styled$1('div', {
     name: 'MuiAlert',
@@ -29822,7 +29981,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       '&:before': {
-        borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})` : bottomLineColor}`,
+        borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -33529,7 +33688,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
     if (theme.vars) {
-      bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`;
+      bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
     }
 
     return _extends({
@@ -38316,12 +38475,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       muiFormControl,
       states: ['required']
     });
+
+    const ownerState = _extends({}, props, {
+      color: fcs.color || 'primary',
+      disabled: fcs.disabled,
+      error: fcs.error,
+      focused: fcs.focused,
+      formControl: muiFormControl,
+      fullWidth,
+      hiddenLabel: fcs.hiddenLabel,
+      multiline,
+      size: fcs.size,
+      type
+    });
+
     return /*#__PURE__*/jsxRuntime_1(InputBase$1, _extends({
       components: _extends({
         Root: OutlinedInputRoot,
         Input: OutlinedInputInput
       }, components),
       renderSuffix: state => /*#__PURE__*/jsxRuntime_1(NotchedOutlineRoot, {
+        ownerState: ownerState,
         className: classes.notchedOutline,
         label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
           children: [label, "\xA0", '*']
@@ -42327,14 +42501,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      input: PropTypes.object,
-      mark: PropTypes.object,
-      markLabel: PropTypes.object,
-      rail: PropTypes.object,
-      root: PropTypes.object,
-      thumb: PropTypes.object,
-      track: PropTypes.object,
-      valueLabel: PropTypes.shape({
+      input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
         children: PropTypes.element,
         className: PropTypes.string,
         components: PropTypes.shape({
@@ -42344,7 +42518,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         style: PropTypes.object,
         value: PropTypes.number,
         valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-      })
+      })])
     }),
 
     /**
@@ -50265,8 +50439,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     React__namespace.useEffect(() => {
       const handleResize = debounce$1(() => {
-        updateIndicatorState();
-        updateScrollButtonState();
+        // If the Tabs component is replaced by Suspense with a fallback, the last
+        // ResizeObserver's handler that runs because of the change in the layout is trying to
+        // access a dom node that is no longer there (as the fallback component is being shown instead).
+        // See https://github.com/mui/material-ui/issues/33276
+        // TODO: Add tests that will ensure the component is not failing when
+        // replaced by Suspense with a fallback, once React is updated to version 18
+        if (tabsRef.current) {
+          updateIndicatorState();
+          updateScrollButtonState();
+        }
       });
       const win = ownerWindow(tabsRef.current);
       win.addEventListener('resize', handleResize);