@mui/material 5.15.15 → 6.0.0-alpha.1

package/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 '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 = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -10,12 +10,12 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
 import ButtonGroupButtonContext from './ButtonGroupButtonContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiButtonGroup');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -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'],
@@ -62,80 +62,177 @@ const ButtonGroupRoot = styled('div', {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'inline-flex',
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.variant === 'contained' && {
-  boxShadow: (theme.vars || theme).shadows[2]
-}, ownerState.disableElevation && {
-  boxShadow: 'none'
-}, ownerState.fullWidth && {
-  width: '100%'
-}, ownerState.orientation === 'vertical' && {
-  flexDirection: 'column'
-}, {
-  [`& .${buttonGroupClasses.grouped}`]: _extends({
-    minWidth: 40,
-    '&:hover': _extends({}, ownerState.variant === 'contained' && {
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      variant: 'contained'
+    },
+    style: {
+      boxShadow: (theme.vars || theme).shadows[2]
+    }
+  }, {
+    props: {
+      disableElevation: true
+    },
+    style: {
       boxShadow: 'none'
-    })
-  }, ownerState.variant === 'contained' && {
-    boxShadow: 'none'
-  }),
-  [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: _extends({}, ownerState.orientation === 'horizontal' && {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderBottomRightRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-    borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-    [`&.${buttonGroupClasses.disabled}`]: {
-      borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
     }
-  }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-    borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-    [`&.${buttonGroupClasses.disabled}`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0
+      },
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
+      }
     }
-  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    borderRightColor: 'transparent'
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    borderBottomColor: 'transparent'
-  }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
-    borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-    [`&.${buttonGroupClasses.disabled}`]: {
-      borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      }
     }
-  }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
-    borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-    [`&.${buttonGroupClasses.disabled}`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+  }, {
+    props: {
+      variant: 'text',
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
     }
-  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    borderColor: (theme.vars || theme).palette[ownerState.color].dark
   }, {
-    '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      borderRightColor: 'currentColor'
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      borderBottomColor: 'currentColor'
-    })
-  }),
-  [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: _extends({}, ownerState.orientation === 'horizontal' && {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    marginLeft: -1
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    marginTop: -1
-  })
+    props: {
+      variant: 'text',
+      orientation: 'vertical'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).flatMap(([color]) => [{
+    props: {
+      variant: 'text',
+      color
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha(theme.palette[color].main, 0.5)
+      }
+    }
+  }]), {
+    props: {
+      variant: 'outlined',
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderRightColor: 'transparent',
+        '&:hover': {
+          borderRightColor: 'currentColor'
+        }
+      },
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        marginLeft: -1
+      }
+    }
+  }, {
+    props: {
+      variant: 'outlined',
+      orientation: 'vertical'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottomColor: 'transparent',
+        '&:hover': {
+          borderBottomColor: 'currentColor'
+        }
+      },
+      [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: {
+        marginTop: -1
+      }
+    }
+  }, {
+    props: {
+      variant: 'contained',
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, {
+    props: {
+      variant: 'contained',
+      orientation: 'vertical'
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${buttonGroupClasses.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(([, value]) => value.dark).map(([color]) => ({
+    props: {
+      variant: 'contained',
+      color
+    },
+    style: {
+      [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
+        borderColor: (theme.vars || theme).palette[color].dark
+      }
+    }
+  }))],
+  [`& .${buttonGroupClasses.grouped}`]: {
+    minWidth: 40,
+    boxShadow: 'none',
+    props: {
+      variant: 'contained'
+    },
+    style: {
+      '&:hover': {
+        boxShadow: 'none'
+      }
+    }
+  }
 }));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
   const props = useThemeProps({

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;

package/CHANGELOG.md

@@ -1,5 +1,171 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.1
+
+<!-- generated comparing v6.0.0-alpha.0..next -->
+
+_Apr 5, 2024_
+
+A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔥 Converted 3 more Material UI components to use Pigment CSS. Current progress is 36%!
+- 🚀 Added a spacing CSS variable to the Material UI and Joy UI themes.
+- 💫 Added 3 redesigned free Material UI templates: [Sign-in](https://next.mui.com/material-ui/getting-started/templates/sign-in/), [Sign-in side](https://next.mui.com/material-ui/getting-started/templates/sign-in-side/), and [Sign-up](https://next.mui.com/material-ui/getting-started/templates/sign-up/).
+
+### `@mui/material@6.0.0-alpha.1`
+
+- [AppBar] Convert to support CSS extraction (#41247) @mnajdova
+- [Badge] Deprecate components and componentsProps (#41655) @skmanoj322
+- [Button] Convert to support CSS extraction (#41378) @siriwatknp
+- [ButtonGroup] Convert to support CSS extraction (#41666) @zanivan
+- [RadioGroup] Apply classnames (#41610) @ZeeshanTamboli
+- [Slider] Move palette styles to the bottom (#41676) @siriwatknp
+- Add the `spacing` theme token (#40224) @siriwatknp
+
+### `@mui/system@6.0.0-alpha.1`
+
+- Add the `spacing` theme token to be used in `theme.spacing()` (#40224) @siriwatknp
+
+### `@mui/codemod@6.0.0-alpha.1`
+
+- [codemod] Setup v6 codemod structure (#41668) @DiegoAndai
+
+### `@mui/lab@6.0.0-alpha.1`
+
+- [TabPanel] Add keepMounted prop to match Joy UI (#41651) @ppaskaris-plooto
+
+### `@mui/joy@5.0.0-beta.34`
+
+- Add `spacing` theme token (#40224) @siriwatknp
+
+### `@pigment-css/react@0.0.5`
+
+- Improve sx prop support (#41589) @brijeshb42
+- Fix Emotion styled error (#41699) @siriwatknp
+- Fix propTypes removal during eval stage (#41695) @brijeshb42
+- Fix props forwarding (#41688) @siriwatknp
+- Fix sx prop transformation on Box (#41705) @brijeshb42
+
+### `@pigment-css/vite-plugin@0.0.5`
+
+- Use constant filename for pigment styles (#41667) @brijeshb42
+
+### `@pigment-css/nextjs-plugin@0.0.5`
+
+- Add missing RTL implementation (#41751) @brijeshb42
+
+### Docs
+
+- [pigment-css] Update README.md installation to use the next tag (#41649) @mnajdova
+- [pigment-css] Add "Building design system components" guide with Pigment CSS (#41635) @siriwatknp
+- Continue migration of Base UI to sperate repository @oliviertassinari
+- Stick to one way to write IE 11 @oliviertassinari
+- Fix typo in CONTRIBUTING.md (#41670) @adriancuadrado
+- Drop IE 11 official support (#41611) @iammminzzy
+- [material-ui] Fix typo on the Accordion page (#41687) @connorshea
+- [pigment-css] Add small edits on the README (#41646) @danilo-leal
+- [pigment-css] Edit the example app's README files (#41639) @danilo-leal
+
+### Core
+
+- [code-infra] Move BrandingProvider/brandingTheme/InfoCard to @mui/docs (#41206) @Janpot
+- [core] Automate cherry-pick of PRs from `next` -> `master` (#41741) @aarongarciah
+- [core] Update the prettier script to use the next branch (#41637) @mnajdova
+- [docs-infra] Skip loading source for non-editable modules (#41588) @bharatkashyap
+- [docs-infra] Vale rule for M3 (#41737) @oliviertassinari
+- [docs-infra] Allows to remove edit button (#41702) @alexfauquette
+- [pigment-css][examples] Add example project with Remix (#41700) @brijeshb42
+- [examples] Update MUI's packages to the next version (#41701) @mnajdova
+- [material-ui] Refine the Sign-in and Sign-up templates (#41192) @zanivan
+- [test] Add test to display options provided to the options prop even if loading is true. (#41675) @ZeeshanTamboli
+- [blog] Refresh the design slightly (#41697) @danilo-leal
+- [website] Use en-US over en-UK for career link @oliviertassinari
+- [website] Add Aarón to About Us (#41736) @aarongarciah
+- [website] Refine button design and other details (#41686) @danilo-leal
+- [website] Improve job og image (#41672) @oliviertassinari
+- [website] Page <title> should have no dots @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @adriancuadrado, @alexfauquette, @bharatkashyap, @brijeshb42, @connorshea, @danilo-leal, @DiegoAndai, @iammminzzy, @Janpot, @JCQuintas, @levigunz, @mnajdova, @oliviertassinari, @ppaskaris-plooto, @siriwatknp, @skmanoj322, @zanivan, @ZeeshanTamboli
+
+## v6.0.0-alpha.0
+
+<!-- generated comparing v5.15.14..next -->
+
+_Mar 26, 2024_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔥 Converted 10+ Material UI components to support static CSS extraction
+- ⬅️ Added RTL support in Pigment CSS (#41570) @brijeshb42
+
+### `@mui/material@6.0.0-alpha.0`
+
+- [BottomNavigation] Convert to support CSS extraction (#41612) @aacevski
+- [AvatarGroup] Convert to support CSS extraction (#41485) @zanivan
+- [Backdrop] Convert to support CSS extraction (#41581) @aacevski
+- [Breadcrumbs] Convert to support CSS extraction (#41496) @aacevski
+- [Card] Convert to support CSS extraction (#41580) @aacevski
+- [Divider] Convert to support CSS extraction (#41366) @sai6855
+- [FormControl] Convert to support CSS extraction (#41613) @aacevski
+- [FormGroup] Convert to support CSS extraction (#41614) @aacevski
+- [MobileStepper] Convert to support CSS extraction (#41533) @aacevski
+- [Modal] Support CSS extraction (#41483) @sai6855
+- [Popover] Convert to support CSS extraction (#41564) @aacevski
+- [Stepper] Convert to support CSS extraction (#41546) @aacevski
+- [Autocomplete] Display options provided to the `options` prop even if loading is true (#41634) @nekoya
+- [Backdrop] Deprecate TransitionComponent (#40677) @harry-whorlow
+- [ButtonGroup] Deprecate composed classes (#41259) @sai6855
+- [StepLabel] Deprecate `componentProps` prop (#41321) @sai6855
+- [Chip] Convert to support CSS extraction (#41592) @DiegoAndai
+
+### `@pigment-css/react@0.0.4`
+
+- Fix evaluation of undefined variables (#41569) @siriwatknp
+- Fix react-modal demos location (#41560) @sai6855
+- [react] RTL Support (#41570) @brijeshb42
+
+### `@mui/system@6.0.0-alpha.0`
+
+- [core] Standardize index pattern (#41574) @DiegoAndai
+- Fix typo to avoid infinite recursion in function call (#41616) @michael-land
+- Move stylesheet generator to `extendTheme` (#41446) @siriwatknp
+
+### Docs
+
+- [joy-ui] Refresh the marketing example on the Color Inversion page (#41497) @cipherlogs
+- [material-ui] Add v5 to v6 migration guide (#41561) @DiegoAndai
+- [system] Add v5 to v6 migration guide (#41575) @DiegoAndai
+- [material-ui][Slider] Remove `valueLabelFormat` from restricted values demo so that the tooltip thumb label displays the same as the value text (#41567) @StylesTrip
+- [pigment-css] Update the RTL section on the readme (#41576) @danilo-leal
+
+### Core
+
+- [blog] Update the callout (#41645) @cherniavskii
+- [blog] Link to Romain's blog post in MUI X v7 announcement post (#41640) @cherniavskii
+- [blog] Blog post with MUI X v7.0.0 annoucement (#41563) @joserodolfofreitas
+- [blog] Add post about remote (#41565) @danilo-leal
+- [core] Restore the pnpm-lock.yaml (#41643) @mnajdova
+- [core] Fix failing CI steps (#41636) @mnajdova
+- [core] Update browser support versions (#41568) @siriwatknp
+- [core] Add instructions to deploying docs guide (#41582) @DiegoAndai
+- [core] Add comment explaining the frequency of no-response action runs (#41555) @michaldudak
+- [core] Init the next branch (#41552) @mnajdova
+- [core] Lower the frequency of no-response action runs (#41553) @michaldudak
+- [core] Update peerDependencies ranges to include v6 packages (#41662) @michaldudak
+- [core] Run pnpm dedupe (#41658) @michaldudak
+- [core] Fix dedupe check (#41657) @Janpot
+- [pigment-css][demo] Add index page for material-ui (#41577) @brijeshb42
+- [pigment-css][demo] Remove app specific pnpm workspace (#41393) @brijeshb42
+- [docs] Add notification for MUI X v7 blog post (#41587) @cherniavskii
+- [docs] MUI X v7 blog post annoucement followup (#41601) @joserodolfofreitas
+- [docs] Update the installation guides to use the next tag (#41558) @mnajdova
+- [docs][material-ui] Fix typo in CSS theme variables customization (#41632) @ZeeshanTamboli
+- [material-ui][docs] Remove deleted page from the sidenav (#41594) @danilo-leal
+- [website] Update pricing table (#41595) @cherniavskii
+- [website] Add stray design adjustments throughout the site (#41547) @danilo-leal
+
+All contributors of this release in alphabetical order: @aacevski, @brijeshb42, @cherniavskii, @cipherlogs, @danilo-leal, @DiegoAndai, @harry-whorlow, @Janpot, @joserodolfofreitas, @michael-land, @michaldudak, @mnajdova, @nekoya, @sai6855, @siriwatknp, @StylesTrip, @zanivan, @ZeeshanTamboli
+
 ## v5.15.15
 
 <!-- generated comparing v5.15.14..master -->
@@ -49,7 +215,7 @@ _Mar 18, 2024_
 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.13`
+### `@mui/material@5.15.14`
 
 - [Accordion] Convert to support CSS extraction (#41221) @mnajdova
 - &#8203;<!-- 24 -->[Autocomplete] Convert to support CSS extraction (#40330) @mnajdova
@@ -854,7 +1020,7 @@ A big thanks to the 22 contributors who made this release possible. Here are som
 - [material-ui] Revise the Alert demo page (#34892) @samuelsycamore
 - [material-ui] Revise the Accordion page (#40284) @anle9650
 - [material-ui] Add docs for complementary Card components (#40346) @anle9650
-- [material-ui] Add Material 3 components page (#40350) @DiegoAndai
+- [material-ui] Add Material Design 3 components page (#40350) @DiegoAndai
 - Fix strange italic style @oliviertassinari
 - Fix references to ESLint @oliviertassinari
 - Fix 301 redirections @oliviertassinari
@@ -13018,7 +13184,7 @@ Here are some highlights ✨:
 
   1. `stable` (default, formerly `esm`) which targets a snapshot (on release) of `> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11"`
   2. `node` (formerly default) which targets a snapshot (on release) of `maintained node versions`
-  3. `legacy` (new) which is `stable` + IE11
+  3. `legacy` (new) which is `stable` + IE 11
   4. `modern` (formerly `es`) which targets the last 1 version of evergreen browsers and active node (currently that is 14
 
   The change yields a 6% reduction in bundle size 📦 (Babel only).

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