@mui/material 5.8.2 → 5.8.5

package/node/Grid/Grid.js

@@ -11,6 +11,7 @@ exports.generateDirection = generateDirection;
 exports.generateGrid = generateGrid;
 exports.generateRowGap = generateRowGap;
 exports.resolveSpacingClasses = resolveSpacingClasses;
+exports.resolveSpacingStyles = resolveSpacingStyles;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -32,13 +33,15 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+
 var _GridContext = _interopRequireDefault(require("./GridContext"));
 
 var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "lg", "md", "rowSpacing", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"];
+const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -226,26 +229,27 @@ function generateColumnGap({
   return styles;
 }
 
-function resolveSpacingClasses(spacing, container, styles = {}) {
-  // in case of grid item or undefined/null or `spacing` <= 0
-  if (!container || !spacing || spacing <= 0) {
+function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
     return [];
   } // in case of string/number `spacing`
 
 
   if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
-    return [styles[`spacing-xs-${String(spacing)}`] || `spacing-xs-${String(spacing)}`];
+    return [styles[`spacing-xs-${String(spacing)}`]];
   } // in case of object `spacing`
 
 
-  const {
-    xs,
-    sm,
-    md,
-    lg,
-    xl
-  } = spacing;
-  return [Number(xs) > 0 && (styles[`spacing-xs-${String(xs)}`] || `spacing-xs-${String(xs)}`), Number(sm) > 0 && (styles[`spacing-sm-${String(sm)}`] || `spacing-sm-${String(sm)}`), Number(md) > 0 && (styles[`spacing-md-${String(md)}`] || `spacing-md-${String(md)}`), Number(lg) > 0 && (styles[`spacing-lg-${String(lg)}`] || `spacing-lg-${String(lg)}`), Number(xl) > 0 && (styles[`spacing-xl-${String(xl)}`] || `spacing-xl-${String(xl)}`)];
+  const spacingStyles = [];
+  breakpoints.forEach(breakpoint => {
+    const value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
+    }
+  });
+  return spacingStyles;
 } // Default CSS values
 // flex: '0 1 auto',
 // flexDirection: 'row',
@@ -258,20 +262,33 @@ const GridRoot = (0, _styled.default)('div', {
   name: 'MuiGrid',
   slot: 'Root',
   overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
     const {
       container,
       direction,
       item,
-      lg,
-      md,
-      sm,
       spacing,
       wrap,
-      xl,
-      xs,
-      zeroMinWidth
-    } = props.ownerState;
-    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...resolveSpacingClasses(spacing, container, styles), direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], xs !== false && styles[`grid-xs-${String(xs)}`], sm !== false && styles[`grid-sm-${String(sm)}`], md !== false && styles[`grid-md-${String(md)}`], lg !== false && styles[`grid-lg-${String(lg)}`], xl !== false && styles[`grid-xl-${String(xl)}`]];
+      zeroMinWidth,
+      breakpoints
+    } = ownerState;
+    let spacingStyles = []; // in case of grid item
+
+    if (container) {
+      spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
+    }
+
+    const breakpointsStyles = [];
+    breakpoints.forEach(breakpoint => {
+      const value = ownerState[breakpoint];
+
+      if (value) {
+        breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
+      }
+    });
+    return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...spacingStyles, direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], ...breakpointsStyles];
   }
 })(({
   ownerState
@@ -290,23 +307,57 @@ const GridRoot = (0, _styled.default)('div', {
   flexWrap: ownerState.wrap
 }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
 
+function resolveSpacingClasses(spacing, breakpoints) {
+  // undefined/null or `spacing` <= 0
+  if (!spacing || spacing <= 0) {
+    return [];
+  } // in case of string/number `spacing`
+
+
+  if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
+    return [`spacing-xs-${String(spacing)}`];
+  } // in case of object `spacing`
+
+
+  const classes = [];
+  breakpoints.forEach(breakpoint => {
+    const value = spacing[breakpoint];
+
+    if (Number(value) > 0) {
+      const className = `spacing-${breakpoint}-${String(value)}`;
+      classes.push(className);
+    }
+  });
+  return classes;
+}
+
 const useUtilityClasses = ownerState => {
   const {
     classes,
     container,
     direction,
     item,
-    lg,
-    md,
-    sm,
     spacing,
     wrap,
-    xl,
-    xs,
-    zeroMinWidth
+    zeroMinWidth,
+    breakpoints
   } = ownerState;
+  let spacingClasses = []; // in case of grid item
+
+  if (container) {
+    spacingClasses = resolveSpacingClasses(spacing, breakpoints);
+  }
+
+  const breakpointsClasses = [];
+  breakpoints.forEach(breakpoint => {
+    const value = ownerState[breakpoint];
+
+    if (value) {
+      breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
+    }
+  });
   const slots = {
-    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...resolveSpacingClasses(spacing, container), direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
+    root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...spacingClasses, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...breakpointsClasses]
   };
   return (0, _base.unstable_composeClasses)(slots, _gridClasses.getGridUtilityClass, classes);
 };
@@ -316,6 +367,9 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     props: inProps,
     name: 'MuiGrid'
   });
