@mui/material 5.5.2 → 5.6.1

package/Typography/typographyClasses.d.ts

@@ -1,50 +1,50 @@
-export interface TypographyClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="body2"`. */
-    body2: string;
-    /** Styles applied to the root element if `variant="body1"`. */
-    body1: string;
-    /** Styles applied to the root element if `variant="caption"`. */
-    caption: string;
-    /** Styles applied to the root element if `variant="button"`. */
-    button: string;
-    /** Styles applied to the root element if `variant="h1"`. */
-    h1: string;
-    /** Styles applied to the root element if `variant="h2"`. */
-    h2: string;
-    /** Styles applied to the root element if `variant="h3"`. */
-    h3: string;
-    /** Styles applied to the root element if `variant="h4"`. */
-    h4: string;
-    /** Styles applied to the root element if `variant="h5"`. */
-    h5: string;
-    /** Styles applied to the root element if `variant="h6"`. */
-    h6: string;
-    /** Styles applied to the root element if `variant="subtitle1"`. */
-    subtitle1: string;
-    /** Styles applied to the root element if `variant="subtitle2"`. */
-    subtitle2: string;
-    /** Styles applied to the root element if `variant="overline"`. */
-    overline: string;
-    /** Styles applied to the root element if `variant="inherit"`. */
-    inherit: string;
-    /** Styles applied to the root element if `align="left"`. */
-    alignLeft: string;
-    /** Styles applied to the root element if `align="center"`. */
-    alignCenter: string;
-    /** Styles applied to the root element if `align="right"`. */
-    alignRight: string;
-    /** Styles applied to the root element if `align="justify"`. */
-    alignJustify: string;
-    /** Styles applied to the root element if `nowrap={true}`. */
-    noWrap: string;
-    /** Styles applied to the root element if `gutterBottom={true}`. */
-    gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
-    paragraph: string;
-}
-export declare type TypographyClassKey = keyof TypographyClasses;
-export declare function getTypographyUtilityClass(slot: string): string;
-declare const typographyClasses: TypographyClasses;
-export default typographyClasses;
+export interface TypographyClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="body2"`. */
+    body2: string;
+    /** Styles applied to the root element if `variant="body1"`. */
+    body1: string;
+    /** Styles applied to the root element if `variant="caption"`. */
+    caption: string;
+    /** Styles applied to the root element if `variant="button"`. */
+    button: string;
+    /** Styles applied to the root element if `variant="h1"`. */
+    h1: string;
+    /** Styles applied to the root element if `variant="h2"`. */
+    h2: string;
+    /** Styles applied to the root element if `variant="h3"`. */
+    h3: string;
+    /** Styles applied to the root element if `variant="h4"`. */
+    h4: string;
+    /** Styles applied to the root element if `variant="h5"`. */
+    h5: string;
+    /** Styles applied to the root element if `variant="h6"`. */
+    h6: string;
+    /** Styles applied to the root element if `variant="subtitle1"`. */
+    subtitle1: string;
+    /** Styles applied to the root element if `variant="subtitle2"`. */
+    subtitle2: string;
+    /** Styles applied to the root element if `variant="overline"`. */
+    overline: string;
+    /** Styles applied to the root element if `variant="inherit"`. */
+    inherit: string;
+    /** Styles applied to the root element if `align="left"`. */
+    alignLeft: string;
+    /** Styles applied to the root element if `align="center"`. */
+    alignCenter: string;
+    /** Styles applied to the root element if `align="right"`. */
+    alignRight: string;
+    /** Styles applied to the root element if `align="justify"`. */
+    alignJustify: string;
+    /** Styles applied to the root element if `nowrap={true}`. */
+    noWrap: string;
+    /** Styles applied to the root element if `gutterBottom={true}`. */
+    gutterBottom: string;
+    /** Styles applied to the root element if `paragraph={true}`. */
+    paragraph: string;
+}
+export declare type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;

package/Unstable_TrapFocus/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from '@mui/base/Unstable_TrapFocus';
-export * from '@mui/base/Unstable_TrapFocus';
+export { default } from '@mui/base/TrapFocus';
+export * from '@mui/base/TrapFocus';

