@mui/material 5.5.0 → 5.5.3

package/legacy/AppBar/AppBar.js

@@ -139,7 +139,9 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Autocomplete/Autocomplete.js

@@ -791,7 +791,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   disablePortal: PropTypes.bool,
 
   /**
-   * A filter function that determines the options that are eligible.
+   * A function that determines the filtered options to be rendered on search.
    *
    * @param {T[]} options The options to render.
    * @param {object} state The state of the component.

package/legacy/Backdrop/Backdrop.js

@@ -2,17 +2,21 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { isHostComponent } from '@mui/base';
-import BackdropUnstyled, { backdropUnstyledClasses } from '@mui/base/BackdropUnstyled';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Fade from '../Fade';
+import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var backdropClasses = backdropUnstyledClasses;
 
-var extendUtilityClasses = function extendUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  return classes;
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+      invisible = ownerState.invisible;
+  var slots = {
+    root: ['root', invisible && 'invisible']
+  };
+  return composeClasses(slots, getBackdropUtilityClass, classes);
 };
 
 var BackdropRoot = styled('div', {
@@ -40,7 +44,7 @@ var BackdropRoot = styled('div', {
   });
 });
 var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _componentsProps$root;
+  var _components$Root, _componentsProps$root;
 
   var props = useThemeProps({
     props: inProps,
@@ -48,6 +52,8 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
 
   var children = props.children,
+      _props$component = props.component,
+      component = _props$component === void 0 ? 'div' : _props$component,
       _props$components = props.components,
       components = _props$components === void 0 ? {} : _props$components,
       _props$componentsProp = props.componentsProps,
@@ -59,28 +65,23 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       transitionDuration = props.transitionDuration,
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
-      other = _objectWithoutProperties(props, ["children", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);
+      other = _objectWithoutProperties(props, ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);
 
   var ownerState = _extends({}, props, {
+    component: component,
     invisible: invisible
   });
 
-  var classes = extendUtilityClasses(ownerState);
+  var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/_jsx(BackdropUnstyled, {
-      className: className,
-      invisible: invisible,
-      components: _extends({
-        Root: BackdropRoot
-      }, components),
-      componentsProps: {
-        root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
-          ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-        })
-      },
+    children: /*#__PURE__*/_jsx(BackdropRoot, {
+      "aria-hidden": true,
+      as: (_components$Root = components.Root) != null ? _components$Root : component,
+      className: clsx(classes.root, className),
+      ownerState: _extends({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
       classes: classes,
       ref: ref,
       children: children
@@ -110,6 +111,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * The components used for each slot inside the Backdrop.
    * Either a string to use a HTML element or a component.

package/legacy/Backdrop/backdropClasses.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getBackdropUtilityClass(slot) {
+  return generateUtilityClass('MuiBackdrop', slot);
+}
+var backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+export default backdropClasses;

package/legacy/Backdrop/index.js

@@ -1,2 +1,3 @@
 export { default } from './Backdrop';
-export * from './Backdrop';
+export { default as backdropClasses } from './backdropClasses';
+export * from './backdropClasses';

package/legacy/Badge/Badge.js

@@ -270,7 +270,9 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/legacy/Button/Button.js

@@ -310,7 +310,9 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/ButtonBase/ButtonBase.js

@@ -157,11 +157,20 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref)
       }
     };
   }, []);
+
+  var _React$useState2 = React.useState(false),
+      mountedState = _React$useState2[0],
+      setMountedState = _React$useState2[1];
+
+  React.useEffect(function () {
+    setMountedState(true);
+  }, []);
+  var enableTouchRipple = mountedState && !disableRipple && !disabled;
   React.useEffect(function () {
-    if (focusVisible && focusRipple && !disableRipple) {
+    if (focusVisible && focusRipple && !disableRipple && mountedState) {
       rippleRef.current.pulsate();
     }
-  }, [disableRipple, focusRipple, focusVisible]);
+  }, [disableRipple, focusRipple, focusVisible, mountedState]);
 
   function useRippleHandler(rippleAction, eventCallback) {
     var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;
@@ -307,15 +316,6 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref)
   var handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
   var handleRef = useForkRef(ref, handleOwnRef);
 
