@mui/material 5.11.15 → 5.12.0

package/modern/styles/CssVarsProvider.js

@@ -3,12 +3,14 @@ import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_style
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
+import THEME_ID from './identifier';
 const defaultTheme = experimental_extendTheme();
 const {
   CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = createCssVarsProvider({
+  themeId: THEME_ID,
   theme: defaultTheme,
   attribute: 'data-mui-color-scheme',
   modeStorageKey: 'mui-mode',

package/modern/styles/ThemeProvider.js

@@ -1 +1,22 @@
-export { ThemeProvider as default } from '@mui/system';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["theme"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider as SystemThemeProvider } from '@mui/system';
+import THEME_ID from './identifier';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const scopedTheme = themeInput[THEME_ID];
+  return /*#__PURE__*/_jsx(SystemThemeProvider, _extends({}, props, {
+    themeId: scopedTheme ? THEME_ID : undefined,
+    theme: scopedTheme || themeInput
+  }));
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+  theme: PropTypes.object
+} : void 0;

package/modern/styles/identifier.js

@@ -0,0 +1 @@
+export default '$$material';

package/modern/styles/index.js

@@ -1,4 +1,5 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+export { default as THEME_ID } from './identifier';
 export { default as adaptV4Theme } from './adaptV4Theme';
 export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes } from '@mui/system';
 // TODO: Remove this function in v6.

package/modern/styles/styled.js

@@ -1,8 +1,10 @@
 import { createStyled, shouldForwardProp } from '@mui/system';
 import defaultTheme from './defaultTheme';
+import THEME_ID from './identifier';
 export const rootShouldForwardProp = prop => shouldForwardProp(prop) && prop !== 'classes';
 export const slotShouldForwardProp = shouldForwardProp;
 const styled = createStyled({
+  themeId: THEME_ID,
   defaultTheme,
   rootShouldForwardProp
 });

package/modern/styles/useTheme.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { useTheme as useThemeSystem } from '@mui/system';
 import defaultTheme from './defaultTheme';
+import THEME_ID from './identifier';
 export default function useTheme() {
   const theme = useThemeSystem(defaultTheme);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }
-  return theme;
+  return theme[THEME_ID] || theme;
 }

package/modern/styles/useThemeProps.js

@@ -1,5 +1,6 @@
 import { useThemeProps as systemUseThemeProps } from '@mui/system';
 import defaultTheme from './defaultTheme';
+import THEME_ID from './identifier';
 export default function useThemeProps({
   props,
   name
@@ -7,6 +8,7 @@ export default function useThemeProps({
   return systemUseThemeProps({
     props,
     name,
-    defaultTheme
+    defaultTheme,
+    themeId: THEME_ID
   });
 }

package/node/Autocomplete/Autocomplete.js

@@ -466,6 +466,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   }));
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
+  const {
+    onMouseDown: handleInputMouseDown
+  } = getInputProps();
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = (0, _extends2.default)({}, props, {
@@ -556,7 +559,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         InputProps: (0, _extends2.default)({
           ref: setAnchorEl,
           className: classes.inputRoot,
-          startAdornment
+          startAdornment,
+          onClick: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          }
         }, (hasClearIcon || hasPopupIcon) && {
           endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
             className: classes.endAdornment,

package/node/Box/Box.js

@@ -9,8 +9,10 @@ var _system = require("@mui/system");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _className = require("../className");
 var _styles = require("../styles");
+var _identifier = _interopRequireDefault(require("../styles/identifier"));
 const defaultTheme = (0, _styles.createTheme)();
 const Box = (0, _system.createBox)({
+  themeId: _identifier.default,
   defaultTheme,
   defaultClassName: 'MuiBox-root',
   generateClassName: _className.unstable_ClassNameGenerator.generate

package/node/CardActionArea/CardActionArea.js

@@ -38,6 +38,8 @@ const CardActionAreaRoot = (0, _styled.default)(_ButtonBase.default, {
 }) => ({
   display: 'block',
   textAlign: 'inherit',
+  borderRadius: 'inherit',
+  // for Safari to work https://github.com/mui/material-ui/issues/36285.
   width: '100%',
   [`&:hover .${_cardActionAreaClasses.default.focusHighlight}`]: {
     opacity: (theme.vars || theme).palette.action.hoverOpacity,

package/node/GlobalStyles/GlobalStyles.js

@@ -10,12 +10,14 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _system = require("@mui/system");
 var _defaultTheme = _interopRequireDefault(require("../styles/defaultTheme"));
+var _identifier = _interopRequireDefault(require("../styles/identifier"));
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
 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; }
 function GlobalStyles(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.GlobalStyles, (0, _extends2.default)({}, props, {
-    defaultTheme: _defaultTheme.default
+    defaultTheme: _defaultTheme.default,
+    themeId: _identifier.default
   }));
 }
 process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
@@ -26,9 +28,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptyp
   /**
    * The styles you want to apply globally.
    */
-  styles: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
-    __emotion_styles: _propTypes.default.any.isRequired
-  }), _propTypes.default.string, _propTypes.default.bool])
+  styles: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.bool])
 } : void 0;
 var _default = GlobalStyles;
 exports.default = _default;

