@mui/material 5.10.6 → 5.10.8

package/esm/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';
@@ -82,7 +83,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);
 
@@ -108,7 +110,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: clsx(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -137,6 +140,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/esm/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/esm/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/esm/Fab/Fab.js

@@ -9,7 +9,7 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import fabClasses, { getFabUtilityClass } from './fabClasses';
-import styled from '../styles/styled';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -22,12 +22,14 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
-  return composeClasses(slots, getFabUtilityClass, classes);
+  const composedClasses = composeClasses(slots, getFabUtilityClass, classes);
+  return _extends({}, classes, composedClasses);
 };
 
 const FabRoot = styled(ButtonBase, {
   name: 'MuiFab',
   slot: 'Root',
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
   overridesResolver: (props, styles) => {
     const {
       ownerState
@@ -153,6 +155,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref
   }, other, {
+    classes: classes,
     children: children
   }));
 });

package/esm/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/esm/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/esm/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/esm/Popover/Popover.js

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

package/esm/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';
@@ -89,7 +90,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);
 
@@ -127,7 +129,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
@@ -154,6 +157,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/esm/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({

package/esm/SvgIcon/SvgIcon.js

@@ -53,7 +53,7 @@ const 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 : {
@@ -101,13 +101,13 @@ const 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/esm/Tooltip/Tooltip.js

@@ -465,7 +465,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
   const handleRef = useForkRef(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
 
-  if (title === '') {
+  if (typeof title !== 'number' && !title) {
     open = false;
   }
 
@@ -807,11 +807,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/esm/Unstable_TrapFocus/index.js

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

package/esm/locale/index.js

@@ -158,6 +158,86 @@ export const arEG = {
     }
   }
 };
+export const arSA = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'إظهار المسار'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'الانتقال إلى الصفحة الأولى';
+          }
+
+          if (type === 'last') {
+            return 'الانتقال إلى الصفحة الأخيرة';
+          }
+
+          if (type === 'next') {
+            return 'الانتقال إلى الصفحة التالية';
+          } // if (type === 'previous') {
+
+
+          return 'الانتقال إلى الصفحة السابقة';
+        },
+        labelRowsPerPage: 'عدد الصفوف في الصفحة:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} من ${count !== -1 ? count : ` أكثر من${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} ${value !== 1 ? 'نجوم' : 'نجمة'}`,
+        emptyLabelText: 'فارغ'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'مسح',
+        closeText: 'إغلاق',
+        loadingText: 'جار التحميل...',
+        noOptionsText: 'لا توجد خيارات',
+        openText: 'فتح'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'إغلاق'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'التنقل عبر الصفحات',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'الانتقال إلى '} صفحة ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'الانتقال إلى الصفحة الأولى';
+          }
+
+          if (type === 'last') {
+            return 'الانتقال الي الصفحة الأخيرة';
+          }
+
+          if (type === 'next') {
+            return 'الانتقال إلى الصفحة التالية';
+          } // if (type === 'previous') {
+
+
+          return 'الانتقال إلى الصفحة السابقة';
+        }
+      }
+    }
+  }
+};
 export const arSD = {
   components: {
     MuiBreadcrumbs: {
@@ -3752,7 +3832,7 @@ export const zhTW = {
 
           return '上一頁';
         },
-        labelRowsPerPage: '每行行數:',
+        labelRowsPerPage: '每頁行數:',
         labelDisplayedRows: ({
           from,
           to,

package/esm/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';
 
 const shouldSkipGeneratingVar = keys => {
   var _keys$;
@@ -30,6 +31,7 @@ const {
 
     return newTheme;
   },
-  shouldSkipGeneratingVar
+  shouldSkipGeneratingVar,
+  excludeVariablesFromRoot
 });
 export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };

package/esm/styles/excludeVariablesFromRoot.js

@@ -0,0 +1,6 @@
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
+
+export default excludeVariablesFromRoot;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.6
+/** @license MUI v5.10.8
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/Button/Button.js

@@ -259,9 +259,7 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant: variant
   });
 
-  var _useUtilityClasses = useUtilityClasses(ownerState),
-      classesRoot = _useUtilityClasses.root,
-      classes = _objectWithoutProperties(_useUtilityClasses, ["root"]);
+  var classes = useUtilityClasses(ownerState);
 
   var startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
     className: classes.startIcon,
@@ -277,7 +275,7 @@ var 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/legacy/Checkbox/Checkbox.js

@@ -3,6 +3,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';
@@ -86,7 +87,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       inputProps = props.inputProps,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
-      other = _objectWithoutProperties(props, ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"]);
+      className = props.className,
+      other = _objectWithoutProperties(props, ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"]);
 
   var icon = indeterminate ? indeterminateIconProp : iconProp;
   var indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
@@ -110,7 +112,8 @@ var 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: clsx(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -139,6 +142,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/legacy/Chip/chipClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getChipUtilityClass(slot) {
   return generateUtilityClass('MuiChip', slot);
 }
-var 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']);
+var 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/legacy/DialogContentText/DialogContentText.js

@@ -2,6 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 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';
@@ -35,7 +36,8 @@ var DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentText
   });
 
   var children = props.children,
-      ownerState = _objectWithoutProperties(props, ["children"]);
+      className = props.className,
+      ownerState = _objectWithoutProperties(props, ["children", "className"]);
 
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(DialogContentTextRoot, _extends({
@@ -43,7 +45,8 @@ var DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentText
     variant: "body1",
     color: "text.secondary",
     ref: ref,
-    ownerState: ownerState
+    ownerState: ownerState,
+    className: clsx(classes.root, className)
   }, props, {
     classes: classes
   }));
@@ -66,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.
    */