@mui/material 5.15.0 → 5.15.1

package/node/styles/experimental_extendTheme.js

@@ -34,11 +34,17 @@ function setColor(obj, key, defaultValue) {
     obj[key] = defaultValue;
   }
 }
+function toRgb(color) {
+  if (!color || !color.startsWith('hsl')) {
+    return color;
+  }
+  return (0, _system.hslToRgb)(color);
+}
 function setColorChannel(obj, key) {
   if (!(`${key}Channel` in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj[`${key}Channel`] = (0, _system.private_safeColorChannel)(obj[key], `MUI: Can't create \`palette.${key}Channel\` because \`palette.${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.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+    obj[`${key}Channel`] = (0, _system.private_safeColorChannel)(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${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.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
 const silent = fn => {
@@ -257,16 +263,16 @@ function extendTheme(options = {}, ...args) {
       if (colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
-          setColor(palette[color], 'mainChannel', (0, _system.private_safeColorChannel)(colors.main));
+          setColor(palette[color], 'mainChannel', (0, _system.private_safeColorChannel)(toRgb(colors.main)));
         }
         if (colors.light) {
-          setColor(palette[color], 'lightChannel', (0, _system.private_safeColorChannel)(colors.light));
+          setColor(palette[color], 'lightChannel', (0, _system.private_safeColorChannel)(toRgb(colors.light)));
         }
         if (colors.dark) {
-          setColor(palette[color], 'darkChannel', (0, _system.private_safeColorChannel)(colors.dark));
+          setColor(palette[color], 'darkChannel', (0, _system.private_safeColorChannel)(toRgb(colors.dark)));
         }
         if (colors.contrastText) {
-          setColor(palette[color], 'contrastTextChannel', (0, _system.private_safeColorChannel)(colors.contrastText));
+          setColor(palette[color], 'contrastTextChannel', (0, _system.private_safeColorChannel)(toRgb(colors.contrastText)));
         }
         if (color === 'text') {
           // Text colors: text.primary, text.secondary

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.0",
+  "version": "5.15.1",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -28,12 +28,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.5",
-    "@mui/base": "5.0.0-beta.27",
-    "@mui/core-downloads-tracker": "^5.15.0",
-    "@mui/system": "^5.15.0",
+    "@mui/base": "5.0.0-beta.28",
+    "@mui/core-downloads-tracker": "^5.15.1",
+    "@mui/system": "^5.15.1",
     "@mui/types": "^7.2.11",
-    "@mui/utils": "^5.15.0",
-    "@types/react-transition-group": "^4.4.9",
+    "@mui/utils": "^5.15.1",
+    "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1",

package/styles/experimental_extendTheme.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
   _excluded2 = ["palette"];
 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 (!(`${key}Channel` in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj[`${key}Channel`] = safeColorChannel(obj[key], `MUI: Can't create \`palette.${key}Channel\` because \`palette.${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.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+    obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${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.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
 const silent = fn => {
@@ -248,16 +254,16 @@ export default function extendTheme(options = {}, ...args) {
       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/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.0
+ * @mui/material v5.15.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -10869,11 +10869,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       obj[key] = defaultValue;
     }
   }
+  function toRgb(color) {
+    if (!color || !color.startsWith('hsl')) {
+      return color;
+    }
+    return hslToRgb(color);
+  }
   function setColorChannel(obj, key) {
     if (!(`${key}Channel` in obj)) {
       // custom channel token is not provided, generate one.
       // if channel token can't be generated, show a warning.
-      obj[`${key}Channel`] = private_safeColorChannel(obj[key], `MUI: Can't create \`palette.${key}Channel\` because \`palette.${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.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+      obj[`${key}Channel`] = private_safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${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.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
     }
   }
   const silent = fn => {
@@ -11091,16 +11097,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         if (colors && typeof colors === 'object') {
           // Silent the error for custom palettes.
           if (colors.main) {
-            setColor(palette[color], 'mainChannel', private_safeColorChannel(colors.main));
+            setColor(palette[color], 'mainChannel', private_safeColorChannel(toRgb(colors.main)));
           }
           if (colors.light) {
-            setColor(palette[color], 'lightChannel', private_safeColorChannel(colors.light));
+            setColor(palette[color], 'lightChannel', private_safeColorChannel(toRgb(colors.light)));
           }
           if (colors.dark) {
-            setColor(palette[color], 'darkChannel', private_safeColorChannel(colors.dark));
+            setColor(palette[color], 'darkChannel', private_safeColorChannel(toRgb(colors.dark)));
           }
           if (colors.contrastText) {
-            setColor(palette[color], 'contrastTextChannel', private_safeColorChannel(colors.contrastText));
+            setColor(palette[color], 'contrastTextChannel', private_safeColorChannel(toRgb(colors.contrastText)));
           }
           if (color === 'text') {
             // Text colors: text.primary, text.secondary
@@ -13188,7 +13194,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     padding: 8,
     justifyContent: 'flex-end'
   }, !ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8
     }
   }));
@@ -23037,7 +23043,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     // |     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
@@ -23053,7 +23059,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * 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
      */
@@ -23088,8 +23094,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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,
@@ -26169,7 +26175,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     alignItems: 'center',
     padding: 8
   }, !ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8
     }
   }));
@@ -38159,11 +38165,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
   var paginationItemClasses$1 = paginationItemClasses;
 
-  var FirstPageIcon = createSvgIcon( /*#__PURE__*/jsxRuntime_1("path", {
+  var FirstPageIconDefault = createSvgIcon( /*#__PURE__*/jsxRuntime_1("path", {
     d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
   }), 'FirstPage');
 
-  var LastPageIcon = createSvgIcon( /*#__PURE__*/jsxRuntime_1("path", {
+  var LastPageIconDefault = createSvgIcon( /*#__PURE__*/jsxRuntime_1("path", {
     d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
   }), 'LastPage');
 
@@ -38395,13 +38401,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const normalizedIcons = theme.direction === 'rtl' ? {
       previous: slots.next || components.next || NavigateNextIcon,
       next: slots.previous || components.previous || NavigateBeforeIcon,
-      last: slots.first || components.first || FirstPageIcon,
-      first: slots.last || components.last || LastPageIcon
+      last: slots.first || components.first || FirstPageIconDefault,
+      first: slots.last || components.last || LastPageIconDefault
     } : {
       previous: slots.previous || components.previous || NavigateBeforeIcon,
       next: slots.next || components.next || NavigateNextIcon,
-      first: slots.first || components.first || FirstPageIcon,
-      last: slots.last || components.last || LastPageIcon
+      first: slots.first || components.first || FirstPageIconDefault,
+      last: slots.last || components.last || LastPageIconDefault
     };
     const Icon = normalizedIcons[type];
     return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/jsxRuntime_1(PaginationItemEllipsis, {
@@ -47240,10 +47246,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
   }), 'KeyboardArrowRight');
 
-  var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
-  const _excluded$a = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"];
+  const _excluded$a = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slots", "slotProps"];
   const TablePaginationActions = /*#__PURE__*/React__namespace.forwardRef(function TablePaginationActions(props, ref) {
-    var _slotProps$firstButto, _slotProps$previousBu, _slotProps$nextButton, _slotProps$lastButton;
+    var _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$previousButton, _slots$firstButtonIco, _slots$lastButtonIcon, _slots$nextButtonIcon, _slots$previousButton2;
     const {
         backIconButtonProps,
         count,
@@ -47255,7 +47260,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         rowsPerPage,
         showFirstButton,
         showLastButton,
-        slotProps
+        slots = {},
+        slotProps = {}
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$a);
     const theme = useTheme();
@@ -47271,39 +47277,55 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const handleLastPageButtonClick = event => {
       onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
     };
+    const FirstButton = (_slots$firstButton = slots.firstButton) != null ? _slots$firstButton : IconButton$1;
+    const LastButton = (_slots$lastButton = slots.lastButton) != null ? _slots$lastButton : IconButton$1;
+    const NextButton = (_slots$nextButton = slots.nextButton) != null ? _slots$nextButton : IconButton$1;
+    const PreviousButton = (_slots$previousButton = slots.previousButton) != null ? _slots$previousButton : IconButton$1;
+    const FirstButtonIcon = (_slots$firstButtonIco = slots.firstButtonIcon) != null ? _slots$firstButtonIco : FirstPageIconDefault;
+    const LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : LastPageIconDefault;
+    const NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : KeyboardArrowRight;
+    const PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : 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__*/jsxRuntime_2("div", _extends({
       ref: ref
     }, other, {
-      children: [showFirstButton && /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
+      children: [showFirstButton && /*#__PURE__*/jsxRuntime_1(FirstButtonSlot, _extends({
         onClick: handleFirstPageButtonClick,
         disabled: disabled || page === 0,
         "aria-label": getItemAriaLabel('first', page),
         title: getItemAriaLabel('first', page)
-      }, (_slotProps$firstButto = slotProps == null ? void 0 : slotProps.firstButton) != null ? _slotProps$firstButto : {}, {
-        children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/jsxRuntime_1(LastPageIcon, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/jsxRuntime_1(FirstPageIcon, {}))
-      })), /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
+      }, firstButtonSlotProps, {
+        children: theme.direction === 'rtl' ? /*#__PURE__*/jsxRuntime_1(LastButtonIcon, _extends({}, slotProps.lastButtonIcon)) : /*#__PURE__*/jsxRuntime_1(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon))
+      })), /*#__PURE__*/jsxRuntime_1(PreviousButtonSlot, _extends({
         onClick: handleBackButtonClick,
         disabled: disabled || page === 0,
         color: "inherit",
         "aria-label": getItemAriaLabel('previous', page),
         title: getItemAriaLabel('previous', page)
-      }, (_slotProps$previousBu = slotProps == null ? void 0 : slotProps.previousButton) != null ? _slotProps$previousBu : backIconButtonProps, {
-        children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/jsxRuntime_1(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/jsxRuntime_1(KeyboardArrowLeft, {}))
-      })), /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
+      }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
+        children: theme.direction === 'rtl' ? /*#__PURE__*/jsxRuntime_1(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/jsxRuntime_1(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
+      })), /*#__PURE__*/jsxRuntime_1(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 = slotProps == null ? void 0 : slotProps.nextButton) != null ? _slotProps$nextButton : nextIconButtonProps, {
-        children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/jsxRuntime_1(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/jsxRuntime_1(KeyboardArrowRight, {}))
-      })), showLastButton && /*#__PURE__*/jsxRuntime_1(IconButton$1, _extends({
+      }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
+        children: theme.direction === 'rtl' ? /*#__PURE__*/jsxRuntime_1(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/jsxRuntime_1(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
+      })), showLastButton && /*#__PURE__*/jsxRuntime_1(LastButtonSlot, _extends({
         onClick: handleLastPageButtonClick,
         disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
         "aria-label": getItemAriaLabel('last', page),
         title: getItemAriaLabel('last', page)
-      }, (_slotProps$lastButton = slotProps == null ? void 0 : slotProps.lastButton) != null ? _slotProps$lastButton : {}, {
-        children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/jsxRuntime_1(FirstPageIcon, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/jsxRuntime_1(LastPageIcon, {}))
+      }, lastButtonSlotProps, {
+        children: theme.direction === 'rtl' ? /*#__PURE__*/jsxRuntime_1(FirstButtonIcon, _extends({}, slotProps.firstButtonIcon)) : /*#__PURE__*/jsxRuntime_1(LastButtonIcon, _extends({}, slotProps.lastButtonIcon))
       }))]
     }));
   });
@@ -47364,9 +47386,28 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     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
     })
   } ;
   var TablePaginationActions$1 = TablePaginationActions;
@@ -47378,7 +47419,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var tablePaginationClasses$1 = tablePaginationClasses;
 
   var _InputBase;
-  const _excluded$9 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"];
+  const _excluded$9 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps", "slots"];
   const TablePaginationRoot = styled$1(TableCell$1, {
     name: 'MuiTablePagination',
     slot: 'Root',
@@ -47525,7 +47566,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         SelectProps = {},
         showFirstButton = false,
         showLastButton = false,
-        slotProps
+        slotProps = {},
+        slots = {}
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$9);
     const ownerState = props;
@@ -47602,7 +47644,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           rowsPerPage: rowsPerPage,
           showFirstButton: showFirstButton,
           showLastButton: showLastButton,
-          slotProps: slotProps == null ? void 0 : slotProps.actions,
+          slotProps: slotProps.actions,
+          slots: slots.actions,
           getItemAriaLabel: getItemAriaLabel,
           disabled: disabled
         })]
@@ -47764,12 +47807,33 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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.
      */