@mui/material 5.10.12 → 5.10.13

package/Autocomplete/autocompleteClasses.d.ts

@@ -1,54 +1,54 @@
-export interface AutocompleteClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-    /** State class applied to the root element if focused. */
-    focused: string;
-    /** Styles applied to the tag elements, e.g. the chips. */
-    tag: string;
-    /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
-    tagSizeSmall: string;
-    /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
-    tagSizeMedium: string;
-    /** Styles applied when the popup icon is rendered. */
-    hasPopupIcon: string;
-    /** Styles applied when the clear icon is rendered. */
-    hasClearIcon: string;
-    /** Styles applied to the Input element. */
-    inputRoot: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if the input is focused. */
-    inputFocused: string;
-    /** Styles applied to the endAdornment element. */
-    endAdornment: string;
-    /** Styles applied to the clear indicator. */
-    clearIndicator: string;
-    /** Styles applied to the popup indicator. */
-    popupIndicator: string;
-    /** Styles applied to the popup indicator if the popup is open. */
-    popupIndicatorOpen: string;
-    /** Styles applied to the popper element. */
-    popper: string;
-    /** Styles applied to the popper element if `disablePortal={true}`. */
-    popperDisablePortal: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-    /** Styles applied to the listbox component. */
-    listbox: string;
-    /** Styles applied to the loading wrapper. */
-    loading: string;
-    /** Styles applied to the no option wrapper. */
-    noOptions: string;
-    /** Styles applied to the option elements. */
-    option: string;
-    /** Styles applied to the group's label elements. */
-    groupLabel: string;
-    /** Styles applied to the group's ul elements. */
-    groupUl: string;
-}
-export declare type AutocompleteClassKey = keyof AutocompleteClasses;
-export declare function getAutocompleteUtilityClass(slot: string): string;
-declare const autocompleteClasses: AutocompleteClasses;
-export default autocompleteClasses;
+export interface AutocompleteClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+    /** State class applied to the root element if focused. */
+    focused: string;
+    /** Styles applied to the tag elements, e.g. the chips. */
+    tag: string;
+    /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
+    tagSizeSmall: string;
+    /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
+    tagSizeMedium: string;
+    /** Styles applied when the popup icon is rendered. */
+    hasPopupIcon: string;
+    /** Styles applied when the clear icon is rendered. */
+    hasClearIcon: string;
+    /** Styles applied to the Input element. */
+    inputRoot: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if the input is focused. */
+    inputFocused: string;
+    /** Styles applied to the endAdornment element. */
+    endAdornment: string;
+    /** Styles applied to the clear indicator. */
+    clearIndicator: string;
+    /** Styles applied to the popup indicator. */
+    popupIndicator: string;
+    /** Styles applied to the popup indicator if the popup is open. */
+    popupIndicatorOpen: string;
+    /** Styles applied to the popper element. */
+    popper: string;
+    /** Styles applied to the popper element if `disablePortal={true}`. */
+    popperDisablePortal: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+    /** Styles applied to the listbox component. */
+    listbox: string;
+    /** Styles applied to the loading wrapper. */
+    loading: string;
+    /** Styles applied to the no option wrapper. */
+    noOptions: string;
+    /** Styles applied to the option elements. */
+    option: string;
+    /** Styles applied to the group's label elements. */
+    groupLabel: string;
+    /** Styles applied to the group's ul elements. */
+    groupUl: string;
+}
+export declare type AutocompleteClassKey = keyof AutocompleteClasses;
+export declare function getAutocompleteUtilityClass(slot: string): string;
+declare const autocompleteClasses: AutocompleteClasses;
+export default autocompleteClasses;

package/Avatar/avatarClasses.d.ts

