@mui/material 5.15.0 → 5.15.2

package/modern/TableBody/tableBodyClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableBodyUtilityClass(slot) {
   return generateUtilityClass('MuiTableBody', slot);
 }

package/modern/TableCell/tableCellClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableCellUtilityClass(slot) {
   return generateUtilityClass('MuiTableCell', slot);
 }

package/modern/TableContainer/tableContainerClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableContainerUtilityClass(slot) {
   return generateUtilityClass('MuiTableContainer', slot);
 }

package/modern/TableFooter/tableFooterClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableFooterUtilityClass(slot) {
   return generateUtilityClass('MuiTableFooter', slot);
 }

package/modern/TableHead/tableHeadClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableHeadUtilityClass(slot) {
   return generateUtilityClass('MuiTableHead', slot);
 }

package/modern/TablePagination/TablePagination.js

@@ -3,7 +3,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _InputBase;
-const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"];
+const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -167,7 +167,8 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       SelectProps = {},
       showFirstButton = false,
       showLastButton = false,
-      slotProps
+      slotProps = {},
+      slots = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
@@ -244,7 +245,8 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         rowsPerPage: rowsPerPage,
         showFirstButton: showFirstButton,
         showLastButton: showLastButton,
-        slotProps: slotProps?.actions,
+        slotProps: slotProps.actions,
+        slots: slots.actions,
         getItemAriaLabel: getItemAriaLabel,
         disabled: disabled
       })]
@@ -406,12 +408,33 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
   slotProps: PropTypes.shape({
     actions: PropTypes.shape({
       firstButton: PropTypes.object,
+      firstButtonIcon: PropTypes.object,
       lastButton: PropTypes.object,
+      lastButtonIcon: PropTypes.object,
       nextButton: PropTypes.object,
-      previousButton: PropTypes.object
+      nextButtonIcon: PropTypes.object,
+      previousButton: PropTypes.object,
+      previousButtonIcon: PropTypes.object
     }),
     select: PropTypes.object
   }),
