@mui/material 5.8.1 → 5.8.4

package/Grid/Grid.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "lg", "md", "rowSpacing", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"];
+const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
 // A grid component using the following libs as inspiration.
 //
 // For the implementation:
@@ -19,6 +19,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import requirePropFactory from '../utils/requirePropFactory';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useTheme from '../styles/useTheme';
 import GridContext from './GridContext';
 import gridClasses, { getGridUtilityClass } from './gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -201,26 +202,27 @@ export function generateColumnGap({
 
   return styles;
 }
-export function resolveSpacingClasses(spacing, container, styles = {}) {
-  // in case of grid item or undefined/null or `spacing` <= 0
-  if (!container || !spacing || spacing <= 0) {
+export function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
     return [];
   } // in case of string/number `spacing`
 
 
   if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
-    return [styles[`spacing-xs-${String(spacing)}`] || `spacing-xs-${String(spacing)}`];
+    return [styles[`spacing-xs-${String(spacing)}`]];
   } // in case of object `spacing`
 
 
-  const {
-    xs,
-    sm,
-    md,
-    lg,
-    xl
-  } = spacing;
-  return [Number(xs) > 0 && (styles[`spacing-xs-${String(xs)}`] || `spacing-xs-${String(xs)}`), Number(sm) > 0 && (styles[`spacing-sm-${String(sm)}`] || `spacing-sm-${String(sm)}`), Number(md) > 0 && (styles[`spacing-md-${String(md)}`] || `spacing-md-${String(md)}`), Number(lg) > 0 && (styles[`spacing-lg-${String(lg)}`] || `spacing-lg-${String(lg)}`), Number(xl) > 0 && (styles[`spacing-xl-${String(xl)}`] || `spacing-xl-${String(xl)}`)];
+  const spacingStyles = [];
+  breakpoints.forEach(breakpoint => {
+    const value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
+    }
+  });
+  return spacingStyles;
 } // Default CSS values
 // flex: '0 1 auto',
 // flexDirection: 'row',
@@ -232,20 +234,33 @@ const GridRoot = styled('div', {
   name: 'MuiGrid',
   slot: 'Root',
   overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
     const {
       container,
       direction,
       item,
-      lg,
-      md,
-      sm,
       spacing,
       wrap,
-      xl,
-      xs,
-      zeroMinWidth
-    } = props.ownerState;
-    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...resolveSpacingClasses(spacing, container, styles), direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], xs !== false && styles[`grid-xs-${String(xs)}`], sm !== false && styles[`grid-sm-${String(sm)}`], md !== false && styles[`grid-md-${String(md)}`], lg !== false && styles[`grid-lg-${String(lg)}`], xl !== false && styles[`grid-xl-${String(xl)}`]];
+      zeroMinWidth,
+      breakpoints
+    } = ownerState;
+    let spacingStyles = []; // in case of grid item
+
+    if (container) {
+      spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
+    }
+
+    const breakpointsStyles = [];
+    breakpoints.forEach(breakpoint => {
+      const value = ownerState[breakpoint];
+
+      if (value) {
+        breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
+      }
+    });
+    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...spacingStyles, direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], ...breakpointsStyles];
   }
 })(({
   ownerState
@@ -263,6 +278,29 @@ const GridRoot = styled('div', {
 }, ownerState.wrap !== 'wrap' && {
   flexWrap: ownerState.wrap
 }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
+export function resolveSpacingClasses(spacing, breakpoints) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
+    return [];
+  } // in case of string/number `spacing`
+
+
+  if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
+    return [`spacing-xs-${String(spacing)}`];
+  } // in case of object `spacing`
+
+
+  const classes = [];
+  breakpoints.forEach(breakpoint => {
+    const value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      const className = `spacing-${breakpoint}-${String(value)}`;
+      classes.push(className);
+    }
+  });
+  return classes;
+}
 
 const useUtilityClasses = ownerState => {
   const {
@@ -270,17 +308,27 @@ const useUtilityClasses = ownerState => {
     container,
     direction,
     item,
-    lg,
-    md,
-    sm,
     spacing,
     wrap,
-    xl,
-    xs,
-    zeroMinWidth
+    zeroMinWidth,
+    breakpoints
   } = ownerState;
+  let spacingClasses = []; // in case of grid item
+
+  if (container) {
+    spacingClasses = resolveSpacingClasses(spacing, breakpoints);
+  }
+
+  const breakpointsClasses = [];
+  breakpoints.forEach(breakpoint => {
+    const value = ownerState[breakpoint];
+
+    if (value) {
+      breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
+    }
+  });
   const slots = {
-    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...resolveSpacingClasses(spacing, container), direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
+    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...spacingClasses, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...breakpointsClasses]
   };
   return composeClasses(slots, getGridUtilityClass, classes);
 };
