@mui/material 5.10.12 → 5.10.13

package/ListItem/listItemClasses.d.ts

@@ -1,30 +1,30 @@
-export interface ListItemClasses {
-    /** Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
-    root: string;
-    /** Styles applied to the container element if `children` includes `ListItemSecondaryAction`. */
-    container: string;
-    /** State class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
-    focusVisible: string;
-    /** Styles applied to the component element if dense. */
-    dense: string;
-    /** Styles applied to the component element if `alignItems="flex-start"`. */
-    alignItemsFlexStart: string;
-    /** State class applied to the inner `component` element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the inner `component` element if `divider={true}`. */
-    divider: string;
-    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
-    gutters: string;
-    /** Styles applied to the root element unless `disablePadding={true}`. */
-    padding: string;
-    /** Styles applied to the inner `component` element if `button={true}`. */
-    button: string;
-    /** Styles applied to the component element if `children` includes `ListItemSecondaryAction`. */
-    secondaryAction: string;
-    /** State class applied to the root element if `selected={true}`. */
-    selected: string;
-}
-export declare type ListItemClassKey = keyof ListItemClasses;
-export declare function getListItemUtilityClass(slot: string): string;
-declare const listItemClasses: ListItemClasses;
-export default listItemClasses;
+export interface ListItemClasses {
+    /** Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
+    root: string;
+    /** Styles applied to the container element if `children` includes `ListItemSecondaryAction`. */
+    container: string;
+    /** State class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
+    focusVisible: string;
+    /** Styles applied to the component element if dense. */
+    dense: string;
+    /** Styles applied to the component element if `alignItems="flex-start"`. */
+    alignItemsFlexStart: string;
+    /** State class applied to the inner `component` element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the inner `component` element if `divider={true}`. */
+    divider: string;
+    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+    gutters: string;
+    /** Styles applied to the root element unless `disablePadding={true}`. */
+    padding: string;
+    /** Styles applied to the inner `component` element if `button={true}`. */
+    button: string;
+    /** Styles applied to the component element if `children` includes `ListItemSecondaryAction`. */
+    secondaryAction: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+}
+export declare type ListItemClassKey = keyof ListItemClasses;
+export declare function getListItemUtilityClass(slot: string): string;
+declare const listItemClasses: ListItemClasses;
+export default listItemClasses;

package/ListItemAvatar/listItemAvatarClasses.d.ts

@@ -1,10 +1,10 @@
-export interface ListItemAvatarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
-    alignItemsFlexStart: string;
-}
-export declare type ListItemAvatarClassKey = keyof ListItemAvatarClasses;
-export declare function getListItemAvatarUtilityClass(slot: string): string;
-declare const listItemAvatarClasses: ListItemAvatarClasses;
-export default listItemAvatarClasses;
+export interface ListItemAvatarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
+    alignItemsFlexStart: string;
+}
+export declare type ListItemAvatarClassKey = keyof ListItemAvatarClasses;
+export declare function getListItemAvatarUtilityClass(slot: string): string;
+declare const listItemAvatarClasses: ListItemAvatarClasses;
+export default listItemAvatarClasses;

package/ListItemButton/listItemButtonClasses.d.ts

@@ -1,22 +1,22 @@
-export interface ListItemButtonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the `component`'s `focusVisibleClassName` prop. */
-    focusVisible: string;
-    /** Styles applied to the component element if dense. */
-    dense: string;
-    /** Styles applied to the component element if `alignItems="flex-start"`. */
-    alignItemsFlexStart: string;
-    /** State class applied to the inner `component` element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the inner `component` element if `divider={true}`. */
-    divider: string;
-    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
-    gutters: string;
-    /** State class applied to the root element if `selected={true}`. */
-    selected: string;
-}
-export declare type ListItemButtonClassKey = keyof ListItemButtonClasses;
-export declare function getListItemButtonUtilityClass(slot: string): string;
-declare const listItemButtonClasses: ListItemButtonClasses;
-export default listItemButtonClasses;
+export interface ListItemButtonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the `component`'s `focusVisibleClassName` prop. */
+    focusVisible: string;
+    /** Styles applied to the component element if dense. */
+    dense: string;
+    /** Styles applied to the component element if `alignItems="flex-start"`. */
+    alignItemsFlexStart: string;
+    /** State class applied to the inner `component` element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the inner `component` element if `divider={true}`. */
+    divider: string;
+    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+    gutters: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+}
+export declare type ListItemButtonClassKey = keyof ListItemButtonClasses;
+export declare function getListItemButtonUtilityClass(slot: string): string;
+declare const listItemButtonClasses: ListItemButtonClasses;
+export default listItemButtonClasses;

package/ListItemIcon/listItemIconClasses.d.ts

