@mui/material 5.15.13 → 6.0.0-alpha.0

package/modern/Autocomplete/Autocomplete.js

@@ -24,14 +24,13 @@ import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
 import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
-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";
 import { createElement as _createElement } from "react";
+const useThemeProps = createUseThemeProps('MuiAutocomplete');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -90,9 +89,7 @@ const AutocompleteRoot = styled('div', {
       [`& .${autocompleteClasses.input}`]: inputFocused && styles.inputFocused
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
     visibility: 'visible'
   },
@@ -101,17 +98,11 @@ const AutocompleteRoot = styled('div', {
     [`&:hover .${autocompleteClasses.clearIndicator}`]: {
       visibility: 'visible'
     }
-  }
-}, ownerState.fullWidth && {
-  width: '100%'
-}, {
-  [`& .${autocompleteClasses.tag}`]: _extends({
+  },
+  [`& .${autocompleteClasses.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
-  }, ownerState.size === 'small' && {
-    margin: 2,
-    maxWidth: 'calc(100% - 4px)'
-  }),
+  },
   [`& .${autocompleteClasses.inputRoot}`]: {
     flexWrap: 'wrap',
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
@@ -200,14 +191,39 @@ const AutocompleteRoot = styled('div', {
       paddingBottom: 9
     }
   },
-  [`& .${autocompleteClasses.input}`]: _extends({
+  [`& .${autocompleteClasses.input}`]: {
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0
-  }, ownerState.inputFocused && {
-    opacity: 1
-  })
-}));
+  },
+  variants: [{
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      [`& .${autocompleteClasses.tag}`]: {
+        margin: 2,
+        maxWidth: 'calc(100% - 4px)'
+      }
+    }
+  }, {
+    props: {
+      inputFocused: true
+    },
+    style: {
+      [`& .${autocompleteClasses.input}`]: {
+        opacity: 1
+      }
+    }
+  }]
+});
 const AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
   slot: 'EndAdornment',
@@ -234,14 +250,18 @@ const AutocompletePopupIndicator = styled(IconButton, {
   overridesResolver: ({
     ownerState
   }, styles) => _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
-})(({
-  ownerState
-}) => _extends({
+})({
   padding: 2,
-  marginRight: -2
-}, ownerState.popupOpen && {
-  transform: 'rotate(180deg)'
-}));
+  marginRight: -2,
+  variants: [{
+    props: {
+      popupOpen: true
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
+});
 const AutocompletePopper = styled(Popper, {
   name: 'MuiAutocomplete',
   slot: 'Popper',
@@ -254,12 +274,17 @@ const AutocompletePopper = styled(Popper, {
     }, styles.popper, ownerState.disablePortal && styles.popperDisablePortal];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  zIndex: (theme.vars || theme).zIndex.modal
-}, ownerState.disablePortal && {
-  position: 'absolute'
+  theme
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.modal,
+  variants: [{
+    props: {
+      disablePortal: true
+    },
+    style: {
+      position: 'absolute'
+    }
+  }]
 }));
 const AutocompletePaper = styled(Paper, {
   name: 'MuiAutocomplete',
@@ -571,7 +596,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }))
   }));
   let autocompletePopper = null;
-  if (!loading && groupedOptions.length > 0) {
+  if (groupedOptions.length > 0) {
     autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
       as: ListboxComponent,
       className: classes.listbox,
@@ -908,7 +933,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   ListboxProps: PropTypes.object,
   /**
    * If `true`, the component is in a loading state.
-   * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
+   * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
    * @default false
    */
   loading: PropTypes.bool,

package/modern/AvatarGroup/AvatarGroup.js

@@ -9,16 +9,15 @@ import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
-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 SPACINGS = {
   small: -16,
-  medium: null
+  medium: -8
 };
+const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -36,23 +35,19 @@ const AvatarGroupRoot = styled('div', {
     [`& .${avatarGroupClasses.avatar}`]: styles.avatar
   }, styles.root)
 })(({
-  theme,
-  ownerState
-}) => {
-  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
-  return {
-    [`& .${avatarClasses.root}`]: {
-      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-      boxSizing: 'content-box',
-      marginLeft: marginValue ?? -8,
-      '&:last-child': {
-        marginLeft: 0
-      }
-    },
-    display: 'flex',
-    flexDirection: 'row-reverse'
-  };
-});
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  [`& .${avatarClasses.root}`]: {
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
+    boxSizing: 'content-box',
+    marginLeft: 'var(--AvatarGroup-spacing, -8px)',
+    '&:last-child': {
+      marginLeft: 0
+    }
+  }
+}));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -96,6 +91,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
   const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
+  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -106,6 +102,9 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       variant: variant
     }, additionalAvatarSlotProps, {
       className: clsx(classes.avatar, additionalAvatarSlotProps?.className),
+      style: _extends({
+        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined
+      }, other.style),
       children: extraAvatarsElement
     })) : null, children.slice(0, maxAvatars).reverse().map(child => {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -181,6 +180,10 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * @default 'medium'
    */
   spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Backdrop/Backdrop.js

@@ -1,17 +1,18 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 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 useSlot from '../utils/useSlot';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiBackdrop');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -31,9 +32,7 @@ const BackdropRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.invisible && styles.invisible];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   position: 'fixed',
   display: 'flex',
   alignItems: 'center',
@@ -43,10 +42,16 @@ const BackdropRoot = styled('div', {
   top: 0,
   left: 0,
   backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  WebkitTapHighlightColor: 'transparent'
-}, ownerState.invisible && {
-  backgroundColor: 'transparent'
-}));
+  WebkitTapHighlightColor: 'transparent',
+  variants: [{
+    props: {
+      invisible: true
+    },
+    style: {
+      backgroundColor: 'transparent'
+    }
+  }]
+});
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -56,13 +61,13 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       children,
       className,
       component = 'div',
-      components = {},
-      componentsProps = {},
       invisible = false,
       open,
+      components = {},
+      componentsProps = {},
       slotProps = {},
       slots = {},
-      TransitionComponent = Fade,
+      TransitionComponent: TransitionComponentProp,
       transitionDuration
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -71,17 +76,34 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     invisible
   });
   const classes = useUtilityClasses(ownerState);
-  const rootSlotProps = slotProps.root ?? componentsProps.root;
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  const backwardCompatibleSlots = _extends({
+    transition: TransitionComponentProp,
+    root: components.Root
+  }, slots);
+  const backwardCompatibleSlotProps = _extends({}, componentsProps, slotProps);
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BackdropRoot,
+    externalForwardedProps,
+    className: clsx(classes.root, className),
+    ownerState
+  });
+  const [TransitionSlot, transitionProps] = useSlot('transition', {
+    elementType: Fade,
+    externalForwardedProps,
+    ownerState
+  });
+  delete transitionProps.ownerState;
+  return /*#__PURE__*/_jsx(TransitionSlot, _extends({
     in: open,
     timeout: transitionDuration
-  }, other, {
-    children: /*#__PURE__*/_jsx(BackdropRoot, _extends({
+  }, other, transitionProps, {
+    children: /*#__PURE__*/_jsx(RootSlot, _extends({
       "aria-hidden": true
-    }, rootSlotProps, {
-      as: slots.root ?? components.Root ?? component,
-      className: clsx(classes.root, className, rootSlotProps?.className),
-      ownerState: _extends({}, ownerState, rootSlotProps?.ownerState),
+    }, rootProps, {
       classes: classes,
       ref: ref,
       children: children
@@ -144,25 +166,20 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    */
   open: PropTypes.bool.isRequired,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
-    root: PropTypes.object
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({
-    root: PropTypes.elementType
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -172,6 +189,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent: PropTypes.elementType,
   /**

package/modern/Badge/Badge.js

@@ -13,8 +13,7 @@ import { useSlotProps } from '@mui/base/utils';
 import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
-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 RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 const useThemeProps = createUseThemeProps('MuiBadge');

package/modern/BottomNavigation/BottomNavigation.js

@@ -8,10 +8,10 @@ import { isFragment } from 'react-is';
 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 { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiBottomNavigation');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/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/modern/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/modern/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,

package/modern/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/modern/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/modern/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;

package/modern/Card/Card.js

@@ -8,11 +8,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Paper from '../Paper';
 import { getCardUtilityClass } from './cardClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCard');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -26,10 +26,8 @@ const CardRoot = styled(Paper, {
   name: 'MuiCard',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(() => {
-  return {
-    overflow: 'hidden'
-  };
+})({
+  overflow: 'hidden'
 });
 const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
   const props = useThemeProps({

package/modern/CardActionArea/CardActionArea.js

@@ -7,12 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
 import ButtonBase from '../ButtonBase';
-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('MuiCardActionArea');
 const useUtilityClasses = ownerState => {
   const {
     classes