@@ -1,20 +1,20 @@
-export interface AvatarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if not `src` or `srcSet`. */
-    colorDefault: string;
-    /** Styles applied to the root element if `variant="circular"`. */
-    circular: string;
-    /** Styles applied to the root element if `variant="rounded"`. */
-    rounded: string;
-    /** Styles applied to the root element if `variant="square"`. */
-    square: string;
-    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
-    img: string;
-    /** Styles applied to the fallback icon */
-    fallback: string;
-}
-export declare type AvatarClassKey = keyof AvatarClasses;
-export declare function getAvatarUtilityClass(slot: string): string;
-declare const avatarClasses: AvatarClasses;
-export default avatarClasses;
+export interface AvatarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if not `src` or `srcSet`. */
+    colorDefault: string;
+    /** Styles applied to the root element if `variant="circular"`. */
+    circular: string;
+    /** Styles applied to the root element if `variant="rounded"`. */
+    rounded: string;
+    /** Styles applied to the root element if `variant="square"`. */
+    square: string;
+    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
+    img: string;
+    /** Styles applied to the fallback icon */
+    fallback: string;
+}
+export declare type AvatarClassKey = keyof AvatarClasses;
+export declare function getAvatarUtilityClass(slot: string): string;
+declare const avatarClasses: AvatarClasses;
+export default avatarClasses;

package/AvatarGroup/AvatarGroup.d.ts

@@ -23,7 +23,12 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    */
   component?: React.ElementType;
   /**
-   * The props used for each slot inside the AvatarGroup.
+   * 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?: {
@@ -35,6 +40,18 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * @default 5
    */
   max?: number;
+  /**
+   * 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?: {
+    additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &
+      AvatarGroupComponentsPropsOverrides;
+  };
   /**
    * Spacing between avatars.
    * @default 'medium'

package/AvatarGroup/AvatarGroup.js

@@ -33,7 +33,7 @@ var _avatarGroupClasses = _interopRequireWildcard(require("./avatarGroupClasses"
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -90,7 +90,7 @@ const AvatarGroupAvatar = (0, _styled.default)(_Avatar.default, {
   }
 }));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
-  var _componentsProps$addi, _componentsProps$addi2;
+  var _slotProps$additional;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -102,6 +102,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     component = 'div',
     componentsProps = {},
     max = 5,
+    slotProps = {},
     spacing = 'medium',
     total,
     variant = 'circular'
@@ -134,6 +135,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
+  const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupRoot, (0, _extends2.default)({
     as: component,
     ownerState: ownerState,
@@ -143,11 +145,11 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupAvatar, (0, _extends2.default)({
       ownerState: ownerState,
       variant: variant
-    }, componentsProps.additionalAvatar, {
-      className: (0, _clsx.default)(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
+    }, additionalAvatarSlotProps, {
+      className: (0, _clsx.default)(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
       style: (0, _extends2.default)({
         marginLeft
-      }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
+      }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
       children: ["+", extraAvatars]
     })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -192,7 +194,12 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
   component: _propTypes.default.elementType,
 
   /**
-   * The props used for each slot inside the AvatarGroup.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
@@ -211,6 +218,18 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
     return null;
   }),
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    additionalAvatar: _propTypes.default.object
+  }),
+
   /**
    * Spacing between avatars.
    * @default 'medium'

package/AvatarGroup/avatarGroupClasses.d.ts

@@ -1,10 +1,10 @@
-export interface AvatarGroupClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the avatar elements. */
-    avatar: string;
-}
-export declare type AvatarGroupClassKey = keyof AvatarGroupClasses;
-export declare function getAvatarGroupUtilityClass(slot: string): string;
-declare const avatarGroupClasses: AvatarGroupClasses;
-export default avatarGroupClasses;
+export interface AvatarGroupClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the avatar elements. */
+    avatar: string;
+}
+export declare type AvatarGroupClassKey = keyof AvatarGroupClasses;
+export declare function getAvatarGroupUtilityClass(slot: string): string;
+declare const avatarGroupClasses: AvatarGroupClasses;
+export default avatarGroupClasses;

package/Backdrop/Backdrop.d.ts

@@ -16,15 +16,23 @@ export interface BackdropTypeMap<P = {}, D extends React.ElementType = 'div'> {
        */
       children?: React.ReactNode;
       /**
-       * The components used for each slot inside the Backdrop.
-       * 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?: {
         Root?: React.ElementType;
       };
       /**
-       * The props used for each slot inside the Backdrop.
+       * 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?: {
@@ -44,6 +52,28 @@ export interface BackdropTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * If `true`, the component is shown.
        */
       open: boolean;
+      /**
+       * The extra props for the slot components.
+       * You can override the existing props or add new ones.
+       *
+       * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+       *
+       * @default {}
+       */
+      slotProps?: {
+        root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
+      };
+      /**
+       * The components used for each slot inside.
+       *
+       * This prop is an alias for the `components` prop, which will be deprecated in the future.
+       *
+       * @default {}
+       */
+      slots?: {
+        root?: React.ElementType;
+      };
+
       /**
        * The system prop that allows defining system overrides as well as additional CSS styles.
        */

package/Backdrop/Backdrop.js

@@ -29,7 +29,7 @@ var _backdropClasses = require("./backdropClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -72,7 +72,7 @@ const BackdropRoot = (0, _styled.default)('div', {
   backgroundColor: 'transparent'
 }));
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _components$Root, _componentsProps$root;
+  var _slotProps$root, _ref, _slots$root;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -86,6 +86,8 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     className,
     invisible = false,
     open,
+    slotProps = {},
+    slots = {},
     transitionDuration,
     // eslint-disable-next-line react/prop-types
     TransitionComponent = _Fade.default
@@ -96,19 +98,21 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     invisible
   });
   const classes = useUtilityClasses(ownerState);
+  const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropRoot, {
-      "aria-hidden": true,
-      as: (_components$Root = components.Root) != null ? _components$Root : component,
-      className: (0, _clsx.default)(classes.root, className),
-      ownerState: (0, _extends2.default)({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropRoot, (0, _extends2.default)({
+      "aria-hidden": true
+    }, rootSlotProps, {
+      as: (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : component,
+      className: (0, _clsx.default)(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
+      ownerState: (0, _extends2.default)({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
       classes: classes,
       ref: ref,
       children: children
-    })
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? Backdrop.propTypes
@@ -141,8 +145,11 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   component: _propTypes.default.elementType,
 
   /**
-   * The components used for each slot inside the Backdrop.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -150,7 +157,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Backdrop.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
@@ -169,6 +181,29 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    */
   open: _propTypes.default.bool.isRequired,
 
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    root: _propTypes.default.object
+  }),
+
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    root: _propTypes.default.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Backdrop/backdropClasses.d.ts

@@ -1,10 +1,10 @@
-export interface BackdropClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `invisible={true}`. */
-    invisible: string;
-}
-export declare type BackdropClassKey = keyof BackdropClasses;
-export declare function getBackdropUtilityClass(slot: string): string;
-declare const backdropClasses: BackdropClasses;
-export default backdropClasses;
+export interface BackdropClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `invisible={true}`. */
+    invisible: string;
+}
+export declare type BackdropClassKey = keyof BackdropClasses;
+export declare function getBackdropUtilityClass(slot: string): string;
+declare const backdropClasses: BackdropClasses;
+export default backdropClasses;

package/Badge/Badge.d.ts

@@ -47,13 +47,21 @@ export type BadgeTypeMap<
       BadgePropsColorOverrides
     >;
     /**
-     * The props used for each slot inside the Badge.
+     * 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?: BadgeUnstyledTypeMap['props']['slotProps'];
     /**
-     * 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.
+     *
+     * This prop is an alias for the `slots` prop.
+     * It's recommended to use the `slots` prop instead.
+     *
      * @default {}
      */
     components?: {

package/Badge/Badge.js

@@ -340,8 +340,11 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   component: _propTypes.default.elementType,
 
   /**
-   * 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.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -350,7 +353,12 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   }),
 
   /**
-   * The props used for each slot inside the Badge.
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
    * @default {}
    */
   componentsProps: _propTypes.default.shape({

package/Badge/badgeClasses.d.ts

@@ -1,56 +1,56 @@
-export interface BadgeClasses {
-    /** Class name applied to the root element. */
-    root: string;
-    /** Class name applied to the badge `span` element. */
-    badge: string;
-    /** Class name applied to the badge `span` element if `variant="dot"`. */
-    dot: string;
-    /** Class name applied to the badge `span` element if `variant="standard"`. */
-    standard: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
-    anchorOriginTopRight: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
-    anchorOriginBottomRight: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
-    anchorOriginTopLeft: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
-    anchorOriginBottomLeft: string;
-    /** State class applied to the badge `span` element if `invisible={true}`. */
-    invisible: string;
-    /** Styles applied to the badge `span` element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the badge `span` element if `color="secondary"`. */
-    colorSecondary: string;
-    /** Styles applied to the badge `span` element if `color="error"`. */
-    colorError: string;
-    /** Styles applied to the badge `span` element if `color="info"`. */
-    colorInfo: string;
-    /** Styles applied to the badge `span` element if `color="success"`. */
-    colorSuccess: string;
-    /** Styles applied to the badge `span` element if `color="warning"`. */
-    colorWarning: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
-    anchorOriginTopRightRectangular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
-    anchorOriginBottomRightRectangular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
-    anchorOriginTopLeftRectangular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
-    anchorOriginBottomLeftRectangular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
-    anchorOriginTopRightCircular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
-    anchorOriginBottomRightCircular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
-    anchorOriginTopLeftCircular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
-    anchorOriginBottomLeftCircular: string;
-    /** Class name applied to the badge `span` element if `overlap="rectangular"`. */
-    overlapRectangular: string;
-    /** Class name applied to the badge `span` element if `overlap="circular"`. */
-    overlapCircular: string;
-}
-export declare type BadgeClassKey = keyof BadgeClasses;
-export declare function getBadgeUtilityClass(slot: string): string;
-declare const badgeClasses: BadgeClasses;
-export default badgeClasses;
+export interface BadgeClasses {
+    /** Class name applied to the root element. */
+    root: string;
+    /** Class name applied to the badge `span` element. */
+    badge: string;
+    /** Class name applied to the badge `span` element if `variant="dot"`. */
+    dot: string;
+    /** Class name applied to the badge `span` element if `variant="standard"`. */
+    standard: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
+    anchorOriginTopRight: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
+    anchorOriginBottomRight: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
+    anchorOriginTopLeft: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
+    anchorOriginBottomLeft: string;
+    /** State class applied to the badge `span` element if `invisible={true}`. */
+    invisible: string;
+    /** Styles applied to the badge `span` element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the badge `span` element if `color="secondary"`. */
+    colorSecondary: string;
+    /** Styles applied to the badge `span` element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the badge `span` element if `color="info"`. */
+    colorInfo: string;
+    /** Styles applied to the badge `span` element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the badge `span` element if `color="warning"`. */
+    colorWarning: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
+    anchorOriginTopRightRectangular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
+    anchorOriginBottomRightRectangular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
+    anchorOriginTopLeftRectangular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
+    anchorOriginBottomLeftRectangular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
+    anchorOriginTopRightCircular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
+    anchorOriginBottomRightCircular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
+    anchorOriginTopLeftCircular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
+    anchorOriginBottomLeftCircular: string;
+    /** Class name applied to the badge `span` element if `overlap="rectangular"`. */
+    overlapRectangular: string;
+    /** Class name applied to the badge `span` element if `overlap="circular"`. */
+    overlapCircular: string;
+}
+export declare type BadgeClassKey = keyof BadgeClasses;
+export declare function getBadgeUtilityClass(slot: string): string;
+declare const badgeClasses: BadgeClasses;
+export default badgeClasses;