@@ -1,10 +1,10 @@
-export interface ListItemIconClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
-    alignItemsFlexStart: string;
-}
-export declare type ListItemIconClassKey = keyof ListItemIconClasses;
-export declare function getListItemIconUtilityClass(slot: string): string;
-declare const listItemIconClasses: ListItemIconClasses;
-export default listItemIconClasses;
+export interface ListItemIconClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
+    alignItemsFlexStart: string;
+}
+export declare type ListItemIconClassKey = keyof ListItemIconClasses;
+export declare function getListItemIconUtilityClass(slot: string): string;
+declare const listItemIconClasses: ListItemIconClasses;
+export default listItemIconClasses;

package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts

@@ -1,10 +1,10 @@
-export interface ListItemSecondaryActionClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element when the parent `ListItem` has `disableGutters={true}`. */
-    disableGutters: string;
-}
-export declare type ListItemSecondaryActionClassKey = keyof ListItemSecondaryActionClasses;
-export declare function getListItemSecondaryActionClassesUtilityClass(slot: string): string;
-declare const listItemSecondaryActionClasses: ListItemSecondaryActionClasses;
-export default listItemSecondaryActionClasses;
+export interface ListItemSecondaryActionClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when the parent `ListItem` has `disableGutters={true}`. */
+    disableGutters: string;
+}
+export declare type ListItemSecondaryActionClassKey = keyof ListItemSecondaryActionClasses;
+export declare function getListItemSecondaryActionClassesUtilityClass(slot: string): string;
+declare const listItemSecondaryActionClasses: ListItemSecondaryActionClasses;
+export default listItemSecondaryActionClasses;

package/ListItemText/listItemTextClasses.d.ts

@@ -1,18 +1,18 @@
-export interface ListItemTextClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the Typography component if primary and secondary are set. */
-    multiline: string;
-    /** Styles applied to the Typography component if dense. */
-    dense: string;
-    /** Styles applied to the root element if `inset={true}`. */
-    inset: string;
-    /** Styles applied to the primary `Typography` component. */
-    primary: string;
-    /** Styles applied to the secondary `Typography` component. */
-    secondary: string;
-}
-export declare type ListItemTextClassKey = keyof ListItemTextClasses;
-export declare function getListItemTextUtilityClass(slot: string): string;
-declare const listItemTextClasses: ListItemTextClasses;
-export default listItemTextClasses;
+export interface ListItemTextClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the Typography component if primary and secondary are set. */
+    multiline: string;
+    /** Styles applied to the Typography component if dense. */
+    dense: string;
+    /** Styles applied to the root element if `inset={true}`. */
+    inset: string;
+    /** Styles applied to the primary `Typography` component. */
+    primary: string;
+    /** Styles applied to the secondary `Typography` component. */
+    secondary: string;
+}
+export declare type ListItemTextClassKey = keyof ListItemTextClasses;
+export declare function getListItemTextUtilityClass(slot: string): string;
+declare const listItemTextClasses: ListItemTextClasses;
+export default listItemTextClasses;

package/ListSubheader/listSubheaderClasses.d.ts

@@ -1,18 +1,18 @@
-export interface ListSubheaderClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the root element if `color="inherit"`. */
-    colorInherit: string;
-    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
-    gutters: string;
-    /** Styles applied to the root element if `inset={true}`. */
-    inset: string;
-    /** Styles applied to the root element unless `disableSticky={true}`. */
-    sticky: string;
-}
-export declare type ListSubheaderClassKey = keyof ListSubheaderClasses;
-export declare function getListSubheaderUtilityClass(slot: string): string;
-declare const listSubheaderClasses: ListSubheaderClasses;
-export default listSubheaderClasses;
+export interface ListSubheaderClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit: string;
+    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+    gutters: string;
+    /** Styles applied to the root element if `inset={true}`. */
+    inset: string;
+    /** Styles applied to the root element unless `disableSticky={true}`. */
+    sticky: string;
+}
+export declare type ListSubheaderClassKey = keyof ListSubheaderClasses;
+export declare function getListSubheaderUtilityClass(slot: string): string;
+declare const listSubheaderClasses: ListSubheaderClasses;
+export default listSubheaderClasses;

package/Menu/menuClasses.d.ts

@@ -1,12 +1,12 @@
-export interface MenuClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-    /** Styles applied to the List component via `MenuList`. */
-    list: string;
-}
-export declare type MenuClassKey = keyof MenuClasses;
-export declare function getMenuUtilityClass(slot: string): string;
-declare const menuClasses: MenuClasses;
-export default menuClasses;
+export interface MenuClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+    /** Styles applied to the List component via `MenuList`. */
+    list: string;
+}
+export declare type MenuClassKey = keyof MenuClasses;
+export declare function getMenuUtilityClass(slot: string): string;
+declare const menuClasses: MenuClasses;
+export default menuClasses;

package/MenuItem/menuItemClasses.d.ts

