@mui/material 5.5.1 → 5.6.0

package/node/Button/Button.js

@@ -89,106 +89,111 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
 })(({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, theme.typography.button, {
-  minWidth: 64,
-  padding: '6px 16px',
-  borderRadius: theme.shape.borderRadius,
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
-    duration: theme.transitions.duration.short
-  }),
-  '&:hover': (0, _extends2.default)({
-    textDecoration: 'none',
-    backgroundColor: (0, _system.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
+}) => {
+  var _theme$palette$getCon, _theme$palette;
+
+  return (0, _extends2.default)({}, theme.typography.button, {
+    minWidth: 64,
+    padding: '6px 16px',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+      duration: theme.transitions.duration.short
+    }),
+    '&:hover': (0, _extends2.default)({
+      textDecoration: 'none',
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.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: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.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 ${(theme.vars || theme).palette[ownerState.color].main}`,
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.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.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.vars || theme).shadows[2],
+        backgroundColor: (theme.vars || theme).palette.grey[300]
+      }
+    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      }
+    }),
+    '&:active': (0, _extends2.default)({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[8]
+    }),
+    [`&.${_buttonClasses.default.focusVisible}`]: (0, _extends2.default)({}, ownerState.variant === 'contained' && {
+      boxShadow: (theme.vars || theme).shadows[6]
+    }),
+    [`&.${_buttonClasses.default.disabled}`]: (0, _extends2.default)({
+      color: (theme.vars || theme).palette.action.disabled
+    }, ownerState.variant === 'outlined' && {
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+    }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
+      border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }, ownerState.variant === 'contained' && {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    })
+  }, ownerState.variant === 'text' && {
+    padding: '6px 8px'
   }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    backgroundColor: (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
+    color: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.variant === 'outlined' && {
+    padding: '5px 15px',
+    border: '1px solid currentColor'
   }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    border: `1px solid ${theme.palette[ownerState.color].main}`,
-    backgroundColor: (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${(0, _system.alpha)(theme.palette[ownerState.color].main, 0.5)}`
   }, ownerState.variant === 'contained' && {
-    backgroundColor: theme.palette.grey.A100,
-    boxShadow: theme.shadows[4],
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      boxShadow: theme.shadows[2],
-      backgroundColor: theme.palette.grey[300]
-    }
+    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' && {
-    backgroundColor: theme.palette[ownerState.color].dark,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: theme.palette[ownerState.color].main
-    }
-  }),
-  '&:active': (0, _extends2.default)({}, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[8]
-  }),
-  [`&.${_buttonClasses.default.focusVisible}`]: (0, _extends2.default)({}, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[6]
-  }),
-  [`&.${_buttonClasses.default.disabled}`]: (0, _extends2.default)({
-    color: theme.palette.action.disabled
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${theme.palette.action.disabledBackground}`
-  }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-    border: `1px solid ${theme.palette.action.disabled}`
-  }, ownerState.variant === 'contained' && {
-    color: theme.palette.action.disabled,
-    boxShadow: theme.shadows[0],
-    backgroundColor: theme.palette.action.disabledBackground
-  })
-}, ownerState.variant === 'text' && {
-  padding: '6px 8px'
-}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main
-}, ownerState.variant === 'outlined' && {
-  padding: '5px 15px',
-  border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
-}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main,
-  border: `1px solid ${(0, _system.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]
-}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].contrastText,
-  backgroundColor: theme.palette[ownerState.color].main
-}, ownerState.color === 'inherit' && {
-  color: 'inherit',
-  borderColor: 'currentColor'
-}, ownerState.size === 'small' && ownerState.variant === 'text' && {
-  padding: '4px 5px',
-  fontSize: theme.typography.pxToRem(13)
-}, ownerState.size === 'large' && ownerState.variant === 'text' && {
-  padding: '8px 11px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-  padding: '3px 9px',
-  fontSize: theme.typography.pxToRem(13)
-}, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
-  padding: '7px 21px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-  padding: '4px 10px',
-  fontSize: theme.typography.pxToRem(13)
-}, ownerState.size === 'large' && ownerState.variant === 'contained' && {
-  padding: '8px 22px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.fullWidth && {
-  width: '100%'
-}), ({
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+  }, ownerState.color === 'inherit' && {
+    color: 'inherit',
+    borderColor: 'currentColor'
+  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
+    padding: '4px 5px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
+    padding: '8px 11px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+    padding: '3px 9px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
+    padding: '7px 21px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
+    padding: '4px 10px',
+    fontSize: theme.typography.pxToRem(13)
+  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
+    padding: '8px 22px',
+    fontSize: theme.typography.pxToRem(15)
+  }, ownerState.fullWidth && {
+    width: '100%'
+  });
+}, ({
   ownerState
 }) => ownerState.disableElevation && {
   boxShadow: 'none',
@@ -326,7 +331,9 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   className: _propTypes.default.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.default

package/node/ButtonBase/ButtonBase.js

@@ -170,11 +170,16 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       buttonRef.current.focus();
     }
   }), []);
