@mui/material 5.10.6 → 5.10.8

package/Button/Button.js

@@ -37,8 +37,7 @@ var _ButtonGroupContext = _interopRequireDefault(require("../ButtonGroup/ButtonG
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"],
-      _excluded2 = ["root"];
+const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -283,13 +282,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     type,
     variant
   });
-
-  const _useUtilityClasses = useUtilityClasses(ownerState),
-        {
-    root: classesRoot
-  } = _useUtilityClasses,
-        classes = (0, _objectWithoutPropertiesLoose2.default)(_useUtilityClasses, _excluded2);
-
+  const classes = useUtilityClasses(ownerState);
   const startIcon = startIconProp && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
@@ -302,7 +295,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, (0, _extends2.default)({
     ownerState: ownerState,
-    className: (0, _clsx.default)(contextProps.className, classesRoot, className),
+    className: (0, _clsx.default)(contextProps.className, classes.root, className),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.7
+
+<!-- generated comparing v5.10.6..master -->
+
+_Sep 26, 2022_
+
+A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 [Divider](https://mui.com/joy-ui/react-divider/) component is added to Joy UI (#34403) @siriwatknp
+
+### `@mui/material@5.10.7`
+
+- [CssVarsProvider] Exclude dark mode variables from `:root` stylesheet (#34131) @siriwatknp
+- [Chip] Add chip classes (#33801) @pratikkarad
+- [Slider] Fix typo in the comments in the source (#34452) @HexM7
+- [SvgIcon] Fix passing an ownerState to SvgIcon changes the font size (#34429) @ZeeshanTamboli
+- [Stepper] Fix optional label is not centered when `alternativeLabel` is used (#34335) @ZeeshanTamboli
+- [Tooltip] Add undefined, null or false in `title` (#34289) @abhinav-22-tech
+- Make @emotion/\* fully supported in all Material UI components (#34451) @garronej
+
+### `@mui/system@5.10.7`
+
+- [system] Fix parsing of hsla colors in getLuminance (#34437) @ptrfrncsmrph
+- [system] Fix incorrect type of `shape.borderRadius` in theme (#34076) @ZeeshanTamboli
+- [system] Replace `enableSystem` with `defaultMode` (#33960) @siriwatknp
+
+### `@mui/material@5.0.0-alpha.101`
+
+- [deps] Move @mui/types to dependencies (#34384) @Methuselah96
+
+### `@mui/base@5.0.0-alpha.99`
+
+#### Breaking changes
+
+- [TrapFocus] Rename TrapFocus to FocusTrap (#34216) @kabernardes
+
+  ```diff
+  - import TrapFocus from ‘@mui/base/TrapFocus’;
+  + import FocusTrap from ‘@mui/base/FocusTrap’;
+  ```
+
+#### Changes
+
+- [MultiSelect] Require a single tap to select an item on mobile Chrome (#33932) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.47`
+
+- [Checkbox] spread `value`, `required`, and `readOnly` to input (#34477) @siriwatknp
+- [Chip] Fix unbinded `onClick` prop (#34455) @HexM7
+- [Divider] Add `Divider` component (#34403) @siriwatknp
+- [Radio] spread `readOnly` and `required` to input (#34478) @siriwatknp
+
+### Docs
+
+- [blog] MUI Base announcement typo fixed (#34409) @prakhargupta1
+- [blog] Fix typo in date-pickers v5 stable (#34386) @alexfauquette
+- [blog] Update date on date pickers v5 release blog post (#34406) @joserodolfofreitas
+- [docs] Update `useMenu` and `useMenuItem` hooks demo (#34166) @ZeeshanTamboli
+- [docs] Update the guide for migrating to TSS (#34417) @garronej
+- [docs] Fix typo in `Grid` docs (#34475) @Dustin-Digitar
+- [docs] Fix typo in `Back to top` section in AppBar docs (#34479) @Dustin-Digitar
+- [docs] Standardize all MUI Core "Installation" pages (#34168) @samuelsycamore
+- [docs] Fix webpack file name to the standard: `webpack.config.js` (#34446) @CodingItWrong
+- [docs] Fix Select `onChange` call (#34408) @siriwatknp
+- [docs] Notification for pickers blog - v5 stable (#34400) @joserodolfofreitas
+- [docs] Improve social sharing of docs pages (#34346) @oliviertassinari
+- [docs] Refine the use of MUI vs. Material UI (#34345) @oliviertassinari
+- [docs] Send feedback directly to a dedicated slack channel (#34196) @alexfauquette
+- [website] Adds Bilal to about page (#34412) @MBilalShafi
+- [website] Add date range picker to pricing table (#34399) @joserodolfofreitas
+
+### Core
+
+- [core] Document some types in @mui/styled-engine-sc (#34413) @mnajdova
+- [core] Add yml support to prettier (#33980) @Janpot
+
+All contributors of this release in alphabetical order: @abhinav-22-tech, @alexfauquette, @CodingItWrong, @Dustin-Digitar, @garronej, @HexM7, @howlettt, @Janpot, @joserodolfofreitas, @kabernardes, @MBilalShafi, @Methuselah96, @michaldudak, @mnajdova, @oliviertassinari, @prakhargupta1, @pratikkarad, @ptrfrncsmrph, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 5.10.6
 
 <!-- generated comparing v5.10.5..master -->

package/Checkbox/Checkbox.js

@@ -15,6 +15,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _utils = require("@mui/utils");
 
 var _base = require("@mui/base");
@@ -39,7 +41,7 @@ var _checkboxClasses = _interopRequireWildcard(require("./checkboxClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"];
+const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -106,7 +108,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     indeterminate = false,
     indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
     inputProps,
-    size = 'medium'
+    size = 'medium',
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const icon = indeterminate ? indeterminateIconProp : iconProp;
@@ -129,7 +132,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       fontSize: (_indeterminateIcon$pr = indeterminateIcon.props.fontSize) != null ? _indeterminateIcon$pr : size
     }),
     ownerState: ownerState,
-    ref: ref
+    ref: ref,
+    className: (0, _clsx.default)(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -158,6 +162,11 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
    */
   classes: _propTypes.default.object,
 
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/Chip/chipClasses.d.ts

@@ -5,10 +5,18 @@ export interface ChipClasses {
     sizeSmall: string;
     /** Styles applied to the root element if `size="medium"`. */
     sizeMedium: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the root element if `color="info"`. */
+    colorInfo: string;
     /** Styles applied to the root element if `color="primary"`. */
     colorPrimary: string;
     /** Styles applied to the root element if `color="secondary"`. */
     colorSecondary: string;
+    /** Styles applied to the root element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the root element if `color="warning"`. */
+    colorWarning: string;
     /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
     /** Styles applied to the root element if `onClick` is defined or `clickable={true}`. */

package/Chip/chipClasses.js

@@ -12,6 +12,6 @@ function getChipUtilityClass(slot) {
   return (0, _base.generateUtilityClass)('MuiChip', slot);
 }
 
-const chipClasses = (0, _base.generateUtilityClasses)('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorPrimary', 'colorSecondary', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
+const chipClasses = (0, _base.generateUtilityClasses)('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
 var _default = chipClasses;
 exports.default = _default;

package/DialogContentText/DialogContentText.js

@@ -15,6 +15,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _base = require("@mui/base");
 
 var _styled = _interopRequireWildcard(require("../styles/styled"));
@@ -27,7 +29,7 @@ var _dialogContentTextClasses = require("./dialogContentTextClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children"];
+const _excluded = ["children", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -55,14 +57,18 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
     props: inProps,
     name: 'MuiDialogContentText'
   });
-  const ownerState = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    className
+  } = props,
+        ownerState = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogContentTextRoot, (0, _extends2.default)({
     component: "p",
     variant: "body1",
     color: "text.secondary",
     ref: ref,
-    ownerState: ownerState
+    ownerState: ownerState,
+    className: (0, _clsx.default)(classes.root, className)
   }, props, {
     classes: classes
   }));
@@ -85,6 +91,11 @@ process.env.NODE_ENV !== "production" ? DialogContentText.propTypes
    */
   classes: _propTypes.default.object,
 
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Fab/Fab.js

@@ -27,7 +27,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _fabClasses = _interopRequireWildcard(require("./fabClasses"));
 
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _styled = _interopRequireWildcard(require("../styles/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -47,12 +47,14 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `size${(0, _capitalize.default)(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
-  return (0, _base.unstable_composeClasses)(slots, _fabClasses.getFabUtilityClass, classes);
+  const composedClasses = (0, _base.unstable_composeClasses)(slots, _fabClasses.getFabUtilityClass, classes);
+  return (0, _extends2.default)({}, classes, composedClasses);
 };
 
 const FabRoot = (0, _styled.default)(_ButtonBase.default, {
   name: 'MuiFab',
   slot: 'Root',
+  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
   overridesResolver: (props, styles) => {
     const {
       ownerState
@@ -175,6 +177,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref
   }, other, {
+    classes: classes,
     children: children
   }));
 });

package/FormControlLabel/FormControlLabel.d.ts

@@ -21,7 +21,7 @@ export interface FormControlLabelProps
   componentsProps?: {
     /**
      * Props applied to the Typography wrapper of the passed label.
-     * This is unused if disableTpography is true.
+     * This is unused if disableTypography is true.
      * @default {}
      */
     typography?: TypographyProps;

package/InputLabel/InputLabel.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _base = require("@mui/base");
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
@@ -31,7 +33,7 @@ var _inputLabelClasses = require("./inputLabelClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["disableAnimation", "margin", "shrink", "variant"];
+const _excluded = ["disableAnimation", "margin", "shrink", "variant", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -134,7 +136,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
   });
   const {
     disableAnimation = false,
-    shrink: shrinkProp
+    shrink: shrinkProp,
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const muiFormControl = (0, _useFormControl.default)();
@@ -161,7 +164,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InputLabelRoot, (0, _extends2.default)({
     "data-shrink": shrink,
     ownerState: ownerState,
-    ref: ref
+    ref: ref,
+    className: (0, _clsx.default)(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -184,6 +188,11 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   classes: _propTypes.default.object,
 
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/ListItemButton/ListItemButton.js

@@ -37,7 +37,7 @@ var _listItemButtonClasses = _interopRequireWildcard(require("./listItemButtonCl
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected"];
+const _excluded = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -145,7 +145,8 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     disableGutters = false,
     divider = false,
     focusVisibleClassName,
-    selected = false
+    selected = false,
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const context = React.useContext(_ListContext.default);
@@ -180,7 +181,8 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       href: other.href || other.to,
       component: (other.href || other.to) && component === 'div' ? 'a' : component,
       focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
-      ownerState: ownerState
+      ownerState: ownerState,
+      className: (0, _clsx.default)(classes.root, className)
     }, other, {
       classes: classes,
       children: children
@@ -219,6 +221,11 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
    */
   classes: _propTypes.default.object,
 
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/MenuItem/MenuItem.js

@@ -43,7 +43,7 @@ var _menuItemClasses = _interopRequireWildcard(require("./menuItemClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex"];
+const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -171,7 +171,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     disableGutters = false,
     focusVisibleClassName,
     role = 'menuitem',
-    tabIndex: tabIndexProp
+    tabIndex: tabIndexProp,
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const context = React.useContext(_ListContext.default);
@@ -209,7 +210,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       role: role,
       tabIndex: tabIndex,
       component: component,
-      focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName)
+      focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
+      className: (0, _clsx.default)(classes.root, className)
     }, other, {
       ownerState: ownerState,
       classes: classes
@@ -241,6 +243,11 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes
    */
   classes: _propTypes.default.object,
 
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/Popover/Popover.js

@@ -352,6 +352,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       }, PaperProps, {
         ref: handlePaperRef,
         className: (0, _clsx.default)(classes.paper, PaperProps.className),
+        ownerState: ownerState,
         children: children
       }))
     }))

package/Radio/Radio.js

@@ -15,6 +15,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _utils = require("@mui/utils");
 
 var _base = require("@mui/base");
@@ -39,7 +41,7 @@ var _styled = _interopRequireWildcard(require("../styles/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size"];
+const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -115,7 +117,8 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     icon = defaultIcon,
     name: nameProp,
     onChange: onChangeProp,
-    size = 'medium'
+    size = 'medium',
+    className
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
@@ -151,7 +154,8 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     name: name,
     checked: checked,
     onChange: onChange,
-    ref: ref
+    ref: ref,
+    className: (0, _clsx.default)(classes.root, className)
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes
@@ -178,6 +182,11 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
    */
   classes: _propTypes.default.object,
 
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/StepLabel/StepLabel.js

@@ -53,7 +53,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', orientation, error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     label: ['label', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     iconContainer: ['iconContainer', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
-    labelContainer: ['labelContainer']
+    labelContainer: ['labelContainer', alternativeLabel && 'alternativeLabel']
   };
   return (0, _base.unstable_composeClasses)(slots, _stepLabelClasses.getStepLabelUtilityClass, classes);
 };
@@ -102,7 +102,6 @@ const StepLabelLabel = (0, _styled.default)('span', {
     fontWeight: 500
   },
   [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
-    textAlign: 'center',
     marginTop: 16
   },
   [`&.${_stepLabelClasses.default.error}`]: {
@@ -130,7 +129,10 @@ const StepLabelLabelContainer = (0, _styled.default)('span', {
   theme
 }) => ({
   width: '100%',
-  color: (theme.vars || theme).palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary,
+  [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
+    textAlign: 'center'
+  }
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = (0, _useThemeProps.default)({

package/SvgIcon/SvgIcon.js

@@ -76,7 +76,7 @@ const SvgIconRoot = (0, _styled.default)('svg', {
       inherit: 'inherit',
       small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
       medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
+      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
     color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
@@ -121,13 +121,13 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SvgIconRoot, (0, _extends2.default)({
     as: component,
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: ownerState,
     focusable: "false",
     color: htmlColor,
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
     ref: ref
   }, more, other, {
+    ownerState: ownerState,
     children: [children, titleAccess ? /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
       children: titleAccess
     }) : null]

package/SvgIcon/svgIconClasses.d.ts

@@ -15,6 +15,8 @@ export interface SvgIconClasses {
     fontSizeInherit: string;
     /** Styles applied to the root element if `fontSize="small"`. */
     fontSizeSmall: string;
+    /** Styles applied to the root element if `fontSize="medium"`. */
+    fontSizeMedium: string;
     /** Styles applied to the root element if `fontSize="large"`. */
     fontSizeLarge: string;
 }

package/Tooltip/Tooltip.d.ts

@@ -160,9 +160,9 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    */
   sx?: SxProps<Theme>;
   /**
-   * Tooltip title. Zero-length titles string are never displayed.
+   * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
    */
-  title: NonNullable<React.ReactNode>;
+  title: React.ReactNode;
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

package/Tooltip/Tooltip.js

@@ -498,7 +498,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleFocusRef = (0, _useForkRef.default)(focusVisibleRef, handleUseRef);
   const handleRef = (0, _useForkRef.default)(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
 
-  if (title === '') {
+  if (typeof title !== 'number' && !title) {
     open = false;
   }
 
@@ -838,11 +838,9 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
 
   /**
-   * Tooltip title. Zero-length titles string are never displayed.
+   * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
    */
-  title: _propTypes.default
-  /* @typescript-to-proptypes-ignore */
-  .node.isRequired,
+  title: _propTypes.default.node,
 
   /**
    * The component used for the transition.

package/Unstable_TrapFocus/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from '@mui/base/TrapFocus';
-export * from '@mui/base/TrapFocus';
+export { default } from '@mui/base/FocusTrap';
+export * from '@mui/base/FocusTrap';

package/Unstable_TrapFocus/index.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _TrapFocus.default;
+    return _FocusTrap.default;
   }
 });
 
-var _TrapFocus = _interopRequireDefault(require("@mui/base/TrapFocus"));
+var _FocusTrap = _interopRequireDefault(require("@mui/base/FocusTrap"));

package/esm/Button/Button.js

@@ -1,7 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"],
-      _excluded2 = ["root"];
+const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -259,11 +258,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant
   });
 
-  const _useUtilityClasses = useUtilityClasses(ownerState),
-        {
-    root: classesRoot
-  } = _useUtilityClasses,
-        classes = _objectWithoutPropertiesLoose(_useUtilityClasses, _excluded2);
+  const classes = useUtilityClasses(ownerState);
 
   const startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
     className: classes.startIcon,
@@ -279,7 +274,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
 
   return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
-    className: clsx(contextProps.className, classesRoot, className),
+    className: clsx(contextProps.className, classes.root, className),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,