@mui/material 5.15.15 → 6.0.0-alpha.1

package/TablePagination/TablePaginationActions.js

@@ -15,10 +15,8 @@ import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
 /**
  * @ignore - internal component.
  */
-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 TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
-  var _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$previousButton, _slots$firstButtonIco, _slots$lastButtonIcon, _slots$nextButtonIcon, _slots$previousButton2;
   const {
       backIconButtonProps,
       count,
@@ -47,14 +45,14 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
   const handleLastPageButtonClick = event => {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
-  const FirstButton = (_slots$firstButton = slots.firstButton) != null ? _slots$firstButton : IconButton;
-  const LastButton = (_slots$lastButton = slots.lastButton) != null ? _slots$lastButton : IconButton;
-  const NextButton = (_slots$nextButton = slots.nextButton) != null ? _slots$nextButton : IconButton;
-  const PreviousButton = (_slots$previousButton = slots.previousButton) != null ? _slots$previousButton : IconButton;
-  const FirstButtonIcon = (_slots$firstButtonIco = slots.firstButtonIcon) != null ? _slots$firstButtonIco : FirstPageIconDefault;
-  const LastButtonIcon = (_slots$lastButtonIcon = slots.lastButtonIcon) != null ? _slots$lastButtonIcon : LastPageIconDefault;
-  const NextButtonIcon = (_slots$nextButtonIcon = slots.nextButtonIcon) != null ? _slots$nextButtonIcon : KeyboardArrowRight;
-  const PreviousButtonIcon = (_slots$previousButton2 = slots.previousButtonIcon) != null ? _slots$previousButton2 : KeyboardArrowLeft;
+  const FirstButton = slots.firstButton ?? IconButton;
+  const LastButton = slots.lastButton ?? IconButton;
+  const NextButton = slots.nextButton ?? IconButton;
+  const PreviousButton = slots.previousButton ?? IconButton;
+  const FirstButtonIcon = slots.firstButtonIcon ?? FirstPageIconDefault;
+  const LastButtonIcon = slots.lastButtonIcon ?? LastPageIconDefault;
+  const NextButtonIcon = slots.nextButtonIcon ?? KeyboardArrowRight;
+  const PreviousButtonIcon = slots.previousButtonIcon ?? KeyboardArrowLeft;
   const FirstButtonSlot = isRtl ? LastButton : FirstButton;
   const PreviousButtonSlot = isRtl ? NextButton : PreviousButton;
   const NextButtonSlot = isRtl ? PreviousButton : NextButton;
@@ -79,7 +77,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       color: "inherit",
       "aria-label": getItemAriaLabel('previous', page),
       title: getItemAriaLabel('previous', page)
-    }, previousButtonSlotProps != null ? previousButtonSlotProps : backIconButtonProps, {
+    }, previousButtonSlotProps ?? backIconButtonProps, {
       children: isRtl ? /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon)) : /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon))
     })), /*#__PURE__*/_jsx(NextButtonSlot, _extends({
       onClick: handleNextButtonClick,
@@ -87,7 +85,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       color: "inherit",
       "aria-label": getItemAriaLabel('next', page),
       title: getItemAriaLabel('next', page)
-    }, nextButtonSlotProps != null ? nextButtonSlotProps : nextIconButtonProps, {
+    }, nextButtonSlotProps ?? nextIconButtonProps, {
       children: isRtl ? /*#__PURE__*/_jsx(PreviousButtonIcon, _extends({}, slotProps.previousButtonIcon)) : /*#__PURE__*/_jsx(NextButtonIcon, _extends({}, slotProps.nextButtonIcon))
     })), showLastButton && /*#__PURE__*/_jsx(LastButtonSlot, _extends({
       onClick: handleLastPageButtonClick,

package/TableSortLabel/TableSortLabel.js

@@ -13,8 +13,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';
-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 {
     classes,

package/Tabs/Tabs.js

@@ -23,8 +23,7 @@ import useEventCallback from '../utils/useEventCallback';
 import tabsClasses, { getTabsUtilityClass } from './tabsClasses';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
-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 nextItem = (list, item) => {
   if (list === item) {
     return list.firstChild;
@@ -510,12 +509,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     const handleMutation = records => {
       records.forEach(record => {
         record.removedNodes.forEach(item => {
-          var _resizeObserver;
-          (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
+          resizeObserver?.unobserve(item);
         });
         record.addedNodes.forEach(item => {
-          var _resizeObserver2;
-          (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
+          resizeObserver?.observe(item);
         });
       });
       handleResize();
@@ -537,11 +534,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       });
     }
     return () => {
-      var _mutationObserver, _resizeObserver3;
       handleResize.clear();
       win.removeEventListener('resize', handleResize);
-      (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
-      (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
+      mutationObserver?.disconnect();
+      resizeObserver?.disconnect();
     };
   }, [updateIndicatorState, updateScrollButtonState]);
 
@@ -575,7 +571,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       };
     }
     return undefined;
-  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);
+  }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
   React.useEffect(() => {
     setMounted(true);
   }, []);

package/TextField/TextField.js

@@ -19,8 +19,7 @@ import FormControl from '../FormControl';
 import FormHelperText from '../FormHelperText';
 import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
-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 variantComponent = {
   standard: Input,
   filled: FilledInput,

package/Tooltip/Tooltip.js

@@ -24,8 +24,7 @@ import useId from '../utils/useId';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
-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";
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -217,7 +216,6 @@ function composeEventHandler(handler, eventHandler) {
 
 // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
-  var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTooltip'
@@ -503,7 +501,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     }
   }
   const popperOptions = React.useMemo(() => {
-    var _PopperProps$popperOp;
     let tooltipModifiers = [{
       name: 'arrow',
       enabled: Boolean(arrowRef),
@@ -512,7 +509,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
         padding: 4
       }
     }];
-    if ((_PopperProps$popperOp = PopperProps.popperOptions) != null && _PopperProps$popperOp.modifiers) {
+    if (PopperProps.popperOptions?.modifiers) {
       tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
     }
     return _extends({}, PopperProps.popperOptions, {
@@ -528,23 +525,23 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     touch: ignoreNonTouchEvents.current
   });
   const classes = useUtilityClasses(ownerState);
-  const PopperComponent = (_ref = (_slots$popper = slots.popper) != null ? _slots$popper : components.Popper) != null ? _ref : TooltipPopper;
-  const TransitionComponent = (_ref2 = (_ref3 = (_slots$transition = slots.transition) != null ? _slots$transition : components.Transition) != null ? _ref3 : TransitionComponentProp) != null ? _ref2 : Grow;
-  const TooltipComponent = (_ref4 = (_slots$tooltip = slots.tooltip) != null ? _slots$tooltip : components.Tooltip) != null ? _ref4 : TooltipTooltip;
-  const ArrowComponent = (_ref5 = (_slots$arrow = slots.arrow) != null ? _slots$arrow : components.Arrow) != null ? _ref5 : TooltipArrow;
-  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper, {
-    className: clsx(classes.popper, PopperProps == null ? void 0 : PopperProps.className, (_ref6 = (_slotProps$popper2 = slotProps.popper) != null ? _slotProps$popper2 : componentsProps.popper) == null ? void 0 : _ref6.className)
+  const PopperComponent = slots.popper ?? components.Popper ?? TooltipPopper;
+  const TransitionComponent = slots.transition ?? components.Transition ?? TransitionComponentProp ?? Grow;
+  const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
+  const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
+  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, slotProps.popper ?? componentsProps.popper, {
+    className: clsx(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
   }), ownerState);
-  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, (_slotProps$transition = slotProps.transition) != null ? _slotProps$transition : componentsProps.transition), ownerState);
-  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, (_slotProps$tooltip = slotProps.tooltip) != null ? _slotProps$tooltip : componentsProps.tooltip, {
-    className: clsx(classes.tooltip, (_ref7 = (_slotProps$tooltip2 = slotProps.tooltip) != null ? _slotProps$tooltip2 : componentsProps.tooltip) == null ? void 0 : _ref7.className)
+  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, slotProps.transition ?? componentsProps.transition), ownerState);
+  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, slotProps.tooltip ?? componentsProps.tooltip, {
+    className: clsx(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
   }), ownerState);
