@mui/material 5.15.15 → 6.0.0-alpha.1

package/legacy/Stepper/Stepper.js

@@ -1,18 +1,18 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getStepperUtilityClass } from './stepperClasses';
 import StepConnector from '../StepConnector';
 import StepperContext from './StepperContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiStepper');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var orientation = ownerState.orientation,
     alternativeLabel = ownerState.alternativeLabel,
@@ -29,18 +29,31 @@ var StepperRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    display: 'flex'
-  }, ownerState.orientation === 'horizontal' && {
-    flexDirection: 'row',
-    alignItems: 'center'
-  }, ownerState.orientation === 'vertical' && {
-    flexDirection: 'column'
-  }, ownerState.alternativeLabel && {
-    alignItems: 'flex-start'
-  });
+})({
+  display: 'flex',
+  variants: [{
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      alignItems: 'flex-start'
+    }
+  }]
 });
 var defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
 var Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {

package/legacy/SvgIcon/SvgIcon.js

@@ -10,8 +10,7 @@ import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
-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 useUtilityClasses = function useUtilityClasses(ownerState) {
   var color = ownerState.color,
     fontSize = ownerState.fontSize,

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -20,8 +20,7 @@ import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to
 // trigger a native scroll.
-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 UNCERTAINTY_THRESHOLD = 3; // px
 
 // This is the part of the drawer displayed on touch start.

package/legacy/Switch/Switch.js

@@ -16,8 +16,7 @@ import capitalize from '../utils/capitalize';
 import SwitchBase from '../internal/SwitchBase';
 import { styled, createUseThemeProps } from '../zero-styled';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
-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('MuiSwitch');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,

package/legacy/Table/Table.js

@@ -119,8 +119,6 @@ process.env.NODE_ENV !== "production" ? Table.propTypes /* remove-proptypes */ =
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
   /**
    * Set the header sticky.
-   *
-   * ⚠️ It doesn't work with IE11.
    * @default false
    */
   stickyHeader: PropTypes.bool,

package/legacy/TablePagination/TablePagination.js

@@ -21,9 +21,8 @@ import Toolbar from '../Toolbar';
 import TablePaginationActions from './TablePaginationActions';
 import useId from '../utils/useId';
 import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var TablePaginationRoot = styled(TableCell, {
   name: 'MuiTablePagination',
   slot: 'Root',

package/legacy/TablePagination/TablePaginationActions.js

@@ -14,8 +14,7 @@ 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";
 var 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;
   var backIconButtonProps = props.backIconButtonProps,

package/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     direction = ownerState.direction,

package/legacy/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";
 var nextItem = function nextItem(list, item) {
   if (list === item) {
     return list.firstChild;

package/legacy/TextField/TextField.js

@@ -18,8 +18,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";
 var variantComponent = {
   standard: Input,
   filled: FilledInput,

package/legacy/Tooltip/Tooltip.js

@@ -25,8 +25,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;
 }

package/legacy/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/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     checked = ownerState.checked,

package/legacy/styles/CssVarsProvider.js

@@ -8,7 +8,6 @@ import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/sy
 import styleFunctionSx from '@mui/system/styleFunctionSx';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
-import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 import THEME_ID from './identifier';
 var defaultTheme = experimental_extendTheme();
 var _createCssVarsProvide = createCssVarsProvider({
@@ -32,8 +31,7 @@ var _createCssVarsProvide = createCssVarsProvider({
         });
       };
       return newTheme;
-    },
-    excludeVariablesFromRoot: excludeVariablesFromRoot
+    }
   }),
   CssVarsProvider = _createCssVarsProvide.CssVarsProvider,
   useColorScheme = _createCssVarsProvide.useColorScheme,

package/legacy/styles/createGetSelector.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import excludeVariablesFromRoot from './excludeVariablesFromRoot';
+export default (function (theme) {
+  return function (colorScheme, css) {
+    if (theme.defaultColorScheme === colorScheme) {
+      if (colorScheme === 'dark') {
+        var excludedVariables = {};
+        excludeVariablesFromRoot(theme.cssVarPrefix).forEach(function (cssVar) {
+          excludedVariables[cssVar] = css[cssVar];
+          delete css[cssVar];
+        });
+        return _defineProperty(_defineProperty({}, "[".concat(theme.attribute, "=\"").concat(String(colorScheme), "\"]"), excludedVariables), theme.colorSchemeSelector, css);
+      }
+      return "".concat(theme.colorSchemeSelector, ", [").concat(theme.attribute, "=\"").concat(String(colorScheme), "\"]");
+    }
+    if (colorScheme) {
+      return "[".concat(theme.attribute, "=\"").concat(String(colorScheme), "\"]");
+    }
+    return theme.colorSchemeSelector;
+  };
+});

package/legacy/styles/experimental_extendTheme.js

@@ -1,14 +1,18 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import deepmerge from '@mui/utils/deepmerge';
-import { unstable_createGetCssVar as systemCreateGetCssVar, unstable_prepareCssVars as prepareCssVars } from '@mui/system';
+import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
+import { createUnarySpacing } from '@mui/system/spacing';
+import { prepareCssVars } from '@mui/system/cssVars';
 import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
 import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, hslToRgb } from '@mui/system/colorManipulator';
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
+import defaultGetSelector from './createGetSelector';
 var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index) {
   if (index === 0) {
     return undefined;
@@ -41,6 +45,21 @@ function setColorChannel(obj, key) {
     obj["".concat(key, "Channel")] = safeColorChannel(toRgb(obj[key]), "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, for example \"12 12 12\") or undefined if you want to remove the channel token."));
   }
 }
+function getSpacingVal(spacingInput) {
+  if (typeof spacingInput === 'number') {
+    return "".concat(spacingInput, "px");
+  }
+  if (typeof spacingInput === 'string') {
+    return spacingInput;
+  }
+  if (typeof spacingInput === 'function') {
+    return getSpacingVal(spacingInput(1));
+  }
+  if (Array.isArray(spacingInput)) {
+    return spacingInput;
+  }
+  return '8px';
+}
 var silent = function silent(fn) {
   try {
     return fn();
@@ -62,7 +81,8 @@ export default function extendTheme() {
     cssVarPrefix = _options$cssVarPrefix === void 0 ? 'mui' : _options$cssVarPrefix,
     _options$shouldSkipGe = options.shouldSkipGeneratingVar,
     shouldSkipGeneratingVar = _options$shouldSkipGe === void 0 ? defaultShouldSkipGeneratingVar : _options$shouldSkipGe,
-    input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"]);
+    getSelector = options.getSelector,
+    input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "getSelector"]);
   var getCssVar = createGetCssVar(cssVarPrefix);
   var _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -75,7 +95,9 @@ export default function extendTheme() {
       }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
     }),
     darkPalette = _createThemeWithoutVa2.palette;
-  var theme = _extends({}, muiTheme, {
+  var theme = _extends({
+    defaultColorScheme: 'light'
+  }, muiTheme, {
     cssVarPrefix: cssVarPrefix,
     getCssVar: getCssVar,
     colorSchemes: _extends({}, colorSchemesInput, {
@@ -99,7 +121,8 @@ export default function extendTheme() {
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
         overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
-    })
+    }),
+    spacing: getSpacingVal(input.spacing)
   });
   Object.keys(theme.colorSchemes).forEach(function (key) {
     var palette = theme.colorSchemes[key].palette;
@@ -317,13 +340,31 @@ export default function extendTheme() {
   }, theme);
   var parserConfig = {
     prefix: cssVarPrefix,
-    shouldSkipGeneratingVar: shouldSkipGeneratingVar
+    shouldSkipGeneratingVar: shouldSkipGeneratingVar,
+    getSelector: getSelector || defaultGetSelector(theme)
   };
   var _prepareCssVars = prepareCssVars(theme, parserConfig),
-    themeVars = _prepareCssVars.vars,
-    generateCssVars = _prepareCssVars.generateCssVars;
-  theme.vars = themeVars;
-  theme.generateCssVars = generateCssVars;
+    vars = _prepareCssVars.vars,
+    generateThemeVars = _prepareCssVars.generateThemeVars,
+    generateStyleSheets = _prepareCssVars.generateStyleSheets;
+  theme.attribute = 'data-mui-color-scheme';
+  theme.colorSchemeSelector = ':root';
+  theme.vars = vars;
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    theme[key] = value;
+  });
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
+  theme.generateSpacing = function generateSpacing() {
+    return createSpacing(input.spacing, createUnarySpacing(this));
+  };
+  theme.getColorSchemeSelector = function (colorScheme) {
+    return "[".concat(theme.attribute, "=\"").concat(colorScheme, "\"] &");
+  };
+  theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = _extends({}, defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {

package/legacy/zero-styled/index.js

@@ -1,4 +1,5 @@
 import useThemeProps from '../styles/useThemeProps';
+export { keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/modern/Accordion/Accordion.js

@@ -16,8 +16,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";
 const useThemeProps = createUseThemeProps('MuiAccordion');
 const useUtilityClasses = ownerState => {
   const {

package/modern/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";
 const useThemeProps = createUseThemeProps('MuiAccordionSummary');
 const useUtilityClasses = ownerState => {
   const {

package/modern/Alert/Alert.js

@@ -19,8 +19,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";
 const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {

package/modern/AppBar/AppBar.js

@@ -7,12 +7,12 @@ 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";
+const useThemeProps = createUseThemeProps('MuiAppBar');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -38,75 +38,125 @@ const AppBarRoot = styled(Paper, {
     return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-  return _extends({
-    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.
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  boxSizing: 'border-box',
+  // Prevent padding issue with the Modal and fixed positioned AppBar.
+  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
     }
-  }, 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'
-  }));
-});
+    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])
+    }))
+  }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main && (theme.vars ?? theme).palette[key].contrastText).map(color => ({
+    props: {
+      color
+    },
+    style: {
+      '--AppBar-background': (theme.vars ?? theme).palette[color].main,
+      '--AppBar-color': (theme.vars ?? 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'
+    }))
+  }]
+}));
 const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/Autocomplete/Autocomplete.js

@@ -28,8 +28,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";
 const useThemeProps = createUseThemeProps('MuiAutocomplete');
 const useUtilityClasses = ownerState => {