@mui/material 5.14.20 → 5.15.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/styles/variants.d.ts

@@ -1,8 +1,7 @@
 import { Interpolation } from '@mui/system';
-import { Theme } from './createTheme';
 import { ComponentsPropsList } from './props';
 
-export type ComponentsVariants = {
+export type ComponentsVariants<Theme = unknown> = {
   [Name in keyof ComponentsPropsList]?: Array<{
     props: Partial<ComponentsPropsList[Name]>;
     style: Interpolation<{ theme: Theme }>;

package/umd/material-ui.development.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
@@ -1597,6 +1597,7 @@
   // This module is based on https://github.com/airbnb/prop-types-exact repository.
   // However, in order to reduce the number of dependencies and to remove some extra safe checks
   // the module was forked.
+
   const specialProperty = 'exact-prop: \u200b';
   function exactProp(propTypes) {
     return _extends({}, propTypes, {
@@ -2140,7 +2141,6 @@
     });
     return React__namespace.useRef((...args) =>
     // @ts-expect-error hide `this`
-    // tslint:disable-next-line:ban-comma-operator
     (0, ref.current)(...args)).current;
   }
 
@@ -2555,6 +2555,7 @@
 
   // If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
   // \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
+
   const globalStateClassesMapping = {
     active: 'active',
     checked: 'checked',
@@ -6328,7 +6329,6 @@
           // desktop
           xl: 1536 // large screen
         },
-
         unit = 'px',
         step = 5
       } = breakpoints,
@@ -6406,7 +6406,6 @@
     // desktop
     xl: 1536 // large screen
   };
-
   const defaultBreakpoints = {
     // Sorted ASC by size. That's important.
     // It can't be configured as it's used statically for propTypes.
@@ -6735,8 +6734,6 @@
 
   // The different signatures imply different meaning for their arguments that can't be expressed structurally.
   // We express the difference with variable names.
-  /* tslint:disable:unified-signatures */
-  /* tslint:enable:unified-signatures */
 
   function createSpacing(spacingInput = 8) {
     // Already transformed.
@@ -7351,7 +7348,6 @@
       if (!sx) {
         return null; // Emotion & styled-components will neglect null
       }
-
       const config = (_theme$unstable_sxCon = theme.unstable_sxConfig) != null ? _theme$unstable_sxCon : defaultSxConfig$1;
 
       /*
@@ -8101,7 +8097,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (color.type !== 'color') {
         val /= 255; // normalized
       }
-
       return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
     });
 
@@ -9116,7 +9111,6 @@ try {
       }
     }, keys => keys[0] === 'vars' // skip 'vars/*' paths
     );
-
     return {
       css,
       vars,
@@ -9680,7 +9674,6 @@ try {
         // use context value if exists.
         parentDisableEqualOverflow: overflow // for nested grid
       });
-
       const classes = useUtilityClasses(ownerState, theme);
       let result = /*#__PURE__*/jsxRuntime_1(GridRoot, _extends({
         ref: ref,
@@ -10876,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 => {
@@ -11098,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
@@ -13195,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
     }
   }));
@@ -13782,7 +13781,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     '&::-moz-focus-inner': {
       borderStyle: 'none' // Remove Firefox dotted outline.
     },
-
     [`&.${buttonBaseClasses$1.disabled}`]: {
       pointerEvents: 'none',
       // Disable link interactions
@@ -13949,7 +13947,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     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, () => {
@@ -19043,7 +19041,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         var _document$activeEleme;
         // This is necessary because Firefox and Safari will keep focus
         // on a disabled element:
-        // https://codesandbox.io/s/mui-pr-22247-forked-h151h?file=/src/App.js
+        // https://codesandbox.io/p/sandbox/mui-pr-22247-forked-h151h?file=/src/App.js
         // @ts-ignore
         (_document$activeEleme = document.activeElement) == null || _document$activeEleme.blur();
       }
@@ -21845,13 +21843,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // IE11
         '&:focus::-ms-input-placeholder': placeholderVisible // Edge
       },
-
       [`&.${inputBaseClasses$1.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'
@@ -22604,7 +22600,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     right: 0,
     top: 'calc(50% - 14px)' // Center vertically
   });
-
   const AutocompleteClearIndicator = styled$1(IconButton$1, {
     name: 'MuiAutocomplete',
     slot: 'ClearIndicator',
@@ -23048,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
@@ -23064,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
      */
@@ -23099,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,
@@ -26180,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
     }
   }));
@@ -27189,7 +27184,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })({
     display: 'block' // Keeps the progress centered
   });
-
   const CircularProgressCircle = styled$1('circle', {
     name: 'MuiCircularProgress',
     slot: 'Circle',
@@ -29779,7 +29773,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }),
         pointerEvents: 'none' // Transparent to the hover style.
       },
-
       [`&.${filledInputClasses$1.focused}:after`]: {
         // translateX(0) is a workaround for Safari transform scale bug
         // See https://github.com/mui/material-ui/issues/31766
@@ -29803,7 +29796,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }),
         pointerEvents: 'none' // Transparent to the hover style.
       },
-
       [`&:hover:not(.${filledInputClasses$1.disabled}, .${filledInputClasses$1.error}):before`]: {
         borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
       },
@@ -33338,7 +33330,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }),
         pointerEvents: 'none' // Transparent to the hover style.
       },
-
       [`&.${inputClasses$1.focused}:after`]: {
         // translateX(0) is a workaround for Safari transform scale bug
         // See https://github.com/mui/material-ui/issues/31766
@@ -33362,7 +33353,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }),
         pointerEvents: 'none' // Transparent to the hover style.
       },
-
       [`&:hover:not(.${inputClasses$1.disabled}, .${inputClasses$1.error}):before`]: {
         borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
         // Reset on touch devices, it doesn't add specificity
@@ -33874,11 +33864,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     // 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__namespace.forwardRef(function InputLabel(inProps, ref) {
     const props = useThemeProps({
       name: 'MuiInputLabel',
@@ -34426,7 +34412,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       '&::-moz-focus-inner': {
         borderStyle: 'none' // Remove Firefox dotted outline.
       },
-
       [`&.${linkClasses$1.focusVisible}`]: {
         outline: 'auto'
       }
@@ -37312,7 +37297,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, {
       borderRadius: 0 // Reset Chrome style
     }),
-
     // Remove IE11 arrow
     '&::-ms-expand': {
       display: 'none'
@@ -37340,7 +37324,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     '&:focus': {
       borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
     },
-
     '&&&': {
       paddingRight: 32
     }
@@ -38182,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');
 
@@ -38418,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, {
@@ -40262,7 +40245,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         'data-value': child.props.value // Instead, we provide it as a data attribute.
       });
     });
-
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       React__namespace.useEffect(() => {
@@ -40311,7 +40293,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const classes = useUtilityClasses$x(ownerState);
     const paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
     const listboxId = useId();
-    const hiddenInputId = useId();
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(SelectSelect, _extends({
         ref: handleDisplayRef,
@@ -40342,7 +40323,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       })), /*#__PURE__*/jsxRuntime_1(SelectNativeInput, _extends({
         "aria-invalid": error,
         value: Array.isArray(value) ? value.join(',') : value,
-        name: name != null ? name : hiddenInputId,
+        name: name,
         ref: inputRef,
         "aria-hidden": true,
         onChange: handleChange,
@@ -47265,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,
@@ -47280,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();
@@ -47296,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))
       }))]
     }));
   });
@@ -47389,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;
@@ -47403,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',
@@ -47478,7 +47494,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       textAlignLast: 'right' // Align <select> on Chrome.
     }
   });
-
   const TablePaginationMenuItem = styled$1(MenuItem$1, {
     name: 'MuiTablePagination',
     slot: 'MenuItem',
@@ -47551,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;
@@ -47562,7 +47578,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     if (component === TableCell$1 || component === 'td') {
       colSpan = colSpanProp || 1000; // col-span over everything
     }
-
     const selectId = useId(selectProps.id);
     const labelId = useId(selectProps.labelId);
     const getLabelDisplayedRowsTo = () => {
@@ -47629,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
         })]
@@ -47791,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.
      */
@@ -48511,7 +48548,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       display: 'none' // Safari + Chrome
     }
   });
-
   const defaultIndicatorStyle = {};
   let warnedOnceTabPresent = false;
   const Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
@@ -50022,6 +50058,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.Button = Button$1;
   exports.ButtonBase = ButtonBase$1;
   exports.ButtonGroup = ButtonGroup$1;
+  exports.ButtonGroupButtonContext = ButtonGroupButtonContext$1;
+  exports.ButtonGroupContext = ButtonGroupContext$1;
   exports.Card = Card$1;
   exports.CardActionArea = CardActionArea$1;
   exports.CardActions = CardActions$1;