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

package/modern/IconButton/IconButton.js

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

package/modern/InputAdornment/InputAdornment.js

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

package/modern/Link/Link.js

@@ -12,8 +12,19 @@ import { styled, useTheme } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
-import getTextDecoration, { colorTransformations } from './getTextDecoration';
+import getTextDecoration from './getTextDecoration';
 import { jsx as _jsx } from "react/jsx-runtime";
+const v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true
+};
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -83,6 +94,30 @@ const LinkRoot = styled(Typography, {
         '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.4)` : alpha(theme.palette[color].main, 0.4)
       }
     })), {
+      props: {
+        underline: 'always',
+        color: 'textPrimary'
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
+      }
+    }, {
+      props: {
+        underline: 'always',
+        color: 'textSecondary'
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.secondaryChannel} / 0.4)` : alpha(theme.palette.text.secondary, 0.4)
+      }
+    }, {
+      props: {
+        underline: 'always',
+        color: 'textDisabled'
+      },
+      style: {
+        '--Link-underlineColor': (theme.vars || theme).palette.text.disabled
+      }
+    }, {
       props: {
         component: 'button'
       },
@@ -171,12 +206,12 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     ownerState: ownerState,
     variant: variant,
     ...other,
-    sx: [...(colorTransformations[color] === undefined ? [{
+    sx: [...(v6Colors[color] === undefined ? [{
       color
     }] : []), ...(Array.isArray(sx) ? sx : [sx])],
     style: {
       ...other.style,
-      ...(underline === 'always' && color !== 'inherit' && {
+      ...(underline === 'always' && color !== 'inherit' && !v6Colors[color] && {
         '--Link-underlineColor': getTextDecoration({
           theme,
           ownerState
@@ -206,7 +241,7 @@ process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ =
    * The color of the link.
    * @default 'primary'
    */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.any,
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'success', 'error', 'info', 'warning', 'textPrimary', 'textSecondary', 'textDisabled']), PropTypes.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/modern/Link/getTextDecoration.js

@@ -1,28 +1,10 @@
 import { getPath } from '@mui/system/style';
 import { alpha } from '@mui/system/colorManipulator';
-// TODO v7: remove this transformation
-export const colorTransformations = {
-  textPrimary: 'text.primary',
-  textSecondary: 'text.secondary',
-  // For main palette, the color will be applied by the styles above.
-  primary: null,
-  secondary: null,
-  error: null,
-  info: null,
-  success: null,
-  warning: null
-};
 const getTextDecoration = ({
   theme,
   ownerState
 }) => {
-  let transformedColor = colorTransformations[ownerState.color];
-  if (transformedColor === null) {
-    return null;
-  }
-  if (transformedColor === undefined) {
-    transformedColor = ownerState.color;
-  }
+  const transformedColor = ownerState.color;
   const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
   const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {

package/modern/ListItemText/ListItemText.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import Typography from '../Typography';
+import Typography, { typographyClasses } from '../Typography';
 import ListContext from '../List/ListContext';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
@@ -43,6 +43,12 @@ const ListItemTextRoot = styled('div', {
   minWidth: 0,
   marginTop: 4,
   marginBottom: 4,
+  [`.${typographyClasses.root}:where(& .${listItemTextClasses.primary})`]: {
+    display: 'block'
+  },
+  [`.${typographyClasses.root}:where(& .${listItemTextClasses.secondary})`]: {
+    display: 'block'
+  },
   variants: [{
     props: ({
       ownerState
@@ -95,7 +101,6 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
       variant: dense ? 'body2' : 'body1',
       className: classes.primary,
       component: primaryTypographyProps?.variant ? undefined : 'span',
-      display: "block",
       ...primaryTypographyProps,
       children: primary
     });
@@ -104,8 +109,7 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
     secondary = /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
       className: classes.secondary,
-      color: "text.secondary",
-      display: "block",
+      color: "textSecondary",
       ...secondaryTypographyProps,
       children: secondary
     });

package/modern/Slider/useSlider.js

@@ -177,7 +177,7 @@ export function useSlider(parameters) {
     tabIndex,
     value: valueProp
   } = parameters;
-  const touchId = React.useRef();
+  const touchId = React.useRef(undefined);
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
   // - The active state isn't transferred when inversing a range slider.
@@ -215,7 +215,7 @@ export function useSlider(parameters) {
   })) : marksProp || [];
   const marksValues = marks.map(mark => mark.value);
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
-  const sliderRef = React.useRef();
+  const sliderRef = React.useRef(null);
   const handleRef = useForkRef(ref, sliderRef);
   const createHandleHiddenInputFocus = otherHandlers => event => {
     const index = Number(event.currentTarget.getAttribute('data-index'));
@@ -318,7 +318,7 @@ export function useSlider(parameters) {
     // @ts-ignore
     changeValue(event, event.target.valueAsNumber);
   };
-  const previousIndex = React.useRef();
+  const previousIndex = React.useRef(undefined);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';

package/modern/Typography/Typography.js

@@ -9,6 +9,17 @@ import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import { getTypographyUtilityClass } from './typographyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true
+};
 const extendSxProp = internal_createExtendSxProp();
 const useUtilityClasses = ownerState => {
   const {
@@ -59,6 +70,13 @@ export const TypographyRoot = styled('span', {
     style: {
       color: (theme.vars || theme).palette[color].main
     }
+  })), ...Object.entries(theme.palette?.text || {}).filter(([, value]) => typeof value === 'string').map(([color]) => ({
+    props: {
+      color: `text${capitalize(color)}`
+    },
+    style: {
+      color: (theme.vars || theme).palette.text[color]
+    }
   })), {
     props: ({
       ownerState
@@ -104,19 +122,6 @@ const defaultVariantMapping = {
   body2: 'p',
   inherit: 'p'
 };
-
-// TODO v7: remove this transformation and `extendSxProp`
-const colorTransformations = {
-  textPrimary: 'text.primary',
-  textSecondary: 'text.secondary',
-  // For the main palette, the color will be applied by the `...Object.entries(theme.palette)` clause in the TypographyRoot's styles
-  primary: null,
-  secondary: null,
-  error: null,
-  info: null,
-  success: null,
-  warning: null
-};
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
   const {
     color,
@@ -125,11 +130,12 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     props: inProps,
     name: 'MuiTypography'
   });
-  const textColor = colorTransformations[color];
+  const isSxColor = !v6Colors[color];
+  // TODO: Remove `extendSxProp` in v7
   const props = extendSxProp({
     ...themeProps,
-    ...(textColor !== null && {
-      color: textColor || color
+    ...(isSxColor && {
+      color
     })
   });
   const {
@@ -193,6 +199,12 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'success', 'error', 'info', 'warning', 'textPrimary', 'textSecondary', 'textDisabled']), PropTypes.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/modern/index.js

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

package/modern/styles/createGetSelector.js

@@ -22,7 +22,9 @@ export default (theme => (colorScheme, css) => {
       if (rule === 'media') {
         return {
           ':root': css,
-          '@media (prefers-color-scheme: dark) { :root': excludedVariables
+          [`@media (prefers-color-scheme: dark)`]: {
+            ':root': excludedVariables
+          }
         };
       }
       if (rule) {
@@ -43,7 +45,11 @@ export default (theme => (colorScheme, css) => {
     }
   } else if (colorScheme) {
     if (rule === 'media') {
-      return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`;
+      return {
+        [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
+          ':root': css
+        }
+      };
     }
     if (rule) {
       return rule.replace('%s', String(colorScheme));

package/modern/useAutocomplete/useAutocomplete.js

@@ -187,14 +187,6 @@ function useAutocomplete(props) {
     resetInputValue(null, value, 'reset');
   }, [value, resetInputValue, focused, previousProps.value, freeSolo]);
   const listboxAvailable = open && filteredOptions.length > 0 && !readOnly;
