@mui/material 7.0.2 → 7.1.1

package/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme } from "../index.js";
+import { Theme } from "../styles/index.js";
 import { TransitionProps } from "../transitions/transition.js";
 import { AccordionClasses } from "./accordionClasses.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";

package/Accordion/Accordion.js

@@ -128,8 +128,7 @@ const AccordionRoot = (0, _zeroStyled.styled)(_Paper.default, {
 })));
 const AccordionHeading = (0, _zeroStyled.styled)('h3', {
   name: 'MuiAccordion',
-  slot: 'Heading',
-  overridesResolver: (props, styles) => styles.heading
+  slot: 'Heading'
 })({
   all: 'unset'
 });

package/AccordionActions/AccordionActions.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { Theme } from "../styles/index.js";
+import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { AccordionActionsClasses } from "./accordionActionsClasses.js";
 export interface AccordionActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**

package/AccordionDetails/AccordionDetails.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { Theme } from "../styles/index.js";
+import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { AccordionDetailsClasses } from "./accordionDetailsClasses.js";
 export interface AccordionDetailsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**

package/AccordionDetails/AccordionDetails.js

@@ -27,8 +27,7 @@ const useUtilityClasses = ownerState => {
 };
 const AccordionDetailsRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiAccordionDetails',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })((0, _memoTheme.default)(({
   theme
 }) => ({

package/AccordionSummary/AccordionSummary.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { ButtonBaseProps, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
 import { OverrideProps } from "../OverridableComponent/index.js";
-import { CreateSlotsAndSlotProps, SlotProps, Theme } from "../index.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { Theme } from "../styles/index.js";
 import { AccordionSummaryClasses } from "./accordionSummaryClasses.js";
 export interface AccordionSummarySlots {
   /**

package/AccordionSummary/AccordionSummary.js

@@ -36,8 +36,7 @@ const useUtilityClasses = ownerState => {
 };
 const AccordionSummaryRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiAccordionSummary',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })((0, _memoTheme.default)(({
   theme
 }) => {
@@ -71,8 +70,7 @@ const AccordionSummaryRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
 }));
 const AccordionSummaryContent = (0, _zeroStyled.styled)('span', {
   name: 'MuiAccordionSummary',
-  slot: 'Content',
-  overridesResolver: (props, styles) => styles.content
+  slot: 'Content'
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -94,8 +92,7 @@ const AccordionSummaryContent = (0, _zeroStyled.styled)('span', {
 })));
 const AccordionSummaryExpandIconWrapper = (0, _zeroStyled.styled)('span', {
   name: 'MuiAccordionSummary',
-  slot: 'ExpandIconWrapper',
-  overridesResolver: (props, styles) => styles.expandIconWrapper
+  slot: 'ExpandIconWrapper'
 })((0, _memoTheme.default)(({
   theme
 }) => ({

package/Alert/Alert.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
-import { IconButtonProps, InternalStandardProps as StandardProps, SvgIconProps, Theme } from "../index.js";
+import { SvgIconProps } from "../SvgIcon/index.js";
+import { Theme } from "../styles/index.js";
+import { InternalStandardProps as StandardProps } from "../internal/index.js";
+import { IconButtonProps } from "../IconButton/index.js";
 import { PaperProps } from "../Paper/index.js";
 import { AlertClasses } from "./alertClasses.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";

package/Alert/Alert.js

@@ -109,8 +109,7 @@ const AlertRoot = (0, _zeroStyled.styled)(_Paper.default, {
 }));
 const AlertIcon = (0, _zeroStyled.styled)('div', {
   name: 'MuiAlert',
-  slot: 'Icon',
-  overridesResolver: (props, styles) => styles.icon
+  slot: 'Icon'
 })({
   marginRight: 12,
   padding: '7px 0',
@@ -120,8 +119,7 @@ const AlertIcon = (0, _zeroStyled.styled)('div', {
 });
 const AlertMessage = (0, _zeroStyled.styled)('div', {
   name: 'MuiAlert',
-  slot: 'Message',
-  overridesResolver: (props, styles) => styles.message
+  slot: 'Message'
 })({
   padding: '8px 0',
   minWidth: 0,
@@ -129,8 +127,7 @@ const AlertMessage = (0, _zeroStyled.styled)('div', {
 });
 const AlertAction = (0, _zeroStyled.styled)('div', {
   name: 'MuiAlert',
-  slot: 'Action',
-  overridesResolver: (props, styles) => styles.action
+  slot: 'Action'
 })({
   display: 'flex',
   alignItems: 'flex-start',

package/AlertTitle/AlertTitle.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme, TypographyProps } from "../index.js";
+import { Theme } from "../styles/index.js";
+import { TypographyProps } from "../Typography/index.js";
 import { AlertTitleClasses } from "./alertTitleClasses.js";
 export interface AlertTitleProps extends TypographyProps<'div'> {
   /**

package/AlertTitle/AlertTitle.js

@@ -28,8 +28,7 @@ const useUtilityClasses = ownerState => {
 };
 const AlertTitleRoot = (0, _zeroStyled.styled)(_Typography.default, {
   name: 'MuiAlertTitle',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })((0, _memoTheme.default)(({
   theme
 }) => {

package/AppBar/AppBar.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
-import { PropTypes, Theme } from "../index.js";
+import { PropTypes, Theme } from "../styles/index.js";
 import { AppBarClasses } from "./appBarClasses.js";
 import { ExtendPaperTypeMap } from "../Paper/Paper.js";
 export interface AppBarPropsColorOverrides {}

package/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
+import { Theme } from "../styles/index.js";
+import { InternalStandardProps as StandardProps } from "../internal/index.js";
+import { IconButtonProps } from "../IconButton/index.js";
 import { ChipProps, ChipTypeMap } from "../Chip/index.js";
 import { PaperProps } from "../Paper/index.js";
 import { PopperProps } from "../Popper/index.js";
@@ -260,6 +262,13 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
   /**
    * Render the input.
    *
+   * **Note:** The `renderInput` prop must return a `TextField` component or a compatible custom component
+   * that correctly forwards `InputProps.ref` and spreads `inputProps`. This ensures proper integration
+   * with the Autocomplete's internal logic (e.g., focus management and keyboard navigation).
+   *
+   * Avoid using components like `DatePicker` or `Select` directly, as they may not forward the required props,
+   * leading to runtime errors or unexpected behavior.
+   *
    * @param {object} params
    * @returns {ReactNode}
    */

package/Autocomplete/Autocomplete.js

@@ -243,8 +243,7 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
 });
 const AutocompleteEndAdornment = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
-  slot: 'EndAdornment',
-  overridesResolver: (props, styles) => styles.endAdornment
+  slot: 'EndAdornment'
 })({
   // We use a position absolute to support wrapping tags.
   position: 'absolute',
@@ -254,8 +253,7 @@ const AutocompleteEndAdornment = (0, _zeroStyled.styled)('div', {
 });
 const AutocompleteClearIndicator = (0, _zeroStyled.styled)(_IconButton.default, {
   name: 'MuiAutocomplete',
-  slot: 'ClearIndicator',
-  overridesResolver: (props, styles) => styles.clearIndicator
+  slot: 'ClearIndicator'
 })({
   marginRight: -2,
   padding: 4,
@@ -308,8 +306,7 @@ const AutocompletePopper = (0, _zeroStyled.styled)(_Popper.default, {
 })));
 const AutocompletePaper = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiAutocomplete',
-  slot: 'Paper',
-  overridesResolver: (props, styles) => styles.paper
+  slot: 'Paper'
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -318,8 +315,7 @@ const AutocompletePaper = (0, _zeroStyled.styled)(_Paper.default, {
 })));
 const AutocompleteLoading = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
-  slot: 'Loading',
-  overridesResolver: (props, styles) => styles.loading
+  slot: 'Loading'
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -328,8 +324,7 @@ const AutocompleteLoading = (0, _zeroStyled.styled)('div', {
 })));
 const AutocompleteNoOptions = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
-  slot: 'NoOptions',
-  overridesResolver: (props, styles) => styles.noOptions
+  slot: 'NoOptions'
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -338,8 +333,7 @@ const AutocompleteNoOptions = (0, _zeroStyled.styled)('div', {
 })));
 const AutocompleteListbox = (0, _zeroStyled.styled)('ul', {
   name: 'MuiAutocomplete',
-  slot: 'Listbox',
-  overridesResolver: (props, styles) => styles.listbox
+  slot: 'Listbox'
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -397,8 +391,7 @@ const AutocompleteListbox = (0, _zeroStyled.styled)('ul', {
 })));
 const AutocompleteGroupLabel = (0, _zeroStyled.styled)(_ListSubheader.default, {
   name: 'MuiAutocomplete',
-  slot: 'GroupLabel',
-  overridesResolver: (props, styles) => styles.groupLabel
+  slot: 'GroupLabel'
 })((0, _memoTheme.default)(({
   theme
 }) => ({
@@ -407,8 +400,7 @@ const AutocompleteGroupLabel = (0, _zeroStyled.styled)(_ListSubheader.default, {
 })));
 const AutocompleteGroupUl = (0, _zeroStyled.styled)('ul', {
   name: 'MuiAutocomplete',
-  slot: 'GroupUl',
-  overridesResolver: (props, styles) => styles.groupUl
+  slot: 'GroupUl'
 })({
   padding: 0,
   [`& .${_autocompleteClasses.default.option}`]: {
@@ -592,25 +584,31 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     disabled,
     ...getItemProps(params)
   });
-  if (renderTags && multiple && value.length > 0) {
-    startAdornment = renderTags(value, getCustomizedItemProps, ownerState);
-  } else if (renderValue && value) {
+  if (multiple) {
+    if (value.length > 0) {
+      if (renderTags) {
+        startAdornment = renderTags(value, getCustomizedItemProps, ownerState);
+      } else if (renderValue) {
+        startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
+      } else {
+        startAdornment = value.map((option, index) => {
+          const {
+            key,
+            ...customItemProps
+          } = getCustomizedItemProps({
+            index
+          });
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+            label: getOptionLabel(option),
+            size: size,
+            ...customItemProps,
+            ...externalForwardedProps.slotProps.chip
+          }, key);
+        });
+      }
+    }
+  } else if (renderValue && value != null) {
     startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
-  } else if (multiple && value.length > 0) {
-    startAdornment = value.map((option, index) => {
-      const {
-        key,
-        ...customItemProps
-      } = getCustomizedItemProps({
-        index
-      });
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
-        label: getOptionLabel(option),
-        size: size,
-        ...customItemProps,
-        ...externalForwardedProps.slotProps.chip
-      }, key);
-    });
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
     const more = startAdornment.length - limitTags;
@@ -1124,6 +1122,13 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * Render the input.
    *
+   * **Note:** The `renderInput` prop must return a `TextField` component or a compatible custom component
+   * that correctly forwards `InputProps.ref` and spreads `inputProps`. This ensures proper integration
+   * with the Autocomplete's internal logic (e.g., focus management and keyboard navigation).
+   *
+   * Avoid using components like `DatePicker` or `Select` directly, as they may not forward the required props,
+   * leading to runtime errors or unexpected behavior.
+   *
    * @param {object} params
    * @returns {ReactNode}
    */

package/Avatar/Avatar.d.ts

@@ -5,17 +5,44 @@ import { Theme } from "../styles/index.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
 import { AvatarClasses } from "./avatarClasses.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { SvgIconProps } from "../SvgIcon/index.js";
 export interface AvatarSlots {
   /**
-   * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
+   * The component that renders the root slot.
+   * @default 'div'
    */
-  img: React.JSXElementConstructor<React.ImgHTMLAttributes<HTMLImageElement>>;
+  root: React.ElementType;
+  /**
+   * The component that renders the img slot.
+   * @default 'img'
+   */
+  img: React.ElementType;
+  /**
+   * The component that renders the fallback slot.
+   * @default Person icon
+   */
+  fallback: React.ElementType;
 }
 export interface AvatarPropsVariantOverrides {}
+export interface AvatarRootSlotPropsOverrides {}
+export interface AvatarImgSlotPropsOverrides {}
+export interface AvatarFallbackSlotPropsOverrides {}
 export type AvatarSlotsAndSlotProps = CreateSlotsAndSlotProps<AvatarSlots, {
-  img: SlotProps<React.ElementType<React.ImgHTMLAttributes<HTMLImageElement>>, {}, AvatarOwnProps>;
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the div element.
+   */
+  root: SlotProps<'div', AvatarRootSlotPropsOverrides, AvatarOwnProps>;
+  /**
+   * Props forwarded to the img slot.
+   * By default, the avaible props are based on the img element.
+   */
+  img: SlotProps<'img', AvatarImgSlotPropsOverrides, AvatarOwnProps>;
+  /**
+   * Props forwarded to the fallback slot.
+   * By default, the avaible props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
+   */
+  fallback: SlotProps<React.ElementType<SvgIconProps>, AvatarFallbackSlotPropsOverrides, AvatarOwnProps>;
 }>;
 export interface AvatarOwnProps {
   /**
@@ -33,7 +60,7 @@ export interface AvatarOwnProps {
    */
   classes?: Partial<AvatarClasses>;
   /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
    * @deprecated Use `slotProps.img` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */

package/Avatar/Avatar.js

@@ -89,8 +89,7 @@ const AvatarRoot = (0, _zeroStyled.styled)('div', {
 })));
 const AvatarImg = (0, _zeroStyled.styled)('img', {
   name: 'MuiAvatar',
-  slot: 'Img',
-  overridesResolver: (props, styles) => styles.img
+  slot: 'Img'
 })({
   width: '100%',
   height: '100%',
@@ -104,8 +103,7 @@ const AvatarImg = (0, _zeroStyled.styled)('img', {
 });
 const AvatarFallback = (0, _zeroStyled.styled)(_Person.default, {
   name: 'MuiAvatar',
-  slot: 'Fallback',
-  overridesResolver: (props, styles) => styles.fallback
+  slot: 'Fallback'
 })({
   width: '75%',
   height: '75%'
@@ -187,6 +185,18 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
   delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    className: (0, _clsx.default)(classes.root, className),
+    elementType: AvatarRoot,
+    externalForwardedProps: {
+      slots,
+      slotProps,
+      component,
+      ...other
+    },
+    ownerState
+  });
   const [ImgSlot, imgSlotProps] = (0, _useSlot.default)('img', {
     className: classes.img,
     elementType: AvatarImg,
@@ -207,6 +217,16 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     },
     ownerState
   });
+  const [FallbackSlot, fallbackSlotProps] = (0, _useSlot.default)('fallback', {
+    className: classes.fallback,
+    elementType: AvatarFallback,
+    externalForwardedProps: {
+      slots,
+      slotProps
+    },
+    shouldForwardComponentProp: true,
+    ownerState
+  });
   if (hasImgNotFailing) {
     children = /*#__PURE__*/(0, _jsxRuntime.jsx)(ImgSlot, {
       ...imgSlotProps
@@ -218,17 +238,12 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   } else if (hasImg && alt) {
     children = alt[0];
   } else {
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarFallback, {
-      ownerState: ownerState,
-      className: classes.fallback
+    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(FallbackSlot, {
+      ...fallbackSlotProps
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarRoot, {
-    as: component,
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ...other,
-    ownerState: ownerState,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
+    ...rootSlotProps,
     children: children
   });
 });
@@ -261,7 +276,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
    */
   component: _propTypes.default.elementType,
   /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
    * @deprecated Use `slotProps.img` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
@@ -275,14 +290,18 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    img: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+    fallback: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    img: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({
-    img: _propTypes.default.elementType
+    fallback: _propTypes.default.elementType,
+    img: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
   }),
   /**
    * The `src` attribute for the `img` element.

package/AvatarGroup/AvatarGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OverridableComponent, OverridableStringUnion, OverrideProps, PartiallyRequired } from '@mui/types';
 import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material';
+import { Theme } from "../styles/index.js";
 import { AvatarGroupClasses } from "./avatarGroupClasses.js";
 import Avatar from "../Avatar/index.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";

package/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion, Simplify } from '@mui/types';
-import { SlotComponentProps } from "../utils/types.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
 import { Theme } from "../styles/index.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
 import { BadgeClasses } from "./badgeClasses.js";
@@ -9,7 +9,31 @@ export interface BadgePropsVariantOverrides {}
 export interface BadgePropsColorOverrides {}
 export interface BadgeRootSlotPropsOverrides {}
 export interface BadgeBadgeSlotPropsOverrides {}
-export type BadgeOwnerState = Simplify<BadgeOwnProps & {
+export interface BadgeSlots {
+  /**
+   * The component that renders the root.
+   * @default span
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the badge.
+   * @default span
+   */
+  badge: React.ElementType;
+}
+export type BadgeSlotsAndSlotProps = CreateSlotsAndSlotProps<BadgeSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the span element.
+   */
+  root: SlotProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>;
+  /**
+   * Props forwarded to the label slot.
+   * By default, the avaible props are based on the span element.
+   */
+  badge: SlotProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>;
+}>;
+export type BadgeOwnerState = Simplify<Omit<BadgeOwnProps, 'slotProps' | 'slots'> & {
   badgeContent: React.ReactNode;
   invisible: boolean;
   max: number;
@@ -24,7 +48,7 @@ export interface BadgeOrigin {
   vertical?: 'top' | 'bottom';
   horizontal?: 'left' | 'right';
 }
-export interface BadgeOwnProps {
+export interface BadgeOwnProps extends BadgeSlotsAndSlotProps {
   /**
    * The anchor of the badge.
    * @default {
@@ -91,31 +115,6 @@ export interface BadgeOwnProps {
    * @default 'rectangular'
    */
   overlap?: 'rectangular' | 'circular';
-  /**
-   * The props used for each slot inside the Badge.
-   * @default {}
-   */
-  slotProps?: {
-    root?: SlotComponentProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>;
-    badge?: SlotComponentProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>;
-  };
-  /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots?: {
-    /**
-     * The component that renders the root.
-     * @default 'span'
-     */
-    root?: React.ElementType;
-    /**
-     * The component that renders the badge.
-     * @default 'span'
-     */
-    badge?: React.ElementType;
-  };
   /**
    * Controls whether the badge is hidden when `badgeContent` is zero.
    * @default false