@mui/material 5.0.2 → 5.0.6

package/modern/InputLabel/InputLabel.js

@@ -40,7 +40,7 @@ const InputLabelRoot = styled(FormLabel, {
     } = props;
     return [{
       [`& .${formLabelClasses.asterisk}`]: styles.asterisk
-    }, styles.root, !ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
+    }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
   }
 })(({
   theme,
@@ -206,7 +206,7 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/modern/LinearProgress/LinearProgress.js

@@ -338,7 +338,7 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the progress indicator for the determinate and buffer variants.

package/modern/Link/Link.js

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

package/modern/List/List.js

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

package/modern/ListItem/ListItem.js

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

package/modern/ListItemAvatar/ListItemAvatar.js

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

package/modern/ListItemButton/ListItemButton.js

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

package/modern/ListItemIcon/ListItemIcon.js

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

package/modern/ListItemSecondaryAction/ListItemSecondaryAction.js

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

package/modern/ListItemText/ListItemText.js

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

package/modern/ListSubheader/ListSubheader.js

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

package/modern/Menu/Menu.js

@@ -266,7 +266,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * The length of the transition in `ms`, or 'auto'

package/modern/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.func, PropTypes.object]),
 
   /**
    * @default 0

package/modern/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.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/modern/Modal/Modal.js

@@ -271,6 +271,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.func, PropTypes.object])
 } : void 0;
 export default Modal;

package/modern/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.func, PropTypes.object]),
 
   /**
    * The `input` value. The DOM API casts this to a string.

package/modern/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.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/modern/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.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/modern/PaginationItem/PaginationItem.js

@@ -250,13 +250,12 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     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,
@@ -341,7 +340,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.func, PropTypes.object]),
 
   /**
    * The type of pagination item.

package/modern/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.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/modern/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.func, PropTypes.object]),
 
   /**
    * This is the point on the popover which

package/modern/Popper/index.js

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

package/modern/Radio/Radio.js

@@ -222,7 +222,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.func, PropTypes.object]),
 
   /**
    * The value of the component. The DOM API casts this to a string.

package/modern/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.func, PropTypes.object]),
 
   /**
    * The rating value.

package/modern/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.func, PropTypes.object]),
 
   /**
    * The `input` value. Providing an empty string will select no options.

package/modern/Skeleton/Skeleton.js

@@ -208,7 +208,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.func, PropTypes.object]),
 
   /**
    * The type of content that will be rendered.

package/modern/Slide/Slide.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded = ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
@@ -97,6 +97,7 @@ const defaultTimeout = {
 
 const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   const {
+    addEndListener,
     appear = true,
     children,
     container: containerProp,
@@ -184,6 +185,14 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       onExited(node);
     }
   });
+
+  const handleAddEndListener = next => {
+    if (addEndListener) {
+      // Old call signature before `react-transition-group` implemented `nodeRef`
+      addEndListener(childrenRef.current, next);
+    }
+  };
+
   const updatePosition = React.useCallback(() => {
     if (childrenRef.current) {
       setTranslateValue(direction, childrenRef.current, containerProp);
@@ -222,6 +231,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     onExit: handleExit,
     onExited: handleExited,
     onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
     appear: appear,
     in: inProp,
     timeout: timeout
@@ -244,6 +254,13 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
 
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: PropTypes.func,
+
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -254,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/modern/Slider/Slider.js

@@ -631,7 +631,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.func, PropTypes.object]),
 
   /**
    * Tab index attribute of the hidden `input` element.

package/modern/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.func, PropTypes.object]),
 
   /**
    * The component used for the transition.

package/modern/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.func, PropTypes.object])
 } : void 0;
 export default SnackbarContent;

package/modern/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.func, PropTypes.object]),
 
   /**
    * The component used for the transition.

package/modern/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.func, PropTypes.object]),
 
   /**
    * `classes` prop applied to the [`Tooltip`](/api/tooltip/) element.

package/modern/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.func, PropTypes.object])
 } : void 0;
 SpeedDialIcon.muiName = 'SpeedDialIcon';
 export default SpeedDialIcon;

package/modern/Stack/Stack.js

@@ -162,6 +162,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.func, PropTypes.object])
 } : void 0;
 export default Stack;

package/modern/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.func, PropTypes.object])
 } : void 0;
 export default Step;

package/modern/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.func, PropTypes.object])
 } : void 0;
 export default StepButton;

package/modern/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.func, PropTypes.object])
 } : void 0;
 export default StepConnector;

package/modern/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.func, PropTypes.object]),
 
   /**
    * The component used for the transition.

package/modern/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.func, PropTypes.object])
 } : void 0;
 export default StepIcon;

package/modern/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.func, PropTypes.object])
 } : void 0;
 StepLabel.muiName = 'StepLabel';
 export default StepLabel;

package/modern/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.func, PropTypes.object])
 } : void 0;
 export default Stepper;

package/modern/SvgIcon/SvgIcon.js

@@ -162,7 +162,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.func, PropTypes.object]),
 
   /**
    * Provides a human-readable title for the element that contains it.

package/modern/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.func, PropTypes.object]),
 
   /**
    * The value of the component. The DOM API casts this to a string.

package/modern/Tab/Tab.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
+const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -25,7 +25,8 @@ const useUtilityClasses = ownerState => {
     disabled
   } = ownerState;
   const slots = {
-    root: ['root', icon && label && 'labelIcon', `textColor${capitalize(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled']
+    root: ['root', icon && label && 'labelIcon', `textColor${capitalize(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
+    iconWrapper: ['iconWrapper']
   };
   return composeClasses(slots, getTabUtilityClass, classes);
 };
@@ -51,16 +52,24 @@ const TabRoot = styled(ButtonBase, {
   padding: '12px 16px',
   overflow: 'hidden',
   whiteSpace: 'normal',
-  textAlign: 'center',
-  flexDirection: 'column',
+  textAlign: 'center'
+}, ownerState.label && {
+  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
+}, {
   lineHeight: 1.25
 }, ownerState.icon && ownerState.label && {
   minHeight: 72,
   paddingTop: 9,
   paddingBottom: 9,
-  [`& > *:first-child`]: {
+  [`& > .${tabClasses.iconWrapper}`]: _extends({}, ownerState.iconPosition === 'top' && {
     marginBottom: 6
-  }
+  }, ownerState.iconPosition === 'bottom' && {
+    marginTop: 6
+  }, ownerState.iconPosition === 'start' && {
+    marginRight: theme.spacing(1)
+  }, ownerState.iconPosition === 'end' && {
+    marginLeft: theme.spacing(1)
+  })
 }, ownerState.textColor === 'inherit' && {
   color: 'inherit',
   opacity: 0.6,
@@ -107,7 +116,8 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     disableFocusRipple = false,
     // eslint-disable-next-line react/prop-types
     fullWidth,
-    icon,
+    icon: iconProp,
+    iconPosition = 'top',
     // eslint-disable-next-line react/prop-types
     indicator,
     label,
@@ -129,7 +139,8 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     disabled,
     disableFocusRipple,
     selected,
-    icon: !!icon,
+    icon: !!iconProp,
+    iconPosition,
     label: !!label,
     fullWidth,
     textColor,
@@ -137,6 +148,9 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
+  const icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {
+    className: clsx(classes.iconWrapper, iconProp.props.className)
+  }) : iconProp;
 
   const handleClick = event => {
     if (!selected && onChange) {
@@ -170,7 +184,11 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     ownerState: ownerState,
     tabIndex: selected ? 0 : -1
   }, other, {
-    children: [icon, label, indicator]
+    children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [icon, label]
+    }) : /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [label, icon]
+    }), indicator]
   }));
 });
 process.env.NODE_ENV !== "production" ? Tab.propTypes
@@ -223,6 +241,12 @@ process.env.NODE_ENV !== "production" ? Tab.propTypes
    */
   icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
 
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition: PropTypes.oneOf(['bottom', 'end', 'start', 'top']),
+
   /**
    * The label element.
    */
@@ -246,7 +270,7 @@ process.env.NODE_ENV !== "production" ? Tab.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.