@mui/material 5.14.20 → 5.15.1

package/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/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',
@@ -661,7 +660,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
@@ -677,7 +676,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
    */
@@ -712,8 +711,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/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/ButtonGroup/index.d.ts

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

package/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/CHANGELOG.md

@@ -1,5 +1,105 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.15.1
+
+<!-- generated comparing v5.15.0..master -->
+
+_Dec 19, 2023_
+
+A big thanks to the 15 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.1`
+
+- &#8203;<!-- 13 -->[CardActions][DialogActions] Apply margin for all children except for 1st child (#40168) @sai6855
+- &#8203;<!-- 03 -->[TablePagination] Add ability to change icons in TablePaginationActions using `slots` and `slotProps` (#33797) @pratikkarad
+- &#8203;<!-- 13 -->[CssVarsProvider] Fix HSL breaking button styles (#39869) @gitstart
+
+### `@mui/joy@5.0.0-beta.19`
+
+- &#8203;<!-- 05 -->[FormControl] Fix issue with the conditional setting of `htmlFor` and `id` attributes not functioning properly for form labels (#40180) @ReaZzy
+- &#8203;<!-- 04 -->[typescript] Address TypeScript issue with custom zIndex not functioning (#40133) @qiweiii
+
+### `@mui/styled-engine-sc@6.0.0-alpha.9`
+
+- &#8203;<!-- 02 -->[typescript] Fix `theme` being of type any (#40200) @mnajdova
+
+### Docs
+
+- &#8203;<!-- 09 -->[joy-ui] Fix typo in the CSS baseline page (#40222) @possibilities
+- &#8203;<!-- 08 -->[joy-ui] Document missing Autocomplete props (#39979) @ZeeshanTamboli
+- &#8203;<!-- 10 -->[joy-ui] Fix typo about Typography levels (#40230) @zanivan
+- &#8203;<!-- 07 -->[material-ui] Update the related projects page to list `mui-tiptap` for rich text (#40216) @sjdemartini
+- &#8203;<!-- 06 -->[material-ui] Fix typo in the Next.js integration page (#40209) @s8990
+
+### Core
+
+- &#8203;<!-- 14 -->[blog] Fix access to Notion without an account @oliviertassinari
+- &#8203;<!-- 12 -->[core] Update workflows and issue templates to reflect the updated label (#40197) @MBilalShafi
+- &#8203;<!-- 11 -->[docs] Replace Twitter with X (#40193) @mbrookes
+- &#8203;<!-- 10 -->[docs-infra] Uplift the Algolia search modal design (#40186) @danilo-leal
+- &#8203;<!-- 01 -->[website] Update product descriptions and social preview images (#32181) @danilo-leal
+
+All contributors of this release in alphabetical order: @danilo-leal, @gitstart, @MBilalShafi, @mbrookes, @mnajdova, @oliviertassinari, @possibilities, @pratikkarad, @qiweiii, @ReaZzy, @s8990, @sai6855, @sjdemartini, @zanivan, @ZeeshanTamboli
+
+## 5.15.0
+
+<!-- generated comparing v5.14.20..master -->
+
+_Dec 11, 2023_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added [a new package for a better Material UI integration with Next.js](https://mui.com/material-ui/guides/nextjs) (#39947) @siriwatknp
+
+### `@mui/material@5.15.0`
+
+- &#8203;<!-- 12 -->Revert "[Select][material-ui] Add name to hidden input element" (#40174) @mj12albert
+- &#8203;<!-- 02 -->[material-ui] Refactor ComponentsVariants type into a generic (#39623) @blakenetz
+
+### `@mui/material-nextjs@5.15.0`
+
+- &#8203;<!-- 01 -->[material-ui] Add new Next.js integration package (#39947) @siriwatknp
+
+### `@mui/material-next@6.0.0-alpha.113`
+
+- &#8203;<!-- 11 -->[Badge][material-next] Apply new OwnerState type to Badge (#40119) @lhilgert9
+- &#8203;<!-- 06 -->[material-next][ButtonGroup] Change `ButtonGroup` files to ts (#39794) @lhilgert9
+
+### `@mui/icons-material@5.15.0`
+
+- &#8203;<!-- 05 -->[icons] Add X logo (#38811) @abreel
+
+### `@mui/base@5.0.0-beta.27`
+
+- &#8203;<!-- 10 -->[base-ui] useControllableReducer warns when controlled props become uncontrolled (and vice versa) (#39096) @mj12albert
+
+### `@mui/joy@5.0.0-beta.18`
+
+- &#8203;<!-- 04 -->[joy-ui][Radio][Input] Fix inheritance of disabled prop (#39934) @sai6855
+
+### `@mui/lab@5.0.0-alpha.156`
+
+- &#8203;<!-- 03 -->[lab][LoadingButton] LoadingButton now inherits props from ButtonGroup (#39679) @lhilgert9
+
+### Docs
+
+- &#8203;<!-- 09 -->[docs] Fix reference to non-existent checkmark in supported-components.md (#40056) @mbrookes
+- &#8203;<!-- 09 -->[docs][base-ui] Add copy button & primary color picker to the component gallery page (#39884) @mnajdova
+- &#8203;<!-- 08 -->[docs-infra] Update CodeSandbox links (#39992) @anle9650
+- &#8203;<!-- 04 -->[material-ui][docs] Fix wrong root element for emotion styles in shadow DOM (#35326) @EloB
+- &#8203;<!-- 03 -->[material-ui][docs] Move the responsive font charts from recharts to MUI X (#40097) @alexfauquette
+- &#8203;<!-- 02 -->[joy-ui][templates] Remove outdated code (#40095) @zanivan
+- &#8203;<!-- 05 -->[material-ui][docs][Popper] Update Positioned Popper demo styles (#40170) @sai6855
+
+### Core
+
+- &#8203;<!-- 08 -->[blog] Add a Phuket retreat blog post (#40055) @mikailaread
+- &#8203;<!-- 07 -->[blog] Adjust the latest MUI X blog post (#40046) @danilo-leal
+- &#8203;<!-- 05 -->[core] Migrate from tslint to eslint (#40020) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @abreel, @alexfauquette, @anle9650, @blakenetz, @danilo-leal, @EloB, @lhilgert9, @mbrookes, @mikailaread, @mj12albert, @mnajdova, @sai6855, @siriwatknp, @zanivan, @ZeeshanTamboli
+
 ## 5.14.20
 
 <!-- generated comparing v5.14.19..master -->
@@ -11056,7 +11156,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
   <Typography variant="poster">poster</Typography>;
   ```
 
