@mui/material 6.0.0-alpha.4 → 6.0.0-alpha.5

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.4
+ * @mui/material v6.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7270,7 +7270,7 @@
     return resolveProps(theme.components[name].defaultProps, props);
   }
 
-  function useThemeProps$Q(_ref) {
+  function useThemeProps$R(_ref) {
     var props = _ref.props,
       name = _ref.name,
       defaultTheme = _ref.defaultTheme,
@@ -9572,7 +9572,7 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$Q({
+    return useThemeProps$R({
       props: inProps,
       name: 'MuiContainer',
       defaultTheme: defaultTheme$6
@@ -9960,7 +9960,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$Q({
+    return useThemeProps$R({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -10127,7 +10127,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$Q({
+    return useThemeProps$R({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -11167,10 +11167,10 @@
     return theme[THEME_ID] || theme;
   }
 
-  function useThemeProps$P(_ref) {
+  function useThemeProps$Q(_ref) {
     var props = _ref.props,
       name = _ref.name;
-    return useThemeProps$Q({
+    return useThemeProps$R({
       props: props,
       name: name,
       defaultTheme: defaultTheme$3,
@@ -11687,12 +11687,18 @@
     throw new Error("MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.For more details, see https://github.com/mui/material-ui/pull/35150." );
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function createUseThemeProps(name) {
+    return useThemeProps$Q;
+  }
+
   function getSvgIconUtilityClass(slot) {
     return generateUtilityClass$1('MuiSvgIcon', slot);
   }
   var svgIconClasses = generateUtilityClasses$1('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
+  var useThemeProps$P = createUseThemeProps();
   var useUtilityClasses$1P = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       fontSize = ownerState.fontSize,
@@ -11710,33 +11716,92 @@
       return [styles.root, ownerState.color !== 'inherit' && styles["color".concat(capitalize(ownerState.color))], styles["fontSize".concat(capitalize(ownerState.fontSize))]];
     }
   })(function (_ref) {
-    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+    var _theme$transitions, _theme$transitions$cr, _transitions, _theme$vars, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$vars2, _palette2, _theme$vars4, _palette3, _theme$vars5;
+    var theme = _ref.theme;
     return {
       userSelect: 'none',
       width: '1em',
       height: '1em',
       display: 'inline-block',
-      // the <svg> will define the property that has `currentColor`
-      // for example heroicons uses fill="none" and stroke="currentColor"
-      fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
       flexShrink: 0,
       transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-        duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
+        duration: (_transitions = ((_theme$vars = theme.vars) != null ? _theme$vars : theme).transitions) == null || (_transitions = _transitions.duration) == null ? void 0 : _transitions.shorter
       }),
-      fontSize: {
-        inherit: 'inherit',
-        small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-        medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-        large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
-      }[ownerState.fontSize],
-      // TODO v5 deprecate, v6 remove for sx
-      color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
-        action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
-        disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
-        inherit: undefined
-      }[ownerState.color]
+      variants: [{
+        props: function props(_props) {
+          return !_props.hasSvgAsChild;
+        },
+        style: {
+          // the <svg> will define the property that has `currentColor`
+          // for example heroicons uses fill="none" and stroke="currentColor"
+          fill: 'currentColor'
+        }
+      }, {
+        props: {
+          fontSize: 'inherit'
+        },
+        style: {
+          fontSize: 'inherit'
+        }
+      }, {
+        props: {
+          fontSize: 'small'
+        },
+        style: {
+          fontSize: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem'
+        }
+      }, {
+        props: {
+          fontSize: 'medium'
+        },
+        style: {
+          fontSize: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem'
+        }
+      }, {
+        props: {
+          fontSize: 'large'
+        },
+        style: {
+          fontSize: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+        }
+      }].concat(_toConsumableArray(Object.entries(((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette).filter(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          value = _ref3[1];
+        return value.main;
+      }).map(function (_ref4) {
+        var _palette, _theme$vars3;
+        var _ref5 = _slicedToArray(_ref4, 1),
+          color = _ref5[0];
+        return {
+          props: {
+            color: color
+          },
+          style: {
+            color: (_palette = ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette) == null || (_palette = _palette[color]) == null ? void 0 : _palette.main
+          }
+        };
+      })), [{
+        props: {
+          color: 'action'
+        },
+        style: {
+          color: (_palette2 = ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active
+        }
+      }, {
+        props: {
+          color: 'disabled'
+        },
+        style: {
+          color: (_palette3 = ((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled
+        }
+      }, {
+        props: {
+          color: 'inherit'
+        },
+        style: {
+          color: undefined
+        }
+      }])
     };
   });
   var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
@@ -11861,7 +11926,9 @@
      */
     viewBox: PropTypes.string
   } ;
-  SvgIcon.muiName = 'SvgIcon';
+  if (SvgIcon) {
+    SvgIcon.muiName = 'SvgIcon';
+  }
   var SvgIcon$1 = SvgIcon;
 
   function createSvgIcon(path, displayName) {
@@ -11897,11 +11964,6 @@
     return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function createUseThemeProps(name) {
-    return useThemeProps$P;
-  }
-
   function _setPrototypeOf(o, p) {
     _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
@@ -12989,7 +13051,7 @@
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
   var Collapse = /*#__PURE__*/React__namespace.forwardRef(function Collapse(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiCollapse'
     });
@@ -13319,7 +13381,7 @@
     }));
   });
   var Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiPaper'
     });
@@ -15878,7 +15940,7 @@
     return colorTransformations$1[color] || color;
   };
   var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
-    var themeProps = useThemeProps$P({
+    var themeProps = useThemeProps$Q({
       props: inProps,
       name: 'MuiTypography'
     });
@@ -20490,6 +20552,7 @@
       isControlled = _React$useRef.current;
     var inputRef = React__namespace.useRef(null);
     var handleRef = useForkRef(forwardedRef, inputRef);
+    var heightRef = React__namespace.useRef(null);
     var shadowRef = React__namespace.useRef(null);
     var calculateTextareaStyles = React__namespace.useCallback(function () {
       var input = inputRef.current;
@@ -20546,8 +20609,12 @@
       if (isEmpty$1(textareaStyles)) {
         return;
       }
+      var outerHeightStyle = textareaStyles.outerHeightStyle;
       var input = inputRef.current;
-      input.style.height = "".concat(textareaStyles.outerHeightStyle, "px");
+      if (heightRef.current !== outerHeightStyle) {
+        heightRef.current = outerHeightStyle;
+        input.style.height = "".concat(outerHeightStyle, "px");
+      }
       input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
     }, [calculateTextareaStyles]);
     useEnhancedEffect$1(function () {
@@ -21728,7 +21795,7 @@
   var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     var _slots$root;
     var theme = useTheme$3();
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiPopper'
     });
@@ -21981,7 +22048,7 @@
     };
   });
   var ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListSubheader'
     });
@@ -22860,7 +22927,7 @@
    */
   var InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
     var _slotProps$input;
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiInputBase'
     });
@@ -28757,7 +28824,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$P({
+      return useThemeProps$Q({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -28880,7 +28947,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -29470,7 +29537,7 @@
    * Dialogs are overlaid modal paper based components with a backdrop.
    */
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function Dialog(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialog'
     });
@@ -29763,7 +29830,7 @@
     });
   });
   var DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogActions(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialogActions'
     });
@@ -29855,7 +29922,7 @@
     }));
   });
   var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogContent(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialogContent'
     });
@@ -29927,7 +29994,7 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialogContentText'
     });
@@ -29988,7 +30055,7 @@
     flex: '0 0 auto'
   });
   var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDialogTitle'
     });
@@ -30776,7 +30843,7 @@
    * when `variant="temporary"` is set.
    */
   var Drawer = /*#__PURE__*/React__namespace.forwardRef(function Drawer(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiDrawer'
     });
@@ -31394,7 +31461,7 @@
   });
   var FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input;
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiFilledInput'
     });
@@ -31960,7 +32027,7 @@
       }
     }),
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$P({
+      return useThemeProps$Q({
         props: inProps,
         name: 'MuiStack'
       });
@@ -32107,7 +32174,7 @@
    * Use this component if you want to display an extra label.
    */
   var FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
-    var _ref7, _slotProps$typography;
+    var _ref7;
     var props = useThemeProps$h({
       props: inProps,
       name: 'MuiFormControlLabel'
@@ -32126,10 +32193,12 @@
       props.name;
       props.onChange;
       var requiredProp = props.required,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$slotProps = props.slotProps,
       slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
       props.value;
-      var other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"]);
+      var other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slots", "slotProps", "value"]);
     var muiFormControl = useFormControl();
     var disabled = (_ref7 = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref7 : muiFormControl == null ? void 0 : muiFormControl.disabled;
     var required = requiredProp != null ? requiredProp : control.props.required;
@@ -32154,10 +32223,21 @@
       error: fcs.error
     });
     var classes = useUtilityClasses$14(ownerState);
-    var typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
+    var externalForwardedProps = {
+      slots: slots,
+      slotProps: _extends({}, componentsProps, slotProps)
+    };
+    var _useSlot = useSlot('typography', {
+        elementType: Typography$1,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot2 = _slicedToArray(_useSlot, 2),
+      TypographySlot = _useSlot2[0],
+      typographySlotProps = _useSlot2[1];
     var label = labelProp;
     if (label != null && label.type !== Typography$1 && !disableTypography) {
-      label = /*#__PURE__*/jsxRuntime_1(Typography$1, _extends({
+      label = /*#__PURE__*/jsxRuntime_1(TypographySlot, _extends({
         component: "span"
       }, typographySlotProps, {
         className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
@@ -32200,6 +32280,7 @@
     /**
      * The props used for each slot inside.
      * @default {}
+     * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     componentsProps: PropTypes.shape({
       typography: PropTypes.object
@@ -32249,7 +32330,14 @@
      * @default {}
      */
     slotProps: PropTypes.shape({
-      typography: PropTypes.object
+      typography: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      typography: PropTypes.elementType
     }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -32420,7 +32508,7 @@
     }]));
   });
   var FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHelperText(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiFormHelperText'
     });
@@ -32584,7 +32672,7 @@
     });
   });
   var FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiFormLabel'
     });
