@mui/material 5.2.5 → 5.3.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.5
+/** @license MUI v5.3.0
  *
  * 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);
@@ -755,8 +752,9 @@
 
   var fixedElements = /* #__PURE__ */new WeakMap();
   var compat = function compat(element) {
-    if (element.type !== 'rule' || !element.parent || // .length indicates if this rule contains pseudo or not
-    !element.length) {
+    if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
+    // negative .length indicates that this rule has been already prefixed
+    element.length < 1) {
       return;
     }
 
@@ -2008,7 +2006,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.7.0",
+  	version: "11.7.1",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -2035,7 +2033,7 @@
   	},
   	dependencies: {
   		"@babel/runtime": "^7.13.10",
-  		"@emotion/cache": "^11.6.0",
+  		"@emotion/cache": "^11.7.1",
   		"@emotion/serialize": "^1.0.2",
   		"@emotion/sheet": "^1.1.0",
   		"@emotion/utils": "^1.0.0",
@@ -2056,8 +2054,8 @@
   	},
   	devDependencies: {
   		"@babel/core": "^7.13.10",
-  		"@emotion/css": "11.5.0",
-  		"@emotion/css-prettifier": "1.0.0",
+  		"@emotion/css": "11.7.1",
+  		"@emotion/css-prettifier": "1.0.1",
   		"@emotion/server": "11.4.0",
   		"@emotion/styled": "11.6.0",
   		"@types/react": "^16.9.11",
@@ -6184,6 +6182,9 @@
   const letterSpacing = style$2({
     prop: 'letterSpacing'
   });
+  const textTransform = style$2({
+    prop: 'textTransform'
+  });
   const lineHeight = style$2({
     prop: 'lineHeight'
   });
@@ -6195,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 = {
@@ -6872,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;
@@ -6935,6 +6940,10 @@
         return Component;
       };
 
+      if (defaultStyledResolver.withConfig) {
+        muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+      }
+
       return muiStyledResolver;
     };
   }
@@ -7942,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;
       }
 
@@ -8390,7 +8403,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         // only have an opinion about this when closed
         'aria-activedescendant': popupOpen ? '' : null,
         'aria-autocomplete': autoComplete ? 'both' : 'list',
-        'aria-controls': listboxAvailable ? `${id}-listbox` : null,
+        'aria-controls': listboxAvailable ? `${id}-listbox` : undefined,
         // Disable browser's suggestion that might overlap with the popup.
         // Handle autocomplete but not autofill.
         autoComplete: 'off',
@@ -8619,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.
@@ -8630,25 +8645,70 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var BackdropUnstyled$1 = BackdropUnstyled;
 
+  function useBadge(props) {
+    const {
+      anchorOrigin: anchorOriginProp = {
+        vertical: 'top',
+        horizontal: 'right'
+      },
+      badgeContent: badgeContentProp,
+      invisible: invisibleProp,
+      max: maxProp = 99,
+      showZero = false,
+      variant: variantProp = 'standard'
+    } = props;
+    const prevProps = usePreviousProps$1({
+      anchorOrigin: anchorOriginProp,
+      badgeContent: badgeContentProp,
+      max: maxProp,
+      variant: variantProp
+    });
+    let invisible = invisibleProp;
+
+    if (invisibleProp == null && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
+      invisible = true;
+    }
+
+    const {
+      anchorOrigin = anchorOriginProp,
+      badgeContent,
+      max = maxProp,
+      variant = variantProp
+    } = invisible ? prevProps : props;
+    let displayValue = '';
+
+    if (variant !== 'dot') {
+      displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
+    }
+
+    return {
+      anchorOrigin,
+      badgeContent,
+      invisible,
+      max,
+      variant,
+      displayValue
+    };
+  }
+
   function getBadgeUtilityClass(slot) {
     return generateUtilityClass('MuiBadge', slot);
   }
-  const badgeUnstyledClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular', 'invisible']);
+  const badgeUnstyledClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopLeft', 'anchorOriginTopRight', 'anchorOriginBottomLeft', 'anchorOriginBottomRight', 'invisible']);
   var badgeUnstyledClasses$1 = badgeUnstyledClasses;
 
