@mui/material 5.14.20 → 5.15.1

package/legacy/styles/experimental_extendTheme.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { deepmerge } from '@mui/utils';
-import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx, unstable_prepareCssVars as prepareCssVars } from '@mui/system';
+import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx, unstable_prepareCssVars as prepareCssVars, hslToRgb } from '@mui/system';
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
@@ -26,11 +26,17 @@ function setColor(obj, key, defaultValue) {
     obj[key] = defaultValue;
   }
 }
+function toRgb(color) {
+  if (!color || !color.startsWith('hsl')) {
+    return color;
+  }
+  return hslToRgb(color);
+}
 function setColorChannel(obj, key) {
   if (!("".concat(key, "Channel") in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj["".concat(key, "Channel")] = safeColorChannel(obj[key], "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, e.g. \"12 12 12\") or undefined if you want to remove the channel token."));
+    obj["".concat(key, "Channel")] = safeColorChannel(toRgb(obj[key]), "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, e.g. \"12 12 12\") or undefined if you want to remove the channel token."));
   }
 }
 var silent = function silent(fn) {
@@ -270,16 +276,16 @@ export default function extendTheme() {
       if (colors && _typeof(colors) === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
-          setColor(palette[color], 'mainChannel', safeColorChannel(colors.main));
+          setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));
         }
         if (colors.light) {
-          setColor(palette[color], 'lightChannel', safeColorChannel(colors.light));
+          setColor(palette[color], 'lightChannel', safeColorChannel(toRgb(colors.light)));
         }
         if (colors.dark) {
-          setColor(palette[color], 'darkChannel', safeColorChannel(colors.dark));
+          setColor(palette[color], 'darkChannel', safeColorChannel(toRgb(colors.dark)));
         }
         if (colors.contrastText) {
-          setColor(palette[color], 'contrastTextChannel', safeColorChannel(colors.contrastText));
+          setColor(palette[color], 'contrastTextChannel', safeColorChannel(toRgb(colors.contrastText)));
         }
         if (color === 'text') {
           // Text colors: text.primary, text.secondary

package/legacy/useTouchRipple/useTouchRipple.js

@@ -36,7 +36,7 @@ var useTouchRipple = function useTouchRipple(props) {
   });
   var handleKeyUp = useEventCallback(function (event) {
     // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
+    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
     if (!disableFocusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
       keydownRef.current = false;
       rippleRef.current.stop(event, function () {

package/locale/index.js

@@ -317,7 +317,6 @@ export const azAZ = {
         //   `${from}–${to} dən ${count !== -1 ? count : `more than ${to}`}`,
       }
     },
-
     MuiRating: {
       defaultProps: {
         getLabelText: value => {
@@ -553,7 +552,6 @@ export const bgBG = {
         //   `${from}–${to} от ${count !== -1 ? count : `more than ${to}`}`,
       }
     },
-
     MuiRating: {
       defaultProps: {
         getLabelText: value => `${value} Звезд${value !== 1 ? 'и' : 'а'}`,
@@ -624,7 +622,6 @@ export const caES = {
         //   `${from}–${to} de ${count !== -1 ? count : `more than ${to}`}`,
       }
     },
-
     MuiRating: {
       defaultProps: {
         getLabelText: value => `${value} ${value !== 1 ? 'Estrelles' : 'Estrella'}`,
@@ -668,7 +665,6 @@ export const caES = {
     // },
   }
 };
-
 export const csCZ = {
   components: {
     MuiBreadcrumbs: {
@@ -1658,7 +1654,6 @@ export const huHU = {
         //   `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
       }
     },
-
     MuiRating: {
       defaultProps: {
         getLabelText: value => `${value} Csillag`,
@@ -1729,7 +1724,6 @@ export const hyAM = {
         //   `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
       }
     },
-
     MuiRating: {
       defaultProps: {
         getLabelText: value => `${value} Աստղ`,
@@ -1773,7 +1767,6 @@ export const hyAM = {
     // },
   }
 };
-
 export const idID = {
   components: {
     // MuiBreadcrumbs: {
@@ -1801,14 +1794,12 @@ export const idID = {
         //   `${from}–${to} dari ${count !== -1 ? count : `more than ${to}`}`,
       }
     },
-
     MuiRating: {
       defaultProps: {
         getLabelText: value => `${value} Bintang`
         // emptyLabelText: 'Empty',
       }
     },
-
     MuiAutocomplete: {
       defaultProps: {
         clearText: 'Hapus',
@@ -1846,7 +1837,6 @@ export const idID = {
     // },
   }
 };
-
 export const isIS = {
   components: {
     MuiBreadcrumbs: {
@@ -3220,7 +3210,6 @@ export const roRO = {
         //   `${from}–${to} din ${count !== -1 ? count : `more than ${to}`}`,
       }
     },
-
     MuiRating: {
       defaultProps: {
         getLabelText: value => `${value} St${value !== 1 ? 'ele' : 'ea'}`,

package/modern/AccordionActions/AccordionActions.js

@@ -38,7 +38,7 @@ const AccordionActionsRoot = styled('div', {
   padding: 8,
   justifyContent: 'flex-end'
 }, !ownerState.disableSpacing && {
-  '& > :not(:first-of-type)': {
+  '& > :not(style) ~ :not(style)': {
     marginLeft: 8
   }
 }));

package/modern/Autocomplete/Autocomplete.js

@@ -216,7 +216,6 @@ const AutocompleteEndAdornment = styled('div', {
   right: 0,
   top: 'calc(50% - 14px)' // Center vertically
 });
-
 const AutocompleteClearIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',
   slot: 'ClearIndicator',
@@ -657,7 +656,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
   /**
-   * If `true`, the portion of the selected suggestion that has not been typed by the user,
+   * If `true`, the portion of the selected suggestion that the user hasn't typed,
    * known as the completion string, appears inline after the input cursor in the textbox.
    * The inline completion string is visually highlighted and has a selected state.
    * @default false
@@ -673,7 +672,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * 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
+   * When using the `freeSolo` mode, the typed value will be the input value
    * if the Autocomplete loses focus without highlighting an option.
    * @default false
    */
@@ -708,8 +707,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
-   * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume their search.
+   * Set it to `true` if you want to help the user enter a new value.
+   * Set it to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
   clearOnBlur: PropTypes.bool,

package/modern/ButtonBase/ButtonBase.js

@@ -67,7 +67,6 @@ export const ButtonBaseRoot = styled('button', {
   '&::-moz-focus-inner': {
     borderStyle: 'none' // Remove Firefox dotted outline.
   },
-
   [`&.${buttonBaseClasses.disabled}`]: {
     pointerEvents: 'none',
     // Disable link interactions
@@ -234,7 +233,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   });
   const handleKeyUp = useEventCallback(event => {
     // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
+    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
     if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
       keydownRef.current = false;
       rippleRef.current.stop(event, () => {

package/modern/ButtonGroup/index.js

@@ -2,4 +2,6 @@
 
 export { default } from './ButtonGroup';
 export { default as buttonGroupClasses } from './buttonGroupClasses';
-export * from './buttonGroupClasses';
+export * from './buttonGroupClasses';
+export { default as ButtonGroupContext } from './ButtonGroupContext';
+export { default as ButtonGroupButtonContext } from './ButtonGroupButtonContext';

package/modern/CardActions/CardActions.js

@@ -37,7 +37,7 @@ const CardActionsRoot = styled('div', {
   alignItems: 'center',
   padding: 8
 }, !ownerState.disableSpacing && {
-  '& > :not(:first-of-type)': {
+  '& > :not(style) ~ :not(style)': {
     marginLeft: 8
   }
 }));

package/modern/CircularProgress/CircularProgress.js

@@ -84,7 +84,6 @@ const CircularProgressSVG = styled('svg', {
 })({
   display: 'block' // Keeps the progress centered
 });
-
 const CircularProgressCircle = styled('circle', {
   name: 'MuiCircularProgress',
   slot: 'Circle',

package/modern/FilledInput/FilledInput.js

@@ -82,7 +82,6 @@ const FilledInputRoot = styled(InputBaseRoot, {
       }),
       pointerEvents: 'none' // Transparent to the hover style.
     },
-
     [`&.${filledInputClasses.focused}:after`]: {
       // translateX(0) is a workaround for Safari transform scale bug
       // See https://github.com/mui/material-ui/issues/31766
@@ -106,7 +105,6 @@ const FilledInputRoot = styled(InputBaseRoot, {
       }),
       pointerEvents: 'none' // Transparent to the hover style.
     },
-
     [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
       borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
     },

package/modern/Input/Input.js

@@ -66,7 +66,6 @@ const InputRoot = styled(InputBaseRoot, {
       }),
       pointerEvents: 'none' // Transparent to the hover style.
     },
-
     [`&.${inputClasses.focused}:after`]: {
       // translateX(0) is a workaround for Safari transform scale bug
       // See https://github.com/mui/material-ui/issues/31766
@@ -90,7 +89,6 @@ const InputRoot = styled(InputBaseRoot, {
       }),
       pointerEvents: 'none' // Transparent to the hover style.
     },
-
     [`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
       borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity

package/modern/InputBase/InputBase.js

@@ -167,13 +167,11 @@ export const InputBaseComponent = styled('input', {
       // IE11
       '&:focus::-ms-input-placeholder': placeholderVisible // Edge
     },
-
     [`&.${inputBaseClasses.disabled}`]: {
       opacity: 1,
       // Reset iOS opacity
       WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug
     },
-
     '&:-webkit-autofill': {
       animationDuration: '5000s',
       animationName: 'mui-auto-fill'

package/modern/InputLabel/InputLabel.js

@@ -105,11 +105,7 @@ const InputLabelRoot = styled(FormLabel, {
   // but it feels a better when it bleeds a bit on the left, so 32px.
   maxWidth: 'calc(133% - 32px)',
   transform: 'translate(14px, -9px) scale(0.75)'
-}), ownerState.variant === 'standard' && {
-  '&:not(label) + div': {
-    marginTop: 16
-  }
-}));
+})));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiInputLabel',

package/modern/Link/Link.js

@@ -83,7 +83,6 @@ const LinkRoot = styled(Typography, {
     '&::-moz-focus-inner': {
       borderStyle: 'none' // Remove Firefox dotted outline.
     },
-
     [`&.${linkClasses.focusVisible}`]: {
       outline: 'auto'
     }

package/modern/NativeSelect/NativeSelectInput.js

@@ -49,7 +49,6 @@ export const nativeSelectSelectStyles = ({
   }, {
     borderRadius: 0 // Reset Chrome style
   }),
-
   // Remove IE11 arrow
   '&::-ms-expand': {
     display: 'none'
@@ -77,7 +76,6 @@ export const nativeSelectSelectStyles = ({
   '&:focus': {
     borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
   },
-
   '&&&': {
     paddingRight: 32
   }

package/modern/Select/SelectInput.js

@@ -385,7 +385,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       'data-value': child.props.value // Instead, we provide it as a data attribute.
     });
   });
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
@@ -434,7 +433,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const classes = useUtilityClasses(ownerState);
   const paperProps = _extends({}, MenuProps.PaperProps, MenuProps.slotProps?.paper);
   const listboxId = useId();
-  const hiddenInputId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, _extends({
       ref: handleDisplayRef,
@@ -465,7 +463,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
       "aria-invalid": error,
       value: Array.isArray(value) ? value.join(',') : value,
-      name: name ?? hiddenInputId,
+      name: name,
       ref: inputRef,
       "aria-hidden": true,
       onChange: handleChange,

package/modern/TablePagination/TablePagination.js

@@ -3,7 +3,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _InputBase;
-const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"];
+const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -96,7 +96,6 @@ const TablePaginationSelect = styled(Select, {
     textAlignLast: 'right' // Align <select> on Chrome.
   }
 });
-
 const TablePaginationMenuItem = styled(MenuItem, {
   name: 'MuiTablePagination',
   slot: 'MenuItem',
@@ -168,7 +167,8 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       SelectProps = {},
       showFirstButton = false,
       showLastButton = false,
-      slotProps
+      slotProps = {},
+      slots = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
@@ -179,7 +179,6 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
   if (component === TableCell || component === 'td') {
     colSpan = colSpanProp || 1000; // col-span over everything
   }
-
   const selectId = useId(selectProps.id);
   const labelId = useId(selectProps.labelId);
   const getLabelDisplayedRowsTo = () => {
@@ -246,7 +245,8 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         rowsPerPage: rowsPerPage,
         showFirstButton: showFirstButton,
         showLastButton: showLastButton,
-        slotProps: slotProps?.actions,
+        slotProps: slotProps.actions,
+        slots: slots.actions,
         getItemAriaLabel: getItemAriaLabel,
         disabled: disabled
       })]
@@ -408,12 +408,33 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   slotProps: PropTypes.shape({
     actions: PropTypes.shape({
       firstButton: PropTypes.object,
+      firstButtonIcon: PropTypes.object,
       lastButton: PropTypes.object,
+      lastButtonIcon: PropTypes.object,
       nextButton: PropTypes.object,
-      previousButton: PropTypes.object
+      nextButtonIcon: PropTypes.object,
+      previousButton: PropTypes.object,
+      previousButtonIcon: PropTypes.object
     }),
     select: PropTypes.object
   }),
+  /**
+   * The components used for each slot inside the TablePagination.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    actions: PropTypes.shape({
+      firstButton: PropTypes.elementType,
+      firstButtonIcon: PropTypes.elementType,
+      lastButton: PropTypes.elementType,
+      lastButtonIcon: PropTypes.elementType,
+      nextButton: PropTypes.elementType,
+      nextButtonIcon: PropTypes.elementType,
+      previousButton: PropTypes.elementType,
+      previousButtonIcon: PropTypes.elementType
+    })
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/TablePagination/TablePaginationActions.js

@@ -2,16 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
-const _excluded = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"];
+const _excluded = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import useTheme from '../styles/useTheme';
 import IconButton from '../IconButton';
-import LastPageIcon from '../internal/svg-icons/LastPage';
-import FirstPageIcon from '../internal/svg-icons/FirstPage';
+import LastPageIconDefault from '../internal/svg-icons/LastPage';
+import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
 
 /**
  * @ignore - internal component.
@@ -30,7 +29,8 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       rowsPerPage,
       showFirstButton,
       showLastButton,
-      slotProps
+      slots = {},
+      slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
@@ -46,39 +46,55 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
   const handleLastPageButtonClick = event => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
+  const FirstButton = slots.firstButton ?? IconButton;
+  const LastButton = slots.lastButton ?? IconButton;
+  const NextButton = slots.nextButton ?? IconButton;
+  const PreviousButton = slots.previousButton ?? IconButton;
+  const FirstButtonIcon = slots.firstButtonIcon ?? FirstPageIconDefault;
+  const LastButtonIcon = slots.lastButtonIcon ?? LastPageIconDefault;
+  const NextButtonIcon = slots.nextButtonIcon ?? KeyboardArrowRight;
+  const PreviousButtonIcon = slots.previousButtonIcon ?? KeyboardArrowLeft;
+  const FirstButtonSlot = theme.direction === 'rtl' ? LastButton : FirstButton;
+  const PreviousButtonSlot = theme.direction === 'rtl' ? NextButton : PreviousButton;
+  const NextButtonSlot = theme.direction === 'rtl' ? PreviousButton : NextButton;
+  const LastButtonSlot = theme.direction === 'rtl' ? FirstButton : LastButton;
+  const firstButtonSlotProps = theme.direction === 'rtl' ? slotProps.lastButton : slotProps.firstButton;
+  const previousButtonSlotProps = theme.direction === 'rtl' ? slotProps.nextButton : slotProps.previousButton;
+  const nextButtonSlotProps = theme.direction === 'rtl' ? slotProps.previousButton : slotProps.nextButton;
+  const lastButtonSlotProps = theme.direction === 'rtl' ? slotProps.firstButton : slotProps.lastButton;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref
   }, other, {
-    children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, _extends({
+    children: [showFirstButton && /*#__PURE__*/_jsx(FirstButtonSlot, _extends({
       onClick: handleFirstPageButtonClick,
       disabled: disabled || page === 0,
       "aria-label": getItemAriaLabel('first', page),
       title: getItemAriaLabel('first', page)
-    }, slotProps?.firstButton ?? {}, {
-      children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/_jsx(LastPageIcon, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/_jsx(FirstPageIcon, {}))
-    })), /*#__PURE__*/_jsx(IconButton, _extends({
+    }, firstButtonSlotProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
+    })), /*#__PURE__*/_jsx(PreviousButtonSlot, _extends({
       onClick: handleBackButtonClick,
       disabled: disabled || page === 0,
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
-    }, slotProps?.previousButton ?? backIconButtonProps, {
-      children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {}))
-    })), /*#__PURE__*/_jsx(IconButton, _extends({
+    }, previousButtonSlotProps ?? backIconButtonProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
+    })), /*#__PURE__*/_jsx(NextButtonSlot, _extends({
       onClick: handleNextButtonClick,
       disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
-    }, slotProps?.nextButton ?? nextIconButtonProps, {
-      children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/_jsx(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/_jsx(KeyboardArrowRight, {}))
-    })), showLastButton && /*#__PURE__*/_jsx(IconButton, _extends({
+    }, nextButtonSlotProps ?? nextIconButtonProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
+    })), showLastButton && /*#__PURE__*/_jsx(LastButtonSlot, _extends({
       onClick: handleLastPageButtonClick,
       disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": getItemAriaLabel('last', page),
       title: getItemAriaLabel('last', page)
-    }, slotProps?.lastButton ?? {}, {
-      children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/_jsx(FirstPageIcon, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/_jsx(LastPageIcon, {}))
+    }, lastButtonSlotProps, {
+      children: theme.direction === 'rtl' ? /*#__PURE__*/_jsx(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/_jsx(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
     }))]
   }));
 });
@@ -139,9 +155,28 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
    */
   slotProps: PropTypes.shape({
     firstButton: PropTypes.object,
+    firstButtonIcon: PropTypes.object,
     lastButton: PropTypes.object,
+    lastButtonIcon: PropTypes.object,
     nextButton: PropTypes.object,
-    previousButton: PropTypes.object
+    nextButtonIcon: PropTypes.object,
+    previousButton: PropTypes.object,
+    previousButtonIcon: PropTypes.object
+  }),
+  /**
+   * The components used for each slot inside the TablePaginationActions.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    firstButton: PropTypes.elementType,
+    firstButtonIcon: PropTypes.elementType,
+    lastButton: PropTypes.elementType,
+    lastButtonIcon: PropTypes.elementType,
+    nextButton: PropTypes.elementType,
+    nextButtonIcon: PropTypes.elementType,
+    previousButton: PropTypes.elementType,
+    previousButtonIcon: PropTypes.elementType
   })
 } : void 0;
 export default TablePaginationActions;

package/modern/Tabs/Tabs.js

@@ -200,7 +200,6 @@ const TabsScrollbarSize = styled(ScrollbarSize)({
     display: 'none' // Safari + Chrome
   }
 });
-
 const defaultIndicatorStyle = {};
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {

package/modern/index.js

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