@mui/material 5.6.4 → 5.8.1

package/modern/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 'انتقل إلى الصفحة السابقة';
         }
       }
     }

package/modern/styles/createMixins.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-export default function createMixins(breakpoints, spacing, mixins) {
+export default function createMixins(breakpoints, mixins) {
   return _extends({
     toolbar: {
       minHeight: 56,
-      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
-        minHeight: 48
+      [breakpoints.up('xs')]: {
+        '@media (orientation: landscape)': {
+          minHeight: 48
+        }
       },
       [breakpoints.up('sm')]: {
         minHeight: 64

package/modern/styles/createPalette.js

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

package/modern/styles/createTheme.js

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

package/modern/styles/experimental_extendTheme.js

@@ -1,34 +1,32 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes", "opacity"],
+const _excluded = ["colorSchemes"],
       _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
 import { colorChannel } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
-import createPalette from './createPalette';
-export const defaultOpacity = {
-  active: 0.54,
-  hover: 0.04,
-  selected: 0.08,
-  disabled: 0.26,
-  focus: 0.12
-};
-
-function createTheme(options = {}, ...args) {
+import { getOverlayAlpha } from '../Paper/Paper';
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+  if (index === 0) {
+    return undefined;
+  }
+
+  const overlay = getOverlayAlpha(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
+export default function extendTheme(options = {}, ...args) {
   const {
-    colorSchemes: colorSchemesInput = {},
-    opacity: opacityInput = {}
+    colorSchemes: colorSchemesInput = {}
   } = options,
-        input = _objectWithoutPropertiesLoose(options, _excluded); // eslint-disable-next-line prefer-const
-
+        input = _objectWithoutPropertiesLoose(options, _excluded);
 
-  let _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
+  const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
     palette: colorSchemesInput.light?.palette
   })),
-      {
+        {
     palette: lightPalette
   } = _createThemeWithoutVa,
-      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
+        muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
 
   const {
     palette: darkPalette
@@ -37,17 +35,50 @@ function createTheme(options = {}, ...args) {
       mode: 'dark'
     }, colorSchemesInput.dark?.palette)
   });
-  colorSchemesInput.light = {
-    palette: lightPalette
-  };
-  colorSchemesInput.dark = {
-    palette: darkPalette
-  };
-  const colorSchemes = {};
-  Object.keys(colorSchemesInput).forEach(key => {
-    const palette = createPalette(colorSchemesInput[key].palette);
+
+  let theme = _extends({}, muiTheme, {
+    colorSchemes: _extends({}, colorSchemesInput, {
+      light: _extends({}, colorSchemesInput.light, {
+        palette: lightPalette,
+        opacity: _extends({
+          placeholder: 0.42,
+          inputTouchBottomLine: 0.42
+        }, colorSchemesInput.light?.opacity),
+        overlays: colorSchemesInput.light?.overlays || []
+      }),
+      dark: _extends({}, colorSchemesInput.dark, {
+        palette: darkPalette,
+        opacity: _extends({
+          placeholder: 0.5,
+          inputTouchBottomLine: 0.7
+        }, colorSchemesInput.dark?.opacity),
+        overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
+      })
+    })
+  });
+
+  Object.keys(theme.colorSchemes).forEach(key => {
+    const 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(color => {
-      const colors = palette[color];
+      const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
       if (colors.main) {
         palette[color].mainChannel = colorChannel(colors.main);
@@ -61,29 +92,25 @@ function createTheme(options = {}, ...args) {
         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);
       }
 
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
-      }
+      } // Action colors: action.activeChannel
 
-      if (colors.disabled) {
-        palette[color].disabledChannel = colorChannel(colors.disabled);
+
+      if (colors.active) {
+        palette[color].activeChannel = colorChannel(colors.active);
       }
     });
-    colorSchemes[key] = {
-      palette
-    };
   });
-
-  const opacity = _extends({}, defaultOpacity, opacityInput);
-
-  muiTheme.colorSchemes = colorSchemes;
-  muiTheme.opacity = opacity;
-  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  return muiTheme;
-}
-
-export default createTheme;
+  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+  return theme;
+}

package/node/Alert/Alert.js

@@ -191,6 +191,7 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
       className: classes.message,
       children: children
     }), action != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {
+      ownerState: ownerState,
       className: classes.action,
       children: action
     }) : null, action == null && onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {

package/node/Autocomplete/Autocomplete.js

@@ -277,7 +277,7 @@ const AutocompletePopper = (0, _styled.default)(_Popper.default, {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  zIndex: theme.zIndex.modal
+  zIndex: (theme.vars || theme).zIndex.modal
 }, ownerState.disablePortal && {
   position: 'absolute'
 }));
@@ -297,7 +297,7 @@ const AutocompleteLoading = (0, _styled.default)('div', {
 })(({
   theme
 }) => ({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
 const AutocompleteNoOptions = (0, _styled.default)('div', {
@@ -307,7 +307,7 @@ const AutocompleteNoOptions = (0, _styled.default)('div', {
 })(({
   theme
 }) => ({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
 const AutocompleteListbox = (0, _styled.default)('div', {
@@ -340,30 +340,30 @@ const AutocompleteListbox = (0, _styled.default)('div', {
       minHeight: 'auto'
     },
     [`&.${_autocompleteClasses.default.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.default.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     '&[aria-selected="true"]': {
-      backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
       [`&.${_autocompleteClasses.default.focused}`]: {
-        backgroundColor: (0, _system.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}))` : (0, _system.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.default.focusVisible}`]: {
-        backgroundColor: (0, _system.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}))` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       }
     }
   }
@@ -375,7 +375,7 @@ const AutocompleteGroupLabel = (0, _styled.default)(_ListSubheader.default, {
 })(({
   theme
 }) => ({
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   top: -8
 }));
 const AutocompleteGroupUl = (0, _styled.default)('ul', {
@@ -478,7 +478,8 @@ 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 = (0, _extends2.default)({}, props, {
     disablePortal,
     focused,
@@ -499,7 +500,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__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
         label: getOptionLabel(option),
@@ -568,10 +569,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         fullWidth: true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
-        InputProps: {
+        InputProps: (0, _extends2.default)({
           ref: setAnchorEl,
           className: classes.inputRoot,
-          startAdornment,
+          startAdornment
+        }, (hasClearIcon || hasPopupIcon) && {
           endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
             className: classes.endAdornment,
             ownerState: ownerState,
@@ -591,7 +593,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               children: popupIcon
             })) : null]
           })
-        },
+        }),
         inputProps: (0, _extends2.default)({
           className: (0, _clsx.default)(classes.input),
           disabled,
@@ -1075,6 +1077,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.default.func,

package/node/Box/Box.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _system = require("@mui/system");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _className = require("../className");
 
 var _styles = require("../styles");

package/node/ButtonBase/TouchRipple.js

@@ -219,12 +219,12 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
 
     } = options;
 
-    if (event.type === 'mousedown' && ignoringMouseDown.current) {
+    if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
       ignoringMouseDown.current = false;
       return;
     }
 
-    if (event.type === 'touchstart') {
+    if ((event == null ? void 0 : event.type) === 'touchstart') {
       ignoringMouseDown.current = true;
     }
 
@@ -240,7 +240,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     let rippleY;
     let rippleSize;
 
-    if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
+    if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
       rippleX = Math.round(rect.width / 2);
       rippleY = Math.round(rect.height / 2);
     } else {
@@ -265,7 +265,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     } // Touche devices
 
 
-    if (event.touches) {
+    if (event != null && event.touches) {
       // check that this isn't another touchstart due to multitouch
       // otherwise we will only clear a single timer when unmounting while two
       // are running
@@ -308,7 +308,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     clearTimeout(startTimer.current); // The touch interaction occurs too quickly.
     // We still want to show ripple effect.
 
-    if (event.type === 'touchend' && startTimerCommit.current) {
+    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
       startTimer.current = setTimeout(() => {

package/node/ButtonGroup/ButtonGroup.js

@@ -82,9 +82,9 @@ const ButtonGroupRoot = (0, _styled.default)('div', {
   ownerState
 }) => (0, _extends2.default)({
   display: 'inline-flex',
-  borderRadius: theme.shape.borderRadius
+  borderRadius: (theme.vars || theme).shape.borderRadius
 }, ownerState.variant === 'contained' && {
-  boxShadow: theme.shadows[2]
+  boxShadow: (theme.vars || theme).shadows[2]
 }, ownerState.disableElevation && {
   boxShadow: 'none'
 }, ownerState.fullWidth && {
@@ -112,27 +112,27 @@ const ButtonGroupRoot = (0, _styled.default)('div', {
       borderBottomRightRadius: 0,
       borderBottomLeftRadius: 0
     }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-      borderRight: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
+      borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
     }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-      borderBottom: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
+      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
     }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      borderColor: (0, _system.alpha)(theme.palette[ownerState.color].main, 0.5)
+      borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.5)
     }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
       borderRightColor: 'transparent'
     }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
       borderBottomColor: 'transparent'
     }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
-      borderRight: `1px solid ${theme.palette.grey[400]}`,
+      borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
       [`&.${_buttonGroupClasses.default.disabled}`]: {
-        borderRight: `1px solid ${theme.palette.action.disabled}`
+        borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
       }
     }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
-      borderBottom: `1px solid ${theme.palette.grey[400]}`,
+      borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
       [`&.${_buttonGroupClasses.default.disabled}`]: {
-        borderBottom: `1px solid ${theme.palette.action.disabled}`
+        borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
       }
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      borderColor: theme.palette[ownerState.color].dark
+      borderColor: (theme.vars || theme).palette[ownerState.color].dark
     }, {
       '&:hover': (0, _extends2.default)({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
         borderRightColor: 'currentColor'

package/node/CardActionArea/CardActionArea.js

@@ -57,13 +57,13 @@ const CardActionAreaRoot = (0, _styled.default)(_ButtonBase.default, {
   textAlign: 'inherit',
   width: '100%',
   [`&:hover .${_cardActionAreaClasses.default.focusHighlight}`]: {
-    opacity: theme.palette.action.hoverOpacity,
+    opacity: (theme.vars || theme).palette.action.hoverOpacity,
     '@media (hover: none)': {
       opacity: 0
     }
   },
   [`&.${_cardActionAreaClasses.default.focusVisible} .${_cardActionAreaClasses.default.focusHighlight}`]: {
-    opacity: theme.palette.action.focusOpacity
+    opacity: (theme.vars || theme).palette.action.focusOpacity
   }
 }));
 const CardActionAreaFocusHighlight = (0, _styled.default)('span', {