@mui/material 6.0.0-beta.5 → 6.0.0-beta.6

package/node/CssBaseline/CssBaseline.js

@@ -42,24 +42,21 @@ const body = theme => ({
 });
 exports.body = body;
 const styles = (theme, enableColorScheme = false) => {
-  var _theme$components;
   const colorSchemeStyles = {};
   if (enableColorScheme && theme.colorSchemes && typeof theme.getColorSchemeSelector === 'function') {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
       const selector = theme.getColorSchemeSelector(key);
       if (selector.startsWith('@')) {
-        var _scheme$palette;
         // for @media (prefers-color-scheme), we need to target :root
         colorSchemeStyles[selector] = {
           ':root': {
-            colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+            colorScheme: scheme.palette?.mode
           }
         };
       } else {
-        var _scheme$palette2;
         // else, it's likely that the selector already target an element with a class or data attribute
         colorSchemeStyles[selector.replace(/\s*&/, '')] = {
-          colorScheme: (_scheme$palette2 = scheme.palette) == null ? void 0 : _scheme$palette2.mode
+          colorScheme: scheme.palette?.mode
         };
       }
     });
@@ -84,7 +81,7 @@ const styles = (theme, enableColorScheme = false) => {
     },
     ...colorSchemeStyles
   };
-  const themeOverrides = (_theme$components = theme.components) == null || (_theme$components = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components.styleOverrides;
+  const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides;
   if (themeOverrides) {
     defaultStyles = [defaultStyles, themeOverrides];
   }
@@ -106,19 +103,17 @@ const staticStyles = theme => {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
       const selector = theme.getColorSchemeSelector(key);
       if (selector.startsWith('@')) {
-        var _scheme$palette3;
         // for @media (prefers-color-scheme), we need to target :root
         baseStyles[selector] = {
           [`:root:not(:has(.${SELECTOR}))`]: {
-            colorScheme: (_scheme$palette3 = scheme.palette) == null ? void 0 : _scheme$palette3.mode
+            colorScheme: scheme.palette?.mode
           }
         };
       } else {
-        var _scheme$palette4;
         // else, it's likely that the selector already target an element with a class or data attribute
         baseStyles[selector.replace(/\s*&/, '')] = {
           [`&:not(:has(.${SELECTOR}))`]: {
-            colorScheme: (_scheme$palette4 = scheme.palette) == null ? void 0 : _scheme$palette4.mode
+            colorScheme: scheme.palette?.mode
           }
         };
       }

package/node/DialogContentText/DialogContentText.js

@@ -52,7 +52,7 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContentTextRoot, {
     component: "p",
     variant: "body1",
-    color: "text.secondary",
+    color: "textSecondary",
     ref: ref,
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),

package/node/DialogTitle/DialogTitle.js

@@ -56,7 +56,7 @@ const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps,
     ownerState: ownerState,
     ref: ref,
     variant: "h6",
-    id: idProp != null ? idProp : titleId,
+    id: idProp ?? titleId,
     ...other
   });
 });

package/node/Divider/Divider.js

@@ -211,10 +211,10 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     absolute = false,
     children,
     className,
-    component = children ? 'div' : 'hr',
+    orientation = 'horizontal',
+    component = children || orientation === 'vertical' ? 'div' : 'hr',
     flexItem = false,
     light = false,
-    orientation = 'horizontal',
     role = component !== 'hr' ? 'separator' : undefined,
     textAlign = 'center',
     variant = 'fullWidth',
@@ -238,6 +238,7 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     role: role,
     ref: ref,
     ownerState: ownerState,
+    "aria-orientation": role === 'separator' && (component !== 'hr' || orientation === 'vertical') ? orientation : undefined,
     ...other,
     children: children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DividerWrapper, {
       className: classes.wrapper,

package/node/Fab/Fab.js

@@ -48,99 +48,96 @@ const FabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   }
 })(({
   theme
-}) => {
-  var _theme$palette$getCon, _theme$palette;
-  return {
-    ...theme.typography.button,
-    minHeight: 36,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-      duration: theme.transitions.duration.short
-    }),
-    borderRadius: '50%',
-    padding: 0,
-    minWidth: 0,
-    width: 56,
-    height: 56,
-    zIndex: (theme.vars || theme).zIndex.fab,
-    boxShadow: (theme.vars || theme).shadows[6],
-    '&:active': {
-      boxShadow: (theme.vars || theme).shadows[12]
+}) => ({
+  ...theme.typography.button,
+  minHeight: 36,
+  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+    duration: theme.transitions.duration.short
+  }),
+  borderRadius: '50%',
+  padding: 0,
+  minWidth: 0,
+  width: 56,
+  height: 56,
+  zIndex: (theme.vars || theme).zIndex.fab,
+  boxShadow: (theme.vars || theme).shadows[6],
+  '&:active': {
+    boxShadow: (theme.vars || theme).shadows[12]
+  },
+  color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText?.(theme.palette.grey[300]),
+  backgroundColor: (theme.vars || theme).palette.grey[300],
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.grey.A100,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: (theme.vars || theme).palette.grey[300]
     },