@@ -1,20 +1,20 @@
-export interface MenuItemClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if keyboard focused. */
-    focusVisible: string;
-    /** Styles applied to the root element if dense. */
-    dense: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `divider={true}`. */
-    divider: string;
-    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
-    gutters: string;
-    /** State class applied to the root element if `selected={true}`. */
-    selected: string;
-}
-export declare type MenuItemClassKey = keyof MenuItemClasses;
-export declare function getMenuItemUtilityClass(slot: string): string;
-declare const menuItemClasses: MenuItemClasses;
-export default menuItemClasses;
+export interface MenuItemClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if keyboard focused. */
+    focusVisible: string;
+    /** Styles applied to the root element if dense. */
+    dense: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `divider={true}`. */
+    divider: string;
+    /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+    gutters: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+}
+export declare type MenuItemClassKey = keyof MenuItemClasses;
+export declare function getMenuItemUtilityClass(slot: string): string;
+declare const menuItemClasses: MenuItemClasses;
+export default menuItemClasses;

package/MobileStepper/mobileStepperClasses.d.ts

@@ -1,22 +1,22 @@
-export interface MobileStepperClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `position="bottom"`. */
-    positionBottom: string;
-    /** Styles applied to the root element if `position="top"`. */
-    positionTop: string;
-    /** Styles applied to the root element if `position="static"`. */
-    positionStatic: string;
-    /** Styles applied to the dots container if `variant="dots"`. */
-    dots: string;
-    /** Styles applied to each dot if `variant="dots"`. */
-    dot: string;
-    /** Styles applied to a dot if `variant="dots"` and this is the active step. */
-    dotActive: string;
-    /** Styles applied to the Linear Progress component if `variant="progress"`. */
-    progress: string;
-}
-export declare type MobileStepperClassKey = keyof MobileStepperClasses;
-export declare function getMobileStepperUtilityClass(slot: string): string;
-declare const mobileStepperClasses: MobileStepperClasses;
-export default mobileStepperClasses;
+export interface MobileStepperClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `position="bottom"`. */
+    positionBottom: string;
+    /** Styles applied to the root element if `position="top"`. */
+    positionTop: string;
+    /** Styles applied to the root element if `position="static"`. */
+    positionStatic: string;
+    /** Styles applied to the dots container if `variant="dots"`. */
+    dots: string;
+    /** Styles applied to each dot if `variant="dots"`. */
+    dot: string;
+    /** Styles applied to a dot if `variant="dots"` and this is the active step. */
+    dotActive: string;
+    /** Styles applied to the Linear Progress component if `variant="progress"`. */
+    progress: string;
+}
+export declare type MobileStepperClassKey = keyof MobileStepperClasses;
+export declare function getMobileStepperUtilityClass(slot: string): string;
+declare const mobileStepperClasses: MobileStepperClasses;
+export default mobileStepperClasses;

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/NativeSelect/nativeSelectClasses.d.ts

@@ -1,32 +1,32 @@
-export interface NativeSelectClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the select component `select` class. */
-    select: string;
-    /** Styles applied to the select component if `multiple={true}`. */
-    multiple: string;
-    /** Styles applied to the select component if `variant="filled"`. */
-    filled: string;
-    /** Styles applied to the select component if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the select component if `variant="standard"`. */
-    standard: string;
-    /** State class applied to the select component `disabled` class. */
-    disabled: string;
-    /** Styles applied to the icon component. */
-    icon: string;
-    /** Styles applied to the icon component if the popup is open. */
-    iconOpen: string;
-    /** Styles applied to the icon component if `variant="filled"`. */
-    iconFilled: string;
-    /** Styles applied to the icon component if `variant="outlined"`. */
-    iconOutlined: string;
-    /** Styles applied to the icon component if `variant="standard"`. */
-    iconStandard: string;
-    /** Styles applied to the underlying native input component. */
-    nativeInput: string;
-}
-export declare type NativeSelectClassKey = keyof NativeSelectClasses;
-export declare function getNativeSelectUtilityClasses(slot: string): string;
-declare const nativeSelectClasses: NativeSelectClasses;
-export default nativeSelectClasses;
+export interface NativeSelectClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the select component `select` class. */
+    select: string;
+    /** Styles applied to the select component if `multiple={true}`. */
+    multiple: string;
+    /** Styles applied to the select component if `variant="filled"`. */
+    filled: string;
+    /** Styles applied to the select component if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the select component if `variant="standard"`. */
+    standard: string;
+    /** State class applied to the select component `disabled` class. */
+    disabled: string;
+    /** Styles applied to the icon component. */
+    icon: string;
+    /** Styles applied to the icon component if the popup is open. */
+    iconOpen: string;
+    /** Styles applied to the icon component if `variant="filled"`. */
+    iconFilled: string;
+    /** Styles applied to the icon component if `variant="outlined"`. */
+    iconOutlined: string;
+    /** Styles applied to the icon component if `variant="standard"`. */
+    iconStandard: string;
+    /** Styles applied to the underlying native input component. */
+    nativeInput: string;
+}
+export declare type NativeSelectClassKey = keyof NativeSelectClasses;
+export declare function getNativeSelectUtilityClasses(slot: string): string;
+declare const nativeSelectClasses: NativeSelectClasses;
+export default nativeSelectClasses;

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.
    */