-  var _React$useState2 = React.useState(false),
-      mountedState = _React$useState2[0],
-      setMountedState = _React$useState2[1];
-
-  React.useEffect(function () {
-    setMountedState(true);
-  }, []);
-  var enableTouchRipple = mountedState && !disableRipple && !disabled;
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(function () {

package/legacy/ButtonGroup/ButtonGroup.js

@@ -198,7 +198,9 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Checkbox/Checkbox.js

@@ -140,7 +140,9 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Chip/Chip.js

@@ -404,7 +404,9 @@ process.env.NODE_ENV !== "production" ? Chip.propTypes
   clickable: PropTypes.bool,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/legacy/CircularProgress/CircularProgress.js

@@ -185,7 +185,9 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/Fab/Fab.js

@@ -45,6 +45,7 @@ var FabRoot = styled(ButtonBase, {
     minWidth: 0,
     width: 56,
     height: 56,
+    zIndex: theme.zIndex.fab,
     boxShadow: theme.shadows[6],
     '&:active': {
       boxShadow: theme.shadows[12]
@@ -177,7 +178,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),

package/legacy/FilledInput/FilledInput.js

@@ -234,7 +234,9 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -342,7 +344,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a `textarea` element is rendered.
+   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/legacy/FormControl/FormControl.js

@@ -261,7 +261,9 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/FormControlLabel/FormControlLabel.js

@@ -83,7 +83,7 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
       disabledProp = props.disabled,
       disableTypography = props.disableTypography,
       inputRef = props.inputRef,
-      label = props.label,
+      labelProp = props.label,
       _props$labelPlacement = props.labelPlacement,
       labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,
       name = props.name,
@@ -118,23 +118,28 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
 
   var ownerState = _extends({}, props, {
     disabled: disabled,
-    label: label,
     labelPlacement: labelPlacement,
     error: fcs.error
   });
 
   var classes = useUtilityClasses(ownerState);
+  var label = labelProp;
+
+  if (label != null && label.type !== Typography && !disableTypography) {
+    label = /*#__PURE__*/_jsx(Typography, _extends({
+      component: "span",
+      className: classes.label
+    }, componentsProps.typography, {
+      children: label
+    }));
+  }
+
   return /*#__PURE__*/_jsxs(FormControlLabelRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label.type === Typography || disableTypography ? label : /*#__PURE__*/_jsx(Typography, _extends({
-      component: "span",
-      className: classes.label
-    }, componentsProps.typography, {
-      children: label
-    }))]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
@@ -191,7 +196,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
   /**
    * A text or an element to be used in an enclosing label element.
    */
-  label: PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string]).isRequired,
+  label: PropTypes.node,
 
   /**
    * The position of the label.

package/legacy/FormLabel/FormLabel.js

@@ -140,7 +140,9 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/legacy/Grid/Grid.js

@@ -314,10 +314,9 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
 
   var rowSpacing = rowSpacingProp || spacing;
   var columnSpacing = columnSpacingProp || spacing;
-  var columnsContext = React.useContext(GridContext); // setting prop before context to accomodate nesting
-  // colums set with default breakpoint unit of 12
+  var columnsContext = React.useContext(GridContext); // columns set with default breakpoint unit of 12
 
-  var columns = columnsProp || columnsContext || 12;
+  var columns = container ? columnsProp || 12 : columnsContext;
 
   var ownerState = _extends({}, props, {
     columns: columns,
@@ -336,20 +335,15 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
-
-  var wrapChild = function wrapChild(element) {
-    return columns !== 12 ? /*#__PURE__*/_jsx(GridContext.Provider, {
-      value: columns,
-      children: element
-    }) : element;
-  };
-
-  return wrapChild( /*#__PURE__*/_jsx(GridRoot, _extends({
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    as: component,
-    ref: ref
-  }, other)));
+  return /*#__PURE__*/_jsx(GridContext.Provider, {
+    value: columns,
+    children: /*#__PURE__*/_jsx(GridRoot, _extends({
+      ownerState: ownerState,
+      className: clsx(classes.root, className),
+      as: component,
+      ref: ref
+    }, other))
+  });
 });
 process.env.NODE_ENV !== "production" ? Grid.propTypes
 /* remove-proptypes */

