@mui/material 5.6.4 → 5.8.1

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

package/modern/Alert/Alert.js

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

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/Box/Box.js

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import { createBox } from '@mui/system';
+import PropTypes from 'prop-types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 const defaultTheme = createTheme();

package/modern/ButtonBase/TouchRipple.js

@@ -192,12 +192,12 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
 
     } = options;
 
-    if (event.type === 'mousedown' && ignoringMouseDown.current) {
+    if (event?.type === 'mousedown' && ignoringMouseDown.current) {
       ignoringMouseDown.current = false;
       return;
     }
 
-    if (event.type === 'touchstart') {
+    if (event?.type === 'touchstart') {
       ignoringMouseDown.current = true;
     }
 
@@ -213,7 +213,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 {
@@ -238,7 +238,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     } // Touche devices
 
 
-    if (event.touches) {
+    if (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
@@ -281,7 +281,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?.type === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
       startTimer.current = setTimeout(() => {

package/modern/ButtonGroup/ButtonGroup.js

@@ -56,9 +56,9 @@ const ButtonGroupRoot = styled('div', {
   ownerState
 }) => _extends({
   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 && {
@@ -86,27 +86,27 @@ const ButtonGroupRoot = styled('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: alpha(theme.palette[ownerState.color].main, 0.5)
+      borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : 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.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.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': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
         borderRightColor: 'currentColor'

package/modern/CardActionArea/CardActionArea.js

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

package/modern/Container/Container.js

@@ -1,108 +1,24 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth"];
-import * as React from 'react';
+/* eslint-disable material-ui/mui-name-matches-component-name */
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
-import { getContainerUtilityClass } from './containerClasses';
+import { createContainer } from '@mui/system';
 import capitalize from '../utils/capitalize';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    fixed,
-    disableGutters,
-    maxWidth
-  } = ownerState;
-  const slots = {
-    root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
-  };
-  return composeClasses(slots, getContainerUtilityClass, classes);
-};
-
-const ContainerRoot = styled('div', {
-  name: 'MuiContainer',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
-  }
-})(({
-  theme,
-  ownerState
-}) => _extends({
-  width: '100%',
-  marginLeft: 'auto',
-  boxSizing: 'border-box',
-  marginRight: 'auto',
-  display: 'block'
-}, !ownerState.disableGutters && {
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  [theme.breakpoints.up('sm')]: {
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3)
-  }
-}), ({
-  theme,
-  ownerState
-}) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-  const value = theme.breakpoints.values[breakpoint];
-
-  if (value !== 0) {
-    acc[theme.breakpoints.up(breakpoint)] = {
-      maxWidth: `${value}${theme.breakpoints.unit}`
-    };
-  }
-
-  return acc;
-}, {}), ({
-  theme,
-  ownerState
-}) => _extends({}, ownerState.maxWidth === 'xs' && {
-  [theme.breakpoints.up('xs')]: {
-    maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-  }
-}, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
-  [theme.breakpoints.up(ownerState.maxWidth)]: {
-    maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
-  }
-}));
-const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
-  const props = useThemeProps({
+import styled from '../styles/styled';
+import useThemeProps from '../styles/useThemeProps';
+const Container = createContainer({
+  createStyledComponent: styled('div', {
+    name: 'MuiContainer',
+    slot: 'Root',
+    overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
+      return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
+    }
+  }),
+  useThemeProps: inProps => useThemeProps({
     props: inProps,
     name: 'MuiContainer'
-  });
-
-  const {
-    className,
-    component = 'div',
-    disableGutters = false,
-    fixed = false,
-    maxWidth = 'lg'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const ownerState = _extends({}, props, {
-    component,
-    disableGutters,
-    fixed,
-    maxWidth
-  });
-
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ContainerRoot, _extends({
-    as: component,
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    ref: ref
-  }, other));
+  })
 });
 process.env.NODE_ENV !== "production" ? Container.propTypes
 /* remove-proptypes */
@@ -122,11 +38,6 @@ process.env.NODE_ENV !== "production" ? Container.propTypes
    */
   classes: PropTypes.object,
 
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/modern/CssBaseline/CssBaseline.js

@@ -19,12 +19,12 @@ export const html = (theme, enableColorScheme) => _extends({
   colorScheme: theme.palette.mode
 });
 export const body = theme => _extends({
-  color: theme.palette.text.primary
+  color: (theme.vars || theme).palette.text.primary
 }, theme.typography.body1, {
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: (theme.vars || theme).palette.background.default,
   '@media print': {
     // Save printer ink.
-    backgroundColor: theme.palette.common.white
+    backgroundColor: (theme.vars || theme).palette.common.white
   }
 });
 export const styles = (theme, enableColorScheme = false) => {
@@ -42,7 +42,7 @@ export const styles = (theme, enableColorScheme = false) => {
       // Add support for document.body.requestFullScreen().
       // Other elements, if background transparent, are not supported.
       '&::backdrop': {
-        backgroundColor: theme.palette.background.default
+        backgroundColor: (theme.vars || theme).palette.background.default
       }
     })
   };

package/modern/DialogContent/DialogContent.js

@@ -42,8 +42,8 @@ const DialogContentRoot = styled('div', {
   padding: '20px 24px'
 }, ownerState.dividers ? {
   padding: '16px 24px',
-  borderTop: `1px solid ${theme.palette.divider}`,
-  borderBottom: `1px solid ${theme.palette.divider}`
+  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 } : {
   [`.${dialogTitleClasses.root} + &`]: {
     paddingTop: 0

package/modern/Divider/Divider.js

@@ -47,7 +47,7 @@ const DividerRoot = styled('div', {
   flexShrink: 0,
   borderWidth: 0,
   borderStyle: 'solid',
-  borderColor: theme.palette.divider,
+  borderColor: (theme.vars || theme).palette.divider,
   borderBottomWidth: 'thin'
 }, ownerState.absolute && {
   position: 'absolute',
@@ -55,7 +55,7 @@ const DividerRoot = styled('div', {
   left: 0,
   width: '100%'
 }, ownerState.light && {
-  borderColor: alpha(theme.palette.divider, 0.08)
+  borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
 }, ownerState.variant === 'inset' && {
   marginLeft: 72
 }, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
@@ -82,7 +82,7 @@ const DividerRoot = styled('div', {
   '&::before, &::after': {
     position: 'relative',
     width: '100%',
-    borderTop: `thin solid ${theme.palette.divider}`,
+    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
     top: '50%',
     content: '""',
     transform: 'translateY(50%)'
@@ -97,7 +97,7 @@ const DividerRoot = styled('div', {
     top: '0%',
     left: '50%',
     borderTop: 0,
-    borderLeft: `thin solid ${theme.palette.divider}`,
+    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
     transform: 'translateX(0%)'
   }
 }), ({

package/modern/Drawer/Drawer.js

@@ -46,7 +46,7 @@ const DrawerRoot = styled(Modal, {
 })(({
   theme
 }) => ({
-  zIndex: theme.zIndex.drawer
+  zIndex: (theme.vars || theme).zIndex.drawer
 }));
 const DrawerDockedRoot = styled('div', {
   shouldForwardProp: rootShouldForwardProp,
@@ -75,7 +75,7 @@ const DrawerPaper = styled(Paper, {
   flexDirection: 'column',
   height: '100%',
   flex: '1 0 auto',
-  zIndex: theme.zIndex.drawer,
+  zIndex: (theme.vars || theme).zIndex.drawer,
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
   // temporary style
@@ -103,13 +103,13 @@ const DrawerPaper = styled(Paper, {
   height: 'auto',
   maxHeight: '100%'
 }, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-  borderRight: `1px solid ${theme.palette.divider}`
+  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-  borderBottom: `1px solid ${theme.palette.divider}`
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-  borderLeft: `1px solid ${theme.palette.divider}`
+  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-  borderTop: `1px solid ${theme.palette.divider}`
+  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
 }));
 const oppositeDirection = {
   left: 'right',