@mui/material 9.0.0-alpha.2 → 9.0.0-alpha.4

package/AvatarGroup/AvatarGroup.mjs

@@ -58,7 +58,6 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     children: childrenProp,
     className,
     component = 'div',
-    componentsProps,
     max = 5,
     renderSurplus,
     slotProps = {},
@@ -103,11 +102,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   }
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      surplus: slotProps.additionalAvatar ?? componentsProps?.additionalAvatar,
-      ...componentsProps,
-      ...slotProps
-    }
+    slotProps
   };
   const [SurplusSlot, surplusProps] = useSlot('surplus', {
     elementType: Avatar,
@@ -162,17 +157,6 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * 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.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps: PropTypes.shape({
-    additionalAvatar: PropTypes.object
-  }),
   /**
    * Max avatars to show before +x.
    * @default 5
@@ -194,7 +178,6 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * @default {}
    */
   slotProps: PropTypes.shape({
-    additionalAvatar: PropTypes.object,
     surplus: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**

package/Backdrop/Backdrop.d.mts

@@ -38,27 +38,6 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>,
    * The content of the component.
    */
   children?: React.ReactNode;
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components?: {
-    Root?: React.ElementType | undefined;
-  } | undefined;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps?: {
-    root?: (React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides) | undefined;
-  } | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -82,21 +61,12 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>,
    * You may specify a single timeout for all transitions, or individually with an object.
    */
   transitionDuration?: TransitionProps['timeout'] | undefined;
-  /**
-   * The component used for the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Fade
-   * @deprecated Use `slots.transition` 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.
-   */
-  TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
-    children: React.ReactElement<unknown, any>;
-  }> | undefined;
 }
 export interface BackdropTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & BackdropOwnProps;
   defaultComponent: RootComponent;
 }
-type BackdropRootProps = NonNullable<BackdropTypeMap['props']['componentsProps']>['root'];
+type BackdropRootProps = React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
 export declare const BackdropRoot: React.FC<BackdropRootProps>;
 
 /**

package/Backdrop/Backdrop.d.ts

@@ -38,27 +38,6 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>,
    * The content of the component.
    */
   children?: React.ReactNode;
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components?: {
-    Root?: React.ElementType | undefined;
-  } | undefined;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps?: {
-    root?: (React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides) | undefined;
-  } | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -82,21 +61,12 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>,
    * You may specify a single timeout for all transitions, or individually with an object.
    */
   transitionDuration?: TransitionProps['timeout'] | undefined;
-  /**
-   * The component used for the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Fade
-   * @deprecated Use `slots.transition` 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.
-   */
-  TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
-    children: React.ReactElement<unknown, any>;
-  }> | undefined;
 }
 export interface BackdropTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & BackdropOwnProps;
   defaultComponent: RootComponent;
 }
-type BackdropRootProps = NonNullable<BackdropTypeMap['props']['componentsProps']>['root'];
+type BackdropRootProps = React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
 export declare const BackdropRoot: React.FC<BackdropRootProps>;
 
 /**

package/Backdrop/Backdrop.js

@@ -67,11 +67,8 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     component = 'div',
     invisible = false,
     open,
-    components = {},
-    componentsProps = {},
     slotProps = {},
     slots = {},
-    TransitionComponent: TransitionComponentProp,
     transitionDuration,
     ...other
   } = props;
@@ -81,19 +78,10 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     invisible
   };
   const classes = useUtilityClasses(ownerState);
-  const backwardCompatibleSlots = {
-    transition: TransitionComponentProp,
-    root: components.Root,
-    ...slots
-  };
-  const backwardCompatibleSlotProps = {
-    ...componentsProps,
-    ...slotProps
-  };
   const externalForwardedProps = {
     component,
-    slots: backwardCompatibleSlots,
-    slotProps: backwardCompatibleSlotProps
+    slots,
+    slotProps
   };
   const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
     elementType: BackdropRoot,
@@ -140,27 +128,6 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * Either a string to use a HTML element or a component.
    */
   component: _propTypes.default.elementType,
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components: _propTypes.default.shape({
-    Root: _propTypes.default.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps: _propTypes.default.shape({
-    root: _propTypes.default.object
-  }),
   /**
    * If `true`, the backdrop is invisible.
    * It can be used when rendering a popover or a custom select component.
@@ -191,13 +158,6 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  /**
-   * The component used for the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Fade
-   * @deprecated Use `slots.transition` 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.
-   */
-  TransitionComponent: _propTypes.default.elementType,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

package/Backdrop/Backdrop.mjs

@@ -60,11 +60,8 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     component = 'div',
     invisible = false,
     open,
-    components = {},
-    componentsProps = {},
     slotProps = {},
     slots = {},
-    TransitionComponent: TransitionComponentProp,
     transitionDuration,
     ...other
   } = props;
@@ -74,19 +71,10 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     invisible
   };
   const classes = useUtilityClasses(ownerState);
