@mui/material 6.0.0-alpha.4 → 6.0.0-alpha.6

package/node/InputBase/InputBase.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rootOverridesResolver = exports.inputOverridesResolver = exports.default = exports.InputBaseRoot = exports.InputBaseComponent = void 0;
+exports.rootOverridesResolver = exports.inputOverridesResolver = exports.default = exports.InputBaseRoot = exports.InputBaseInput = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
@@ -20,8 +20,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _FormControlContext = _interopRequireDefault(require("../FormControl/FormControlContext"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
@@ -32,6 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiInputBase');
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -69,13 +69,12 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _inputBaseClasses.getInputBaseUtilityClass, classes);
 };
-const InputBaseRoot = exports.InputBaseRoot = (0, _styled.default)('div', {
+const InputBaseRoot = exports.InputBaseRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiInputBase',
   slot: 'Root',
   overridesResolver: rootOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({}, theme.typography.body1, {
   color: (theme.vars || theme).palette.text.primary,
   lineHeight: '1.4375em',
@@ -89,21 +88,37 @@ const InputBaseRoot = exports.InputBaseRoot = (0, _styled.default)('div', {
   [`&.${_inputBaseClasses.default.disabled}`]: {
     color: (theme.vars || theme).palette.text.disabled,
     cursor: 'default'
-  }
-}, ownerState.multiline && (0, _extends2.default)({
-  padding: '4px 0 5px'
-}, ownerState.size === 'small' && {
-  paddingTop: 1
-}), ownerState.fullWidth && {
-  width: '100%'
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      padding: '4px 0 5px'
+    }
+  }, {
+    props: ({
+      ownerState,
+      size
+    }) => ownerState.multiline && size === 'small',
+    style: {
+      paddingTop: 1
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.fullWidth,
+    style: {
+      width: '100%'
+    }
+  }]
 }));
-const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('input', {
+const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input', {
   name: 'MuiInputBase',
   slot: 'Input',
   overridesResolver: inputOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const light = theme.palette.mode === 'light';
   const placeholder = (0, _extends2.default)({
@@ -125,7 +140,7 @@ const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('in
   } : {
     opacity: light ? 0.42 : 0.5
   };
-  return (0, _extends2.default)({
+  return {
     font: 'inherit',
     letterSpacing: 'inherit',
     color: 'currentColor',
@@ -187,18 +202,33 @@ const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('in
     '&:-webkit-autofill': {
       animationDuration: '5000s',
       animationName: 'mui-auto-fill'
-    }
-  }, ownerState.size === 'small' && {
-    paddingTop: 1
-  }, ownerState.multiline && {
-    height: 'auto',
-    resize: 'none',
-    padding: 0,
-    paddingTop: 0
-  }, ownerState.type === 'search' && {
-    // Improve type search style.
-    MozAppearance: 'textfield'
-  });
+    },
+    variants: [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        paddingTop: 1
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        height: 'auto',
+        resize: 'none',
+        padding: 0,
+        paddingTop: 0
+      }
+    }, {
+      props: {
+        type: 'search'
+      },
+      style: {
+        MozAppearance: 'textfield' // Improve type search style.
+      }
+    }]
+  };
 });
 const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
   styles: {
@@ -222,7 +252,7 @@ const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.defaul
  */
 const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
   var _slotProps$input;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiInputBase'
   });
@@ -439,7 +469,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const classes = useUtilityClasses(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
-  const Input = slots.input || components.Input || InputBaseComponent;
+  const Input = slots.input || components.Input || InputBaseInput;
   inputProps = (0, _extends2.default)({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, !(0, _utils.isHostComponent)(Root) && {

package/node/InputLabel/InputLabel.js

@@ -15,14 +15,15 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _FormLabel = _interopRequireWildcard(require("../FormLabel"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _inputLabelClasses = require("./inputLabelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["disableAnimation", "margin", "shrink", "variant", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiInputLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -40,8 +41,8 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _inputLabelClasses.getInputLabelUtilityClasses, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const InputLabelRoot = (0, _zeroStyled.styled)(_FormLabel.default, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiInputLabel',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -53,69 +54,130 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
     }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, ownerState.focused && styles.focused, styles[ownerState.variant]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'block',
   transformOrigin: 'top left',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: '100%'
-}, ownerState.formControl && {
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  // slight alteration to spec spacing to match visual spec result
-  transform: 'translate(0, 20px) scale(1)'
-}, ownerState.size === 'small' && {
-  // Compensation for the `Input.inputSizeSmall` style.
-  transform: 'translate(0, 17px) scale(1)'
-}, ownerState.shrink && {
-  transform: 'translate(0, -1.5px) scale(0.75)',
-  transformOrigin: 'top left',
-  maxWidth: '133%'
-}, !ownerState.disableAnimation && {
-  transition: theme.transitions.create(['color', 'transform', 'max-width'], {
-    duration: theme.transitions.duration.shorter,
-    easing: theme.transitions.easing.easeOut
-  })
-}, ownerState.variant === 'filled' && (0, _extends2.default)({
-  // Chrome's autofill feature gives the input field a yellow background.
-  // Since the input field is behind the label in the HTML tree,
-  // the input field is drawn last and hides the label with an opaque background color.
-  // zIndex: 1 will raise the label above opaque background-colors of input.
-  zIndex: 1,
-  pointerEvents: 'none',
-  transform: 'translate(12px, 16px) scale(1)',
-  maxWidth: 'calc(100% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(12px, 13px) scale(1)'
-}, ownerState.shrink && (0, _extends2.default)({
-  userSelect: 'none',
-  pointerEvents: 'auto',
-  transform: 'translate(12px, 7px) scale(0.75)',
-  maxWidth: 'calc(133% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(12px, 4px) scale(0.75)'
-})), ownerState.variant === 'outlined' && (0, _extends2.default)({
-  // see comment above on filled.zIndex
-  zIndex: 1,
-  pointerEvents: 'none',
-  transform: 'translate(14px, 16px) scale(1)',
-  maxWidth: 'calc(100% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(14px, 9px) scale(1)'
-}, ownerState.shrink && {
-  userSelect: 'none',
-  pointerEvents: 'auto',
-  // Theoretically, we should have (8+5)*2/0.75 = 34px
-  // but it feels a better when it bleeds a bit on the left, so 32px.
-  maxWidth: 'calc(133% - 32px)',
-  transform: 'translate(14px, -9px) scale(0.75)'
-})));
+  maxWidth: '100%',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.formControl,
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      // slight alteration to spec spacing to match visual spec result
+      transform: 'translate(0, 20px) scale(1)'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      // Compensation for the `Input.inputSizeSmall` style.
+      transform: 'translate(0, 17px) scale(1)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.shrink,
+    style: {
+      transform: 'translate(0, -1.5px) scale(0.75)',
+      transformOrigin: 'top left',
+      maxWidth: '133%'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableAnimation,
+    style: {
+      transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.easeOut
+      })
+    }
+  }, {
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      // Chrome's autofill feature gives the input field a yellow background.
+      // Since the input field is behind the label in the HTML tree,
+      // the input field is drawn last and hides the label with an opaque background color.
+      // zIndex: 1 will raise the label above opaque background-colors of input.
+      zIndex: 1,
+      pointerEvents: 'none',
+      transform: 'translate(12px, 16px) scale(1)',
+      maxWidth: 'calc(100% - 24px)'
+    }
+  }, {
+    props: {
+      variant: 'filled',
+      size: 'small'
+    },
+    style: {
+      transform: 'translate(12px, 13px) scale(1)'
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState
+    }) => variant === 'filled' && ownerState.shrink,
+    style: {
+      userSelect: 'none',
+      pointerEvents: 'auto',
+      transform: 'translate(12px, 7px) scale(0.75)',
+      maxWidth: 'calc(133% - 24px)'
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState,
+      size
+    }) => variant === 'filled' && ownerState.shrink && size === 'small',
+    style: {
+      transform: 'translate(12px, 4px) scale(0.75)'
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      // see comment above on filled.zIndex
+      zIndex: 1,
+      pointerEvents: 'none',
+      transform: 'translate(14px, 16px) scale(1)',
+      maxWidth: 'calc(100% - 24px)'
+    }
+  }, {
+    props: {
+      variant: 'outlined',
+      size: 'small'
+    },
+    style: {
+      transform: 'translate(14px, 9px) scale(1)'
+    }
+  }, {
+    props: ({
+      variant,
+      ownerState
+    }) => variant === 'outlined' && ownerState.shrink,
+    style: {
+      userSelect: 'none',
+      pointerEvents: 'auto',
+      // Theoretically, we should have (8+5)*2/0.75 = 34px
+      // but it feels a better when it bleeds a bit on the left, so 32px.
+      maxWidth: 'calc(133% - 32px)',
+      transform: 'translate(14px, -9px) scale(0.75)'
+    }
+  }]
+}));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     name: 'MuiInputLabel',
     props: inProps
   });

package/node/Link/Link.js

@@ -6,25 +6,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
 var _getTextDecoration = _interopRequireWildcard(require("./getTextDecoration"));
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiLink');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,7 +39,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _linkClasses.getLinkUtilityClass, classes);
 };
