@mui/material 5.11.13 → 5.11.15

package/Unstable_Grid2/Grid2.d.ts

@@ -1,4 +1,4 @@
-import { OverridableComponent } from '@mui/types';
-import { Grid2TypeMap } from './Grid2Props';
-declare const Grid2: OverridableComponent<Grid2TypeMap<{}, "div">>;
-export default Grid2;
+import { OverridableComponent } from '@mui/types';
+import { Grid2TypeMap } from './Grid2Props';
+declare const Grid2: OverridableComponent<Grid2TypeMap<{}, "div">>;
+export default Grid2;

package/Unstable_Grid2/Grid2Props.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SxProps, SystemProps } from '@mui/system';
-import { GridBaseProps } from '@mui/system/Unstable_Grid';
-import { Theme } from '../styles';
-export type Grid2Slot = 'root';
-export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & GridBaseProps & {
-        sx?: SxProps<Theme>;
-    } & SystemProps<Theme>;
-    defaultComponent: D;
-}
-export type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
-    component?: React.ElementType;
-}> = OverrideProps<Grid2TypeMap<P, D>, D>;
+import * as React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps, SystemProps } from '@mui/system';
+import { GridBaseProps } from '@mui/system/Unstable_Grid';
+import { Theme } from '../styles';
+export type Grid2Slot = 'root';
+export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    } & SystemProps<Theme>;
+    defaultComponent: D;
+}
+export type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
+    component?: React.ElementType;
+}> = OverrideProps<Grid2TypeMap<P, D>, D>;

package/Unstable_Grid2/grid2Classes.d.ts

@@ -1,5 +1,5 @@
-import { GridClasses } from '@mui/system/Unstable_Grid';
-export type Grid2ClassKey = keyof GridClasses;
-export declare function getGrid2UtilityClass(slot: string): string;
-declare const grid2Classes: GridClasses;
-export default grid2Classes;
+import { GridClasses } from '@mui/system/Unstable_Grid';
+export type Grid2ClassKey = keyof GridClasses;
+export declare function getGrid2UtilityClass(slot: string): string;
+declare const grid2Classes: GridClasses;
+export default grid2Classes;

package/Unstable_Grid2/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from './Grid2';
-export * from './Grid2Props';
-export { default as grid2Classes } from './grid2Classes';
-export * from './grid2Classes';
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';

package/className/index.d.ts

@@ -1 +1 @@
-export { unstable_ClassNameGenerator } from '@mui/utils';
+export { unstable_ClassNameGenerator } from '@mui/utils';

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/generateUtilityClass/index.d.ts

@@ -1,2 +1,2 @@
-export { unstable_generateUtilityClass as default } from '@mui/utils';
-export type { GlobalStateSlot } from '@mui/utils';
+export { unstable_generateUtilityClass as default } from '@mui/utils';
+export type { GlobalStateSlot } from '@mui/utils';

package/generateUtilityClasses/index.d.ts

@@ -1 +1 @@
-export { unstable_generateUtilityClasses as default } from '@mui/utils';
+export { unstable_generateUtilityClasses as default } from '@mui/utils';

package/index.js

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

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Autocomplete/Autocomplete.js

@@ -665,6 +665,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * If `true`, the selected option becomes the value of the input
    * when the Autocomplete loses focus unless the user chooses
    * a different option or changes the character string in the input.
+   *
+   * When using `freeSolo` mode, the typed value will be the input value
+   * if the Autocomplete loses focus without highlighting an option.
    * @default false
    */
   autoSelect: PropTypes.bool,

package/legacy/Breadcrumbs/BreadcrumbCollapsed.js

@@ -1,3 +1,4 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -43,19 +44,40 @@ var BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
  * @ignore - internal component.
  */
 function BreadcrumbCollapsed(props) {
+  var _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+    otherProps = _objectWithoutProperties(props, ["slots", "slotProps"]);
   var ownerState = props;
   return /*#__PURE__*/_jsx("li", {
     children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, _extends({
       focusRipple: true
-    }, props, {
+    }, otherProps, {
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, {
+      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, _extends({
+        as: slots.CollapsedIcon,
         ownerState: ownerState
-      })
+      }, slotProps.collapsedIcon))
     }))
   });
 }
 process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
