@mui/material 5.15.13 → 6.0.0-alpha.0

package/BottomNavigationAction/BottomNavigationAction.js

@@ -1,19 +1,18 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import unsupportedProp from '../utils/unsupportedProp';
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from './bottomNavigationActionClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiBottomNavigationAction');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,9 +35,8 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
     return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   transition: theme.transitions.create(['color', 'padding-top'], {
     duration: theme.transitions.duration.short
   }),
@@ -47,36 +45,54 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
   maxWidth: 168,
   color: (theme.vars || theme).palette.text.secondary,
   flexDirection: 'column',
-  flex: '1'
-}, !ownerState.showLabel && !ownerState.selected && {
-  paddingTop: 14
-}, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
-  paddingTop: 0
-}, {
+  flex: '1',
   [`&.${bottomNavigationActionClasses.selected}`]: {
     color: (theme.vars || theme).palette.primary.main
-  }
+  },
+  variants: [{
+    props: ({
+      showLabel,
+      selected
+    }) => !showLabel && !selected,
+    style: {
+      paddingTop: 14
+    }
+  }, {
+    props: ({
+      showLabel,
+      selected,
+      label
+    }) => !showLabel && !selected && !label,
+    style: {
+      paddingTop: 0
+    }
+  }]
 }));
 const BottomNavigationActionLabel = styled('span', {
   name: 'MuiBottomNavigationAction',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   fontFamily: theme.typography.fontFamily,
   fontSize: theme.typography.pxToRem(12),
   opacity: 1,
   transition: 'font-size 0.2s, opacity 0.2s',
-  transitionDelay: '0.1s'
-}, !ownerState.showLabel && !ownerState.selected && {
-  opacity: 0,
-  transitionDelay: '0s'
-}, {
+  transitionDelay: '0.1s',
   [`&.${bottomNavigationActionClasses.selected}`]: {
     fontSize: theme.typography.pxToRem(14)
-  }
+  },
+  variants: [{
+    props: ({
+      showLabel,
+      selected
+    }) => !showLabel && !selected,
+    style: {
+      opacity: 0,
+      transitionDelay: '0s'
+    }
+  }]
 }));
 const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(inProps, ref) {
   const props = useThemeProps({

package/Breadcrumbs/Breadcrumbs.js

@@ -10,12 +10,12 @@ import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Typography from '../Typography';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed';
 import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiBreadcrumbs');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/Button/Button.js

@@ -16,8 +16,7 @@ import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -63,7 +62,6 @@ const ButtonRoot = styled(ButtonBase, {
   theme,
   ownerState
 }) => {
-  var _theme$palette$getCon, _theme$palette;
   const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
   const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
   return _extends({}, theme.typography.button, {
@@ -136,7 +134,7 @@ const ButtonRoot = styled(ButtonBase, {
   }, ownerState.variant === 'contained' && {
     color: theme.vars ?
     // this is safe because grey does not change between default light/dark mode
-    theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+    theme.vars.palette.text.primary : theme.palette.getContrastText?.(theme.palette.grey[300]),
     backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
     boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {

package/ButtonBase/ButtonBase.js

@@ -16,8 +16,7 @@ import useEventCallback from '../utils/useEventCallback';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import TouchRipple from './TouchRipple';
 import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     disabled,

package/ButtonBase/TouchRipple.js

@@ -3,11 +3,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["center", "classes", "className"];
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
@@ -21,7 +16,7 @@ import touchRippleClasses from './touchRippleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DURATION = 550;
 export const DELAY_RIPPLE = 80;
-const enterKeyframe = keyframes(_t || (_t = _`
+const enterKeyframe = keyframes`
   0% {
     transform: scale(0);
     opacity: 0.1;
@@ -31,8 +26,8 @@ const enterKeyframe = keyframes(_t || (_t = _`
     transform: scale(1);
     opacity: 0.3;
   }
-`));
-const exitKeyframe = keyframes(_t2 || (_t2 = _`
+`;
+const exitKeyframe = keyframes`
   0% {
     opacity: 1;
   }
@@ -40,8 +35,8 @@ const exitKeyframe = keyframes(_t2 || (_t2 = _`
   100% {
     opacity: 0;
   }
-`));
-const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
+`;
+const pulsateKeyframe = keyframes`
   0% {
     transform: scale(1);
   }
@@ -53,7 +48,7 @@ const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
   100% {
     transform: scale(1);
   }
-`));
+`;
 export const TouchRippleRoot = styled('span', {
   name: 'MuiTouchRipple',
   slot: 'Root'
@@ -74,23 +69,27 @@ export const TouchRippleRoot = styled('span', {
 export const TouchRippleRipple = styled(Ripple, {
   name: 'MuiTouchRipple',
   slot: 'Ripple'
-})(_t4 || (_t4 = _`
+})`
   opacity: 0;
   position: absolute;
 
-  &.${0} {
+  &.${touchRippleClasses.rippleVisible} {
     opacity: 0.3;
     transform: scale(1);
-    animation-name: ${0};
-    animation-duration: ${0}ms;
-    animation-timing-function: ${0};
+    animation-name: ${enterKeyframe};
+    animation-duration: ${DURATION}ms;
+    animation-timing-function: ${({
+  theme
+}) => theme.transitions.easing.easeInOut};
   }
 
-  &.${0} {
-    animation-duration: ${0}ms;
+  &.${touchRippleClasses.ripplePulsate} {
+    animation-duration: ${({
+  theme
+}) => theme.transitions.duration.shorter}ms;
   }
 
-  & .${0} {
+  & .${touchRippleClasses.child} {
     opacity: 1;
     display: block;
     width: 100%;
@@ -99,33 +98,29 @@ export const TouchRippleRipple = styled(Ripple, {
     background-color: currentColor;
   }
 
-  & .${0} {
+  & .${touchRippleClasses.childLeaving} {
     opacity: 0;
-    animation-name: ${0};
-    animation-duration: ${0}ms;
-    animation-timing-function: ${0};
+    animation-name: ${exitKeyframe};
+    animation-duration: ${DURATION}ms;
+    animation-timing-function: ${({
+  theme
+}) => theme.transitions.easing.easeInOut};
   }
 
-  & .${0} {
+  & .${touchRippleClasses.childPulsate} {
     position: absolute;
     /* @noflip */
     left: 0px;
     top: 0;
-    animation-name: ${0};
+    animation-name: ${pulsateKeyframe};
     animation-duration: 2500ms;
-    animation-timing-function: ${0};
+    animation-timing-function: ${({
+  theme
+}) => theme.transitions.easing.easeInOut};
     animation-iteration-count: infinite;
     animation-delay: 200ms;
   }
-`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({
-  theme
-}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({
-  theme
-}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({
-  theme
-}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({
-  theme
-}) => theme.transitions.easing.easeInOut);
+`;
 
 /**
  * @ignore - internal component.
@@ -194,11 +189,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       center = centerProp || options.pulsate,
       fakeElement = false // For test purposes
     } = options;
-    if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
+    if (event?.type === 'mousedown' && ignoringMouseDown.current) {
       ignoringMouseDown.current = false;
       return;
     }
-    if ((event == null ? void 0 : event.type) === 'touchstart') {
+    if (event?.type === 'touchstart') {
       ignoringMouseDown.current = true;
     }
     const element = fakeElement ? null : container.current;
@@ -238,7 +233,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     }
 
     // Touche devices
-    if (event != null && event.touches) {
+    if (event?.touches) {
       // check that this isn't another touchstart due to multitouch
       // otherwise we will only clear a single timer when unmounting while two
       // are running
@@ -282,7 +277,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
 
     // The touch interaction occurs too quickly.
     // We still want to show ripple effect.
-    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
+    if (event?.type === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
       startTimer.start(0, () => {

package/ButtonGroup/ButtonGroup.js

@@ -49,7 +49,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
+    root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', `color${capitalize(color)}`],
     grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],

package/ButtonGroup/buttonGroupClasses.d.ts

@@ -15,43 +15,83 @@ export interface ButtonGroupClasses {
     firstButton: string;
     /** Styles applied to the root element if `fullWidth={true}`. */
     fullWidth: string;
+    /** Styles applied to the root element if `orientation="horizontal"`. */
+    horizontal: string;
     /** Styles applied to the root element if `orientation="vertical"`. */
     vertical: string;
     /** Styles applied to the children. */
     grouped: string;
-    /** Styles applied to the children if `orientation="horizontal"`. */
+    /** Styles applied to the root element if `color="primary"` */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"` */
+    colorSecondary: string;
+    /** Styles applied to the children if `orientation="horizontal"`.
+     * @deprecated Combine the [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedHorizontal: string;
-    /** Styles applied to the children if `orientation="vertical"`. */
+    /** Styles applied to the children if `orientation="vertical"`.
+     * @deprecated Combine the [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedVertical: string;
-    /** Styles applied to the children if `variant="text"`. */
+    /** Styles applied to the children if `variant="text"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedText: string;
-    /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`. */
+    /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedTextHorizontal: string;
-    /** Styles applied to the children if `variant="text"` and `orientation="vertical"`. */
+    /** Styles applied to the children if `variant="text"` and `orientation="vertical"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedTextVertical: string;
-    /** Styles applied to the children if `variant="text"` and `color="primary"`. */
+    /** Styles applied to the children if `variant="text"` and `color="primary"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedTextPrimary: string;
-    /** Styles applied to the children if `variant="text"` and `color="secondary"`. */
+    /** Styles applied to the children if `variant="text"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-text) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedTextSecondary: string;
-    /** Styles applied to the children if `variant="outlined"`. */
+    /** Styles applied to the children if `variant="outlined"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlined: string;
-    /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */
+    /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlinedHorizontal: string;
-    /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`. */
+    /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlinedVertical: string;
-    /** Styles applied to the children if `variant="outlined"` and `color="primary"`. */
+    /** Styles applied to the children if `variant="outlined"` and `color="primary"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlinedPrimary: string;
-    /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. */
+    /** Styles applied to the children if `variant="outlined"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-outlined) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedOutlinedSecondary: string;
-    /** Styles applied to the children if `variant="contained"`. */
+    /** Styles applied to the children if `variant="contained"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContained: string;
-    /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */
+    /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContainedHorizontal: string;
-    /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`. */
+    /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContainedVertical: string;
-    /** Styles applied to the children if `variant="contained"` and `color="primary"`. */
+    /** Styles applied to the children if `variant="contained"` and `color="primary"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContainedPrimary: string;
-    /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */
+    /** Styles applied to the children if `variant="contained"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-contained) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedContainedSecondary: string;
     /** Styles applied to the last button in the button group. */
     lastButton: string;

package/ButtonGroup/buttonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }
-const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
+const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'horizontal', 'vertical', 'colorPrimary', 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
 export default buttonGroupClasses;