-const LinkRoot = (0, _styled.default)(_Typography.default, {
+const LinkRoot = (0, _zeroStyled.styled)(_Typography.default, {
   name: 'MuiLink',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -47,60 +49,92 @@ const LinkRoot = (0, _styled.default)(_Typography.default, {
     return [styles.root, styles[`underline${(0, _capitalize.default)(ownerState.underline)}`], ownerState.component === 'button' && styles.button];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return (0, _extends2.default)({}, ownerState.underline === 'none' && {
-    textDecoration: 'none'
-  }, ownerState.underline === 'hover' && {
-    textDecoration: 'none',
-    '&:hover': {
-      textDecoration: 'underline'
-    }
-  }, ownerState.underline === 'always' && (0, _extends2.default)({
-    textDecoration: 'underline'
-  }, ownerState.color !== 'inherit' && {
-    textDecorationColor: (0, _getTextDecoration.default)({
-      theme,
-      ownerState
-    })
-  }, {
-    '&:hover': {
-      textDecorationColor: 'inherit'
-    }
-  }), ownerState.component === 'button' && {
-    position: 'relative',
-    WebkitTapHighlightColor: 'transparent',
-    backgroundColor: 'transparent',
-    // Reset default value
-    // We disable the focus ring for mouse, touch and keyboard users.
-    outline: 0,
-    border: 0,
-    margin: 0,
-    // Remove the margin in Safari
-    borderRadius: 0,
-    padding: 0,
-    // Remove the padding in Firefox
-    cursor: 'pointer',
-    userSelect: 'none',
-    verticalAlign: 'middle',
-    MozAppearance: 'none',
-    // Reset
-    WebkitAppearance: 'none',
-    // Reset
-    '&::-moz-focus-inner': {
-      borderStyle: 'none' // Remove Firefox dotted outline.
-    },
-    [`&.${_linkClasses.default.focusVisible}`]: {
-      outline: 'auto'
-    }
-  });
+  return {
+    variants: [{
+      props: {
+        underline: 'none'
+      },
+      style: {
+        textDecoration: 'none'
+      }
+    }, {
+      props: {
+        underline: 'hover'
+      },
+      style: {
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'underline'
+        }
+      }
+    }, {
+      props: {
+        underline: 'always'
+      },
+      style: {
+        textDecoration: 'underline',
+        '&:hover': {
+          textDecorationColor: 'inherit'
+        }
+      }
+    }, {
+      props: ({
+        underline,
+        ownerState
+      }) => underline === 'always' && ownerState.color !== 'inherit',
+      style: {
+        textDecorationColor: 'var(--Link-underlineColor)'
+      }
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+      props: {
+        underline: 'always',
+        color
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.4)
+      }
+    })), {
+      props: {
+        component: 'button'
+      },
+      style: {
+        position: 'relative',
+        WebkitTapHighlightColor: 'transparent',
+        backgroundColor: 'transparent',
+        // Reset default value
+        // We disable the focus ring for mouse, touch and keyboard users.
+        outline: 0,
+        border: 0,
+        margin: 0,
+        // Remove the margin in Safari
+        borderRadius: 0,
+        padding: 0,
+        // Remove the padding in Firefox
+        cursor: 'pointer',
+        userSelect: 'none',
+        verticalAlign: 'middle',
+        MozAppearance: 'none',
+        // Reset
+        WebkitAppearance: 'none',
+        // Reset
+        '&::-moz-focus-inner': {
+          borderStyle: 'none' // Remove Firefox dotted outline.
+        },
+        [`&.${_linkClasses.default.focusVisible}`]: {
+          outline: 'auto'
+        }
+      }
+    }]
+  };
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
   });
+  const theme = (0, _useTheme.default)();
   const {
       className,
       color = 'primary',
@@ -156,11 +190,18 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant,
-    sx: [...(!Object.keys(_getTextDecoration.colorTransformations).includes(color) ? [{
+    variant: variant
+  }, other, {
+    sx: [...(_getTextDecoration.colorTransformations[color] === undefined ? [{
       color
-    }] : []), ...(Array.isArray(sx) ? sx : [sx])]
-  }, other));
+    }] : []), ...(Array.isArray(sx) ? sx : [sx])],
+    style: (0, _extends2.default)({}, other.style, underline === 'always' && color !== 'inherit' && {
+      '--Link-underlineColor': (0, _getTextDecoration.default)({
+        theme,
+        ownerState
+      })
+    })
+  }));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -197,6 +238,10 @@ process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ =
    * @ignore
    */
   onFocus: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Link/getTextDecoration.js

@@ -4,25 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.colorTransformations = void 0;
-var _system = require("@mui/system");
+var _style = require("@mui/system/style");
 var _colorManipulator = require("@mui/system/colorManipulator");
+// TODO v7: remove this transformation
 const colorTransformations = exports.colorTransformations = {
-  primary: 'primary.main',
   textPrimary: 'text.primary',
-  secondary: 'secondary.main',
   textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-const transformDeprecatedColors = color => {
-  return colorTransformations[color] || color;
+  // For main palette, the color will be applied by the styles above.
+  primary: null,
+  secondary: null,
+  error: null,
+  info: null,
+  success: null,
+  warning: null
 };
 const getTextDecoration = ({
   theme,
   ownerState
 }) => {
-  const transformedColor = transformDeprecatedColors(ownerState.color);
-  const color = (0, _system.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = (0, _system.getPath)(theme, `palette.${transformedColor}Channel`);
+  let transformedColor = colorTransformations[ownerState.color];
+  if (transformedColor === null) {
+    return null;
+  }
+  if (transformedColor === undefined) {
+    transformedColor = ownerState.color;
+  }
+  const color = (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {
     return `rgba(${channelColor} / 0.4)`;
   }