-  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, (_slotProps$arrow = slotProps.arrow) != null ? _slotProps$arrow : componentsProps.arrow, {
-    className: clsx(classes.arrow, (_ref8 = (_slotProps$arrow2 = slotProps.arrow) != null ? _slotProps$arrow2 : componentsProps.arrow) == null ? void 0 : _ref8.className)
+  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, slotProps.arrow ?? componentsProps.arrow, {
+    className: clsx(classes.arrow, (slotProps.arrow ?? componentsProps.arrow)?.className)
   }), ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
-      as: PopperComponentProp != null ? PopperComponentProp : Popper,
+      as: PopperComponentProp ?? Popper,
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.15
+ * @mui/material v6.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/SwitchBase.js

@@ -14,8 +14,7 @@ import useControlled from '../utils/useControlled';
 import useFormControl from '../FormControl/useFormControl';
 import ButtonBase from '../ButtonBase';
 import { getSwitchBaseUtilityClass } from './switchBaseClasses';
-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 {
     classes,

package/legacy/Accordion/Accordion.js

@@ -18,8 +18,7 @@ import AccordionContext from './AccordionContext';
 import useControlled from '../utils/useControlled';
 import useSlot from '../utils/useSlot';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
-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";
 var useThemeProps = createUseThemeProps('MuiAccordion');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,

package/legacy/AccordionSummary/AccordionSummary.js

@@ -11,8 +11,7 @@ import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import AccordionContext from '../Accordion/AccordionContext';
 import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from './accordionSummaryClasses';
-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";
 var useThemeProps = createUseThemeProps('MuiAccordionSummary');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,

package/legacy/Alert/Alert.js

@@ -21,8 +21,7 @@ import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlin
 import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
 import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
-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";
 var useThemeProps = createUseThemeProps('MuiAlert');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var variant = ownerState.variant,

package/legacy/AppBar/AppBar.js

@@ -2,16 +2,17 @@
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 capitalize from '../utils/capitalize';
 import Paper from '../Paper';
 import { getAppBarUtilityClass } from './appBarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAppBar');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var color = ownerState.color,
     position = ownerState.position,