+  /**
+   * The props used for the CollapsedIcon slot.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the BreadcumbCollapsed.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    CollapsedIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Breadcrumbs/Breadcrumbs.js

@@ -7,7 +7,7 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { integerPropType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Typography from '../Typography';
@@ -81,6 +81,10 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, re
     className = props.className,
     _props$component = props.component,
     component = _props$component === void 0 ? 'nav' : _props$component,
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     _props$expandText = props.expandText,
     expandText = _props$expandText === void 0 ? 'Show path' : _props$expandText,
     _props$itemsAfterColl = props.itemsAfterCollapse,
@@ -91,7 +95,7 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, re
     maxItems = _props$maxItems === void 0 ? 8 : _props$maxItems,
     _props$separator = props.separator,
     separator = _props$separator === void 0 ? '/' : _props$separator,
-    other = _objectWithoutProperties(props, ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"]);
+    other = _objectWithoutProperties(props, ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"]);
   var _React$useState = React.useState(false),
     expanded = _React$useState[0],
     setExpanded = _React$useState[1];
@@ -105,6 +109,11 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, re
     separator: separator
   });
   var classes = useUtilityClasses(ownerState);
+  var collapsedIconSlotProps = useSlotProps({
+    elementType: slots.CollapsedIcon,
+    externalSlotProps: slotProps.collapsedIcon,
+    ownerState: ownerState
+  });
   var listRef = React.useRef(null);
   var renderItemsBeforeAndAfter = function renderItemsBeforeAndAfter(allItems) {
     var handleClickExpand = function handleClickExpand() {
@@ -130,6 +139,12 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, re
     }
     return [].concat(_toConsumableArray(allItems.slice(0, itemsBeforeCollapse)), [/*#__PURE__*/_jsx(BreadcrumbCollapsed, {
       "aria-label": expandText,
+      slots: {
+        CollapsedIcon: slots.CollapsedIcon
+      },
+      slotProps: {
+        collapsedIcon: collapsedIconSlotProps
+      },
       onClick: handleClickExpand
     }, "ellipsis")], _toConsumableArray(allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)));
   };
@@ -212,6 +227,21 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptype
    * @default '/'
    */
   separator: PropTypes.node,
+  /**
+   * The props used for each slot inside the Breadcumb.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the Breadcumb.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    CollapsedIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Chip/Chip.js

@@ -51,7 +51,6 @@ var ChipRoot = styled('div', {
   var _extends2;
   var theme = _ref11.theme,
     ownerState = _ref11.ownerState;
-  var deleteIconColor = alpha(theme.palette.text.primary, 0.26);
   var textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
   return _extends((_extends2 = {
     maxWidth: '100%',
@@ -112,12 +111,12 @@ var ChipRoot = styled('div', {
     color: 'inherit'
   }))), _defineProperty(_extends2, "& .".concat(chipClasses.deleteIcon), _extends({
     WebkitTapHighlightColor: 'transparent',
-    color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.26)") : deleteIconColor,
+    color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.26)") : alpha(theme.palette.text.primary, 0.26),
     fontSize: 22,
     cursor: 'pointer',
     margin: '0 5px 0 -6px',
     '&:hover': {
-      color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.4)") : alpha(deleteIconColor, 0.4)
+      color: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / 0.4)") : alpha(theme.palette.text.primary, 0.4)
     }
   }, ownerState.size === 'small' && {
     fontSize: 16,

package/legacy/ListItemButton/ListItemButton.js

@@ -147,8 +147,10 @@ var ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inPro
     value: childContext,
     children: /*#__PURE__*/_jsx(ListItemButtonRoot, _extends({
       ref: handleRef,
-      href: other.href || other.to,
-      component: (other.href || other.to) && component === 'div' ? 'a' : component,
+      href: other.href || other.to
+      // `ButtonBase` processes `href` or `to` if `component` is set to 'button'
+      ,
+      component: (other.href || other.to) && component === 'div' ? 'button' : component,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState,
       className: clsx(classes.root, className)

package/legacy/Stack/Stack.js

@@ -49,6 +49,16 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * The system prop, which 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])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
 } : void 0;
 export default Stack;

package/legacy/StepButton/StepButton.js

@@ -56,7 +56,8 @@ var StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, ref)
     optional = props.optional,
     other = _objectWithoutProperties(props, ["children", "className", "icon", "optional"]);
   var _React$useContext = React.useContext(StepContext),
-    disabled = _React$useContext.disabled;
+    disabled = _React$useContext.disabled,
+    active = _React$useContext.active;
   var _React$useContext2 = React.useContext(StepperContext),
     orientation = _React$useContext2.orientation;
   var ownerState = _extends({}, props, {
@@ -78,7 +79,8 @@ var StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, ref)
     },
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
+    ownerState: ownerState,
+    "aria-current": active ? 'step' : undefined
   }, other, {
     children: child
   }));

package/legacy/TabScrollButton/TabScrollButton.js

@@ -1,12 +1,11 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _KeyboardArrowLeft, _KeyboardArrowRight;
 /* eslint-disable jsx-a11y/aria-role */
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
@@ -48,21 +47,44 @@ var TabScrollButtonRoot = styled(ButtonBase, {
   });
 });
 var TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
