@mui/material 5.0.3 → 5.1.0

package/MenuItem/MenuItem.js

@@ -115,7 +115,10 @@ const MenuItemRoot = styled(ButtonBase, {
     minHeight: 'auto'
   }
 }, ownerState.dense && _extends({
-  minHeight: 36
+  minHeight: 32,
+  // https://material.io/components/menus#specs > Dense
+  paddingTop: 4,
+  paddingBottom: 4
 }, theme.typography.body2, {
   [`& .${listItemIconClasses.root} svg`]: {
     fontSize: '1.25rem'
@@ -263,7 +266,7 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * @default 0

package/MobileStepper/MobileStepper.js

@@ -211,7 +211,7 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/Modal/Modal.js

@@ -273,6 +273,6 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Modal;

package/NativeSelect/NativeSelect.js

@@ -131,7 +131,7 @@ process.env.NODE_ENV !== "production" ? NativeSelect.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The `input` value. The DOM API casts this to a string.

package/OutlinedInput/NotchedOutline.js

@@ -26,7 +26,9 @@ const NotchedOutlineLegend = styled('legend', {
 })(({
   ownerState,
   theme
-}) => _extends({}, ownerState.label === undefined && {
+}) => _extends({
+  float: 'unset'
+}, ownerState.label === undefined && {
   padding: 0,
   lineHeight: '11px',
   // sync with `height` in `legend` styles
@@ -36,7 +38,9 @@ const NotchedOutlineLegend = styled('legend', {
   })
 }, ownerState.label !== undefined && _extends({
   display: 'block',
+  // Fix conflict with normalize.css and sanitize.css
   width: 'auto',
+  // Fix conflict with bootstrap
   padding: 0,
   height: 11,
   // sync with `lineHeight` in `legend` styles
@@ -47,6 +51,7 @@ const NotchedOutlineLegend = styled('legend', {
     duration: 50,
     easing: theme.transitions.easing.easeOut
   }),
+  whiteSpace: 'nowrap',
   '& > span': {
     paddingLeft: 5,
     paddingRight: 5,

package/OutlinedInput/OutlinedInput.js

@@ -310,7 +310,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).

package/Pagination/Pagination.js

@@ -259,7 +259,7 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/PaginationItem/PaginationItem.d.ts

@@ -26,6 +26,21 @@ export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'di
       'standard' | 'primary' | 'secondary',
       PaginationItemPropsColorOverrides
     >;
+    /**
+     * The components used for first, last, next & previous item type
+     * @default {
+     *   first: FirstPageIcon,
+     *   last: LastPageIcon,
+     *   next: NavigateNextIcon,
+     *   previous: NavigateBeforeIcon,
+     * }
+     */
+    components?: {
+      first?: React.ElementType;
+      last?: React.ElementType;
+      next?: React.ElementType;
+      previous?: React.ElementType;
+    };
     /**
      * If `true`, the component is disabled.
      * @default false

package/PaginationItem/PaginationItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "disabled", "page", "selected", "shape", "size", "type", "variant"];
+const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -216,6 +216,12 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     className,
     color = 'standard',
     component,
+    components = {
+      first: FirstPageIcon,
+      last: LastPageIcon,
+      next: NavigateNextIcon,
+      previous: NavigateBeforeIcon
+    },
     disabled = false,
     page,
     selected = false,
@@ -239,24 +245,23 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
   const theme = useTheme();
   const classes = useUtilityClasses(ownerState);
   const normalizedIcons = theme.direction === 'rtl' ? {
-    previous: NavigateNextIcon,
-    next: NavigateBeforeIcon,
-    last: FirstPageIcon,
-    first: LastPageIcon
+    previous: components.next || NavigateNextIcon,
+    next: components.previous || NavigateBeforeIcon,
+    last: components.first || FirstPageIcon,
+    first: components.last || LastPageIcon
   } : {
-    previous: NavigateBeforeIcon,
-    next: NavigateNextIcon,
-    first: FirstPageIcon,
-    last: LastPageIcon
+    previous: components.previous || NavigateBeforeIcon,
+    next: components.next || NavigateNextIcon,
+    first: components.first || FirstPageIcon,
+    last: components.last || LastPageIcon
   };
   const Icon = normalizedIcons[type];
-  return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, _extends({
+  return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, {
     ref: ref,
     ownerState: ownerState,
-    className: clsx(classes.root, className)
-  }, other, {
+    className: clsx(classes.root, className),
     children: "\u2026"
-  })) : /*#__PURE__*/_jsxs(PaginationItemPage, _extends({
+  }) : /*#__PURE__*/_jsxs(PaginationItemPage, _extends({
     ref: ref,
     ownerState: ownerState,
     component: component,
@@ -307,6 +312,22 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
    */
   component: PropTypes.elementType,
 
+  /**
+   * The components used for first, last, next & previous item type
+   * @default {
+   *   first: FirstPageIcon,
+   *   last: LastPageIcon,
+   *   next: NavigateNextIcon,
+   *   previous: NavigateBeforeIcon,
+   * }
+   */
+  components: PropTypes.shape({
+    first: PropTypes.elementType,
+    last: PropTypes.elementType,
+    next: PropTypes.elementType,
+    previous: PropTypes.elementType
+  }),
+
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -341,7 +362,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The type of pagination item.

package/Paper/Paper.js

@@ -160,7 +160,7 @@ process.env.NODE_ENV !== "production" ? Paper.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/Popover/Popover.d.ts

@@ -114,7 +114,7 @@ export interface PopoverProps extends StandardProps<ModalProps, 'children'> {
    * @default Grow
    */
   TransitionComponent?: React.JSXElementConstructor<
-    TransitionProps & { children?: React.ReactElement<any, any> }
+    TransitionProps & { children: React.ReactElement<any, any> }
   >;
   /**
    * Set to 'auto' to automatically calculate transition time based on height.

package/Popover/Popover.js

@@ -458,7 +458,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * This is the point on the popover which

package/Popper/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './Popper';
-export * from './Popper';
+export { default } from '@mui/core/Popper';
+export * from '@mui/core/Popper';

package/Popper/index.js

@@ -1 +1 @@
-export { default } from './Popper';
+export { default } from '@mui/core/Popper';

package/Radio/Radio.js

@@ -224,7 +224,7 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the component. The DOM API casts this to a string.

package/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface RadioGroupContextValue {
+    name: string | undefined;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
+    value: any;
+}
+/**
+ * @ignore - internal component.
+ */
+declare const RadioGroupContext: React.Context<RadioGroupContextValue | undefined>;
+export default RadioGroupContext;

package/RadioGroup/RadioGroupContext.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
+
 /**
  * @ignore - internal component.
  */
-
-const RadioGroupContext = /*#__PURE__*/React.createContext();
+const RadioGroupContext = /*#__PURE__*/React.createContext(undefined);
 
 if (process.env.NODE_ENV !== 'production') {
   RadioGroupContext.displayName = 'RadioGroupContext';

package/RadioGroup/useRadioGroup.d.ts

@@ -1,5 +1,4 @@
-import { RadioGroupProps } from './RadioGroup';
-
-export interface RadioGroupState extends Pick<RadioGroupProps, 'name' | 'onChange' | 'value'> {}
-
-export default function useRadioGroup(): RadioGroupState | undefined;
+import { RadioGroupContextValue } from './RadioGroupContext';
+export interface RadioGroupState extends RadioGroupContextValue {
+}
+export default function useRadioGroup(): RadioGroupState | undefined;

package/Rating/Rating.js

@@ -536,7 +536,6 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
                 style: items.length - 1 === indexDecimal ? {} : {
                   width: itemDecimalValue === value ? `${(indexDecimal + 1) * precision * 100}%` : '0%',
                   overflow: 'hidden',
-                  zIndex: 1,
                   position: 'absolute'
                 }
               }
@@ -711,7 +710,7 @@ process.env.NODE_ENV !== "production" ? Rating.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The rating value.

package/ScopedCssBaseline/ScopedCssBaseline.d.ts

@@ -12,6 +12,12 @@ export interface ScopedCssBaselineTypeMap<P = {}, D extends React.ElementType =
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<ScopedCssBaselineClasses>;
+    /**
+     * Enable `color-scheme` css property to use `theme.palette.mode`.
+     * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+     * For browser support, check out https://caniuse.com/?search=color-scheme
+     */
+    enableColorScheme?: boolean;
   };
   defaultComponent: D;
 }

package/ScopedCssBaseline/ScopedCssBaseline.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "component"];
+const _excluded = ["className", "component", "enableColorScheme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -26,15 +26,18 @@ const ScopedCssBaselineRoot = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })(({
-  theme
-}) => _extends({}, html, body(theme), {
-  '& *, & *::before, & *::after': {
-    boxSizing: 'inherit'
-  },
-  '& strong, & b': {
-    fontWeight: theme.typography.fontWeightBold
-  }
-}));
+  theme,
+  ownerState
+}) => {
+  return _extends({}, html(theme, ownerState.enableColorScheme), body(theme), {
+    '& *, & *::before, & *::after': {
+      boxSizing: 'inherit'
+    },
+    '& strong, & b': {
+      fontWeight: theme.typography.fontWeightBold
+    }
+  });
+});
 const ScopedCssBaseline = /*#__PURE__*/React.forwardRef(function ScopedCssBaseline(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -86,6 +89,13 @@ process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes.elementType
+  component: PropTypes.elementType,
+
+  /**
+   * Enable `color-scheme` css property to use `theme.palette.mode`.
+   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * For browser support, check out https://caniuse.com/?search=color-scheme
+   */
+  enableColorScheme: PropTypes.bool
 } : void 0;
 export default ScopedCssBaseline;

package/Select/Select.js

@@ -273,7 +273,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The `input` value. Providing an empty string will select no options.

package/Skeleton/Skeleton.js

@@ -215,7 +215,7 @@ process.env.NODE_ENV !== "production" ? Skeleton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The type of content that will be rendered.

package/Slide/Slide.d.ts

@@ -11,7 +11,7 @@ export interface SlideProps extends TransitionProps {
   /**
    * A single child content element.
    */
-  children?: React.ReactElement<any, any>;
+  children: React.ReactElement<any, any>;
   /**
    * An HTML element, or a function that returns one.
    * It's used to set the container the Slide is transitioning from.

package/Slide/Slide.js

@@ -271,7 +271,7 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
   /**
    * A single child content element.
    */
-  children: elementAcceptingRef,
+  children: elementAcceptingRef.isRequired,
 
   /**
    * An HTML element, or a function that returns one.

package/Slider/Slider.js

@@ -633,7 +633,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * Tab index attribute of the hidden `input` element.

package/Snackbar/Snackbar.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { ClickAwayListenerProps } from '@mui/core/ClickAwayListener';
 import { Theme } from '../styles';
 import { InternalStandardProps as StandardProps } from '..';
 import { SnackbarContentProps } from '../SnackbarContent';
 import { TransitionProps } from '../transitions/transition';
-import { ClickAwayListenerProps } from '../ClickAwayListener';
 import { SnackbarClasses } from './snackbarClasses';
 
 export interface SnackbarOrigin {
@@ -98,7 +98,7 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
    * @default Grow
    */
   TransitionComponent?: React.JSXElementConstructor<
-    TransitionProps & { children?: React.ReactElement<any, any> }
+    TransitionProps & { children: React.ReactElement<any, any> }
   >;
   /**
    * The duration for the transition, in milliseconds.

package/Snackbar/Snackbar.js

@@ -6,11 +6,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/core';
+import ClickAwayListener from '@mui/core/ClickAwayListener';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import { duration } from '../styles/createTransitions';
-import ClickAwayListener from '../ClickAwayListener';
 import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
@@ -377,7 +377,7 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The component used for the transition.

package/SnackbarContent/SnackbarContent.js

@@ -141,6 +141,6 @@ process.env.NODE_ENV !== "production" ? SnackbarContent.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default SnackbarContent;

package/SpeedDial/SpeedDial.js

@@ -529,7 +529,7 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The component used for the transition.

package/SpeedDialAction/SpeedDialAction.js

@@ -243,7 +243,7 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element.

package/SpeedDialIcon/SpeedDialIcon.js

@@ -144,7 +144,7 @@ process.env.NODE_ENV !== "production" ? SpeedDialIcon.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 SpeedDialIcon.muiName = 'SpeedDialIcon';
 export default SpeedDialIcon;

package/Stack/Stack.js

@@ -49,7 +49,10 @@ export const style = ({
     display: 'flex'
   }, handleBreakpoints({
     theme
-  }, ownerState.direction, propValue => ({
+  }, resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  }), propValue => ({
     flexDirection: propValue
   })));
 
@@ -162,6 +165,6 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes
   /**
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Stack;

package/Step/Step.js

@@ -176,6 +176,6 @@ process.env.NODE_ENV !== "production" ? Step.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Step;

package/StepButton/StepButton.js

@@ -136,6 +136,6 @@ process.env.NODE_ENV !== "production" ? StepButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default StepButton;

package/StepConnector/StepConnector.js

@@ -136,6 +136,6 @@ process.env.NODE_ENV !== "production" ? StepConnector.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default StepConnector;

package/StepContent/StepContent.js

@@ -137,7 +137,7 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The component used for the transition.

package/StepIcon/StepIcon.js

@@ -174,6 +174,6 @@ process.env.NODE_ENV !== "production" ? StepIcon.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default StepIcon;

package/StepLabel/StepLabel.js

@@ -236,7 +236,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 StepLabel.muiName = 'StepLabel';
 export default StepLabel;

package/Stepper/Stepper.js

@@ -155,6 +155,6 @@ process.env.NODE_ENV !== "production" ? Stepper.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Stepper;

package/SvgIcon/SvgIcon.js

@@ -166,7 +166,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * Provides a human-readable title for the element that contains it.

package/Switch/Switch.js

@@ -333,7 +333,7 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the component. The DOM API casts this to a string.

package/Tab/Tab.d.ts

@@ -30,6 +30,12 @@ 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'
+     */
+    iconPosition?: 'top' | 'bottom' | 'start' | 'end';
     /**
      * The label element.
      */