-  [A full demo](https://codesandbox.io/s/fontsizetheme-material-demo-forked-l9u05?file=/demo.tsx:725-773)
+  [A full demo](https://codesandbox.io/p/sandbox/fontsizetheme-material-demo-forked-l9u05?file=/demo.tsx:725-773)
 
 - 📚 Add a shortcut to open the Algolia search (#23959) @hmaddisb.
 - And many more 🐛 bug fixes and 📚 improvements.
@@ -12250,7 +12350,7 @@ Here are some highlights ✨:
 
   You can find a [new version](https://mui.com/components/slider-styled/) of the slider in the lab powered by [emotion](https://emotion.sh/).
 
-  In the event that you are already using styled-components in your application, you can swap emotion for styled-components 💅. Check [this CodeSandbox](https://codesandbox.io/s/sliderstyled-with-styled-components-forked-olc27?file=/package.json) for a demo. It relies on aliases to prevent any bundle size overhead.
+  In the event that you are already using styled-components in your application, you can swap emotion for styled-components 💅. Check [this CodeSandbox](https://codesandbox.io/p/sandbox/sliderstyled-with-styled-components-forked-olc27?file=/package.json) for a demo. It relies on aliases to prevent any bundle size overhead.
 
   The new styling solution saves 2kB gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using emotion or styled-components.
 

package/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/CircularProgress/CircularProgress.js

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

package/FilledInput/FilledInput.js

@@ -83,7 +83,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
@@ -107,7 +106,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/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/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/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/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/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/Select/SelectInput.js

@@ -386,7 +386,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(() => {
@@ -435,7 +434,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const classes = useUtilityClasses(ownerState);
   const paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
   const listboxId = useId();
-  const hiddenInputId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, _extends({
       ref: handleDisplayRef,
@@ -466,7 +464,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 != null ? name : hiddenInputId,
+      name: name,
       ref: inputRef,
       "aria-hidden": true,
       onChange: handleChange,

package/TablePagination/TablePagination.d.ts

@@ -142,6 +142,14 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
     actions?: TablePaginationActionsProps['slotProps'];
     select?: Partial<SelectProps>;
   };
+  /**
+   * The components used for each slot inside the TablePagination.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots?: {
+    actions?: TablePaginationActionsProps['slots'];
+  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/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',
@@ -169,7 +168,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;
@@ -180,7 +180,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 = () => {
@@ -247,7 +246,8 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         rowsPerPage: rowsPerPage,
         showFirstButton: showFirstButton,
         showLastButton: showLastButton,
-        slotProps: slotProps == null ? void 0 : slotProps.actions,
+        slotProps: slotProps.actions,
+        slots: slots.actions,
         getItemAriaLabel: getItemAriaLabel,
         disabled: disabled
       })]
@@ -409,12 +409,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/TablePagination/TablePaginationActions.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IconButtonProps } from '../IconButton/IconButton';
+import { SvgIconProps } from '../SvgIcon';
 
 export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -41,7 +42,55 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDi
     lastButton?: Partial<IconButtonProps>;
     nextButton?: Partial<IconButtonProps>;
     previousButton?: Partial<IconButtonProps>;
+    firstButtonIcon?: Partial<SvgIconProps>;
+    lastButtonIcon?: Partial<SvgIconProps>;
+    nextButtonIcon?: Partial<SvgIconProps>;
+    previousButtonIcon?: Partial<SvgIconProps>;
   };
+  slots?: TablePaginationActionsSlots;
+}
+
+export interface TablePaginationActionsSlots {
+  /**
+   * The component that renders the first button.
+   * @default IconButton
+   */
+  firstButton?: React.ElementType;
+  /**
+   * The component that renders the last button.
+   * @default IconButton
+   */
+  lastButton?: React.ElementType;
+  /**
+   * The component that renders the next button.
+   * @default IconButton
+   */
+  nextButton?: React.ElementType;
+  /**
+   * The component that renders the previous button.
+   * @default IconButton
+   */
+  previousButton?: React.ElementType;
+  /**
+   * The component that renders the first button icon.
+   * @default FirstPageIcon
+   */
+  firstButtonIcon?: React.ElementType;
+  /**
+   * The component that renders the last button icon.
+   * @default LastPageIcon
+   */
+  lastButtonIcon?: React.ElementType;
+  /**
+   * The component that renders the next button icon.
+   * @default KeyboardArrowRight
+   */
+  nextButtonIcon?: React.ElementType;
+  /**
+   * The component that renders the previous button icon.
+   * @default KeyboardArrowLeft
+   */
+  previousButtonIcon?: React.ElementType;
 }
 
 declare const TablePaginationActions: React.JSXElementConstructor<TablePaginationActionsProps>;

package/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.
@@ -19,7 +18,7 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TablePaginationActions = /*#__PURE__*/React.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,
@@ -31,7 +30,8 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       rowsPerPage,
       showFirstButton,
       showLastButton,
-      slotProps
+      slots = {},
+      slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
@@ -47,39 +47,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 = slots.firstButton) != null ? _slots$firstButton : IconButton;
+  const LastButton = (_slots$lastButton = slots.lastButton) != null ? _slots$lastButton : IconButton;
+  const NextButton = (_slots$nextButton = slots.nextButton) != null ? _slots$nextButton : IconButton;
+  const PreviousButton = (_slots$previousButton = slots.previousButton) != null ? _slots$previousButton : IconButton;
+  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__*/_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$firstButto = slotProps == null ? void 0 : slotProps.firstButton) != null ? _slotProps$firstButto : {}, {
-      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$previousBu = slotProps == null ? void 0 : slotProps.previousButton) != null ? _slotProps$previousBu : backIconButtonProps, {
-      children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {}))
-    })), /*#__PURE__*/_jsx(IconButton, _extends({
+    }, previousButtonSlotProps != null ? 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 = slotProps == null ? void 0 : slotProps.nextButton) != null ? _slotProps$nextButton : nextIconButtonProps, {
-      children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/_jsx(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/_jsx(KeyboardArrowRight, {}))
-    })), showLastButton && /*#__PURE__*/_jsx(IconButton, _extends({
+    }, nextButtonSlotProps != null ? 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 = slotProps == null ? void 0 : slotProps.lastButton) != null ? _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))
     }))]
   }));
 });