-  const _excluded$2l = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "overlap", "showZero", "variant", "theme"];
+  const _excluded$2l = ["anchorOrigin", "classes", "badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero", "variant"];
 
   const useUtilityClasses$1S = ownerState => {
     const {
       variant,
       anchorOrigin,
-      overlap,
       invisible,
       classes
     } = ownerState;
     const slots = {
       root: ['root'],
-      badge: ['badge', variant, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, invisible && 'invisible']
+      badge: ['badge', variant, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, invisible && 'invisible']
     };
     return composeClasses(slots, getBadgeUtilityClass, classes);
   };
@@ -8660,40 +8720,29 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         horizontal: 'right'
       },
       classes: classesProp,
-      badgeContent: badgeContentProp,
       component,
       children,
       className,
       components = {},
       componentsProps = {},
-      invisible: invisibleProp,
       max: maxProp = 99,
-      overlap: overlapProp = 'rectangular',
       showZero = false,
       variant: variantProp = 'standard'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$2l);
 
-    const prevProps = usePreviousProps$1({
+    const {
+      anchorOrigin,
+      badgeContent,
+      max,
+      variant,
+      displayValue,
+      invisible
+    } = useBadge(_extends({}, props, {
       anchorOrigin: anchorOriginProp,
-      badgeContent: badgeContentProp,
       max: maxProp,
-      overlap: overlapProp,
       variant: variantProp
-    });
-    let invisible = invisibleProp;
-
-    if (invisibleProp == null && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
-      invisible = true;
-    }
-
-    const {
-      anchorOrigin = anchorOriginProp,
-      badgeContent,
-      max = maxProp,
-      overlap = overlapProp,
-      variant = variantProp
-    } = invisible ? prevProps : props;
+    }));
 
     const ownerState = _extends({}, props, {
       anchorOrigin,
@@ -8701,16 +8750,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       classes: classesProp,
       invisible,
       max,
-      overlap,
-      variant
+      variant,
+      showZero
     });
 
