@mui/lab 5.0.0-alpha.94 → 5.0.0-alpha.97

package/TimelineDot/TimelineDot.js

@@ -41,23 +41,23 @@ const TimelineDotRoot = styled('span', {
   borderWidth: 2,
   padding: 4,
   borderRadius: '50%',
-  boxShadow: theme.shadows[1],
+  boxShadow: (theme.vars || theme).shadows[1],
   margin: '11.5px 0'
 }, ownerState.variant === 'filled' && _extends({
   borderColor: 'transparent'
 }, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {
-  color: theme.palette.grey[50],
-  backgroundColor: theme.palette.grey[400]
+  color: (theme.vars || theme).palette.grey[50],
+  backgroundColor: (theme.vars || theme).palette.grey[400]
 } : {
-  color: theme.palette[ownerState.color].contrastText,
-  backgroundColor: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].contrastText,
+  backgroundColor: (theme.vars || theme).palette[ownerState.color].main
 })), ownerState.variant === 'outlined' && _extends({
   boxShadow: 'none',
   backgroundColor: 'transparent'
 }, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {
-  borderColor: theme.palette.grey[400]
+  borderColor: (theme.vars || theme).palette.grey[400]
 } : {
-  borderColor: theme.palette[ownerState.color].main
+  borderColor: (theme.vars || theme).palette[ownerState.color].main
 }))));
 const TimelineDot = /*#__PURE__*/React.forwardRef(function TimelineDot(inProps, ref) {
   const props = useThemeProps({

package/TimelineDot/timelineDotClasses.d.ts

@@ -1,24 +1,24 @@
-export interface TimelineDotClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="filled"`. */
-    filled: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `color="grey"` and `variant="filled"`. */
-    filledGrey: string;
-    /** Styles applied to the root element if `color="grey"` and `variant="outlined"`. */
-    outlinedGrey: string;
-    /** Styles applied to the root element if `color="primary"` and `variant="filled"`. */
-    filledPrimary: string;
-    /** Styles applied to the root element if `color="primary"` and `variant="outlined"`. */
-    outlinedPrimary: string;
-    /** Styles applied to the root element if `color="secondary"` and `variant="filled"`. */
-    filledSecondary: string;
-    /** Styles applied to the root element if `color="secondary"` and `variant="outlined"`. */
-    outlinedSecondary: string;
-}
-export declare type TimelineDotClassKey = keyof TimelineDotClasses;
-export declare function getTimelineDotUtilityClass(slot: string): string;
-declare const timelineDotClasses: TimelineDotClasses;
-export default timelineDotClasses;
+export interface TimelineDotClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="filled"`. */
+    filled: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `color="grey"` and `variant="filled"`. */
+    filledGrey: string;
+    /** Styles applied to the root element if `color="grey"` and `variant="outlined"`. */
+    outlinedGrey: string;
+    /** Styles applied to the root element if `color="primary"` and `variant="filled"`. */
+    filledPrimary: string;
+    /** Styles applied to the root element if `color="primary"` and `variant="outlined"`. */
+    outlinedPrimary: string;
+    /** Styles applied to the root element if `color="secondary"` and `variant="filled"`. */
+    filledSecondary: string;
+    /** Styles applied to the root element if `color="secondary"` and `variant="outlined"`. */
+    outlinedSecondary: string;
+}
+export declare type TimelineDotClassKey = keyof TimelineDotClasses;
+export declare function getTimelineDotUtilityClass(slot: string): string;
+declare const timelineDotClasses: TimelineDotClasses;
+export default timelineDotClasses;

package/TimelineItem/timelineItemClasses.d.ts

@@ -1,16 +1,16 @@
-export interface TimelineItemClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `position="left"`. */
-    positionLeft: string;
-    /** Styles applied to the root element if `position="right"`. */
-    positionRight: string;
-    /** Styles applied to the root element if `position="alternate"`. */
-    positionAlternate: string;
-    /** Styles applied to the root element if TimelineOppositeContent isn't provided. */
-    missingOppositeContent: string;
-}
-export declare type TimelineItemClassKey = keyof TimelineItemClasses;
-export declare function getTimelineItemUtilityClass(slot: string): string;
-declare const timelineItemClasses: TimelineItemClasses;
-export default timelineItemClasses;
+export interface TimelineItemClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `position="left"`. */
+    positionLeft: string;
+    /** Styles applied to the root element if `position="right"`. */
+    positionRight: string;
+    /** Styles applied to the root element if `position="alternate"`. */
+    positionAlternate: string;
+    /** Styles applied to the root element if TimelineOppositeContent isn't provided. */
+    missingOppositeContent: string;
+}
+export declare type TimelineItemClassKey = keyof TimelineItemClasses;
+export declare function getTimelineItemUtilityClass(slot: string): string;
+declare const timelineItemClasses: TimelineItemClasses;
+export default timelineItemClasses;

package/TimelineOppositeContent/timelineOppositeContentClasses.d.ts

@@ -1,14 +1,14 @@
-export interface TimelineOppositeContentClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `position="right"`. */
-    positionRight: string;
-    /** Styles applied to the root element if `position="left"`. */
-    positionLeft: string;
-    /** Styles applied to the root element if `position="alternate"`. */
-    positionAlternate: string;
-}
-export declare type TimelineOppositeContentClassKey = keyof TimelineOppositeContentClasses;
-export declare function getTimelineOppositeContentUtilityClass(slot: string): string;
-declare const timelineOppositeContentClasses: TimelineOppositeContentClasses;
-export default timelineOppositeContentClasses;
+export interface TimelineOppositeContentClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `position="right"`. */
+    positionRight: string;
+    /** Styles applied to the root element if `position="left"`. */
+    positionLeft: string;
+    /** Styles applied to the root element if `position="alternate"`. */
+    positionAlternate: string;
+}
+export declare type TimelineOppositeContentClassKey = keyof TimelineOppositeContentClasses;
+export declare function getTimelineOppositeContentUtilityClass(slot: string): string;
+declare const timelineOppositeContentClasses: TimelineOppositeContentClasses;
+export default timelineOppositeContentClasses;

package/TimelineSeparator/timelineSeparatorClasses.d.ts

@@ -1,8 +1,8 @@
-export interface TimelineSeparatorClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type TimelineSeparatorClassKey = keyof TimelineSeparatorClasses;
-export declare function getTimelineSeparatorUtilityClass(slot: string): string;
-declare const timelineSeparatorClasses: TimelineSeparatorClasses;
-export default timelineSeparatorClasses;
+export interface TimelineSeparatorClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type TimelineSeparatorClassKey = keyof TimelineSeparatorClasses;
+export declare function getTimelineSeparatorUtilityClass(slot: string): string;
+declare const timelineSeparatorClasses: TimelineSeparatorClasses;
+export default timelineSeparatorClasses;

package/TreeItem/TreeItem.js

@@ -64,30 +64,30 @@ const StyledTreeItemContent = styled(TreeItemContent, {
   cursor: 'pointer',
   WebkitTapHighlightColor: 'transparent',
   '&:hover': {
-    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'
     }
   },
   [`&.${treeItemClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
     backgroundColor: 'transparent'
   },
   [`&.${treeItemClasses.focused}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${treeItemClasses.selected}`]: {
-    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),
     '&:hover': {
-      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: 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)
       }
     },
     [`&.${treeItemClasses.focused}`]: {
-      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)
     }
   },
   [`& .${treeItemClasses.iconContainer}`]: {

package/TreeItem/treeItemClasses.d.ts

@@ -1,24 +1,24 @@
-export interface TreeItemClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the transition component. */
-    group: string;
-    /** Styles applied to the content element. */
-    content: string;
-    /** State class applied to the content element when expanded. */
-    expanded: string;
-    /** State class applied to the content element when selected. */
-    selected: string;
-    /** State class applied to the content element when focused. */
-    focused: string;
-    /** State class applied to the element when disabled. */
-    disabled: string;
-    /** Styles applied to the tree node icon. */
-    iconContainer: string;
-    /** Styles applied to the label element. */
-    label: string;
-}
-export declare type TreeItemClassKey = keyof TreeItemClasses;
-export declare function getTreeItemUtilityClass(slot: string): string;
-declare const treeItemClasses: TreeItemClasses;
-export default treeItemClasses;
+export interface TreeItemClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the transition component. */
+    group: string;
+    /** Styles applied to the content element. */
+    content: string;
+    /** State class applied to the content element when expanded. */
+    expanded: string;
+    /** State class applied to the content element when selected. */
+    selected: string;
+    /** State class applied to the content element when focused. */
+    focused: string;
+    /** State class applied to the element when disabled. */
+    disabled: string;
+    /** Styles applied to the tree node icon. */
+    iconContainer: string;
+    /** Styles applied to the label element. */
+    label: string;
+}
+export declare type TreeItemClassKey = keyof TreeItemClasses;
+export declare function getTreeItemUtilityClass(slot: string): string;
+declare const treeItemClasses: TreeItemClasses;
+export default treeItemClasses;

package/TreeView/treeViewClasses.d.ts

@@ -1,8 +1,8 @@
-export interface TreeViewClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type TreeViewClassKey = keyof TreeViewClasses;
-export declare function getTreeViewUtilityClass(slot: string): string;
-declare const treeViewClasses: TreeViewClasses;
-export default treeViewClasses;
+export interface TreeViewClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type TreeViewClassKey = keyof TreeViewClasses;
+export declare function getTreeViewUtilityClass(slot: string): string;
+declare const treeViewClasses: TreeViewClasses;
+export default treeViewClasses;

package/YearPicker/YearPicker.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-declare type YearPickerComponent = (<TDate>(props: YearPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
-    propTypes?: any;
-};
-/**
- * @ignore - do not document.
- */
-declare const YearPicker: YearPickerComponent;
-export default YearPicker;
-export declare const yearPickerClasses: {};
-export declare const getYearPickerUtilityClass: (slot: string) => string;
-export declare type YearPickerClasses = any;
-export declare type YearPickerClassKey = any;
-export declare type YearPickerProps<TDate> = Record<any, any>;
+import * as React from 'react';
+declare type YearPickerComponent = (<TDate>(props: YearPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+};
+/**
+ * @ignore - do not document.
+ */
+declare const YearPicker: YearPickerComponent;
+export default YearPicker;
+export declare const yearPickerClasses: {};
+export declare const getYearPickerUtilityClass: (slot: string) => string;
+export declare type YearPickerClasses = any;
+export declare type YearPickerClassKey = any;
+export declare type YearPickerProps<TDate> = Record<any, any>;

package/YearPicker/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './YearPicker';
-export * from './YearPicker';
+export { default } from './YearPicker';
+export * from './YearPicker';

package/index.js

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

package/internal/svg-icons/ArrowDropDown.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/ArrowLeft.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/ArrowRight.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Calendar.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Clock.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/DateRange.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Pen.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Time.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/legacy/LoadingButton/LoadingButton.js

@@ -90,7 +90,7 @@ var LoadingButtonLoadingIndicator = styled('div', {
   }, ownerState.loadingPosition === 'center' && {
     left: '50%',
     transform: 'translate(-50%)',
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
     right: ownerState.size === 'small' ? 10 : 14
   }, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {

package/legacy/TimelineConnector/TimelineConnector.js

@@ -26,7 +26,7 @@ var TimelineConnectorRoot = styled('span', {
   var theme = _ref.theme;
   return {
     width: 2,
-    backgroundColor: theme.palette.grey[400],
+    backgroundColor: (theme.vars || theme).palette.grey[400],
     flexGrow: 1
   };
 });

package/legacy/TimelineDot/TimelineDot.js

@@ -36,23 +36,23 @@ var TimelineDotRoot = styled('span', {
     borderWidth: 2,
     padding: 4,
     borderRadius: '50%',
-    boxShadow: theme.shadows[1],
+    boxShadow: (theme.vars || theme).shadows[1],
     margin: '11.5px 0'
   }, ownerState.variant === 'filled' && _extends({
     borderColor: 'transparent'
   }, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {
-    color: theme.palette.grey[50],
-    backgroundColor: theme.palette.grey[400]
+    color: (theme.vars || theme).palette.grey[50],
+    backgroundColor: (theme.vars || theme).palette.grey[400]
   } : {
-    color: theme.palette[ownerState.color].contrastText,
-    backgroundColor: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
   })), ownerState.variant === 'outlined' && _extends({
     boxShadow: 'none',
     backgroundColor: 'transparent'
   }, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {
-    borderColor: theme.palette.grey[400]
+    borderColor: (theme.vars || theme).palette.grey[400]
   } : {
-    borderColor: theme.palette[ownerState.color].main
+    borderColor: (theme.vars || theme).palette[ownerState.color].main
   })));
 });
 var TimelineDot = /*#__PURE__*/React.forwardRef(function TimelineDot(inProps, ref) {

package/legacy/TreeItem/TreeItem.js

@@ -62,28 +62,28 @@ var StyledTreeItemContent = styled(TreeItemContent, {
     cursor: 'pointer',
     WebkitTapHighlightColor: 'transparent',
     '&:hover': {
-      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'
       }
     }
   }, _defineProperty(_ref4, "&.".concat(treeItemClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
     backgroundColor: 'transparent'
   }), _defineProperty(_ref4, "&.".concat(treeItemClasses.focused), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_ref4, "&.".concat(treeItemClasses.selected), _defineProperty({
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     '&:hover': {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(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: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
       }
     }
   }, "&.".concat(treeItemClasses.focused), {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   })), _defineProperty(_ref4, "& .".concat(treeItemClasses.iconContainer), {
     marginRight: 4,
     width: 15,

package/legacy/index.js

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

package/modern/LoadingButton/LoadingButton.js

@@ -100,7 +100,7 @@ const LoadingButtonLoadingIndicator = styled('div', {
 }, ownerState.loadingPosition === 'center' && {
   left: '50%',
   transform: 'translate(-50%)',
-  color: theme.palette.action.disabled
+  color: (theme.vars || theme).palette.action.disabled
 }, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
   right: ownerState.size === 'small' ? 10 : 14
 }, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {

package/modern/TimelineConnector/TimelineConnector.js

@@ -28,7 +28,7 @@ const TimelineConnectorRoot = styled('span', {
 }) => {
   return {
     width: 2,
-    backgroundColor: theme.palette.grey[400],
+    backgroundColor: (theme.vars || theme).palette.grey[400],
     flexGrow: 1
   };
 });

package/modern/TimelineDot/TimelineDot.js

@@ -41,23 +41,23 @@ const TimelineDotRoot = styled('span', {
   borderWidth: 2,
   padding: 4,
   borderRadius: '50%',
-  boxShadow: theme.shadows[1],
+  boxShadow: (theme.vars || theme).shadows[1],
   margin: '11.5px 0'
 }, ownerState.variant === 'filled' && _extends({
   borderColor: 'transparent'
 }, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {
-  color: theme.palette.grey[50],
-  backgroundColor: theme.palette.grey[400]
+  color: (theme.vars || theme).palette.grey[50],
+  backgroundColor: (theme.vars || theme).palette.grey[400]
 } : {
-  color: theme.palette[ownerState.color].contrastText,
-  backgroundColor: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].contrastText,
+  backgroundColor: (theme.vars || theme).palette[ownerState.color].main
 })), ownerState.variant === 'outlined' && _extends({
   boxShadow: 'none',
   backgroundColor: 'transparent'
 }, ownerState.color !== 'inherit' && _extends({}, ownerState.color === 'grey' ? {
-  borderColor: theme.palette.grey[400]
+  borderColor: (theme.vars || theme).palette.grey[400]
 } : {
-  borderColor: theme.palette[ownerState.color].main
+  borderColor: (theme.vars || theme).palette[ownerState.color].main
 }))));
 const TimelineDot = /*#__PURE__*/React.forwardRef(function TimelineDot(inProps, ref) {
   const props = useThemeProps({

package/modern/TreeItem/TreeItem.js

@@ -64,30 +64,30 @@ const StyledTreeItemContent = styled(TreeItemContent, {
   cursor: 'pointer',
   WebkitTapHighlightColor: 'transparent',
   '&:hover': {
-    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'
     }
   },
   [`&.${treeItemClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
     backgroundColor: 'transparent'
   },
   [`&.${treeItemClasses.focused}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${treeItemClasses.selected}`]: {
-    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),
     '&:hover': {
-      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: 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)
       }
     },
     [`&.${treeItemClasses.focused}`]: {
-      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)
     }
   },
   [`& .${treeItemClasses.iconContainer}`]: {