@mui/material 5.14.12 → 5.14.14

package/node/Tabs/Tabs.js

@@ -508,23 +508,48 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         updateIndicatorState();
       }
     });
+    let resizeObserver;
+
+    /**
+     * @type {MutationCallback}
+     */
+    const handleMutation = records => {
+      records.forEach(record => {
+        record.removedNodes.forEach(item => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
+        });
+        record.addedNodes.forEach(item => {
+          var _resizeObserver2;
+          (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
+        });
+      });
+      handleResize();
+      updateScrollButtonState();
+    };
     const win = (0, _ownerWindow.default)(tabsRef.current);
     win.addEventListener('resize', handleResize);
-    let resizeObserver;
+    let mutationObserver;
     if (typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver(handleResize);
       Array.from(tabListRef.current.children).forEach(child => {
         resizeObserver.observe(child);
       });
     }
+    if (typeof MutationObserver !== 'undefined') {
+      mutationObserver = new MutationObserver(handleMutation);
+      mutationObserver.observe(tabListRef.current, {
+        childList: true
+      });
+    }
     return () => {
+      var _mutationObserver, _resizeObserver3;
       handleResize.clear();
       win.removeEventListener('resize', handleResize);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
+      (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
+      (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
     };
-  }, [updateIndicatorState]);
+  }, [updateIndicatorState, updateScrollButtonState]);
 
   /**
    * Toggle visibility of start and end scroll buttons

package/node/TextField/TextField.js

@@ -237,7 +237,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   /**
    * 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/material-ui/customization/palette/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
   color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), _propTypes.default.string]),

package/node/ToggleButton/ToggleButton.js

@@ -167,7 +167,7 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes /* remove-proptyp
   /**
    * The color of the button when it is in an active state.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'standard'
    */
   color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), _propTypes.default.string]),

package/node/ToggleButtonGroup/ToggleButtonGroup.js

@@ -183,7 +183,7 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes /* remove-pr
   /**
    * The color of the button when it is selected.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'standard'
    */
   color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), _propTypes.default.string]),

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.12
+ * @mui/material v5.14.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.14.12",
+  "version": "5.14.14",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.1",
-    "@mui/base": "5.0.0-beta.18",
-    "@mui/core-downloads-tracker": "^5.14.12",
-    "@mui/system": "^5.14.12",
-    "@mui/types": "^7.2.5",
-    "@mui/utils": "^5.14.12",
-    "@types/react-transition-group": "^4.4.6",
+    "@mui/base": "5.0.0-beta.20",
+    "@mui/core-downloads-tracker": "^5.14.14",
+    "@mui/system": "^5.14.14",
+    "@mui/types": "^7.2.6",
+    "@mui/utils": "^5.14.13",
+    "@types/react-transition-group": "^4.4.7",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1",

package/styles/components.d.ts

