@mui/material 5.10.5 → 5.10.7

package/legacy/InputLabel/InputLabel.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
+import clsx from 'clsx';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import FormLabel, { formLabelClasses } from '../FormLabel';
@@ -110,7 +111,8 @@ var InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref)
       margin = props.margin,
       shrinkProp = props.shrink,
       variant = props.variant,
-      other = _objectWithoutProperties(props, ["disableAnimation", "margin", "shrink", "variant"]);
+      className = props.className,
+      other = _objectWithoutProperties(props, ["disableAnimation", "margin", "shrink", "variant", "className"]);
 
   var muiFormControl = useFormControl();
   var shrink = shrinkProp;
@@ -138,7 +140,8 @@ var InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref)
   return /*#__PURE__*/_jsx(InputLabelRoot, _extends({
     "data-shrink": shrink,
     ownerState: ownerState,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -161,6 +164,11 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @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

package/legacy/ListItemButton/ListItemButton.js

@@ -118,7 +118,8 @@ var ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inPro
       focusVisibleClassName = props.focusVisibleClassName,
       _props$selected = props.selected,
       selected = _props$selected === void 0 ? false : _props$selected,
-      other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected"]);
+      className = props.className,
+      other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"]);
 
   var context = React.useContext(ListContext);
   var childContext = {
@@ -154,7 +155,8 @@ var ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inPro
       href: other.href || other.to,
       component: (other.href || other.to) && component === 'div' ? 'a' : component,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-      ownerState: ownerState
+      ownerState: ownerState,
+      className: clsx(classes.root, className)
     }, other, {
       classes: classes,
       children: children
@@ -193,6 +195,11 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/legacy/MenuItem/MenuItem.js

@@ -131,7 +131,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       _props$role = props.role,
       role = _props$role === void 0 ? 'menuitem' : _props$role,
       tabIndexProp = props.tabIndex,
-      other = _objectWithoutProperties(props, ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex"]);
+      className = props.className,
+      other = _objectWithoutProperties(props, ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"]);
 
   var context = React.useContext(ListContext);
   var childContext = {
@@ -170,7 +171,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       role: role,
       tabIndex: tabIndex,
       component: component,
-      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName)
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+      className: clsx(classes.root, className)
     }, other, {
       ownerState: ownerState,
       classes: classes
@@ -202,6 +204,11 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/legacy/OutlinedInput/NotchedOutline.js

@@ -29,6 +29,8 @@ var NotchedOutlineLegend = styled('legend')(function (_ref) {
   return _extends({
     float: 'unset',
     // Fix conflict with bootstrap
+    width: 'auto',
+    // Fix conflict with bootstrap
     overflow: 'hidden'
   }, !ownerState.withLabel && {
     padding: 0,
@@ -41,8 +43,6 @@ var NotchedOutlineLegend = styled('legend')(function (_ref) {
   }, ownerState.withLabel && _extends({
     display: 'block',
     // Fix conflict with normalize.css and sanitize.css
-    width: 'auto',
-    // Fix conflict with bootstrap
     padding: 0,
     height: 11,
     // sync with `lineHeight` in `legend` styles

package/legacy/Radio/Radio.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
@@ -89,7 +90,8 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       onChangeProp = props.onChange,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
-      other = _objectWithoutProperties(props, ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size"]);
+      className = props.className,
+      other = _objectWithoutProperties(props, ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"]);
 
   var ownerState = _extends({}, props, {
     color: color,
@@ -125,7 +127,8 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     name: name,
     checked: checked,
     onChange: onChange,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes
@@ -152,6 +155,11 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @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

package/legacy/StepLabel/StepLabel.js

@@ -26,7 +26,7 @@ var useUtilityClasses = function 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 composeClasses(slots, getStepLabelUtilityClass, classes);
 };
@@ -76,7 +76,6 @@ var StepLabelLabel = styled('span', {
     color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.alternativeLabel), {
-    textAlign: 'center',
     marginTop: 16
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.error), {
     color: (theme.vars || theme).palette.error.main
@@ -106,10 +105,12 @@ var StepLabelLabelContainer = styled('span', {
   }
 })(function (_ref4) {
   var theme = _ref4.theme;
-  return {
+  return _defineProperty({
     width: '100%',
     color: (theme.vars || theme).palette.text.secondary
-  };
+  }, "&.".concat(stepLabelClasses.alternativeLabel), {
+    textAlign: 'center'
+  });
 });
 var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   var props = useThemeProps({

package/legacy/SvgIcon/SvgIcon.js

@@ -47,7 +47,7 @@ var SvgIconRoot = styled('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 : {
@@ -98,13 +98,13 @@ var SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   return /*#__PURE__*/_jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(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__*/_jsx("title", {
       children: titleAccess
     }) : null]

package/legacy/Tooltip/Tooltip.js

@@ -488,7 +488,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   var handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
   var handleRef = useForkRef(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
 
-  if (title === '') {
+  if (typeof title !== 'number' && !title) {
     open = false;
   }
 
@@ -831,11 +831,9 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.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
-  /* @typescript-to-proptypes-ignore */
-  .node.isRequired,
+  title: PropTypes.node,
 
   /**
    * The component used for the transition.

package/legacy/Unstable_TrapFocus/index.js

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

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.5
+/** @license MUI v5.10.7
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -280,4 +280,5 @@ export { StyledEngineProvider } from './styles';
 export { default as unstable_composeClasses } from '@mui/base/composeClasses';
 export { default as generateUtilityClass } from '@mui/base/generateUtilityClass';
 export * from '@mui/base/generateUtilityClass';
-export { default as generateUtilityClasses } from '@mui/base/generateUtilityClasses';
+export { default as generateUtilityClasses } from '@mui/base/generateUtilityClasses';
+export { default as Unstable_TrapFocus } from './Unstable_TrapFocus';

package/legacy/styles/CssVarsProvider.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
+import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 
 var shouldSkipGeneratingVar = function shouldSkipGeneratingVar(keys) {
   var _keys$;
@@ -27,7 +28,8 @@ var _createCssVarsProvide = createCssVarsProvider({
 
     return newTheme;
   },
-  shouldSkipGeneratingVar: shouldSkipGeneratingVar
+  shouldSkipGeneratingVar: shouldSkipGeneratingVar,
+  excludeVariablesFromRoot: excludeVariablesFromRoot
 }),
     CssVarsProvider = _createCssVarsProvide.CssVarsProvider,
     useColorScheme = _createCssVarsProvide.useColorScheme,

package/legacy/styles/excludeVariablesFromRoot.js

@@ -0,0 +1,12 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+var excludeVariablesFromRoot = function excludeVariablesFromRoot(cssVarPrefix) {
+  return [].concat(_toConsumableArray(_toConsumableArray(Array(24)).map(function (_, index) {
+    return "--".concat(cssVarPrefix ? "".concat(cssVarPrefix, "-") : '', "overlays-").concat(index + 1);
+  })), ["--".concat(cssVarPrefix ? "".concat(cssVarPrefix, "-") : '', "palette-AppBar-darkBg"), "--".concat(cssVarPrefix ? "".concat(cssVarPrefix, "-") : '', "palette-AppBar-darkColor")]);
+};
+
+export default excludeVariablesFromRoot;

package/modern/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';
@@ -255,11 +254,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,
@@ -275,7 +270,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,

package/modern/CardHeader/CardHeader.js

@@ -176,9 +176,7 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .elementType,
+  component: PropTypes.elementType,
 
   /**
    * If `true`, `subheader` and `title` won't be wrapped by a Typography component.

package/modern/Checkbox/Checkbox.js

@@ -1,8 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"];
+const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
@@ -80,7 +81,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     indeterminate = false,
     indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
     inputProps,
-    size = 'medium'
+    size = 'medium',
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -106,7 +108,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       fontSize: indeterminateIcon.props.fontSize ?? size
     }),
     ownerState: ownerState,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -135,6 +138,11 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @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

package/modern/Chip/chipClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getChipUtilityClass(slot) {
   return generateUtilityClass('MuiChip', slot);
 }
-const chipClasses = 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 = 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']);
 export default chipClasses;

package/modern/DialogContentText/DialogContentText.js

@@ -1,8 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children"];
+const _excluded = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -33,7 +34,10 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
     name: 'MuiDialogContentText'
   });
 
-  const ownerState = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    className
+  } = props,
+        ownerState = _objectWithoutPropertiesLoose(props, _excluded);
 
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(DialogContentTextRoot, _extends({
@@ -41,7 +45,8 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
     variant: "body1",
     color: "text.secondary",
     ref: ref,
-    ownerState: ownerState
+    ownerState: ownerState,
+    className: clsx(classes.root, className)
   }, props, {
     classes: classes
   }));
@@ -64,6 +69,11 @@ process.env.NODE_ENV !== "production" ? DialogContentText.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/InputLabel/InputLabel.js

@@ -1,9 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disableAnimation", "margin", "shrink", "variant"];
+const _excluded = ["disableAnimation", "margin", "shrink", "variant", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
+import clsx from 'clsx';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import FormLabel, { formLabelClasses } from '../FormLabel';
@@ -110,7 +111,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
 
   const {
     disableAnimation = false,
-    shrink: shrinkProp
+    shrink: shrinkProp,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -140,7 +142,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
   return /*#__PURE__*/_jsx(InputLabelRoot, _extends({
     "data-shrink": shrink,
     ownerState: ownerState,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -163,6 +166,11 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @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

package/modern/ListItemButton/ListItemButton.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected"];
+const _excluded = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -115,7 +115,8 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     disableGutters = false,
     divider = false,
     focusVisibleClassName,
-    selected = false
+    selected = false,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -153,7 +154,8 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       href: other.href || other.to,
       component: (other.href || other.to) && component === 'div' ? 'a' : component,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-      ownerState: ownerState
+      ownerState: ownerState,
+      className: clsx(classes.root, className)
     }, other, {
       classes: classes,
       children: children
@@ -192,6 +194,11 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/modern/MenuItem/MenuItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex"];
+const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -138,7 +138,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     disableGutters = false,
     focusVisibleClassName,
     role = 'menuitem',
-    tabIndex: tabIndexProp
+    tabIndex: tabIndexProp,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -179,7 +180,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       role: role,
       tabIndex: tabIndex,
       component: component,
-      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName)
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+      className: clsx(classes.root, className)
     }, other, {
       ownerState: ownerState,
       classes: classes
@@ -211,6 +213,11 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/modern/OutlinedInput/NotchedOutline.js

@@ -30,6 +30,8 @@ const NotchedOutlineLegend = styled('legend')(({
 }) => _extends({
   float: 'unset',
   // Fix conflict with bootstrap
+  width: 'auto',
+  // Fix conflict with bootstrap
   overflow: 'hidden'
 }, !ownerState.withLabel && {
   padding: 0,
@@ -42,8 +44,6 @@ const NotchedOutlineLegend = styled('legend')(({
 }, ownerState.withLabel && _extends({
   display: 'block',
   // Fix conflict with normalize.css and sanitize.css
-  width: 'auto',
-  // Fix conflict with bootstrap
   padding: 0,
   height: 11,
   // sync with `lineHeight` in `legend` styles

package/modern/Radio/Radio.js

@@ -1,8 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size"];
+const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
@@ -87,7 +88,8 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     icon = defaultIcon,
     name: nameProp,
     onChange: onChangeProp,
-    size = 'medium'
+    size = 'medium',
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -125,7 +127,8 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     name: name,
     checked: checked,
     onChange: onChange,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes
@@ -152,6 +155,11 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @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

package/modern/StepLabel/StepLabel.js

@@ -28,7 +28,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 composeClasses(slots, getStepLabelUtilityClass, classes);
 };
@@ -77,7 +77,6 @@ const StepLabelLabel = styled('span', {
     fontWeight: 500
   },
   [`&.${stepLabelClasses.alternativeLabel}`]: {
-    textAlign: 'center',
     marginTop: 16
   },
   [`&.${stepLabelClasses.error}`]: {
@@ -105,7 +104,10 @@ const StepLabelLabelContainer = styled('span', {
   theme
 }) => ({
   width: '100%',
-  color: (theme.vars || theme).palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary,
+  [`&.${stepLabelClasses.alternativeLabel}`]: {
+    textAlign: 'center'
+  }
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = useThemeProps({