package/node/Menu/Menu.js

@@ -56,7 +56,7 @@ const MenuPaper = (0, _styled.default)(_Paper.default, {
   overridesResolver: (props, styles) => styles.paper
 })({
   // specZ: The maximum height of a simple menu should be one or more rows less than the view
-  // height. This ensures a tapable area outside of the simple menu with which to dismiss
+  // height. This ensures a tappable area outside of the simple menu with which to dismiss
   // the menu.
   maxHeight: 'calc(100% - 96px)',
   // Add iOS momentum scrolling for iOS < 13.0

package/node/NativeSelect/NativeSelectInput.js

@@ -16,7 +16,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _nativeSelectClasses = _interopRequireWildcard(require("./nativeSelectClasses"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "disabled", "IconComponent", "inputRef", "variant"];
+const _excluded = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 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); }
 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 useUtilityClasses = ownerState => {
@@ -25,10 +25,11 @@ const useUtilityClasses = ownerState => {
     variant,
     disabled,
     multiple,
-    open
+    open,
+    error
   } = ownerState;
   const slots = {
-    select: ['select', variant, disabled && 'disabled', multiple && 'multiple'],
+    select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
     icon: ['icon', `icon${(0, _capitalize.default)(variant)}`, open && 'iconOpen', disabled && 'disabled']
   };
   return (0, _base.unstable_composeClasses)(slots, _nativeSelectClasses.getNativeSelectUtilityClasses, classes);
@@ -96,7 +97,7 @@ const NativeSelectSelect = (0, _styled.default)('select', {
     const {
       ownerState
     } = props;
-    return [styles.select, styles[ownerState.variant], {
+    return [styles.select, styles[ownerState.variant], ownerState.error && styles.error, {
       [`&.${_nativeSelectClasses.default.multiple}`]: styles.multiple
     }];
   }
@@ -143,6 +144,7 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
   const {
       className,
       disabled,
+      error,
       IconComponent,
       inputRef,
       variant = 'standard'
@@ -150,7 +152,8 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
     disabled,
-    variant
+    variant,
+    error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -185,6 +188,10 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
    * If `true`, the select is disabled.
    */
   disabled: _propTypes.default.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   */
+  error: _propTypes.default.bool,
   /**
    * The icon that displays the arrow.
    */

package/node/NativeSelect/nativeSelectClasses.js

@@ -11,6 +11,6 @@ var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityCl
 function getNativeSelectUtilityClasses(slot) {
   return (0, _generateUtilityClass.default)('MuiNativeSelect', slot);
 }
-const nativeSelectClasses = (0, _utils.unstable_generateUtilityClasses)('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+const nativeSelectClasses = (0, _utils.unstable_generateUtilityClasses)('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 var _default = nativeSelectClasses;
 exports.default = _default;

package/node/Popper/Popper.js

@@ -139,10 +139,6 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * If `true`, the component is shown.
    */
   open: _propTypes.default.bool.isRequired,
-  /**
-   * @ignore
-   */
-  ownerState: _propTypes.default.any,
   /**
    * Popper placement.
    * @default 'bottom'

package/node/Select/Select.js

@@ -23,7 +23,6 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _StyledInput, _StyledFilledInput;
 const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 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); }
 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; }
@@ -76,21 +75,26 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   const fcs = (0, _formControlState.default)({
     props,
     muiFormControl,
-    states: ['variant']
+    states: ['variant', 'error']
   });
   const variant = fcs.variant || variantProp;
-  const InputComponent = input || {
-    standard: _StyledInput || (_StyledInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInput, {})),
-    outlined: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOutlinedInput, {
-      label: label
-    }),
-    filled: _StyledFilledInput || (_StyledFilledInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFilledInput, {}))
-  }[variant];
   const ownerState = (0, _extends2.default)({}, props, {
     variant,
     classes: classesProp
   });
   const classes = useUtilityClasses(ownerState);
+  const InputComponent = input || {
+    standard: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInput, {
+      ownerState: ownerState
+    }),
+    outlined: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOutlinedInput, {
+      label: label,
+      ownerState: ownerState
+    }),
+    filled: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFilledInput, {
+      ownerState: ownerState
+    })
+  }[variant];
   const inputComponentRef = (0, _useForkRef.default)(ref, InputComponent.ref);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, (0, _extends2.default)({
@@ -99,6 +103,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       inputComponent,
       inputProps: (0, _extends2.default)({
         children,
+        error: fcs.error,
         IconComponent,
         variant,
         type: undefined,
@@ -232,7 +237,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */
   onChange: _propTypes.default.func,
   /**
    * Callback fired when the component requests to be closed.
-   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapes).
+   * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapses).
    *
    * @param {object} event The event source of the callback.
    */

package/node/Select/SelectInput.js

@@ -24,7 +24,7 @@ var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
-const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 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); }
 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 SelectSelect = (0, _styled.default)('div', {
@@ -40,6 +40,8 @@ const SelectSelect = (0, _styled.default)('div', {
       [`&.${_selectClasses.default.select}`]: styles.select
     }, {
       [`&.${_selectClasses.default.select}`]: styles[ownerState.variant]
+    }, {
+      [`&.${_selectClasses.default.error}`]: styles.error
     }, {
       [`&.${_selectClasses.default.multiple}`]: styles.multiple
     }];
@@ -97,10 +99,11 @@ const useUtilityClasses = ownerState => {
     variant,
     disabled,
     multiple,
-    open
+    open,
+    error
   } = ownerState;
   const slots = {
-    select: ['select', variant, disabled && 'disabled', multiple && 'multiple'],
+    select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
     icon: ['icon', `icon${(0, _capitalize.default)(variant)}`, open && 'iconOpen', disabled && 'disabled'],
     nativeInput: ['nativeInput']
   };
@@ -122,6 +125,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       defaultValue,
       disabled,
       displayEmpty,
+      error = false,
       IconComponent,
       inputRef: inputRefProp,
       labelId,
@@ -427,7 +431,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const ownerState = (0, _extends2.default)({}, props, {
     variant,
     value,
-    open
+    open,
+    error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -457,6 +462,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         children: "\u200B"
       })) : display
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectNativeInput, (0, _extends2.default)({
+      "aria-invalid": error,
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,
       ref: inputRef,
@@ -548,6 +554,10 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * If `true`, the selected item is displayed even if its value is empty.
    */
   displayEmpty: _propTypes.default.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   */
+  error: _propTypes.default.bool,
   /**
    * The icon that displays the arrow.
    */

package/node/Select/selectClasses.js

@@ -11,6 +11,6 @@ var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityCl
 function getSelectUtilityClasses(slot) {
   return (0, _generateUtilityClass.default)('MuiSelect', slot);
 }
-const selectClasses = (0, _utils.unstable_generateUtilityClasses)('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+const selectClasses = (0, _utils.unstable_generateUtilityClasses)('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 var _default = selectClasses;
 exports.default = _default;

package/node/Slider/Slider.js

@@ -277,7 +277,7 @@ const StyledSliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
   ownerState
 }) => (0, _extends2.default)({
   [`&.${_sliderClasses.default.valueLabelOpen}`]: {
-    transform: 'translateY(-100%) scale(1)'
+    transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(1)`
   },
   zIndex: 1,
   whiteSpace: 'nowrap'
@@ -286,7 +286,7 @@ const StyledSliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  transform: 'translateY(-100%) scale(0)',
+  transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(0)`,
   position: 'absolute',
   backgroundColor: (theme.vars || theme).palette.grey[600],
   borderRadius: 2,
@@ -309,18 +309,18 @@ const StyledSliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
     left: '50%'
   }
 }, ownerState.orientation === 'vertical' && {
-  right: '30px',
-  top: '24px',
+  right: ownerState.size === 'small' ? '20px' : '30px',
+  top: '50%',
   transformOrigin: 'right center',
   '&:before': {
     position: 'absolute',
     content: '""',
     width: 8,
     height: 8,
-    transform: 'translate(-50%, 50%) rotate(45deg)',
+    transform: 'translate(-50%, -50%) rotate(45deg)',
     backgroundColor: 'inherit',
     right: '-20%',
-    top: '25%'
+    top: '50%'
   }
 }, ownerState.size === 'small' && {
   fontSize: theme.typography.pxToRem(12),

package/node/Tabs/Tabs.js

@@ -426,7 +426,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     moveTabsScroll(getScrollSize());
   };
 
-  // TODO Remove <ScrollbarSize /> as browser support for hidding the scrollbar
+  // TODO Remove <ScrollbarSize /> as browser support for hiding the scrollbar
   // with CSS improves.
   const handleScrollbarSizeChange = React.useCallback(scrollbarWidth => {
     setScrollerStyle({

package/node/Toolbar/Toolbar.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */
   // ----------------------------------------------------------------------
   /**
    * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
-   * The Toolbar is a flex container, allowing flex item properites to be used to lay out the children.
+   * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
    */
   children: _propTypes.default.node,
   /**

package/node/Unstable_Grid2/Grid2.js

@@ -11,6 +11,7 @@ var _styles = require("../styles");
 const Grid2 = (0, _Unstable_Grid.createGrid)({
   createStyledComponent: (0, _styles.styled)('div', {
     name: 'MuiGrid2',
+    slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',

package/node/darkScrollbar/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = darkScrollbar;
-// track, thumb and active are derieved from macOS 10.15.7
+// track, thumb and active are derived from macOS 10.15.7
 const scrollBar = {
   track: '#2b2b2b',
   thumb: '#6b6b6b',

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.15
+ * @mui/material v5.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/CssVarsProvider.js

@@ -10,12 +10,14 @@ var _system = require("@mui/system");
 var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
+var _identifier = _interopRequireDefault(require("./identifier"));
 const defaultTheme = (0, _experimental_extendTheme.default)();
 const {
   CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = (0, _system.unstable_createCssVarsProvider)({
+  themeId: _identifier.default,
   theme: defaultTheme,
   attribute: 'data-mui-color-scheme',
   modeStorageKey: 'mui-mode',

package/node/styles/ThemeProvider.js

@@ -1,12 +1,31 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _system.ThemeProvider;
-  }
-});
-var _system = require("@mui/system");
+exports.default = ThemeProvider;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _system = require("@mui/system");
+var _identifier = _interopRequireDefault(require("./identifier"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["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); }
+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; }
+function ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const scopedTheme = themeInput[_identifier.default];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.ThemeProvider, (0, _extends2.default)({}, props, {
+    themeId: scopedTheme ? _identifier.default : undefined,
+    theme: scopedTheme || themeInput
+  }));
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+  theme: _propTypes.default.object
+} : void 0;

package/node/styles/identifier.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = '$$material';
+exports.default = _default;

package/node/styles/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   experimental_sx: true,
+  THEME_ID: true,
   adaptV4Theme: true,
   hexToRgb: true,
   rgbToHex: true,
@@ -50,6 +51,12 @@ Object.defineProperty(exports, "StyledEngineProvider", {
     return _system.StyledEngineProvider;
   }
 });
+Object.defineProperty(exports, "THEME_ID", {
+  enumerable: true,
+  get: function () {
+    return _identifier.default;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {
@@ -268,6 +275,7 @@ Object.defineProperty(exports, "withTheme", {
   }
 });
 var _utils = require("@mui/utils");
+var _identifier = _interopRequireDefault(require("./identifier"));
 var _adaptV4Theme = _interopRequireDefault(require("./adaptV4Theme"));
 var _system = require("@mui/system");
 var _createTheme = _interopRequireWildcard(require("./createTheme"));

package/node/styles/styled.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.slotShouldForwardProp = exports.rootShouldForwardProp = exports.default = void 0;
 var _system = require("@mui/system");
 var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
+var _identifier = _interopRequireDefault(require("./identifier"));
 const rootShouldForwardProp = prop => (0, _system.shouldForwardProp)(prop) && prop !== 'classes';
 exports.rootShouldForwardProp = rootShouldForwardProp;
 const slotShouldForwardProp = _system.shouldForwardProp;
 exports.slotShouldForwardProp = slotShouldForwardProp;
 const styled = (0, _system.createStyled)({
+  themeId: _identifier.default,
   defaultTheme: _defaultTheme.default,
   rootShouldForwardProp
 });

package/node/styles/useTheme.js

@@ -8,6 +8,7 @@ exports.default = useTheme;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
+var _identifier = _interopRequireDefault(require("./identifier"));
 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); }
 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; }
 function useTheme() {
@@ -16,5 +17,5 @@ function useTheme() {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }
-  return theme;
+  return theme[_identifier.default] || theme;
 }