-  if (process.env.NODE_ENV !== 'production') {
-    if (value !== null && !freeSolo && options.length > 0) {
-      const missingValue = (multiple ? value : [value]).filter(value2 => !options.some(option => isOptionEqualToValue(option, value2)));
-      if (missingValue.length > 0) {
-        console.warn([`MUI: The value provided to ${componentName} is invalid.`, `None of the options match with \`${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}\`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\n'));
-      }
-    }
-  }
   const focusTag = useEventCallback(tagToFocus => {
     if (tagToFocus === -1) {
       inputRef.current.focus();

package/modern/version/index.js

@@ -1,7 +1,7 @@
-export const version = "6.0.0-beta.5";
+export const version = "6.0.0-beta.6";
 export const major = Number("6");
 export const minor = Number("0");
 export const patch = Number("0");
 export const preReleaseLabel = "beta" || null;
-export const preReleaseNumber = Number("5") || null;
+export const preReleaseNumber = Number("6") || null;
 export default version;

package/node/AppBar/AppBar.js

@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
 
 // var2 is the fallback.
 // Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
-const joinVars = (var1, var2) => var1 ? `${var1 == null ? void 0 : var1.replace(')', '')}, ${var2})` : var2;
+const joinVars = (var1, var2) => var1 ? `${var1?.replace(')', '')}, ${var2})` : var2;
 const AppBarRoot = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiAppBar',
   slot: 'Root',
@@ -121,18 +121,15 @@ const AppBarRoot = (0, _zeroStyled.styled)(_Paper.default, {
         '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
       })
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => {
-    var _theme$vars, _theme$vars2;
-    return {
-      props: {
-        color
-      },
-      style: {
-        '--AppBar-background': ((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette[color].main,
-        '--AppBar-color': ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[color].contrastText
-      }
-    };
-  }), {
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      '--AppBar-background': (theme.vars ?? theme).palette[color].main,
+      '--AppBar-color': (theme.vars ?? theme).palette[color].contrastText
+    }
+  })), {
     props: props => props.enableColorOnDark === true && !['inherit', 'transparent'].includes(props.color),
     style: {
       backgroundColor: 'var(--AppBar-background)',

package/node/Autocomplete/Autocomplete.js

@@ -525,10 +525,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     ref: listboxRef,
     ...otherListboxProps
   } = getListboxProps();
-  const defaultGetOptionLabel = option => {
-    var _option$label;
-    return (_option$label = option.label) != null ? _option$label : option;
-  };
+  const defaultGetOptionLabel = option => option.label ?? option;
   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
@@ -740,7 +737,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
                 title: clearText,
                 ownerState: ownerState,
                 ...clearIndicatorSlotProps,
-                className: (0, _clsx.default)(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
+                className: (0, _clsx.default)(classes.clearIndicator, clearIndicatorSlotProps?.className),
                 children: clearIcon
               }) : null, hasPopupIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopupIndicator, {
                 ...getPopupIndicatorProps(),
@@ -749,7 +746,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
                 title: popupOpen ? closeText : openText,
                 ownerState: ownerState,
                 ...popupIndicatorSlotProps,
-                className: (0, _clsx.default)(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
+                className: (0, _clsx.default)(classes.popupIndicator, popupIndicatorSlotProps?.className),
                 children: popupIcon
               }) : null]
             })
@@ -1098,7 +1095,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   openText: _propTypes.default.string,
   /**
-   * Array of options.
+   * A list of options that will be shown in the Autocomplete.
    */
   options: _propTypes.default.array.isRequired,
   /**

package/node/AvatarGroup/AvatarGroup.js

@@ -56,7 +56,6 @@ const AvatarGroupRoot = (0, _zeroStyled.styled)('div', {
   }
 }));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
-  var _slotProps$additional;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiAvatarGroup'
@@ -104,7 +103,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const externalForwardedProps = {
     slots,
     slotProps: {
-      surplus: (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps == null ? void 0 : componentsProps.additionalAvatar,
+      surplus: slotProps.additionalAvatar ?? componentsProps?.additionalAvatar,
       ...componentsProps,
       ...slotProps
     }

package/node/Badge/Badge.js

@@ -217,7 +217,6 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
   }]
 }));
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBadge'
@@ -285,10 +284,10 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;
-  const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;
-  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;
+  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
+  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
+  const rootSlotProps = slotProps?.root ?? componentsProps.root;
+  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
   const rootProps = (0, _useSlotProps.default)({
     elementType: RootSlot,
     externalSlotProps: rootSlotProps,
@@ -298,13 +297,13 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       as: component
     },
     ownerState,
-    className: (0, _clsx.default)(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)
+    className: (0, _clsx.default)(rootSlotProps?.className, classes.root, className)
   });
   const badgeProps = (0, _useSlotProps.default)({
     elementType: BadgeSlot,
     externalSlotProps: badgeSlotProps,
     ownerState,
-    className: (0, _clsx.default)(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
+    className: (0, _clsx.default)(classes.badge, badgeSlotProps?.className)
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
     ...rootProps,

package/node/Breadcrumbs/Breadcrumbs.js

@@ -162,7 +162,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbsRoot, {
     ref: ref,
     component: component,
-    color: "text.secondary",
+    color: "textSecondary",
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     ...other,

package/node/Button/Button.js

@@ -86,7 +86,6 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
 })(({
   theme
 }) => {
-  var _theme$palette$getCon, _theme$palette;
   const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
   const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
   return {
@@ -180,7 +179,7 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       style: {
         '--variant-containedColor': theme.vars ?
         // this is safe because grey does not change between default light/dark mode
-        theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, inheritContainedBackgroundColor),
+        theme.vars.palette.text.primary : theme.palette.getContrastText?.(inheritContainedBackgroundColor),
         '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
         '@media (hover: hover)': {
           '&:hover': {

package/node/ButtonBase/TouchRipple.js

@@ -193,11 +193,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       center = centerProp || options.pulsate,
       fakeElement = false // For test purposes
     } = options;
-    if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
+    if (event?.type === 'mousedown' && ignoringMouseDown.current) {
       ignoringMouseDown.current = false;
       return;
     }
-    if ((event == null ? void 0 : event.type) === 'touchstart') {
+    if (event?.type === 'touchstart') {
       ignoringMouseDown.current = true;
     }
     const element = fakeElement ? null : container.current;
@@ -237,7 +237,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     }
 
     // Touche devices
-    if (event != null && event.touches) {
+    if (event?.touches) {
       // check that this isn't another touchstart due to multitouch
       // otherwise we will only clear a single timer when unmounting while two
       // are running
@@ -281,7 +281,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
 
     // The touch interaction occurs too quickly.
     // We still want to show ripple effect.
-    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
+    if (event?.type === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
       startTimer.start(0, () => {

package/node/CardHeader/CardHeader.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _Typography = _interopRequireWildcard(require("../Typography"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardHeaderClasses = _interopRequireWildcard(require("./cardHeaderClasses"));
@@ -69,7 +69,13 @@ const CardHeaderContent = (0, _zeroStyled.styled)('div', {
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content
 })({
-  flex: '1 1 auto'
+  flex: '1 1 auto',
+  [`.${_Typography.typographyClasses.root}:where(& .${_cardHeaderClasses.default.title})`]: {
+    display: 'block'
+  },
+  [`.${_Typography.typographyClasses.root}:where(& .${_cardHeaderClasses.default.subheader})`]: {
+    display: 'block'
+  }
 });
 const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
@@ -100,7 +106,6 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
       variant: avatar ? 'body2' : 'h5',
       className: classes.title,
       component: "span",
-      display: "block",
       ...titleTypographyProps,
       children: title
     });
@@ -110,9 +115,8 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
     subheader = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       variant: avatar ? 'body2' : 'body1',
       className: classes.subheader,
-      color: "text.secondary",
+      color: "textSecondary",
       component: "span",
-      display: "block",
       ...subheaderTypographyProps,
       children: subheader
     });

package/node/Checkbox/Checkbox.js

@@ -106,7 +106,6 @@ const defaultCheckedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.default,
 const defaultIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBoxOutlineBlank.default, {});
 const defaultIndeterminateIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IndeterminateCheckBox.default, {});
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
-  var _icon$props$fontSize, _indeterminateIcon$pr;
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCheckbox'
@@ -140,10 +139,10 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       ...inputProps
     },
     icon: /*#__PURE__*/React.cloneElement(icon, {
-      fontSize: (_icon$props$fontSize = icon.props.fontSize) != null ? _icon$props$fontSize : size
+      fontSize: icon.props.fontSize ?? size
     }),
     checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {
-      fontSize: (_indeterminateIcon$pr = indeterminateIcon.props.fontSize) != null ? _indeterminateIcon$pr : size
+      fontSize: indeterminateIcon.props.fontSize ?? size
     }),
     ownerState: ownerState,
     ref: ref,