@mui/material 5.2.6 → 5.3.1

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.6
+/** @license MUI v5.3.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -477,14 +477,11 @@
       }
 
       return target;
-    };
-
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    }, module.exports.__esModule = true, module.exports["default"] = module.exports;
     return _extends.apply(this, arguments);
   }
 
-  module.exports = _extends;
-  module.exports["default"] = module.exports, module.exports.__esModule = true;
+  module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
   });
 
   unwrapExports(_extends_1);
@@ -6185,6 +6182,9 @@
   const letterSpacing = style$2({
     prop: 'letterSpacing'
   });
+  const textTransform = style$2({
+    prop: 'textTransform'
+  });
   const lineHeight = style$2({
     prop: 'lineHeight'
   });
@@ -6196,7 +6196,7 @@
     cssProperty: false,
     themeKey: 'typography'
   });
-  const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+  const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
   var typography$1 = typography;
 
   const filterPropsMapping = {
@@ -6873,7 +6873,11 @@
             const styleOverrides = getStyleOverrides(componentName, theme);
 
             if (styleOverrides) {
-              return overridesResolver(props, styleOverrides);
+              const resolvedStyleOverrides = {};
+              Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+                resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+              });
+              return overridesResolver(props, resolvedStyleOverrides);
             }
 
             return null;
@@ -6936,6 +6940,10 @@
         return Component;
       };
 
+      if (defaultStyledResolver.withConfig) {
+        muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+      }
+
       return muiStyledResolver;
     };
   }
@@ -7943,7 +7951,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
 
     const handleValue = (event, newValue, reason, details) => {
-      if (value === newValue) {
+      if (Array.isArray(value)) {
+        if (value.length === newValue.length && value.every((val, i) => val === newValue[i])) {
+          return;
+        }
+      } else if (value === newValue) {
         return;
       }
 
@@ -8620,7 +8632,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the Backdrop.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * If `true`, the backdrop is invisible.
@@ -8815,7 +8829,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the Badge.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      badge: propTypes.object,
+      root: propTypes.object
+    }),
 
     /**
      * If `true`, the badge is invisible.
@@ -9165,7 +9182,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     /**
      * @ignore
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * If `true`, the component is disabled.
@@ -9555,7 +9574,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     /**
      * @ignore
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * @ignore
@@ -9961,7 +9982,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the Input.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      input: propTypes.object,
+      root: propTypes.object
+    }),
 
     /**
      * The default value. Use when the component is not controlled.
@@ -11065,7 +11089,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the Modal.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * An HTML element or function that returns one.
@@ -13486,7 +13512,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     value: propTypes.node
   } ;
 
-  const _excluded$2f = ["aria-label", "aria-labelledby", "aria-valuetext", "className", "component", "classes", "defaultValue", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
   const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 
   function asc(a, b) {
@@ -13502,9 +13527,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
 
   function findClosest(values, currentValue) {
+    var _values$reduce;
+
     const {
       index: closestIndex
-    } = values.reduce((acc, value, index) => {
+    } = (_values$reduce = values.reduce((acc, value, index) => {
       const distance = Math.abs(currentValue - value);
 
       if (acc === null || distance < acc.distance || distance === acc.distance) {
@@ -13515,14 +13542,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       return acc;
-    }, null);
+    }, null)) != null ? _values$reduce : {};
     return closestIndex;
   }
 
   function trackFinger(event, touchId) {
+    // The event is TouchEvent
     if (touchId.current !== undefined && event.changedTouches) {
-      for (let i = 0; i < event.changedTouches.length; i += 1) {
-        const touch = event.changedTouches[i];
+      const touchEvent = event;
+
+      for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {
+        const touch = touchEvent.changedTouches[i];
 
         if (touch.identifier === touchId.current) {
           return {
@@ -13533,7 +13563,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       return false;
-    }
+    } // The event is MouseEvent
+
 
     return {
       x: event.clientX,
@@ -13582,10 +13613,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     activeIndex,
     setActive
   }) {
+    var _sliderRef$current, _doc$activeElement;
+
     const doc = ownerDocument(sliderRef.current);
 
-    if (!sliderRef.current.contains(doc.activeElement) || Number(doc.activeElement.getAttribute('data-index')) !== activeIndex) {
-      sliderRef.current.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
+    if (!((_sliderRef$current = sliderRef.current) != null && _sliderRef$current.contains(doc.activeElement)) || Number(doc == null ? void 0 : (_doc$activeElement = doc.activeElement) == null ? void 0 : _doc$activeElement.getAttribute('data-index')) !== activeIndex) {
+      var _sliderRef$current2;
+
+      (_sliderRef$current2 = sliderRef.current) == null ? void 0 : _sliderRef$current2.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
     }
 
     if (setActive) {
@@ -13619,8 +13654,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       })
     }
   };
-
-  const Identity = x => x; // TODO: remove support for Safari < 13.
+  const Identity$1 = x => x; // TODO: remove support for Safari < 13.
   // https://caniuse.com/#search=touch-action
   //
   // Safari, on iOS, supports touch action since v13.
@@ -13631,7 +13665,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   // is supported on both Edge@12 and IE if CSS.supports is not available that means that
   // touch-action will be supported
 
-
   let cachedSupportsTouchActionNone;
 
   function doesSupportTouchActionNone() {
@@ -13646,70 +13679,26 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return cachedSupportsTouchActionNone;
   }
 
-  const useUtilityClasses$1P = ownerState => {
+  function useSlider(props) {
     const {
-      disabled,
-      dragging,
-      marked,
-      orientation,
-      track,
-      classes
-    } = ownerState;
-    const slots = {
-      root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse'],
-      rail: ['rail'],
-      track: ['track'],
-      mark: ['mark'],
-      markActive: ['markActive'],
-      markLabel: ['markLabel'],
-      markLabelActive: ['markLabelActive'],
-      valueLabel: ['valueLabel'],
-      thumb: ['thumb', disabled && 'disabled'],
-      active: ['active'],
-      disabled: ['disabled'],
-      focusVisible: ['focusVisible']
-    };
-    return composeClasses(slots, getSliderUtilityClass, classes);
-  };
-
-  const Forward = ({
-    children
-  }) => children;
-
-  const SliderUnstyled = /*#__PURE__*/React__namespace.forwardRef(function SliderUnstyled(props, ref) {
-    const {
-      'aria-label': ariaLabel,
+      ref,
       'aria-labelledby': ariaLabelledby,
-      'aria-valuetext': ariaValuetext,
-      className,
-      component = 'span',
-      classes: classesProp,
       defaultValue,
       disableSwap = false,
       disabled = false,
-      getAriaLabel,
-      getAriaValueText,
       marks: marksProp = false,
       max = 100,
       min = 0,
       name,
       onChange,
       onChangeCommitted,
-      onMouseDown,
       orientation = 'horizontal',
-      scale = Identity,
+      scale = Identity$1,
       step = 1,
       tabIndex,
-      track = 'normal',
       value: valueProp,
-      valueLabelDisplay = 'off',
-      valueLabelFormat = Identity,
-      isRtl = false,
-      components = {},
-      componentsProps = {}
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2f);
-
+      isRtl = false
+    } = props;
     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.
@@ -13729,7 +13718,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       // This allows seamless integration with the most popular form libraries.
       // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492
       // Clone the event to not override `target` of the original event.
-      const nativeEvent = event.nativeEvent || event;
+      const nativeEvent = event.nativeEvent || event; // @ts-ignore The nativeEvent is function, not object
+
       const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
       Object.defineProperty(clonedEvent, 'target', {
         writable: true,
@@ -13747,6 +13737,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const marks = marksProp === true && step !== null ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({
       value: min + step * index
     })) : marksProp || [];
+    const marksValues = marks.map(mark => mark.value);
     const {
       isFocusVisibleRef,
       onBlur: handleBlurVisible,
@@ -13758,7 +13749,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
     const handleRef = useForkRef(ref, handleFocusRef);
 
-    const handleFocus = event => {
+    const createHandleHiddenInputFocus = otherHandlers => event => {
+      var _otherHandlers$onFocu;
+
       const index = Number(event.currentTarget.getAttribute('data-index'));
       handleFocusVisible(event);
 
@@ -13767,9 +13760,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       setOpen(index);
+      otherHandlers == null ? void 0 : (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
     };
 
-    const handleBlur = event => {
+    const createHandleHidenInputBlur = otherHandlers => event => {
+      var _otherHandlers$onBlur;
+
       handleBlurVisible(event);
 
       if (isFocusVisibleRef.current === false) {
@@ -13777,21 +13773,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       setOpen(-1);
+      otherHandlers == null ? void 0 : (_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
     };
 
-    const handleMouseOver = useEventCallback(event => {
-      const index = Number(event.currentTarget.getAttribute('data-index'));
-      setOpen(index);
-    });
-    const handleMouseLeave = useEventCallback(() => {
-      setOpen(-1);
-    });
     useEnhancedEffect$1(() => {
       if (disabled && sliderRef.current.contains(document.activeElement)) {
+        var _document$activeEleme;
+
         // This is necessary because Firefox and Safari will keep focus
         // on a disabled element:
         // https://codesandbox.io/s/mui-pr-22247-forked-h151h?file=/src/App.js
-        document.activeElement.blur();
+        // @ts-ignore
+        (_document$activeEleme = document.activeElement) == null ? void 0 : _document$activeEleme.blur();
       }
     }, [disabled]);
 
@@ -13803,11 +13796,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       setFocusVisible(-1);
     }
 
-    const handleHiddenInputChange = event => {
+    const createHandleHiddenInputChange = otherHandlers => event => {
+      var _otherHandlers$onChan;
+
+      (_otherHandlers$onChan = otherHandlers.onChange) == null ? void 0 : _otherHandlers$onChan.call(otherHandlers, event);
       const index = Number(event.currentTarget.getAttribute('data-index'));
       const value = values[index];
-      const marksValues = marks.map(mark => mark.value);
-      const marksIndex = marksValues.indexOf(value);
+      const marksIndex = marksValues.indexOf(value); // @ts-ignore
+
       let newValue = event.target.valueAsNumber;
 
       if (marks && step == null) {
@@ -13817,9 +13813,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       newValue = clamp$2(newValue, min, max);
 
       if (marks && step == null) {
-        const markValues = marks.map(mark => mark.value);
-        const currentMarkIndex = markValues.indexOf(values[index]);
-        newValue = newValue < values[index] ? markValues[currentMarkIndex - 1] : markValues[currentMarkIndex + 1];
+        const currentMarkIndex = marksValues.indexOf(values[index]);
+        newValue = newValue < values[index] ? marksValues[currentMarkIndex - 1] : marksValues[currentMarkIndex + 1];
       }
 
       if (range) {
@@ -13861,7 +13856,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const previousIndex = React__namespace.useRef();
     let axis = orientation;
 
-    if (isRtl && orientation !== "vertical") {
+    if (isRtl && orientation === 'horizontal') {
       axis += '-reverse';
     }
 
@@ -13897,7 +13892,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (step) {
         newValue = roundValueToStep(newValue, step, min);
       } else {
-        const marksValues = marks.map(mark => mark.value);
         const closestIndex = findClosest(marksValues, newValue);
         newValue = marksValues[closestIndex];
       }
@@ -13944,6 +13938,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       moveCount.current += 1; // Cancel move in case some other element consumed a mouseup event and it was not fired.
+      // @ts-ignore buttons doesn't not exists on touch event
 
       if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -14016,22 +14011,25 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       const finger = trackFinger(nativeEvent, touchId);
-      const {
-        newValue,
-        activeIndex
-      } = getFingerNewValue({
-        finger,
-        values
-      });
-      focusThumb({
-        sliderRef,
-        activeIndex,
-        setActive
-      });
-      setValueState(newValue);
 
-      if (handleChange) {
-        handleChange(nativeEvent, newValue, activeIndex);
+      if (finger !== false) {
+        const {
+          newValue,
+          activeIndex
+        } = getFingerNewValue({
+          finger,
+          values
+        });
+        focusThumb({
+          sliderRef,
+          activeIndex,
+          setActive
+        });
+        setValueState(newValue);
+
+        if (handleChange) {
+          handleChange(nativeEvent, newValue, activeIndex);
+        }
       }
 
       moveCount.current = 0;
@@ -14054,6 +14052,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         passive: doesSupportTouchActionNone()
       });
       return () => {
+        // @ts-ignore
         slider.removeEventListener('touchstart', handleTouchStart, {
           passive: doesSupportTouchActionNone()
         });
@@ -14065,9 +14064,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         stopListening();
       }
     }, [disabled, stopListening]);
-    const handleMouseDown = useEventCallback(event => {
-      if (onMouseDown) {
-        onMouseDown(event);
+
+    const createHandleMouseDown = otherHandlers => event => {
+      var _otherHandlers$onMous;
+
+      (_otherHandlers$onMous = otherHandlers.onMouseDown) == null ? void 0 : _otherHandlers$onMous.call(otherHandlers, event);
+
+      if (event.defaultPrevented) {
+        return;
       } // Only handle left clicks
 
 
@@ -14078,56 +14082,193 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       event.preventDefault();
       const finger = trackFinger(event, touchId);
-      const {
-        newValue,
-        activeIndex
-      } = getFingerNewValue({
-        finger,
-        values
-      });
-      focusThumb({
-        sliderRef,
-        activeIndex,
-        setActive
-      });
-      setValueState(newValue);
 
-      if (handleChange) {
-        handleChange(event, newValue, activeIndex);
+      if (finger !== false) {
+        const {
+          newValue,
+          activeIndex
+        } = getFingerNewValue({
+          finger,
+          values
+        });
+        focusThumb({
+          sliderRef,
+          activeIndex,
+          setActive
+        });
+        setValueState(newValue);
+
+        if (handleChange) {
+          handleChange(event, newValue, activeIndex);
+        }
       }
 
       moveCount.current = 0;
       const doc = ownerDocument(sliderRef.current);
       doc.addEventListener('mousemove', handleTouchMove);
       doc.addEventListener('mouseup', handleTouchEnd);
-    });
+    };
+
     const trackOffset = valueToPercent(range ? values[0] : min, min, max);
     const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
 
-    const trackStyle = _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
+    const getRootProps = otherHandlers => {
+      const ownEventHandlers = {
+        onMouseDown: createHandleMouseDown(otherHandlers || {})
+      };
 
-    const Root = components.Root || component;
-    const rootProps = componentsProps.root || {};
-    const Rail = components.Rail || 'span';
-    const railProps = componentsProps.rail || {};
-    const Track = components.Track || 'span';
-    const trackProps = componentsProps.track || {};
-    const Thumb = components.Thumb || 'span';
-    const thumbProps = componentsProps.thumb || {};
-    const ValueLabel = components.ValueLabel || SliderValueLabelUnstyled;
-    const valueLabelProps = componentsProps.valueLabel || {};
-    const Mark = components.Mark || 'span';
-    const markProps = componentsProps.mark || {};
-    const MarkLabel = components.MarkLabel || 'span';
-    const markLabelProps = componentsProps.markLabel || {}; // all props with defaults
+      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
+
+      return _extends({
+        ref: handleRef
+      }, mergedEventHandlers);
+    };
+
+    const createHandleMouseOver = otherHandlers => event => {
+      var _otherHandlers$onMous2;
+
+      (_otherHandlers$onMous2 = otherHandlers.onMouseOver) == null ? void 0 : _otherHandlers$onMous2.call(otherHandlers, event);
+      const index = Number(event.currentTarget.getAttribute('data-index'));
+      setOpen(index);
+    };
+
+    const createHandleMouseLeave = otherHandlers => event => {
+      var _otherHandlers$onMous3;
+
+      (_otherHandlers$onMous3 = otherHandlers.onMouseLeave) == null ? void 0 : _otherHandlers$onMous3.call(otherHandlers, event);
+      setOpen(-1);
+    };
+
+    const getThumbProps = otherHandlers => {
+      const ownEventHandlers = {
+        onMouseOver: createHandleMouseOver(otherHandlers || {}),
+        onMouseLeave: createHandleMouseLeave(otherHandlers || {})
+      };
+
+      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
+
+      return _extends({}, mergedEventHandlers);
+    };
+
+    const getHiddenInputProps = otherHandlers => {
+      const ownEventHandlers = {
+        onChange: createHandleHiddenInputChange(otherHandlers || {}),
+        onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
+        onBlur: createHandleHidenInputBlur(otherHandlers || {})
+      };
+
+      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
+
+      return _extends({
+        tabIndex,
+        'aria-labelledby': ariaLabelledby,
+        'aria-orientation': orientation,
+        'aria-valuemax': scale(max),
+        'aria-valuemin': scale(min),
+        name,
+        type: 'range',
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        disabled
+      }, mergedEventHandlers, {
+        style: _extends({}, visuallyHidden$1, {
+          direction: isRtl ? 'rtl' : 'ltr',
+          // So that VoiceOver's focus indicator matches the thumb's dimensions
+          width: '100%',
+          height: '100%'
+        })
+      });
+    };
+
+    return {
+      axis,
+      axisProps,
+      getRootProps,
+      getHiddenInputProps,
+      getThumbProps,
+      dragging,
+      marks,
+      values,
+      active,
+      focusVisible,
+      open,
+      range,
+      trackOffset,
+      trackLeap
+    };
+  }
+
+  const _excluded$2f = ["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 Identity = x => x;
+
+  const useUtilityClasses$1P = ownerState => {
+    const {
+      disabled,
+      dragging,
+      marked,
+      orientation,
+      track,
+      classes
+    } = ownerState;
+    const slots = {
+      root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse'],
+      rail: ['rail'],
+      track: ['track'],
+      mark: ['mark'],
+      markActive: ['markActive'],
+      markLabel: ['markLabel'],
+      markLabelActive: ['markLabelActive'],
+      valueLabel: ['valueLabel'],
+      thumb: ['thumb', disabled && 'disabled'],
+      active: ['active'],
+      disabled: ['disabled'],
+      focusVisible: ['focusVisible']
+    };
+    return composeClasses(slots, getSliderUtilityClass, classes);
+  };
+
+  const Forward = ({
+    children
+  }) => children;
+
+  const SliderUnstyled = /*#__PURE__*/React__namespace.forwardRef(function SliderUnstyled(props, ref) {
+    var _ref, _components$Rail, _components$Track, _components$Thumb, _components$ValueLabe, _components$Mark, _components$MarkLabel;
+
+    const {
+      'aria-label': ariaLabel,
+      'aria-valuetext': ariaValuetext,
+      className,
+      component,
+      classes: classesProp,
+      disableSwap = false,
+      disabled = false,
+      getAriaLabel,
+      getAriaValueText,
+      marks: marksProp = false,
+      max = 100,
+      min = 0,
+      onMouseDown,
+      orientation = 'horizontal',
+      scale = Identity,
+      step = 1,
+      track = 'normal',
+      valueLabelDisplay = 'off',
+      valueLabelFormat = Identity,
+      isRtl = false,
+      components = {},
+      componentsProps = {}
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$2f); // all props with defaults
     // consider extracting to hook an reusing the lint rule for the varints
 
+
     const ownerState = _extends({}, props, {
+      mark: marksProp,
       classes: classesProp,
       disabled,
-      dragging,
       isRtl,
-      marked: marks.length > 0 && marks.some(mark => mark.label),
       max,
       min,
       orientation,
@@ -14138,22 +14279,54 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       valueLabelFormat
     });
 
+    const {
+      axisProps,
+      getRootProps,
+      getHiddenInputProps,
+      getThumbProps,
+      open,
+      active,
+      axis,
+      range,
+      focusVisible,
+      dragging,
+      marks,
+      values,
+      trackOffset,
+      trackLeap
+    } = useSlider(_extends({}, ownerState, {
+      ref
+    }));
+    ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
+    ownerState.dragging = dragging;
+    const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'span';
+    const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
+    const Rail = (_components$Rail = components.Rail) != null ? _components$Rail : 'span';
+    const railProps = appendOwnerState(Rail, componentsProps.rail, ownerState);
+    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 Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
+    const thumbProps = appendOwnerState(Thumb, componentsProps.thumb, ownerState);
+    const ValueLabel = (_components$ValueLabe = components.ValueLabel) != null ? _components$ValueLabe : SliderValueLabelUnstyled;
+    const valueLabelProps = appendOwnerState(ValueLabel, componentsProps.valueLabel, ownerState);
+    const Mark = (_components$Mark = components.Mark) != null ? _components$Mark : 'span';
+    const markProps = appendOwnerState(Mark, componentsProps.mark, ownerState);
+    const MarkLabel = (_components$MarkLabel = components.MarkLabel) != null ? _components$MarkLabel : 'span';
+    const markLabelProps = appendOwnerState(MarkLabel, componentsProps.markLabel, ownerState);
+    const Input = components.Input || 'input';
+    const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
+    const hiddenInputProps = getHiddenInputProps();
     const classes = useUtilityClasses$1P(ownerState);
-    return /*#__PURE__*/jsxRuntime_2(Root, _extends({
-      ref: handleRef,
-      onMouseDown: handleMouseDown
-    }, rootProps, !isHostComponent(Root) && {
-      as: component,
-      ownerState: _extends({}, ownerState, rootProps.ownerState)
-    }, other, {
+    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
+      onMouseDown
+    }), {
       className: clsx(classes.root, rootProps.className, className),
-      children: [/*#__PURE__*/jsxRuntime_1(Rail, _extends({}, railProps, !isHostComponent(Rail) && {
-        ownerState: _extends({}, ownerState, railProps.ownerState)
-      }, {
+      children: [/*#__PURE__*/jsxRuntime_1(Rail, _extends({}, railProps, {
         className: clsx(classes.rail, railProps.className)
-      })), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps, !isHostComponent(Track) && {
-        ownerState: _extends({}, ownerState, trackProps.ownerState)
-      }, {
+      })), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps, {
         className: clsx(classes.track, trackProps.className),
         style: _extends({}, trackStyle, trackProps.style)
       })), marks.map((mark, index) => {
@@ -14171,7 +14344,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           children: [/*#__PURE__*/jsxRuntime_1(Mark, _extends({
             "data-index": index
           }, markProps, !isHostComponent(Mark) && {
-            ownerState: _extends({}, ownerState, markProps.ownerState),
             markActive
           }, {
             style: _extends({}, style, markProps.style),
@@ -14180,9 +14352,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             "aria-hidden": true,
             "data-index": index
           }, markLabelProps, !isHostComponent(MarkLabel) && {
-            ownerState: _extends({}, ownerState, markLabelProps.ownerState)
+            markLabelActive: markActive
           }, {
-            markLabelActive: markActive,
             style: _extends({}, style, markLabelProps.style),
             className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
             children: mark.label
@@ -14193,23 +14364,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         const style = axisProps[axis].offset(percent);
         const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabel;
         return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
-          children: /*#__PURE__*/jsxRuntime_1(ValueLabelComponent, _extends({
-            valueLabelFormat: valueLabelFormat,
-            valueLabelDisplay: valueLabelDisplay,
+          children: /*#__PURE__*/jsxRuntime_1(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
+            valueLabelFormat,
+            valueLabelDisplay,
             value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
-            index: index,
+            index,
             open: open === index || active === index || valueLabelDisplay === 'on',
-            disabled: disabled
+            disabled
           }, valueLabelProps, {
-            className: clsx(classes.valueLabel, valueLabelProps.className)
-          }, !isHostComponent(ValueLabel) && {
-            ownerState: _extends({}, ownerState, valueLabelProps.ownerState)
-          }, {
+            className: clsx(classes.valueLabel, valueLabelProps.className),
             children: /*#__PURE__*/jsxRuntime_1(Thumb, _extends({
-              "data-index": index,
-              onMouseOver: handleMouseOver,
-              onMouseLeave: handleMouseLeave
-            }, thumbProps, {
+              "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)
@@ -14217,33 +14383,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
               style: _extends({}, style, {
                 pointerEvents: disableSwap && active !== index ? 'none' : undefined
               }, thumbProps.style),
-              children: /*#__PURE__*/jsxRuntime_1("input", {
-                tabIndex: tabIndex,
+              children: /*#__PURE__*/jsxRuntime_1(Input, _extends({}, hiddenInputProps, {
                 "data-index": index,
                 "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
-                "aria-labelledby": ariaLabelledby,
-                "aria-orientation": orientation,
-                "aria-valuemax": scale(max),
-                "aria-valuemin": scale(min),
                 "aria-valuenow": scale(value),
                 "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-                name: name,
-                type: "range",
-                min: props.min,
-                max: props.max,
-                step: props.step,
-                disabled: disabled,
-                value: values[index],
-                onChange: handleHiddenInputChange,
-                style: _extends({}, visuallyHidden$1, {
-                  direction: isRtl ? 'rtl' : 'ltr',
-                  // So that VoiceOver's focus indicator matches the thumb's dimensions
-                  width: '100%',
-                  height: '100%'
-                })
-              })
+                value: values[index]
+              }, !isHostComponent(Input) && {
+                ownerState: _extends({}, ownerState, inputProps.ownerState)
+              }, inputProps, {
+                style: _extends({}, hiddenInputProps.style, inputProps.style)
+              }))
             }))
           }))
         }, index);
@@ -14316,6 +14466,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     components: propTypes.shape({
+      Input: propTypes.elementType,
       Mark: propTypes.elementType,
       MarkLabel: propTypes.elementType,
       Rail: propTypes.elementType,
@@ -14329,7 +14480,24 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the Slider.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    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({
+        className: propTypes.string,
+        components: propTypes.shape({
+          Root: propTypes.elementType
+        }),
+        style: propTypes.object,
+        value: propTypes.oneOfType([propTypes.arrayOf(propTypes.number), propTypes.number]),
+        valueLabelDisplay: propTypes.oneOf(['auto', 'off', 'on'])
+      })
+    }),
 
     /**
      * The default value. Use when the component is not controlled.
@@ -14726,7 +14894,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the Switch.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      input: propTypes.object,
+      root: propTypes.object,
+      thumb: propTypes.object,
+      track: propTypes.object
+    }),
 
     /**
      * The default checked state. Use when the component is not controlled.
@@ -14968,7 +15141,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the Tabs.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * The default value. Use when the component is not controlled.
@@ -15128,7 +15303,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the TabPanel.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
@@ -15427,7 +15604,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the TabsList.
      * @default {}
      */
-    componentsProps: propTypes.object
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    })
   } ;
   var TabsListUnstyled$1 = TabsListUnstyled;
 
@@ -15633,7 +15812,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The props used for each slot inside the Tab.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * If `true`, the component is disabled.
@@ -16762,7 +16943,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const svgIconClasses = generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
-  const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "titleAccess", "viewBox"];
+  const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 
   const useUtilityClasses$1K = ownerState => {
     const {
@@ -16789,7 +16970,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     theme,
     ownerState
   }) => {
-    var _theme$palette$ownerS, _theme$palette$ownerS2;
+    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$palette$ownerS, _theme$palette, _theme$palette$ownerS2, _theme$palette2, _theme$palette2$actio, _theme$palette3, _theme$palette3$actio;
 
     return {
       userSelect: 'none',
@@ -16798,19 +16979,19 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       display: 'inline-block',
       fill: 'currentColor',
       flexShrink: 0,
-      transition: theme.transitions.create('fill', {
-        duration: theme.transitions.duration.shorter
+      transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+        duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
       }),
       fontSize: {
         inherit: 'inherit',
-        small: theme.typography.pxToRem(20),
-        medium: theme.typography.pxToRem(24),
-        large: theme.typography.pxToRem(35)
+        small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+        medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+        large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
       }[ownerState.fontSize],
       // TODO v5 deprecate, v6 remove for sx
-      color: (_theme$palette$ownerS = (_theme$palette$ownerS2 = theme.palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
-        action: theme.palette.action.active,
-        disabled: theme.palette.action.disabled,
+      color: (_theme$palette$ownerS = (_theme$palette = theme.palette) == null ? void 0 : (_theme$palette$ownerS2 = _theme$palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
+        action: (_theme$palette2 = theme.palette) == null ? void 0 : (_theme$palette2$actio = _theme$palette2.action) == null ? void 0 : _theme$palette2$actio.active,
+        disabled: (_theme$palette3 = theme.palette) == null ? void 0 : (_theme$palette3$actio = _theme$palette3.action) == null ? void 0 : _theme$palette3$actio.disabled,
         inherit: undefined
       }[ownerState.color]
     };
@@ -16828,6 +17009,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       component = 'svg',
       fontSize = 'medium',
       htmlColor,
+      inheritViewBox = false,
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
@@ -16837,21 +17019,27 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       color,
       component,
       fontSize,
+      inheritViewBox,
       viewBox
     });
 
+    const more = {};
+
+    if (!inheritViewBox) {
+      more.viewBox = viewBox;
+    }
+
     const classes = useUtilityClasses$1K(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
       ownerState: ownerState,
       focusable: "false",
-      viewBox: viewBox,
       color: htmlColor,
       "aria-hidden": titleAccess ? undefined : true,
       role: titleAccess ? 'img' : undefined,
       ref: ref
-    }, other, {
+    }, more, other, {
       children: [children, titleAccess ? /*#__PURE__*/jsxRuntime_1("title", {
         children: titleAccess
       }) : null]
@@ -16908,6 +17096,15 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     htmlColor: propTypes.string,
 
+    /**
+     * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+     * prop will be ignored.
+     * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+     * `component`'s viewBox to the root node.
+     * @default false
+     */
+    inheritViewBox: propTypes.bool,
+
     /**
      * The shape-rendering attribute. The behavior of the different options is described on the
      * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
@@ -22253,7 +22450,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
   });
   const Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
-    var _componentsProps$clea;
+    var _componentsProps$clea, _componentsProps$pape;
 
     const props = useThemeProps({
       props: inProps,
@@ -22474,10 +22671,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         role: "presentation",
         anchorEl: anchorEl,
         open: true,
-        children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, {
-          as: PaperComponent,
-          className: classes.paper,
+        children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, _extends({
           ownerState: ownerState,
+          as: PaperComponent
+        }, componentsProps.paper, {
+          className: clsx(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
           children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/jsxRuntime_1(AutocompleteLoading, {
             className: classes.loading,
             ownerState: ownerState,
@@ -22508,7 +22706,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
               return renderListOption(option, index);
             })
           })) : null]
-        })
+        }))
       }) : null]
     });
   });
@@ -22578,7 +22776,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * If `true`, the input's text is cleared on blur if no value is selected.
      *
      * Set to `true` if you want to help the user enter a new value.
-     * Set to `false` if you want to help the user resume his search.
+     * Set to `false` if you want to help the user resume their search.
      * @default !props.freeSolo
      */
     clearOnBlur: propTypes.bool,
@@ -22609,7 +22807,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      clearIndicator: propTypes.object,
+      paper: propTypes.object
+    }),
 
     /**
      * The default value. Use when the component is not controlled.
@@ -23756,7 +23957,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside the Backdrop.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * If `true`, the backdrop is invisible.
@@ -23787,6 +23990,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   } ;
   var Backdrop$1 = Backdrop;
 
+  const shouldSpreadAdditionalProps = Slot => {
+    return !Slot || !isHostComponent(Slot);
+  };
+
+  var shouldSpreadAdditionalProps$1 = shouldSpreadAdditionalProps;
+
   const _excluded$1K = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
   const badgeClasses = _extends({}, badgeUnstyledClasses$1, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
   'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
@@ -23929,11 +24138,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       duration: theme.transitions.duration.leavingScreen
     })
   }));
-
-  const shouldSpreadAdditionalProps = Slot => {
-    return !Slot || !isHostComponent(Slot);
-  };
-
   const Badge = /*#__PURE__*/React__namespace.forwardRef(function Badge(inProps, ref) {
     var _componentsProps$root, _componentsProps$badg;
 
@@ -23996,14 +24200,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         Badge: BadgeBadge
       }, components),
       componentsProps: {
-        root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+        root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps$1(components.Root) && {
           as: component,
           ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
             color,
             overlap
           })
         }),
-        badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
+        badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps$1(components.Badge) && {
           ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
             color,
             overlap
@@ -24077,7 +24281,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside the Badge.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      badge: propTypes.object,
+      root: propTypes.object
+    }),
 
     /**
      * If `true`, the badge is invisible.
@@ -27477,7 +27684,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside the Modal.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * An HTML element or function that returns one.
@@ -30119,7 +30328,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside the Input.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      input: propTypes.object,
+      root: propTypes.object
+    }),
 
     /**
      * The default value. Use when the component is not controlled.
@@ -30546,7 +30758,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside the Input.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      input: propTypes.object,
+      root: propTypes.object
+    }),
 
     /**
      * The default value. Use when the component is not controlled.
@@ -31167,7 +31382,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      typography: propTypes.object
+    }),
 
     /**
      * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
@@ -34095,7 +34312,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside the Input.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      input: propTypes.object,
+      root: propTypes.object
+    }),
 
     /**
      * The default value. Use when the component is not controlled.
@@ -34503,6 +34723,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   }, ownerState.size === 'small' && {
     transform: 'translate(12px, 13px) scale(1)'
   }, ownerState.shrink && _extends({
+    userSelect: 'none',
+    pointerEvents: 'auto',
     transform: 'translate(12px, 7px) scale(0.75)',
     maxWidth: 'calc(133% - 24px)'
   }, ownerState.size === 'small' && {
@@ -34516,6 +34738,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   }, ownerState.size === 'small' && {
     transform: 'translate(14px, 9px) scale(1)'
   }, ownerState.shrink && {
+    userSelect: 'none',
+    pointerEvents: 'auto',
     maxWidth: 'calc(133% - 24px)',
     transform: 'translate(14px, -9px) scale(0.75)'
   })));
@@ -36049,7 +36273,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside the Input.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      root: propTypes.object
+    }),
 
     /**
      * The container component used when a `ListItemSecondaryAction` is the last child.
@@ -40872,7 +41098,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
   var selectClasses$1 = selectClasses;
 
-  const _excluded$E = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+  const _excluded$E = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
   const SelectSelect = styled$1('div', {
     name: 'MuiSelect',
     slot: 'Select',
@@ -40967,6 +41193,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       autoWidth,
       children,
       className,
+      defaultOpen,
       defaultValue,
       disabled,
       displayEmpty,
@@ -40996,6 +41223,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       default: defaultValue,
       name: 'Select'
     });
+    const [openState, setOpenState] = useControlled({
+      controlled: openProp,
+      default: defaultOpen,
+      name: 'Select'
+    });
     const inputRef = React__namespace.useRef(null);
     const displayRef = React__namespace.useRef(null);
     const [displayNode, setDisplayNode] = React__namespace.useState(null);
@@ -41003,7 +41235,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       current: isOpenControlled
     } = React__namespace.useRef(openProp != null);
     const [menuMinWidthState, setMenuMinWidthState] = React__namespace.useState();
-    const [openState, setOpenState] = React__namespace.useState(false);
     const handleRef = useForkRef(ref, inputRefProp);
     const handleDisplayRef = React__namespace.useCallback(node => {
       displayRef.current = node;
@@ -41018,7 +41249,17 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       },
       node: inputRef.current,
       value
-    }), [value]);
+    }), [value]); // Resize menu on `defaultOpen` automatic toggle.
+
+    React__namespace.useEffect(() => {
+      if (defaultOpen && openState && displayNode && !isOpenControlled) {
+        setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+        displayRef.current.focus();
+      } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
+    // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
+
     React__namespace.useEffect(() => {
       if (autoFocus) {
         displayRef.current.focus();
@@ -41154,7 +41395,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     };
 
-    const open = displayNode !== null && (isOpenControlled ? openProp : openState);
+    const open = displayNode !== null && openState;
 
     const handleBlur = event => {
       // if open event.stopImmediatePropagation
@@ -41413,6 +41654,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     className: propTypes.string,
 
+    /**
+     * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
+     * You can only use it when the `native` prop is `false` (default).
+     */
+    defaultOpen: propTypes.bool,
+
     /**
      * The default value. Use when the component is not controlled.
      */
@@ -41542,7 +41789,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
   var _Input, _FilledInput;
 
-  const _excluded$D = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+  const _excluded$D = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 
   const useUtilityClasses$v = ownerState => {
     const {
@@ -41562,6 +41809,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       children,
       classes: classesProp = {},
       className,
+      defaultOpen = false,
       displayEmpty = false,
       IconComponent = ArrowDropDownIcon,
       id,
@@ -41618,6 +41866,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         id
       } : {
         autoWidth,
+        defaultOpen,
         displayEmpty,
         labelId,
         MenuProps,
@@ -41672,6 +41921,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     className: propTypes.string,
 
+    /**
+     * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
+     * You can only use it when the `native` prop is `false` (default).
+     * @default false
+     */
+    defaultOpen: propTypes.bool,
+
     /**
      * The default value. Use when the component is not controlled.
      */
@@ -42036,7 +42292,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   } ;
   var Skeleton$1 = Skeleton;
 
-  const _excluded$B = ["components", "componentsProps", "color", "size"];
+  const _excluded$B = ["component", "components", "componentsProps", "color", "size"];
   const sliderClasses = _extends({}, sliderUnstyledClasses$1, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
   const SliderRoot = styled$1('span', {
     name: 'MuiSlider',
@@ -42104,6 +42360,19 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     }
   }));
+  SliderRoot.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    children: propTypes.node
+  } ;
   const SliderRail = styled$1('span', {
     name: 'MuiSlider',
     slot: 'Rail',
@@ -42129,6 +42398,19 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   }, ownerState.track === 'inverted' && {
     opacity: 1
   }));
+  SliderRail.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    children: propTypes.node
+  } ;
   const SliderTrack = styled$1('span', {
     name: 'MuiSlider',
     slot: 'Track',
@@ -42165,6 +42447,19 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       borderColor: color
     });
   });
+  SliderTrack.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    children: propTypes.node
+  } ;
   const SliderThumb = styled$1('span', {
     name: 'MuiSlider',
     slot: 'Thumb',
@@ -42237,6 +42532,19 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     }
   }));
+  SliderThumb.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    children: propTypes.node
+  } ;
   const SliderValueLabel = styled$1(SliderValueLabelUnstyled, {
     name: 'MuiSlider',
     slot: 'ValueLabel',
@@ -42281,6 +42589,19 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       backgroundColor: 'inherit'
     }
   }));
+  SliderValueLabel.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    children: propTypes.node
+  } ;
   const SliderMark = styled$1('span', {
     name: 'MuiSlider',
     slot: 'Mark',
@@ -42306,6 +42627,19 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     backgroundColor: theme.palette.background.paper,
     opacity: 0.8
   }));
+  SliderMark.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    children: propTypes.node
+  } ;
   const SliderMarkLabel = styled$1('span', {
     name: 'MuiSlider',
     slot: 'MarkLabel',
@@ -42334,7 +42668,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   }, markLabelActive && {
     color: theme.palette.text.primary
   }));
-  SliderRoot.propTypes = {
+  SliderMarkLabel.propTypes
+  /* remove-proptypes */
+  = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
     // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -42343,40 +42679,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     /**
      * @ignore
      */
-    children: propTypes.node,
-
-    /**
-     * @ignore
-     */
-    ownerState: propTypes.shape({
-      'aria-label': propTypes.string,
-      'aria-labelledby': propTypes.string,
-      'aria-valuetext': propTypes.string,
-      classes: propTypes.object,
-      color: propTypes.oneOf(['primary', 'secondary']),
-      defaultValue: propTypes.oneOfType([propTypes.arrayOf(propTypes.number), propTypes.number]),
-      disabled: propTypes.bool,
-      getAriaLabel: propTypes.func,
-      getAriaValueText: propTypes.func,
-      isRtl: propTypes.bool,
-      marks: propTypes.oneOfType([propTypes.arrayOf(propTypes.shape({
-        label: propTypes.node,
-        value: propTypes.number.isRequired
-      })), propTypes.bool]),
-      max: propTypes.number,
-      min: propTypes.number,
-      name: propTypes.string,
-      onChange: propTypes.func,
-      onChangeCommitted: propTypes.func,
-      orientation: propTypes.oneOf(['horizontal', 'vertical']),
-      scale: propTypes.func,
-      step: propTypes.number,
-      track: propTypes.oneOf(['inverted', 'normal', false]),
-      value: propTypes.oneOfType([propTypes.arrayOf(propTypes.number), propTypes.number]),
-      valueLabelDisplay: propTypes.oneOf(['auto', 'off', 'on']),
-      valueLabelFormat: propTypes.oneOfType([propTypes.func, propTypes.string])
-    })
-  };
+    children: propTypes.node
+  } ;
 
   const extendUtilityClasses = ownerState => {
     const {
@@ -42390,10 +42694,6 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
   };
 
-  const shouldSpreadOwnerState = Component => {
-    return !Component || !isHostComponent(Component);
-  };
-
   const Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(inputProps, ref) {
     var _componentsProps$root, _componentsProps$thum, _componentsProps$trac, _componentsProps$valu;
 
@@ -42405,6 +42705,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const isRtl = theme.direction === 'rtl';
 
     const {
+      // eslint-disable-next-line react/prop-types
+      component = 'span',
       components = {},
       componentsProps = {},
       color = 'primary',
@@ -42430,25 +42732,26 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         MarkLabel: SliderMarkLabel
       }, components),
       componentsProps: _extends({}, componentsProps, {
-        root: _extends({}, componentsProps.root, shouldSpreadOwnerState(components.Root) && {
+        root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps$1(components.Root) && {
+          as: component,
           ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
             color,
             size
           })
         }),
-        thumb: _extends({}, componentsProps.thumb, shouldSpreadOwnerState(components.Thumb) && {
+        thumb: _extends({}, componentsProps.thumb, shouldSpreadAdditionalProps$1(components.Thumb) && {
           ownerState: _extends({}, (_componentsProps$thum = componentsProps.thumb) == null ? void 0 : _componentsProps$thum.ownerState, {
             color,
             size
           })
         }),
-        track: _extends({}, componentsProps.track, shouldSpreadOwnerState(components.Track) && {
+        track: _extends({}, componentsProps.track, shouldSpreadAdditionalProps$1(components.Track) && {
           ownerState: _extends({}, (_componentsProps$trac = componentsProps.track) == null ? void 0 : _componentsProps$trac.ownerState, {
             color,
             size
           })
         }),
-        valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadOwnerState(components.ValueLabel) && {
+        valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadAdditionalProps$1(components.ValueLabel) && {
           ownerState: _extends({}, (_componentsProps$valu = componentsProps.valueLabel) == null ? void 0 : _componentsProps$valu.ownerState, {
             color,
             size
@@ -42522,6 +42825,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * @default {}
      */
     components: propTypes.shape({
+      Input: propTypes.elementType,
       Mark: propTypes.elementType,
       MarkLabel: propTypes.elementType,
       Rail: propTypes.elementType,
@@ -42535,7 +42839,24 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside the Slider.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    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({
+        className: propTypes.string,
+        components: propTypes.shape({
+          Root: propTypes.elementType
+        }),
+        style: propTypes.object,
+        value: propTypes.oneOfType([propTypes.arrayOf(propTypes.number), propTypes.number]),
+        valueLabelDisplay: propTypes.oneOf(['auto', 'off', 'on'])
+      })
+    }),
 
     /**
      * The default value. Use when the component is not controlled.
@@ -44727,7 +45048,12 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      arrow: propTypes.object,
+      popper: propTypes.object,
+      tooltip: propTypes.object,
+      transition: propTypes.object
+    }),
 
     /**
      * Set to `true` if the `title` acts as an accessible description.
@@ -46009,7 +46335,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The props used for each slot inside.
      * @default {}
      */
-    componentsProps: propTypes.object,
+    componentsProps: propTypes.shape({
+      label: propTypes.object
+    }),
 
     /**
      * If `true`, the step is marked as failed.
@@ -51027,6 +51355,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * Props applied to the [`InputLabel`](/api/input-label/) element.
+     * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
      */
     InputLabelProps: propTypes.object,
 
@@ -52170,6 +52499,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.usePagination = usePagination;
   exports.useRadioGroup = useRadioGroup;
   exports.useScrollTrigger = useScrollTrigger;
+  exports.useSlider = useSlider;
   exports.useSwitch = useSwitch;
   exports.useTab = useTab$1;
   exports.useTabContext = useTabContext;