+  /**
+   * The components used for each slot inside the TablePagination.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    actions: PropTypes.shape({
+      firstButton: PropTypes.elementType,
+      firstButtonIcon: PropTypes.elementType,
+      lastButton: PropTypes.elementType,
+      lastButtonIcon: PropTypes.elementType,
+      nextButton: PropTypes.elementType,
+      nextButtonIcon: PropTypes.elementType,
+      previousButton: PropTypes.elementType,
+      previousButtonIcon: PropTypes.elementType
+    })
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/TablePagination/TablePaginationActions.js

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

package/modern/TablePagination/tablePaginationClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTablePaginationUtilityClass(slot) {
   return generateUtilityClass('MuiTablePagination', slot);
 }

package/modern/TableRow/tableRowClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableRowUtilityClass(slot) {
   return generateUtilityClass('MuiTableRow', slot);
 }

package/modern/TableSortLabel/tableSortLabelClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTableSortLabelUtilityClass(slot) {
   return generateUtilityClass('MuiTableSortLabel', slot);
 }

package/modern/Tabs/tabsClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTabsUtilityClass(slot) {
   return generateUtilityClass('MuiTabs', slot);
 }

package/modern/TextField/textFieldClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTextFieldUtilityClass(slot) {
   return generateUtilityClass('MuiTextField', slot);
 }

package/modern/ToggleButton/toggleButtonClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButton', slot);
 }

package/modern/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButtonGroup', slot);
 }

package/modern/Toolbar/toolbarClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToolbarUtilityClass(slot) {
   return generateUtilityClass('MuiToolbar', slot);
 }

package/modern/Tooltip/tooltipClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTooltipUtilityClass(slot) {
   return generateUtilityClass('MuiTooltip', slot);
 }

package/modern/Typography/typographyClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getTypographyUtilityClass(slot) {
   return generateUtilityClass('MuiTypography', slot);
 }

package/modern/Unstable_Grid2/grid2Classes.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getGrid2UtilityClass(slot) {
   return generateUtilityClass('MuiGrid2', slot);
 }

package/modern/index.js

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

package/modern/internal/switchBaseClasses.js

@@ -1,5 +1,5 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getSwitchBaseUtilityClass(slot) {
   return generateUtilityClass('PrivateSwitchBase', slot);
 }

package/modern/styles/createPalette.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 const _excluded = ["mode", "contrastThreshold", "tonalOffset"];
 import { deepmerge } from '@mui/utils';
 import { darken, getContrastRatio, lighten } from '@mui/system';

package/modern/styles/createTheme.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 import { deepmerge } from '@mui/utils';
 import { createTheme as systemCreateTheme, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import createMixins from './createMixins';
 import createPalette from './createPalette';
 import createTypography from './createTypography';

package/modern/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 => {
@@ -247,16 +253,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/modern/styles/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { default as THEME_ID } from './identifier';
 export { default as adaptV4Theme } from './adaptV4Theme';
 export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes } from '@mui/system';

package/modern/styles/makeStyles.js

@@ -1,4 +1,4 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export default function makeStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is no longer exported from @mui/material/styles.
 You have to import it from @mui/styles.

package/modern/styles/responsiveFontSizes.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
 export default function responsiveFontSizes(themeInput, options = {}) {
   const {

package/modern/styles/withStyles.js

@@ -1,4 +1,4 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export default function withStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withStyles is no longer exported from @mui/material/styles.
 You have to import it from @mui/styles.

package/modern/styles/withTheme.js

@@ -1,4 +1,4 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export default function withTheme() {
   throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withTheme is no longer exported from @mui/material/styles.
 You have to import it from @mui/styles.

package/node/Accordion/Accordion.js

@@ -61,7 +61,7 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
     transition: theme.transitions.create(['margin'], transition),
     overflowAnchor: 'none',
     // Keep the same scrolling position
-    '&:before': {
+    '&::before': {
       position: 'absolute',
       left: 0,
       top: -1,
@@ -73,12 +73,12 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
       transition: theme.transitions.create(['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
-      '&:before': {
+      '&::before': {
         display: 'none'
       }
     },
     [`&.${_accordionClasses.default.expanded}`]: {
-      '&:before': {
+      '&::before': {
         opacity: 0
       },
       '&:first-of-type': {
@@ -88,7 +88,7 @@ const AccordionRoot = (0, _styled.default)(_Paper.default, {
         marginBottom: 0
       },
       '& + &': {
-        '&:before': {
+        '&::before': {
           display: 'none'
         }
       }

package/node/Accordion/accordionClasses.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.getAccordionUtilityClass = getAccordionUtilityClass;
-var _utils = require("@mui/utils");
-var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getAccordionUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAccordion', slot);
 }
-const accordionClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
+const accordionClasses = (0, _generateUtilityClasses.default)('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
 var _default = exports.default = accordionClasses;

package/node/AccordionActions/AccordionActions.js

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

package/node/AccordionActions/accordionActionsClasses.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.getAccordionActionsUtilityClass = getAccordionActionsUtilityClass;
-var _utils = require("@mui/utils");
-var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getAccordionActionsUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAccordionActions', slot);
 }
-const accordionActionsClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAccordionActions', ['root', 'spacing']);
+const accordionActionsClasses = (0, _generateUtilityClasses.default)('MuiAccordionActions', ['root', 'spacing']);
 var _default = exports.default = accordionActionsClasses;

package/node/AccordionDetails/accordionDetailsClasses.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.getAccordionDetailsUtilityClass = getAccordionDetailsUtilityClass;
-var _utils = require("@mui/utils");
-var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getAccordionDetailsUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAccordionDetails', slot);
 }
-const accordionDetailsClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAccordionDetails', ['root']);
+const accordionDetailsClasses = (0, _generateUtilityClasses.default)('MuiAccordionDetails', ['root']);
 var _default = exports.default = accordionDetailsClasses;

package/node/AccordionSummary/accordionSummaryClasses.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.getAccordionSummaryUtilityClass = getAccordionSummaryUtilityClass;
-var _utils = require("@mui/utils");
-var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getAccordionSummaryUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAccordionSummary', slot);
 }
-const accordionSummaryClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
+const accordionSummaryClasses = (0, _generateUtilityClasses.default)('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
 var _default = exports.default = accordionSummaryClasses;

package/node/Alert/alertClasses.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.getAlertUtilityClass = getAlertUtilityClass;
-var _utils = require("@mui/utils");
-var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getAlertUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAlert', slot);
 }
-const alertClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+const alertClasses = (0, _generateUtilityClasses.default)('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
 var _default = exports.default = alertClasses;

package/node/AlertTitle/alertTitleClasses.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.getAlertTitleUtilityClass = getAlertTitleUtilityClass;
-var _utils = require("@mui/utils");
-var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 function getAlertTitleUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAlertTitle', slot);
 }
-const alertTitleClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAlertTitle', ['root']);
+const alertTitleClasses = (0, _generateUtilityClasses.default)('MuiAlertTitle', ['root']);
 var _default = exports.default = alertTitleClasses;