@mui/material 5.10.12 → 5.10.13

package/Grid/gridClasses.d.ts

@@ -1,48 +1,48 @@
-export interface GridClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `container={true}`. */
-    container: string;
-    /** Styles applied to the root element if `item={true}`. */
-    item: string;
-    /** Styles applied to the root element if `zeroMinWidth={true}`. */
-    zeroMinWidth: string;
-    /** Styles applied to the root element if `direction="column"`. */
-    'direction-xs-column': string;
-    /** Styles applied to the root element if `direction="column-reverse"`. */
-    'direction-xs-column-reverse': string;
-    /** Styles applied to the root element if `direction="row-reverse"`. */
-    'direction-xs-row-reverse': string;
-    /** Styles applied to the root element if `wrap="nowrap"`. */
-    'wrap-xs-nowrap': string;
-    /** Styles applied to the root element if `wrap="reverse"`. */
-    'wrap-xs-wrap-reverse': string;
-    'spacing-xs-1': string;
-    'spacing-xs-2': string;
-    'spacing-xs-3': string;
-    'spacing-xs-4': string;
-    'spacing-xs-5': string;
-    'spacing-xs-6': string;
-    'spacing-xs-7': string;
-    'spacing-xs-8': string;
-    'spacing-xs-9': string;
-    'spacing-xs-10': string;
-    'grid-xs-auto': string;
-    'grid-xs-true': string;
-    'grid-xs-1': string;
-    'grid-xs-2': string;
-    'grid-xs-3': string;
-    'grid-xs-4': string;
-    'grid-xs-5': string;
-    'grid-xs-6': string;
-    'grid-xs-7': string;
-    'grid-xs-8': string;
-    'grid-xs-9': string;
-    'grid-xs-10': string;
-    'grid-xs-11': string;
-    'grid-xs-12': string;
-}
-export declare type GridClassKey = keyof GridClasses;
-export declare function getGridUtilityClass(slot: string): string;
-declare const gridClasses: GridClasses;
-export default gridClasses;
+export interface GridClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `container={true}`. */
+    container: string;
+    /** Styles applied to the root element if `item={true}`. */
+    item: string;
+    /** Styles applied to the root element if `zeroMinWidth={true}`. */
+    zeroMinWidth: string;
+    /** Styles applied to the root element if `direction="column"`. */
+    'direction-xs-column': string;
+    /** Styles applied to the root element if `direction="column-reverse"`. */
+    'direction-xs-column-reverse': string;
+    /** Styles applied to the root element if `direction="row-reverse"`. */
+    'direction-xs-row-reverse': string;
+    /** Styles applied to the root element if `wrap="nowrap"`. */
+    'wrap-xs-nowrap': string;
+    /** Styles applied to the root element if `wrap="reverse"`. */
+    'wrap-xs-wrap-reverse': string;
+    'spacing-xs-1': string;
+    'spacing-xs-2': string;
+    'spacing-xs-3': string;
+    'spacing-xs-4': string;
+    'spacing-xs-5': string;
+    'spacing-xs-6': string;
+    'spacing-xs-7': string;
+    'spacing-xs-8': string;
+    'spacing-xs-9': string;
+    'spacing-xs-10': string;
+    'grid-xs-auto': string;
+    'grid-xs-true': string;
+    'grid-xs-1': string;
+    'grid-xs-2': string;
+    'grid-xs-3': string;
+    'grid-xs-4': string;
+    'grid-xs-5': string;
+    'grid-xs-6': string;
+    'grid-xs-7': string;
+    'grid-xs-8': string;
+    'grid-xs-9': string;
+    'grid-xs-10': string;
+    'grid-xs-11': string;
+    'grid-xs-12': string;
+}
+export declare type GridClassKey = keyof GridClasses;
+export declare function getGridUtilityClass(slot: string): string;
+declare const gridClasses: GridClasses;
+export default gridClasses;

package/Icon/iconClasses.d.ts