package/Unstable_TrapFocus/index.js

@@ -1 +1 @@
-export { default } from '@mui/base/Unstable_TrapFocus';
+export { default } from '@mui/base/TrapFocus';

package/Zoom/Zoom.d.ts

@@ -35,16 +35,16 @@ export interface ZoomProps extends TransitionProps {
 
 /**
  * The Zoom transition can be used for the floating variant of the
- * [Button](https://mui.com/components/buttons/#floating-action-buttons) component.
+ * [Button](https://mui.com/material-ui/react-button/#floating-action-buttons) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Transitions](https://mui.com/components/transitions/)
+ * - [Transitions](https://mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Zoom API](https://mui.com/api/zoom/)
+ * - [Zoom API](https://mui.com/material-ui/api/zoom/)
  * - inherits [Transition API](http://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Zoom(props: ZoomProps): JSX.Element;

package/Zoom/Zoom.js

@@ -19,7 +19,7 @@ const styles = {
 };
 /**
  * The Zoom transition can be used for the floating variant of the
- * [Button](/components/buttons/#floating-action-buttons) component.
+ * [Button](/material-ui/react-button/#floating-action-buttons) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 

package/className/index.d.ts

@@ -1,8 +1,8 @@
-/**
- * Caution! this module must not include unstyled components import from `@mui/base`, otherwise, it will break the ClassNameGenerator.
- * ❌ import { ... } from '@mui/base';
- * ✅ import { ... } from '@mui/base/utils'; // must be specific base module
- *
- * Issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401
- */
-export { unstable_ClassNameGenerator } from '@mui/base/className';
+/**
+ * Caution! this module must not include unstyled components import from `@mui/base`, otherwise, it will break the ClassNameGenerator.
+ * ❌ import { ... } from '@mui/base';
+ * ✅ import { ... } from '@mui/base/utils'; // must be specific base module
+ *
+ * Issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401
+ */
+export { unstable_ClassNameGenerator } from '@mui/base/className';

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.2
+/** @license MUI v5.6.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Accordion/Accordion.js

@@ -273,7 +273,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
 
   /**
    * The component used for the transition.
-   * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
    */
   TransitionComponent: PropTypes.elementType,

package/legacy/Alert/Alert.js

@@ -215,13 +215,15 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   /**
    * Override the default label for the *close popup* icon button.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Close'
    */
   closeText: PropTypes.string,
 
   /**
-   * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
+   * The color of the component. Unless provided, the value is taken from the `severity` prop.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/legacy/AppBar/AppBar.js

@@ -139,7 +139,9 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Autocomplete/Autocomplete.js

@@ -682,7 +682,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
 
   /**
-   * Props applied to the [`Chip`](/api/chip/) element.
+   * Props applied to the [`Chip`](/material-ui/api/chip/) element.
    */
   ChipProps: PropTypes.object,
 
@@ -720,7 +720,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Override the default text for the *clear* icon button.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Clear'
    */
   clearText: PropTypes.string,
@@ -728,7 +728,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Override the default text for the *close popup* icon button.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Close'
    */
   closeText: PropTypes.string,
@@ -791,7 +791,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   disablePortal: PropTypes.bool,
 
   /**
-   * A filter function that determines the options that are eligible.
+   * A function that determines the filtered options to be rendered on search.
    *
    * @param {T[]} options The options to render.
    * @param {object} state The state of the component.
@@ -922,7 +922,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Text to display when in a loading state.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Loading…'
    */
   loadingText: PropTypes.node,
@@ -936,7 +936,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Text to display when there are no options.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'No options'
    */
   noOptionsText: PropTypes.node,
@@ -1000,7 +1000,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * Override the default text for the *open popup* icon button.
    *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @default 'Open'
    */
   openText: PropTypes.string,

package/legacy/Backdrop/Backdrop.js

@@ -2,17 +2,21 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { isHostComponent } from '@mui/base';
-import BackdropUnstyled, { backdropUnstyledClasses } from '@mui/base/BackdropUnstyled';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Fade from '../Fade';
+import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var backdropClasses = backdropUnstyledClasses;
 
-var extendUtilityClasses = function extendUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  return classes;
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+      invisible = ownerState.invisible;
+  var slots = {
+    root: ['root', invisible && 'invisible']
+  };
+  return composeClasses(slots, getBackdropUtilityClass, classes);
 };
 
 var BackdropRoot = styled('div', {
@@ -40,7 +44,7 @@ var BackdropRoot = styled('div', {
   });
 });
 var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _componentsProps$root;