-    let displayValue = '';
-
-    if (variant !== 'dot') {
-      displayValue = badgeContent > max ? `${max}+` : badgeContent;
-    }
-
     const classes = useUtilityClasses$1S(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
@@ -8786,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.
@@ -8799,12 +8845,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     max: propTypes.number,
 
-    /**
-     * Wrapped shape the badge should overlap.
-     * @default 'rectangular'
-     */
-    overlap: propTypes.oneOf(['circular', 'rectangular']),
-
     /**
      * Controls whether the badge is hidden when `badgeContent` is zero.
      * @default false
@@ -9142,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.
@@ -9532,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
@@ -9847,7 +9891,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (rows) {
         {
           if (minRows || maxRows) {
-            console.warn('Material-UI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.');
+            console.warn('MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.');
           }
         }
 
@@ -9938,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.
@@ -11042,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.
@@ -13463,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) {
@@ -13479,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) {
@@ -13492,9 +13542,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       return acc;
-    }, null);
+    }, null)) != null ? _values$reduce : {};
     return closestIndex;
-  }
+  } // TODO: Set the correct event type
+
 
   function trackFinger(event, touchId) {
     if (touchId.current !== undefined && event.changedTouches) {
@@ -13559,10 +13610,15 @@ 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;
+
+      // @ts-ignore TODO: Property focus does not exists on type string
+      (_sliderRef$current2 = sliderRef.current) == null ? void 0 : _sliderRef$current2.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
     }
 
     if (setActive) {
@@ -13596,8 +13652,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.
@@ -13608,7 +13663,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() {
@@ -13623,70 +13677,26 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return cachedSupportsTouchActionNone;
   }
 
-  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) {
+  function useSlider(props) {
     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.
@@ -13706,7 +13716,9 @@ 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;
+      // @ts-ignore nativeEvent does not exists on Event
+      const nativeEvent = event.nativeEvent || event; // @ts-ignore TODO: check this again
+
       const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
       Object.defineProperty(clonedEvent, 'target', {
         writable: true,
@@ -13714,7 +13726,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           value,
           name
         }
-      });
+      }); // @ts-ignore TODO: value could be undefined?
+
       onChange(clonedEvent, value, thumbIndex);
     });
 
@@ -13724,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,
@@ -13735,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);
 
@@ -13744,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) {
@@ -13754,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]);
 
@@ -13780,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) {
@@ -13794,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) {
@@ -13838,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';
     }
 
@@ -13874,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];
       }
@@ -13921,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
@@ -13993,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;
@@ -14031,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()
         });
@@ -14042,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
 
 
@@ -14055,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,
@@ -14115,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) => {
@@ -14148,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),
@@ -14157,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
@@ -14170,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)
@@ -14194,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);
@@ -14293,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,
@@ -14306,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.
@@ -14703,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.
@@ -14945,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.
@@ -15105,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.
@@ -15404,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;
 
@@ -15610,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.
@@ -16739,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 {
@@ -16805,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,
@@ -16814,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]
@@ -16885,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).
@@ -22230,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,
@@ -22451,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,
@@ -22485,7 +22706,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
               return renderListOption(option, index);
             })
           })) : null]
-        })
+        }))
       }) : null]
     });
   });
@@ -22586,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.
@@ -23733,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.
@@ -23764,18 +23990,27 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   } ;
   var Backdrop$1 = Backdrop;
 
-  const _excluded$1K = ["component", "components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"];
-  const badgeClasses = _extends({}, badgeUnstyledClasses$1, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning']));
+  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']));
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
 
   const extendUtilityClasses$2 = ownerState => {
     const {
       color,
+      anchorOrigin,
+      overlap,
       classes = {}
     } = ownerState;
     return _extends({}, classes, {
-      badge: clsx(classes.badge, color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
+      badge: clsx(classes.badge, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
     });
   };
 
@@ -23903,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;
 
@@ -23917,9 +24147,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
 
     const {
+      anchorOrigin: anchorOriginProp = {
+        vertical: 'top',
+        horizontal: 'right'
+      },
       component = 'span',
       components = {},
       componentsProps = {},
+      overlap: overlapProp = 'rectangular',
       color: colorProp = 'default',
       invisible: invisibleProp,
       badgeContent: badgeContentProp,
@@ -23929,7 +24164,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
           other = _objectWithoutPropertiesLoose(props, _excluded$1K);
 
     const prevProps = usePreviousProps$1({
-      color: colorProp
+      anchorOrigin: anchorOriginProp,
+      color: colorProp,
+      overlap: overlapProp
     });
     let invisible = invisibleProp;
 
@@ -23938,16 +24175,21 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
 
     const {
-      color = colorProp
+      color = colorProp,
+      overlap = overlapProp,
+      anchorOrigin = anchorOriginProp
     } = invisible ? prevProps : props;
 
     const ownerState = _extends({}, props, {
+      anchorOrigin,
       invisible,
-      color
+      color,
+      overlap
     });
 
     const classes = extendUtilityClasses$2(ownerState);
     return /*#__PURE__*/jsxRuntime_1(BadgeUnstyled$1, _extends({
+      anchorOrigin: anchorOrigin,
       invisible: invisibleProp,
       badgeContent: badgeContentProp,
       showZero: showZero,
@@ -23958,15 +24200,17 @@ 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
+            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
+            color,
+            overlap
           })
         })
       },
@@ -24037,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.
@@ -27437,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.
@@ -30079,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.
@@ -30506,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.
@@ -31127,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`.
@@ -34055,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.
@@ -34463,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' && {
@@ -34476,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)'
   })));
@@ -36009,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.
@@ -40832,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',
@@ -40927,6 +41193,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       autoWidth,
       children,
       className,
+      defaultOpen,
       defaultValue,
       disabled,
       displayEmpty,
@@ -40956,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);
@@ -40963,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;
@@ -40978,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();
@@ -41114,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
@@ -41373,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.
      */
@@ -41502,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 {
@@ -41522,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,
@@ -41578,6 +41866,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         id
       } : {
         autoWidth,
+        defaultOpen,
         displayEmpty,
         labelId,
         MenuProps,
@@ -41632,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.
      */
@@ -41996,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',
@@ -42064,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',
@@ -42089,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',
@@ -42125,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',
@@ -42197,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',
@@ -42241,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',
@@ -42266,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',
@@ -42294,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"     |
@@ -42303,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 {
@@ -42350,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;
 
@@ -42365,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',
@@ -42390,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
@@ -42482,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,
@@ -42495,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.
@@ -44687,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.
@@ -45969,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.
@@ -50987,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,
 
@@ -52117,6 +52486,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.unstable_useId = useId;
   exports.unsupportedProp = unsupportedProp;
   exports.useAutocomplete = useAutocomplete;
+  exports.useBadge = useBadge;
   exports.useButton = useButton;
   exports.useControlled = useControlled;
   exports.useEventCallback = useEventCallback;
@@ -52129,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;