@mui/material 7.1.2 → 7.3.0

package/Link/Link.js

@@ -10,7 +10,6 @@ exports.default = void 0;
 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 _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
@@ -94,13 +93,21 @@ const LinkRoot = (0, _zeroStyled.styled)(_Typography.default, {
       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((0, _createSimplePaletteValueFilter.default)()).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)
+        '--Link-underlineColor': theme.alpha((theme.vars || theme).palette[color].main, 0.4)
       }
     })), {
       props: {
@@ -108,7 +115,7 @@ const LinkRoot = (0, _zeroStyled.styled)(_Typography.default, {
         color: 'textPrimary'
       },
       style: {
-        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette.text.primary, 0.4)
+        '--Link-underlineColor': theme.alpha((theme.vars || theme).palette.text.primary, 0.4)
       }
     }, {
       props: {
@@ -116,7 +123,7 @@ const LinkRoot = (0, _zeroStyled.styled)(_Typography.default, {
         color: 'textSecondary'
       },
       style: {
-        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.secondaryChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette.text.secondary, 0.4)
+        '--Link-underlineColor': theme.alpha((theme.vars || theme).palette.text.secondary, 0.4)
       }
     }, {
       props: {

package/Link/getTextDecoration.js

@@ -11,6 +11,11 @@ const getTextDecoration = ({
   ownerState
 }) => {
   const transformedColor = ownerState.color;
+  if ('colorSpace' in theme && theme.colorSpace) {
+    const color = (0, _style.getPath)(theme, `palette.${transformedColor}.main`) || (0, _style.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 = (0, _style.getPath)(theme, `palette.${transformedColor}.main`, false) || (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
   const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}.mainChannel`) || (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);

package/ListItemButton/ListItemButton.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -79,16 +78,16 @@ const ListItemButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     }
   },
   [`&.${_listItemButtonClasses.default.selected}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.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.default.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.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.default.selected}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.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})` : (0, _colorManipulator.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.default.focusVisible}`]: {

package/MenuItem/MenuItem.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
@@ -78,16 +77,16 @@ const MenuItemRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     }
   },
   [`&.${_menuItemClasses.default.selected}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.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.default.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.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.default.selected}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.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})` : (0, _colorManipulator.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.default.focusVisible}`]: {

package/NativeSelect/NativeSelectInput.js

@@ -32,7 +32,9 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _nativeSelectClasses.getNativeSelectUtilityClasses, classes);
 };
-const StyledSelectSelect = exports.StyledSelectSelect = (0, _zeroStyled.styled)('select')(({
+const StyledSelectSelect = exports.StyledSelectSelect = (0, _zeroStyled.styled)('select', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // Reset
@@ -106,7 +108,9 @@ const NativeSelectSelect = (0, _zeroStyled.styled)(StyledSelectSelect, {
     }];
   }
 })({});
-const StyledSelectIcon = exports.StyledSelectIcon = (0, _zeroStyled.styled)('svg')(({
+const StyledSelectIcon = exports.StyledSelectIcon = (0, _zeroStyled.styled)('svg', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events

package/OutlinedInput/NotchedOutline.js

@@ -15,6 +15,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
 const NotchedOutlineRoot = (0, _zeroStyled.styled)('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: _rootShouldForwardProp.default
 })({
   textAlign: 'left',
@@ -33,6 +34,7 @@ const NotchedOutlineRoot = (0, _zeroStyled.styled)('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = (0, _zeroStyled.styled)('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: _rootShouldForwardProp.default
 })((0, _memoTheme.default)(({
   theme

package/OutlinedInput/OutlinedInput.js

@@ -57,7 +57,7 @@ const OutlinedInputRoot = (0, _zeroStyled.styled)(_InputBase.InputBaseRoot, {
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       [`&:hover .${_outlinedInputClasses.default.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.default.focused} .${_outlinedInputClasses.default.notchedOutline}`]: {
@@ -123,7 +123,7 @@ const NotchedOutlineRoot = (0, _zeroStyled.styled)(_NotchedOutline.default, {
 }) => {
   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 = (0, _zeroStyled.styled)(_InputBase.InputBaseInput, {

package/OutlinedInput/outlinedInputClasses.d.ts

@@ -21,13 +21,21 @@ export interface OutlinedInputClasses {
   notchedOutline: string;
   /** Styles applied to the input element. */
   input: string;
-  /** Styles applied to the input element if `size="small"`. */
+  /** Styles applied to the input element if `size="small"`.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-sizeSmall](/material-ui/api/input-base/#inputbase-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputSizeSmall: string;
-  /** Styles applied to the input element if `multiline={true}`. */
+  /** Styles applied to the input element if `multiline={true}`.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-multiline](/material-ui/api/input-base/#inputbase-classes-multiline) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputMultiline: string;
-  /** Styles applied to the input element if `startAdornment` is provided. */
+  /** Styles applied to the input element if `startAdornment` is provided.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedStart](/material-ui/api/input-base/#inputbase-classes-adornedStart) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputAdornedStart: string;
-  /** Styles applied to the input element if `endAdornment` is provided. */
+  /** Styles applied to the input element if `endAdornment` is provided.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedEnd](/material-ui/api/input-base/#inputbase-classes-adornedEnd) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputAdornedEnd: string;
   /** Styles applied to the input element if `type="search"`. */
   inputTypeSearch: string;

package/PaginationItem/PaginationItem.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _paginationItemClasses = _interopRequireWildcard(require("./paginationItemClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
@@ -133,14 +132,14 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
   [`&.${_paginationItemClasses.default.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}))` : (0, _colorManipulator.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.default.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.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.default.disabled}`]: {
       opacity: 1,
@@ -182,7 +181,7 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
       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.default.selected}`]: {
         [`&.${_paginationItemClasses.default.disabled}`]: {
           borderColor: (theme.vars || theme).palette.action.disabledBackground,
@@ -233,17 +232,17 @@ const PaginationItemPage = (0, _zeroStyled.styled)(_ButtonBase.default, {
     style: {
       [`&.${_paginationItemClasses.default.selected}`]: {
         color: (theme.vars || theme).palette[color].main,
-        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.5)}`,
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : (0, _colorManipulator.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}))` : (0, _colorManipulator.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.default.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.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/Radio/Radio.js

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
 var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -66,7 +65,7 @@ const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
@@ -77,7 +76,7 @@ const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.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((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({

package/Radio/RadioButtonIcon.js

@@ -16,16 +16,21 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 const RadioButtonIconRoot = (0, _zeroStyled.styled)('span', {
+  name: 'MuiRadioButtonIcon',
   shouldForwardProp: _rootShouldForwardProp.default
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = (0, _zeroStyled.styled)(_RadioButtonUnchecked.default)({
+const RadioButtonIconBackground = (0, _zeroStyled.styled)(_RadioButtonUnchecked.default, {
+  name: 'MuiRadioButtonIcon'
+})({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default)((0, _memoTheme.default)(({
+const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default, {
+  name: 'MuiRadioButtonIcon'
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   left: 0,

package/Select/SelectInput.js

@@ -160,12 +160,27 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   });
   const inputRef = React.useRef(null);
   const displayRef = React.useRef(null);
+  const paperRef = React.useRef(null);
+  const didPointerDownRef = React.useRef(false);
   const [displayNode, setDisplayNode] = React.useState(null);
   const {
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
+  const open = displayNode !== null && openState;
+  const ownerState = {
+    ...props,
+    variant,
+    value,
+    open,
+    error
+  };
+  const paperProps = {
+    ...MenuProps.PaperProps,
+    ...(typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper)
+  };
   const handleRef = (0, _useForkRef.default)(ref, inputRefProp);
+  const handlePaperRef = (0, _useForkRef.default)(paperProps.ref, paperRef);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
     if (node) {
@@ -215,8 +230,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return undefined;
   }, [labelId]);
-  const update = (open, event) => {
-    if (open) {
+  const update = (openParam, event) => {
+    if (openParam) {
       if (onOpen) {
         onOpen(event);
       }
@@ -225,7 +240,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
-      setOpenState(open);
+      setOpenState(openParam);
     }
   };
   const handleMouseDown = event => {
@@ -236,6 +251,31 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     // Hijack the default focus behavior.
     event.preventDefault();
     displayRef.current.focus();
+    const doc = (0, _ownerDocument.default)(event.currentTarget);
+    function handleMouseUp(mouseEvent) {
+      if (!displayRef.current) {
+        return;
+      }
+
+      // mouse is over the options/menuitem, don't close the menu
+      if (paperRef.current.contains(mouseEvent.target)) {
+        return;
+      }
+      const triggerElement = displayRef.current.getBoundingClientRect();
+
+      // mouse is inside the trigger, don't close the menu
+      if (mouseEvent.clientX >= triggerElement.left && mouseEvent.clientX <= triggerElement.right && mouseEvent.clientY >= triggerElement.top && mouseEvent.clientY <= triggerElement.bottom) {
+        return;
+      }
+
+      // close the menu
+      update(false, mouseEvent);
+    }
+
+    // `{ once: true }` to automatically remove the listener, see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#once
+    doc.addEventListener('mouseup', handleMouseUp, {
+      once: true
+    });
     update(true, event);
   };
   const handleClose = event => {
@@ -254,7 +294,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onChange(event, child);
     }
   };
-  const handleItemClick = child => event => {
+  const handleItemSelect = child => event => {
     let newValue;
 
     // We use the tabindex attribute to signal the available options.
@@ -272,9 +312,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     } else {
       newValue = child.props.value;
     }
-    if (child.props.onClick) {
-      child.props.onClick(event);
-    }
     if (value !== newValue) {
       setValueState(newValue);
       if (onChange) {
@@ -310,7 +347,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       }
     }
   };
-  const open = displayNode !== null && openState;
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {
@@ -371,7 +407,26 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
-      onClick: handleItemClick(child),
+      onPointerDown: () => {
+        didPointerDownRef.current = true;
+      },
+      onClick: event => {
+        didPointerDownRef.current = false;
+        if (child.props.onClick) {
+          child.props.onClick(event);
+        }
+        handleItemSelect(child)(event);
+      },
+      onMouseUp: event => {
+        if (didPointerDownRef.current) {
+          didPointerDownRef.current = false;
+          return;
+        }
+        if (child.props.onMouseUp) {
+          child.props.onMouseUp(event);
+        }
+        handleItemSelect(child)(event);
+      },
       onKeyUp: event => {
         if (event.key === ' ') {
           // otherwise our MenuItems dispatches a click event
@@ -430,17 +485,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     tabIndex = disabled ? null : 0;
   }
   const buttonId = SelectDisplayProps.id || (name ? `mui-component-select-${name}` : undefined);
-  const ownerState = {
-    ...props,
-    variant,
-    value,
-    open,
-    error
-  };
   const classes = useUtilityClasses(ownerState);
-  const paperProps = {
-    ...MenuProps.PaperProps,
-    ...MenuProps.slotProps?.paper
+  const listProps = {
+    ...MenuProps.MenuListProps,
+    ...(typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list)
   };
   const listboxId = (0, _useId.default)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -514,10 +562,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
           'aria-multiselectable': multiple ? 'true' : undefined,
           disableListWrap: true,
           id: listboxId,
-          ...MenuProps.MenuListProps
+          ...listProps
         },
         paper: {
           ...paperProps,
+          ref: handlePaperRef,
           style: {
             minWidth: menuMinWidth,
             ...(paperProps != null ? paperProps.style : null)

package/Skeleton/Skeleton.js

@@ -87,7 +87,7 @@ const SkeletonRoot = (0, _zeroStyled.styled)('span', {
   return {
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
-    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : theme.alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
     height: '1.2em',
     variants: [{
       props: {

package/Slider/Slider.js

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useSlider = require("./useSlider");
@@ -226,13 +225,13 @@ const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
           backgroundColor: theme.vars.palette.Slider[`${color}Track`],
           borderColor: theme.vars.palette.Slider[`${color}Track`]
         } : {
-          backgroundColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62),
-          borderColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62),
+          backgroundColor: theme.lighten(theme.palette[color].main, 0.62),
+          borderColor: theme.lighten(theme.palette[color].main, 0.62),
           ...theme.applyStyles('dark', {
-            backgroundColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
+            backgroundColor: theme.darken(theme.palette[color].main, 0.5)
           }),
           ...theme.applyStyles('dark', {
-            borderColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
+            borderColor: theme.darken(theme.palette[color].main, 0.5)
           })
         })
       }
@@ -321,21 +320,13 @@ const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
     },
     style: {
       [`&:hover, &.${_sliderClasses.default.focusVisible}`]: {
-        ...(theme.vars ? {
-          boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-        } : {
-          boxShadow: `0px 0px 0px 8px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
-        }),
+        boxShadow: `0px 0px 0px 8px ${theme.alpha((theme.vars || theme).palette[color].main, 0.16)}`,
         '@media (hover: none)': {
           boxShadow: 'none'
         }
       },
       [`&.${_sliderClasses.default.active}`]: {
-        ...(theme.vars ? {
-          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-        } : {
-          boxShadow: `0px 0px 0px 14px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
-        })
+        boxShadow: `0px 0px 0px 14px ${theme.alpha((theme.vars || theme).palette[color].main, 0.16)}`
       }
     }
   }))]

package/Snackbar/Snackbar.js

@@ -380,14 +380,8 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: _propTypes.default.shape({
-    clickAwayListener: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-      children: _propTypes.default.element.isRequired,
-      disableReactTree: _propTypes.default.bool,
-      mouseEvent: _propTypes.default.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
-      onClickAway: _propTypes.default.func,
-      touchEvent: _propTypes.default.oneOf(['onTouchEnd', 'onTouchStart', false])
-    })]),
+  slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
+    clickAwayListener: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     content: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])

package/SpeedDial/SpeedDial.js

@@ -227,13 +227,17 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
    *
    * @param dialActionIndex {number}
    * @param origButtonRef {React.RefObject?}
+   * @param fabSlotOrigButtonRef {React.RefObject?}
    */
-  const createHandleSpeedDialActionButtonRef = (dialActionIndex, origButtonRef) => {
+  const createHandleSpeedDialActionButtonRef = (dialActionIndex, origButtonRef, fabSlotOrigButtonRef) => {
     return buttonRef => {
       actions.current[dialActionIndex + 1] = buttonRef;
       if (origButtonRef) {
         origButtonRef(buttonRef);
       }
+      if (fabSlotOrigButtonRef) {
+        fabSlotOrigButtonRef(buttonRef);
+      }
     };
   };
   const handleKeyDown = event => {
@@ -349,16 +353,26 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
   const children = allItems.map((child, index) => {
     const {
       FabProps: {
-        ref: origButtonRef,
-        ...ChildFabProps
+        ref: origButtonRef
       } = {},
+      slotProps: childSlotProps = {},
       tooltipPlacement: tooltipPlacementProp
     } = child.props;
+    const {
+      fab: {
+        ref: fabSlotOrigButtonRef,
+        ...fabSlotProps
+      } = {},
+      ...restOfSlotProps
+    } = childSlotProps;
     const tooltipPlacement = tooltipPlacementProp || (getOrientation(direction) === 'vertical' ? 'left' : 'top');
     return /*#__PURE__*/React.cloneElement(child, {
-      FabProps: {
-        ...ChildFabProps,
-        ref: createHandleSpeedDialActionButtonRef(index, origButtonRef)
+      slotProps: {
+        fab: {
+          ...fabSlotProps,
+          ref: createHandleSpeedDialActionButtonRef(index, origButtonRef, fabSlotOrigButtonRef)
+        },
+        ...restOfSlotProps
       },
       delay: 30 * (open ? index : allItems.length - index),
       open,

package/SwipeableDrawer/SwipeArea.js

@@ -17,6 +17,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Drawer = require("../Drawer/Drawer");
 var _jsxRuntime = require("react/jsx-runtime");
 const SwipeAreaRoot = (0, _zeroStyled.styled)('div', {
+  name: 'MuiSwipeArea',
   shouldForwardProp: _rootShouldForwardProp.default
 })((0, _memoTheme.default)(({
   theme