@mui/material 5.9.2 → 5.10.1

package/Unstable_Grid2/Grid2Props.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SxProps, SystemProps } from '@mui/system';
-import { GridBaseProps } from '@mui/system/Unstable_Grid';
-import { Theme } from '../styles';
-export declare type Grid2Slot = 'root';
-export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & GridBaseProps & {
-        sx?: SxProps<Theme>;
-    } & SystemProps<Theme>;
-    defaultComponent: D;
-}
-export declare type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
-    component?: React.ElementType;
-}> = OverrideProps<Grid2TypeMap<P, D>, D>;
+import React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps, SystemProps } from '@mui/system';
+import { GridBaseProps } from '@mui/system/Unstable_Grid';
+import { Theme } from '../styles';
+export declare type Grid2Slot = 'root';
+export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    } & SystemProps<Theme>;
+    defaultComponent: D;
+}
+export declare type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
+    component?: React.ElementType;
+}> = OverrideProps<Grid2TypeMap<P, D>, D>;

package/Unstable_Grid2/grid2Classes.d.ts

@@ -1,5 +1,5 @@
-import { GridClasses } from '@mui/system/Unstable_Grid';
-export declare type Grid2ClassKey = keyof GridClasses;
-export declare function getGrid2UtilityClass(slot: string): string;
-declare const grid2Classes: GridClasses;
-export default grid2Classes;
+import { GridClasses } from '@mui/system/Unstable_Grid';
+export declare type Grid2ClassKey = keyof GridClasses;
+export declare function getGrid2UtilityClass(slot: string): string;
+declare const grid2Classes: GridClasses;
+export default grid2Classes;

package/Unstable_Grid2/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from './Grid2';
-export * from './Grid2Props';
-export { default as grid2Classes } from './grid2Classes';
-export * from './grid2Classes';
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';

package/className/index.d.ts

@@ -1 +1 @@
-export { unstable_ClassNameGenerator } from '@mui/utils';
+export { unstable_ClassNameGenerator } from '@mui/utils';

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/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/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Badge/Badge.js

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

package/legacy/Button/Button.js

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

@@ -249,7 +249,7 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
     };
   }, [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/legacy/Chip/Chip.js

@@ -30,7 +30,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     label: ['label', "label".concat(capitalize(size))],
     avatar: ['avatar', "avatar".concat(capitalize(size)), "avatarColor".concat(capitalize(color))],
     icon: ['icon', "icon".concat(capitalize(size)), "iconColor".concat(capitalize(color))],
-    deleteIcon: ['deleteIcon', "deleteIcon".concat(capitalize(size)), "deleteIconColor".concat(capitalize(color)), "deleteIconOutlinedColor".concat(capitalize(color))]
+    deleteIcon: ['deleteIcon', "deleteIcon".concat(capitalize(size)), "deleteIconColor".concat(capitalize(color)), "deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]
   };
   return composeClasses(slots, getChipUtilityClass, classes);
 };
@@ -45,7 +45,7 @@ var ChipRoot = styled('div', {
         onDelete = ownerState.onDelete,
         size = ownerState.size,
         variant = ownerState.variant;
-    return [_defineProperty({}, "& .".concat(chipClasses.avatar), styles.avatar), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatar".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatarColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles.icon), _defineProperty({}, "& .".concat(chipClasses.icon), styles["icon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles["iconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles.deleteIcon), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIconOutlinedColor".concat(capitalize(color))]), styles.root, styles["size".concat(capitalize(size))], styles["color".concat(capitalize(color))], clickable && styles.clickable, clickable && color !== 'default' && styles["clickableColor".concat(capitalize(color), ")")], onDelete && styles.deletable, onDelete && color !== 'default' && styles["deletableColor".concat(capitalize(color))], styles[variant], variant === 'outlined' && styles["outlined".concat(capitalize(color))]];
+    return [_defineProperty({}, "& .".concat(chipClasses.avatar), styles.avatar), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatar".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.avatar), styles["avatarColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles.icon), _defineProperty({}, "& .".concat(chipClasses.icon), styles["icon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.icon), styles["iconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles.deleteIcon), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(size))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIconColor".concat(capitalize(color))]), _defineProperty({}, "& .".concat(chipClasses.deleteIcon), styles["deleteIcon".concat(capitalize(variant), "Color").concat(capitalize(color))]), styles.root, styles["size".concat(capitalize(size))], styles["color".concat(capitalize(color))], clickable && styles.clickable, clickable && color !== 'default' && styles["clickableColor".concat(capitalize(color), ")")], onDelete && styles.deletable, onDelete && color !== 'default' && styles["deletableColor".concat(capitalize(color))], styles[variant], styles["".concat(variant).concat(capitalize(color))]];
   }
 })(function (_ref11) {
   var _extends2;
@@ -293,7 +293,6 @@ var Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   };
 
   var clickable = clickableProp !== false && onClick ? true : clickableProp;
-  var small = size === 'small';
   var component = clickable || onDelete ? ButtonBase : ComponentProp || 'div';
 
   var ownerState = _extends({}, props, {
@@ -316,12 +315,11 @@ var Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   var deleteIcon = null;
 
   if (onDelete) {
-    var customClasses = clsx(color !== 'default' && (variant === 'outlined' ? classes["deleteIconOutlinedColor".concat(capitalize(color))] : classes["deleteIconColor".concat(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/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', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'focusVisible']);
+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']);
 export default chipClasses;

package/legacy/Grid/Grid.js

@@ -131,9 +131,34 @@ export function generateDirection(_ref2) {
     return output;
   });
 }
-export function generateRowGap(_ref3) {
-  var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
+/**
+ * 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(_ref3) {
+  var breakpoints = _ref3.breakpoints,
+      values = _ref3.values;
+  var nonZeroKey = '';
+  Object.keys(values).forEach(function (key) {
+    if (nonZeroKey !== '') {
+      return;
+    }
+
+    if (values[key] !== 0) {
+      nonZeroKey = key;
+    }
+  });
+  var sortedBreakpointKeysByValue = Object.keys(breakpoints).sort(function (a, b) {
+    return breakpoints[a] - breakpoints[b];
+  });
+  return sortedBreakpointKeysByValue.slice(0, sortedBreakpointKeysByValue.indexOf(nonZeroKey));
+}
+
+export function generateRowGap(_ref4) {
+  var theme = _ref4.theme,
+      ownerState = _ref4.ownerState;
   var container = ownerState.container,
       rowSpacing = ownerState.rowSpacing;
   var styles = {};
@@ -143,9 +168,20 @@ export function generateRowGap(_ref3) {
       values: rowSpacing,
       breakpoints: theme.breakpoints.values
     });
+    var zeroValueBreakpointKeys;
+
+    if (_typeof(rowSpacingValues) === 'object') {
+      zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+        breakpoints: theme.breakpoints.values,
+        values: rowSpacingValues
+      });
+    }
+
     styles = handleBreakpoints({
       theme: theme
-    }, rowSpacingValues, function (propValue) {
+    }, rowSpacingValues, function (propValue, breakpoint) {
+      var _zeroValueBreakpointK;
+
       var themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -156,15 +192,23 @@ export function generateRowGap(_ref3) {
         });
       }
 
-      return {};
+      if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
+        return {};
+      }
+
+      return _defineProperty({
+        marginTop: 0
+      }, "& > .".concat(gridClasses.item), {
+        paddingTop: 0
+      });
     });
   }
 
   return styles;
 }
-export function generateColumnGap(_ref5) {
-  var theme = _ref5.theme,
-      ownerState = _ref5.ownerState;
+export function generateColumnGap(_ref7) {
+  var theme = _ref7.theme,
+      ownerState = _ref7.ownerState;
   var container = ownerState.container,
       columnSpacing = ownerState.columnSpacing;
   var styles = {};
@@ -174,9 +218,20 @@ export function generateColumnGap(_ref5) {
       values: columnSpacing,
       breakpoints: theme.breakpoints.values
     });
+    var zeroValueBreakpointKeys;
+
+    if (_typeof(columnSpacingValues) === 'object') {
+      zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+        breakpoints: theme.breakpoints.values,
+        values: columnSpacingValues
+      });
+    }
+
     styles = handleBreakpoints({
       theme: theme
-    }, columnSpacingValues, function (propValue) {
+    }, columnSpacingValues, function (propValue, breakpoint) {
+      var _zeroValueBreakpointK2;
+
       var themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -188,7 +243,16 @@ export function generateColumnGap(_ref5) {
         });
       }
 
-      return {};
+      if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
+        return {};
+      }
+
+      return _defineProperty({
+        width: '100%',
+        marginLeft: 0
+      }, "& > .".concat(gridClasses.item), {
+        paddingLeft: 0
+      });
     });
   }
 
@@ -252,8 +316,8 @@ var GridRoot = styled('div', {
     });
     return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth].concat(_toConsumableArray(spacingStyles), [direction !== 'row' && styles["direction-xs-".concat(String(direction))], wrap !== 'wrap' && styles["wrap-xs-".concat(String(wrap))]], breakpointsStyles);
   }
-})(function (_ref7) {
-  var ownerState = _ref7.ownerState;
+})(function (_ref10) {
+  var ownerState = _ref10.ownerState;
   return _extends({
     boxSizing: 'border-box'
   }, ownerState.container && {

package/legacy/InputBase/InputBase.js

@@ -40,12 +40,13 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
       fullWidth = ownerState.fullWidth,
       hiddenLabel = ownerState.hiddenLabel,
       multiline = ownerState.multiline,
+      readOnly = ownerState.readOnly,
       size = ownerState.size,
       startAdornment = ownerState.startAdornment,
       type = ownerState.type;
   var slots = {
-    root: ['root', "color".concat(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".concat(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/legacy/InputBase/inputBaseClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getInputBaseUtilityClass(slot) {
   return generateUtilityClass('MuiInputBase', slot);
 }
-var inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
+var 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/legacy/Select/SelectInput.js

@@ -531,7 +531,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       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/legacy/Skeleton/Skeleton.js

@@ -59,6 +59,8 @@ var SkeletonRoot = styled('span', {
     }
   }, ownerState.variant === 'circular' && {
     borderRadius: '50%'
+  }, ownerState.variant === 'rounded' && {
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.hasChildren && {
     '& > *': {
       visibility: 'hidden'
@@ -172,7 +174,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/legacy/Skeleton/skeletonClasses.js

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

package/legacy/Stack/Stack.js

@@ -4,7 +4,7 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
 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';
@@ -102,6 +102,7 @@ export var style = function style(_ref) {
     }, spacingValues, styleFromPropValue));
   }
 
+  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
   return styles;
 };
 var StackRoot = styled('div', {

package/legacy/StepLabel/StepLabel.js

@@ -25,7 +25,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   var 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/legacy/TableCell/TableCell.js

@@ -206,7 +206,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.
@@ -222,6 +224,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/legacy/Tooltip/Tooltip.js

@@ -178,7 +178,7 @@ var TooltipArrow = styled('span', {
     /* = width / sqrt(2) = (length of the hypotenuse) */
     ,
     boxSizing: 'border-box',
-    color: theme.vars ? "rgba(".concat(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/legacy/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/legacy/styles/createTheme.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 import { deepmerge } from '@mui/utils';
 import { generateUtilityClass } from '@mui/base';
 import { createTheme as systemCreateTheme } from '@mui/system';
@@ -27,6 +28,10 @@ function createTheme() {
       shapeInput = options.shape,
       other = _objectWithoutProperties(options, ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"]);
 
+  if (options.vars) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name." : _formatMuiErrorMessage(18));
+  }
+
   var palette = createPalette(paletteInput);
   var systemTheme = systemCreateTheme(options);
   var muiTheme = deepmerge(systemTheme, {

package/legacy/useScrollTrigger/useScrollTrigger.js

@@ -51,9 +51,13 @@ export default function useScrollTrigger() {
 
     handleScroll(); // Re-evaluate trigger when dependencies change
 
-    target.addEventListener('scroll', handleScroll);
+    target.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
     return function () {
-      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)]);