@mui/material 5.9.2 → 5.10.1

package/locale/index.d.ts

@@ -1,71 +1,71 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/Badge/Badge.js

@@ -225,7 +225,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       Root: BadgeRoot,
       Badge: BadgeBadge
     }, components),
-    className: clsx(className, classes.root, componentsProps.root?.className),
+    className: clsx(componentsProps.root?.className, classes.root, className),
     componentsProps: {
       root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
         as: component,

package/modern/Button/Button.js

@@ -1,6 +1,7 @@
 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"];
+const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"],
+      _excluded2 = ["root"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -254,7 +255,11 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant
   });
 
-  const classes = useUtilityClasses(ownerState);
+  const _useUtilityClasses = useUtilityClasses(ownerState),
+        {
+    root: classesRoot
+  } = _useUtilityClasses,
+        classes = _objectWithoutPropertiesLoose(_useUtilityClasses, _excluded2);
 
   const startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
     className: classes.startIcon,
@@ -270,7 +275,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
 
   return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
-    className: clsx(className, contextProps.className),
+    className: clsx(contextProps.className, classesRoot, className),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,

package/modern/ButtonBase/TouchRipple.js

@@ -306,7 +306,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     stop
   }), [pulsate, start, stop]);
   return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({
-    className: clsx(classes.root, touchRippleClasses.root, className),
+    className: clsx(touchRippleClasses.root, classes.root, className),
     ref: container
   }, other, {
     children: /*#__PURE__*/_jsx(TransitionGroup, {

package/modern/Chip/Chip.js

@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
     label: ['label', `label${capitalize(size)}`],
     avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`],
     icon: ['icon', `icon${capitalize(size)}`, `iconColor${capitalize(color)}`],
-    deleteIcon: ['deleteIcon', `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, `deleteIconOutlinedColor${capitalize(color)}`]
+    deleteIcon: ['deleteIcon', `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, `deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
   };
   return composeClasses(slots, getChipUtilityClass, classes);
 };
@@ -70,8 +70,8 @@ const ChipRoot = styled('div', {
     }, {
       [`& .${chipClasses.deleteIcon}`]: styles[`deleteIconColor${capitalize(color)}`]
     }, {
-      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIconOutlinedColor${capitalize(color)}`]
-    }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], variant === 'outlined' && styles[`outlined${capitalize(color)}`]];
+      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
+    }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], styles[`${variant}${capitalize(color)}`]];
   }
 })(({
   theme,
@@ -339,7 +339,6 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   };
 
   const clickable = clickableProp !== false && onClick ? true : clickableProp;
-  const small = size === 'small';
   const component = clickable || onDelete ? ButtonBase : ComponentProp || 'div';
 
   const ownerState = _extends({}, props, {
@@ -362,12 +361,11 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   let deleteIcon = null;
 
   if (onDelete) {
-    const customClasses = clsx(color !== 'default' && (variant === 'outlined' ? classes[`deleteIconOutlinedColor${capitalize(color)}`] : classes[`deleteIconColor${capitalize(color)}`]), small && classes.deleteIconSmall);
     deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {
-      className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses),
+      className: clsx(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
     }) : /*#__PURE__*/_jsx(CancelIcon, {
-      className: clsx(classes.deleteIcon, customClasses),
+      className: clsx(classes.deleteIcon),
       onClick: handleDeleteIconClick
     });
   }

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', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'focusVisible']);
+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']);
 export default chipClasses;

package/modern/Grid/Grid.js

@@ -131,6 +131,32 @@ export function generateDirection({
     return output;
   });
 }
+/**
+ * Extracts zero value breakpoint keys before a non-zero value breakpoint key.
+ * @example { xs: 0, sm: 0, md: 2, lg: 0, xl: 0 } or [0, 0, 2, 0, 0]
+ * @returns [xs, sm]
+ */
+
+function extractZeroValueBreakpointKeys({
+  breakpoints,
+  values
+}) {
+  let nonZeroKey = '';
+  Object.keys(values).forEach(key => {
+    if (nonZeroKey !== '') {
+      return;
+    }
+
+    if (values[key] !== 0) {
+      nonZeroKey = key;
+    }
+  });
+  const sortedBreakpointKeysByValue = Object.keys(breakpoints).sort((a, b) => {
+    return breakpoints[a] - breakpoints[b];
+  });
+  return sortedBreakpointKeysByValue.slice(0, sortedBreakpointKeysByValue.indexOf(nonZeroKey));
+}
+
 export function generateRowGap({
   theme,
   ownerState
@@ -146,9 +172,18 @@ export function generateRowGap({
       values: rowSpacing,
       breakpoints: theme.breakpoints.values
     });
+    let zeroValueBreakpointKeys;
+
+    if (typeof rowSpacingValues === 'object') {
+      zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+        breakpoints: theme.breakpoints.values,
+        values: rowSpacingValues
+      });
+    }
+
     styles = handleBreakpoints({
       theme
-    }, rowSpacingValues, propValue => {
+    }, rowSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -160,7 +195,16 @@ export function generateRowGap({
         };
       }
 
-      return {};
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
+        return {};
+      }
+
+      return {
+        marginTop: 0,
+        [`& > .${gridClasses.item}`]: {
+          paddingTop: 0
+        }
+      };
     });
   }
 
@@ -181,9 +225,18 @@ export function generateColumnGap({
       values: columnSpacing,
       breakpoints: theme.breakpoints.values
     });
+    let zeroValueBreakpointKeys;
+
+    if (typeof columnSpacingValues === 'object') {
+      zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+        breakpoints: theme.breakpoints.values,
+        values: columnSpacingValues
+      });
+    }
+
     styles = handleBreakpoints({
       theme
-    }, columnSpacingValues, propValue => {
+    }, columnSpacingValues, (propValue, breakpoint) => {
       const themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -196,7 +249,17 @@ export function generateColumnGap({
         };
       }
 
-      return {};
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
+        return {};
+      }
+
+      return {
+        width: '100%',
+        marginLeft: 0,
+        [`& > .${gridClasses.item}`]: {
+          paddingLeft: 0
+        }
+      };
     });
   }
 

package/modern/InputBase/InputBase.js

@@ -45,13 +45,14 @@ const useUtilityClasses = ownerState => {
     fullWidth,
     hiddenLabel,
     multiline,
+    readOnly,
     size,
     startAdornment,
     type
   } = ownerState;
   const slots = {
-    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel'],
-    input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd']
+    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
+    input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly']
   };
   return composeClasses(slots, getInputBaseUtilityClass, classes);
 };

package/modern/InputBase/inputBaseClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getInputBaseUtilityClass(slot) {
   return generateUtilityClass('MuiInputBase', slot);
 }
-const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
+const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 export default inputBaseClasses;

package/modern/Select/SelectInput.js

@@ -507,7 +507,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onFocus: onFocus
     }, SelectDisplayProps, {
       ownerState: ownerState,
-      className: clsx(classes.select, className, SelectDisplayProps.className) // The id is required for proper a11y
+      className: clsx(SelectDisplayProps.className, classes.select, className) // The id is required for proper a11y
       ,
       id: buttonId,
       children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue

package/modern/Skeleton/Skeleton.js

@@ -86,6 +86,8 @@ const SkeletonRoot = styled('span', {
     }
   }, ownerState.variant === 'circular' && {
     borderRadius: '50%'
+  }, ownerState.variant === 'rounded' && {
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.hasChildren && {
     '& > *': {
       visibility: 'hidden'
@@ -221,7 +223,7 @@ process.env.NODE_ENV !== "production" ? Skeleton.propTypes
    */
   variant: PropTypes
   /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['circular', 'rectangular', 'text']), PropTypes.string]),
+  .oneOfType([PropTypes.oneOf(['circular', 'rectangular', 'rounded', 'text']), PropTypes.string]),
 
   /**
    * Width of the skeleton.

package/modern/Skeleton/skeletonClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getSkeletonUtilityClass(slot) {
   return generateUtilityClass('MuiSkeleton', slot);
 }
-const skeletonClasses = generateUtilityClasses('MuiSkeleton', ['root', 'text', 'rectangular', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
+const skeletonClasses = generateUtilityClasses('MuiSkeleton', ['root', 'text', 'rectangular', 'rounded', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
 export default skeletonClasses;

package/modern/Stack/Stack.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["component", "direction", "spacing", "divider", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { createUnarySpacing, getValue, handleBreakpoints, unstable_extendSxProp as extendSxProp, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
+import { createUnarySpacing, getValue, handleBreakpoints, mergeBreakpointsInOrder, unstable_extendSxProp as extendSxProp, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
 import { deepmerge } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -100,6 +100,7 @@ export const style = ({
     }, spacingValues, styleFromPropValue));
   }
 
+  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
   return styles;
 };
 const StackRoot = styled('div', {

package/modern/StepLabel/StepLabel.js

@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', orientation, error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     label: ['label', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
-    iconContainer: ['iconContainer', alternativeLabel && 'alternativeLabel'],
+    iconContainer: ['iconContainer', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     labelContainer: ['labelContainer']
   };
   return composeClasses(slots, getStepLabelUtilityClass, classes);

package/modern/TableCell/TableCell.js

@@ -212,7 +212,9 @@ process.env.NODE_ENV !== "production" ? TableCell.propTypes
    * Specify the size of the cell.
    * The prop defaults to the value (`'medium'`) inherited from the parent Table component.
    */
-  size: PropTypes.oneOf(['small', 'medium']),
+  size: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
 
   /**
    * Set aria-sort direction.
@@ -228,6 +230,8 @@ process.env.NODE_ENV !== "production" ? TableCell.propTypes
    * Specify the cell type.
    * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
    */
-  variant: PropTypes.oneOf(['body', 'footer', 'head'])
+  variant: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['body', 'footer', 'head']), PropTypes.string])
 } : void 0;
 export default TableCell;

package/modern/Tooltip/Tooltip.js

@@ -185,7 +185,7 @@ const TooltipArrow = styled('span', {
   /* = width / sqrt(2) = (length of the hypotenuse) */
   ,
   boxSizing: 'border-box',
-  color: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.9)` : alpha(theme.palette.grey[700], 0.9),
+  color: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.9),
   '&::before': {
     content: '""',
     margin: 'auto',

package/modern/index.js

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

package/modern/styles/createTheme.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 import { deepmerge } from '@mui/utils';
 import { generateUtilityClass } from '@mui/base';
@@ -20,6 +21,11 @@ function createTheme(options = {}, ...args) {
   } = options,
         other = _objectWithoutPropertiesLoose(options, _excluded);
 
+  if (options.vars) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
+Please use another name.` : _formatMuiErrorMessage(18));
+  }
+
   const palette = createPalette(paletteInput);
   const systemTheme = systemCreateTheme(options);
   let muiTheme = deepmerge(systemTheme, {

package/modern/useScrollTrigger/useScrollTrigger.js

@@ -44,9 +44,13 @@ export default function useScrollTrigger(options = {}) {
 
     handleScroll(); // Re-evaluate trigger when dependencies change
 
-    target.addEventListener('scroll', handleScroll);
+    target.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
     return () => {
-      target.removeEventListener('scroll', handleScroll);
+      target.removeEventListener('scroll', handleScroll, {
+        passive: true
+      });
     }; // See Option 3. https://github.com/facebook/react/issues/14476#issuecomment-471199055
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [target, getTrigger, JSON.stringify(other)]);

package/node/Badge/Badge.js

@@ -251,7 +251,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       Root: BadgeRoot,
       Badge: BadgeBadge
     }, components),
-    className: (0, _clsx.default)(className, classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className),
+    className: (0, _clsx.default)((_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, classes.root, className),
     componentsProps: {
       root: (0, _extends2.default)({}, componentsProps.root, (0, _shouldSpreadAdditionalProps.default)(components.Root) && {
         as: component,

package/node/Button/Button.js

@@ -37,7 +37,8 @@ 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"];
+const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"],
+      _excluded2 = ["root"];
 
 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); }
 
@@ -282,7 +283,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     type,
     variant
   });
-  const classes = useUtilityClasses(ownerState);
+
+  const _useUtilityClasses = useUtilityClasses(ownerState),
+        {
+    root: classesRoot
+  } = _useUtilityClasses,
+        classes = (0, _objectWithoutPropertiesLoose2.default)(_useUtilityClasses, _excluded2);
+
   const startIcon = startIconProp && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
@@ -295,7 +302,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)(className, contextProps.className),
+    className: (0, _clsx.default)(contextProps.className, classesRoot, className),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,

package/node/ButtonBase/TouchRipple.js

@@ -333,7 +333,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     stop
   }), [pulsate, start, stop]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TouchRippleRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, _touchRippleClasses.default.root, className),
+    className: (0, _clsx.default)(_touchRippleClasses.default.root, classes.root, className),
     ref: container
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {

package/node/Chip/Chip.js

@@ -60,7 +60,7 @@ const useUtilityClasses = ownerState => {
     label: ['label', `label${(0, _capitalize.default)(size)}`],
     avatar: ['avatar', `avatar${(0, _capitalize.default)(size)}`, `avatarColor${(0, _capitalize.default)(color)}`],
     icon: ['icon', `icon${(0, _capitalize.default)(size)}`, `iconColor${(0, _capitalize.default)(color)}`],
-    deleteIcon: ['deleteIcon', `deleteIcon${(0, _capitalize.default)(size)}`, `deleteIconColor${(0, _capitalize.default)(color)}`, `deleteIconOutlinedColor${(0, _capitalize.default)(color)}`]
+    deleteIcon: ['deleteIcon', `deleteIcon${(0, _capitalize.default)(size)}`, `deleteIconColor${(0, _capitalize.default)(color)}`, `deleteIcon${(0, _capitalize.default)(variant)}Color${(0, _capitalize.default)(color)}`]
   };
   return (0, _base.unstable_composeClasses)(slots, _chipClasses.getChipUtilityClass, classes);
 };
@@ -98,8 +98,8 @@ const ChipRoot = (0, _styled.default)('div', {
     }, {
       [`& .${_chipClasses.default.deleteIcon}`]: styles[`deleteIconColor${(0, _capitalize.default)(color)}`]
     }, {
-      [`& .${_chipClasses.default.deleteIcon}`]: styles[`deleteIconOutlinedColor${(0, _capitalize.default)(color)}`]
-    }, styles.root, styles[`size${(0, _capitalize.default)(size)}`], styles[`color${(0, _capitalize.default)(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${(0, _capitalize.default)(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${(0, _capitalize.default)(color)}`], styles[variant], variant === 'outlined' && styles[`outlined${(0, _capitalize.default)(color)}`]];
+      [`& .${_chipClasses.default.deleteIcon}`]: styles[`deleteIcon${(0, _capitalize.default)(variant)}Color${(0, _capitalize.default)(color)}`]
+    }, styles.root, styles[`size${(0, _capitalize.default)(size)}`], styles[`color${(0, _capitalize.default)(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${(0, _capitalize.default)(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${(0, _capitalize.default)(color)}`], styles[variant], styles[`${variant}${(0, _capitalize.default)(color)}`]];
   }
 })(({
   theme,
@@ -365,7 +365,6 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   };
 
   const clickable = clickableProp !== false && onClick ? true : clickableProp;
-  const small = size === 'small';
   const component = clickable || onDelete ? _ButtonBase.default : ComponentProp || 'div';
   const ownerState = (0, _extends2.default)({}, props, {
     component,
@@ -386,12 +385,11 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   let deleteIcon = null;
 
   if (onDelete) {
-    const customClasses = (0, _clsx.default)(color !== 'default' && (variant === 'outlined' ? classes[`deleteIconOutlinedColor${(0, _capitalize.default)(color)}`] : classes[`deleteIconColor${(0, _capitalize.default)(color)}`]), small && classes.deleteIconSmall);
     deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {
-      className: (0, _clsx.default)(deleteIconProp.props.className, classes.deleteIcon, customClasses),
+      className: (0, _clsx.default)(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cancel.default, {
-      className: (0, _clsx.default)(classes.deleteIcon, customClasses),
+      className: (0, _clsx.default)(classes.deleteIcon),
       onClick: handleDeleteIconClick
     });
   }