@mui/material 5.9.3 → 5.10.0

package/modern/Grid/Grid.js

@@ -195,7 +195,7 @@ export function generateRowGap({
         };
       }
 
-      if (zeroValueBreakpointKeys.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
 
@@ -249,7 +249,7 @@ export function generateColumnGap({
         };
       }
 
-      if (zeroValueBreakpointKeys.includes(breakpoint)) {
+      if (zeroValueBreakpointKeys?.includes(breakpoint)) {
         return {};
       }
 

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/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.

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.3
+/** @license MUI v5.10.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

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/Grid/Grid.js

@@ -209,6 +209,8 @@ function generateRowGap({
     styles = (0, _system.handleBreakpoints)({
       theme
     }, rowSpacingValues, (propValue, breakpoint) => {
+      var _zeroValueBreakpointK;
+
       const themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -220,7 +222,7 @@ function generateRowGap({
         };
       }
 
-      if (zeroValueBreakpointKeys.includes(breakpoint)) {
+      if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
         return {};
       }
 
@@ -263,6 +265,8 @@ function generateColumnGap({
     styles = (0, _system.handleBreakpoints)({
       theme
     }, columnSpacingValues, (propValue, breakpoint) => {
+      var _zeroValueBreakpointK2;
+
       const themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -275,7 +279,7 @@ function generateColumnGap({
         };
       }
 
-      if (zeroValueBreakpointKeys.includes(breakpoint)) {
+      if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
         return {};
       }
 

package/node/Skeleton/Skeleton.js

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

package/node/Skeleton/skeletonClasses.js

@@ -12,6 +12,6 @@ function getSkeletonUtilityClass(slot) {
   return (0, _base.generateUtilityClass)('MuiSkeleton', slot);
 }
 
-const skeletonClasses = (0, _base.generateUtilityClasses)('MuiSkeleton', ['root', 'text', 'rectangular', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
+const skeletonClasses = (0, _base.generateUtilityClasses)('MuiSkeleton', ['root', 'text', 'rectangular', 'rounded', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
 var _default = skeletonClasses;
 exports.default = _default;

package/node/StepLabel/StepLabel.js

@@ -52,7 +52,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 (0, _base.unstable_composeClasses)(slots, _stepLabelClasses.getStepLabelUtilityClass, classes);

package/node/TableCell/TableCell.js

@@ -235,7 +235,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.default.oneOf(['small', 'medium']),
+  size: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
 
   /**
    * Set aria-sort direction.

package/node/Tooltip/Tooltip.js

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

package/node/index.js

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

package/node/useScrollTrigger/useScrollTrigger.js

@@ -60,9 +60,13 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.9.3",
+  "version": "5.10.0",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -47,7 +47,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@mui/base": "5.0.0-alpha.92",
-    "@mui/system": "^5.9.3",
+    "@mui/system": "^5.10.0",
     "@mui/types": "^7.1.5",
     "@mui/utils": "^5.9.3",
     "@types/react-transition-group": "^4.4.5",

package/styles/CssVarsProvider.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { SupportedColorScheme } from './experimental_extendTheme';
-declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: {
-        cssVarPrefix?: string | undefined;
-        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-    } | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Document | HTMLElement | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Document | HTMLElement | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.3
+/** @license MUI v5.10.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -4738,7 +4738,15 @@
         return stylesFactory(...styles);
       };
     }
-  }
+  } // eslint-disable-next-line @typescript-eslint/naming-convention
+
+  const internal_processStyles = (tag, processor) => {
+    // Emotion attaches all the styles as `__emotion_styles`.
+    // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
+    if (Array.isArray(tag.__emotion_styles)) {
+      tag.__emotion_styles = processor(tag.__emotion_styles);
+    }
+  };
 
   const responsivePropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) ;
   var responsivePropType$1 = responsivePropType;
@@ -6872,7 +6880,9 @@
       generateClassName,
       styleFunctionSx = defaultStyleFunctionSx
     } = options;
-    const BoxRoot = styled$3('div')(styleFunctionSx);
+    const BoxRoot = styled$3('div', {
+      shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
+    })(styleFunctionSx);
     const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
       const theme = useTheme$1(defaultTheme);
 
@@ -6928,6 +6938,14 @@
 
   function isEmpty$2(obj) {
     return Object.keys(obj).length === 0;
+  } // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
+
+
+  function isStringTag(tag) {
+    return typeof tag === 'string' && // 96 is one less than the char code
+    // for "a" so this is checking that
+    // it's a lowercase character
+    tag.charCodeAt(0) > 96;
   }
 
   const getStyleOverrides = (name, theme) => {
@@ -6997,7 +7015,19 @@
       slotShouldForwardProp = shouldForwardProp,
       styleFunctionSx = defaultStyleFunctionSx
     } = input;
+
+    const systemSx = props => {
+      const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
+      return styleFunctionSx(_extends({}, props, {
+        theme
+      }));
+    };
+
+    systemSx.__mui_systemSx = true;
     return (tag, inputOptions = {}) => {
+      // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
+      internal_processStyles(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
+
       const {
         name: componentName,
         slot: componentSlot,
@@ -7025,6 +7055,9 @@
       } else if (componentSlot) {
         // any other slot specified
         shouldForwardPropOption = slotShouldForwardProp;
+      } else if (isStringTag(tag)) {
+        // for string (html) tag, preserve the behavior in emotion & styled-components.
+        shouldForwardPropOption = undefined;
       }
 
       const defaultStyledResolver = styled$3(tag, _extends({
@@ -7037,7 +7070,6 @@
           // On the server Emotion doesn't use React.forwardRef for creating components, so the created
           // component stays as a function. This condition makes sure that we do not interpolate functions
           // which are basically components used as a selectors.
-          // eslint-disable-next-line no-underscore-dangle
           return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
             let {
               theme: themeInput
@@ -7078,12 +7110,7 @@
         }
 
         if (!skipSx) {
-          expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
-            return styleFunctionSx(_extends({}, props, {
-              theme
-            }));
-          });
+          expressionsWithDefaultTheme.push(systemSx);
         }
 
         const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
@@ -7096,7 +7123,6 @@
         } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
-        // eslint-disable-next-line no-underscore-dangle
         styleArg.__emotion_real !== styleArg) {
           // If the type is function, we need to define the default theme.
           transformedStyleArg = _ref2 => {
@@ -32061,6 +32087,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       styles = handleBreakpoints({
         theme
       }, rowSpacingValues, (propValue, breakpoint) => {
+        var _zeroValueBreakpointK;
+
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -32072,7 +32100,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           };
         }
 
-        if (zeroValueBreakpointKeys.includes(breakpoint)) {
+        if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
           return {};
         }
 
@@ -32114,6 +32142,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       styles = handleBreakpoints({
         theme
       }, columnSpacingValues, (propValue, breakpoint) => {
+        var _zeroValueBreakpointK2;
+
         const themeSpacing = theme.spacing(propValue);
 
         if (themeSpacing !== '0px') {
@@ -32126,7 +32156,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           };
         }
 
-        if (zeroValueBreakpointKeys.includes(breakpoint)) {
+        if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
           return {};
         }
 
@@ -42370,7 +42400,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   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']);
   var skeletonClasses$1 = skeletonClasses;
 
   const _excluded$C = ["animation", "className", "component", "height", "style", "variant", "width"];
@@ -42455,6 +42485,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }, ownerState.variant === 'circular' && {
       borderRadius: '50%'
+    }, ownerState.variant === 'rounded' && {
+      borderRadius: (theme.vars || theme).shape.borderRadius
     }, ownerState.hasChildren && {
       '& > *': {
         visibility: 'hidden'
@@ -42590,7 +42622,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     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.
@@ -44873,7 +44905,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /* = 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',
@@ -46502,7 +46534,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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);
@@ -49072,7 +49104,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * 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.
@@ -52410,9 +52444,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       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)]);