@@ -35,73 +36,132 @@ var AppBarRoot = styled(Paper, {
     return [styles.root, styles["position".concat(capitalize(ownerState.position))], styles["color".concat(capitalize(ownerState.color))]];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  var backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-  return _extends({
+  var _theme$vars;
+  var theme = _ref.theme;
+  return {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
     boxSizing: 'border-box',
     // Prevent padding issue with the Modal and fixed positioned AppBar.
-    flexShrink: 0
-  }, ownerState.position === 'fixed' && {
-    position: 'fixed',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0,
-    '@media print': {
-      // Prevent the app bar to be visible on each printed page.
-      position: 'absolute'
-    }
-  }, ownerState.position === 'absolute' && {
-    position: 'absolute',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0
-  }, ownerState.position === 'sticky' && {
-    // ⚠️ sticky is not supported by IE11.
-    position: 'sticky',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0
-  }, ownerState.position === 'static' && {
-    position: 'static'
-  }, ownerState.position === 'relative' && {
-    position: 'relative'
-  }, !theme.vars && _extends({}, ownerState.color === 'default' && {
-    backgroundColor: backgroundColorDefault,
-    color: theme.palette.getContrastText(backgroundColorDefault)
-  }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit'
-  }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
-    backgroundColor: null,
-    color: null
-  }, ownerState.color === 'transparent' && _extends({
-    backgroundColor: 'transparent',
-    color: 'inherit'
-  }, theme.palette.mode === 'dark' && {
-    backgroundImage: 'none'
-  })), theme.vars && _extends({}, ownerState.color === 'default' && {
-    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
-    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
-  }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
-    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
-    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
-  }, {
-    backgroundColor: 'var(--AppBar-background)',
-    color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
-  }, ownerState.color === 'transparent' && {
-    backgroundImage: 'none',
-    backgroundColor: 'transparent',
-    color: 'inherit'
-  }));
+    flexShrink: 0,
+    variants: [{
+      props: {
+        position: 'fixed'
+      },
+      style: {
+        position: 'fixed',
+        zIndex: (theme.vars || theme).zIndex.appBar,
+        top: 0,
+        left: 'auto',
+        right: 0,
+        '@media print': {
+          // Prevent the app bar to be visible on each printed page.
+          position: 'absolute'
+        }
+      }
+    }, {
+      props: {
+        position: 'absolute'
+      },
+      style: {
+        position: 'absolute',
+        zIndex: (theme.vars || theme).zIndex.appBar,
+        top: 0,
+        left: 'auto',
+        right: 0
+      }
+    }, {
+      props: {
+        position: 'sticky'
+      },
+      style: {
+        // ⚠️ sticky is not supported by IE11.
+        position: 'sticky',
+        zIndex: (theme.vars || theme).zIndex.appBar,
+        top: 0,
+        left: 'auto',
+        right: 0
+      }
+    }, {
+      props: {
+        position: 'static'
+      },
+      style: {
+        position: 'static'
+      }
+    }, {
+      props: {
+        position: 'relative'
+      },
+      style: {
+        position: 'relative'
+      }
+    }, {
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        '--AppBar-color': 'inherit'
+      }
+    }, {
+      props: {
+        color: 'default'
+      },
+      style: _extends({
+        '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[100],
+        '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[100])
+      }, theme.applyStyles('dark', {
+        '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[900],
+        '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
+      }))
+    }].concat(_toConsumableArray(Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(function (key) {
+      var _theme$vars2, _theme$vars3;
+      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main && ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette[key].contrastText;
+    }).map(function (color) {
+      var _theme$vars4, _theme$vars5;
+      return {
+        props: {
+          color: color
+        },
+        style: {
+          '--AppBar-background': ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[color].main,
+          '--AppBar-color': ((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette[color].contrastText
+        }
+      };
+    })), [{
+      props: {
+        enableColorOnDark: true
+      },
+      style: {
+        backgroundColor: 'var(--AppBar-background)',
+        color: 'var(--AppBar-color)'
+      }
+    }, {
+      props: {
+        enableColorOnDark: false
+      },
+      style: _extends({
+        backgroundColor: 'var(--AppBar-background)',
+        color: 'var(--AppBar-color)'
+      }, theme.applyStyles('dark', {
+        backgroundColor: theme.vars ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)') : null,
+        color: theme.vars ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)') : null
+      }))
+    }, {
+      props: {
+        color: 'transparent'
+      },
+      style: _extends({
+        '--AppBar-background': 'transparent',
+        '--AppBar-color': 'inherit',
+        backgroundColor: 'var(--AppBar-background)',
+        color: 'var(--AppBar-color)'
+      }, theme.applyStyles('dark', {
+        backgroundImage: 'none'
+      }))
+    }])
+  };
 });
 var AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
   var props = useThemeProps({

package/legacy/Autocomplete/Autocomplete.js

@@ -27,8 +27,7 @@ import { styled, createUseThemeProps } from '../zero-styled';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 var useThemeProps = createUseThemeProps('MuiAutocomplete');
 var useUtilityClasses = function useUtilityClasses(ownerState) {

package/legacy/AvatarGroup/AvatarGroup.js

@@ -9,16 +9,15 @@ import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var SPACINGS = {
   small: -16,
-  medium: null
+  medium: -8
 };
+var useThemeProps = createUseThemeProps('MuiAlert');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {
@@ -34,17 +33,18 @@ var AvatarGroupRoot = styled('div', {
     return _extends(_defineProperty({}, "& .".concat(avatarGroupClasses.avatar), styles.avatar), styles.root);
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  var marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
-  return _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(avatarClasses.root), {
+  var theme = _ref.theme;
+  return _defineProperty({
+    display: 'flex',
+    flexDirection: 'row-reverse'
+  }, "& .".concat(avatarClasses.root), {
     border: "2px solid ".concat((theme.vars || theme).palette.background.default),
     boxSizing: 'content-box',
-    marginLeft: marginValue != null ? marginValue : -8,
+    marginLeft: 'var(--AvatarGroup-spacing, -8px)',
     '&:last-child': {
       marginLeft: 0
     }
-  }), "display", 'flex'), "flexDirection", 'row-reverse');
+  });
 });
 var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
   var _slotProps$additional;
@@ -94,6 +94,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
   var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   var extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : "+".concat(extraAvatars);
   var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
+  var marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -104,6 +105,9 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
       variant: variant
     }, additionalAvatarSlotProps, {
       className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
+      style: _extends({
+        '--AvatarRoot-spacing': marginValue ? "".concat(marginValue, "px") : undefined
+      }, other.style),
       children: extraAvatarsElement
     })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -179,6 +183,10 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * @default 'medium'
    */
   spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */