@mui/material 5.5.1 → 5.6.0

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/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';

package/legacy/Button/Button.js

@@ -60,84 +60,85 @@ var ButtonRoot = styled(ButtonBase, {
     return [styles.root, styles[ownerState.variant], styles["".concat(ownerState.variant).concat(capitalize(ownerState.color))], styles["size".concat(capitalize(ownerState.size))], styles["".concat(ownerState.variant, "Size").concat(capitalize(ownerState.size))], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
   }
 })(function (_ref) {
-  var _extends2;
+  var _extends2, _theme$palette$getCon, _theme$palette;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({}, theme.typography.button, (_extends2 = {
     minWidth: 64,
     padding: '6px 16px',
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short
     }),
     '&:hover': _extends({
       textDecoration: 'none',
-      backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      border: "1px solid ".concat(theme.palette[ownerState.color].main),
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      border: "1px solid ".concat((theme.vars || theme).palette[ownerState.color].main),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }, ownerState.variant === 'contained' && {
-      backgroundColor: theme.palette.grey.A100,
-      boxShadow: theme.shadows[4],
+      backgroundColor: (theme.vars || theme).palette.grey.A100,
+      boxShadow: (theme.vars || theme).shadows[4],
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        boxShadow: theme.shadows[2],
-        backgroundColor: theme.palette.grey[300]
+        boxShadow: (theme.vars || theme).shadows[2],
+        backgroundColor: (theme.vars || theme).palette.grey[300]
       }
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      backgroundColor: theme.palette[ownerState.color].dark,
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette[ownerState.color].main
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }),
     '&:active': _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: theme.shadows[8]
+      boxShadow: (theme.vars || theme).shadows[8]
     })
   }, _defineProperty(_extends2, "&.".concat(buttonClasses.focusVisible), _extends({}, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[6]
+    boxShadow: (theme.vars || theme).shadows[6]
   })), _defineProperty(_extends2, "&.".concat(buttonClasses.disabled), _extends({
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }, ownerState.variant === 'outlined' && {
-    border: "1px solid ".concat(theme.palette.action.disabledBackground)
+    border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
   }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-    border: "1px solid ".concat(theme.palette.action.disabled)
+    border: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
   }, ownerState.variant === 'contained' && {
-    color: theme.palette.action.disabled,
-    boxShadow: theme.shadows[0],
-    backgroundColor: theme.palette.action.disabledBackground
+    color: (theme.vars || theme).palette.action.disabled,
+    boxShadow: (theme.vars || theme).shadows[0],
+    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
   })), _extends2), ownerState.variant === 'text' && {
     padding: '6px 8px'
   }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }, ownerState.variant === 'outlined' && {
     padding: '5px 15px',
-    border: "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+    border: '1px solid currentColor'
   }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main,
-    border: "1px solid ".concat(alpha(theme.palette[ownerState.color].main, 0.5))
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: theme.vars ? "1px solid rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : "1px solid ".concat(alpha(theme.palette[ownerState.color].main, 0.5))
   }, ownerState.variant === 'contained' && {
-    color: theme.palette.getContrastText(theme.palette.grey[300]),
-    backgroundColor: theme.palette.grey[300],
-    boxShadow: theme.shadows[2]
+    color: theme.vars ? // this is safe because grey does not change between default light/dark mode
+    theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+    backgroundColor: (theme.vars || theme).palette.grey[300],
+    boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].contrastText,
-    backgroundColor: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
   }, ownerState.color === 'inherit' && {
     color: 'inherit',
     borderColor: 'currentColor'
@@ -310,7 +311,9 @@ process.env.NODE_ENV !== "production" ? Button.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/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/ButtonBase/ButtonBase.js

@@ -157,11 +157,20 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref)
       }
     };
   }, []);
+
+  var _React$useState2 = React.useState(false),
+      mountedState = _React$useState2[0],
+      setMountedState = _React$useState2[1];
+
+  React.useEffect(function () {
+    setMountedState(true);
+  }, []);
+  var enableTouchRipple = mountedState && !disableRipple && !disabled;
   React.useEffect(function () {
-    if (focusVisible && focusRipple && !disableRipple) {
+    if (focusVisible && focusRipple && !disableRipple && mountedState) {
       rippleRef.current.pulsate();
     }
-  }, [disableRipple, focusRipple, focusVisible]);
+  }, [disableRipple, focusRipple, focusVisible, mountedState]);
 
   function useRippleHandler(rippleAction, eventCallback) {
     var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;
@@ -307,15 +316,6 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref)
   var handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
   var handleRef = useForkRef(ref, handleOwnRef);
 
-  var _React$useState2 = React.useState(false),
-      mountedState = _React$useState2[0],
-      setMountedState = _React$useState2[1];
-
-  React.useEffect(function () {
-    setMountedState(true);
-  }, []);
-  var enableTouchRipple = mountedState && !disableRipple && !disabled;
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(function () {

package/legacy/ButtonGroup/ButtonGroup.js

@@ -198,7 +198,9 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.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/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Checkbox/Checkbox.js

@@ -140,7 +140,9 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
   classes: PropTypes.object,
 
   /**
-   * 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/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Chip/Chip.js

@@ -404,7 +404,9 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   clickable: PropTypes.bool,
 
   /**
-   * 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/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/legacy/CircularProgress/CircularProgress.js

@@ -185,7 +185,9 @@ process.env.NODE_ENV !== "production" ? CircularProgress.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/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Fab/Fab.js

@@ -178,7 +178,9 @@ process.env.NODE_ENV !== "production" ? Fab.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/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),

package/legacy/FilledInput/FilledInput.js

@@ -234,7 +234,9 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   classes: PropTypes.object,
 
   /**
-   * 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/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes

package/legacy/FormControl/FormControl.js

@@ -261,7 +261,9 @@ process.env.NODE_ENV !== "production" ? FormControl.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/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/FormControlLabel/FormControlLabel.js

@@ -83,7 +83,7 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
       disabledProp = props.disabled,
       disableTypography = props.disableTypography,
       inputRef = props.inputRef,
-      label = props.label,
+      labelProp = props.label,
       _props$labelPlacement = props.labelPlacement,
       labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,
       name = props.name,
@@ -118,23 +118,28 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
 
   var ownerState = _extends({}, props, {
     disabled: disabled,
-    label: label,
     labelPlacement: labelPlacement,
     error: fcs.error
   });
 
   var classes = useUtilityClasses(ownerState);
+  var label = labelProp;
+
+  if (label != null && label.type !== Typography && !disableTypography) {
+    label = /*#__PURE__*/_jsx(Typography, _extends({
+      component: "span",
+      className: classes.label
+    }, componentsProps.typography, {
+      children: label
+    }));
+  }
+
   return /*#__PURE__*/_jsxs(FormControlLabelRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label.type === Typography || disableTypography ? label : /*#__PURE__*/_jsx(Typography, _extends({
-      component: "span",
-      className: classes.label
-    }, componentsProps.typography, {
-      children: label
-    }))]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
@@ -191,7 +196,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   /**
    * A text or an element to be used in an enclosing label element.
    */
-  label: PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string]).isRequired,
+  label: PropTypes.node,
 
   /**
    * The position of the label.

package/legacy/FormLabel/FormLabel.js

@@ -140,7 +140,9 @@ process.env.NODE_ENV !== "production" ? FormLabel.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/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */