@mui/material 7.2.0 → 7.3.0

package/esm/Accordion/Accordion.js

@@ -125,6 +125,10 @@ const AccordionHeading = styled('h3', {
 })({
   all: 'unset'
 });
+const AccordionRegion = styled('div', {
+  name: 'MuiAccordion',
+  slot: 'Region'
+})({});
 const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,
@@ -209,6 +213,17 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     externalForwardedProps,
     ownerState
   });
+  const [AccordionRegionSlot, accordionRegionProps] = useSlot('region', {
+    elementType: AccordionRegion,
+    externalForwardedProps,
+    ownerState,
+    className: classes.region,
+    additionalProps: {
+      'aria-labelledby': summary.props.id,
+      id: summary.props['aria-controls'],
+      role: 'region'
+    }
+  });
   return /*#__PURE__*/_jsxs(RootSlot, {
     ...rootProps,
     children: [/*#__PURE__*/_jsx(AccordionHeadingSlot, {
@@ -221,11 +236,8 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
       in: expanded,
       timeout: "auto",
       ...transitionProps,
-      children: /*#__PURE__*/_jsx("div", {
-        "aria-labelledby": summary.props.id,
-        id: summary.props['aria-controls'],
-        role: "region",
-        className: classes.region,
+      children: /*#__PURE__*/_jsx(AccordionRegionSlot, {
+        ...accordionRegionProps,
         children: children
       })
     })]
@@ -290,6 +302,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   slotProps: PropTypes.shape({
     heading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    region: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
@@ -299,6 +312,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   slots: PropTypes.shape({
     heading: PropTypes.elementType,
+    region: PropTypes.elementType,
     root: PropTypes.elementType,
     transition: PropTypes.elementType
   }),

package/esm/Alert/Alert.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { darken, lighten } from '@mui/system/colorManipulator';
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
@@ -47,8 +46,8 @@ const AlertRoot = styled(Paper, {
 })(memoTheme(({
   theme
 }) => {
-  const getColor = theme.palette.mode === 'light' ? darken : lighten;
-  const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
+  const getColor = theme.palette.mode === 'light' ? theme.darken : theme.lighten;
+  const getBackgroundColor = theme.palette.mode === 'light' ? theme.lighten : theme.darken;
   return {
     ...theme.typography.body2,
     backgroundColor: 'transparent',

package/esm/Autocomplete/Autocomplete.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import useAutocomplete, { createFilterOptions } from "../useAutocomplete/index.js";
 import Popper from "../Popper/index.js";
 import ListSubheader from "../ListSubheader/index.js";
@@ -362,16 +361,16 @@ const AutocompleteListbox = styled('ul', {
       backgroundColor: (theme.vars || theme).palette.action.focus
     },
     '&[aria-selected="true"]': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
       [`&.${autocompleteClasses.focused}`]: {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: (theme.vars || theme).palette.action.selected
         }
       },
       [`&.${autocompleteClasses.focusVisible}`]: {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
       }
     }
   }
@@ -912,6 +911,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Used to determine the disabled state for a given option.
    *
    * @param {Value} option The option to test.
+   * @template Value The option shape. Will be the same shape as an item of the options.
    * @returns {boolean}
    */
   getOptionDisabled: PropTypes.func,

package/esm/Button/Button.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { unstable_useId as useId } from "../utils/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
@@ -159,15 +158,15 @@ const ButtonRoot = styled(ButtonBase, {
       style: {
         '--variant-textColor': (theme.vars || theme).palette[color].main,
         '--variant-outlinedColor': (theme.vars || theme).palette[color].main,
-        '--variant-outlinedBorder': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha(theme.palette[color].main, 0.5),
+        '--variant-outlinedBorder': theme.alpha((theme.vars || theme).palette[color].main, 0.5),
         '--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
         '--variant-containedBg': (theme.vars || theme).palette[color].main,
         '@media (hover: hover)': {
           '&:hover': {
             '--variant-containedBg': (theme.vars || theme).palette[color].dark,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+            '--variant-textBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity),
             '--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+            '--variant-outlinedBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
           }
         }
       }
@@ -182,8 +181,8 @@ const ButtonRoot = styled(ButtonBase, {
         '@media (hover: hover)': {
           '&:hover': {
             '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity)
+            '--variant-textBg': theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity),
+            '--variant-outlinedBg': theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity)
           }
         }
       }

package/esm/ButtonGroup/ButtonGroup.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from "../utils/capitalize.js";
 import { styled } from "../zero-styled/index.js";
@@ -122,7 +121,7 @@ const ButtonGroupRoot = styled('div', {
     },
     style: {
       [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
-        borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        borderRight: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
         [`&.${buttonGroupClasses.disabled}`]: {
           borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
@@ -135,7 +134,7 @@ const ButtonGroupRoot = styled('div', {
     },
     style: {
       [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
-        borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        borderBottom: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
         [`&.${buttonGroupClasses.disabled}`]: {
           borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
@@ -148,7 +147,7 @@ const ButtonGroupRoot = styled('div', {
     },
     style: {
       [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha(theme.palette[color].main, 0.5)
+        borderColor: theme.alpha((theme.vars || theme).palette[color].main, 0.5)
       }
     }
   }]), {

package/esm/Checkbox/Checkbox.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import SwitchBase from "../internal/SwitchBase.js";
 import CheckBoxOutlineBlankIcon from "../internal/svg-icons/CheckBoxOutlineBlank.js";
 import CheckBoxIcon from "../internal/svg-icons/CheckBox.js";
@@ -57,7 +56,7 @@ const CheckboxRoot = styled(SwitchBase, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
@@ -67,7 +66,7 @@ const CheckboxRoot = styled(SwitchBase, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({

package/esm/Chip/Chip.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import CancelIcon from "../internal/svg-icons/Cancel.js";
 import useForkRef from "../utils/useForkRef.js";
 import unsupportedProp from "../utils/unsupportedProp.js";
@@ -136,12 +135,12 @@ const ChipRoot = styled('div', {
     },
     [`& .${chipClasses.deleteIcon}`]: {
       WebkitTapHighlightColor: 'transparent',
-      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
+      color: theme.alpha((theme.vars || theme).palette.text.primary, 0.26),
       fontSize: 22,
       cursor: 'pointer',
       margin: '0 5px 0 -6px',
       '&:hover': {
-        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
+        color: theme.alpha((theme.vars || theme).palette.text.primary, 0.4)
       }
     },
     variants: [{
@@ -170,7 +169,7 @@ const ChipRoot = styled('div', {
           backgroundColor: (theme.vars || theme).palette[color].main,
           color: (theme.vars || theme).palette[color].contrastText,
           [`& .${chipClasses.deleteIcon}`]: {
-            color: theme.vars ? `rgba(${theme.vars.palette[color].contrastTextChannel} / 0.7)` : alpha(theme.palette[color].contrastText, 0.7),
+            color: theme.alpha((theme.vars || theme).palette[color].contrastText, 0.7),
             '&:hover, &:active': {
               color: (theme.vars || theme).palette[color].contrastText
             }
@@ -197,7 +196,7 @@ const ChipRoot = styled('div', {
       },
       style: {
         [`&.${chipClasses.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
         }
       }
     }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => {
@@ -221,10 +220,10 @@ const ChipRoot = styled('div', {
         WebkitTapHighlightColor: 'transparent',
         cursor: 'pointer',
         '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`)
         },
         [`&.${chipClasses.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
         },
         '&:active': {
           boxShadow: (theme.vars || theme).shadows[1]
@@ -280,15 +279,15 @@ const ChipRoot = styled('div', {
       },
       style: {
         color: (theme.vars || theme).palette[color].main,
-        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : alpha(theme.palette[color].main, 0.7)}`,
+        border: `1px solid ${theme.alpha((theme.vars || theme).palette[color].main, 0.7)}`,
         [`&.${chipClasses.clickable}:hover`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
         },
         [`&.${chipClasses.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[color].main, theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.focusOpacity)
         },
         [`& .${chipClasses.deleteIcon}`]: {
-          color: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : alpha(theme.palette[color].main, 0.7),
+          color: theme.alpha((theme.vars || theme).palette[color].main, 0.7),
           '&:hover, &:active': {
             color: (theme.vars || theme).palette[color].main
           }

package/esm/Divider/Divider.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
@@ -61,7 +60,7 @@ const DividerRoot = styled('div', {
       light: true
     },
     style: {
-      borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
+      borderColor: theme.alpha((theme.vars || theme).palette.divider, 0.08)
     }
   }, {
     props: {

package/esm/FilledInput/FilledInput.js

@@ -105,7 +105,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           }
         },
         '&::before': {
-          borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
+          borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
           content: '"\\00a0"',

package/esm/IconButton/IconButton.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { unstable_useId as useId } from "../utils/index.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -56,7 +55,7 @@ const IconButtonRoot = styled(ButtonBase, {
   variants: [{
     props: props => !props.disableRipple,
     style: {
-      '--IconButton-hoverBg': theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      '--IconButton-hoverBg': theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity),
       '&:hover': {
         backgroundColor: 'var(--IconButton-hoverBg)',
         // Reset on touch devices, it doesn't add specificity
@@ -120,7 +119,7 @@ const IconButtonRoot = styled(ButtonBase, {
       color
     },
     style: {
-      '--IconButton-hoverBg': theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity)
+      '--IconButton-hoverBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
     }
   })), {
     props: {

package/esm/Input/Input.js

@@ -46,7 +46,7 @@ const InputRoot = styled(InputBaseRoot, {
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   if (theme.vars) {
-    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
+    bottomLineColor = theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline);
   }
   return {
     position: 'relative',

package/esm/LinearProgress/LinearProgress.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { darken, lighten } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import { keyframes, css, styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -93,7 +92,7 @@ const getColorShade = (theme, color) => {
   if (theme.vars) {
     return theme.vars.palette.LinearProgress[`${color}Bg`];
   }
-  return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5);
+  return theme.palette.mode === 'light' ? theme.lighten(theme.palette[color].main, 0.62) : theme.darken(theme.palette[color].main, 0.5);
 };
 const LinearProgressRoot = styled('span', {
   name: 'MuiLinearProgress',

package/esm/Link/Link.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { alpha } from '@mui/system/colorManipulator';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
 import isFocusVisible from '@mui/utils/isFocusVisible';
@@ -87,13 +86,21 @@ const LinkRoot = styled(Typography, {
       style: {
         textDecorationColor: 'var(--Link-underlineColor)'
       }
+    }, {
+      props: ({
+        underline,
+        ownerState
+      }) => underline === 'always' && ownerState.color === 'inherit',
+      style: theme.colorSpace ? {
+        textDecorationColor: theme.alpha('currentColor', 0.4)
+      } : null
     }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         underline: 'always',
         color
       },
       style: {
-        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.4)` : alpha(theme.palette[color].main, 0.4)
+        '--Link-underlineColor': theme.alpha((theme.vars || theme).palette[color].main, 0.4)
       }
     })), {
       props: {
@@ -101,7 +108,7 @@ const LinkRoot = styled(Typography, {
         color: 'textPrimary'
       },
       style: {
-        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
+        '--Link-underlineColor': theme.alpha((theme.vars || theme).palette.text.primary, 0.4)
       }
     }, {
       props: {
@@ -109,7 +116,7 @@ const LinkRoot = styled(Typography, {
         color: 'textSecondary'
       },
       style: {
-        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.secondaryChannel} / 0.4)` : alpha(theme.palette.text.secondary, 0.4)
+        '--Link-underlineColor': theme.alpha((theme.vars || theme).palette.text.secondary, 0.4)
       }
     }, {
       props: {

package/esm/Link/getTextDecoration.js

@@ -5,6 +5,11 @@ const getTextDecoration = ({
   ownerState
 }) => {
   const transformedColor = ownerState.color;
+  if ('colorSpace' in theme && theme.colorSpace) {
+    const color = getPath(theme, `palette.${transformedColor}.main`) || getPath(theme, `palette.${transformedColor}`) || ownerState.color;
+    return theme.alpha(color, 0.4);
+  }
+
   // check the `main` color first for a custom palette, then fallback to the color itself
   const color = getPath(theme, `palette.${transformedColor}.main`, false) || getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
   const channelColor = getPath(theme, `palette.${transformedColor}.mainChannel`) || getPath(theme, `palette.${transformedColor}Channel`);

package/esm/ListItemButton/ListItemButton.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
@@ -71,16 +70,16 @@ const ListItemButtonRoot = styled(ButtonBase, {
     }
   },
   [`&.${listItemButtonClasses.selected}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
     [`&.${listItemButtonClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
     }
   },
   [`&.${listItemButtonClasses.selected}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity)
     }
   },
   [`&.${listItemButtonClasses.focusVisible}`]: {

package/esm/MenuItem/MenuItem.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -70,16 +69,16 @@ const MenuItemRoot = styled(ButtonBase, {
     }
   },
   [`&.${menuItemClasses.selected}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
     [`&.${menuItemClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
     }
   },
   [`&.${menuItemClasses.selected}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity)
     }
   },
   [`&.${menuItemClasses.focusVisible}`]: {

package/esm/OutlinedInput/OutlinedInput.js

@@ -50,7 +50,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+        borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor
       }
     },
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
@@ -116,7 +116,7 @@ const NotchedOutlineRoot = styled(NotchedOutline, {
 }) => {
   const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
   return {
-    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+    borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor
   };
 }));
 const OutlinedInputInput = styled(InputBaseInput, {

package/esm/PaginationItem/PaginationItem.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import paginationItemClasses, { getPaginationItemUtilityClass } from "./paginationItemClasses.js";
 import ButtonBase from "../ButtonBase/index.js";
@@ -126,14 +125,14 @@ const PaginationItemPage = styled(ButtonBase, {
   [`&.${paginationItemClasses.selected}`]: {
     backgroundColor: (theme.vars || theme).palette.action.selected,
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: (theme.vars || theme).palette.action.selected
       }
     },
     [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
     },
     [`&.${paginationItemClasses.disabled}`]: {
       opacity: 1,
@@ -175,7 +174,7 @@ const PaginationItemPage = styled(ButtonBase, {
       variant: 'outlined'
     },
     style: {
-      border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+      border: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
       [`&.${paginationItemClasses.selected}`]: {
         [`&.${paginationItemClasses.disabled}`]: {
           borderColor: (theme.vars || theme).palette.action.disabledBackground,
@@ -226,17 +225,17 @@ const PaginationItemPage = styled(ButtonBase, {
     style: {
       [`&.${paginationItemClasses.selected}`]: {
         color: (theme.vars || theme).palette[color].main,
-        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha(theme.palette[color].main, 0.5)}`,
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity),
+        border: `1px solid ${theme.alpha((theme.vars || theme).palette[color].main, 0.5)}`,
+        backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.activatedOpacity),
         '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, `${(theme.vars || theme).palette.action.activatedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: 'transparent'
           }
         },
         [`&.${paginationItemClasses.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, `${(theme.vars || theme).palette.action.activatedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
         }
       }
     }

package/esm/Radio/Radio.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import SwitchBase from "../internal/SwitchBase.js";
 import RadioButtonIcon from "./RadioButtonIcon.js";
 import capitalize from "../utils/capitalize.js";
@@ -59,7 +58,7 @@ const RadioRoot = styled(SwitchBase, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
@@ -70,7 +69,7 @@ const RadioRoot = styled(SwitchBase, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({