@mui/material 5.15.14 → 6.0.0-alpha.0

package/modern/Breadcrumbs/Breadcrumbs.js

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

package/modern/Button/Button.js

@@ -16,8 +16,7 @@ import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     color,

package/modern/ButtonBase/ButtonBase.js

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

package/modern/ButtonGroup/ButtonGroup.js

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

package/modern/ButtonGroup/buttonGroupClasses.js

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

package/modern/Card/Card.js

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

package/modern/CardActionArea/CardActionArea.js

@@ -7,12 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
 import ButtonBase from '../ButtonBase';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCardActionArea');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/CardActions/CardActions.js

@@ -1,16 +1,16 @@
 '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 = ["disableSpacing", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardActionsUtilityClass } from './cardActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCardActions');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -30,17 +30,21 @@ const CardActionsRoot = styled('div', {
     } = props;
     return [styles.root, !ownerState.disableSpacing && styles.spacing];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'flex',
   alignItems: 'center',
-  padding: 8
-}, !ownerState.disableSpacing && {
-  '& > :not(style) ~ :not(style)': {
-    marginLeft: 8
-  }
-}));
+  padding: 8,
+  variants: [{
+    props: {
+      disableSpacing: false
+    },
+    style: {
+      '& > :not(style) ~ :not(style)': {
+        marginLeft: 8
+      }
+    }
+  }]
+});
 const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/CardContent/CardContent.js