+  const [mountedState, setMountedState] = React.useState(false);
+  React.useEffect(() => {
+    setMountedState(true);
+  }, []);
+  const enableTouchRipple = mountedState && !disableRipple && !disabled;
   React.useEffect(() => {
-    if (focusVisible && focusRipple && !disableRipple) {
+    if (focusVisible && focusRipple && !disableRipple && mountedState) {
       rippleRef.current.pulsate();
     }
-  }, [disableRipple, focusRipple, focusVisible]);
+  }, [disableRipple, focusRipple, focusVisible, mountedState]);
 
   function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
     return (0, _useEventCallback.default)(event => {
@@ -318,11 +323,6 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
 
   const handleOwnRef = (0, _useForkRef.default)(focusVisibleRef, buttonRef);
   const handleRef = (0, _useForkRef.default)(ref, handleOwnRef);
-  const [mountedState, setMountedState] = React.useState(false);
-  React.useEffect(() => {
-    setMountedState(true);
-  }, []);
-  const enableTouchRipple = mountedState && !disableRipple && !disabled;
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/node/ButtonGroup/ButtonGroup.js

@@ -228,7 +228,9 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   className: _propTypes.default.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.default

package/node/Checkbox/Checkbox.js

@@ -159,7 +159,9 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
   classes: _propTypes.default.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.default

package/node/Chip/Chip.js

@@ -474,7 +474,9 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   clickable: _propTypes.default.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.default

package/node/CircularProgress/CircularProgress.js

@@ -229,7 +229,9 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes
   className: _propTypes.default.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.default

package/node/Fab/Fab.js

@@ -198,7 +198,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
   className: _propTypes.default.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.default.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),

package/node/FilledInput/FilledInput.js

@@ -258,7 +258,9 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   classes: _propTypes.default.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.default

package/node/FormControl/FormControl.js

@@ -271,7 +271,9 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes
   className: _propTypes.default.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.default

package/node/FormControlLabel/FormControlLabel.js

@@ -119,7 +119,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     control,
     disabled: disabledProp,
     disableTypography,
-    label,
+    label: labelProp,
     labelPlacement = 'end'
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -149,22 +149,27 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
   });
   const ownerState = (0, _extends2.default)({}, props, {
     disabled,
-    label,
     labelPlacement,
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
+  let label = labelProp;
+
+  if (label != null && label.type !== _Typography.default && !disableTypography) {
+    label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({
+      component: "span",
+      className: classes.label
+    }, componentsProps.typography, {
+      children: label
+    }));
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FormControlLabelRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label.type === _Typography.default || disableTypography ? label : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({
-      component: "span",
-      className: classes.label
-    }, componentsProps.typography, {
-      children: label
-    }))]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
@@ -221,7 +226,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   /**
    * A text or an element to be used in an enclosing label element.
    */
-  label: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.number, _propTypes.default.string]).isRequired,
+  label: _propTypes.default.node,
 
   /**
    * The position of the label.

package/node/FormLabel/FormLabel.js

@@ -160,7 +160,9 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes
   className: _propTypes.default.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.default
   /* @typescript-to-proptypes-ignore */

package/node/Grow/Grow.js

@@ -47,6 +47,12 @@ const styles = {
     transform: 'none'
   }
 };
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
+ * Remove this workaround once the Safari bug is fixed.
+ */
+
+const isSafari154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /version\/15\.[4-9]/i.test(navigator.userAgent);
 /**
  * The Grow transition is used by the [Tooltip](/components/tooltips/) and
  * [Popover](/components/popover/) components.
@@ -119,7 +125,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
+      duration: isSafari154 ? duration : duration * 0.666,
       delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -155,11 +161,11 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay: delay || duration * 0.333,
+      duration: isSafari154 ? duration : duration * 0.666,
+      delay: isSafari154 ? 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/node/Icon/Icon.js

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

package/node/IconButton/IconButton.js

@@ -189,7 +189,9 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
   className: _propTypes.default.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.default

package/node/Input/Input.js

@@ -194,7 +194,9 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   classes: _propTypes.default.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.default

package/node/InputBase/InputBase.js

@@ -563,7 +563,9 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   className: _propTypes.default.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).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: _propTypes.default

package/node/InputLabel/InputLabel.js

@@ -185,7 +185,9 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
   classes: _propTypes.default.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).
    */
   color: _propTypes.default
   /* @typescript-to-proptypes-ignore */

package/node/LinearProgress/LinearProgress.js

@@ -351,7 +351,9 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes
   className: _propTypes.default.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.default

package/node/Link/Link.js

@@ -27,6 +27,8 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
@@ -39,7 +41,7 @@ var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"];
+const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
 
 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); }
 
@@ -127,6 +129,7 @@ const LinkRoot = (0, _styled.default)(_Typography.default, {
   });
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
+  const theme = (0, _useTheme.default)();
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiLink'
@@ -139,7 +142,8 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     onFocus,
     TypographyClasses,
     underline = 'always',
-    variant = 'inherit'
+    variant = 'inherit',
+    sx
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -176,7 +180,9 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   const ownerState = (0, _extends2.default)({}, props, {
-    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 sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color) || color,
     component,
     focusVisible,
     underline,
@@ -186,13 +192,15 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     classes: TypographyClasses,
-    color: color,
     component: component,
     onBlur: handleBlur,
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant
+    variant: variant,
+    sx: [{
+      color: colorTransformations[color] || color
+    }, ...(Array.isArray(sx) ? sx : [sx])]
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes

package/node/ListItemButton/ListItemButton.js

@@ -84,6 +84,7 @@ const ListItemButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   alignItems: 'center',
   position: 'relative',
   textDecoration: 'none',
+  minWidth: 0,
   boxSizing: 'border-box',
   textAlign: 'left',
   paddingTop: 8,

package/node/OutlinedInput/OutlinedInput.js

@@ -202,7 +202,9 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   classes: _propTypes.default.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.default

package/node/Pagination/Pagination.js

@@ -177,6 +177,8 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes
 
   /**
    * The active color.
+   * 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 'standard'
    */
   color: _propTypes.default

package/node/PaginationItem/PaginationItem.js

@@ -327,6 +327,8 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
 
   /**
    * The active color.
+   * 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 'standard'
    */
   color: _propTypes.default