@mui/material 5.8.0 → 5.8.3

package/modern/Grow/Grow.js

@@ -24,9 +24,10 @@ const styles = {
     transform: 'none'
   }
 };
-/**
- * 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.
+/*
+ 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);

package/modern/InputLabel/InputLabel.js

@@ -209,6 +209,12 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   shrink: PropTypes.bool,
 
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: PropTypes.oneOf(['normal', 'small']),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/ListItemButton/ListItemButton.js

@@ -150,7 +150,8 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     value: childContext,
     children: /*#__PURE__*/_jsx(ListItemButtonRoot, _extends({
       ref: handleRef,
-      component: component,
+      href: other.href || other.to,
+      component: (other.href || other.to) && component === 'div' ? 'a' : component,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState
     }, other, {
@@ -232,6 +233,11 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
    */
   focusVisibleClassName: PropTypes.string,
 
+  /**
+   * @ignore
+   */
+  href: PropTypes.string,
+
   /**
    * Use to apply selected styling.
    * @default false

package/modern/MenuList/MenuList.js

@@ -89,7 +89,7 @@ function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable,
   return false;
 }
 /**
- * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.
+ * A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/.
  * It's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you
  * use it separately you need to move focus into the component manually. Once
  * the focus is placed inside the component it is fully keyboard accessible.

package/modern/Paper/Paper.js

@@ -13,8 +13,7 @@ import useTheme from '../styles/useTheme';
 import { getPaperUtilityClass } from './paperClasses'; // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
 
 import { jsx as _jsx } from "react/jsx-runtime";
-
-const getOverlayAlpha = elevation => {
+export const getOverlayAlpha = elevation => {
   let alphaValue;
 
   if (elevation < 1) {
@@ -52,17 +51,19 @@ const PaperRoot = styled('div', {
   theme,
   ownerState
 }) => _extends({
-  backgroundColor: theme.palette.background.paper,
-  color: theme.palette.text.primary,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
   transition: theme.transitions.create('box-shadow')
 }, !ownerState.square && {
   borderRadius: theme.shape.borderRadius
 }, ownerState.variant === 'outlined' && {
-  border: `1px solid ${theme.palette.divider}`
+  border: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.variant === 'elevation' && _extends({
-  boxShadow: theme.shadows[ownerState.elevation]
-}, theme.palette.mode === 'dark' && {
+  boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
+}, !theme.vars && theme.palette.mode === 'dark' && {
   backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
+}, theme.vars && {
+  backgroundImage: theme.vars.overlays?.[ownerState.elevation]
 })));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   const props = useThemeProps({

package/modern/Radio/Radio.js

@@ -41,9 +41,9 @@ const RadioRoot = styled(SwitchBase, {
   theme,
   ownerState
 }) => _extends({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   '&:hover': {
-    backgroundColor: alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -51,11 +51,11 @@ const RadioRoot = styled(SwitchBase, {
   }
 }, ownerState.color !== 'default' && {
   [`&.${radioClasses.checked}`]: {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }
 }, {
   [`&.${radioClasses.disabled}`]: {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }));
 

package/modern/Select/SelectInput.js

@@ -311,8 +311,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
 
   const handleKeyDown = event => {
     if (!readOnly) {
-      const validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on MacOS, but it's recommended by
-      // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+      const validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on macOS, but it's recommended by
+      // https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
       'Enter'];
 
       if (validKeys.indexOf(event.key) !== -1) {

package/modern/Slider/Slider.js

@@ -22,11 +22,7 @@ const SliderRoot = styled('span', {
     const {
       ownerState
     } = props;
-    const marks = ownerState.marksProp === true && ownerState.step !== null ? [...Array(Math.floor((ownerState.max - ownerState.min) / ownerState.step) + 1)].map((_, index) => ({
-      value: ownerState.min + ownerState.step * index
-    })) : ownerState.marksProp || [];
-    const marked = marks.length > 0 && marks.some(mark => mark.label);
-    return [styles.root, styles[`color${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
+    return [styles.root, styles[`color${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
   }
 })(({
   theme,
@@ -288,7 +284,6 @@ const 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',
@@ -299,20 +294,34 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   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
 /* remove-proptypes */

package/modern/Tabs/Tabs.js

@@ -147,7 +147,7 @@ const TabsScroller = styled('div', {
   overflowX: 'hidden',
   width: '100%'
 }, ownerState.hideScrollbar && {
-  // Hide dimensionless scrollbar on MacOS
+  // Hide dimensionless scrollbar on macOS
   scrollbarWidth: 'none',
   // Firefox
   '&::-webkit-scrollbar': {
@@ -207,7 +207,7 @@ const TabsScrollbarSize = styled(ScrollbarSize, {
 })({
   overflowX: 'auto',
   overflowY: 'hidden',
-  // Hide dimensionless scrollbar on MacOS
+  // Hide dimensionless scrollbar on macOS
   scrollbarWidth: 'none',
   // Firefox
   '&::-webkit-scrollbar': {

package/modern/index.js

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

package/modern/styles/CssVarsProvider.js

@@ -11,6 +11,9 @@ const {
   getInitColorSchemeScript
 } = createCssVarsProvider({
   theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
   defaultColorScheme: {
     light: 'light',
     dark: 'dark'

package/modern/styles/createMixins.js

@@ -3,8 +3,10 @@ export default function createMixins(breakpoints, mixins) {
   return _extends({
     toolbar: {
       minHeight: 56,
-      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
-        minHeight: 48
+      [breakpoints.up('xs')]: {
+        '@media (orientation: landscape)': {
+          minHeight: 48
+        }
       },
       [breakpoints.up('sm')]: {
         minHeight: 64

package/modern/styles/experimental_extendTheme.js

@@ -5,6 +5,15 @@ const _excluded = ["colorSchemes"],
 import { deepmerge } from '@mui/utils';
 import { colorChannel } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
+import { getOverlayAlpha } from '../Paper/Paper';
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+  if (index === 0) {
+    return undefined;
+  }
+
+  const overlay = getOverlayAlpha(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
 export default function extendTheme(options = {}, ...args) {
   const {
     colorSchemes: colorSchemesInput = {}
@@ -34,14 +43,16 @@ export default function extendTheme(options = {}, ...args) {
         opacity: _extends({
           placeholder: 0.42,
           inputTouchBottomLine: 0.42
-        }, colorSchemesInput.light?.opacity)
+        }, colorSchemesInput.light?.opacity),
+        overlays: colorSchemesInput.light?.overlays || []
       }),
       dark: _extends({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: _extends({
           placeholder: 0.5,
           inputTouchBottomLine: 0.7
-        }, colorSchemesInput.dark?.opacity)
+        }, colorSchemesInput.dark?.opacity),
+        overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
       })
     })
   });
@@ -92,6 +103,11 @@ export default function extendTheme(options = {}, ...args) {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
+      } // Action colors: action.activeChannel
+
+
+      if (colors.active) {
+        palette[color].activeChannel = colorChannel(colors.active);
       }
     });
   });

package/node/Alert/Alert.js

@@ -123,7 +123,9 @@ const AlertMessage = (0, _styled.default)('div', {
   slot: 'Message',
   overridesResolver: (props, styles) => styles.message
 })({
-  padding: '8px 0'
+  padding: '8px 0',
+  minWidth: 0,
+  overflow: 'auto'
 });
 const AlertAction = (0, _styled.default)('div', {
   name: 'MuiAlert',
@@ -191,6 +193,7 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
       className: classes.message,
       children: children
     }), action != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {
+      ownerState: ownerState,
       className: classes.action,
       children: action
     }) : null, action == null && onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {

package/node/ButtonBase/TouchRipple.js

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

package/node/Checkbox/Checkbox.js

@@ -72,10 +72,10 @@ const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  color: theme.palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary
 }, !ownerState.disableRipple && {
   '&:hover': {
-    backgroundColor: (0, _system.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -83,10 +83,10 @@ const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
   }
 }, ownerState.color !== 'default' && {
   [`&.${_checkboxClasses.default.checked}, &.${_checkboxClasses.default.indeterminate}`]: {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   },
   [`&.${_checkboxClasses.default.disabled}`]: {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }));
 const defaultCheckedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.default, {});

package/node/Fab/Fab.js

@@ -207,7 +207,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'default'
    */
-  color: _propTypes.default.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+  color: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']), _propTypes.default.string]),
 
   /**
    * The component used for the root node.

package/node/Grow/Grow.js

@@ -47,9 +47,10 @@ const styles = {
     transform: 'none'
   }
 };
-/**
- * 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.
+/*
+ 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);

package/node/InputLabel/InputLabel.js

@@ -230,6 +230,12 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   shrink: _propTypes.default.bool,
 
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: _propTypes.default.oneOf(['normal', 'small']),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/ListItemButton/ListItemButton.js

@@ -177,7 +177,8 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     value: childContext,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemButtonRoot, (0, _extends2.default)({
       ref: handleRef,
-      component: component,
+      href: other.href || other.to,
+      component: (other.href || other.to) && component === 'div' ? 'a' : component,
       focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState
     }, other, {
@@ -259,6 +260,11 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
    */
   focusVisibleClassName: _propTypes.default.string,
 
+  /**
+   * @ignore
+   */
+  href: _propTypes.default.string,
+
   /**
    * Use to apply selected styling.
    * @default false

package/node/MenuList/MenuList.js

@@ -113,7 +113,7 @@ function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable,
   return false;
 }
 /**
- * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.
+ * A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/.
  * It's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you
  * use it separately you need to move focus into the component manually. Once
  * the focus is placed inside the component it is fully keyboard accessible.

package/node/Paper/Paper.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getOverlayAlpha = exports.default = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -52,6 +52,8 @@ const getOverlayAlpha = elevation => {
   return (alphaValue / 100).toFixed(2);
 };
 
+exports.getOverlayAlpha = getOverlayAlpha;
+
 const useUtilityClasses = ownerState => {
   const {
     square,
@@ -77,19 +79,25 @@ const PaperRoot = (0, _styled.default)('div', {
 })(({
   theme,
   ownerState
-}) => (0, _extends2.default)({
-  backgroundColor: theme.palette.background.paper,
-  color: theme.palette.text.primary,
-  transition: theme.transitions.create('box-shadow')
-}, !ownerState.square && {
-  borderRadius: theme.shape.borderRadius
-}, ownerState.variant === 'outlined' && {
-  border: `1px solid ${theme.palette.divider}`
-}, ownerState.variant === 'elevation' && (0, _extends2.default)({
-  boxShadow: theme.shadows[ownerState.elevation]
-}, theme.palette.mode === 'dark' && {
-  backgroundImage: `linear-gradient(${(0, _system.alpha)('#fff', getOverlayAlpha(ownerState.elevation))}, ${(0, _system.alpha)('#fff', getOverlayAlpha(ownerState.elevation))})`
-})));
+}) => {
+  var _theme$vars$overlays;
+
+  return (0, _extends2.default)({
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    color: (theme.vars || theme).palette.text.primary,
+    transition: theme.transitions.create('box-shadow')
+  }, !ownerState.square && {
+    borderRadius: theme.shape.borderRadius
+  }, ownerState.variant === 'outlined' && {
+    border: `1px solid ${(theme.vars || theme).palette.divider}`
+  }, ownerState.variant === 'elevation' && (0, _extends2.default)({
+    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
+  }, !theme.vars && theme.palette.mode === 'dark' && {
+    backgroundImage: `linear-gradient(${(0, _system.alpha)('#fff', getOverlayAlpha(ownerState.elevation))}, ${(0, _system.alpha)('#fff', getOverlayAlpha(ownerState.elevation))})`
+  }, theme.vars && {
+    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
+  }));
+});
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   const props = (0, _useThemeProps.default)({
     props: inProps,

package/node/Radio/Radio.js

@@ -70,9 +70,9 @@ const RadioRoot = (0, _styled.default)(_SwitchBase.default, {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   '&:hover': {
-    backgroundColor: (0, _system.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -80,11 +80,11 @@ const RadioRoot = (0, _styled.default)(_SwitchBase.default, {
   }
 }, ownerState.color !== 'default' && {
   [`&.${_radioClasses.default.checked}`]: {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }
 }, {
   [`&.${_radioClasses.default.disabled}`]: {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }));
 

package/node/Select/SelectInput.js

@@ -339,8 +339,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
 
   const handleKeyDown = event => {
     if (!readOnly) {
-      const validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on MacOS, but it's recommended by
-      // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+      const validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on macOS, but it's recommended by
+      // https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
       'Enter'];
 
       if (validKeys.indexOf(event.key) !== -1) {

package/node/Slider/Slider.js

@@ -52,11 +52,7 @@ const SliderRoot = (0, _styled.default)('span', {
     const {
       ownerState
     } = props;
-    const marks = ownerState.marksProp === true && ownerState.step !== null ? [...Array(Math.floor((ownerState.max - ownerState.min) / ownerState.step) + 1)].map((_, index) => ({
-      value: ownerState.min + ownerState.step * index
-    })) : ownerState.marksProp || [];
-    const marked = marks.length > 0 && marks.some(mark => mark.label);
-    return [styles.root, styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${(0, _capitalize.default)(ownerState.size)}`], marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
+    return [styles.root, styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
   }
 })(({
   theme,
@@ -318,7 +314,6 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  top: -10,
   transformOrigin: 'bottom center',
   transform: 'translateY(-100%) scale(0)',
   position: 'absolute',
@@ -329,20 +324,34 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   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'
 }));
 exports.SliderValueLabel = SliderValueLabel;
 process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes

package/node/Tabs/Tabs.js

@@ -180,7 +180,7 @@ const TabsScroller = (0, _styled.default)('div', {
   overflowX: 'hidden',
   width: '100%'
 }, ownerState.hideScrollbar && {
-  // Hide dimensionless scrollbar on MacOS
+  // Hide dimensionless scrollbar on macOS
   scrollbarWidth: 'none',
   // Firefox
   '&::-webkit-scrollbar': {
@@ -240,7 +240,7 @@ const TabsScrollbarSize = (0, _styled.default)(_ScrollbarSize.default, {
 })({
   overflowX: 'auto',
   overflowY: 'hidden',
-  // Hide dimensionless scrollbar on MacOS
+  // Hide dimensionless scrollbar on macOS
   scrollbarWidth: 'none',
   // Firefox
   '&::-webkit-scrollbar': {