@@ -7,10 +7,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardContentUtilityClass } from './cardContentClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCardContent');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -24,13 +24,11 @@ const CardContentRoot = styled('div', {
   name: 'MuiCardContent',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(() => {
-  return {
-    padding: 16,
-    '&:last-child': {
-      paddingBottom: 24
-    }
-  };
+})({
+  padding: 16,
+  '&:last-child': {
+    paddingBottom: 24
+  }
 });
 const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
   const props = useThemeProps({

package/modern/CardHeader/CardHeader.js

@@ -8,11 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses';
-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('MuiCardHeader');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/CardMedia/CardMedia.js

@@ -1,17 +1,17 @@
 '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", "component", "image", "src", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardMediaUtilityClass } from './cardMediaClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCardMedia');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,19 +36,28 @@ const CardMediaRoot = styled('div', {
     } = ownerState;
     return [styles.root, isMediaComponent && styles.media, isImageComponent && styles.img];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'block',
   backgroundSize: 'cover',
   backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center'
-}, ownerState.isMediaComponent && {
-  width: '100%'
-}, ownerState.isImageComponent && {
-  // ⚠️ object-fit is not supported by IE11.
-  objectFit: 'cover'
-}));
+  backgroundPosition: 'center',
+  variants: [{
+    props: {
+      isMediaComponent: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      isImageComponent: true
+    },
+    style: {
+      // ⚠️ object-fit is not supported by IE11.
+      objectFit: 'cover'
+    }
+  }]
+});
 const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 const IMAGE_COMPONENTS = ['picture', 'img'];
 const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref) {

package/modern/Chip/Chip.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 = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,11 +13,10 @@ import useForkRef from '../utils/useForkRef';
 import unsupportedProp from '../utils/unsupportedProp';
 import capitalize from '../utils/capitalize';
 import ButtonBase from '../ButtonBase';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import chipClasses, { getChipUtilityClass } from './chipClasses';
-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('MuiChip');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -76,11 +75,10 @@ const ChipRoot = styled('div', {
     }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], styles[`${variant}${capitalize(color)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
-  return _extends({
+  return {
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(13),
@@ -131,19 +129,11 @@ const ChipRoot = styled('div', {
       height: 18,
       fontSize: theme.typography.pxToRem(10)
     },
-    [`& .${chipClasses.icon}`]: _extends({
+    [`& .${chipClasses.icon}`]: {
       marginLeft: 5,
       marginRight: -6
-    }, ownerState.size === 'small' && {
-      fontSize: 18,
-      marginLeft: 4,
-      marginRight: -4
-    }, ownerState.iconColor === ownerState.color && _extends({
-      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
-    }, ownerState.color !== 'default' && {
-      color: 'inherit'
-    })),
-    [`& .${chipClasses.deleteIcon}`]: _extends({
+    },
+    [`& .${chipClasses.deleteIcon}`]: {
       WebkitTapHighlightColor: 'transparent',
       color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
       fontSize: 22,
@@ -152,96 +142,160 @@ const ChipRoot = styled('div', {
       '&:hover': {
         color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
       }
-    }, ownerState.size === 'small' && {
-      fontSize: 16,
-      marginRight: 4,
-      marginLeft: -4
-    }, ownerState.color !== 'default' && {
-      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
-      '&:hover, &:active': {
-        color: (theme.vars || theme).palette[ownerState.color].contrastText
+    },
+    variants: [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        height: 24,
+        [`& .${chipClasses.icon}`]: {
+          fontSize: 18,
+          marginLeft: 4,
+          marginRight: -4
+        },
+        [`& .${chipClasses.deleteIcon}`]: {
+          fontSize: 16,
+          marginRight: 4,
+          marginLeft: -4
+        }
       }
-    })
-  }, ownerState.size === 'small' && {
-    height: 24
-  }, ownerState.color !== 'default' && {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-    color: (theme.vars || theme).palette[ownerState.color].contrastText
-  }, ownerState.onDelete && {
-    [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-    }
-  }, ownerState.onDelete && ownerState.color !== 'default' && {
-    [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-    }
-  });
-}, ({
-  theme,
-  ownerState
-}) => _extends({}, ownerState.clickable && {
-  userSelect: 'none',
-  WebkitTapHighlightColor: 'transparent',
-  cursor: 'pointer',
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
-  },
-  [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  },
-  '&:active': {
-    boxShadow: (theme.vars || theme).shadows[1]
-  }
-}, ownerState.clickable && ownerState.color !== 'default' && {
-  [`&:hover, &.${chipClasses.focusVisible}`]: {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-  }
-}), ({
-  theme,
-  ownerState
-}) => _extends({}, ownerState.variant === 'outlined' && {
-  backgroundColor: 'transparent',
-  border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
-  [`&.${chipClasses.clickable}:hover`]: {
-    backgroundColor: (theme.vars || theme).palette.action.hover
-  },
-  [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: (theme.vars || theme).palette.action.focus
-  },
-  [`& .${chipClasses.avatar}`]: {
-    marginLeft: 4
-  },
-  [`& .${chipClasses.avatarSmall}`]: {
-    marginLeft: 2
-  },
-  [`& .${chipClasses.icon}`]: {
-    marginLeft: 4
-  },
-  [`& .${chipClasses.iconSmall}`]: {
-    marginLeft: 2
-  },
-  [`& .${chipClasses.deleteIcon}`]: {
-    marginRight: 5
-  },
-  [`& .${chipClasses.deleteIconSmall}`]: {
-    marginRight: 3
-  }
-}, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
-  color: (theme.vars || theme).palette[ownerState.color].main,
-  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
-  [`&.${chipClasses.clickable}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
-  },
-  [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
-  },
-  [`& .${chipClasses.deleteIcon}`]: {
-    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
-    '&:hover, &:active': {
-      color: (theme.vars || theme).palette[ownerState.color].main
-    }
-  }
-}));
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main && value.contrastText).map(([color]) => {
+      return {
+        props: {
+          color
+        },
+        style: {
+          backgroundColor: (theme.vars || theme).palette[color].main,
+          color: (theme.vars || theme).palette[color].contrastText,
+          [`& .${chipClasses.deleteIcon}`]: {
+            color: theme.vars ? `rgba(${theme.vars.palette[color].contrastTextChannel} / 0.7)` : alpha(theme.palette[color].contrastText, 0.7),
+            '&:hover, &:active': {
+              color: (theme.vars || theme).palette[color].contrastText
+            }
+          }
+        }
+      };
+    }), {
+      props: props => props.iconColor === props.color,
+      style: {
+        [`& .${chipClasses.icon}`]: {
+          color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
+        }
+      }
+    }, {
+      props: props => props.iconColor === props.color && props.color !== 'default',
+      style: {
+        [`& .${chipClasses.icon}`]: {
+          color: 'inherit'
+        }
+      }
+    }, {
+      props: {
+        onDelete: true
+      },
+      style: {
+        [`&.${chipClasses.focusVisible}`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.dark).map(([color]) => {
+      return {
+        props: {
+          color,
+          onDelete: true
+        },
+        style: {
+          [`&.${chipClasses.focusVisible}`]: {
+            background: (theme.vars || theme).palette[color].dark
+          }
+        }
+      };
+    }), {
+      props: {
+        clickable: true
+      },
+      style: {
+        userSelect: 'none',
+        WebkitTapHighlightColor: 'transparent',
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+        },
+        [`&.${chipClasses.focusVisible}`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        },
+        '&:active': {
+          boxShadow: (theme.vars || theme).shadows[1]
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.dark).map(([color]) => ({
+      props: {
+        color,
+        clickable: true
+      },
+      style: {
+        [`&:hover, &.${chipClasses.focusVisible}`]: {
+          backgroundColor: (theme.vars || theme).palette[color].dark
+        }
+      }
+    })), {
+      props: {
+        variant: 'outlined'
+      },
+      style: {
+        backgroundColor: 'transparent',
+        border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+        [`&.${chipClasses.clickable}:hover`]: {
+          backgroundColor: (theme.vars || theme).palette.action.hover
+        },
+        [`&.${chipClasses.focusVisible}`]: {
+          backgroundColor: (theme.vars || theme).palette.action.focus
+        },
+        [`& .${chipClasses.avatar}`]: {
+          marginLeft: 4
+        },
+        [`& .${chipClasses.avatarSmall}`]: {
+          marginLeft: 2
+        },
+        [`& .${chipClasses.icon}`]: {
+          marginLeft: 4
+        },
+        [`& .${chipClasses.iconSmall}`]: {
+          marginLeft: 2
+        },
+        [`& .${chipClasses.deleteIcon}`]: {
+          marginRight: 5
+        },
+        [`& .${chipClasses.deleteIconSmall}`]: {
+          marginRight: 3
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // no need to check for mainChannel as it's calculated from main
+    .map(([color]) => ({
+      props: {
+        variant: 'outlined',
+        color
+      },
+      style: {
+        color: (theme.vars || theme).palette[color].main,
+        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : alpha(theme.palette[color].main, 0.7)}`,
+        [`&.${chipClasses.clickable}:hover`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+        },
+        [`&.${chipClasses.focusVisible}`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[color].main, theme.palette.action.focusOpacity)
+        },
+        [`& .${chipClasses.deleteIcon}`]: {
+          color: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : alpha(theme.palette[color].main, 0.7),
+          '&:hover, &:active': {
+            color: (theme.vars || theme).palette[color].main
+          }
+        }
+      }
+    }))]
+  };
+});
 const ChipLabel = styled('span', {
   name: 'MuiChip',
   slot: 'Label',
@@ -254,24 +308,39 @@ const ChipLabel = styled('span', {
     } = ownerState;
     return [styles.label, styles[`label${capitalize(size)}`]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   paddingLeft: 12,
   paddingRight: 12,
-  whiteSpace: 'nowrap'
-}, ownerState.variant === 'outlined' && {
-  paddingLeft: 11,
-  paddingRight: 11
-}, ownerState.size === 'small' && {
-  paddingLeft: 8,
-  paddingRight: 8
-}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-  paddingLeft: 7,
-  paddingRight: 7
-}));
+  whiteSpace: 'nowrap',
+  variants: [{
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      paddingLeft: 11,
+      paddingRight: 11
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      paddingLeft: 8,
+      paddingRight: 8
+    }
+  }, {
+    props: {
+      size: 'small',
+      variant: 'outlined'
+    },
+    style: {
+      paddingLeft: 7,
+      paddingRight: 7
+    }
+  }]
+});
 function isDeleteKeyboardEvent(keyboardEvent) {
   return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
 }

package/modern/CssBaseline/CssBaseline.js

@@ -5,8 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useThemeProps from '../styles/useThemeProps';
 import GlobalStyles from '../GlobalStyles';
-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";
 export const html = (theme, enableColorScheme) => _extends({
   WebkitFontSmoothing: 'antialiased',
   // Antialiasing.