@mui/material 5.10.11 → 5.10.13

package/InputBase/InputBase.js

@@ -45,7 +45,7 @@ var _inputBaseClasses = _interopRequireWildcard(require("./inputBaseClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
+const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -249,6 +249,8 @@ const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.defaul
  */
 
 const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
+  var _slotProps$input;
+
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiInputBase'
@@ -283,6 +285,8 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     readOnly,
     renderSuffix,
     rows,
+    slotProps = {},
+    slots = {},
     startAdornment,
     type = 'text',
     value: valueProp
@@ -483,10 +487,10 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     type
   });
   const classes = useUtilityClasses(ownerState);
-  const Root = components.Root || InputBaseRoot;
-  const rootProps = componentsProps.root || {};
-  const Input = components.Input || InputBaseComponent;
-  inputProps = (0, _extends2.default)({}, inputProps, componentsProps.input);
+  const Root = slots.root || components.Root || InputBaseRoot;
+  const rootProps = slotProps.root || componentsProps.root || {};
+  const Input = slots.input || components.Input || InputBaseComponent;
+  inputProps = (0, _extends2.default)({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, !(0, _base.isHostComponent)(Root) && {
       ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState)
@@ -578,8 +582,11 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   .oneOfType([_propTypes.default.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), _propTypes.default.string]),
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -588,7 +595,12 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Input.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
@@ -756,6 +768,31 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    input: _propTypes.default.object,
+    root: _propTypes.default.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.default.shape({
+    input: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/ListItem/ListItem.d.ts

@@ -88,20 +88,49 @@ export interface ListItemTypeMap<P, D extends React.ElementType> {
   props: P &
     ListItemBaseProps & {
       /**
-       * The components used for each slot inside the InputBase.
-       * Either a string to use a HTML element or a component.
+       * The components used for each slot inside.
+       *
+       * This prop is an alias for the `slots` prop.
+       * It's recommended to use the `slots` prop instead.
+       *
        * @default {}
        */
       components?: {
         Root?: React.ElementType;
       };
       /**
-       * The props used for each slot inside the Input.
+       * The extra props for the slot components.
+       * You can override the existing props or add new ones.
+       *
+       * This prop is an alias for the `slotProps` prop.
+       * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+       *
        * @default {}
        */
       componentsProps?: {
         root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
       };
+      /**
+       * The extra props for the slot components.
+       * You can override the existing props or add new ones.
+       *
+       * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+       *
+       * @default {}
+       */
+      slotProps?: {
+        root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
+      };
+      /**
+       * 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?: {
+        root?: React.ElementType;
+      };
     };
   defaultComponent: D;
 }

package/ListItem/ListItem.js

@@ -46,7 +46,7 @@ var _ListItemSecondaryAction = _interopRequireDefault(require("../ListItemSecond
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className"],
-      _excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"];
+      _excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -193,16 +193,18 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     divider = false,
     focusVisibleClassName,
     secondaryAction,
-    selected = false
+    selected = false,
+    slotProps = {},
+    slots = {}
   } = props,
         ContainerProps = (0, _objectWithoutPropertiesLoose2.default)(props.ContainerProps, _excluded),
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const context = React.useContext(_ListContext.default);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   (0, _useEnhancedEffect.default)(() => {
     if (autoFocus) {
@@ -230,8 +232,8 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
   });
   const classes = useUtilityClasses(ownerState);
   const handleRef = (0, _useForkRef.default)(listItemRef, ref);
-  const Root = components.Root || ListItemRoot;
-  const rootProps = componentsProps.root || {};
+  const Root = slots.root || components.Root || ListItemRoot;
+  const rootProps = slotProps.root || componentsProps.root || {};
   const componentProps = (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, rootProps.className, className),
     disabled
@@ -279,8 +281,7 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     value: childContext,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
       as: Component,
-      ref: handleRef,
-      ownerState: ownerState
+      ref: handleRef
     }, !(0, _base.isHostComponent)(Root) && {
       ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState)
     }, componentProps, {
@@ -363,8 +364,11 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
   component: _propTypes.default.elementType,
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -372,7 +376,12 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Input.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
@@ -442,6 +451,29 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    */
   selected: _propTypes.default.bool,
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    root: _propTypes.default.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.default.shape({
+    root: _propTypes.default.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/ListItemButton/ListItemButton.js

@@ -150,11 +150,11 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const context = React.useContext(_ListContext.default);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     alignItems,
     disableGutters
-  };
+  }), [alignItems, context.dense, dense, disableGutters]);
   const listItemRef = React.useRef(null);
   (0, _useEnhancedEffect.default)(() => {
     if (autoFocus) {

package/MenuItem/MenuItem.js

@@ -176,10 +176,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const context = React.useContext(_ListContext.default);
-  const childContext = {
+  const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
     disableGutters
-  };
+  }), [context.dense, dense, disableGutters]);
   const menuItemRef = React.useRef(null);
   (0, _useEnhancedEffect.default)(() => {
     if (autoFocus) {

package/Modal/Modal.d.ts

@@ -32,8 +32,11 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
      */
     BackdropProps?: Partial<BackdropProps>;
     /**
-     * The components used for each slot inside the Modal.
-     * Either a string to use a HTML element or a component.
+     * The components used for each slot inside.
+     *
+     * This prop is an alias for the `slots` prop.
+     * It's recommended to use the `slots` prop instead.
+     *
      * @default {}
      */
     components?: {
@@ -41,7 +44,12 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
       Backdrop?: React.ElementType;
     };
     /**
-     * The props used for each slot inside the Modal.
+     * The extra props for the slot components.
+     * You can override the existing props or add new ones.
+     *
+     * This prop is an alias for the `slotProps` prop.
+     * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+     *
      * @default {}
      */
     componentsProps?: ModalUnstyledTypeMap['props']['slotProps'];

package/Modal/Modal.js

@@ -210,8 +210,11 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   component: _propTypes.default.elementType,
 
   /**
-   * The components used for each slot inside the Modal.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -220,7 +223,12 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Modal.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: _propTypes.default.shape({

package/NativeSelect/NativeSelectInput.js

@@ -64,12 +64,14 @@ const nativeSelectSelectStyles = ({
   borderRadius: 0,
   // Reset
   cursor: 'pointer',
-  '&:focus': {
-    // Show that it's not an text input
-    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)',
+  '&:focus': (0, _extends2.default)({}, theme.vars ? {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.05)`
+  } : {
+    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
+  }, {
     borderRadius: 0 // Reset Chrome style
 
-  },
+  }),
   // Remove IE11 arrow
   '&::-ms-expand': {
     display: 'none'
@@ -81,7 +83,7 @@ const nativeSelectSelectStyles = ({
     height: 'auto'
   },
   '&:not([multiple]) option, &:not([multiple]) optgroup': {
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   },
   // Bump specificity to allow extending custom inputs
   '&&&': {
@@ -94,9 +96,9 @@ const nativeSelectSelectStyles = ({
     paddingRight: 32
   }
 }, ownerState.variant === 'outlined' && {
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
   '&:focus': {
-    borderRadius: theme.shape.borderRadius // Reset the reset for Chrome style
+    borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
 
   },
   '&&&': {
@@ -131,9 +133,9 @@ const nativeSelectIconStyles = ({
   // Center vertically, height is 1em
   pointerEvents: 'none',
   // Don't block pointer events on the select under the icon.
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   [`&.${_nativeSelectClasses.default.disabled}`]: {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }, ownerState.open && {
   transform: 'rotate(180deg)'

package/OutlinedInput/OutlinedInput.js

@@ -35,7 +35,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"];
+const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -145,7 +145,7 @@ const OutlinedInputInput = (0, _styled.default)(_InputBase.InputBaseComponent, {
   paddingRight: 0
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _React$Fragment;
+  var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -158,6 +158,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     label,
     multiline = false,
     notched,
+    slots = {},
     type = 'text'
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -180,11 +181,13 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     size: fcs.size,
     type
   });
+  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : OutlinedInputRoot;
+  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : OutlinedInputInput;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, (0, _extends2.default)({
-    components: (0, _extends2.default)({
-      Root: OutlinedInputRoot,
-      Input: OutlinedInputInput
-    }, components),
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
     renderSuffix: state => /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedOutlineRoot, {
       ownerState: ownerState,
       className: classes.notchedOutline,
@@ -240,8 +243,11 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   .oneOfType([_propTypes.default.oneOf(['primary', 'secondary']), _propTypes.default.string]),
 
   /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -369,6 +375,18 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
    */
   rows: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
 
+  /**
+   * 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.default.shape({
+    input: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/PaginationItem/PaginationItem.d.ts

@@ -29,13 +29,12 @@ export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'di
       PaginationItemPropsColorOverrides
     >;
     /**
-     * The components used for first, last, next & previous item type
-     * @default {
-     *   first: FirstPageIcon,
-     *   last: LastPageIcon,
-     *   next: NavigateNextIcon,
-     *   previous: NavigateBeforeIcon,
-     * }
+     * The components used for each slot inside.
+     *
+     * This prop is an alias for the `slots` prop.
+     * It's recommended to use the `slots` prop instead.
+     *
+     * @default {}
      */
     components?: {
       first?: React.ElementType;
@@ -67,6 +66,19 @@ export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'di
      * @default 'medium'
      */
     size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
+    /**
+     * 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?: {
+      first?: React.ElementType;
+      last?: React.ElementType;
+      next?: React.ElementType;
+      previous?: React.ElementType;
+    };
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

package/PaginationItem/PaginationItem.js

@@ -43,7 +43,7 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "type", "variant"];
+const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -245,17 +245,13 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     className,
     color = 'standard',
     component,
-    components = {
-      first: _FirstPage.default,
-      last: _LastPage.default,
-      next: _NavigateNext.default,
-      previous: _NavigateBefore.default
-    },
+    components = {},
     disabled = false,
     page,
     selected = false,
     shape = 'circular',
     size = 'medium',
+    slots = {},
     type = 'page',
     variant = 'text'
   } = props,
@@ -272,15 +268,15 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
   const theme = (0, _useTheme.default)();
   const classes = useUtilityClasses(ownerState);
   const normalizedIcons = theme.direction === 'rtl' ? {
-    previous: components.next || _NavigateNext.default,
-    next: components.previous || _NavigateBefore.default,
-    last: components.first || _FirstPage.default,
-    first: components.last || _LastPage.default
+    previous: slots.next || components.next || _NavigateNext.default,
+    next: slots.previous || components.previous || _NavigateBefore.default,
+    last: slots.first || components.first || _FirstPage.default,
+    first: slots.last || components.last || _LastPage.default
   } : {
-    previous: components.previous || _NavigateBefore.default,
-    next: components.next || _NavigateNext.default,
-    first: components.first || _FirstPage.default,
-    last: components.last || _LastPage.default
+    previous: slots.previous || components.previous || _NavigateBefore.default,
+    next: slots.next || components.next || _NavigateNext.default,
+    first: slots.first || components.first || _FirstPage.default,
+    last: slots.last || components.last || _LastPage.default
   };
   const Icon = normalizedIcons[type];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItemEllipsis, {
@@ -342,13 +338,12 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
   component: _propTypes.default.elementType,
 
   /**
-   * The components used for first, last, next & previous item type
-   * @default {
-   *   first: FirstPageIcon,
-   *   last: LastPageIcon,
-   *   next: NavigateNextIcon,
-   *   previous: NavigateBeforeIcon,
-   * }
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
    */
   components: _propTypes.default.shape({
     first: _propTypes.default.elementType,
@@ -388,6 +383,20 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([_propTypes.default.oneOf(['small', 'medium', 'large']), _propTypes.default.string]),
 
+  /**
+   * 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.default.shape({
+    first: _propTypes.default.elementType,
+    last: _propTypes.default.elementType,
+    next: _propTypes.default.elementType,
+    previous: _propTypes.default.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/README.md

@@ -140,6 +140,7 @@ via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://ww
   <a href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/192.png" alt="dialmycalls.com" title="Send text messages, calls & emails to thousands with ease." loading="lazy" /></a>
   <a href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/192.png" alt="goread.io" title="Instagram followers, likes, power likes, views, comments, saves in minutes." loading="lazy" /></a>
   <a href="https://icons8.com?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/icons8/7fa1641/logo/192.png" alt="Icons8" title="We provide the neat icons, photos, illustrations, and music. Developers, use our API to insert all the content we have into your apps." loading="lazy"></a>
+  <a href="https://ipinfo.ai?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/ipinfoai/04f41d5/logo/192.png" alt="ipinfo.ai" title="We offer various IP data API services, including IP Geolocation Data, ASN Data, Company Data, IP Ranges Data, Abuse Contacts Data, Anonymous Browsing Detection, etc." loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged \$500/month or more to MUI.

package/Radio/Radio.js

@@ -72,7 +72,8 @@ const RadioRoot = (0, _styled.default)(_SwitchBase.default, {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary
+}, !ownerState.disableRipple && {
   '&:hover': {
     backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity