@mui/material 5.6.3 → 5.8.0

package/Avatar/avatarClasses.d.ts

@@ -1,20 +1,20 @@
-export interface AvatarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if not `src` or `srcSet`. */
-    colorDefault: string;
-    /** Styles applied to the root element if `variant="circular"`. */
-    circular: string;
-    /** Styles applied to the root element if `variant="rounded"`. */
-    rounded: string;
-    /** Styles applied to the root element if `variant="square"`. */
-    square: string;
-    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
-    img: string;
-    /** Styles applied to the fallback icon */
-    fallback: string;
-}
-export declare type AvatarClassKey = keyof AvatarClasses;
-export declare function getAvatarUtilityClass(slot: string): string;
-declare const avatarClasses: AvatarClasses;
-export default avatarClasses;
+export interface AvatarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if not `src` or `srcSet`. */
+    colorDefault: string;
+    /** Styles applied to the root element if `variant="circular"`. */
+    circular: string;
+    /** Styles applied to the root element if `variant="rounded"`. */
+    rounded: string;
+    /** Styles applied to the root element if `variant="square"`. */
+    square: string;
+    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
+    img: string;
+    /** Styles applied to the fallback icon */
+    fallback: string;
+}
+export declare type AvatarClassKey = keyof AvatarClasses;
+export declare function getAvatarUtilityClass(slot: string): string;
+declare const avatarClasses: AvatarClasses;
+export default avatarClasses;

package/AvatarGroup/AvatarGroup.js

@@ -38,7 +38,7 @@ const AvatarGroupRoot = styled('div', {
   theme
 }) => ({
   [`& .${avatarClasses.root}`]: {
-    border: `2px solid ${theme.palette.background.default}`,
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -55,7 +55,7 @@ const AvatarGroupAvatar = styled(Avatar, {
 })(({
   theme
 }) => ({
-  border: `2px solid ${theme.palette.background.default}`,
+  border: `2px solid ${(theme.vars || theme).palette.background.default}`,
   boxSizing: 'content-box',
   marginLeft: -8,
   '&:last-child': {

package/AvatarGroup/avatarGroupClasses.d.ts

@@ -1,10 +1,10 @@
-export interface AvatarGroupClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the avatar elements. */
-    avatar: string;
-}
-export declare type AvatarGroupClassKey = keyof AvatarGroupClasses;
-export declare function getAvatarGroupUtilityClass(slot: string): string;
-declare const avatarGroupClasses: AvatarGroupClasses;
-export default avatarGroupClasses;
+export interface AvatarGroupClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the avatar elements. */
+    avatar: string;
+}
+export declare type AvatarGroupClassKey = keyof AvatarGroupClasses;
+export declare function getAvatarGroupUtilityClass(slot: string): string;
+declare const avatarGroupClasses: AvatarGroupClasses;
+export default avatarGroupClasses;

package/Backdrop/backdropClasses.d.ts

@@ -1,10 +1,10 @@
-export interface BackdropClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `invisible={true}`. */
-    invisible: string;
-}
-export declare type BackdropClassKey = keyof BackdropClasses;
-export declare function getBackdropUtilityClass(slot: string): string;
-declare const backdropClasses: BackdropClasses;
-export default backdropClasses;
+export interface BackdropClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `invisible={true}`. */
+    invisible: string;
+}
+export declare type BackdropClassKey = keyof BackdropClasses;
+export declare function getBackdropUtilityClass(slot: string): string;
+declare const backdropClasses: BackdropClasses;
+export default backdropClasses;

package/Badge/Badge.d.ts

@@ -31,40 +31,7 @@ export type BadgeTypeMap<
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: Partial<BadgeClasses> & {
-      /** Styles applied to the badge `span` element if `color="primary"`. */
-      colorPrimary?: string;
-      /** Styles applied to the badge `span` element if `color="secondary"`. */
-      colorSecondary?: string;
-      /** Styles applied to the badge `span` element if `color="error"`. */
-      colorError?: string;
-      /** Styles applied to the badge `span` element if `color="info"`. */
-      colorInfo?: string;
-      /** Styles applied to the badge `span` element if `color="success"`. */
-      colorSuccess?: string;
-      /** Styles applied to the badge `span` element if `color="warning"`. */
-      colorWarning?: string;
-      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
-      anchorOriginTopRightRectangular?: string;
-      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
-      anchorOriginBottomRightRectangular?: string;
-      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
-      anchorOriginTopLeftRectangular?: string;
-      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
-      anchorOriginBottomLeftRectangular?: string;
-      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
-      anchorOriginTopRightCircular?: string;
-      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
-      anchorOriginBottomRightCircular?: string;
-      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
-      anchorOriginTopLeftCircular?: string;
-      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
-      anchorOriginBottomLeftCircular?: string;
-      /** Class name applied to the badge `span` element if `overlap="rectangular"`. */
-      overlapRectangular?: string;
-      /** Class name applied to the badge `span` element if `overlap="circular"`. */
-      overlapCircular?: string;
-    };
+    classes?: Partial<BadgeClasses>;
     /**
      * @ignore
      */

package/Badge/Badge.js

@@ -79,8 +79,8 @@ const BadgeBadge = styled('span', {
     duration: theme.transitions.duration.enteringScreen
   })
 }, ownerState.color !== 'default' && {
-  backgroundColor: theme.palette[ownerState.color].main,
-  color: theme.palette[ownerState.color].contrastText
+  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+  color: (theme.vars || theme).palette[ownerState.color].contrastText
 }, ownerState.variant === 'dot' && {
   borderRadius: RADIUS_DOT,
   height: RADIUS_DOT * 2,

package/Badge/badgeClasses.d.ts

@@ -1,24 +1,56 @@
-export interface BadgeClasses {
-    /** Class name applied to the root element. */
-    root: string;
-    /** Class name applied to the badge `span` element. */
-    badge: string;
-    /** Class name applied to the badge `span` element if `variant="dot"`. */
-    dot: string;
-    /** Class name applied to the badge `span` element if `variant="standard"`. */
-    standard: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
-    anchorOriginTopRight: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
-    anchorOriginBottomRight: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
-    anchorOriginTopLeft: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
-    anchorOriginBottomLeft: string;
-    /** State class applied to the badge `span` element if `invisible={true}`. */
-    invisible: string;
-}
-export declare type BadgeClassKey = keyof BadgeClasses;
-export declare function getBadgeUtilityClass(slot: string): string;
-declare const badgeClasses: BadgeClasses;
-export default badgeClasses;
+export interface BadgeClasses {
+    /** Class name applied to the root element. */
+    root: string;
+    /** Class name applied to the badge `span` element. */
+    badge: string;
+    /** Class name applied to the badge `span` element if `variant="dot"`. */
+    dot: string;
+    /** Class name applied to the badge `span` element if `variant="standard"`. */
+    standard: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
+    anchorOriginTopRight: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
+    anchorOriginBottomRight: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
+    anchorOriginTopLeft: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
+    anchorOriginBottomLeft: string;
+    /** State class applied to the badge `span` element if `invisible={true}`. */
+    invisible: string;
+    /** Styles applied to the badge `span` element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the badge `span` element if `color="secondary"`. */
+    colorSecondary: string;
+    /** Styles applied to the badge `span` element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the badge `span` element if `color="info"`. */
+    colorInfo: string;
+    /** Styles applied to the badge `span` element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the badge `span` element if `color="warning"`. */
+    colorWarning: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
+    anchorOriginTopRightRectangular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
+    anchorOriginBottomRightRectangular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
+    anchorOriginTopLeftRectangular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
+    anchorOriginBottomLeftRectangular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
+    anchorOriginTopRightCircular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
+    anchorOriginBottomRightCircular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
+    anchorOriginTopLeftCircular: string;
+    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
+    anchorOriginBottomLeftCircular: string;
+    /** Class name applied to the badge `span` element if `overlap="rectangular"`. */
+    overlapRectangular: string;
+    /** Class name applied to the badge `span` element if `overlap="circular"`. */
+    overlapCircular: string;
+}
+export declare type BadgeClassKey = keyof BadgeClasses;
+export declare function getBadgeUtilityClass(slot: string): string;
+declare const badgeClasses: BadgeClasses;
+export default badgeClasses;

package/BottomNavigation/BottomNavigation.js

@@ -31,7 +31,7 @@ const BottomNavigationRoot = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   height: 56,
-  backgroundColor: theme.palette.background.paper
+  backgroundColor: (theme.vars || theme).palette.background.paper
 }));
 const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {
   const props = useThemeProps({

package/BottomNavigation/bottomNavigationClasses.d.ts

@@ -1,8 +1,8 @@
-export interface BottomNavigationClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type BottomNavigationClassKey = keyof BottomNavigationClasses;
-export declare function getBottomNavigationUtilityClass(slot: string): string;
-declare const bottomNavigationClasses: BottomNavigationClasses;
-export default bottomNavigationClasses;
+export interface BottomNavigationClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type BottomNavigationClassKey = keyof BottomNavigationClasses;
+export declare function getBottomNavigationUtilityClass(slot: string): string;
+declare const bottomNavigationClasses: BottomNavigationClasses;
+export default bottomNavigationClasses;

package/BottomNavigationAction/BottomNavigationAction.js

@@ -45,7 +45,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
   padding: '0px 12px',
   minWidth: 80,
   maxWidth: 168,
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   flexDirection: 'column',
   flex: '1'
 }, !ownerState.showLabel && !ownerState.selected && {
@@ -54,7 +54,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
   paddingTop: 0
 }, {
   [`&.${bottomNavigationActionClasses.selected}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }
 }));
 const BottomNavigationActionLabel = styled('span', {

package/BottomNavigationAction/bottomNavigationActionClasses.d.ts

@@ -1,14 +1,14 @@
-export interface BottomNavigationActionClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if selected. */
-    selected: string;
-    /** State class applied to the root element if `showLabel={false}` and not selected. */
-    iconOnly: string;
-    /** Styles applied to the label's span element. */
-    label: string;
-}
-export declare type BottomNavigationActionClassKey = keyof BottomNavigationActionClasses;
-export declare function getBottomNavigationActionUtilityClass(slot: string): string;
-declare const bottomNavigationActionClasses: BottomNavigationActionClasses;
-export default bottomNavigationActionClasses;
+export interface BottomNavigationActionClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if selected. */
+    selected: string;
+    /** State class applied to the root element if `showLabel={false}` and not selected. */
+    iconOnly: string;
+    /** Styles applied to the label's span element. */
+    label: string;
+}
+export declare type BottomNavigationActionClassKey = keyof BottomNavigationActionClasses;
+export declare function getBottomNavigationActionUtilityClass(slot: string): string;
+declare const bottomNavigationActionClasses: BottomNavigationActionClasses;
+export default bottomNavigationActionClasses;

package/Box/Box.js

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import { createBox } from '@mui/system';
+import PropTypes from 'prop-types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 const defaultTheme = createTheme();

package/Breadcrumbs/breadcrumbsClasses.d.ts

@@ -1,14 +1,14 @@
-export interface BreadcrumbsClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the ol element. */
-    ol: string;
-    /** Styles applied to the li element. */
-    li: string;
-    /** Styles applied to the separator element. */
-    separator: string;
-}
-export declare type BreadcrumbsClassKey = keyof BreadcrumbsClasses;
-export declare function getBreadcrumbsUtilityClass(slot: string): string;
-declare const breadcrumbsClasses: BreadcrumbsClasses;
-export default breadcrumbsClasses;
+export interface BreadcrumbsClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the ol element. */
+    ol: string;
+    /** Styles applied to the li element. */
+    li: string;
+    /** Styles applied to the separator element. */
+    separator: string;
+}
+export declare type BreadcrumbsClassKey = keyof BreadcrumbsClasses;
+export declare function getBreadcrumbsUtilityClass(slot: string): string;
+declare const breadcrumbsClasses: BreadcrumbsClasses;
+export default breadcrumbsClasses;

package/Button/buttonClasses.d.ts

@@ -1,76 +1,76 @@
-export interface ButtonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="text"`. */
-    text: string;
-    /** Styles applied to the root element if `variant="text"` and `color="inherit"`. */
-    textInherit: string;
-    /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
-    textPrimary: string;
-    /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
-    textSecondary: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. */
-    outlinedInherit: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
-    outlinedPrimary: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
-    outlinedSecondary: string;
-    /** Styles applied to the root element if `variant="contained"`. */
-    contained: string;
-    /** Styles applied to the root element if `variant="contained"` and `color="inherit"`. */
-    containedInherit: string;
-    /** Styles applied to the root element if `variant="contained"` and `color="primary"`. */
-    containedPrimary: string;
-    /** Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
-    containedSecondary: string;
-    /** Styles applied to the root element if `disableElevation={true}`. */
-    disableElevation: string;
-    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
-    focusVisible: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `color="inherit"`. */
-    colorInherit: string;
-    /** Styles applied to the root element if `size="small"` and `variant="text"`. */
-    textSizeSmall: string;
-    /** Styles applied to the root element if `size="medium"` and `variant="text"`. */
-    textSizeMedium: string;
-    /** Styles applied to the root element if `size="large"` and `variant="text"`. */
-    textSizeLarge: string;
-    /** Styles applied to the root element if `size="small"` and `variant="outlined"`. */
-    outlinedSizeSmall: string;
-    /** Styles applied to the root element if `size="medium"` and `variant="outlined"`. */
-    outlinedSizeMedium: string;
-    /** Styles applied to the root element if `size="large"` and `variant="outlined"`. */
-    outlinedSizeLarge: string;
-    /** Styles applied to the root element if `size="small"` and `variant="contained"`. */
-    containedSizeSmall: string;
-    /** Styles applied to the root element if `size="medium"` and `variant="contained"`. */
-    containedSizeMedium: string;
-    /** Styles applied to the root element if `size="large"` and `variant="contained"`. */
-    containedSizeLarge: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"`. */
-    sizeMedium: string;
-    /** Styles applied to the root element if `size="large"`. */
-    sizeLarge: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-    /** Styles applied to the startIcon element if supplied. */
-    startIcon: string;
-    /** Styles applied to the endIcon element if supplied. */
-    endIcon: string;
-    /** Styles applied to the icon element if supplied and `size="small"`. */
-    iconSizeSmall: string;
-    /** Styles applied to the icon element if supplied and `size="medium"`. */
-    iconSizeMedium: string;
-    /** Styles applied to the icon element if supplied and `size="large"`. */
-    iconSizeLarge: string;
-}
-export declare type ButtonClassKey = keyof ButtonClasses;
-export declare function getButtonUtilityClass(slot: string): string;
-declare const buttonClasses: ButtonClasses;
-export default buttonClasses;
+export interface ButtonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="text"`. */
+    text: string;
+    /** Styles applied to the root element if `variant="text"` and `color="inherit"`. */
+    textInherit: string;
+    /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
+    textPrimary: string;
+    /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
+    textSecondary: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. */
+    outlinedInherit: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+    outlinedPrimary: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+    outlinedSecondary: string;
+    /** Styles applied to the root element if `variant="contained"`. */
+    contained: string;
+    /** Styles applied to the root element if `variant="contained"` and `color="inherit"`. */
+    containedInherit: string;
+    /** Styles applied to the root element if `variant="contained"` and `color="primary"`. */
+    containedPrimary: string;
+    /** Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
+    containedSecondary: string;
+    /** Styles applied to the root element if `disableElevation={true}`. */
+    disableElevation: string;
+    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
+    focusVisible: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit: string;
+    /** Styles applied to the root element if `size="small"` and `variant="text"`. */
+    textSizeSmall: string;
+    /** Styles applied to the root element if `size="medium"` and `variant="text"`. */
+    textSizeMedium: string;
+    /** Styles applied to the root element if `size="large"` and `variant="text"`. */
+    textSizeLarge: string;
+    /** Styles applied to the root element if `size="small"` and `variant="outlined"`. */
+    outlinedSizeSmall: string;
+    /** Styles applied to the root element if `size="medium"` and `variant="outlined"`. */
+    outlinedSizeMedium: string;
+    /** Styles applied to the root element if `size="large"` and `variant="outlined"`. */
+    outlinedSizeLarge: string;
+    /** Styles applied to the root element if `size="small"` and `variant="contained"`. */
+    containedSizeSmall: string;
+    /** Styles applied to the root element if `size="medium"` and `variant="contained"`. */
+    containedSizeMedium: string;
+    /** Styles applied to the root element if `size="large"` and `variant="contained"`. */
+    containedSizeLarge: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium: string;
+    /** Styles applied to the root element if `size="large"`. */
+    sizeLarge: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+    /** Styles applied to the startIcon element if supplied. */
+    startIcon: string;
+    /** Styles applied to the endIcon element if supplied. */
+    endIcon: string;
+    /** Styles applied to the icon element if supplied and `size="small"`. */
+    iconSizeSmall: string;
+    /** Styles applied to the icon element if supplied and `size="medium"`. */
+    iconSizeMedium: string;
+    /** Styles applied to the icon element if supplied and `size="large"`. */
+    iconSizeLarge: string;
+}
+export declare type ButtonClassKey = keyof ButtonClasses;
+export declare function getButtonUtilityClass(slot: string): string;
+declare const buttonClasses: ButtonClasses;
+export default buttonClasses;

package/ButtonBase/buttonBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface ButtonBaseClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root element if keyboard focused. */
-    focusVisible: string;
-}
-export declare type ButtonBaseClassKey = keyof ButtonBaseClasses;
-export declare function getButtonBaseUtilityClass(slot: string): string;
-declare const buttonBaseClasses: ButtonBaseClasses;
-export default buttonBaseClasses;
+export interface ButtonBaseClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root element if keyboard focused. */
+    focusVisible: string;
+}
+export declare type ButtonBaseClassKey = keyof ButtonBaseClasses;
+export declare function getButtonBaseUtilityClass(slot: string): string;
+declare const buttonBaseClasses: ButtonBaseClasses;
+export default buttonBaseClasses;

package/ButtonBase/touchRippleClasses.d.ts

@@ -1,20 +1,20 @@
-export interface TouchRippleClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the internal `Ripple` components `ripple` class. */
-    ripple: string;
-    /** Styles applied to the internal `Ripple` components `rippleVisible` class. */
-    rippleVisible: string;
-    /** Styles applied to the internal `Ripple` components `ripplePulsate` class. */
-    ripplePulsate: string;
-    /** Styles applied to the internal `Ripple` components `child` class. */
-    child: string;
-    /** Styles applied to the internal `Ripple` components `childLeaving` class. */
-    childLeaving: string;
-    /** Styles applied to the internal `Ripple` components `childPulsate` class. */
-    childPulsate: string;
-}
-export declare type TouchRippleClassKey = keyof TouchRippleClasses;
-export declare function getTouchRippleUtilityClass(slot: string): string;
-declare const touchRippleClasses: TouchRippleClasses;
-export default touchRippleClasses;
+export interface TouchRippleClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the internal `Ripple` components `ripple` class. */
+    ripple: string;
+    /** Styles applied to the internal `Ripple` components `rippleVisible` class. */
+    rippleVisible: string;
+    /** Styles applied to the internal `Ripple` components `ripplePulsate` class. */
+    ripplePulsate: string;
+    /** Styles applied to the internal `Ripple` components `child` class. */
+    child: string;
+    /** Styles applied to the internal `Ripple` components `childLeaving` class. */
+    childLeaving: string;
+    /** Styles applied to the internal `Ripple` components `childPulsate` class. */
+    childPulsate: string;
+}
+export declare type TouchRippleClassKey = keyof TouchRippleClasses;
+export declare function getTouchRippleUtilityClass(slot: string): string;
+declare const touchRippleClasses: TouchRippleClasses;
+export default touchRippleClasses;

package/ButtonGroup/ButtonGroup.js

@@ -56,9 +56,9 @@ const ButtonGroupRoot = styled('div', {
   ownerState
 }) => _extends({
   display: 'inline-flex',
-  borderRadius: theme.shape.borderRadius
+  borderRadius: (theme.vars || theme).shape.borderRadius
 }, ownerState.variant === 'contained' && {
-  boxShadow: theme.shadows[2]
+  boxShadow: (theme.vars || theme).shadows[2]
 }, ownerState.disableElevation && {
   boxShadow: 'none'
 }, ownerState.fullWidth && {
@@ -86,27 +86,27 @@ const ButtonGroupRoot = styled('div', {
       borderBottomRightRadius: 0,
       borderBottomLeftRadius: 0
     }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-      borderRight: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
+      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)'}`
     }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-      borderBottom: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
+      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)'}`
     }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      borderColor: alpha(theme.palette[ownerState.color].main, 0.5)
+      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.palette.grey[400]}`,
+      borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
       [`&.${buttonGroupClasses.disabled}`]: {
-        borderRight: `1px solid ${theme.palette.action.disabled}`
+        borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
       }
     }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
-      borderBottom: `1px solid ${theme.palette.grey[400]}`,
+      borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
       [`&.${buttonGroupClasses.disabled}`]: {
-        borderBottom: `1px solid ${theme.palette.action.disabled}`
+        borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
       }
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      borderColor: theme.palette[ownerState.color].dark
+      borderColor: (theme.vars || theme).palette[ownerState.color].dark
     }, {
       '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
         borderRightColor: 'currentColor'