@@ -33043,7 +33131,7 @@
     return composeClasses(slots, getGridUtilityClass, classes);
   };
   var Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-    var themeProps = useThemeProps$P({
+    var themeProps = useThemeProps$Q({
       props: inProps,
       name: 'MuiGrid'
     });
@@ -33261,7 +33349,7 @@
     }),
     componentName: 'MuiGrid2',
     useThemeProps: function useThemeProps(inProps) {
-      return useThemeProps$P({
+      return useThemeProps$Q({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -34113,7 +34201,7 @@
     };
   });
   var Icon = /*#__PURE__*/React__namespace.forwardRef(function Icon(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiIcon'
     });
@@ -34241,7 +34329,7 @@
     }]
   });
   var ImageList = /*#__PURE__*/React__namespace.forwardRef(function ImageList(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiImageList'
     });
@@ -34414,7 +34502,7 @@
     })
   }]));
   var ImageListItem = /*#__PURE__*/React__namespace.forwardRef(function ImageListItem(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiImageListItem'
     });
@@ -34678,7 +34766,7 @@
     }]
   });
   var ImageListItemBar = /*#__PURE__*/React__namespace.forwardRef(function ImageListItemBar(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiImageListItemBar'
     });
@@ -34852,7 +34940,7 @@
   })({});
   var Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, ref) {
     var _ref3, _slots$root, _ref4, _slots$input;
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiInput'
     });
@@ -35140,7 +35228,7 @@
     });
   });
   var InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAdornment(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiInputAdornment'
     });
@@ -35340,7 +35428,7 @@
     }));
   });
   var InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       name: 'MuiInputLabel',
       props: inProps
     });
@@ -35972,7 +36060,7 @@
     }));
   });
   var Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiLink'
     });
@@ -36143,7 +36231,7 @@
     });
   });
   var List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiList'
     });
@@ -36338,7 +36426,7 @@
     }]);
   });
   var ListItemButton = /*#__PURE__*/React__namespace.forwardRef(function ListItemButton(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemButton'
     });
