@mui/material 5.10.12 → 5.10.13

package/legacy/FilledInput/FilledInput.js

@@ -172,6 +172,8 @@ var FilledInputInput = styled(InputBaseInput, {
   });
 });
 var FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
+  var _ref5, _slots$root, _ref6, _slots$input;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiFilledInput'
@@ -188,9 +190,12 @@ var FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, re
       inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
       _props$multiline = props.multiline,
       multiline = _props$multiline === void 0 ? false : _props$multiline,
+      slotProps = props.slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
-      other = _objectWithoutProperties(props, ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "type"]);
+      other = _objectWithoutProperties(props, ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"]);
 
   var ownerState = _extends({}, props, {
     fullWidth: fullWidth,
@@ -208,12 +213,14 @@ var FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, re
       ownerState: ownerState
     }
   };
-  var componentsProps = componentsPropsProp ? deepmerge(componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
+  var componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
+  var RootSlot = (_ref5 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref5 : FilledInputRoot;
+  var InputSlot = (_ref6 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref6 : FilledInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: FilledInputRoot,
-      Input: FilledInputInput
-    }, components),
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
     componentsProps: componentsProps,
     fullWidth: fullWidth,
     inputComponent: inputComponent,
@@ -260,8 +267,11 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.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.shape({
@@ -270,7 +280,12 @@ process.env.NODE_ENV !== "production" ? FilledInput.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.shape({
@@ -400,6 +415,31 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.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.shape({
+    input: PropTypes.object,
+    root: 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({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/legacy/FormControlLabel/FormControlLabel.js

@@ -70,6 +70,8 @@ export var FormControlLabelRoot = styled('label', {
  */
 
 var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
+  var _slotProps$typography;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -88,8 +90,10 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
       labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,
       name = props.name,
       onChange = props.onChange,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
       value = props.value,
-      other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "value"]);
+      other = _objectWithoutProperties(props, ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"]);
 
   var muiFormControl = useFormControl();
   var disabled = disabledProp;
@@ -123,13 +127,14 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
   });
 
   var classes = useUtilityClasses(ownerState);
+  var typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
   var label = labelProp;
 
   if (label != null && label.type !== Typography && !disableTypography) {
     label = /*#__PURE__*/_jsx(Typography, _extends({
-      component: "span",
-      className: classes.label
-    }, componentsProps.typography, {
+      component: "span"
+    }, typographySlotProps, {
+      className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
       children: label
     }));
   }
@@ -217,6 +222,14 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
    */
   onChange: PropTypes.func,
 
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    typography: PropTypes.object
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Input/Input.js

@@ -106,6 +106,8 @@ var InputInput = styled(InputBaseInput, {
   overridesResolver: inputBaseInputOverridesResolver
 })({});
 var Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
+  var _ref3, _slots$root, _ref4, _slots$input;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiInput'
@@ -121,9 +123,12 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       inputComponent = _props$inputComponent === void 0 ? 'input' : _props$inputComponent,
       _props$multiline = props.multiline,
       multiline = _props$multiline === void 0 ? false : _props$multiline,
+      slotProps = props.slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
-      other = _objectWithoutProperties(props, ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "type"]);
+      other = _objectWithoutProperties(props, ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"]);
 
   var classes = useUtilityClasses(props);
   var ownerState = {
@@ -134,13 +139,15 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       ownerState: ownerState
     }
   };
-  var componentsProps = componentsPropsProp ? deepmerge(componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  var componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(slotProps != null ? slotProps : componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  var RootSlot = (_ref3 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref3 : InputRoot;
+  var InputSlot = (_ref4 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref4 : InputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: InputRoot,
-      Input: InputInput
-    }, components),
-    componentsProps: componentsProps,
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
+    slotProps: componentsProps,
     fullWidth: fullWidth,
     inputComponent: inputComponent,
     multiline: multiline,
@@ -186,8 +193,11 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.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.shape({
@@ -196,7 +206,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.shape({
@@ -318,6 +333,31 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.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.shape({
+    input: PropTypes.object,
+    root: 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({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/legacy/InputBase/InputBase.js

@@ -206,6 +206,8 @@ var inputGlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
 
 
 var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
+  var _slotProps$input;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiInputBase'
@@ -250,11 +252,15 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
       renderSuffix = props.renderSuffix,
       rows = props.rows,
       size = props.size,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       startAdornment = props.startAdornment,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
       valueProp = props.value,
-      other = _objectWithoutProperties(props, ["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"]);
+      other = _objectWithoutProperties(props, ["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"]);
 
   var value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
 
@@ -462,10 +468,10 @@ var InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
-  var Root = components.Root || InputBaseRoot;
-  var rootProps = componentsProps.root || {};
-  var Input = components.Input || InputBaseComponent;
-  inputProps = _extends({}, inputProps, componentsProps.input);
+  var Root = slots.root || components.Root || InputBaseRoot;
+  var rootProps = slotProps.root || componentsProps.root || {};
+  var Input = slots.input || components.Input || InputBaseComponent;
+  inputProps = _extends({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
@@ -557,8 +563,11 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.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.shape({
@@ -567,7 +576,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.shape({
@@ -735,6 +749,31 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.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.shape({
+    input: PropTypes.object,
+    root: 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({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */

package/legacy/ListItem/ListItem.js

@@ -164,7 +164,11 @@ var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
       secondaryAction = props.secondaryAction,
       _props$selected = props.selected,
       selected = _props$selected === void 0 ? false : _props$selected,
-      other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected"]);
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
+      other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"]);
 
   var context = React.useContext(ListContext);
   var childContext = React.useMemo(function () {
@@ -203,8 +207,8 @@ var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
 
   var classes = useUtilityClasses(ownerState);
   var handleRef = useForkRef(listItemRef, ref);
-  var Root = components.Root || ListItemRoot;
-  var rootProps = componentsProps.root || {};
+  var Root = slots.root || components.Root || ListItemRoot;
+  var rootProps = slotProps.root || componentsProps.root || {};
 
   var componentProps = _extends({
     className: clsx(classes.root, rootProps.className, className),
@@ -254,8 +258,7 @@ var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
     value: childContext,
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
       as: Component,
-      ref: handleRef,
-      ownerState: ownerState
+      ref: handleRef
     }, !isHostComponent(Root) && {
       ownerState: _extends({}, ownerState, rootProps.ownerState)
     }, componentProps, {
@@ -338,8 +341,11 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
   component: PropTypes.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.shape({
@@ -347,7 +353,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.shape({
@@ -417,6 +428,29 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    */
   selected: PropTypes.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.shape({
+    root: 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({
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Modal/Modal.js

@@ -206,8 +206,11 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   component: PropTypes.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.shape({
@@ -216,7 +219,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.shape({

package/legacy/NativeSelect/NativeSelectInput.js

@@ -41,12 +41,14 @@ export var nativeSelectSelectStyles = function nativeSelectSelectStyles(_ref) {
     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': _extends({}, theme.vars ? {
+      backgroundColor: "rgba(".concat(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'
@@ -56,7 +58,7 @@ export var nativeSelectSelectStyles = function nativeSelectSelectStyles(_ref) {
   }), _defineProperty(_extends2, '&[multiple]', {
     height: 'auto'
   }), _defineProperty(_extends2, '&:not([multiple]) option, &:not([multiple]) optgroup', {
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   }), _defineProperty(_extends2, '&&&', {
     paddingRight: 24,
     minWidth: 16 // So it doesn't collapse.
@@ -66,9 +68,9 @@ export var nativeSelectSelectStyles = function nativeSelectSelectStyles(_ref) {
       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
 
     },
     '&&&': {
@@ -97,9 +99,9 @@ export var nativeSelectIconStyles = function nativeSelectIconStyles(_ref3) {
     // 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
   }, "&.".concat(nativeSelectClasses.disabled), {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }), ownerState.open && {
     transform: 'rotate(180deg)'
   }, ownerState.variant === 'filled' && {

package/legacy/OutlinedInput/OutlinedInput.js

@@ -113,7 +113,7 @@ var OutlinedInputInput = styled(InputBaseInput, {
   });
 });
 var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _React$Fragment;
+  var _ref5, _slots$root, _ref6, _slots$input, _React$Fragment;
 
   var props = useThemeProps({
     props: inProps,
@@ -130,9 +130,11 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
       _props$multiline = props.multiline,
       multiline = _props$multiline === void 0 ? false : _props$multiline,
       notched = props.notched,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
-      other = _objectWithoutProperties(props, ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "type"]);
+      other = _objectWithoutProperties(props, ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"]);
 
   var classes = useUtilityClasses(props);
   var muiFormControl = useFormControl();
@@ -155,11 +157,13 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     type: type
   });
 
+  var RootSlot = (_ref5 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref5 : OutlinedInputRoot;
+  var InputSlot = (_ref6 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref6 : OutlinedInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
-    components: _extends({
-      Root: OutlinedInputRoot,
-      Input: OutlinedInputInput
-    }, components),
+    slots: {
+      root: RootSlot,
+      input: InputSlot
+    },
     renderSuffix: function renderSuffix(state) {
       return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
         ownerState: ownerState,
@@ -217,8 +221,11 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   .oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.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.shape({
@@ -346,6 +353,18 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.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.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * Start `InputAdornment` for this component.
    */