@mui/material 5.5.2 → 5.6.1

package/legacy/Breadcrumbs/Breadcrumbs.js

@@ -207,7 +207,7 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes
   /**
    * Override the default label for the expand 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 'Show path'
    */
   expandText: PropTypes.string,

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/material-ui/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/material-ui/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/material-ui/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/material-ui/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/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Collapse/Collapse.js

@@ -90,7 +90,7 @@ var CollapseWrapperInner = styled('div', {
 });
 /**
  * The Collapse transition is used by the
- * [Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component.
+ * [Vertical Stepper](/material-ui/react-stepper/#vertical-stepper) StepContent component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 

package/legacy/Dialog/Dialog.js

@@ -374,7 +374,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
   PaperComponent: PropTypes.elementType,
 
   /**
-   * Props applied to the [`Paper`](/api/paper/) element.
+   * Props applied to the [`Paper`](/material-ui/api/paper/) element.
    * @default {}
    */
   PaperProps: PropTypes.object,
@@ -392,7 +392,7 @@ process.env.NODE_ENV !== "production" ? Dialog.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 Fade
    */
   TransitionComponent: PropTypes.elementType,

package/legacy/Drawer/Drawer.js

@@ -118,7 +118,7 @@ export function getAnchor(theme, anchor) {
   return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
 }
 /**
- * The props of the [Modal](/api/modal/) component are available
+ * The props of the [Modal](/material-ui/api/modal/) component are available
  * when `variant="temporary"` is set.
  */
 
@@ -279,7 +279,7 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   hideBackdrop: PropTypes.bool,
 
   /**
-   * Props applied to the [`Modal`](/api/modal/) element.
+   * Props applied to the [`Modal`](/material-ui/api/modal/) element.
    * @default {}
    */
   ModalProps: PropTypes.object,
@@ -298,13 +298,13 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   open: PropTypes.bool,
 
   /**
-   * Props applied to the [`Paper`](/api/paper/) element.
+   * Props applied to the [`Paper`](/material-ui/api/paper/) element.
    * @default {}
    */
   PaperProps: PropTypes.object,
 
   /**
-   * Props applied to the [`Slide`](/api/slide/) element.
+   * Props applied to the [`Slide`](/material-ui/api/slide/) element.
    */
   SlideProps: PropTypes.object,
 

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/material-ui/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),

package/legacy/Fade/Fade.js

@@ -17,7 +17,7 @@ var styles = {
   }
 };
 /**
- * The Fade transition is used by the [Modal](/components/modal/) component.
+ * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 

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/material-ui/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -342,7 +344,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/legacy/FormControl/FormControl.js

@@ -63,7 +63,7 @@ var FormControlRoot = styled('div', {
  *  - Input
  *  - InputLabel
  *
- * You can find one composition example below and more going to [the demos](/components/text-fields/#components).
+ * You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
  *
  * ```jsx
  * <FormControl>
@@ -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/material-ui/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/material-ui/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/legacy/Grow/Grow.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { elementAcceptingRef } from '@mui/utils';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
-import { reflow, getTransitionProps } from '../transitions/utils';
+import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -24,8 +24,14 @@ var styles = {
   }
 };
 /**
- * The Grow transition is used by the [Tooltip](/components/tooltips/) and
- * [Popover](/components/popover/) components.
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
+ * Remove this workaround once the WebKit bug fix is released.
+ */
+
+var isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+/**
+ * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
+ * [Popover](/material-ui/react-popover/) components.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
@@ -98,7 +104,7 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration: duration,
       delay: delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
+      duration: isWebKit154 ? duration : duration * 0.666,
       delay: delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -134,11 +140,11 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration: duration,
       delay: delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay: delay || duration * 0.333,
+      duration: isWebKit154 ? duration : duration * 0.666,
+      delay: isWebKit154 ? delay : delay || duration * 0.333,
       easing: transitionTimingFunction
     })].join(',');
-    node.style.opacity = '0';
+    node.style.opacity = 0;
     node.style.transform = getScale(0.75);
 
     if (onExit) {

package/legacy/Icon/Icon.js

@@ -128,7 +128,9 @@ process.env.NODE_ENV !== "production" ? Icon.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 'inherit'
    */
   color: PropTypes

package/legacy/IconButton/IconButton.js

@@ -88,7 +88,7 @@ var IconButtonRoot = styled(ButtonBase, {
   }));
 });
 /**
- * Refer to the [Icons](/components/icons/) section of the documentation
+ * Refer to the [Icons](/material-ui/icons/) section of the documentation
  * regarding the available icon options.
  */
 
@@ -166,7 +166,9 @@ process.env.NODE_ENV !== "production" ? IconButton.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 'default'
    */
   color: PropTypes

package/legacy/Input/Input.js

@@ -169,7 +169,9 @@ process.env.NODE_ENV !== "production" ? Input.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/material-ui/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -269,7 +271,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/legacy/InputBase/InputBase.js

@@ -540,7 +540,9 @@ process.env.NODE_ENV !== "production" ? InputBase.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).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -642,7 +644,7 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
+   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/legacy/InputLabel/InputLabel.js

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

package/legacy/LinearProgress/LinearProgress.js

@@ -272,7 +272,9 @@ process.env.NODE_ENV !== "production" ? LinearProgress.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/Link/Link.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
@@ -9,6 +10,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
+import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
@@ -91,6 +93,7 @@ var LinkRoot = styled(Typography, {
   }));
 });
 var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
+  var theme = useTheme();
   var props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
@@ -108,7 +111,10 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
       underline = _props$underline === void 0 ? 'always' : _props$underline,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'inherit' : _props$variant,
-      other = _objectWithoutProperties(props, ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"]);
+      sx = props.sx,
+      other = _objectWithoutProperties(props, ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"]);
+
+  var sxColor = typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color;
 
   var _useIsFocusVisible = useIsFocusVisible(),
       isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
@@ -147,7 +153,9 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   var ownerState = _extends({}, props, {
-    color: color,
+    // It is too complex to support any types of `sx`.
+    // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
+    color: (typeof sxColor === 'function' ? sxColor(theme) : sxColor) || color,
     component: component,
     focusVisible: focusVisible,
     underline: underline,
@@ -156,15 +164,18 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
 
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(LinkRoot, _extends({
+    color: color,
     className: clsx(classes.root, className),
     classes: TypographyClasses,
-    color: color,
     component: component,
     onBlur: handleBlur,
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant
+    variant: variant,
+    sx: [].concat(_toConsumableArray(inProps.color ? [{
+      color: colorTransformations[color] || color
+    }] : []), _toConsumableArray(Array.isArray(sx) ? sx : [sx]))
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes
@@ -220,7 +231,7 @@ process.env.NODE_ENV !== "production" ? Link.propTypes
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
-   * `classes` prop applied to the [`Typography`](/api/typography/) element.
+   * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element.
    */
   TypographyClasses: PropTypes.object,