@@ -36525,7 +36613,7 @@
    * Must be used as the last child of ListItem to function properly.
    */
   var ListItemSecondaryAction = /*#__PURE__*/React__namespace.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemSecondaryAction'
     });
@@ -36722,7 +36810,7 @@
    * Uses an additional container component if `ListItemSecondaryAction` is the last child.
    */
   var ListItem = /*#__PURE__*/React__namespace.forwardRef(function ListItem(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItem'
     });
@@ -37059,7 +37147,7 @@
    * A simple wrapper to apply `List` styles to an `Avatar`.
    */
   var ListItemAvatar = /*#__PURE__*/React__namespace.forwardRef(function ListItemAvatar(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemAvatar'
     });
@@ -37138,7 +37226,7 @@
    * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
    */
   var ListItemIcon = /*#__PURE__*/React__namespace.forwardRef(function ListItemIcon(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemIcon'
     });
@@ -37231,7 +37319,7 @@
     }]
   });
   var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiListItemText'
     });
@@ -38205,7 +38293,7 @@
   });
   var Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
     var _slots$paper, _slotProps$paper;
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiMenu'
     });
@@ -38549,7 +38637,7 @@
     })));
   });
   var MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiMenuItem'
     });
@@ -39141,7 +39229,7 @@
    * An alternative to `<Select native />` with a much smaller bundle size footprint.
    */
   var NativeSelect = /*#__PURE__*/React__namespace.forwardRef(function NativeSelect(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       name: 'MuiNativeSelect',
       props: inProps
     });
@@ -39466,7 +39554,7 @@
   });
   var OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function OutlinedInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input, _React$Fragment;
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiOutlinedInput'
     });
