@mui/material 5.6.3 → 5.8.0

package/legacy/styles/createMixins.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
-export default function createMixins(breakpoints, spacing, mixins) {
+export default function createMixins(breakpoints, mixins) {
   var _toolbar;
 
   return _extends({

package/legacy/styles/createPalette.js

@@ -278,7 +278,8 @@ export default function createPalette(palette) {
 
   var paletteOutput = deepmerge(_extends({
     // A collection of common colors.
-    common: common,
+    common: _extends({}, common),
+    // prevent mutable object.
     // The palette mode, can be light or dark.
     mode: mode,
     // The colors used to represent primary interface elements for a user.

package/legacy/styles/createTheme.js

@@ -30,7 +30,7 @@ function createTheme() {
   var palette = createPalette(paletteInput);
   var systemTheme = systemCreateTheme(options);
   var muiTheme = deepmerge(systemTheme, {
-    mixins: createMixins(systemTheme.breakpoints, systemTheme.spacing, mixinsInput),
+    mixins: createMixins(systemTheme.breakpoints, mixinsInput),
     palette: palette,
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
     shadows: shadows.slice(),

package/legacy/styles/experimental_extendTheme.js

@@ -3,26 +3,14 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import { deepmerge } from '@mui/utils';
 import { colorChannel } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
-import createPalette from './createPalette';
-export var defaultOpacity = {
-  active: 0.54,
-  hover: 0.04,
-  selected: 0.08,
-  disabled: 0.26,
-  focus: 0.12
-};
-
-function createTheme() {
-  var _colorSchemesInput$li, _colorSchemesInput$da;
+export default function extendTheme() {
+  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$da2;
 
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var _options$colorSchemes = options.colorSchemes,
       colorSchemesInput = _options$colorSchemes === void 0 ? {} : _options$colorSchemes,
-      _options$opacity = options.opacity,
-      opacityInput = _options$opacity === void 0 ? {} : _options$opacity,
-      input = _objectWithoutProperties(options, ["colorSchemes", "opacity"]); // eslint-disable-next-line prefer-const
-
+      input = _objectWithoutProperties(options, ["colorSchemes"]);
 
   var _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
     palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -37,17 +25,47 @@ function createTheme() {
   }),
       darkPalette = _createThemeWithoutVa2.palette;
 
-  colorSchemesInput.light = {
-    palette: lightPalette
-  };
-  colorSchemesInput.dark = {
-    palette: darkPalette
-  };
-  var colorSchemes = {};
-  Object.keys(colorSchemesInput).forEach(function (key) {
-    var palette = createPalette(colorSchemesInput[key].palette);
+  var theme = _extends({}, muiTheme, {
+    colorSchemes: _extends({}, colorSchemesInput, {
+      light: _extends({}, colorSchemesInput.light, {
+        palette: lightPalette,
+        opacity: _extends({
+          placeholder: 0.42,
+          inputTouchBottomLine: 0.42
+        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity)
+      }),
+      dark: _extends({}, colorSchemesInput.dark, {
+        palette: darkPalette,
+        opacity: _extends({
+          placeholder: 0.5,
+          inputTouchBottomLine: 0.7
+        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity)
+      })
+    })
+  });
+
+  Object.keys(theme.colorSchemes).forEach(function (key) {
+    var palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
+
+    if (key === 'dark') {
+      palette.common.background = palette.common.background || '#000';
+      palette.common.onBackground = palette.common.onBackground || '#fff';
+    } else {
+      palette.common.background = palette.common.background || '#fff';
+      palette.common.onBackground = palette.common.onBackground || '#000';
+    }
+
+    palette.common.backgroundChannel = colorChannel(palette.common.background);
+    palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
+    palette.dividerChannel = colorChannel(palette.divider); // special token for Tooltip
+    // TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
+
+    if (!palette.grey.dark) {
+      palette.grey.dark = palette.grey[700];
+    }
+
     Object.keys(palette).forEach(function (color) {
-      var colors = palette[color];
+      var colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
       if (colors.main) {
         palette[color].mainChannel = colorChannel(colors.main);
@@ -61,6 +79,11 @@ function createTheme() {
         palette[color].darkChannel = colorChannel(colors.dark);
       }
 
+      if (colors.contrastText) {
+        palette[color].contrastTextChannel = colorChannel(colors.contrastText);
+      } // Text colors: text.primary, text.secondary
+
+
       if (colors.primary) {
         palette[color].primaryChannel = colorChannel(colors.primary);
       }
@@ -68,29 +91,15 @@ function createTheme() {
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
       }
-
-      if (colors.disabled) {
-        palette[color].disabledChannel = colorChannel(colors.disabled);
-      }
     });
-    colorSchemes[key] = {
-      palette: palette
-    };
   });
 
-  var opacity = _extends({}, defaultOpacity, opacityInput);
-
-  muiTheme.colorSchemes = colorSchemes;
-  muiTheme.opacity = opacity;
-
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
   }
 
-  muiTheme = args.reduce(function (acc, argument) {
+  theme = args.reduce(function (acc, argument) {
     return deepmerge(acc, argument);
-  }, muiTheme);
-  return muiTheme;
-}
-
-export default createTheme;
+  }, theme);
+  return theme;
+}

package/locale/index.d.ts

@@ -1,71 +1,71 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/locale/index.js

@@ -82,26 +82,26 @@ export const arEG = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
-        expandText: 'ظهر العنوان'
+        expandText: 'إظهار المسار'
       }
     },
     MuiTablePagination: {
       defaultProps: {
         getItemAriaLabel: type => {
           if (type === 'first') {
-            return 'امش للصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'امش للصفحة الأخيرة';
+            return 'انتقل إلى الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'امش للصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'امش للصفحة السابقة';
+          return 'انتقل إلى الصفحة السابقة';
         },
         labelRowsPerPage: 'عدد الصفوف في الصفحة:',
         labelDisplayedRows: ({
@@ -121,7 +121,7 @@ export const arEG = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'يتم التحميل…',
+        loadingText: 'جار التحميل...',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }
@@ -136,23 +136,23 @@ export const arEG = {
         'aria-label': 'التنقل عبر الصفحات',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'امش إلى '} صفحة ${page}`;
+            return `${selected ? '' : 'انتقل إلى '} صفحة ${page}`;
           }
 
           if (type === 'first') {
-            return 'امش للصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'امش للصفحة الأخيرة';
+            return 'انتقل إلى الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'امش للصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'امش  للصفحة السابقة';
+          return 'انتقل  إلى الصفحة السابقة';
         }
       }
     }
@@ -162,26 +162,26 @@ export const arSD = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
-        expandText: 'إظهر العنوان'
+        expandText: 'إظهار المسار'
       }
     },
     MuiTablePagination: {
       defaultProps: {
         getItemAriaLabel: type => {
           if (type === 'first') {
-            return 'إذهب الى الصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'إذهب الي الصفحة الأخيرة';
+            return 'انتقل إلى الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'إذهب الى الصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'إذهب الى الصفحة السابقة';
+          return 'انتقل إلى الصفحة السابقة';
         },
         labelRowsPerPage: 'عدد الصفوف في الصفحة:',
         labelDisplayedRows: ({
@@ -201,7 +201,7 @@ export const arSD = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'يتم التحميل…',
+        loadingText: 'جار التحميل...',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }
@@ -216,23 +216,23 @@ export const arSD = {
         'aria-label': 'التنقل عبر الصفحات',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'إذهب إلى '} صفحة ${page}`;
+            return `${selected ? '' : 'انتقل إلى '} صفحة ${page}`;
           }
 
           if (type === 'first') {
-            return 'إذهب الى الصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'إذهب الي الصفحة الأخيرة';
+            return 'انتقل الي الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'إذهب الى الصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'إذهب الى الصفحة السابقة';
+          return 'انتقل إلى الصفحة السابقة';
         }
       }
     }
@@ -619,7 +619,7 @@ export const csCZ = {
         'aria-label': 'Navigace stránkováním',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'Jít na '}${page} stránku`;
+            return `${selected ? '' : 'Jít na '}${page}. stránku`;
           }
 
           if (type === 'first') {

package/modern/Accordion/Accordion.js

@@ -62,7 +62,7 @@ const AccordionRoot = styled(Paper, {
       height: 1,
       content: '""',
       opacity: 1,
-      backgroundColor: theme.palette.divider,
+      backgroundColor: (theme.vars || theme).palette.divider,
       transition: theme.transitions.create(['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
@@ -87,7 +87,7 @@ const AccordionRoot = styled(Paper, {
       }
     },
     [`&.${accordionClasses.disabled}`]: {
-      backgroundColor: theme.palette.action.disabledBackground
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
     }
   };
 }, ({
@@ -96,12 +96,12 @@ const AccordionRoot = styled(Paper, {
 }) => _extends({}, !ownerState.square && {
   borderRadius: 0,
   '&:first-of-type': {
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius
+    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderTopRightRadius: (theme.vars || theme).shape.borderRadius
   },
   '&:last-of-type': {
-    borderBottomLeftRadius: theme.shape.borderRadius,
-    borderBottomRightRadius: theme.shape.borderRadius,
+    borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
     // Fix a rendering issue on Edge
     '@supports (-ms-ime-align: auto)': {
       borderBottomLeftRadius: 0,

package/modern/AccordionSummary/AccordionSummary.js

@@ -46,10 +46,10 @@ const AccordionSummaryRoot = styled(ButtonBase, {
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition),
     [`&.${accordionSummaryClasses.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`&.${accordionSummaryClasses.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     },
     [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
       cursor: 'pointer'
@@ -87,7 +87,7 @@ const AccordionSummaryExpandIconWrapper = styled('div', {
   theme
 }) => ({
   display: 'flex',
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   transform: 'rotate(0deg)',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest

package/modern/Autocomplete/Autocomplete.js

@@ -236,7 +236,7 @@ const AutocompletePopper = styled(Popper, {
   theme,
   ownerState
 }) => _extends({
-  zIndex: theme.zIndex.modal
+  zIndex: (theme.vars || theme).zIndex.modal
 }, ownerState.disablePortal && {
   position: 'absolute'
 }));
@@ -256,7 +256,7 @@ const AutocompleteLoading = styled('div', {
 })(({
   theme
 }) => ({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
 const AutocompleteNoOptions = styled('div', {
@@ -266,7 +266,7 @@ const AutocompleteNoOptions = styled('div', {
 })(({
   theme
 }) => ({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
 const AutocompleteListbox = styled('div', {
@@ -299,30 +299,30 @@ const AutocompleteListbox = styled('div', {
       minHeight: 'auto'
     },
     [`&.${autocompleteClasses.focused}`]: {
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: (theme.vars || theme).palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     '&[aria-disabled="true"]': {
-      opacity: theme.palette.action.disabledOpacity,
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
       pointerEvents: 'none'
     },
     [`&.${autocompleteClasses.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     '&[aria-selected="true"]': {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
       [`&.${autocompleteClasses.focused}`]: {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          backgroundColor: theme.palette.action.selected
+          backgroundColor: (theme.vars || theme).palette.action.selected
         }
       },
       [`&.${autocompleteClasses.focusVisible}`]: {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       }
     }
   }
@@ -334,7 +334,7 @@ const AutocompleteGroupLabel = styled(ListSubheader, {
 })(({
   theme
 }) => ({
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   top: -8
 }));
 const AutocompleteGroupUl = styled('ul', {
@@ -433,7 +433,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     componentName: 'Autocomplete'
   }));
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
-  const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
+  const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false; // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
 
   const ownerState = _extends({}, props, {
     disablePortal,
@@ -456,7 +456,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }, getTagProps(params));
 
     if (renderTags) {
-      startAdornment = renderTags(value, getCustomizedTagProps);
+      startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
       startAdornment = value.map((option, index) => /*#__PURE__*/_jsx(Chip, _extends({
         label: getOptionLabel(option),
@@ -525,10 +525,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         fullWidth: true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
-        InputProps: {
+        InputProps: _extends({
           ref: setAnchorEl,
           className: classes.inputRoot,
-          startAdornment,
+          startAdornment
+        }, (hasClearIcon || hasPopupIcon) && {
           endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
             className: classes.endAdornment,
             ownerState: ownerState,
@@ -548,7 +549,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               children: popupIcon
             })) : null]
           })
-        },
+        }),
         inputProps: _extends({
           className: clsx(classes.input),
           disabled,
@@ -1032,6 +1033,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    *
    * @param {T[]} value The `value` provided to the component.
    * @param {function} getTagProps A tag props getter.
+   * @param {object} ownerState The state of the Autocomplete component.
    * @returns {ReactNode}
    */
   renderTags: PropTypes.func,

package/modern/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/modern/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,