@mui/material 5.8.2 → 5.8.5

package/legacy/Slider/Slider.js

@@ -34,7 +34,7 @@ var SliderRoot = styled('span', {
     position: 'relative',
     cursor: 'pointer',
     touchAction: 'none',
-    color: theme.palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].main,
     WebkitTapHighlightColor: 'transparent'
   }, ownerState.orientation === 'horizontal' && _extends({
     height: 4,
@@ -69,7 +69,7 @@ var SliderRoot = styled('span', {
   }, _defineProperty(_extends2, "&.".concat(sliderClasses.disabled), {
     pointerEvents: 'none',
     cursor: 'default',
-    color: theme.palette.grey[400]
+    color: (theme.vars || theme).palette.grey[400]
   }), _defineProperty(_extends2, "&.".concat(sliderClasses.dragging), _defineProperty({}, "& .".concat(sliderClasses.thumb, ", & .").concat(sliderClasses.track), {
     transition: 'none'
   })), _extends2));
@@ -163,8 +163,8 @@ var SliderTrack = styled('span', {
   }, ownerState.track === false && {
     display: 'none'
   }, ownerState.track === 'inverted' && {
-    backgroundColor: color,
-    borderColor: color
+    backgroundColor: theme.vars ? theme.vars.palette.Slider["".concat(ownerState.color, "Track")] : color,
+    borderColor: theme.vars ? theme.vars.palette.Slider["".concat(ownerState.color, "Track")] : color
   });
 });
 process.env.NODE_ENV !== "production" ? SliderTrack.propTypes
@@ -223,7 +223,7 @@ var SliderThumb = styled('span', {
       borderRadius: 'inherit',
       width: '100%',
       height: '100%',
-      boxShadow: theme.shadows[2]
+      boxShadow: (theme.vars || theme).shadows[2]
     }, ownerState.size === 'small' && {
       boxShadow: 'none'
     }),
@@ -239,12 +239,12 @@ var SliderThumb = styled('span', {
       transform: 'translate(-50%, -50%)'
     }
   }, _defineProperty(_extends3, "&:hover, &.".concat(sliderClasses.focusVisible), {
-    boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette[ownerState.color].main, 0.16)),
+    boxShadow: "0px 0px 0px 8px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16)),
     '@media (hover: none)': {
       boxShadow: 'none'
     }
   }), _defineProperty(_extends3, "&.".concat(sliderClasses.active), {
-    boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette[ownerState.color].main, 0.16))
+    boxShadow: "0px 0px 0px 14px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16))
   }), _defineProperty(_extends3, "&.".concat(sliderClasses.disabled), {
     '&:hover': {
       boxShadow: 'none'
@@ -283,31 +283,44 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    top: -10,
     transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
-    backgroundColor: theme.palette.grey[600],
+    backgroundColor: (theme.vars || theme).palette.grey[600],
     borderRadius: 2,
-    color: theme.palette.common.white,
+    color: (theme.vars || theme).palette.common.white,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     padding: '0.25rem 0.75rem'
-  }, ownerState.size === 'small' && {
-    fontSize: theme.typography.pxToRem(12),
-    padding: '0.25rem 0.5rem'
-  }, {
+  }, ownerState.orientation === 'horizontal' && {
+    top: '-10px',
     '&:before': {
       position: 'absolute',
       content: '""',
       width: 8,
       height: 8,
+      transform: 'translate(-50%, 50%) rotate(45deg)',
+      backgroundColor: 'inherit',
       bottom: 0,
-      left: '50%',
+      left: '50%'
+    }
+  }, ownerState.orientation === 'vertical' && {
+    right: '30px',
+    top: '25px',
+    '&:before': {
+      position: 'absolute',
+      content: '""',
+      width: 8,
+      height: 8,
       transform: 'translate(-50%, 50%) rotate(45deg)',
-      backgroundColor: 'inherit'
+      backgroundColor: 'inherit',
+      right: '-20%',
+      top: '25%'
     }
+  }, ownerState.size === 'small' && {
+    fontSize: theme.typography.pxToRem(12),
+    padding: '0.25rem 0.5rem'
   });
 });
 process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes
@@ -350,7 +363,7 @@ var SliderMark = styled('span', {
     left: '50%',
     transform: 'translate(-50%, 1px)'
   }, markActive && {
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
     opacity: 0.8
   });
 });
@@ -382,7 +395,7 @@ var SliderMarkLabel = styled('span', {
       ownerState = _ref7.ownerState,
       markLabelActive = _ref7.markLabelActive;
   return _extends({}, theme.typography.body2, {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     position: 'absolute',
     whiteSpace: 'nowrap'
   }, ownerState.orientation === 'horizontal' && {
@@ -398,7 +411,7 @@ var SliderMarkLabel = styled('span', {
       left: 44
     }
   }, markLabelActive && {
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   });
 });
 process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes
@@ -585,12 +598,14 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
     thumb: PropTypes.object,
     track: PropTypes.object,
     valueLabel: PropTypes.shape({
+      children: PropTypes.element,
       className: PropTypes.string,
       components: PropTypes.shape({
         Root: PropTypes.elementType
       }),
+      open: PropTypes.bool,
       style: PropTypes.object,
-      value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+      value: PropTypes.number,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
     })
   }),

package/legacy/Snackbar/Snackbar.js

@@ -35,17 +35,11 @@ var SnackbarRoot = styled('div', {
 })(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
-
-  var center = _extends({}, !ownerState.isRtl && {
+  var center = {
     left: '50%',
     right: 'auto',
     transform: 'translateX(-50%)'
-  }, ownerState.isRtl && {
-    right: '50%',
-    left: 'auto',
-    transform: 'translateX(50%)'
-  });
-
+  };
   return _extends({
     zIndex: (theme.vars || theme).zIndex.snackbar,
     position: 'fixed',
@@ -66,19 +60,13 @@ var SnackbarRoot = styled('div', {
     top: 24
   } : {
     bottom: 24
-  }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && _extends({}, !ownerState.isRtl && {
+  }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
     left: 24,
     right: 'auto'
-  }, ownerState.isRtl && {
-    right: 24,
-    left: 'auto'
-  }), ownerState.anchorOrigin.horizontal === 'right' && _extends({}, !ownerState.isRtl && {
+  }, ownerState.anchorOrigin.horizontal === 'right' && {
     right: 24,
     left: 'auto'
-  }, ownerState.isRtl && {
-    left: 24,
-    right: 'auto'
-  }))));
+  })));
 });
 var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   var props = useThemeProps({
@@ -126,14 +114,11 @@ var Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       TransitionProps = _objectWithoutProperties(_props$TransitionProp, ["onEnter", "onExited"]),
       other = _objectWithoutProperties(props, ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"]);
 
-  var isRtl = theme.direction === 'rtl';
-
   var ownerState = _extends({}, props, {
     anchorOrigin: {
       vertical: vertical,
       horizontal: horizontal
-    },
-    isRtl: isRtl
+    }
   });
 
   var classes = useUtilityClasses(ownerState);

package/legacy/SnackbarContent/SnackbarContent.js

@@ -34,13 +34,13 @@ var SnackbarContentRoot = styled(Paper, {
   var emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
   var backgroundColor = emphasize(theme.palette.background.default, emphasis);
   return _extends({}, theme.typography.body2, _defineProperty({
-    color: theme.palette.getContrastText(backgroundColor),
-    backgroundColor: backgroundColor,
+    color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(backgroundColor),
+    backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,
     display: 'flex',
     alignItems: 'center',
     flexWrap: 'wrap',
     padding: '6px 16px',
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     flexGrow: 1
   }, theme.breakpoints.up('sm'), {
     flexGrow: 'initial',

package/legacy/SpeedDialAction/SpeedDialAction.js

@@ -41,10 +41,10 @@ var SpeedDialActionFab = styled(Fab, {
       ownerState = _ref.ownerState;
   return _extends({
     margin: 8,
-    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.background.paper,
+    color: (theme.vars || theme).palette.text.secondary,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
     '&:hover': {
-      backgroundColor: emphasize(theme.palette.background.paper, 0.15)
+      backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : emphasize(theme.palette.background.paper, 0.15)
     },
     transition: "".concat(theme.transitions.create('transform', {
       duration: theme.transitions.duration.shorter
@@ -98,10 +98,10 @@ var SpeedDialActionStaticTooltipLabel = styled('span', {
   return _extends({
     position: 'absolute'
   }, theme.typography.body1, {
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[1],
-    color: theme.palette.text.secondary,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    boxShadow: (theme.vars || theme).shadows[1],
+    color: (theme.vars || theme).palette.text.secondary,
     padding: '4px 16px',
     wordBreak: 'keep-all'
   });

package/legacy/Stack/Stack.js

@@ -1,5 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -61,7 +62,7 @@ export var style = function style(_ref) {
   if (ownerState.spacing) {
     var transformer = createUnarySpacing(theme);
     var base = Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
-      if (ownerState.spacing[breakpoint] != null || ownerState.direction[breakpoint] != null) {
+      if (_typeof(ownerState.spacing) === 'object' && ownerState.spacing[breakpoint] != null || _typeof(ownerState.direction) === 'object' && ownerState.direction[breakpoint] != null) {
         acc[breakpoint] = true;
       }
 

package/legacy/StepConnector/StepConnector.js

@@ -57,9 +57,10 @@ var StepConnectorLine = styled('span', {
 })(function (_ref2) {
   var ownerState = _ref2.ownerState,
       theme = _ref2.theme;
+  var borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
   return _extends({
     display: 'block',
-    borderColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
+    borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor
   }, ownerState.orientation === 'horizontal' && {
     borderTopStyle: 'solid',
     borderTopWidth: 1

package/legacy/StepContent/StepContent.js

@@ -38,7 +38,7 @@ var StepContentRoot = styled('div', {
     paddingLeft: 8 + 12,
     // margin + half icon
     paddingRight: 8,
-    borderLeft: "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600])
+    borderLeft: theme.vars ? "1px solid ".concat(theme.vars.palette.StepContent.border) : "1px solid ".concat(theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600])
   }, ownerState.last && {
     borderLeft: 'none'
   });

package/legacy/StepIcon/StepIcon.js

@@ -124,8 +124,9 @@ var StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(inProps, ref) {
       })), /*#__PURE__*/_jsx(StepIconText, {
         className: classes.text,
         x: "12",
-        y: "16",
+        y: "12",
         textAnchor: "middle",
+        dominantBaseline: "central",
         ownerState: ownerState,
         children: icon
       })]

package/legacy/Switch/Switch.js

@@ -95,18 +95,18 @@ var SwitchSwitchBase = styled(SwitchBase, {
     left: 0,
     zIndex: 1,
     // Render above the focus ripple.
-    color: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300],
+    color: theme.vars ? theme.vars.palette.Switch.defaultColor : "".concat(theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]),
     transition: theme.transitions.create(['left', 'transform'], {
       duration: theme.transitions.duration.shortest
     })
   }, _defineProperty(_ref5, "&.".concat(switchClasses.checked), {
     transform: 'translateX(20px)'
   }), _defineProperty(_ref5, "&.".concat(switchClasses.disabled), {
-    color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
+    color: theme.vars ? theme.vars.palette.Switch.defaultDisabledColor : "".concat(theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600])
   }), _defineProperty(_ref5, "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
     opacity: 0.5
   }), _defineProperty(_ref5, "&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track), {
-    opacity: theme.palette.mode === 'light' ? 0.12 : 0.2
+    opacity: theme.vars ? theme.vars.opacity.switchTrackDisabled : "".concat(theme.palette.mode === 'light' ? 0.12 : 0.2)
   }), _defineProperty(_ref5, "& .".concat(switchClasses.input), {
     left: '-100%',
     width: '300%'
@@ -118,24 +118,24 @@ var SwitchSwitchBase = styled(SwitchBase, {
       ownerState = _ref6.ownerState;
   return _extends({
     '&:hover': {
-      backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   }, ownerState.color !== 'default' && (_ref7 = {}, _defineProperty(_ref7, "&.".concat(switchClasses.checked), _defineProperty({
-    color: theme.palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].main,
     '&:hover': {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   }, "&.".concat(switchClasses.disabled), {
-    color: theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)
+    color: theme.vars ? theme.vars.palette.Switch["".concat(ownerState.color, "DisabledColor")] : "".concat(theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55))
   })), _defineProperty(_ref7, "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
-    backgroundColor: theme.palette[ownerState.color].main
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
   }), _ref7));
 });
 var SwitchTrack = styled('span', {
@@ -154,8 +154,8 @@ var SwitchTrack = styled('span', {
     transition: theme.transitions.create(['opacity', 'background-color'], {
       duration: theme.transitions.duration.shortest
     }),
-    backgroundColor: theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white,
-    opacity: theme.palette.mode === 'light' ? 0.38 : 0.3
+    backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : "".concat(theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white),
+    opacity: theme.vars ? theme.vars.opacity.switchTrack : "".concat(theme.palette.mode === 'light' ? 0.38 : 0.3)
   };
 });
 var SwitchThumb = styled('span', {
@@ -167,7 +167,7 @@ var SwitchThumb = styled('span', {
 })(function (_ref9) {
   var theme = _ref9.theme;
   return {
-    boxShadow: theme.shadows[1],
+    boxShadow: (theme.vars || theme).shadows[1],
     backgroundColor: 'currentColor',
     width: 20,
     height: 20,

package/legacy/TableCell/TableCell.js

@@ -42,17 +42,17 @@ var TableCellRoot = styled('td', {
     verticalAlign: 'inherit',
     // Workaround for a rendering bug with spanned columns in Chrome 62.0.
     // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
-    borderBottom: "1px solid\n    ".concat(theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)),
+    borderBottom: theme.vars ? "1px solid ".concat(theme.vars.palette.TableCell.border) : "1px solid\n    ".concat(theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)),
     textAlign: 'left',
     padding: 16
   }, ownerState.variant === 'head' && {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     lineHeight: theme.typography.pxToRem(24),
     fontWeight: theme.typography.fontWeightMedium
   }, ownerState.variant === 'body' && {
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   }, ownerState.variant === 'footer' && {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     lineHeight: theme.typography.pxToRem(21),
     fontSize: theme.typography.pxToRem(12)
   }, ownerState.size === 'small' && _defineProperty({
@@ -83,7 +83,7 @@ var TableCellRoot = styled('td', {
     position: 'sticky',
     top: 0,
     zIndex: 2,
-    backgroundColor: theme.palette.background.default
+    backgroundColor: (theme.vars || theme).palette.background.default
   });
 });
 /**

package/legacy/Tabs/Tabs.js

@@ -438,6 +438,12 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       var tab = children[i];
 
       if (totalSize + tab[clientSize] > containerSize) {
+        // If the first item is longer than the container size, then only scroll
+        // by the container size.
+        if (i === 0) {
+          totalSize = containerSize;
+        }
+
         break;
       }
 

package/legacy/Tooltip/Tooltip.js

@@ -112,7 +112,7 @@ var TooltipTooltip = styled('div', {
   var theme = _ref3.theme,
       ownerState = _ref3.ownerState;
   return _extends({
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.grey.darkChannel, " / 0.92)") : alpha(theme.palette.grey[700], 0.92),
+    backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92),
     borderRadius: (theme.vars || theme).shape.borderRadius,
     color: (theme.vars || theme).palette.common.white,
     fontFamily: theme.typography.fontFamily,

package/legacy/index.js

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

package/legacy/styles/CssVarsProvider.js

@@ -8,11 +8,14 @@ var defaultTheme = experimental_extendTheme();
 
 var _createCssVarsProvide = createCssVarsProvider({
   theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
   defaultColorScheme: {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'md',
+  prefix: 'mui',
   resolveTheme: function resolveTheme(theme) {
     var newTheme = _extends({}, theme, {
       typography: createTypography(theme.palette, theme.typography)

package/legacy/styles/experimental_extendTheme.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { deepmerge } from '@mui/utils';
-import { colorChannel } from '@mui/system';
+import { colorChannel, alpha, darken, lighten, emphasize } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
 import { getOverlayAlpha } from '../Paper/Paper';
 
@@ -15,6 +15,18 @@ var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index)
   return "linear-gradient(rgba(255 255 255 / ".concat(overlay, "), rgba(255 255 255 / ").concat(overlay, "))");
 });
 
+function assignNode(obj, keys) {
+  keys.forEach(function (k) {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+
+function setColor(obj, key, defaultValue) {
+  obj[key] = obj[key] || defaultValue;
+}
+
 export default function extendTheme() {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
@@ -42,16 +54,20 @@ export default function extendTheme() {
       light: _extends({}, colorSchemesInput.light, {
         palette: lightPalette,
         opacity: _extends({
-          placeholder: 0.42,
-          inputTouchBottomLine: 0.42
+          inputPlaceholder: 0.42,
+          inputTouchBottomLine: 0.42,
+          switchTrackDisabled: 0.12,
+          switchTrack: 0.38
         }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
         overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
       }),
       dark: _extends({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: _extends({
-          placeholder: 0.5,
-          inputTouchBottomLine: 0.7
+          inputPlaceholder: 0.5,
+          inputTouchBottomLine: 0.7,
+          switchTrackDisabled: 0.2,
+          switchTrack: 0.3
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
         overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
@@ -61,23 +77,98 @@ export default function extendTheme() {
   Object.keys(theme.colorSchemes).forEach(function (key) {
     var 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';
+    if (key === 'light') {
+      setColor(palette.common, 'background', '#fff');
+      setColor(palette.common, 'onBackground', '#000');
+    } else {
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    } // assign component variables
+
+
+    assignNode(palette, ['AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+
+    if (key === 'light') {
+      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
+      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
+      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)');
+      setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
+      setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
+      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
+      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
+      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)');
+      setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     } else {
-      palette.common.background = palette.common.background || '#fff';
-      palette.common.onBackground = palette.common.onBackground || '#000';
+      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
+      setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
+      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
+      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)');
+      setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
+      setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
+      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
+      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)');
+      setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     }
 
     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];
-    }
-
+    palette.dividerChannel = colorChannel(palette.divider);
     Object.keys(palette).forEach(function (color) {
       var colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
@@ -104,12 +195,16 @@ export default function extendTheme() {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
-      } // Action colors: action.activeChannel
+      } // Action colors: action.active, action.selected
 
 
       if (colors.active) {
         palette[color].activeChannel = colorChannel(colors.active);
       }
+
+      if (colors.selected) {
+        palette[color].selectedChannel = colorChannel(colors.selected);
+      }
     });
   });