@@ -380,6 +380,7 @@ export interface Components<Theme = unknown> {
   };
   MuiPopper?: {
     defaultProps?: ComponentsProps['MuiPopper'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiPopper'];
   };
   MuiPopover?: {
     defaultProps?: ComponentsProps['MuiPopover'];

package/styles/overrides.d.ts

@@ -1,4 +1,5 @@
 import { CSSObject, CSSInterpolation } from '@mui/system';
+import { PopperClassKey } from '@mui/base/Popper';
 import { ComponentsPropsList } from './props';
 import { AccordionActionsClassKey } from '../AccordionActions';
 import { AccordionClassKey } from '../Accordion';
@@ -215,6 +216,7 @@ export interface ComponentNameToClassKey {
   MuiPaginationItem: PaginationItemClassKey;
   MuiPaper: PaperClassKey;
   MuiPopover: PopoverClassKey;
+  MuiPopper: PopperClassKey;
   MuiRadio: RadioClassKey;
   MuiRating: RatingClassKey;
   MuiScopedCssBaseline: ScopedCssBaselineClassKey;

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.12
+ * @mui/material v5.14.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11334,7 +11334,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
      * @default 'inherit'
      */
@@ -14555,7 +14555,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'default'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -14826,7 +14826,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component. Unless provided, the value is taken from the `severity` prop.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
     /**
@@ -15188,7 +15188,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getAppBarUtilityClass(slot) {
     return generateUtilityClass('MuiAppBar', slot);
   }
-  const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
+  const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
   var appBarClasses$1 = appBarClasses;
 
   const _excluded$1V = ["className", "color", "enableColorOnDark", "position"];
@@ -15333,10 +15333,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
-    color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), PropTypes.string]),
+    color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'info', 'success', 'warning']), PropTypes.string]),
     /**
      * If true, the `color` prop is applied in dark mode.
      * @default false
@@ -20728,10 +20728,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }),
       getClearProps: () => ({
         tabIndex: -1,
+        type: 'button',
         onClick: handleClear
       }),
       getPopupIndicatorProps: () => ({
         tabIndex: -1,
+        type: 'button',
         onClick: handlePopupIndicator
       }),
       getTagProps: ({
@@ -21369,9 +21371,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     paddingLeft: 12,
     paddingRight: 12,
     whiteSpace: 'nowrap'
+  }, ownerState.variant === 'outlined' && {
+    paddingLeft: 11,
+    paddingRight: 11
   }, ownerState.size === 'small' && {
     paddingLeft: 8,
     paddingRight: 8
+  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+    paddingLeft: 7,
+    paddingRight: 7
   }));
   function isDeleteKeyboardEvent(keyboardEvent) {
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
@@ -21536,7 +21544,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'default'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -22174,7 +22182,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -23688,7 +23696,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1L = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
+  const _excluded$1L = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
   const SPACINGS$2 = {
     small: -16,
     medium: null
@@ -23749,6 +23757,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         component = 'div',
         componentsProps = {},
         max = 5,
+        renderSurplus,
         slotProps = {},
         spacing = 'medium',
         total,
@@ -23778,6 +23787,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     clampedMax = Math.min(totalAvatars + 1, clampedMax);
     const maxAvatars = Math.min(children.length, clampedMax - 1);
     const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
+    const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
     const marginLeft = spacing && SPACINGS$2[spacing] !== undefined ? SPACINGS$2[spacing] : -spacing;
     const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
@@ -23786,7 +23796,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className: clsx(classes.root, className),
       ref: ref
     }, other, {
-      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_2(AvatarGroupAvatar, _extends({
+      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_1(AvatarGroupAvatar, _extends({
         ownerState: ownerState,
         variant: variant
       }, additionalAvatarSlotProps, {
@@ -23794,7 +23804,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         style: _extends({
           marginLeft
         }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
-        children: ["+", extraAvatars]
+        children: extraAvatarsElement
       })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
         return /*#__PURE__*/React__namespace.cloneElement(child, {
           className: clsx(child.props.className, classes.avatar),
@@ -23852,6 +23862,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
       return null;
     }),
+    /**
+     * custom renderer of extraAvatars
+     * @param {number} surplus number of extra avatars
+     * @returns {React.ReactNode} custom element to display
+     */
+    renderSurplus: PropTypes.func,
     /**
      * The extra props for the slot components.
      * You can override the existing props or add new ones.
@@ -24539,7 +24555,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'default'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -25555,7 +25571,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning']), PropTypes.string]),
@@ -25857,7 +25873,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -26902,7 +26918,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     color: (theme.vars || theme).palette.text.secondary
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -26987,7 +27003,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -27259,7 +27275,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -29613,7 +29629,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'default'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
@@ -29903,7 +29919,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
@@ -30296,7 +30312,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -31030,7 +31046,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
     /**
@@ -32676,7 +32692,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'inherit'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'action', 'disabled', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -33400,7 +33416,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
@@ -33887,7 +33903,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
     /**
@@ -34250,7 +34266,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string]),
@@ -37856,7 +37872,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
@@ -38239,14 +38255,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     [`&.${paginationItemClasses$1.selected}`]: {
       backgroundColor: (theme.vars || theme).palette.action.selected,
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: (theme.vars || theme).palette.action.selected
         }
       },
       [`&.${paginationItemClasses$1.focusVisible}`]: {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       },
       [`&.${paginationItemClasses$1.disabled}`]: {
         opacity: 1,
@@ -38410,7 +38426,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'standard'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'standard']), PropTypes.string]),
@@ -38619,7 +38635,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'standard'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'standard']), PropTypes.string]),
@@ -38643,7 +38659,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * This is important for screen reader users.
      *
      * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
-     * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
+     * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
      * @param {number} page The page number to format.
      * @param {bool} selected If true, the current page is selected.
      * @returns {string}
@@ -38943,7 +38959,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -40964,7 +40980,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getSliderUtilityClass(slot) {
     return generateUtilityClass('MuiSlider', slot);
   }
-  const sliderClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
+  const sliderClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'thumbColorError', 'thumbColorSuccess', 'thumbColorInfo', 'thumbColorWarning', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
   var sliderClasses$1 = sliderClasses;
 
   const useValueLabelClasses = props => {
@@ -41619,10 +41635,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
-    color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
+    color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
     /**
      * The components used for each slot inside.
      *
@@ -46094,7 +46110,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -48698,23 +48714,48 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           updateIndicatorState();
         }
       });
+      let resizeObserver;
+
+      /**
+       * @type {MutationCallback}
+       */
+      const handleMutation = records => {
+        records.forEach(record => {
+          record.removedNodes.forEach(item => {
+            var _resizeObserver;
+            (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
+          });
+          record.addedNodes.forEach(item => {
+            var _resizeObserver2;
+            (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
+          });
+        });
+        handleResize();
+        updateScrollButtonState();
+      };
       const win = ownerWindow(tabsRef.current);
       win.addEventListener('resize', handleResize);
-      let resizeObserver;
+      let mutationObserver;
       if (typeof ResizeObserver !== 'undefined') {
         resizeObserver = new ResizeObserver(handleResize);
         Array.from(tabListRef.current.children).forEach(child => {
           resizeObserver.observe(child);
         });
       }
+      if (typeof MutationObserver !== 'undefined') {
+        mutationObserver = new MutationObserver(handleMutation);
+        mutationObserver.observe(tabListRef.current, {
+          childList: true
+        });
+      }
       return () => {
+        var _mutationObserver, _resizeObserver3;
         handleResize.clear();
         win.removeEventListener('resize', handleResize);
-        if (resizeObserver) {
-          resizeObserver.disconnect();
-        }
+        (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
+        (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
       };
-    }, [updateIndicatorState]);
+    }, [updateIndicatorState, updateScrollButtonState]);
 
     /**
      * Toggle visibility of start and end scroll buttons
@@ -49225,7 +49266,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -49520,7 +49561,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the button when it is in an active state.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'standard'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -49763,7 +49804,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the button when it is selected.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'standard'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),