+  var _slots$StartScrollBut, _slots$EndScrollButto;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiTabScrollButton'
   });
   var className = props.className,
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     direction = props.direction,
     orientation = props.orientation,
     disabled = props.disabled,
-    other = _objectWithoutProperties(props, ["className", "direction", "orientation", "disabled"]);
+    other = _objectWithoutProperties(props, ["className", "slots", "slotProps", "direction", "orientation", "disabled"]);
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
   var ownerState = _extends({
     isRtl: isRtl
   }, props);
   var classes = useUtilityClasses(ownerState);
+  var StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : KeyboardArrowLeft;
+  var EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : KeyboardArrowRight;
+  var startButtonIconProps = useSlotProps({
+    elementType: StartButtonIcon,
+    externalSlotProps: slotProps.startScrollButtonIcon,
+    additionalProps: {
+      fontSize: 'small'
+    },
+    ownerState: ownerState
+  });
+  var endButtonIconProps = useSlotProps({
+    elementType: EndButtonIcon,
+    externalSlotProps: slotProps.endScrollButtonIcon,
+    additionalProps: {
+      fontSize: 'small'
+    },
+    ownerState: ownerState
+  });
   return /*#__PURE__*/_jsx(TabScrollButtonRoot, _extends({
     component: "div",
     className: clsx(classes.root, className),
@@ -71,11 +93,7 @@ var TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inP
     ownerState: ownerState,
     tabIndex: null
   }, other, {
-    children: direction === 'left' ? _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {
-      fontSize: "small"
-    })) : _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {
-      fontSize: "small"
-    }))
+    children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, _extends({}, startButtonIconProps)) : /*#__PURE__*/_jsx(EndButtonIcon, _extends({}, endButtonIconProps))
   }));
 });
 process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-proptypes */ = {
@@ -108,6 +126,23 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-prop
    * The component orientation (layout flow direction).
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    EndScrollButtonIcon: PropTypes.elementType,
+    StartScrollButtonIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Tabs/Tabs.js

@@ -6,7 +6,7 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { refType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -222,6 +222,10 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     _props$scrollButtons = props.scrollButtons,
     scrollButtons = _props$scrollButtons === void 0 ? 'auto' : _props$scrollButtons,
     selectionFollowsFocus = props.selectionFollowsFocus,
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     _props$TabIndicatorPr = props.TabIndicatorProps,
     TabIndicatorProps = _props$TabIndicatorPr === void 0 ? {} : _props$TabIndicatorPr,
     _props$TabScrollButto = props.TabScrollButtonProps,
@@ -233,7 +237,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     variant = _props$variant === void 0 ? 'standard' : _props$variant,
     _props$visibleScrollb = props.visibleScrollbar,
     visibleScrollbar = _props$visibleScrollb === void 0 ? false : _props$visibleScrollb,
-    other = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"]);
+    other = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"]);
   var scrollable = variant === 'scrollable';
   var vertical = orientation === 'vertical';
   var scrollStart = vertical ? 'scrollTop' : 'scrollLeft';
@@ -259,6 +263,16 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scrollButtonsHideMobile: !allowScrollButtonsMobile
   });
   var classes = useUtilityClasses(ownerState);
+  var startScrollButtonIconProps = useSlotProps({
+    elementType: slots.StartScrollButtonIcon,
+    externalSlotProps: slotProps.startScrollButtonIcon,
+    ownerState: ownerState
+  });
+  var endScrollButtonIconProps = useSlotProps({
+    elementType: slots.EndScrollButtonIcon,
+    externalSlotProps: slotProps.endScrollButtonIcon,
+    ownerState: ownerState
+  });
   if (process.env.NODE_ENV !== 'production') {
     if (centered && scrollable) {
       console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
@@ -428,6 +442,12 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     var scrollButtonsActive = displayScroll.start || displayScroll.end;
     var showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
     conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+      slots: {
+        StartScrollButtonIcon: slots.StartScrollButtonIcon
+      },
+      slotProps: {
+        startScrollButtonIcon: startScrollButtonIconProps
+      },
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
@@ -436,6 +456,12 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
     conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+      slots: {
+        EndScrollButtonIcon: slots.EndScrollButtonIcon
+      },
+      slotProps: {
+        endScrollButtonIcon: endScrollButtonIconProps
+      },
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
@@ -738,6 +764,23 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
    * changes on activation.
    */
   selectionFollowsFocus: PropTypes.bool,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    EndScrollButtonIcon: PropTypes.elementType,
+    StartScrollButtonIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/index.js

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