+  const {
+    breakpoints
+  } = (0, _useTheme.default)();
   const props = (0, _system.unstable_extendSxProp)(themeProps);
   const {
     className,
@@ -325,14 +379,9 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     container = false,
     direction = 'row',
     item = false,
-    lg = false,
-    md = false,
     rowSpacing: rowSpacingProp,
-    sm = false,
     spacing = 0,
     wrap = 'wrap',
-    xl = false,
-    xs = false,
     zeroMinWidth = false
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -341,20 +390,26 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   const columnsContext = React.useContext(_GridContext.default); // columns set with default breakpoint unit of 12
 
   const columns = container ? columnsProp || 12 : columnsContext;
+  const breakpointsValues = {};
+  const otherFiltered = (0, _extends2.default)({}, other);
+  breakpoints.keys.forEach(breakpoint => {
+    if (other[breakpoint] != null) {
+      breakpointsValues[breakpoint] = other[breakpoint];
+      delete otherFiltered[breakpoint];
+    }
+  });
   const ownerState = (0, _extends2.default)({}, props, {
     columns,
     container,
     direction,
     item,
-    lg,
-    md,
-    sm,
     rowSpacing,
     columnSpacing,
     wrap,
-    xl,
-    xs,
-    zeroMinWidth
+    zeroMinWidth,
+    spacing
+  }, breakpointsValues, {
+    breakpoints: breakpoints.keys
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContext.default.Provider, {
@@ -364,7 +419,7 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
       className: (0, _clsx.default)(classes.root, className),
       as: component,
       ref: ref
-    }, other))
+    }, otherFiltered))
   });
 });
 process.env.NODE_ENV !== "production" ? Grid.propTypes

package/node/Grow/Grow.js