@@ -40086,6 +40174,7 @@
     };
   });
   var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function PaginationItem(inProps, ref) {
+    var _slots$previous, _slots$next, _slots$first, _slots$last;
     var props = useThemeProps$c({
       props: inProps,
       name: 'MuiPaginationItem'
@@ -40107,11 +40196,13 @@
       size = _props$size === void 0 ? 'medium' : _props$size,
       _props$slots = props.slots,
       slots = _props$slots === void 0 ? {} : _props$slots,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       _props$type = props.type,
       type = _props$type === void 0 ? 'page' : _props$type,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'text' : _props$variant,
-      other = _objectWithoutProperties(props, ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"]);
+      other = _objectWithoutProperties(props, ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "slotProps", "type", "variant"]);
     var ownerState = _extends({}, props, {
       color: color,
       disabled: disabled,
@@ -40123,18 +40214,65 @@
     });
     var isRtl = useRtl();
     var classes = useUtilityClasses$D(ownerState);
-    var normalizedIcons = isRtl ? {
-      previous: slots.next || components.next || NavigateNextIcon,
-      next: slots.previous || components.previous || NavigateBeforeIcon,
-      last: slots.first || components.first || FirstPageIconDefault,
-      first: slots.last || components.last || LastPageIconDefault
-    } : {
-      previous: slots.previous || components.previous || NavigateBeforeIcon,
-      next: slots.next || components.next || NavigateNextIcon,
-      first: slots.first || components.first || FirstPageIconDefault,
-      last: slots.last || components.last || LastPageIconDefault
+    var externalForwardedProps = {
+      slots: {
+        previous: (_slots$previous = slots.previous) != null ? _slots$previous : components.previous,
+        next: (_slots$next = slots.next) != null ? _slots$next : components.next,
+        first: (_slots$first = slots.first) != null ? _slots$first : components.first,
+        last: (_slots$last = slots.last) != null ? _slots$last : components.last
+      },
+      slotProps: slotProps
     };
-    var Icon = normalizedIcons[type];
+    var _useSlot = useSlot('previous', {
+        elementType: NavigateBeforeIcon,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot2 = _slicedToArray(_useSlot, 2),
+      PreviousSlot = _useSlot2[0],
+      previousSlotProps = _useSlot2[1];
+    var _useSlot3 = useSlot('next', {
+        elementType: NavigateNextIcon,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot4 = _slicedToArray(_useSlot3, 2),
+      NextSlot = _useSlot4[0],
+      nextSlotProps = _useSlot4[1];
+    var _useSlot5 = useSlot('first', {
+        elementType: FirstPageIconDefault,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot6 = _slicedToArray(_useSlot5, 2),
+      FirstSlot = _useSlot6[0],
+      firstSlotProps = _useSlot6[1];
+    var _useSlot7 = useSlot('last', {
+        elementType: LastPageIconDefault,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState
+      }),
+      _useSlot8 = _slicedToArray(_useSlot7, 2),
+      LastSlot = _useSlot8[0],
+      lastSlotProps = _useSlot8[1];
+    var rtlAwareType = isRtl ? {
+      previous: 'next',
+      next: 'previous',
+      first: 'last',
+      last: 'first'
+    }[type] : type;
+    var IconSlot = {
+      previous: PreviousSlot,
+      next: NextSlot,
+      first: FirstSlot,
+      last: LastSlot
+    }[rtlAwareType];
+    var iconSlotProps = {
+      previous: previousSlotProps,
+      next: nextSlotProps,
+      first: firstSlotProps,
+      last: lastSlotProps
+    }[rtlAwareType];
     return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsxRuntime_1(PaginationItemEllipsis, {
       ref: ref,
       ownerState: ownerState,
@@ -40147,11 +40285,10 @@
       disabled: disabled,
       className: clsx(classes.root, className)
     }, other, {
-      children: [type === 'page' && page, Icon ? /*#__PURE__*/jsxRuntime_1(PaginationItemPageIcon, {
-        as: Icon,
-        ownerState: ownerState,
-        className: classes.icon
-      }) : null]
+      children: [type === 'page' && page, IconSlot ? /*#__PURE__*/jsxRuntime_1(PaginationItemPageIcon, _extends({}, iconSlotProps, {
+        className: classes.icon,
+        as: IconSlot
+      })) : null]
     }));
   });
   PaginationItem.propTypes /* remove-proptypes */ = {
@@ -40190,6 +40327,7 @@
      * It's recommended to use the `slots` prop instead.
      *
      * @default {}
+     * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     components: PropTypes.shape({
       first: PropTypes.elementType,
@@ -40221,11 +40359,18 @@
      * @default 'medium'
      */
     size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      first: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      last: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      next: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      previous: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
     /**
      * The components used for each slot inside.
-     *
-     * This prop is an alias for the `components` prop, which will be deprecated in the future.
-     *
      * @default {}
      */
     slots: PropTypes.shape({
@@ -40289,7 +40434,7 @@
     return "Go to ".concat(type, " page");
   }
   var Pagination = /*#__PURE__*/React__namespace.forwardRef(function Pagination(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiPagination'
     });
@@ -41234,7 +41379,7 @@
     return "".concat(value, " Star").concat(value !== 1 ? 's' : '');
   }
   var Rating = /*#__PURE__*/React__namespace.forwardRef(function Rating(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       name: 'MuiRating',
       props: inProps
     });
@@ -41675,7 +41820,7 @@
     }, colorSchemeStyles);
   });
   var ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiScopedCssBaseline'
     });
@@ -42397,7 +42542,7 @@
   var StyledOutlinedInput = styled$1(OutlinedInput$1, styledRootConfig)('');
   var StyledFilledInput = styled$1(FilledInput$1, styledRootConfig)('');
   var Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       name: 'MuiSelect',
       props: inProps
     });
@@ -42720,7 +42865,7 @@
     return ownerState.animation === 'wave' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n\n      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */\n      -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &::after {\n        animation: ", " 2s linear 0.5s infinite;\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n        content: '';\n        position: absolute;\n        transform: translateX(-100%); /* Avoid flash during server-side hydration */\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n      }\n    "])), waveKeyframe, (theme.vars || theme).palette.action.hover);
   });
   var Skeleton = /*#__PURE__*/React__namespace.forwardRef(function Skeleton(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSkeleton'
     });
@@ -43966,7 +44111,7 @@
     marginRight: -8
   });
   var SnackbarContent = /*#__PURE__*/React__namespace.forwardRef(function SnackbarContent(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSnackbarContent'
     });