@@ -1,24 +1,24 @@
-export interface IconClasses {
-    /** 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="secondary"`. */
-    colorSecondary: string;
-    /** Styles applied to the root element if `color="action"`. */
-    colorAction: string;
-    /** Styles applied to the root element if `color="error"`. */
-    colorError: string;
-    /** Styles applied to the root element if `color="disabled"`. */
-    colorDisabled: string;
-    /** Styles applied to the root element if `fontSize="inherit"`. */
-    fontSizeInherit: string;
-    /** Styles applied to the root element if `fontSize="small"`. */
-    fontSizeSmall: string;
-    /** Styles applied to the root element if `fontSize="large"`. */
-    fontSizeLarge: string;
-}
-export declare type IconClassKey = keyof IconClasses;
-export declare function getIconUtilityClass(slot: string): string;
-declare const iconClasses: IconClasses;
-export default iconClasses;
+export interface IconClasses {
+    /** 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="secondary"`. */
+    colorSecondary: string;
+    /** Styles applied to the root element if `color="action"`. */
+    colorAction: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the root element if `color="disabled"`. */
+    colorDisabled: string;
+    /** Styles applied to the root element if `fontSize="inherit"`. */
+    fontSizeInherit: string;
+    /** Styles applied to the root element if `fontSize="small"`. */
+    fontSizeSmall: string;
+    /** Styles applied to the root element if `fontSize="large"`. */
+    fontSizeLarge: string;
+}
+export declare type IconClassKey = keyof IconClasses;
+export declare function getIconUtilityClass(slot: string): string;
+declare const iconClasses: IconClasses;
+export default iconClasses;

package/IconButton/iconButtonClasses.d.ts

@@ -1,26 +1,26 @@
-export interface IconButtonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `edge="start"`. */
-    edgeStart: string;
-    /** Styles applied to the root element if `edge="end"`. */
-    edgeEnd: string;
-    /** Styles applied to the root element if `color="inherit"`. */
-    colorInherit: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"`. */
-    sizeMedium: string;
-    /** Styles applied to the root element if `size="large"`. */
-    sizeLarge: string;
-}
-export declare type IconButtonClassKey = keyof IconButtonClasses;
-export declare function getIconButtonUtilityClass(slot: string): string;
-declare const iconButtonClasses: IconButtonClasses;
-export default iconButtonClasses;
+export interface IconButtonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `edge="start"`. */
+    edgeStart: string;
+    /** Styles applied to the root element if `edge="end"`. */
+    edgeEnd: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium: string;
+    /** Styles applied to the root element if `size="large"`. */
+    sizeLarge: string;
+}
+export declare type IconButtonClassKey = keyof IconButtonClasses;
+export declare function getIconButtonUtilityClass(slot: string): string;
+declare const iconButtonClasses: IconButtonClasses;
+export default iconButtonClasses;

package/ImageList/imageListClasses.d.ts

@@ -1,16 +1,16 @@
-export interface ImageListClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="masonry"`. */
-    masonry: string;
-    /** Styles applied to the root element if `variant="quilted"`. */
-    quilted: string;
-    /** Styles applied to the root element if `variant="standard"`. */
-    standard: string;
-    /** Styles applied to the root element if `variant="woven"`. */
-    woven: string;
-}
-export declare type ImageListClassKey = keyof ImageListClasses;
-export declare function getImageListUtilityClass(slot: string): string;
-declare const imageListClasses: ImageListClasses;
-export default imageListClasses;
+export interface ImageListClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="masonry"`. */
+    masonry: string;
+    /** Styles applied to the root element if `variant="quilted"`. */
+    quilted: string;
+    /** Styles applied to the root element if `variant="standard"`. */
+    standard: string;
+    /** Styles applied to the root element if `variant="woven"`. */
+    woven: string;
+}
+export declare type ImageListClassKey = keyof ImageListClasses;
+export declare function getImageListUtilityClass(slot: string): string;
+declare const imageListClasses: ImageListClasses;
+export default imageListClasses;

package/ImageListItem/imageListItemClasses.d.ts

@@ -1,18 +1,18 @@
-export interface ImageListItemClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to an `img` element to ensure it covers the item. */
-    img: string;
-    /** Styles applied to the root element if `variant="standard"`. */
-    standard: string;
-    /** Styles applied to the root element if `variant="woven"`. */
-    woven: string;
-    /** Styles applied to the root element if `variant="masonry"`. */
-    masonry: string;
-    /** Styles applied to the root element if `variant="quilted"`. */
-    quilted: string;
-}
-export declare type ImageListItemClassKey = keyof ImageListItemClasses;
-export declare function getImageListItemUtilityClass(slot: string): string;
-declare const imageListItemClasses: ImageListItemClasses;
-export default imageListItemClasses;
+export interface ImageListItemClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to an `img` element to ensure it covers the item. */
+    img: string;
+    /** Styles applied to the root element if `variant="standard"`. */
+    standard: string;
+    /** Styles applied to the root element if `variant="woven"`. */
+    woven: string;
+    /** Styles applied to the root element if `variant="masonry"`. */
+    masonry: string;
+    /** Styles applied to the root element if `variant="quilted"`. */
+    quilted: string;
+}
+export declare type ImageListItemClassKey = keyof ImageListItemClasses;
+export declare function getImageListItemUtilityClass(slot: string): string;
+declare const imageListItemClasses: ImageListItemClasses;
+export default imageListItemClasses;