@@ -290,6 +338,9 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     props: inProps,
     name: 'MuiGrid'
   });
+  const {
+    breakpoints
+  } = useTheme();
   const props = extendSxProp(themeProps);
 
   const {
@@ -300,14 +351,9 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     container = false,
     direction = 'row',
     item = false,
-    lg = false,
-    md = false,
     rowSpacing: rowSpacingProp,
-    sm = false,
     spacing = 0,
     wrap = 'wrap',
-    xl = false,
-    xs = false,
     zeroMinWidth = false
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -317,21 +363,29 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   const columnsContext = React.useContext(GridContext); // columns set with default breakpoint unit of 12
 
   const columns = container ? columnsProp || 12 : columnsContext;
+  const breakpointsValues = {};
+
+  const otherFiltered = _extends({}, other);
+
+  breakpoints.keys.forEach(breakpoint => {
+    if (other[breakpoint] != null) {
+      breakpointsValues[breakpoint] = other[breakpoint];
+      delete otherFiltered[breakpoint];
+    }
+  });
 
   const ownerState = _extends({}, props, {
     columns,
     container,
     direction,
     item,
-    lg,
-    md,
-    sm,
     rowSpacing,
     columnSpacing,
     wrap,
-    xl,
-    xs,
-    zeroMinWidth
+    zeroMinWidth,
+    spacing
+  }, breakpointsValues, {
+    breakpoints: breakpoints.keys
   });
 
   const classes = useUtilityClasses(ownerState);
@@ -342,7 +396,7 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
       className: clsx(classes.root, className),
       as: component,
       ref: ref
-    }, other))
+    }, otherFiltered))
   });
 });
 process.env.NODE_ENV !== "production" ? Grid.propTypes

package/Grow/Grow.js

@@ -24,12 +24,12 @@ const styles = {
     transform: 'none'
   }
 };
-/**
- * Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
- * Remove this workaround once the WebKit bug fix is released.
+/*
+ TODO v6: remove
+ Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
  */
 
-const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
 /**
  * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
  * [Popover](/material-ui/react-popover/) components.

package/Hidden/withWidth.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getDisplayName } from '@mui/utils';
 import { getThemeProps } from '@mui/system';
-import hoistNonReactStatics from 'hoist-non-react-statics';
 import useTheme from '../styles/useTheme';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
 import useMediaQuery from '../useMediaQuery';
@@ -113,7 +112,6 @@ const withWidth = (options = {}) => Component => {
     WithWidth.displayName = `WithWidth(${getDisplayName(Component)})`;
   }
 
-  hoistNonReactStatics(WithWidth, Component);
   return WithWidth;
 };
 

package/InputLabel/InputLabel.d.ts

@@ -45,6 +45,11 @@ export interface InputLabelProps extends StandardProps<FormLabelProps> {
    * If `true`, the label is shrunk.
    */
   shrink?: boolean;
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size?: 'small' | 'normal';
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/InputLabel/InputLabel.js

@@ -209,6 +209,12 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   shrink: PropTypes.bool,
 
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: PropTypes.oneOf(['normal', 'small']),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Link/Link.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { elementTypeAcceptingRef } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -14,18 +13,8 @@ import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
+import getTextDecoration, { colorTransformations } from './getTextDecoration';
 import { jsx as _jsx } from "react/jsx-runtime";
