@mui/material 5.6.3 → 5.6.4

package/node/Badge/Badge.js

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

package/node/BottomNavigation/BottomNavigation.js

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

package/node/BottomNavigationAction/BottomNavigationAction.js

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

package/node/CircularProgress/CircularProgress.js

@@ -98,7 +98,7 @@ const CircularProgressRoot = (0, _styled.default)('span', {
 }, ownerState.variant === 'determinate' && {
   transition: theme.transitions.create('transform')
 }, ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].main
 }), ({
   ownerState
 }) => ownerState.variant === 'indeterminate' && (0, _system.css)`

package/node/FilledInput/FilledInput.js

@@ -64,6 +64,8 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
   theme,
   ownerState
 }) => {
+  var _theme$palette;
+
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -91,7 +93,7 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     }
   }, !ownerState.disableUnderline && {
     '&:after': {
-      borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+      borderBottom: `2px solid ${(_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.3
+/** @license MUI v5.6.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/locale/index.js

@@ -632,7 +632,7 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.6.3",
+  "version": "5.6.4",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.78",
-    "@mui/system": "^5.6.3",
+    "@mui/base": "5.0.0-alpha.79",
+    "@mui/system": "^5.6.4",
     "@mui/types": "^7.1.3",
     "@mui/utils": "^5.6.1",
     "@types/react-transition-group": "^4.4.4",

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.3
+/** @license MUI v5.6.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -6884,8 +6884,8 @@
   }
 
   const _excluded$2g = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-        _excluded2$d = ["theme"],
-        _excluded3$2 = ["theme"];
+        _excluded2$c = ["theme"],
+        _excluded3$1 = ["theme"];
 
   function isEmpty$1(obj) {
     return Object.keys(obj).length === 0;
@@ -7003,7 +7003,7 @@
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
 
             return stylesArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7020,7 +7020,9 @@
             if (styleOverrides) {
               const resolvedStyleOverrides = {};
               Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-                resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+                resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+                  theme
+                })) : slotStyle;
               });
               return overridesResolver(props, resolvedStyleOverrides);
             }
@@ -7062,7 +7064,7 @@
             let {
               theme: themeInput
             } = _ref2,
-                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$2);
+                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
 
             return styleArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7501,16 +7503,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
    * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
    */
-  const assignNestedKeys = (obj, keys, value) => {
+  const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
     let temp = obj;
     keys.forEach((k, index) => {
       if (index === keys.length - 1) {
-        if (temp && typeof temp === 'object') {
+        if (Array.isArray(temp)) {
+          temp[Number(k)] = value;
+        } else if (temp && typeof temp === 'object') {
           temp[k] = value;
         }
       } else if (temp && typeof temp === 'object') {
         if (!temp[k]) {
-          temp[k] = {};
+          temp[k] = arrayKeys.includes(k) ? [] : {};
         }
 
         temp = temp[k];
@@ -7530,14 +7534,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    */
 
   const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
-    function recurse(object, parentKeys = []) {
+    function recurse(object, parentKeys = [], arrayKeys = []) {
       Object.entries(object).forEach(([key, value]) => {
         if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
           if (value !== undefined && value !== null) {
             if (typeof value === 'object' && Object.keys(value).length > 0) {
-              recurse(value, [...parentKeys, key]);
+              recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
             } else {
-              callback([...parentKeys, key], value, object);
+              callback([...parentKeys, key], value, arrayKeys);
             }
           }
         }
@@ -7604,7 +7608,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const css = {};
     const vars = {};
     const parsedTheme = {};
-    walkObjectDeep(theme, (keys, value) => {
+    walkObjectDeep(theme, (keys, value, arrayKeys) => {
       if (typeof value === 'string' || typeof value === 'number') {
         if (typeof value === 'string' && value.match(/var\(\s*--/)) {
           // for CSS variable, apply prefix or remove basePrefix from the variable
@@ -7622,11 +7626,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           Object.assign(css, {
             [cssVar]: getCssValue(keys, value)
           });
-          assignNestedKeys(vars, keys, `var(${cssVar})`);
+          assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
         }
       }
 
-      assignNestedKeys(parsedTheme, keys, value);
+      assignNestedKeys(parsedTheme, keys, value, arrayKeys);
     }, keys => keys[0] === 'vars' // skip 'vars/*' paths
     );
     return {
@@ -7919,15 +7923,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getCssVar;
   }
 
-  const _excluded$2f = ["colorSchemes"],
-        _excluded2$c = ["colorSchemes"],
-        _excluded3$1 = ["components"];
+  const _excluded$2f = ["colorSchemes", "components"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
-    var _baseTheme$breakpoint;
-
     const {
-      theme: baseTheme = {},
+      theme: defaultTheme = {},
       defaultMode: desisgnSystemMode = 'light',
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -7936,10 +7936,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       shouldSkipGeneratingVar,
       resolveTheme
     } = options;
-    const systemSpacing = createSpacing(baseTheme.spacing);
-    const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
-    if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
+    if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
       console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
     }
 
@@ -7957,7 +7955,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     function CssVarsProvider({
       children,
-      theme: themeProp = {},
+      theme: themeProp = defaultTheme,
       prefix = designSystemPrefix,
       modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
       attribute = DEFAULT_ATTRIBUTE,
@@ -7966,25 +7964,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       disableTransitionOnChange = designSystemTransitionOnChange,
       enableColorScheme = designSystemEnableColorScheme
     }) {
-      const {
-        colorSchemes: baseColorSchemes = {}
-      } = baseTheme,
-            restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded$2f);
+      const hasMounted = React__namespace.useRef(false);
 
       const {
-        colorSchemes: colorSchemesProp = {}
-      } = themeProp,
-            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2$c);
-
-      const hasMounted = React__namespace.useRef(false); // eslint-disable-next-line prefer-const
-
-      let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
-          {
+        colorSchemes = {},
         components = {}
-      } = _deepmerge,
-          mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3$1);
+      } = themeProp,
+            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2f);
 
-      const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -8018,22 +8005,21 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         return colorScheme;
       })();
 
+      let theme = restThemeProp;
       const {
         css: rootCss,
         vars: rootVars,
         parsedTheme
-      } = cssVarsParser(mergedTheme, {
+      } = cssVarsParser(theme, {
         prefix,
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-      mergedTheme = _extends({}, parsedTheme, {
+      theme = _extends({}, parsedTheme, {
         components,
         colorSchemes,
         prefix,
         vars: rootVars,
-        spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-        breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
         getCssVar: createGetCssVar(prefix)
       });
       const styleSheet = {};
@@ -8047,10 +8033,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           basePrefix: designSystemPrefix,
           shouldSkipGeneratingVar
         });
-        mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+        theme.vars = deepmerge(theme.vars, vars);
 
         if (key === resolvedColorScheme) {
-          mergedTheme = _extends({}, mergedTheme, parsedScheme);
+          theme = _extends({}, theme, parsedScheme);
+
+          if (theme.palette) {
+            // assign runtime mode & colorScheme
+            theme.palette.mode = mode;
+            theme.palette.colorScheme = resolvedColorScheme;
+          }
         }
 
         const resolvedDefaultColorScheme = (() => {
@@ -8137,7 +8129,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
           styles: styleSheet
         }), /*#__PURE__*/jsxRuntime_1(ThemeProvider, {
-          theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+          theme: resolveTheme ? resolveTheme(theme) : theme,
           children: children
         })]
       });
@@ -17475,7 +17467,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         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': {
@@ -17500,7 +17492,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       },
       [`&.${accordionClasses$1.disabled}`]: {
-        backgroundColor: theme.palette.action.disabledBackground
+        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
       }
     };
   }, ({
@@ -17509,12 +17501,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) => _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,
@@ -18873,10 +18865,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       padding: theme.spacing(0, 2),
       transition: theme.transitions.create(['min-height', 'background-color'], transition),
       [`&.${accordionSummaryClasses$1.focusVisible}`]: {
-        backgroundColor: theme.palette.action.focus
+        backgroundColor: (theme.vars || theme).palette.action.focus
       },
       [`&.${accordionSummaryClasses$1.disabled}`]: {
-        opacity: theme.palette.action.disabledOpacity
+        opacity: (theme.vars || theme).palette.action.disabledOpacity
       },
       [`&:hover:not(.${accordionSummaryClasses$1.disabled})`]: {
         cursor: 'pointer'
@@ -18914,7 +18906,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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
@@ -23011,7 +23003,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => ({
     [`& .${avatarClasses$1.root}`]: {
-      border: `2px solid ${theme.palette.background.default}`,
+      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
       boxSizing: 'content-box',
       marginLeft: -8,
       '&:last-child': {
@@ -23028,7 +23020,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme
   }) => ({
-    border: `2px solid ${theme.palette.background.default}`,
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -23636,8 +23628,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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,
@@ -23951,7 +23943,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     display: 'flex',
     justifyContent: 'center',
     height: 56,
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   }));
   const BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
     const props = useThemeProps({
@@ -24098,7 +24090,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     padding: '0px 12px',
     minWidth: 80,
     maxWidth: 168,
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     flexDirection: 'column',
     flex: '1'
   }, !ownerState.showLabel && !ownerState.selected && {
@@ -24107,7 +24099,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     paddingTop: 0
   }, {
     [`&.${bottomNavigationActionClasses$1.selected}`]: {
-      color: theme.palette.primary.main
+      color: (theme.vars || theme).palette.primary.main
     }
   }));
   const BottomNavigationActionLabel = styled$1('span', {
@@ -26619,7 +26611,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.variant === 'determinate' && {
     transition: theme.transitions.create('transform')
   }, ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }), ({
     ownerState
   }) => ownerState.variant === 'indeterminate' && css(_t3$2 || (_t3$2 = _$2`
@@ -29367,6 +29359,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
+    var _theme$palette;
+
     const light = theme.palette.mode === 'light';
     const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
     const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -29394,7 +29388,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }, !ownerState.disableUnderline && {
       '&:after': {
-        borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+        borderBottom: `2px solid ${(_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242