-  const backwardCompatibleSlots = {
-    transition: TransitionComponentProp,
-    root: components.Root,
-    ...slots
-  };
-  const backwardCompatibleSlotProps = {
-    ...componentsProps,
-    ...slotProps
-  };
   const externalForwardedProps = {
     component,
-    slots: backwardCompatibleSlots,
-    slotProps: backwardCompatibleSlotProps
+    slots,
+    slotProps
   };
   const [RootSlot, rootProps] = useSlot('root', {
     elementType: BackdropRoot,
@@ -133,27 +121,6 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated Use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Root: PropTypes.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    root: PropTypes.object
-  }),
   /**
    * If `true`, the backdrop is invisible.
    * It can be used when rendering a popover or a custom select component.
@@ -184,13 +151,6 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The component used for the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Fade
-   * @deprecated Use `slots.transition` 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.
-   */
-  TransitionComponent: PropTypes.elementType,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

package/Badge/Badge.d.mts

@@ -80,26 +80,6 @@ export interface BadgeOwnProps extends BadgeSlotsAndSlotProps {
    * @default 'default'
    */
   color?: OverridableStringUnion<'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning', BadgePropsColorOverrides> | undefined;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps?: BadgeOwnProps['slotProps'] | undefined;
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components?: {
-    Root?: React.ElementType | undefined;
-    Badge?: React.ElementType | undefined;
-  } | undefined;
   /**
    * If `true`, the badge is invisible.
    * @default false

package/Badge/Badge.d.ts

@@ -80,26 +80,6 @@ export interface BadgeOwnProps extends BadgeSlotsAndSlotProps {
    * @default 'default'
    */
   color?: OverridableStringUnion<'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning', BadgePropsColorOverrides> | undefined;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps?: BadgeOwnProps['slotProps'] | undefined;
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components?: {
-    Root?: React.ElementType | undefined;
-    Badge?: React.ElementType | undefined;
-  } | undefined;
   /**
    * If `true`, the badge is invisible.
    * @default false

package/Badge/Badge.js

@@ -151,8 +151,6 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     className,
     classes: classesProp,
     component,
-    components = {},
-    componentsProps = {},
     children,
     overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
@@ -205,17 +203,9 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
-
-  // support both `slots` and `components` for backward compatibility
   const externalForwardedProps = {
-    slots: {
-      root: slots?.root ?? components.Root,
-      badge: slots?.badge ?? components.Badge
-    },
-    slotProps: {
-      root: slotProps?.root ?? componentsProps.root,
-      badge: slotProps?.badge ?? componentsProps.badge
-    }
+    slots,
+    slotProps
   };
   const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
     elementType: BadgeRoot,
@@ -288,29 +278,6 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * Either a string to use a HTML element or a component.
    */
   component: _propTypes.default.elementType,
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components: _propTypes.default.shape({
-    Badge: _propTypes.default.elementType,
-    Root: _propTypes.default.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps: _propTypes.default.shape({
-    badge: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
-  }),
   /**
    * If `true`, the badge is invisible.
    * @default false

package/Badge/Badge.mjs

@@ -144,8 +144,6 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     className,
     classes: classesProp,
     component,
-    components = {},
-    componentsProps = {},
     children,
     overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
@@ -198,17 +196,9 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
-
-  // support both `slots` and `components` for backward compatibility
   const externalForwardedProps = {
-    slots: {
-      root: slots?.root ?? components.Root,
-      badge: slots?.badge ?? components.Badge
-    },
-    slotProps: {
-      root: slotProps?.root ?? componentsProps.root,
-      badge: slotProps?.badge ?? componentsProps.badge
-    }
+    slots,
+    slotProps
   };
   const [RootSlot, rootProps] = useSlot('root', {
     elementType: BadgeRoot,
@@ -281,29 +271,6 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * The components used for each slot inside.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Badge: PropTypes.elementType,
-    Root: PropTypes.elementType
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
   /**
    * If `true`, the badge is invisible.
    * @default false

package/Box/Box.d.mts

@@ -8,6 +8,7 @@ import { Theme as MaterialTheme } from "../styles/index.mjs";
  * Demos:
  *
  * - [Box](https://next.mui.com/material-ui/react-box/)
+ * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
  *
  * API:
  *

package/Box/Box.d.ts

@@ -8,6 +8,7 @@ import { Theme as MaterialTheme } from "../styles/index.js";
  * Demos:
  *
  * - [Box](https://next.mui.com/material-ui/react-box/)
+ * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
  *
  * API:
  *

package/Button/Button.d.mts

@@ -117,6 +117,7 @@ export type ExtendButton<TypeMap extends OverridableTypeMap> = ((props: {
  *
  * - [Button Group](https://next.mui.com/material-ui/react-button-group/)
  * - [Button](https://next.mui.com/material-ui/react-button/)
+ * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
  * - [Number Field](https://next.mui.com/material-ui/react-number-field/)
  *
  * API:

package/Button/Button.d.ts

@@ -117,6 +117,7 @@ export type ExtendButton<TypeMap extends OverridableTypeMap> = ((props: {
  *
  * - [Button Group](https://next.mui.com/material-ui/react-button-group/)
  * - [Button](https://next.mui.com/material-ui/react-button/)
+ * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
  * - [Number Field](https://next.mui.com/material-ui/react-number-field/)
  *
  * API:

package/Button/Button.js

@@ -37,9 +37,9 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', loading && 'loading', variant, `${variant}${(0, _capitalize.default)(color)}`, `size${(0, _capitalize.default)(size)}`, `${variant}Size${(0, _capitalize.default)(size)}`, `color${(0, _capitalize.default)(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${(0, _capitalize.default)(loadingPosition)}`],
-    startIcon: ['icon', 'startIcon', `iconSize${(0, _capitalize.default)(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${(0, _capitalize.default)(size)}`],
+    root: ['root', loading && 'loading', variant, `size${(0, _capitalize.default)(size)}`, `color${(0, _capitalize.default)(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${(0, _capitalize.default)(loadingPosition)}`],
+    startIcon: ['icon', 'startIcon'],
+    endIcon: ['icon', 'endIcon'],
     loadingIndicator: ['loadingIndicator'],
     loadingWrapper: ['loadingWrapper']
   };
@@ -86,7 +86,7 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${(0, _capitalize.default)(ownerState.color)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`], styles[`${ownerState.variant}Size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
+    return [styles.root, styles[ownerState.variant], styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
   }
 })((0, _memoTheme.default)(({
   theme
@@ -295,7 +295,7 @@ const ButtonStartIcon = (0, _zeroStyled.styled)('span', {
     const {
       ownerState
     } = props;
-    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${(0, _capitalize.default)(ownerState.size)}`]];
+    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart];
   }
 })(({
   theme
@@ -339,7 +339,7 @@ const ButtonEndIcon = (0, _zeroStyled.styled)('span', {
     const {
       ownerState
     } = props;
-    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${(0, _capitalize.default)(ownerState.size)}`]];
+    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd];
   }
 })(({
   theme

package/Button/Button.mjs

@@ -30,9 +30,9 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
-    startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
+    root: ['root', loading && 'loading', variant, `size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
+    startIcon: ['icon', 'startIcon'],
+    endIcon: ['icon', 'endIcon'],
     loadingIndicator: ['loadingIndicator'],
     loadingWrapper: ['loadingWrapper']
   };
@@ -79,7 +79,7 @@ const ButtonRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
+    return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
   }
 })(memoTheme(({
   theme
@@ -288,7 +288,7 @@ const ButtonStartIcon = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart];
   }
 })(({
   theme
@@ -332,7 +332,7 @@ const ButtonEndIcon = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd];
   }
 })(({
   theme