+  var _components$Root, _componentsProps$root;
 
   var props = useThemeProps({
     props: inProps,
@@ -48,6 +52,8 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
 
   var children = props.children,
+      _props$component = props.component,
+      component = _props$component === void 0 ? 'div' : _props$component,
       _props$components = props.components,
       components = _props$components === void 0 ? {} : _props$components,
       _props$componentsProp = props.componentsProps,
@@ -59,28 +65,23 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       transitionDuration = props.transitionDuration,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
-      other = _objectWithoutProperties(props, ["children", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);
+      other = _objectWithoutProperties(props, ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);
 
   var ownerState = _extends({}, props, {
+    component: component,
     invisible: invisible
   });
 
-  var classes = extendUtilityClasses(ownerState);
+  var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/_jsx(BackdropUnstyled, {
-      className: className,
-      invisible: invisible,
-      components: _extends({
-        Root: BackdropRoot
-      }, components),
-      componentsProps: {
-        root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
-          ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-        })
-      },
+    children: /*#__PURE__*/_jsx(BackdropRoot, {
+      "aria-hidden": true,
+      as: (_components$Root = components.Root) != null ? _components$Root : component,
+      className: clsx(classes.root, className),
+      ownerState: _extends({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
       classes: classes,
       ref: ref,
       children: children
@@ -110,6 +111,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * The components used for each slot inside the Backdrop.
    * Either a string to use a HTML element or a component.

package/legacy/Backdrop/backdropClasses.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getBackdropUtilityClass(slot) {
+  return generateUtilityClass('MuiBackdrop', slot);
+}
+var backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+export default backdropClasses;

package/legacy/Backdrop/index.js

@@ -1,2 +1,3 @@
 export { default } from './Backdrop';
-export * from './Backdrop';
+export { default as backdropClasses } from './backdropClasses';
+export * from './backdropClasses';

package/legacy/Badge/Badge.js

@@ -5,27 +5,28 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
-import { generateUtilityClasses } from '@mui/base';
-import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/base/BadgeUnstyled';
+import BadgeUnstyled from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
+import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
-'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
 var RADIUS_STANDARD = 10;
 var RADIUS_DOT = 4;
 
 var extendUtilityClasses = function extendUtilityClasses(ownerState) {
   var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
+      invisible = ownerState.invisible,
       overlap = ownerState.overlap,
+      variant = ownerState.variant,
       _ownerState$classes = ownerState.classes,
       classes = _ownerState$classes === void 0 ? {} : _ownerState$classes;
-  return _extends({}, classes, {
-    badge: clsx(classes.badge, getBadgeUtilityClass("anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))), getBadgeUtilityClass("overlap".concat(capitalize(overlap))), color !== 'default' && [getBadgeUtilityClass("color".concat(capitalize(color))), classes["color".concat(capitalize(color))]])
-  });
+  return {
+    root: clsx(classes.root, 'root'),
+    badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), "anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)), getBadgeUtilityClass("anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))), getBadgeUtilityClass("overlap".concat(capitalize(overlap))), color !== 'default' && [getBadgeUtilityClass("color".concat(capitalize(color))), classes["color".concat(capitalize(color))]], invisible && getBadgeUtilityClass('invisible'))
+  };
 };
 
 var BadgeRoot = styled('span', {
@@ -146,7 +147,7 @@ var BadgeBadge = styled('span', {
   });
 });
 var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
-  var _componentsProps$root, _componentsProps$badg;
+  var _componentsProps$root, _componentsProps$root2, _componentsProps$badg, _componentsProps$badg2;
 
   var props = useThemeProps({
     props: inProps,
@@ -158,6 +159,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     vertical: 'top',
     horizontal: 'right'
   } : _props$anchorOrigin,
+      className = props.className,
       _props$component = props.component,
       component = _props$component === void 0 ? 'span' : _props$component,
       _props$components = props.components,
@@ -170,17 +172,19 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       colorProp = _props$color === void 0 ? 'default' : _props$color,
       _props$invisible = props.invisible,
       invisibleProp = _props$invisible === void 0 ? false : _props$invisible,
+      max = props.max,
       badgeContentProp = props.badgeContent,
       _props$showZero = props.showZero,
       showZero = _props$showZero === void 0 ? false : _props$showZero,
       _props$variant = props.variant,
       variantProp = _props$variant === void 0 ? 'standard' : _props$variant,
-      other = _objectWithoutProperties(props, ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"]);
+      other = _objectWithoutProperties(props, ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"]);
 
   var prevProps = usePreviousProps({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
-    overlap: overlapProp
+    overlap: overlapProp,
+    variant: variantProp
   });
   var invisible = invisibleProp;
 
@@ -194,43 +198,57 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       _ref10$overlap = _ref10.overlap,
       overlap = _ref10$overlap === void 0 ? overlapProp : _ref10$overlap,
       _ref10$anchorOrigin = _ref10.anchorOrigin,
-      anchorOrigin = _ref10$anchorOrigin === void 0 ? anchorOriginProp : _ref10$anchorOrigin;
+      anchorOrigin = _ref10$anchorOrigin === void 0 ? anchorOriginProp : _ref10$anchorOrigin,
+      _ref10$variant = _ref10.variant,
+      variant = _ref10$variant === void 0 ? variantProp : _ref10$variant;
 
   var ownerState = _extends({}, props, {
     anchorOrigin: anchorOrigin,
     invisible: invisible,
     color: color,
-    overlap: overlap
+    overlap: overlap,
+    variant: variant
   });
 
   var classes = extendUtilityClasses(ownerState);
+  var displayValue;
+
+  if (variant !== 'dot') {
+    displayValue = badgeContentProp && Number(badgeContentProp) > max ? "".concat(max, "+") : badgeContentProp;
+  }
+
   return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
-    anchorOrigin: anchorOrigin,
     invisible: invisibleProp,
-    badgeContent: badgeContentProp,
+    badgeContent: displayValue,
     showZero: showZero,
-    variant: variantProp
+    max: max
   }, other, {
     components: _extends({
       Root: BadgeRoot,
       Badge: BadgeBadge
     }, components),
+    className: clsx(className, classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className),
     componentsProps: {
       root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
         as: component,
-        ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
+        ownerState: _extends({}, (_componentsProps$root2 = componentsProps.root) == null ? void 0 : _componentsProps$root2.ownerState, {
+          anchorOrigin: anchorOrigin,
           color: color,
-          overlap: overlap
+          overlap: overlap,
+          variant: variant
         })
       }),
-      badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
-        ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
+      badge: _extends({}, componentsProps.badge, {
+        className: clsx(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
+      }, shouldSpreadAdditionalProps(components.Badge) && {
+        ownerState: _extends({}, (_componentsProps$badg2 = componentsProps.badge) == null ? void 0 : _componentsProps$badg2.ownerState, {
+          anchorOrigin: anchorOrigin,
           color: color,
-          overlap: overlap
+          overlap: overlap,
+          variant: variant
         })
       })
     },
-    classes: classes,
     ref: ref
   }));
 });
@@ -270,7 +288,14 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/legacy/Badge/badgeClasses.js

@@ -0,0 +1,8 @@
+import generateUtilityClasses from '@mui/base/generateUtilityClasses';
+import generateUtilityClass from '@mui/base/generateUtilityClass';
+export function getBadgeUtilityClass(slot) {
+  return generateUtilityClass('MuiBadge', slot);
+}
+var badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
+'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
+export default badgeClasses;

package/legacy/Badge/index.js

@@ -1,2 +1,3 @@
 export { default } from './Badge';
-export * from './Badge';
+export { default as badgeClasses } from './badgeClasses';
+export * from './badgeClasses';