@@ -50,10 +50,9 @@ const styles = {
 /*
  TODO v6: remove
  Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
- Remove this workaround once the WebKit bug fix is released.
  */
 
-const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
 /**
  * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
  * [Popover](/material-ui/react-popover/) components.

package/node/Hidden/withWidth.js

@@ -19,8 +19,6 @@ var _utils = require("@mui/utils");
 
 var _system = require("@mui/system");
 
-var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
-
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
@@ -141,7 +139,6 @@ const withWidth = (options = {}) => Component => {
     WithWidth.displayName = `WithWidth(${(0, _utils.getDisplayName)(Component)})`;
   }
 
-  (0, _hoistNonReactStatics.default)(WithWidth, Component);
   return WithWidth;
 };
 

package/node/InputBase/InputBase.js

@@ -133,7 +133,7 @@ const InputBaseComponent = (0, _styled.default)('input', {
   const placeholder = (0, _extends2.default)({
     color: 'currentColor'
   }, theme.vars ? {
-    opacity: theme.vars.opacity.placeholder
+    opacity: theme.vars.opacity.inputPlaceholder
   } : {
     opacity: light ? 0.42 : 0.5
   }, {
@@ -145,7 +145,7 @@ const InputBaseComponent = (0, _styled.default)('input', {
     opacity: '0 !important'
   };
   const placeholderVisible = theme.vars ? {
-    opacity: theme.vars.opacity.placeholder
+    opacity: theme.vars.opacity.inputPlaceholder
   } : {
     opacity: light ? 0.42 : 0.5
   };

package/node/LinearProgress/LinearProgress.js

@@ -110,6 +110,10 @@ const getColorShade = (theme, color) => {
     return 'currentColor';
   }
 
+  if (theme.vars) {
+    return theme.vars.palette.LinearProgress[`${color}Bg`];
+  }
+
   return theme.palette.mode === 'light' ? (0, _system.lighten)(theme.palette[color].main, 0.62) : (0, _system.darken)(theme.palette[color].main, 0.5);
 };
 
@@ -202,7 +206,7 @@ const LinearProgressBar1 = (0, _styled.default)('span', {
   top: 0,
   transition: 'transform 0.2s linear',
   transformOrigin: 'left',
-  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main
+  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
 }, ownerState.variant === 'determinate' && {
   transition: `transform .${TRANSITION_DURATION}s linear`
 }, ownerState.variant === 'buffer' && {
@@ -235,7 +239,7 @@ const LinearProgressBar2 = (0, _styled.default)('span', {
   transition: 'transform 0.2s linear',
   transformOrigin: 'left'
 }, ownerState.variant !== 'buffer' && {
-  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main
+  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
 }, ownerState.color === 'inherit' && {
   opacity: 0.3
 }, ownerState.variant === 'buffer' && {

package/node/Link/Link.js

@@ -21,8 +21,6 @@ var _utils = require("@mui/utils");
 
 var _base = require("@mui/base");
 
-var _system = require("@mui/system");
-
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
@@ -37,6 +35,8 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 
 var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
 
+var _getTextDecoration = _interopRequireWildcard(require("./getTextDecoration"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
@@ -45,18 +45,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const colorTransformations = {
-  primary: 'primary.main',
-  textPrimary: 'text.primary',
-  secondary: 'secondary.main',
-  textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-
-const transformDeprecatedColors = color => {
-  return colorTransformations[color] || color;
-};
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -83,7 +71,6 @@ const LinkRoot = (0, _styled.default)(_Typography.default, {
   theme,
   ownerState
 }) => {
-  const color = (0, _system.getPath)(theme, `palette.${transformDeprecatedColors(ownerState.color)}`) || ownerState.color;
   return (0, _extends2.default)({}, ownerState.underline === 'none' && {
     textDecoration: 'none'
   }, ownerState.underline === 'hover' && {
@@ -91,13 +78,18 @@ const LinkRoot = (0, _styled.default)(_Typography.default, {
     '&:hover': {
       textDecoration: 'underline'
     }
-  }, ownerState.underline === 'always' && {
-    textDecoration: 'underline',
-    textDecorationColor: color !== 'inherit' ? (0, _system.alpha)(color, 0.4) : undefined,
+  }, ownerState.underline === 'always' && (0, _extends2.default)({
+    textDecoration: 'underline'
+  }, ownerState.color !== 'inherit' && {
+    textDecorationColor: (0, _getTextDecoration.default)({
+      theme,
+      ownerState
+    })
+  }, {
     '&:hover': {
       textDecorationColor: 'inherit'
     }
-  }, ownerState.component === 'button' && {
+  }), ownerState.component === 'button' && {
     position: 'relative',
     WebkitTapHighlightColor: 'transparent',
     backgroundColor: 'transparent',
@@ -194,7 +186,7 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     ref: handlerRef,
     ownerState: ownerState,
     variant: variant,
-    sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
+    sx: [...(!Object.keys(_getTextDecoration.colorTransformations).includes(color) ? [{
       color
     }] : []), ...(Array.isArray(sx) ? sx : [sx])]
   }, other));

package/node/Link/getTextDecoration.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.colorTransformations = void 0;
+
+var _system = require("@mui/system");
+
+const colorTransformations = {
+  primary: 'primary.main',
+  textPrimary: 'text.primary',
+  secondary: 'secondary.main',
+  textSecondary: 'text.secondary',
+  error: 'error.main'
+};
+exports.colorTransformations = colorTransformations;
+
+const transformDeprecatedColors = color => {
+  return colorTransformations[color] || color;
+};
+
+const getTextDecoration = ({
+  theme,
+  ownerState
+}) => {
+  const transformedColor = transformDeprecatedColors(ownerState.color);
+  const color = (0, _system.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = (0, _system.getPath)(theme, `palette.${transformedColor}Channel`);
+
+  if ('vars' in theme && channelColor) {
+    return `rgba(${channelColor} / 0.4)`;
+  }
+
+  return (0, _system.alpha)(color, 0.4);
+};
+
+var _default = getTextDecoration;
+exports.default = _default;

package/node/Modal/Modal.js

@@ -29,7 +29,7 @@ var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["BackdropComponent", "closeAfterTransition", "children", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted"];
+const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -88,7 +88,7 @@ const ModalBackdrop = (0, _styled.default)(_Backdrop.default, {
  */
 
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _componentsProps$root;
+  var _ref, _components$Root;
 
   const props = (0, _useThemeProps.default)({
     name: 'MuiModal',
@@ -96,8 +96,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   });
   const {
     BackdropComponent = ModalBackdrop,
+    BackdropProps,
     closeAfterTransition = false,
     children,
+    component,
     components = {},
     componentsProps = {},
     disableAutoFocus = false,
@@ -107,7 +109,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus = false,
     disableScrollLock = false,
     hideBackdrop = false,
-    keepMounted = false
+    keepMounted = false,
+    // eslint-disable-next-line react/prop-types
+    theme
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [exited, setExited] = React.useState(true);
@@ -126,16 +130,19 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     exited
   });
   const classes = extendUtilityClasses(ownerState);
+  const Root = (_ref = (_components$Root = components.Root) != null ? _components$Root : component) != null ? _ref : ModalRoot;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalUnstyled.default, (0, _extends2.default)({
     components: (0, _extends2.default)({
-      Root: ModalRoot
+      Root,
+      Backdrop: BackdropComponent
     }, components),
     componentsProps: {
-      root: (0, _extends2.default)({}, componentsProps.root, (!components.Root || !(0, _base.isHostComponent)(components.Root)) && {
-        ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-      })
+      root: (0, _extends2.default)({}, componentsProps.root, !(0, _base.isHostComponent)(Root) && {
+        as: component,
+        theme
+      }),
+      backdrop: (0, _extends2.default)({}, BackdropProps, componentsProps.backdrop)
     },
-    BackdropComponent: BackdropComponent,
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
     ref: ref
@@ -155,6 +162,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `components.Backdrop` instead.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -169,6 +177,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `componentsProps.backdrop` instead.
    */
   BackdropProps: _propTypes.default.object,
 
@@ -188,12 +197,19 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   closeAfterTransition: _propTypes.default.bool,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+
   /**
    * The components used for each slot inside the Modal.
    * Either a string to use a HTML element or a component.
    * @default {}
    */
   components: _propTypes.default.shape({
+    Backdrop: _propTypes.default.elementType,
     Root: _propTypes.default.elementType
   }),
 
@@ -202,6 +218,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.object,
     root: _propTypes.default.object
   }),
 

package/node/OutlinedInput/OutlinedInput.js

@@ -66,25 +66,25 @@ const OutlinedInputRoot = (0, _styled.default)(_InputBase.InputBaseRoot, {
   const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
   return (0, _extends2.default)({
     position: 'relative',
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: theme.palette.text.primary
+      borderColor: (theme.vars || theme).palette.text.primary
     },
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
-        borderColor
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
       }
     },
     [`&.${_outlinedInputClasses.default.focused} .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: theme.palette[ownerState.color].main,
+      borderColor: (theme.vars || theme).palette[ownerState.color].main,
       borderWidth: 2
     },
     [`&.${_outlinedInputClasses.default.error} .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: theme.palette.error.main
+      borderColor: (theme.vars || theme).palette.error.main
     },
     [`&.${_outlinedInputClasses.default.disabled} .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: theme.palette.action.disabled
+      borderColor: (theme.vars || theme).palette.action.disabled
     }
   }, ownerState.startAdornment && {
     paddingLeft: 14
@@ -102,9 +102,12 @@ const NotchedOutlineRoot = (0, _styled.default)(_NotchedOutline.default, {
   overridesResolver: (props, styles) => styles.notchedOutline
 })(({
   theme
-}) => ({
-  borderColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-}));
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return {
+    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+  };
+});
 const OutlinedInputInput = (0, _styled.default)(_InputBase.InputBaseComponent, {
   name: 'MuiOutlinedInput',
   slot: 'Input',
@@ -113,13 +116,25 @@ const OutlinedInputInput = (0, _styled.default)(_InputBase.InputBaseComponent, {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  padding: '16.5px 14px',
+  padding: '16.5px 14px'
+}, !theme.vars && {
   '&:-webkit-autofill': {
     WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
     WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
     caretColor: theme.palette.mode === 'light' ? null : '#fff',
     borderRadius: 'inherit'
   }
+}, theme.vars && {
+  '&:-webkit-autofill': {
+    borderRadius: 'inherit'
+  },
+  [theme.getColorSchemeSelector('dark')]: {
+    '&:-webkit-autofill': {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }
+  }
 }, ownerState.size === 'small' && {
   padding: '8.5px 14px'
 }, ownerState.multiline && {

package/node/Popover/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,7 +19,19 @@ Object.defineProperty(exports, "popoverClasses", {
   }
 });
 
-var _Popover = _interopRequireDefault(require("./Popover"));
+var _Popover = _interopRequireWildcard(require("./Popover"));
+
+Object.keys(_Popover).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Popover[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Popover[key];
+    }
+  });
+});
 
 var _popoverClasses = _interopRequireWildcard(require("./popoverClasses"));
 

package/node/Skeleton/Skeleton.js

@@ -97,7 +97,7 @@ const SkeletonRoot = (0, _styled.default)('span', {
   return (0, _extends2.default)({
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
-    backgroundColor: (0, _styles.alpha)(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
     height: '1.2em'
   }, ownerState.variant === 'text' && {
     marginTop: 0,
@@ -136,7 +136,12 @@ const SkeletonRoot = (0, _styled.default)('span', {
 
       &::after {
         animation: ${waveKeyframe} 1.6s linear 0.5s infinite;
-        background: linear-gradient(90deg, transparent, ${theme.palette.action.hover}, transparent);
+        background: linear-gradient(
+          90deg,
+          transparent,
+          ${(theme.vars || theme).palette.action.hover},
+          transparent
+        );
         content: '';
         position: absolute;
         transform: translateX(-100%); /* Avoid flash during server-side hydration */