@mui/material 6.1.3 → 6.1.4

package/Checkbox/Checkbox.js

@@ -141,6 +141,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     className: clsx(classes.root, className),
+    disableRipple: disableRipple,
     ...other,
     classes: classes
   });

package/IconButton/IconButton.js

@@ -49,12 +49,11 @@ const IconButtonRoot = styled(ButtonBase, {
     duration: theme.transitions.duration.shortest
   }),
   variants: [{
-    props: {
-      disableRipple: false
-    },
+    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),
       '&: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: 'var(--IconButton-hoverBg)',
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -113,17 +112,10 @@ const IconButtonRoot = styled(ButtonBase, {
   })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
-      color,
-      disableRipple: false
+      color
     },
     style: {
-      '&:hover': {
-        backgroundColor: 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),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
+      '--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)
     }
   })), {
     props: {
@@ -164,7 +156,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color = 'default',
     disabled = false,
     disableFocusRipple = false,
-    disableRipple = false,
     size = 'medium',
     ...other
   } = props;
@@ -174,7 +165,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color,
     disabled,
     disableFocusRipple,
-    disableRipple,
     size
   };
   const classes = useUtilityClasses(ownerState);
@@ -183,7 +173,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
-    disableRipple: disableRipple,
     ref: ref,
     ...other,
     ownerState: ownerState,

package/PigmentHidden/PigmentHidden.js

@@ -166,6 +166,7 @@ process.env.NODE_ENV !== "production" ? HiddenCss.propTypes /* remove-proptypes
    */
   xsUp: PropTypes.bool
 } : void 0;
+
 /**
  *
  * Demos:

package/Slider/Slider.js

@@ -335,7 +335,7 @@ export const SliderThumb = styled('span', {
     }
   }))]
 })));
-export const SliderValueLabel = styled(BaseSliderValueLabel, {
+const SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -420,6 +420,29 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {
     }
   }]
 })));
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * @ignore
+   */
+  index: PropTypes.number.isRequired,
+  /**
+   * @ignore
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  value: PropTypes.number.isRequired
+} : void 0;
+export { SliderValueLabel };
 export const SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -759,40 +782,36 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       const percent = valueToPercent(value, min, max);
       const style = axisProps[axis].offset(percent);
       const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
-      return (
-        /*#__PURE__*/
-        /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
-        _jsx(ValueLabelComponent, {
-          ...(!isHostComponent(ValueLabelComponent) && {
-            valueLabelFormat,
-            valueLabelDisplay,
-            value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
-            index,
-            open: open === index || active === index || valueLabelDisplay === 'on',
-            disabled
-          }),
-          ...valueLabelProps,
-          children: /*#__PURE__*/_jsx(ThumbSlot, {
+      return /*#__PURE__*/ /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */_jsx(ValueLabelComponent, {
+        ...(!isHostComponent(ValueLabelComponent) && {
+          valueLabelFormat,
+          valueLabelDisplay,
+          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+          index,
+          open: open === index || active === index || valueLabelDisplay === 'on',
+          disabled
+        }),
+        ...valueLabelProps,
+        children: /*#__PURE__*/_jsx(ThumbSlot, {
+          "data-index": index,
+          ...thumbProps,
+          className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+          style: {
+            ...style,
+            ...getThumbStyle(index),
+            ...thumbProps.style
+          },
+          children: /*#__PURE__*/_jsx(InputSlot, {
             "data-index": index,
-            ...thumbProps,
-            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: {
-              ...style,
-              ...getThumbStyle(index),
-              ...thumbProps.style
-            },
-            children: /*#__PURE__*/_jsx(InputSlot, {
-              "data-index": index,
-              "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
-              "aria-valuenow": scale(value),
-              "aria-labelledby": ariaLabelledby,
-              "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
-              value: values[index],
-              ...inputSliderProps
-            })
+            "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
+            "aria-valuenow": scale(value),
+            "aria-labelledby": ariaLabelledby,
+            "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
+            value: values[index],
+            ...inputSliderProps
           })
-        }, index)
-      );
+        })
+      }, index);
     })]
   });
 });

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.3
+ * @mui/material v6.1.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Checkbox/Checkbox.js

@@ -141,6 +141,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     className: clsx(classes.root, className),
+    disableRipple: disableRipple,
     ...other,
     classes: classes
   });

package/modern/IconButton/IconButton.js

@@ -49,12 +49,11 @@ const IconButtonRoot = styled(ButtonBase, {
     duration: theme.transitions.duration.shortest
   }),
   variants: [{
-    props: {
-      disableRipple: false
-    },
+    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),
       '&: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: 'var(--IconButton-hoverBg)',
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -113,17 +112,10 @@ const IconButtonRoot = styled(ButtonBase, {
   })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
-      color,
-      disableRipple: false
+      color
     },
     style: {
-      '&:hover': {
-        backgroundColor: 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),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
+      '--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)
     }
   })), {
     props: {
@@ -164,7 +156,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color = 'default',
     disabled = false,
     disableFocusRipple = false,
-    disableRipple = false,
     size = 'medium',
     ...other
   } = props;
@@ -174,7 +165,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color,
     disabled,
     disableFocusRipple,
-    disableRipple,
     size
   };
   const classes = useUtilityClasses(ownerState);