package/legacy/Grow/Grow.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { elementAcceptingRef } from '@mui/utils';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
-import { reflow, getTransitionProps } from '../transitions/utils';
+import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -23,6 +23,12 @@ var styles = {
     transform: 'none'
   }
 };
+/**
+ * Conditionally apply a workaround for the CSS transition bug in Safari 15.4.
+ * Remove this workaround once the Safari bug is fixed.
+ */
+
+var isSafari154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && /version\/15\.[4-9]/i.test(navigator.userAgent);
 /**
  * The Grow transition is used by the [Tooltip](/components/tooltips/) and
  * [Popover](/components/popover/) components.
@@ -98,7 +104,7 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration: duration,
       delay: delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
+      duration: isSafari154 ? duration : duration * 0.666,
       delay: delay,
       easing: transitionTimingFunction
     })].join(',');
@@ -134,11 +140,11 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       duration: duration,
       delay: delay
     }), theme.transitions.create('transform', {
-      duration: duration * 0.666,
-      delay: delay || duration * 0.333,
+      duration: isSafari154 ? duration : duration * 0.666,
+      delay: isSafari154 ? delay : delay || duration * 0.333,
       easing: transitionTimingFunction
     })].join(',');
-    node.style.opacity = '0';
+    node.style.opacity = 0;
     node.style.transform = getScale(0.75);
 
     if (onExit) {

package/legacy/Icon/Icon.js

@@ -128,7 +128,9 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'inherit'
    */
   color: PropTypes

package/legacy/IconButton/IconButton.js

@@ -166,7 +166,9 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes

package/legacy/Input/Input.js

@@ -169,7 +169,9 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -269,7 +271,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a `textarea` element is rendered.
+   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/legacy/InputBase/InputBase.js

@@ -540,7 +540,9 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -642,7 +644,7 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a `textarea` element is rendered.
+   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/legacy/InputLabel/InputLabel.js

@@ -162,7 +162,9 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    */
   color: PropTypes
   /* @typescript-to-proptypes-ignore */

package/legacy/LinearProgress/LinearProgress.js

@@ -272,7 +272,9 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes
   className: PropTypes.string,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes

package/legacy/OutlinedInput/NotchedOutline.js

@@ -57,7 +57,9 @@ var NotchedOutlineLegend = styled('legend')(function (_ref) {
     '& > span': {
       paddingLeft: 5,
       paddingRight: 5,
-      display: 'inline-block'
+      display: 'inline-block',
+      opacity: 0,
+      visibility: 'visible'
     }
   }, ownerState.notched && {
     maxWidth: '100%',

package/legacy/OutlinedInput/OutlinedInput.js

@@ -180,7 +180,9 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   classes: PropTypes.object,
 
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
    */
   color: PropTypes
@@ -272,7 +274,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes
   minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /**
-   * If `true`, a `textarea` element is rendered.
+   * If `true`, a [TextareaAutosize](/components/textarea-autosize/) element is rendered.
    * @default false
    */
   multiline: PropTypes.bool,

package/legacy/Pagination/Pagination.js

@@ -170,6 +170,8 @@ process.env.NODE_ENV !== "production" ? Pagination.propTypes
 
   /**
    * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/legacy/PaginationItem/PaginationItem.js

@@ -293,6 +293,8 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes
 
   /**
    * The active color.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
    * @default 'standard'
    */
   color: PropTypes

package/legacy/Popper/Popper.js

@@ -1,11 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
-import { HTMLElementType, refType } from '@mui/utils';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
+import { HTMLElementType, refType } from '@mui/utils';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { styled, useThemeProps } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
+var PopperRoot = styled(PopperUnstyled, {
+  name: 'MuiPopper',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+})({});
 /**
  *
  * Demos:
@@ -18,9 +25,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [Popper API](https://mui.com/api/popper/)
  */
-var Popper = /*#__PURE__*/React.forwardRef(function Popper(props, ref) {
+
+var Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   var theme = useTheme();
-  return /*#__PURE__*/_jsx(PopperUnstyled, _extends({
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiPopper'
+  });
+  return /*#__PURE__*/_jsx(PopperRoot, _extends({
     direction: theme == null ? void 0 : theme.direction
   }, props, {
     ref: ref
@@ -124,6 +136,11 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes
    */
   popperRef: refType,
 
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
   /**
    * Help supporting a react-transition-group/Transition component.
    * @default false