-    color: theme.vars ? 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],
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.grey.A100,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: (theme.vars || theme).palette.grey[300]
-      },
-      textDecoration: 'none'
+    textDecoration: 'none'
+  },
+  [`&.${_fabClasses.default.focusVisible}`]: {
+    boxShadow: (theme.vars || theme).shadows[6]
+  },
+  variants: [{
+    props: {
+      size: 'small'
     },
-    [`&.${_fabClasses.default.focusVisible}`]: {
-      boxShadow: (theme.vars || theme).shadows[6]
+    style: {
+      width: 40,
+      height: 40
+    }
+  }, {
+    props: {
+      size: 'medium'
     },
-    variants: [{
-      props: {
-        size: 'small'
-      },
-      style: {
-        width: 40,
-        height: 40
-      }
-    }, {
-      props: {
-        size: 'medium'
-      },
-      style: {
-        width: 48,
-        height: 48
-      }
-    }, {
-      props: {
-        variant: 'extended'
-      },
-      style: {
-        borderRadius: 48 / 2,
-        padding: '0 16px',
-        width: 'auto',
-        minHeight: 'auto',
-        minWidth: 48,
-        height: 48
-      }
-    }, {
-      props: {
-        variant: 'extended',
-        size: 'small'
-      },
-      style: {
-        width: 'auto',
-        padding: '0 8px',
-        borderRadius: 34 / 2,
-        minWidth: 34,
-        height: 34
-      }
-    }, {
-      props: {
-        variant: 'extended',
-        size: 'medium'
-      },
-      style: {
-        width: 'auto',
-        padding: '0 16px',
-        borderRadius: 40 / 2,
-        minWidth: 40,
-        height: 40
-      }
-    }, {
-      props: {
-        color: 'inherit'
-      },
-      style: {
-        color: 'inherit'
-      }
-    }]
-  };
-}, ({
+    style: {
+      width: 48,
+      height: 48
+    }
+  }, {
+    props: {
+      variant: 'extended'
+    },
+    style: {
+      borderRadius: 48 / 2,
+      padding: '0 16px',
+      width: 'auto',
+      minHeight: 'auto',
+      minWidth: 48,
+      height: 48
+    }
+  }, {
+    props: {
+      variant: 'extended',
+      size: 'small'
+    },
+    style: {
+      width: 'auto',
+      padding: '0 8px',
+      borderRadius: 34 / 2,
+      minWidth: 34,
+      height: 34
+    }
+  }, {
+    props: {
+      variant: 'extended',
+      size: 'medium'
+    },
+    style: {
+      width: 'auto',
+      padding: '0 16px',
+      borderRadius: 40 / 2,
+      minWidth: 40,
+      height: 40
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: 'inherit'
+    }
+  }]
+}), ({
   theme
 }) => ({
   variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below

package/node/FilledInput/FilledInput.js

@@ -130,20 +130,17 @@ const FilledInputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
         }
       }
     }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
-    .map(([color]) => {
-      var _palette$color;
-      return {
-        props: {
-          disableUnderline: false,
-          color
-        },
-        style: {
-          '&::after': {
-            borderBottom: `2px solid ${(_palette$color = (theme.vars || theme).palette[color]) == null ? void 0 : _palette$color.main}`
-          }
+    .map(([color]) => ({
+      props: {
+        disableUnderline: false,
+        color
+      },
+      style: {
+        '&::after': {
+          borderBottom: `2px solid ${(theme.vars || theme).palette[color]?.main}`
         }
-      };
-    }), {
+      }
+    })), {
       props: ({
         ownerState
       }) => ownerState.startAdornment,
@@ -276,7 +273,6 @@ const FilledInputInput = (0, _zeroStyled.styled)(_InputBase2.InputBaseInput, {
   }]
 }));
 const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$input;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiFilledInput'
@@ -312,9 +308,9 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       ownerState
     }
   };
-  const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? (0, _deepmerge.default)(filledInputComponentsProps, slotProps != null ? slotProps : componentsPropsProp) : filledInputComponentsProps;
-  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : FilledInputRoot;
-  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : FilledInputInput;
+  const componentsProps = slotProps ?? componentsPropsProp ? (0, _deepmerge.default)(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
+  const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
+  const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, {
     slots: {
       root: RootSlot,

package/node/FormControlLabel/FormControlLabel.js

@@ -14,7 +14,6 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _FormControl = require("../FormControl");
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
-var _Stack = _interopRequireDefault(require("../Stack"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _formControlLabelClasses = _interopRequireWildcard(require("./formControlLabelClasses"));
@@ -117,7 +116,6 @@ const AsteriskComponent = (0, _zeroStyled.styled)('span', {
  * Use this component if you want to display an extra label.
  */
 const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _ref;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -141,8 +139,8 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ...other
   } = props;
   const muiFormControl = (0, _FormControl.useFormControl)();
-  const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
-  const required = requiredProp != null ? requiredProp : control.props.required;
+  const disabled = disabledProp ?? control.props.disabled ?? muiFormControl?.disabled;
+  const required = requiredProp ?? control.props.required;
   const controlProps = {
     disabled,
     required
@@ -182,7 +180,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     label = /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographySlot, {
       component: "span",
       ...typographySlotProps,
-      className: (0, _clsx.default)(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
+      className: (0, _clsx.default)(classes.label, typographySlotProps?.className),
       children: label
     });
   }
@@ -191,8 +189,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ownerState: ownerState,
     ref: ref,
     ...other,
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
-      display: "block",
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [label, /*#__PURE__*/(0, _jsxRuntime.jsxs)(AsteriskComponent, {
         ownerState: ownerState,
         "aria-hidden": true,

package/node/Grid/Grid.js

@@ -178,7 +178,6 @@ function generateRowGap({
     styles = (0, _system.handleBreakpoints)({
       theme
     }, rowSpacingValues, (propValue, breakpoint) => {
-      var _zeroValueBreakpointK;
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         return {
@@ -188,7 +187,7 @@ function generateRowGap({
           }
         };
       }
-      if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
       return {
@@ -225,7 +224,6 @@ function generateColumnGap({
     styles = (0, _system.handleBreakpoints)({
       theme
     }, columnSpacingValues, (propValue, breakpoint) => {
-      var _zeroValueBreakpointK2;
       const themeSpacing = theme.spacing(propValue);
       if (themeSpacing !== '0px') {
         const negativeValue = theme.spacing(-propValue);
@@ -237,7 +235,7 @@ function generateColumnGap({
           }
         };
       }
-      if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
       return {

package/node/IconButton/IconButton.js

@@ -172,6 +172,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color = 'default',
     disabled = false,
     disableFocusRipple = false,
+    disableRipple = false,
     size = 'medium',
     ...other
   } = props;
@@ -181,6 +182,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color,
     disabled,
     disableFocusRipple,
+    disableRipple,
     size
   };
   const classes = useUtilityClasses(ownerState);
@@ -189,6 +191,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
+    disableRipple: disableRipple,
     ref: ref,
     ...other,
     ownerState: ownerState,

package/node/Input/Input.js

@@ -135,7 +135,6 @@ const InputInput = (0, _zeroStyled.styled)(_InputBase2.InputBaseInput, {
   overridesResolver: _InputBase2.inputOverridesResolver
 })({});
 const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$input;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiInput'
@@ -161,9 +160,9 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       ownerState
     }
   };
-  const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? (0, _deepmerge.default)(slotProps != null ? slotProps : componentsPropsProp, inputComponentsProps) : inputComponentsProps;
-  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : InputRoot;
-  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : InputInput;
+  const componentsProps = slotProps ?? componentsPropsProp ? (0, _deepmerge.default)(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
+  const RootSlot = slots.root ?? components.Root ?? InputRoot;
+  const InputSlot = slots.input ?? components.Input ?? InputInput;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, {
     slots: {
       root: RootSlot,

package/node/InputAdornment/InputAdornment.js

@@ -130,7 +130,7 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
       ref: ref,
       ...other,
       children: typeof children === 'string' && !disableTypography ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-        color: "text.secondary",
+        color: "textSecondary",
         children: children
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [position === 'start' ? ( /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/node/InputBase/InputBase.js

@@ -246,7 +246,6 @@ const InputGlobalStyles = (0, _zeroStyled.globalCss)({
  * It contains a load of style reset and some state logic.
  */
 const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
-  var _slotProps$input;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiInputBase'
@@ -468,7 +467,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const Input = slots.input || components.Input || InputBaseInput;
   inputProps = {
     ...inputProps,
-    ...((_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input)
+    ...(slotProps.input ?? componentsProps.input)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [!disableInjectingGlobalStyles && typeof InputGlobalStyles === 'function' && ( // For Emotion/Styled-components, InputGlobalStyles will be a function

package/node/Link/Link.js

@@ -18,10 +18,21 @@ var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
-var _getTextDecoration = _interopRequireWildcard(require("./getTextDecoration"));
+var _getTextDecoration = _interopRequireDefault(require("./getTextDecoration"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true
+};
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -91,6 +102,30 @@ const LinkRoot = (0, _zeroStyled.styled)(_Typography.default, {
         '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.4)
       }
     })), {
+      props: {
+        underline: 'always',
+        color: 'textPrimary'
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette.text.primary, 0.4)
+      }
+    }, {
+      props: {
+        underline: 'always',
+        color: 'textSecondary'
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.secondaryChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette.text.secondary, 0.4)
+      }
+    }, {
+      props: {
+        underline: 'always',
+        color: 'textDisabled'
+      },
+      style: {
+        '--Link-underlineColor': (theme.vars || theme).palette.text.disabled
+      }
+    }, {
       props: {
         component: 'button'
       },
@@ -179,12 +214,12 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     ownerState: ownerState,
     variant: variant,
     ...other,
-    sx: [...(_getTextDecoration.colorTransformations[color] === undefined ? [{
+    sx: [...(v6Colors[color] === undefined ? [{
       color
     }] : []), ...(Array.isArray(sx) ? sx : [sx])],
     style: {
       ...other.style,
-      ...(underline === 'always' && color !== 'inherit' && {
+      ...(underline === 'always' && color !== 'inherit' && !v6Colors[color] && {
         '--Link-underlineColor': (0, _getTextDecoration.default)({
           theme,
           ownerState
@@ -214,7 +249,7 @@ process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ =
    * The color of the link.
    * @default 'primary'
    */
-  color: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
+  color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['primary', 'secondary', 'success', 'error', 'info', 'warning', 'textPrimary', 'textSecondary', 'textDisabled']), _propTypes.default.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/node/Link/getTextDecoration.js

@@ -3,32 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.colorTransformations = void 0;
+exports.default = void 0;
 var _style = require("@mui/system/style");
 var _colorManipulator = require("@mui/system/colorManipulator");
-// TODO v7: remove this transformation
-const colorTransformations = exports.colorTransformations = {
-  textPrimary: 'text.primary',
-  textSecondary: 'text.secondary',
-  // 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
 }) => {
-  let transformedColor = colorTransformations[ownerState.color];
-  if (transformedColor === null) {
-    return null;
-  }
-  if (transformedColor === undefined) {
-    transformedColor = ownerState.color;
-  }
+  const 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) {

package/node/ListItemText/ListItemText.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _Typography = _interopRequireWildcard(require("../Typography"));
 var _ListContext = _interopRequireDefault(require("../List/ListContext"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -51,6 +51,12 @@ const ListItemTextRoot = (0, _zeroStyled.styled)('div', {
   minWidth: 0,
   marginTop: 4,
   marginBottom: 4,
+  [`.${_Typography.typographyClasses.root}:where(& .${_listItemTextClasses.default.primary})`]: {
+    display: 'block'
+  },
+  [`.${_Typography.typographyClasses.root}:where(& .${_listItemTextClasses.default.secondary})`]: {
+    display: 'block'
+  },
   variants: [{
     props: ({
       ownerState
@@ -102,8 +108,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     primary = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       variant: dense ? 'body2' : 'body1',
       className: classes.primary,
-      component: primaryTypographyProps != null && primaryTypographyProps.variant ? undefined : 'span',
-      display: "block",
+      component: primaryTypographyProps?.variant ? undefined : 'span',
       ...primaryTypographyProps,
       children: primary
     });
@@ -112,8 +117,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     secondary = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       variant: "body2",
       className: classes.secondary,
-      color: "text.secondary",
-      display: "block",
+      color: "textSecondary",
       ...secondaryTypographyProps,
       children: secondary
     });