@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.1

package/ButtonBase/ButtonBase.js

@@ -9,14 +9,14 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useForkRef from '../utils/useForkRef';
 import useEventCallback from '../utils/useEventCallback';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import TouchRipple from './TouchRipple';
 import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiButtonBase');
 const useUtilityClasses = ownerState => {
   const {
     disabled,

package/ButtonBase/Ripple.js

@@ -50,7 +50,7 @@ function Ripple(props) {
     })
   });
 }
-process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
+process.env.NODE_ENV !== "production" ? Ripple.propTypes /* remove-proptypes */ = {
   /**
    * Override or extend the styles applied to the component.
    */

package/ButtonBase/TouchRipple.js

@@ -7,13 +7,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
 import clsx from 'clsx';
-import { keyframes } from '@mui/system';
 import useTimeout from '@mui/utils/useTimeout';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { keyframes, styled, createUseThemeProps } from '../zero-styled';
 import Ripple from './Ripple';
 import touchRippleClasses from './touchRippleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTouchRipple');
 const DURATION = 550;
 export const DELAY_RIPPLE = 80;
 const enterKeyframe = keyframes`
@@ -310,7 +309,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     })
   }));
 });
-process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
+process.env.NODE_ENV !== "production" ? TouchRipple.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the ripple starts at the center of the component
    * rather than at the point of interaction.

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

@@ -1,5 +1,92 @@
 # [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 -->
@@ -79,6 +166,46 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
 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 -->
+
+_Apr 4, 2024_
+
+A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.15`
+
+- [Autocomplete] Display options provided to the `options` prop even if loading is true (#41677) @ZeeshanTamboli
+- [RadioGroup] Apply classnames (#41681) @ZeeshanTamboli
+
+### `@mui/system@5.15.15`
+
+- Fix typo to avoid infinite recursion in function call (#41678) @ZeeshanTamboli
+
+### Docs
+
+- [material-ui][Slider] Remove `valueLabelFormat` from restricted values demo so that the tooltip thumb label displays the same as the value text (#41679) @ZeeshanTamboli
+- [material-ui] Remove deleted page from the sidenav (#41594) @danilo-leal
+- [material-ui] Fix typo in CSS theme variables customization (#41680) @ZeeshanTamboli
+- Continue migration of Base UI to sperate repository @oliviertassinari
+- Add notification for MUI X v7 blog post (#41587) (#41605) @cherniavskii
+- Update the versions dropdown to show v6 (#41557) @mnajdova
+
+### Core
+
+- [blog] Link to Romain's blog post in MUI X v7 announcement post (#41641) @cherniavskii
+- [blog] Blog post with MUI X v7.0.0 annoucement (#41563) (#41604) @cherniavskii
+- [blog] Add post about remote (#41565) @danilo-leal
+- [core] Continue rename of Toolpad @oliviertassinari
+- [docs-infra] Add Toolpad product/category IDs to types (#41551) @bharatkashyap
+- [website] Add Aarón to About Us (#41747) @aarongarciah
+- [website] Add stray design adjustments throughout the site (#41642) @mnajdova
+- [website] Update pricing table (#41606) @cherniavskii
+
+All contributors of this release in alphabetical order: @aarongarciah, @bharatkashyap, @cherniavskii, @danilo-leal, @mnajdova, @oliviertassinari, @ZeeshanTamboli
+
 ## v5.15.14
 
 <!-- generated comparing v5.15.13..master -->
@@ -893,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
@@ -13057,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/Grid/Grid.js

@@ -28,6 +28,9 @@ import gridClasses, { getGridUtilityClass } from './gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getOffset(val) {
   const parse = parseFloat(val);
+  if (Number.isNaN(parse)) {
+    return val;
+  }
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 }
 export function generateGrid({

package/RadioGroup/RadioGroup.d.ts

@@ -25,8 +25,6 @@ export interface RadioGroupProps extends Omit<FormGroupProps, 'onChange'> {
   value?: any;
 }
 
-export type RadioGroupClassKey = keyof NonNullable<RadioGroupProps['classes']>;
-
 /**
  *
  * Demos:

package/RadioGroup/RadioGroup.js

@@ -2,21 +2,36 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actions", "children", "defaultValue", "name", "onChange", "value"];
+const _excluded = ["actions", "children", "className", "defaultValue", "name", "onChange", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
 import FormGroup from '../FormGroup';
+import { getRadioGroupUtilityClass } from './radioGroupClasses';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import RadioGroupContext from './RadioGroupContext';
 import useId from '../utils/useId';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = props => {
+  const {
+    classes,
+    row,
+    error
+  } = props;
+  const slots = {
+    root: ['root', row && 'row', error && 'error']
+  };
+  return composeClasses(slots, getRadioGroupUtilityClass, classes);
+};
 const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
   const {
       // private
       // eslint-disable-next-line react/prop-types
       actions,
       children,
+      className,
       defaultValue,
       name: nameProp,
       onChange,
@@ -24,6 +39,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootRef = React.useRef(null);
+  const classes = useUtilityClasses(props);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -56,7 +72,8 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     value: contextValue,
     children: /*#__PURE__*/_jsx(FormGroup, _extends({
       role: "radiogroup",
-      ref: handleRef
+      ref: handleRef,
+      className: clsx(classes.root, className)
     }, other, {
       children: children
     }))
@@ -71,6 +88,10 @@ process.env.NODE_ENV !== "production" ? RadioGroup.propTypes /* remove-proptypes
    * The content of the component.
    */
   children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

package/RadioGroup/index.d.ts

@@ -2,3 +2,6 @@ export { default } from './RadioGroup';
 export * from './RadioGroup';
 
 export { default as useRadioGroup, RadioGroupState } from './useRadioGroup';
+
+export { default as radioGroupClasses } from './radioGroupClasses';
+export * from './radioGroupClasses';

package/RadioGroup/index.js

@@ -1,4 +1,6 @@
 'use client';
 
 export { default } from './RadioGroup';
-export { default as useRadioGroup } from './useRadioGroup';
+export { default as useRadioGroup } from './useRadioGroup';
+export { default as radioGroupClasses } from './radioGroupClasses';
+export * from './radioGroupClasses';

package/RadioGroup/radioGroupClasses.d.ts

@@ -0,0 +1,6 @@
+import { FormGroupClasses } from '../FormGroup';
+export type RadioGroupClassKey = keyof FormGroupClasses;
+export type RadioGroupClasses = FormGroupClasses;
+export declare function getRadioGroupUtilityClass(slot: string): string;
+declare const radioGroupClasses: RadioGroupClasses;
+export default radioGroupClasses;

package/RadioGroup/radioGroupClasses.js

@@ -0,0 +1,7 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+export function getRadioGroupUtilityClass(slot) {
+  return generateUtilityClass('MuiRadioGroup', slot);
+}
+const radioGroupClasses = generateUtilityClasses('MuiRadioGroup', ['root', 'row', 'error']);
+export default radioGroupClasses;

package/Slider/Slider.js

@@ -279,27 +279,7 @@ export const SliderThumb = styled('span', {
       boxShadow: 'none'
     }
   },
-  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
-    props: {
-      color
-    },
-    style: {
-      [`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
-        boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-      } : {
-        boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
-      }, {
-        '@media (hover: none)': {
-          boxShadow: 'none'
-        }
-      }),
-      [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
-        boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
-      } : {
-        boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
-      })
-    }
-  })), {
+  variants: [{
     props: {
       size: 'small'
     },
@@ -326,7 +306,27 @@ export const SliderThumb = styled('span', {
       left: '50%',
       transform: 'translate(-50%, 50%)'
     }
-  }]
+  }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
+    props: {
+      color
+    },
+    style: {
+      [`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
+        boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
+      } : {
+        boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
+      }, {
+        '@media (hover: none)': {
+          boxShadow: 'none'
+        }
+      }),
+      [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
+        boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
+      } : {
+        boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
+      })
+    }
+  }))]
 }));
 export const SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',