@mui/material 5.5.3 → 5.6.2

package/modern/Button/Button.js

@@ -65,79 +65,80 @@ const ButtonRoot = styled(ButtonBase, {
 }) => _extends({}, theme.typography.button, {
   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(${theme.vars.palette.text.primaryChannel} / ${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(${theme.vars.palette[ownerState.color].mainChannel} / ${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 ${theme.palette[ownerState.color].main}`,
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    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})` : 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]
   }),
   [`&.${buttonClasses.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[6]
+    boxShadow: (theme.vars || theme).shadows[6]
   }),
   [`&.${buttonClasses.disabled}`]: _extends({
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${theme.palette.action.disabledBackground}`
+    border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
   }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-    border: `1px solid ${theme.palette.action.disabled}`
+    border: `1px solid ${(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
   })
 }, 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 ${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 ${alpha(theme.palette[ownerState.color].main, 0.5)}`
+  color: (theme.vars || theme).palette[ownerState.color].main,
+  border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${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.getContrastText?.(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'
@@ -307,7 +308,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/ButtonGroup/ButtonGroup.js

@@ -207,7 +207,7 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Checkbox/Checkbox.js

@@ -138,7 +138,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Chip/Chip.js

@@ -452,7 +452,7 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/modern/CircularProgress/CircularProgress.js

@@ -207,7 +207,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Collapse/Collapse.js

@@ -87,7 +87,7 @@ const 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/modern/Dialog/Dialog.js

@@ -351,6 +351,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
 
@@ -374,7 +375,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 +393,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/modern/Drawer/Drawer.js

@@ -124,7 +124,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.
  */
 
@@ -280,7 +280,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,
@@ -299,13 +299,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/modern/Fab/Fab.js

@@ -178,7 +178,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
   /**
    * 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).
+   * [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/modern/Fade/Fade.js

@@ -18,7 +18,7 @@ const 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/modern/FilledInput/FilledInput.js

@@ -82,7 +82,9 @@ const FilledInputRoot = styled(InputBaseRoot, {
 
     },
     [`&.${filledInputClasses.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${filledInputClasses.error}:after`]: {
       borderBottomColor: theme.palette.error.main,
@@ -238,7 +240,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   /**
    * 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).
+   * [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
@@ -346,7 +348,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/modern/FormControl/FormControl.js

@@ -66,7 +66,7 @@ const 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>
@@ -249,7 +249,7 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/FormLabel/FormLabel.js

@@ -139,7 +139,7 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/Grow/Grow.js

@@ -25,14 +25,14 @@ const styles = {
   }
 };
 /**
- * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
- * Remove this workaround once the Safari bug is fixed.
+ * 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.
  */
 
-const isSafari154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /version\/15\.[4-9]/i.test(navigator.userAgent);
+const 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](/components/tooltips/) and
- * [Popover](/components/popover/) components.
+ * 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.
  */
 
@@ -103,7 +103,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: isSafari154 ? duration : duration * 0.666,
+      duration: isWebKit154 ? duration : duration * 0.666,
       delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -139,8 +139,8 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration,
       delay
     }), theme.transitions.create('transform', {
-      duration: isSafari154 ? duration : duration * 0.666,
-      delay: isSafari154 ? 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;

package/modern/Icon/Icon.js

@@ -132,7 +132,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'inherit'
    */
   color: PropTypes

package/modern/IconButton/IconButton.js

@@ -92,7 +92,7 @@ const 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.
  */
 
@@ -167,7 +167,7 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/modern/Input/Input.js

@@ -65,7 +65,9 @@ const InputRoot = styled(InputBaseRoot, {
 
     },
     [`&.${inputClasses.focused}:after`]: {
-      transform: 'scaleX(1)'
+      // translateX(0) is a workaround for Safari transform scale bug
+      // See https://github.com/mui/material-ui/issues/31766
+      transform: 'scaleX(1) translateX(0)'
     },
     [`&.${inputClasses.error}:after`]: {
       borderBottomColor: theme.palette.error.main,
@@ -173,7 +175,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   /**
    * 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).
+   * [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
@@ -273,7 +275,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/modern/InputBase/InputBase.js

@@ -533,7 +533,7 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   /**
    * 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).
+   * [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
@@ -635,7 +635,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/modern/InputLabel/InputLabel.js

@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/modern/LinearProgress/LinearProgress.js

@@ -330,7 +330,7 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/modern/Link/Link.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"];
+const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -9,6 +9,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';
@@ -97,6 +98,7 @@ const LinkRoot = styled(Typography, {
   });
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
+  const theme = useTheme();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
@@ -110,10 +112,12 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     onFocus,
     TypographyClasses,
     underline = 'always',
-    variant = 'inherit'
+    variant = 'inherit',
+    sx
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const sxColor = typeof sx === 'function' ? sx(theme).color : sx?.color;
   const {
     isFocusVisibleRef,
     onBlur: handleBlurVisible,
@@ -148,7 +152,9 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   const ownerState = _extends({}, 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 sxColor === 'function' ? sxColor(theme) : sxColor) || color,
     component,
     focusVisible,
     underline,
@@ -157,15 +163,18 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
 
   const 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: [...(inProps.color ? [{
+      color: colorTransformations[color] || color
+    }] : []), ...(Array.isArray(sx) ? sx : [sx])]
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes
@@ -221,7 +230,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,
 

package/modern/ListItem/ListItem.js

@@ -279,7 +279,7 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    * If `true`, the list item is focused during the first mount.
    * Focus will also be triggered if the value changes from false to true.
    * @default false
-   * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   autoFocus: PropTypes.bool,
 
@@ -287,7 +287,7 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    * If `true`, the list item is a button (using `ButtonBase`). Props intended
    * for `ButtonBase` can then be applied to `ListItem`.
    * @default false
-   * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   button: PropTypes.bool,
 
@@ -374,7 +374,7 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
   /**
    * If `true`, the component is disabled.
    * @default false
-   * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   disabled: PropTypes.bool,
 
@@ -409,7 +409,7 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
   /**
    * Use to apply selected styling.
    * @default false
-   * @deprecated checkout [ListItemButton](/api/list-item-button/) instead
+   * @deprecated checkout [ListItemButton](/material-ui/api/list-item-button/) instead
    */
   selected: PropTypes.bool,
 

package/modern/ListItemButton/ListItemButton.js

@@ -53,6 +53,7 @@ const ListItemButtonRoot = styled(ButtonBase, {
   alignItems: 'center',
   position: 'relative',
   textDecoration: 'none',
+  minWidth: 0,
   boxSizing: 'border-box',
   textAlign: 'left',
   paddingTop: 8,

package/modern/Menu/Menu.js

@@ -235,7 +235,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes
   disableAutoFocusItem: PropTypes.bool,
 
   /**
-   * Props applied to the [`MenuList`](/api/menu-list/) element.
+   * Props applied to the [`MenuList`](/material-ui/api/menu-list/) element.
    * @default {}
    */
   MenuListProps: PropTypes.object,
@@ -259,7 +259,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes
   PaperProps: PropTypes.object,
 
   /**
-   * `classes` prop applied to the [`Popover`](/api/popover/) element.
+   * `classes` prop applied to the [`Popover`](/material-ui/api/popover/) element.
    */
   PopoverClasses: PropTypes.object,
 

package/modern/MenuList/MenuList.js

@@ -90,7 +90,7 @@ function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable,
 }
 /**
  * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.
- * It's exposed to help customization of the [`Menu`](/api/menu/) component if you
+ * It's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you
  * use it separately you need to move focus into the component manually. Once
  * the focus is placed inside the component it is fully keyboard accessible.
  */

package/modern/Modal/Modal.js

@@ -50,12 +50,12 @@ const ModalBackdrop = styled(Backdrop, {
 /**
  * Modal is a lower-level construct that is leveraged by the following components:
  *
- * - [Dialog](/api/dialog/)
- * - [Drawer](/api/drawer/)
- * - [Menu](/api/menu/)
- * - [Popover](/api/popover/)
+ * - [Dialog](/material-ui/api/dialog/)
+ * - [Drawer](/material-ui/api/drawer/)
+ * - [Menu](/material-ui/api/menu/)
+ * - [Popover](/material-ui/api/popover/)
  *
- * If you are creating a modal dialog, you probably want to use the [Dialog](/api/dialog/) component
+ * If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/api/dialog/) component
  * rather than directly using Modal.
  *
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
@@ -144,7 +144,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   BackdropComponent: PropTypes.elementType,
 
   /**
-   * Props applied to the [`Backdrop`](/api/backdrop/) element.
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
    */
   BackdropProps: PropTypes.object,
 
@@ -253,6 +253,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Callback fired when the backdrop is clicked.
+   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,