@mui/material 7.0.2 → 7.1.0

package/esm/Autocomplete/Autocomplete.js

@@ -230,8 +230,7 @@ const AutocompleteRoot = styled('div', {
 });
 const AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
-  slot: 'EndAdornment',
-  overridesResolver: (props, styles) => styles.endAdornment
+  slot: 'EndAdornment'
 })({
   // We use a position absolute to support wrapping tags.
   position: 'absolute',
@@ -241,8 +240,7 @@ const AutocompleteEndAdornment = styled('div', {
 });
 const AutocompleteClearIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',
-  slot: 'ClearIndicator',
-  overridesResolver: (props, styles) => styles.clearIndicator
+  slot: 'ClearIndicator'
 })({
   marginRight: -2,
   padding: 4,
@@ -295,8 +293,7 @@ const AutocompletePopper = styled(Popper, {
 })));
 const AutocompletePaper = styled(Paper, {
   name: 'MuiAutocomplete',
-  slot: 'Paper',
-  overridesResolver: (props, styles) => styles.paper
+  slot: 'Paper'
 })(memoTheme(({
   theme
 }) => ({
@@ -305,8 +302,7 @@ const AutocompletePaper = styled(Paper, {
 })));
 const AutocompleteLoading = styled('div', {
   name: 'MuiAutocomplete',
-  slot: 'Loading',
-  overridesResolver: (props, styles) => styles.loading
+  slot: 'Loading'
 })(memoTheme(({
   theme
 }) => ({
@@ -315,8 +311,7 @@ const AutocompleteLoading = styled('div', {
 })));
 const AutocompleteNoOptions = styled('div', {
   name: 'MuiAutocomplete',
-  slot: 'NoOptions',
-  overridesResolver: (props, styles) => styles.noOptions
+  slot: 'NoOptions'
 })(memoTheme(({
   theme
 }) => ({
@@ -325,8 +320,7 @@ const AutocompleteNoOptions = styled('div', {
 })));
 const AutocompleteListbox = styled('ul', {
   name: 'MuiAutocomplete',
-  slot: 'Listbox',
-  overridesResolver: (props, styles) => styles.listbox
+  slot: 'Listbox'
 })(memoTheme(({
   theme
 }) => ({
@@ -384,8 +378,7 @@ const AutocompleteListbox = styled('ul', {
 })));
 const AutocompleteGroupLabel = styled(ListSubheader, {
   name: 'MuiAutocomplete',
-  slot: 'GroupLabel',
-  overridesResolver: (props, styles) => styles.groupLabel
+  slot: 'GroupLabel'
 })(memoTheme(({
   theme
 }) => ({
@@ -394,8 +387,7 @@ const AutocompleteGroupLabel = styled(ListSubheader, {
 })));
 const AutocompleteGroupUl = styled('ul', {
   name: 'MuiAutocomplete',
-  slot: 'GroupUl',
-  overridesResolver: (props, styles) => styles.groupUl
+  slot: 'GroupUl'
 })({
   padding: 0,
   [`& .${autocompleteClasses.option}`]: {

package/esm/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/esm/Avatar/Avatar.js

@@ -82,8 +82,7 @@ const AvatarRoot = styled('div', {
 })));
 const AvatarImg = styled('img', {
   name: 'MuiAvatar',
-  slot: 'Img',
-  overridesResolver: (props, styles) => styles.img
+  slot: 'Img'
 })({
   width: '100%',
   height: '100%',
@@ -97,8 +96,7 @@ const AvatarImg = styled('img', {
 });
 const AvatarFallback = styled(Person, {
   name: 'MuiAvatar',
-  slot: 'Fallback',
-  overridesResolver: (props, styles) => styles.fallback
+  slot: 'Fallback'
 })({
   width: '75%',
   height: '75%'
@@ -180,6 +178,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] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
+    elementType: AvatarRoot,
+    externalForwardedProps: {
+      slots,
+      slotProps,
+      component,
+      ...other
+    },
+    ownerState
+  });
   const [ImgSlot, imgSlotProps] = useSlot('img', {
     className: classes.img,
     elementType: AvatarImg,
@@ -200,6 +210,16 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     },
     ownerState
   });
+  const [FallbackSlot, fallbackSlotProps] = useSlot('fallback', {
+    className: classes.fallback,
+    elementType: AvatarFallback,
+    externalForwardedProps: {
+      slots,
+      slotProps
+    },
+    shouldForwardComponentProp: true,
+    ownerState
+  });
   if (hasImgNotFailing) {
     children = /*#__PURE__*/_jsx(ImgSlot, {
       ...imgSlotProps
@@ -211,17 +231,12 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   } else if (hasImg && alt) {
     children = alt[0];
   } else {
-    children = /*#__PURE__*/_jsx(AvatarFallback, {
-      ownerState: ownerState,
-      className: classes.fallback
+    children = /*#__PURE__*/_jsx(FallbackSlot, {
+      ...fallbackSlotProps
     });
   }
-  return /*#__PURE__*/_jsx(AvatarRoot, {
-    as: component,
-    className: clsx(classes.root, className),
-    ref: ref,
-    ...other,
-    ownerState: ownerState,
+  return /*#__PURE__*/_jsx(RootSlot, {
+    ...rootSlotProps,
     children: children
   });
 });
@@ -254,7 +269,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
    */
   component: PropTypes.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.
    */
@@ -268,14 +283,18 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
    * @default {}
    */
   slotProps: PropTypes.shape({
-    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    fallback: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({
-    img: PropTypes.elementType
+    fallback: PropTypes.elementType,
+    img: PropTypes.elementType,
+    root: PropTypes.elementType
   }),
   /**
    * The `src` attribute for the `img` element.

package/esm/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

package/esm/Badge/Badge.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import usePreviousProps from '@mui/utils/usePreviousProps';
 import composeClasses from '@mui/utils/composeClasses';
-import useSlotProps from '@mui/utils/useSlotProps';
 import useBadge from "./useBadge.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -13,6 +12,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -33,8 +33,7 @@ const useUtilityClasses = ownerState => {
 };
 const BadgeRoot = styled('span', {
   name: 'MuiBadge',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   position: 'relative',
   display: 'inline-flex',
@@ -282,26 +281,34 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
-  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
-  const rootProps = useSlotProps({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component
+  const externalForwardedProps = {
+    slots: {
+      root: slots?.root ?? components.Root,
+      badge: slots?.badge ?? components.Badge
+    },
+    slotProps: {
+      root: slotProps?.root ?? componentsProps.root,
+      badge: slotProps?.badge ?? componentsProps.badge
+    }
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BadgeRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
     },
     ownerState,
-    className: clsx(rootSlotProps?.className, classes.root, className)
+    className: clsx(classes.root, className),
+    ref,
+    additionalProps: {
+      as: component
+    }
   });
-  const badgeProps = useSlotProps({
-    elementType: BadgeSlot,
-    externalSlotProps: badgeSlotProps,
+  const [BadgeSlot, badgeProps] = useSlot('badge', {
+    elementType: BadgeBadge,
+    externalForwardedProps,
     ownerState,
-    className: clsx(classes.badge, badgeSlotProps?.className)
+    className: classes.badge
   });
   return /*#__PURE__*/_jsxs(RootSlot, {
     ...rootProps,
@@ -399,7 +406,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    */
   showZero: PropTypes.bool,
   /**
-   * The props used for each slot inside the Badge.
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -407,8 +414,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({

package/esm/Badge/useBadge.d.ts

@@ -1,13 +1,3 @@
 import { UseBadgeParameters, UseBadgeReturnValue } from "./useBadge.types.js";
-/**
- *
- * Demos:
- *
- * - [Badge](https://mui.com/base-ui/react-badge/#hook)
- *
- * API:
- *
- * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
- */
 declare function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue;
 export default useBadge;

package/esm/Badge/useBadge.js

@@ -1,16 +1,6 @@
 'use client';
 
-import { usePreviousProps } from '@mui/utils';
-/**
- *
- * Demos:
- *
- * - [Badge](https://mui.com/base-ui/react-badge/#hook)
- *
- * API:
- *
- * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
- */
+import usePreviousProps from '@mui/utils/usePreviousProps';
 function useBadge(parameters) {
   const {
     badgeContent: badgeContentProp,

package/esm/BottomNavigation/BottomNavigation.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const BottomNavigationRoot = styled('div', {
   name: 'MuiBottomNavigation',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(memoTheme(({
   theme
 }) => ({

package/esm/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -1,10 +1,34 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme } from "../index.js";
-import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
+import { CreateSlotsAndSlotProps, SlotProps, Theme } from "../index.js";
+import { ButtonBaseProps, ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
 import { OverrideProps } from "../OverridableComponent/index.js";
 import { BottomNavigationActionClasses } from "./bottomNavigationActionClasses.js";
-export interface BottomNavigationActionOwnProps {
+export interface BottomNavigationActionSlots {
+  /**
+   * The component that renders the root.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the label.
+   * @default span
+   */
+  label: React.ElementType;
+}
+export type BottomNavigationActionSlotsAndSlotProps = CreateSlotsAndSlotProps<BottomNavigationActionSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the ButtonBase element.
+   */
+  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, BottomNavigationActionOwnerState>;
+  /**
+   * Props forwarded to the label slot.
+   * By default, the avaible props are based on the span element.
+   */
+  label: SlotProps<'span', {}, BottomNavigationActionOwnerState>;
+}>;
+export interface BottomNavigationActionOwnProps extends BottomNavigationActionSlotsAndSlotProps {
   /**
    * This prop isn't supported.
    * Use the `component` prop if you need to change the children structure.
@@ -59,4 +83,5 @@ declare const BottomNavigationAction: ExtendButtonBase<BottomNavigationActionTyp
 export type BottomNavigationActionProps<RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BottomNavigationActionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
   component?: React.ElementType;
 };
+export interface BottomNavigationActionOwnerState extends Omit<BottomNavigationActionProps, 'slots' | 'slotProps'> {}
 export default BottomNavigationAction;

package/esm/BottomNavigationAction/BottomNavigationAction.js

@@ -10,6 +10,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
 import unsupportedProp from "../utils/unsupportedProp.js";
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from "./bottomNavigationActionClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -68,8 +69,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
 })));
 const BottomNavigationActionLabel = styled('span', {
   name: 'MuiBottomNavigationAction',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
+  slot: 'Label'
 })(memoTheme(({
   theme
 }) => ({
@@ -107,6 +107,8 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
     selected,
     showLabel,
     value,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = props;
@@ -119,16 +121,41 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       onClick(event);
     }
   };
-  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, {
-    ref: ref,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BottomNavigationActionRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
     className: clsx(classes.root, className),
-    focusRipple: true,
-    onClick: handleChange,
-    ownerState: ownerState,
-    ...other,
-    children: [icon, /*#__PURE__*/_jsx(BottomNavigationActionLabel, {
-      className: classes.label,
-      ownerState: ownerState,
+    additionalProps: {
+      focusRipple: true
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClick: event => {
+        handlers.onClick?.(event);
+        handleChange(event);
+      }
+    })
+  });
+  const [LabelSlot, labelProps] = useSlot('label', {
+    elementType: BottomNavigationActionLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.label
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [icon, /*#__PURE__*/_jsx(LabelSlot, {
+      ...labelProps,
       children: label
     })]
   });
@@ -175,6 +202,22 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remo
    * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
    */
   showLabel: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    label: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Breadcrumbs/Breadcrumbs.js

@@ -36,8 +36,7 @@ const BreadcrumbsRoot = styled(Typography, {
 })({});
 const BreadcrumbsOl = styled('ol', {
   name: 'MuiBreadcrumbs',
-  slot: 'Ol',
-  overridesResolver: (props, styles) => styles.ol
+  slot: 'Ol'
 })({
   display: 'flex',
   flexWrap: 'wrap',
@@ -48,8 +47,7 @@ const BreadcrumbsOl = styled('ol', {
 });
 const BreadcrumbsSeparator = styled('li', {
   name: 'MuiBreadcrumbs',
-  slot: 'Separator',
-  overridesResolver: (props, styles) => styles.separator
+  slot: 'Separator'
 })({
   display: 'flex',
   userSelect: 'none',

package/esm/Button/Button.js

@@ -372,8 +372,7 @@ const ButtonEndIcon = styled('span', {
 }));
 const ButtonLoadingIndicator = styled('span', {
   name: 'MuiButton',
-  slot: 'LoadingIndicator',
-  overridesResolver: (props, styles) => styles.loadingIndicator
+  slot: 'LoadingIndicator'
 })(({
   theme
 }) => ({
@@ -464,8 +463,7 @@ const ButtonLoadingIndicator = styled('span', {
 }));
 const ButtonLoadingIconPlaceholder = styled('span', {
   name: 'MuiButton',
-  slot: 'LoadingIconPlaceholder',
-  overridesResolver: (props, styles) => styles.loadingIconPlaceholder
+  slot: 'LoadingIconPlaceholder'
 })({
   display: 'inline-block',
   width: '1em',

package/esm/ButtonBase/ButtonBase.js

@@ -33,8 +33,7 @@ const useUtilityClasses = ownerState => {
 };
 export const ButtonBaseRoot = styled('button', {
   name: 'MuiButtonBase',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   display: 'inline-flex',
   alignItems: 'center',

package/esm/Card/Card.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const CardRoot = styled(Paper, {
   name: 'MuiCard',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({
   overflow: 'hidden'
 });