@mui/material 6.0.0-alpha.2 → 6.0.0-alpha.3

package/node/StepLabel/StepLabel.js

@@ -165,27 +165,34 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: (0, _extends2.default)({}, componentsProps, slotProps)
+    slotProps: (0, _extends2.default)({
+      stepIcon: StepIconProps
+    }, componentsProps, slotProps)
   };
   const [LabelSlot, labelProps] = (0, _useSlot.default)('label', {
     elementType: StepLabelLabel,
     externalForwardedProps,
     ownerState
   });
+  const [StepIconSlot, stepIconProps] = (0, _useSlot.default)('stepIcon', {
+    elementType: StepIconComponent,
+    externalForwardedProps,
+    ownerState
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepLabelRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     ownerState: ownerState
   }, other, {
-    children: [icon || StepIconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StepLabelIconContainer, {
+    children: [icon || StepIconSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StepLabelIconContainer, {
       className: classes.iconContainer,
       ownerState: ownerState,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepIconComponent, (0, _extends2.default)({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepIconSlot, (0, _extends2.default)({
         completed: completed,
         active: active,
         error: error,
         icon: icon
-      }, StepIconProps))
+      }, stepIconProps))
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepLabelLabelContainer, {
       className: classes.labelContainer,
       ownerState: ownerState,
@@ -239,21 +246,25 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+    label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    stepIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({
-    label: _propTypes.default.elementType
+    label: _propTypes.default.elementType,
+    stepIcon: _propTypes.default.elementType
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconComponent: _propTypes.default.elementType,
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconProps: _propTypes.default.object,
   /**

package/node/ToggleButton/ToggleButton.js

@@ -14,11 +14,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styles = require("../styles");
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _toggleButtonClasses = _interopRequireWildcard(require("./toggleButtonClasses"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupContext"));
 var _ToggleButtonGroupButtonContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupButtonContext"));
@@ -28,6 +27,7 @@ const _excluded = ["value"],
   _excluded2 = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiToggleButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -42,7 +42,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _toggleButtonClasses.getToggleButtonUtilityClass, classes);
 };
-const ToggleButtonRoot = (0, _styled.default)(_ButtonBase.default, {
+const ToggleButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiToggleButton',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -52,54 +52,83 @@ const ToggleButtonRoot = (0, _styled.default)(_ButtonBase.default, {
     return [styles.root, styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  let selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
-  let selectedColorChannel;
-  if (theme.vars) {
-    selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
-    selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
-  }
-  return (0, _extends2.default)({}, theme.typography.button, {
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-    padding: 11,
-    border: `1px solid ${(theme.vars || theme).palette.divider}`,
-    color: (theme.vars || theme).palette.action.active
-  }, ownerState.fullWidth && {
-    width: '100%'
-  }, {
-    [`&.${_toggleButtonClasses.default.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled,
-      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+  theme
+}) => (0, _extends2.default)({}, theme.typography.button, {
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  padding: 11,
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  color: (theme.vars || theme).palette.action.active,
+  [`&.${_toggleButtonClasses.default.disabled}`]: {
+    color: (theme.vars || theme).palette.action.disabled,
+    border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+  },
+  '&:hover': {
+    textDecoration: 'none',
+    // Reset on mouse devices
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  variants: [{
+    props: {
+      color: 'standard'
     },
-    '&:hover': {
-      textDecoration: 'none',
-      // Reset on mouse devices
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+    style: {
+      [`&.${_toggleButtonClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette.text.primary,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.selectedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.selectedOpacity)
+          }
+        }
       }
+    }
+  }, ...Object.keys((theme.vars || theme).palette).filter(key => theme.vars ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel : theme.palette[key].main).map(color => ({
+    props: {
+      color
     },
-    [`&.${_toggleButtonClasses.default.selected}`]: {
-      color: selectedColor,
-      backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity),
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity)
+    style: {
+      [`&.${_toggleButtonClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.selectedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.selectedOpacity)
+          }
         }
       }
     }
-  }, ownerState.size === 'small' && {
-    padding: 7,
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && {
-    padding: 15,
-    fontSize: theme.typography.pxToRem(15)
-  });
-});
+  })), {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: 7,
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      padding: 15,
+      fontSize: theme.typography.pxToRem(15)
+    }
+  }]
+}));
 const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const _React$useContext = React.useContext(_ToggleButtonGroupContext.default),
@@ -111,7 +140,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   const resolvedProps = (0, _resolveProps.default)((0, _extends2.default)({}, contextProps, {
     selected: (0, _isValueSelected.default)(inProps.value, contextValue)
   }), inProps);
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: resolvedProps,
     name: 'MuiToggleButton'
   });

package/node/ToggleButtonGroup/ToggleButtonGroup.js

@@ -6,16 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValidReactChildren"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _toggleButtonGroupClasses = _interopRequireWildcard(require("./toggleButtonGroupClasses"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("./ToggleButtonGroupContext"));
@@ -25,6 +24,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiToggleButtonGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
     disabled
   } = ownerState;
   const slots = {
-    root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
+    root: ['root', orientation, fullWidth && 'fullWidth'],
     grouped: ['grouped', `grouped${(0, _capitalize.default)(orientation)}`, disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
@@ -41,7 +41,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _toggleButtonGroupClasses.getToggleButtonGroupUtilityClass, classes);
 };
-const ToggleButtonGroupRoot = (0, _styled.default)('div', {
+const ToggleButtonGroupRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiToggleButtonGroup',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -61,60 +61,72 @@ const ToggleButtonGroupRoot = (0, _styled.default)('div', {
     }, styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   display: 'inline-flex',
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.orientation === 'vertical' && {
-  flexDirection: 'column'
-}, ownerState.fullWidth && {
-  width: '100%'
-}, {
-  [`& .${_toggleButtonGroupClasses.default.grouped}`]: (0, _extends2.default)({}, ownerState.orientation === 'horizontal' ? {
-    [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
-      borderLeft: 0,
-      marginLeft: 0
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${_toggleButtonGroupClasses.default.grouped}`]: {
+        [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
+          borderTop: 0,
+          marginTop: 0
+        }
+      },
+      [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+        marginTop: -1,
+        borderTop: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      },
+      [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
+        borderTop: '1px solid transparent'
+      }
     }
-  } : {
-    [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
-      borderTop: 0,
-      marginTop: 0
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
     }
-  })
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
-    marginLeft: -1,
-    borderLeft: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }
-} : {
-  [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
-    marginTop: -1,
-    borderTop: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0
-  }
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
-    borderLeft: '1px solid transparent'
-  }
-} : {
-  [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
-    borderTop: '1px solid transparent'
-  }
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${_toggleButtonGroupClasses.default.grouped}`]: {
+        [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
+          borderLeft: 0,
+          marginLeft: 0
+        }
+      },
+      [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+        marginLeft: -1,
+        borderLeft: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      },
+      [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
+        borderLeft: '1px solid transparent'
+      }
+    }
+  }]
 }));
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiToggleButtonGroup'
   });

package/node/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getToggleButtonGroupUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 var _default = exports.default = toggleButtonGroupClasses;

package/node/Tooltip/Tooltip.js

@@ -427,8 +427,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
      * @param {KeyboardEvent} nativeEvent
      */
     function handleKeyDown(nativeEvent) {
-      // IE11, Edge (prior to using Bink?) use 'Esc'
-      if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+      if (nativeEvent.key === 'Escape') {
         handleClose(nativeEvent);
       }
     }

package/node/Typography/Typography.js

@@ -51,7 +51,9 @@ const TypographyRoot = exports.TypographyRoot = (0, _styled.default)('span', {
   margin: 0
 }, ownerState.variant === 'inherit' && {
   // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
-  font: 'inherit'
+  font: 'inherit',
+  lineHeight: 'inherit',
+  letterSpacing: 'inherit'
 }, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
   textAlign: ownerState.align
 }, ownerState.noWrap && {

package/node/index.js

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

package/node/styles/createTransitions.js

@@ -62,9 +62,7 @@ function createTransitions(inputTransitions) {
       other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
-      // IE11 support, replace with Number.isNaN
-      // eslint-disable-next-line no-restricted-globals
-      const isNumber = value => !isNaN(parseFloat(value));
+      const isNumber = value => !Number.isNaN(parseFloat(value));
       if (!isString(props) && !Array.isArray(props)) {
         console.error('MUI: Argument "props" must be a string or Array.');
       }

package/node/zero-styled/index.js

@@ -5,6 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createUseThemeProps = createUseThemeProps;
+Object.defineProperty(exports, "css", {
+  enumerable: true,
+  get: function () {
+    return _system.css;
+  }
+});
 Object.defineProperty(exports, "keyframes", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-alpha.2",
+  "version": "6.0.0-alpha.3",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -34,11 +34,11 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.0.0-alpha.2",
+    "@mui/base": "5.0.0-beta.42",
+    "@mui/system": "^6.0.0-alpha.3",
     "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.1",
-    "@mui/system": "^6.0.0-alpha.1",
-    "@mui/base": "5.0.0-beta.42"
+    "@mui/utils": "^6.0.0-alpha.3",
+    "@mui/core-downloads-tracker": "^6.0.0-alpha.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/createTransitions.js

@@ -54,9 +54,7 @@ export default function createTransitions(inputTransitions) {
       other = _objectWithoutPropertiesLoose(options, _excluded);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
-      // IE11 support, replace with Number.isNaN
-      // eslint-disable-next-line no-restricted-globals
-      const isNumber = value => !isNaN(parseFloat(value));
+      const isNumber = value => !Number.isNaN(parseFloat(value));
       if (!isString(props) && !Array.isArray(props)) {
         console.error('MUI: Argument "props" must be a string or Array.');
       }