@mui/material 5.2.4 → 5.2.8

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.4
+/** @license MUI v5.2.8
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -755,8 +755,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 +2009,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 +2036,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 +2057,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",
@@ -7942,7 +7943,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 +8395,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 +8624,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 +8637,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 +8712,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 +8742,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 +8821,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 +8837,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 +9174,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 +9566,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 +9883,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 +9974,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 +11081,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.
@@ -14096,7 +14137,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const Mark = components.Mark || 'span';
     const markProps = componentsProps.mark || {};
     const MarkLabel = components.MarkLabel || 'span';
-    const markLabelProps = componentsProps.markLabel || {}; // all props with defaults
+    const markLabelProps = componentsProps.markLabel || {};
+    const Input = components.Input || 'input';
+    const inputProps = componentsProps.input || {}; // all props with defaults
     // consider extracting to hook an reusing the lint rule for the varints
 
     const ownerState = _extends({}, props, {
@@ -14194,7 +14237,7 @@ 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", {
+              children: /*#__PURE__*/jsxRuntime_1(Input, _extends({
                 tabIndex: tabIndex,
                 "data-index": index,
                 "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
@@ -14219,8 +14262,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
                   // So that VoiceOver's focus indicator matches the thumb's dimensions
                   width: '100%',
                   height: '100%'
-                })
-              })
+                }, inputProps.style)
+              }, !isHostComponent(Input) && {
+                ownerState: _extends({}, ownerState, inputProps.ownerState)
+              }, inputProps))
             }))
           }))
         }, index);
@@ -14293,6 +14338,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 +14352,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 +14766,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 +15013,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 +15175,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 +15476,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 +15684,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 +16815,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 +16881,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 +16891,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 +16968,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).
@@ -22586,7 +22678,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({
+      clearIndicator: propTypes.object
+    }),
 
     /**
      * The default value. Use when the component is not controlled.
@@ -23733,7 +23827,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 +23860,21 @@ 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 _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)}`]])
     });
   };
 
@@ -23917,9 +24016,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 +24033,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 +24044,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,
@@ -23961,12 +24072,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(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) && {
           ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
-            color
+            color,
+            overlap
           })
         })
       },
@@ -24037,7 +24150,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 +27553,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 +30197,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 +30627,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 +31251,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 +34181,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 +34592,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 +34607,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 +36142,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.
@@ -42354,11 +42489,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     return !Component || !isHostComponent(Component);
   };
 
-  const Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(inputProps, ref) {
+  const Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(sliderProps, ref) {
     var _componentsProps$root, _componentsProps$thum, _componentsProps$trac, _componentsProps$valu;
 
     const props = useThemeProps({
-      props: inputProps,
+      props: sliderProps,
       name: 'MuiSlider'
     });
     const theme = useTheme();
@@ -42482,6 +42617,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 +42631,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 +44840,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 +46127,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 +51147,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 +52278,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;