@@ -183,7 +173,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
-    disableRipple: disableRipple,
     ref: ref,
     ...other,
     ownerState: ownerState,

package/modern/PigmentHidden/PigmentHidden.js

@@ -166,6 +166,7 @@ process.env.NODE_ENV !== "production" ? HiddenCss.propTypes /* remove-proptypes
    */
   xsUp: PropTypes.bool
 } : void 0;
+
 /**
  *
  * Demos:

package/modern/Slider/Slider.js

@@ -335,7 +335,7 @@ export const SliderThumb = styled('span', {
     }
   }))]
 })));
-export const SliderValueLabel = styled(BaseSliderValueLabel, {
+const SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -420,6 +420,29 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {
     }
   }]
 })));
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * @ignore
+   */
+  index: PropTypes.number.isRequired,
+  /**
+   * @ignore
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  value: PropTypes.number.isRequired
+} : void 0;
+export { SliderValueLabel };
 export const SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -759,40 +782,36 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       const percent = valueToPercent(value, min, max);
       const style = axisProps[axis].offset(percent);
       const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
-      return (
-        /*#__PURE__*/
-        /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
-        _jsx(ValueLabelComponent, {
-          ...(!isHostComponent(ValueLabelComponent) && {
-            valueLabelFormat,
-            valueLabelDisplay,
-            value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
-            index,
-            open: open === index || active === index || valueLabelDisplay === 'on',
-            disabled
-          }),
-          ...valueLabelProps,
-          children: /*#__PURE__*/_jsx(ThumbSlot, {
+      return /*#__PURE__*/ /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */_jsx(ValueLabelComponent, {
+        ...(!isHostComponent(ValueLabelComponent) && {
+          valueLabelFormat,
+          valueLabelDisplay,
+          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+          index,
+          open: open === index || active === index || valueLabelDisplay === 'on',
+          disabled
+        }),
+        ...valueLabelProps,
+        children: /*#__PURE__*/_jsx(ThumbSlot, {
+          "data-index": index,
+          ...thumbProps,
+          className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+          style: {
+            ...style,
+            ...getThumbStyle(index),
+            ...thumbProps.style
+          },
+          children: /*#__PURE__*/_jsx(InputSlot, {
             "data-index": index,
-            ...thumbProps,
-            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
-            style: {
-              ...style,
-              ...getThumbStyle(index),
-              ...thumbProps.style
-            },
-            children: /*#__PURE__*/_jsx(InputSlot, {
-              "data-index": index,
-              "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
-              "aria-valuenow": scale(value),
-              "aria-labelledby": ariaLabelledby,
-              "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
-              value: values[index],
-              ...inputSliderProps
-            })
+            "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
+            "aria-valuenow": scale(value),
+            "aria-labelledby": ariaLabelledby,
+            "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
+            value: values[index],
+            ...inputSliderProps
           })
-        }, index)
-      );
+        })
+      }, index);
     })]
   });
 });

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.1.3
+ * @mui/material v6.1.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/createPalette.js

@@ -9,70 +9,76 @@ import orange from "../colors/orange.js";
 import blue from "../colors/blue.js";
 import lightBlue from "../colors/lightBlue.js";
 import green from "../colors/green.js";