@@ -140,9 +156,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/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/colors/amber.d.ts

@@ -1,4 +1,3 @@
-/* tslint:disable max-line-length */
 /**
  * ![amber 50](https://mui.com/static/colors-preview/amber-50-24x24.png) ![amber 100](https://mui.com/static/colors-preview/amber-100-24x24.png) ![amber 200](https://mui.com/static/colors-preview/amber-200-24x24.png) ![amber 300](https://mui.com/static/colors-preview/amber-300-24x24.png) ![amber 400](https://mui.com/static/colors-preview/amber-400-24x24.png) ![amber 500](https://mui.com/static/colors-preview/amber-500-24x24.png) ![amber 600](https://mui.com/static/colors-preview/amber-600-24x24.png) ![amber 700](https://mui.com/static/colors-preview/amber-700-24x24.png) ![amber 800](https://mui.com/static/colors-preview/amber-800-24x24.png) ![amber 900](https://mui.com/static/colors-preview/amber-900-24x24.png) ![amber A100](https://mui.com/static/colors-preview/amber-A100-24x24.png) ![amber A200](https://mui.com/static/colors-preview/amber-A200-24x24.png) ![amber A400](https://mui.com/static/colors-preview/amber-A400-24x24.png) ![amber A700](https://mui.com/static/colors-preview/amber-A700-24x24.png)
  */