package/ImageListItemBar/imageListItemBarClasses.d.ts

@@ -1,30 +1,30 @@
-export interface ImageListItemBarClasses {
-    /** 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="below"`. */
-    positionBelow: string;
-    /** Styles applied to the title and subtitle container element. */
-    titleWrap: string;
-    /** Styles applied to the title and subtitle container element if `position="below"`. */
-    titleWrapBelow: string;
-    /** Styles applied to the container element if `actionPosition="left"`. */
-    titleWrapActionPosLeft: string;
-    /** Styles applied to the container element if `actionPosition="right"`. */
-    titleWrapActionPosRight: string;
-    /** Styles applied to the title container element. */
-    title: string;
-    /** Styles applied to the subtitle container element. */
-    subtitle: string;
-    /** Styles applied to the actionIcon if supplied. */
-    actionIcon: string;
-    /** Styles applied to the actionIcon if `actionPosition="left"`. */
-    actionIconActionPosLeft: string;
-}
-export declare type ImageListItemBarClassKey = keyof ImageListItemBarClasses;
-export declare function getImageListItemBarUtilityClass(slot: string): string;
-declare const imageListItemBarClasses: ImageListItemBarClasses;
-export default imageListItemBarClasses;
+export interface ImageListItemBarClasses {
+    /** 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="below"`. */
+    positionBelow: string;
+    /** Styles applied to the title and subtitle container element. */
+    titleWrap: string;
+    /** Styles applied to the title and subtitle container element if `position="below"`. */
+    titleWrapBelow: string;
+    /** Styles applied to the container element if `actionPosition="left"`. */
+    titleWrapActionPosLeft: string;
+    /** Styles applied to the container element if `actionPosition="right"`. */
+    titleWrapActionPosRight: string;
+    /** Styles applied to the title container element. */
+    title: string;
+    /** Styles applied to the subtitle container element. */
+    subtitle: string;
+    /** Styles applied to the actionIcon if supplied. */
+    actionIcon: string;
+    /** Styles applied to the actionIcon if `actionPosition="left"`. */
+    actionIconActionPosLeft: string;
+}
+export declare type ImageListItemBarClassKey = keyof ImageListItemBarClasses;
+export declare function getImageListItemBarUtilityClass(slot: string): string;
+declare const imageListItemBarClasses: ImageListItemBarClasses;
+export default imageListItemBarClasses;

package/Input/Input.js

@@ -31,7 +31,7 @@ var _InputBase2 = require("../InputBase/InputBase");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "type"];
+const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "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); }
 
@@ -136,6 +136,8 @@ const InputInput = (0, _styled.default)(_InputBase2.InputBaseComponent, {
   overridesResolver: _InputBase2.inputOverridesResolver
 })({});
 const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
+  var _ref, _slots$root, _ref2, _slots$input;
+
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiInput'
@@ -147,6 +149,8 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     fullWidth = false,
     inputComponent = 'input',
     multiline = false,
+    slotProps,
+    slots = {},
     type = 'text'
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -159,13 +163,15 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       ownerState
     }
   };