-export const light = {
-  // The colors used to style the text.
-  text: {
-    // The most important text.
-    primary: 'rgba(0, 0, 0, 0.87)',
-    // Secondary text.
-    secondary: 'rgba(0, 0, 0, 0.6)',
-    // Disabled text have even lower visual prominence.
-    disabled: 'rgba(0, 0, 0, 0.38)'
-  },
-  // The color used to divide different elements.
-  divider: 'rgba(0, 0, 0, 0.12)',
-  // The background colors used to style the surfaces.
-  // Consistency between these values is important.
-  background: {
-    paper: common.white,
-    default: common.white
-  },
-  // The colors used to style the action elements.
-  action: {
-    // The color of an active action like an icon button.
-    active: 'rgba(0, 0, 0, 0.54)',
-    // The color of an hovered action.
-    hover: 'rgba(0, 0, 0, 0.04)',
-    hoverOpacity: 0.04,
-    // The color of a selected action.
-    selected: 'rgba(0, 0, 0, 0.08)',
-    selectedOpacity: 0.08,
-    // The color of a disabled action.
-    disabled: 'rgba(0, 0, 0, 0.26)',
-    // The background color of a disabled action.
-    disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(0, 0, 0, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.12
-  }
-};
-export const dark = {
-  text: {
-    primary: common.white,
-    secondary: 'rgba(255, 255, 255, 0.7)',
-    disabled: 'rgba(255, 255, 255, 0.5)',
-    icon: 'rgba(255, 255, 255, 0.5)'
-  },
-  divider: 'rgba(255, 255, 255, 0.12)',
-  background: {
-    paper: '#121212',
-    default: '#121212'
-  },
-  action: {
-    active: common.white,
-    hover: 'rgba(255, 255, 255, 0.08)',
-    hoverOpacity: 0.08,
-    selected: 'rgba(255, 255, 255, 0.16)',
-    selectedOpacity: 0.16,
-    disabled: 'rgba(255, 255, 255, 0.3)',
-    disabledBackground: 'rgba(255, 255, 255, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(255, 255, 255, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.24
-  }
-};
+function getLight() {
+  return {
+    // The colors used to style the text.
+    text: {
+      // The most important text.
+      primary: 'rgba(0, 0, 0, 0.87)',
+      // Secondary text.
+      secondary: 'rgba(0, 0, 0, 0.6)',
+      // Disabled text have even lower visual prominence.
+      disabled: 'rgba(0, 0, 0, 0.38)'
+    },
+    // The color used to divide different elements.
+    divider: 'rgba(0, 0, 0, 0.12)',
+    // The background colors used to style the surfaces.
+    // Consistency between these values is important.
+    background: {
+      paper: common.white,
+      default: common.white
+    },
+    // The colors used to style the action elements.
+    action: {
+      // The color of an active action like an icon button.
+      active: 'rgba(0, 0, 0, 0.54)',
+      // The color of an hovered action.
+      hover: 'rgba(0, 0, 0, 0.04)',
+      hoverOpacity: 0.04,
+      // The color of a selected action.
+      selected: 'rgba(0, 0, 0, 0.08)',
+      selectedOpacity: 0.08,
+      // The color of a disabled action.
+      disabled: 'rgba(0, 0, 0, 0.26)',
+      // The background color of a disabled action.
+      disabledBackground: 'rgba(0, 0, 0, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(0, 0, 0, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12
+    }
+  };
+}
+export const light = getLight();
+function getDark() {
+  return {
+    text: {
+      primary: common.white,
+      secondary: 'rgba(255, 255, 255, 0.7)',
+      disabled: 'rgba(255, 255, 255, 0.5)',
+      icon: 'rgba(255, 255, 255, 0.5)'
+    },
+    divider: 'rgba(255, 255, 255, 0.12)',
+    background: {
+      paper: '#121212',
+      default: '#121212'
+    },
+    action: {
+      active: common.white,
+      hover: 'rgba(255, 255, 255, 0.08)',
+      hoverOpacity: 0.08,
+      selected: 'rgba(255, 255, 255, 0.16)',
+      selectedOpacity: 0.16,
+      disabled: 'rgba(255, 255, 255, 0.3)',
+      disabledBackground: 'rgba(255, 255, 255, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(255, 255, 255, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.24
+    }
+  };
+}
+export const dark = getDark();
 function addLightOrDark(intent, direction, shade, tonalOffset) {
   const tonalOffsetLight = tonalOffset.light || tonalOffset;
   const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
@@ -224,12 +230,14 @@ export default function createPalette(palette) {
     }
     return color;
   };
-  const modes = {
-    dark,
-    light
-  };
+  let modeHydrated;
+  if (mode === 'light') {
+    modeHydrated = getLight();
+  } else if (mode === 'dark') {
+    modeHydrated = getDark();
+  }
   if (process.env.NODE_ENV !== 'production') {
-    if (!modes[mode]) {
+    if (!modeHydrated) {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
@@ -288,7 +296,7 @@ export default function createPalette(palette) {
     // E.g., shift from Red 500 to Red 300 or Red 700.
     tonalOffset,
     // The light and dark mode object.
-    ...modes[mode]
+    ...modeHydrated
   }, other);
   return paletteOutput;
 }

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.3";
+export const version = "6.1.4";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("3");
+export const patch = Number("4");
 export const prerelease = undefined;
 export default version;

package/node/Checkbox/Checkbox.js

@@ -148,6 +148,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
+    disableRipple: disableRipple,
     ...other,
     classes: classes
   });

package/node/IconButton/IconButton.js

@@ -56,12 +56,11 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     duration: theme.transitions.duration.shortest
   }),
   variants: [{
-    props: {
-      disableRipple: false
-    },
+    props: props => !props.disableRipple,
     style: {
+      '--IconButton-hoverBg': theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
       '&: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: 'var(--IconButton-hoverBg)',
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -120,17 +119,10 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   })), ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
-      color,
-      disableRipple: false
+      color
     },
     style: {
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
+      '--IconButton-hoverBg': theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity)
     }
   })), {
     props: {
@@ -171,7 +163,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color = 'default',
     disabled = false,
     disableFocusRipple = false,
-    disableRipple = false,
     size = 'medium',
     ...other
   } = props;
@@ -181,7 +172,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color,
     disabled,
     disableFocusRipple,
-    disableRipple,
     size
   };
   const classes = useUtilityClasses(ownerState);
@@ -190,7 +180,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
-    disableRipple: disableRipple,
     ref: ref,
     ...other,
     ownerState: ownerState,

package/node/PigmentHidden/PigmentHidden.js

@@ -174,6 +174,7 @@ process.env.NODE_ENV !== "production" ? HiddenCss.propTypes /* remove-proptypes
    */
   xsUp: _propTypes.default.bool
 } : void 0;
+
 /**
  *
  * Demos: