@mui/material 5.0.1 → 5.0.5

package/node/Tab/Tab.js

@@ -33,7 +33,7 @@ var _tabClasses = _interopRequireWildcard(require("./tabClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -51,7 +51,8 @@ const useUtilityClasses = ownerState => {
     disabled
   } = ownerState;
   const slots = {
-    root: ['root', icon && label && 'labelIcon', `textColor${(0, _capitalize.default)(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled']
+    root: ['root', icon && label && 'labelIcon', `textColor${(0, _capitalize.default)(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
+    iconWrapper: ['iconWrapper']
   };
   return (0, _core.unstable_composeClasses)(slots, _tabClasses.getTabUtilityClass, classes);
 };
@@ -77,16 +78,24 @@ const TabRoot = (0, _styled.default)(_ButtonBase.default, {
   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.default.iconWrapper}`]: (0, _extends2.default)({}, 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,
@@ -132,7 +141,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,
@@ -153,13 +163,17 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     disabled,
     disableFocusRipple,
     selected,
-    icon: !!icon,
+    icon: !!iconProp,
+    iconPosition,
     label: !!label,
     fullWidth,
     textColor,
     wrapped
   });
   const classes = useUtilityClasses(ownerState);
+  const icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {
+    className: (0, _clsx.default)(classes.iconWrapper, iconProp.props.className)
+  }) : iconProp;
 
   const handleClick = event => {
     if (!selected && onChange) {
@@ -193,7 +207,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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [icon, label]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [label, icon]
+    }), indicator]
   }));
 });
 process.env.NODE_ENV !== "production" ? Tab.propTypes
@@ -246,6 +264,12 @@ process.env.NODE_ENV !== "production" ? Tab.propTypes
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.string]),
 
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition: _propTypes.default.oneOf(['bottom', 'end', 'start', 'top']),
+
   /**
    * The label element.
    */
@@ -269,7 +293,7 @@ process.env.NODE_ENV !== "production" ? Tab.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.

package/node/Tab/tabClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTabUtilityClass = getTabUtilityClass;
 exports.default = void 0;
+exports.getTabUtilityClass = getTabUtilityClass;
 
 var _core = require("@mui/core");
 
@@ -12,6 +12,6 @@ function getTabUtilityClass(slot) {
   return (0, _core.generateUtilityClass)('MuiTab', slot);
 }
 
-const tabClasses = (0, _core.generateUtilityClasses)('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped']);
+const tabClasses = (0, _core.generateUtilityClasses)('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);
 var _default = tabClasses;
 exports.default = _default;

package/node/TabScrollButton/TabScrollButton.js

@@ -152,7 +152,7 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TabScrollButton;
 exports.default = _default;

package/node/TabScrollButton/tabScrollButtonClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTabScrollButtonUtilityClass = getTabScrollButtonUtilityClass;
 exports.default = void 0;
+exports.getTabScrollButtonUtilityClass = getTabScrollButtonUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Table/Table.js

@@ -163,7 +163,7 @@ process.env.NODE_ENV !== "production" ? Table.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = Table;
 exports.default = _default;

package/node/Table/tableClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableUtilityClass = getTableUtilityClass;
 exports.default = void 0;
+exports.getTableUtilityClass = getTableUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableBody/TableBody.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? TableBody.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableBody;
 exports.default = _default;

package/node/TableBody/tableBodyClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableBodyUtilityClass = getTableBodyUtilityClass;
 exports.default = void 0;
+exports.getTableBodyUtilityClass = getTableBodyUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableCell/TableCell.js

@@ -245,7 +245,7 @@ process.env.NODE_ENV !== "production" ? TableCell.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Specify the cell type.

package/node/TableCell/tableCellClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableCellUtilityClass = getTableCellUtilityClass;
 exports.default = void 0;
+exports.getTableCellUtilityClass = getTableCellUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableContainer/TableContainer.js

@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? TableContainer.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableContainer;
 exports.default = _default;

package/node/TableContainer/tableContainerClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableContainerUtilityClass = getTableContainerUtilityClass;
 exports.default = void 0;
+exports.getTableContainerUtilityClass = getTableContainerUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableFooter/TableFooter.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? TableFooter.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableFooter;
 exports.default = _default;

package/node/TableFooter/tableFooterClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableFooterUtilityClass = getTableFooterUtilityClass;
 exports.default = void 0;
+exports.getTableFooterUtilityClass = getTableFooterUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableHead/TableHead.js

@@ -113,7 +113,7 @@ process.env.NODE_ENV !== "production" ? TableHead.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableHead;
 exports.default = _default;

package/node/TableHead/tableHeadClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableHeadUtilityClass = getTableHeadUtilityClass;
 exports.default = void 0;
+exports.getTableHeadUtilityClass = getTableHeadUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TablePagination/TablePagination.js

@@ -444,7 +444,7 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TablePagination;
 exports.default = _default;

package/node/TablePagination/tablePaginationClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTablePaginationUtilityClass = getTablePaginationUtilityClass;
 exports.default = void 0;
+exports.getTablePaginationUtilityClass = getTablePaginationUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableRow/TableRow.js

@@ -157,7 +157,7 @@ process.env.NODE_ENV !== "production" ? TableRow.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableRow;
 exports.default = _default;

package/node/TableRow/tableRowClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableRowUtilityClass = getTableRowUtilityClass;
 exports.default = void 0;
+exports.getTableRowUtilityClass = getTableRowUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TableSortLabel/TableSortLabel.js

@@ -201,7 +201,7 @@ process.env.NODE_ENV !== "production" ? TableSortLabel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = TableSortLabel;
 exports.default = _default;

package/node/TableSortLabel/tableSortLabelClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTableSortLabelUtilityClass = getTableSortLabelUtilityClass;
 exports.default = void 0;
+exports.getTableSortLabelUtilityClass = getTableSortLabelUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Tabs/Tabs.js

@@ -834,7 +834,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Props applied to the tab indicator element.

package/node/Tabs/tabsClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTabsUtilityClass = getTabsUtilityClass;
 exports.default = void 0;
+exports.getTabsUtilityClass = getTabsUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TextField/TextField.js

@@ -437,7 +437,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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/node/TextField/textFieldClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTextFieldUtilityClass = getTextFieldUtilityClass;
 exports.default = void 0;
+exports.getTextFieldUtilityClass = getTextFieldUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/TextareaAutosize/index.js

@@ -12,4 +12,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _TextareaAutosize = _interopRequireDefault(require("./TextareaAutosize"));
+var _TextareaAutosize = _interopRequireDefault(require("@mui/core/TextareaAutosize"));

package/node/ToggleButton/ToggleButton.js

@@ -248,7 +248,7 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The value to associate with the button when selected in a

package/node/ToggleButton/toggleButtonClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToggleButtonUtilityClass = getToggleButtonUtilityClass;
 exports.default = void 0;
+exports.getToggleButtonUtilityClass = getToggleButtonUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/ToggleButtonGroup/ToggleButtonGroup.js

@@ -266,7 +266,7 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * The currently selected value within the group or an array of selected

package/node/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToggleButtonGroupUtilityClass = getToggleButtonGroupUtilityClass;
 exports.default = void 0;
+exports.getToggleButtonGroupUtilityClass = getToggleButtonGroupUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Toolbar/Toolbar.js

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

package/node/Toolbar/toolbarClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarUtilityClass = getToolbarUtilityClass;
 exports.default = void 0;
+exports.getToolbarUtilityClass = getToolbarUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Tooltip/Tooltip.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testReset = testReset;
 exports.default = void 0;
+exports.testReset = testReset;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -50,7 +50,7 @@ var _tooltipClasses = _interopRequireWildcard(require("./tooltipClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["arrow", "children", "classes", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"];
+const _excluded = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "title", "TransitionComponent", "TransitionProps"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -246,9 +246,12 @@ function composeEventHandler(handler, eventHandler) {
 
     handler(event);
   };
-}
+} // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
+
 
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
+  var _components$Popper, _ref, _components$Transitio, _components$Tooltip, _components$Arrow, _componentsProps$popp;
+
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiTooltip'
@@ -256,6 +259,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const {
     arrow = false,
     children,
+    components = {},
+    componentsProps = {},
     describeChild = false,
     disableFocusListener = false,
     disableHoverListener = false,
@@ -272,10 +277,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     onOpen,
     open: openProp,
     placement = 'bottom',
-    PopperComponent = _Popper.default,
+    PopperComponent: PopperComponentProp,
     PopperProps = {},
     title,
-    TransitionComponent = _Grow.default,
+    TransitionComponent: TransitionComponentProp = _Grow.default,
     TransitionProps
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -607,14 +612,21 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     arrow,
     disableInteractive,
     placement,
-    PopperComponent,
+    PopperComponentProp,
     touch: ignoreNonTouchEvents.current
   });
   const classes = useUtilityClasses(ownerState);
+  const PopperComponent = (_components$Popper = components.Popper) != null ? _components$Popper : TooltipPopper;
+  const TransitionComponent = (_ref = (_components$Transitio = components.Transition) != null ? _components$Transitio : TransitionComponentProp) != null ? _ref : _Grow.default;
+  const TooltipComponent = (_components$Tooltip = components.Tooltip) != null ? _components$Tooltip : TooltipTooltip;
+  const ArrowComponent = (_components$Arrow = components.Arrow) != null ? _components$Arrow : TooltipArrow;
+  const popperProps = (0, _core.appendOwnerState)(PopperComponent, (0, _extends2.default)({}, PopperProps, componentsProps.popper), ownerState);
+  const transitionProps = (0, _core.appendOwnerState)(TransitionComponent, (0, _extends2.default)({}, TransitionProps, componentsProps.transition), ownerState);
+  const tooltipProps = (0, _core.appendOwnerState)(TooltipComponent, (0, _extends2.default)({}, componentsProps.tooltip), ownerState);
+  const tooltipArrowProps = (0, _core.appendOwnerState)(ArrowComponent, (0, _extends2.default)({}, componentsProps.arrow), ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipPopper, (0, _extends2.default)({
-      as: PopperComponent,
-      className: classes.popper,
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, (0, _extends2.default)({
+      as: PopperComponentProp != null ? PopperComponentProp : _Popper.default,
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({
@@ -630,24 +642,26 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       open: childNode ? open : false,
       id: id,
       transition: true
-    }, interactiveWrapperListeners, PopperProps, {
+    }, interactiveWrapperListeners, popperProps, {
+      className: (0, _clsx.default)(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       popperOptions: popperOptions,
-      ownerState: ownerState,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
-        timeout: theme.transitions.duration.shorter
-      }, TransitionPropsInner, TransitionProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipTooltip, {
-          className: classes.tooltip,
-          ownerState: ownerState,
-          children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipArrow, {
-            className: classes.arrow,
-            ref: setArrowRef,
-            ownerState: ownerState
-          }) : null]
-        })
-      }))
+      }) => {
+        var _componentsProps$tool, _componentsProps$arro;
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
+          timeout: theme.transitions.duration.shorter
+        }, TransitionPropsInner, transitionProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipComponent, (0, _extends2.default)({}, tooltipProps, {
+            className: (0, _clsx.default)(classes.tooltip, (_componentsProps$tool = componentsProps.tooltip) == null ? void 0 : _componentsProps$tool.className),
+            children: [title, arrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowComponent, (0, _extends2.default)({}, tooltipArrowProps, {
+              className: (0, _clsx.default)(classes.arrow, (_componentsProps$arro = componentsProps.arrow) == null ? void 0 : _componentsProps$arro.className),
+              ref: setArrowRef
+            })) : null]
+          }))
+        }));
+      }
     }))]
   });
 });
@@ -680,6 +694,24 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    */
   className: _propTypes.default.string,
 
+  /**
+   * The components used for each slot inside the Tooltip.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: _propTypes.default.shape({
+    Arrow: _propTypes.default.elementType,
+    Popper: _propTypes.default.elementType,
+    Tooltip: _propTypes.default.elementType,
+    Transition: _propTypes.default.elementType
+  }),
+
+  /**
+   * The props used for each slot inside the Tooltip.
+   * @default {}
+   */
+  componentsProps: _propTypes.default.object,
+
   /**
    * Set to `true` if the `title` acts as an accessible description.
    * By default the `title` acts as an accessible label for the child.
@@ -796,7 +828,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Tooltip title. Zero-length titles string are never displayed.

package/node/Tooltip/tooltipClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTooltipUtilityClass = getTooltipUtilityClass;
 exports.default = void 0;
+exports.getTooltipUtilityClass = getTooltipUtilityClass;
 
 var _core = require("@mui/core");
 

package/node/Typography/Typography.js

@@ -203,7 +203,7 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
 
   /**
    * Applies the theme typography styles.

package/node/Typography/typographyClasses.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTypographyUtilityClass = getTypographyUtilityClass;
 exports.default = void 0;
+exports.getTypographyUtilityClass = getTypographyUtilityClass;
 
 var _core = require("@mui/core");