-  const componentsProps = componentsPropsProp ? (0, _utils.deepmerge)(componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? (0, _utils.deepmerge)(slotProps != null ? slotProps : componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : InputRoot;
+  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : InputInput;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, (0, _extends2.default)({
-    components: (0, _extends2.default)({
-      Root: InputRoot,
-      Input: InputInput
-    }, components),
-    componentsProps: componentsProps,
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
+    slotProps: componentsProps,
     fullWidth: fullWidth,
     inputComponent: inputComponent,
     multiline: multiline,
@@ -211,8 +217,11 @@ process.env.NODE_ENV !== "production" ? Input.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({
@@ -221,7 +230,12 @@ process.env.NODE_ENV !== "production" ? Input.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({
@@ -343,6 +357,31 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    */
   rows: _propTypes.default.oneOfType([_propTypes.default.number, _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/Input/inputClasses.d.ts

@@ -1,34 +1,34 @@
-export interface InputClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if the component is a descendant of `FormControl`. */
-    formControl: string;
-    /** Styles applied to the root element if the component is focused. */
-    focused: string;
-    /** Styles applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if color secondary. */
-    colorSecondary: string;
-    /** Styles applied to the root element unless `disableUnderline={true}`. */
-    underline: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** Styles applied to the input element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `multiline={true}`. */
-    multiline: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if `size="small"`. */
-    inputSizeSmall: string;
-    /** Styles applied to the input element if `multiline={true}`. */
-    inputMultiline: string;
-    /** Styles applied to the input element if `type="search"`. */
-    inputTypeSearch: string;
-}
-export declare type InputClassKey = keyof InputClasses;
-export declare function getInputUtilityClass(slot: string): string;
-declare const inputClasses: InputClasses;
-export default inputClasses;
+export interface InputClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the component is a descendant of `FormControl`. */
+    formControl: string;
+    /** Styles applied to the root element if the component is focused. */
+    focused: string;
+    /** Styles applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if color secondary. */
+    colorSecondary: string;
+    /** Styles applied to the root element unless `disableUnderline={true}`. */
+    underline: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** Styles applied to the input element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `multiline={true}`. */
+    multiline: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if `size="small"`. */
+    inputSizeSmall: string;
+    /** Styles applied to the input element if `multiline={true}`. */
+    inputMultiline: string;
+    /** Styles applied to the input element if `type="search"`. */
+    inputTypeSearch: string;
+}
+export declare type InputClassKey = keyof InputClasses;
+export declare function getInputUtilityClass(slot: string): string;
+declare const inputClasses: InputClasses;
+export default inputClasses;

package/InputAdornment/inputAdornmentClasses.d.ts

@@ -1,24 +1,24 @@
-export interface InputAdornmentClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="filled"`. */
-    filled: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="standard"`. */
-    standard: string;
-    /** Styles applied to the root element if `position="start"`. */
-    positionStart: string;
-    /** Styles applied to the root element if `position="end"`. */
-    positionEnd: string;
-    /** Styles applied to the root element if `disablePointerEvents={true}`. */
-    disablePointerEvents: string;
-    /** Styles applied if the adornment is used inside <FormControl hiddenLabel />. */
-    hiddenLabel: string;
-    /** Styles applied if the adornment is used inside <FormControl size="small" />. */
-    sizeSmall: string;
-}
-export declare type InputAdornmentClassKey = keyof InputAdornmentClasses;
-export declare function getInputAdornmentUtilityClass(slot: string): string;
-declare const inputAdornmentClasses: InputAdornmentClasses;
-export default inputAdornmentClasses;
+export interface InputAdornmentClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="filled"`. */
+    filled: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="standard"`. */
+    standard: string;
+    /** Styles applied to the root element if `position="start"`. */
+    positionStart: string;
+    /** Styles applied to the root element if `position="end"`. */
+    positionEnd: string;
+    /** Styles applied to the root element if `disablePointerEvents={true}`. */
+    disablePointerEvents: string;
+    /** Styles applied if the adornment is used inside <FormControl hiddenLabel />. */
+    hiddenLabel: string;
+    /** Styles applied if the adornment is used inside <FormControl size="small" />. */
+    sizeSmall: string;
+}
+export declare type InputAdornmentClassKey = keyof InputAdornmentClasses;
+export declare function getInputAdornmentUtilityClass(slot: string): string;
+declare const inputAdornmentClasses: InputAdornmentClasses;
+export default inputAdornmentClasses;

package/InputBase/InputBase.d.ts

@@ -54,8 +54,11 @@ export interface InputBaseProps
     InputBasePropsColorOverrides
   >;
   /**
-   * 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?: {
@@ -63,7 +66,12 @@ export interface InputBaseProps
     Input?: 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?: {
@@ -192,6 +200,29 @@ export interface InputBaseProps
    * The size of the component.
    */
   size?: OverridableStringUnion<'small' | 'medium', InputBasePropsSizeOverrides>;
+  /**
+   * 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> & InputBaseComponentsPropsOverrides;
+    input?: React.InputHTMLAttributes<HTMLInputElement> & InputBaseComponentsPropsOverrides;
+  };
+  /**
+   * 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;
+    input?: React.ElementType;
+  };
   /**
    * Start `InputAdornment` for this component.
    */