@@ -44088,7 +44233,7 @@
     })));
   });
   var Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSnackbar'
     });
@@ -44623,7 +44768,7 @@
     });
   });
   var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSpeedDial'
     });
@@ -45185,7 +45330,7 @@
   // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
   var Tooltip = /*#__PURE__*/React__namespace.forwardRef(function Tooltip(inProps, ref) {
     var _ref5, _slots$popper, _ref6, _ref7, _slots$transition, _ref8, _slots$tooltip, _ref9, _slots$arrow, _slotProps$popper, _ref10, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref11, _slotProps$tooltip2, _slotProps$arrow, _ref12, _slotProps$arrow2;
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTooltip'
     });
@@ -45857,7 +46002,7 @@
     });
   });
   var SpeedDialAction = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialAction(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSpeedDialAction'
     });
@@ -46051,7 +46196,7 @@
     }));
   });
   var SpeedDialIcon = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialIcon(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiSpeedDialIcon'
     });
@@ -47453,7 +47598,7 @@
   }
   var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
   var SwipeableDrawer = /*#__PURE__*/React__namespace.forwardRef(function SwipeableDrawer(inProps, ref) {
-    var props = useThemeProps$Q({
+    var props = useThemeProps$R({
       name: 'MuiSwipeableDrawer',
       props: inProps
     });
@@ -48369,7 +48514,7 @@
     });
   });
   var Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTab'
     });
@@ -48579,7 +48724,7 @@
   });
   var defaultComponent$4 = 'table';
   var Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTable'
     });
@@ -48698,7 +48843,7 @@
   };
   var defaultComponent$3 = 'tbody';
   var TableBody = /*#__PURE__*/React__namespace.forwardRef(function TableBody(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableBody'
     });
@@ -48889,7 +49034,7 @@
    * or otherwise a `<td>` element.
    */
   var TableCell = /*#__PURE__*/React__namespace.forwardRef(function TableCell(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableCell'
     });
@@ -49028,7 +49173,7 @@
     overflowX: 'auto'
   });
   var TableContainer = /*#__PURE__*/React__namespace.forwardRef(function TableContainer(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableContainer'
     });
@@ -49103,7 +49248,7 @@
   };
   var defaultComponent$2 = 'tfoot';
   var TableFooter = /*#__PURE__*/React__namespace.forwardRef(function TableFooter(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableFooter'
     });
@@ -49182,7 +49327,7 @@
   };
   var defaultComponent$1 = 'thead';
   var TableHead = /*#__PURE__*/React__namespace.forwardRef(function TableHead(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableHead'
     });
@@ -49295,7 +49440,7 @@
     };
   });
   var Toolbar = /*#__PURE__*/React__namespace.forwardRef(function Toolbar(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiToolbar'
     });
@@ -49669,7 +49814,7 @@
    */
   var TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
     var _slotProps$select;
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTablePagination'
     });
@@ -50025,7 +50170,7 @@
    * based on the material table element parent (head, body, etc).
    */
   var TableRow = /*#__PURE__*/React__namespace.forwardRef(function TableRow(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableRow'
     });
@@ -50183,7 +50328,7 @@
    * A button based label for placing inside `TableCell` for column sorting.
    */
   var TableSortLabel = /*#__PURE__*/React__namespace.forwardRef(function TableSortLabel(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTableSortLabel'
     });
@@ -50394,7 +50539,7 @@
   });
   var TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
     var _slots$StartScrollBut, _slots$EndScrollButto;
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
@@ -50671,7 +50816,7 @@
   var defaultIndicatorStyle = {};
   var warnedOnceTabPresent = false;
   var Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTabs'
     });
@@ -51382,7 +51527,7 @@
    * - using the underlying components directly as shown in the demos
    */
   var TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(inProps, ref) {
-    var props = useThemeProps$P({
+    var props = useThemeProps$Q({
       props: inProps,
       name: 'MuiTextField'
     });
@@ -52722,7 +52867,7 @@
   exports.useStepContext = useStepContext;
   exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
-  exports.useThemeProps = useThemeProps$P;
+  exports.useThemeProps = useThemeProps$Q;
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;