-const colorTransformations = {
-  primary: 'primary.main',
-  textPrimary: 'text.primary',
-  secondary: 'secondary.main',
-  textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-
-const transformDeprecatedColors = color => {
-  return colorTransformations[color] || color;
-};
 
 const useUtilityClasses = ownerState => {
   const {
@@ -53,7 +42,6 @@ const LinkRoot = styled(Typography, {
   theme,
   ownerState
 }) => {
-  const color = getPath(theme, `palette.${transformDeprecatedColors(ownerState.color)}`) || ownerState.color;
   return _extends({}, ownerState.underline === 'none' && {
     textDecoration: 'none'
   }, ownerState.underline === 'hover' && {
@@ -61,13 +49,18 @@ const LinkRoot = styled(Typography, {
     '&:hover': {
       textDecoration: 'underline'
     }
-  }, ownerState.underline === 'always' && {
-    textDecoration: 'underline',
-    textDecorationColor: color !== 'inherit' ? alpha(color, 0.4) : undefined,
+  }, ownerState.underline === 'always' && _extends({
+    textDecoration: 'underline'
+  }, ownerState.color !== 'inherit' && {
+    textDecorationColor: getTextDecoration({
+      theme,
+      ownerState
+    })
+  }, {
     '&:hover': {
       textDecorationColor: 'inherit'
     }
-  }, ownerState.component === 'button' && {
+  }), ownerState.component === 'button' && {
     position: 'relative',
     WebkitTapHighlightColor: 'transparent',
     backgroundColor: 'transparent',

package/Link/getTextDecoration.d.ts

@@ -0,0 +1,15 @@
+import type { Theme } from '../styles';
+export declare const colorTransformations: {
+    primary: string;
+    textPrimary: string;
+    secondary: string;
+    textSecondary: string;
+    error: string;
+};
+declare const getTextDecoration: <T extends Theme>({ theme, ownerState, }: {
+    theme: T;
+    ownerState: {
+        color: string;
+    };
+}) => string;
+export default getTextDecoration;

package/Link/getTextDecoration.js

@@ -0,0 +1,29 @@
+import { alpha, getPath } from '@mui/system';
+export const colorTransformations = {
+  primary: 'primary.main',
+  textPrimary: 'text.primary',
+  secondary: 'secondary.main',
+  textSecondary: 'text.secondary',
+  error: 'error.main'
+};
+
+const transformDeprecatedColors = color => {
+  return colorTransformations[color] || color;
+};
+
+const getTextDecoration = ({
+  theme,
+  ownerState
+}) => {
+  const transformedColor = transformDeprecatedColors(ownerState.color);
+  const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
+
+  if ('vars' in theme && channelColor) {
+    return `rgba(${channelColor} / 0.4)`;
+  }
+
+  return alpha(color, 0.4);
+};
+
+export default getTextDecoration;

package/Popover/Popover.d.ts

@@ -133,6 +133,13 @@ export interface PopoverActions {
   updatePosition(): void;
 }
 
+export function getOffsetTop(rect: DOMRect, vertical: number | 'center' | 'bottom' | 'top'): number;
+
+export function getOffsetLeft(
+  rect: DOMRect,
+  horizontal: number | 'center' | 'right' | 'left',
+): number;
+
 /**
  *
  * Demos:

package/Popover/index.js

@@ -1,3 +1,4 @@
 export { default } from './Popover';
+export * from './Popover';
 export { default as popoverClasses } from './popoverClasses';
 export * from './popoverClasses';

package/README.md

@@ -7,11 +7,13 @@
 
 **MUI Core** contains foundational React UI component libraries for shipping new features faster.
 
-- _Material UI_ is a comprehensive library of components that features our implementation of Google's [Material Design](https://material.io/design/introduction/) system.
+- [_Material UI_](https://mui.com/material-ui/getting-started/overview/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://material.io/design/introduction/) system.
 
-- _MUI Base_ is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
+- [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) is a beautifully designed library of React UI components.
 
-- _MUI System_ is a collection of CSS utilities to help you rapidly lay out custom designs.
+- [_MUI Base_](https://mui.com/base/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
+
+- [_MUI System_](https://mui.com/system/basics/) is a collection of CSS utilities to help you rapidly lay out custom designs.
 
 <div align="center">
 
@@ -48,9 +50,9 @@ yarn add @mui/material @emotion/react @emotion/styled
 <details>
   <summary>Older versions</summary>
 
-- **[v4.x](https://v4.mui.com/)** ([Migration from v4 to v5](https://mui.com/material-ui/guides/migration-v4/))
-- **[v3.x](https://v3.mui.com/)** ([Migration from v3 to v4](https://mui.com/material-ui/guides/migration-v3/))
-- **[v0.x](https://v0.mui.com/)** ([Migration to v1](https://mui.com/material-ui/guides/migration-v0x/))
+- **[v4.x](https://v4.mui.com/)** ([Migration from v4 to v5](https://mui.com/material-ui/migration/migration-v4/))
+- **[v3.x](https://v3.mui.com/)** ([Migration from v3 to v4](https://mui.com/material-ui/migration/migration-v3/))
+- **[v0.x](https://v0.mui.com/)** ([Migration to v1](https://mui.com/material-ui/migration/migration-v0x/))
 
 </details>
 
@@ -134,15 +136,10 @@ Here is an example of a basic app using Material UI's `Button` component:
 
 ```jsx
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import Button from '@mui/material/Button';
 
 function App() {
-  return (
-    <Button variant="contained" color="primary">
-      Hello World
-    </Button>
-  );
+  return <Button variant="contained">Hello World</Button>;
 }
 ```
 
@@ -191,6 +188,10 @@ Future plans and high-priority features and enhancements can be found in our [ro
 This project is licensed under the terms of the
 [MIT license](/LICENSE).
 
+## Security
+
+For details of supported versions and contact details for reporting security issues, please refer to the [security policy](https://github.com/mui/material-ui/blob/master/SECURITY.md).
+
 ## Sponsoring services
 
 These great services sponsor MUI's core infrastructure:

package/Slider/Slider.d.ts

@@ -3,6 +3,7 @@ import {
   ExtendSliderUnstyledTypeMap,
   ExtendSliderUnstyled,
   SliderUnstyledTypeMap,
+  SliderValueLabelProps,
 } from '@mui/base/SliderUnstyled';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
@@ -55,13 +56,14 @@ export type SliderTypeMap<
   defaultComponent: D;
 }>;
 
+export { SliderValueLabelProps } from '@mui/base/SliderUnstyled';
+
 type SliderRootProps = NonNullable<SliderTypeMap['props']['componentsProps']>['root'];
 type SliderMarkProps = NonNullable<SliderTypeMap['props']['componentsProps']>['mark'];
 type SliderMarkLabelProps = NonNullable<SliderTypeMap['props']['componentsProps']>['markLabel'];
 type SliderRailProps = NonNullable<SliderTypeMap['props']['componentsProps']>['rail'];
 type SliderTrackProps = NonNullable<SliderTypeMap['props']['componentsProps']>['track'];
 type SliderThumbProps = NonNullable<SliderTypeMap['props']['componentsProps']>['thumb'];
-type SliderValueLabelProps = NonNullable<SliderTypeMap['props']['componentsProps']>['valueLabel'];
 type SliderInputProps = NonNullable<SliderTypeMap['props']['componentsProps']>['input'];
 
 export const SliderRoot: React.FC<SliderRootProps>;

package/Slider/Slider.js

@@ -284,7 +284,6 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  top: -10,
   transformOrigin: 'bottom center',
   transform: 'translateY(-100%) scale(0)',
   position: 'absolute',
@@ -295,20 +294,34 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   alignItems: 'center',
   justifyContent: 'center',
   padding: '0.25rem 0.75rem'
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(12),
-  padding: '0.25rem 0.5rem'
-}, {
+}, ownerState.orientation === 'horizontal' && {
+  top: '-10px',
   '&:before': {
     position: 'absolute',
     content: '""',
     width: 8,
     height: 8,
+    transform: 'translate(-50%, 50%) rotate(45deg)',
+    backgroundColor: 'inherit',
     bottom: 0,
-    left: '50%',
+    left: '50%'
+  }
+}, ownerState.orientation === 'vertical' && {
+  right: '30px',
+  top: '25px',
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    width: 8,
+    height: 8,
     transform: 'translate(-50%, 50%) rotate(45deg)',
-    backgroundColor: 'inherit'
+    backgroundColor: 'inherit',
+    right: '-20%',
+    top: '25%'
   }
+}, ownerState.size === 'small' && {
+  fontSize: theme.typography.pxToRem(12),
+  padding: '0.25rem 0.5rem'
 }));
 process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes
 /* remove-proptypes */
@@ -574,12 +587,14 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
     thumb: PropTypes.object,
     track: PropTypes.object,
     valueLabel: PropTypes.shape({
+      children: PropTypes.element,
       className: PropTypes.string,
       components: PropTypes.shape({
         Root: PropTypes.elementType
       }),
+      open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+      value: PropTypes.number,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })
   }),

package/Snackbar/Snackbar.js

@@ -41,16 +41,11 @@ const SnackbarRoot = styled('div', {
   theme,
   ownerState
 }) => {
-  const center = _extends({}, !ownerState.isRtl && {
+  const center = {
     left: '50%',
     right: 'auto',
     transform: 'translateX(-50%)'
-  }, ownerState.isRtl && {
-    right: '50%',
-    left: 'auto',
-    transform: 'translateX(50%)'
-  });
-
+  };
   return _extends({
     zIndex: (theme.vars || theme).zIndex.snackbar,
     position: 'fixed',
@@ -72,19 +67,13 @@ const SnackbarRoot = styled('div', {
       top: 24
     } : {
       bottom: 24
-    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && _extends({}, !ownerState.isRtl && {
+    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
       left: 24,
       right: 'auto'
-    }, ownerState.isRtl && {
+    }, ownerState.anchorOrigin.horizontal === 'right' && {
       right: 24,
       left: 'auto'
-    }), ownerState.anchorOrigin.horizontal === 'right' && _extends({}, !ownerState.isRtl && {
-      right: 24,
-      left: 'auto'
-    }, ownerState.isRtl && {
-      left: 24,
-      right: 'auto'
-    }))
+    })
   });
 });
 const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
@@ -131,14 +120,11 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
         TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
         other = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  const isRtl = theme.direction === 'rtl';
-
   const ownerState = _extends({}, props, {
     anchorOrigin: {
       vertical,
       horizontal
-    },
-    isRtl
+    }
   });
 
   const classes = useUtilityClasses(ownerState);

package/Stack/Stack.js

@@ -59,7 +59,7 @@ export const style = ({
   if (ownerState.spacing) {
     const transformer = createUnarySpacing(theme);
     const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-      if (ownerState.spacing[breakpoint] != null || ownerState.direction[breakpoint] != null) {
+      if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
         acc[breakpoint] = true;
       }
 

package/StepIcon/StepIcon.js

@@ -120,8 +120,9 @@ const StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
       })), /*#__PURE__*/_jsx(StepIconText, {
         className: classes.text,
         x: "12",
-        y: "16",
+        y: "12",
         textAnchor: "middle",
+        dominantBaseline: "central",
         ownerState: ownerState,
         children: icon
       })]

package/Tab/Tab.d.ts

@@ -30,7 +30,6 @@ export type TabTypeMap<P = {}, D extends React.ElementType = 'div'> = ExtendButt
      * The icon to display.
      */
     icon?: string | React.ReactElement;
-
     /**
      * The position of the icon relative to the label.
      * @default 'top'