@mui/material 5.11.14 → 5.11.16

package/legacy/Select/SelectInput.js

@@ -28,7 +28,7 @@ var SelectSelect = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
     return [// Win specificity over the input base
-    _defineProperty({}, "&.".concat(selectClasses.select), styles.select), _defineProperty({}, "&.".concat(selectClasses.select), styles[ownerState.variant]), _defineProperty({}, "&.".concat(selectClasses.multiple), styles.multiple)];
+    _defineProperty({}, "&.".concat(selectClasses.select), styles.select), _defineProperty({}, "&.".concat(selectClasses.select), styles[ownerState.variant]), _defineProperty({}, "&.".concat(selectClasses.error), styles.error), _defineProperty({}, "&.".concat(selectClasses.multiple), styles.multiple)];
   }
 })(nativeSelectSelectStyles, _defineProperty({}, "&.".concat(selectClasses.select), {
   height: 'auto',
@@ -81,9 +81,10 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     variant = ownerState.variant,
     disabled = ownerState.disabled,
     multiple = ownerState.multiple,
-    open = ownerState.open;
+    open = ownerState.open,
+    error = ownerState.error;
   var slots = {
-    select: ['select', variant, disabled && 'disabled', multiple && 'multiple'],
+    select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
     icon: ['icon', "icon".concat(capitalize(variant)), open && 'iconOpen', disabled && 'disabled'],
     nativeInput: ['nativeInput']
   };
@@ -104,6 +105,8 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     defaultValue = props.defaultValue,
     disabled = props.disabled,
     displayEmpty = props.displayEmpty,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error,
     IconComponent = props.IconComponent,
     inputRefProp = props.inputRef,
     labelId = props.labelId,
@@ -126,7 +129,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     valueProp = props.value,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'standard' : _props$variant,
-    other = _objectWithoutProperties(props, ["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"]);
+    other = _objectWithoutProperties(props, ["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"]);
   var _useControlled = useControlled({
       controlled: valueProp,
       default: defaultValue,
@@ -435,7 +438,8 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
   var ownerState = _extends({}, props, {
     variant: variant,
     value: value,
-    open: open
+    open: open,
+    error: error
   });
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -465,6 +469,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
         children: "\u200B"
       })) : display
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
+      "aria-invalid": error,
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,
       ref: inputRef,
@@ -556,6 +561,10 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * If `true`, the selected item is displayed even if its value is empty.
    */
   displayEmpty: PropTypes.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   */
+  error: PropTypes.bool,
   /**
    * The icon that displays the arrow.
    */

package/legacy/Select/selectClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiSelect', slot);
 }
-var selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+var selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 export default selectClasses;

package/legacy/Slider/Slider.js

@@ -268,13 +268,13 @@ var StyledSliderValueLabel = styled(SliderValueLabel, {
   var theme = _ref5.theme,
     ownerState = _ref5.ownerState;
   return _extends((_extends4 = {}, _defineProperty(_extends4, "&.".concat(sliderClasses.valueLabelOpen), {
-    transform: 'translateY(-100%) scale(1)'
+    transform: "".concat(ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)', " scale(1)")
   }), _defineProperty(_extends4, "zIndex", 1), _defineProperty(_extends4, "whiteSpace", 'nowrap'), _extends4), theme.typography.body2, {
     fontWeight: 500,
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    transform: 'translateY(-100%) scale(0)',
+    transform: "".concat(ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)', " scale(0)"),
     position: 'absolute',
     backgroundColor: (theme.vars || theme).palette.grey[600],
     borderRadius: 2,
@@ -297,18 +297,18 @@ var StyledSliderValueLabel = styled(SliderValueLabel, {
       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/legacy/Stack/Stack.js

@@ -49,6 +49,16 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
 } : void 0;
 export default Stack;

package/legacy/Unstable_Grid2/Grid2.js

@@ -4,6 +4,7 @@ import { styled, useThemeProps as _useThemeProps } from '../styles';
 var Grid2 = createGrid2({
   createStyledComponent: styled('div', {
     name: 'MuiGrid2',
+    slot: 'Root',
     overridesResolver: function overridesResolver(props, styles) {
       return styles.root;
     }

package/legacy/index.js

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

package/locale/index.d.ts

@@ -1,76 +1,76 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSA: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const beBY: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kuCKB: Localization;
-export declare const kuLatn: Localization;
-export declare const kkKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const urPK: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSA: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const beBY: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kuCKB: Localization;
+export declare const kuLatn: Localization;
+export declare const kkKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const urPK: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/Autocomplete/Autocomplete.js

@@ -449,6 +449,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 = _extends({}, props, {
@@ -539,7 +542,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         InputProps: _extends({
           ref: setAnchorEl,
           className: classes.inputRoot,
-          startAdornment
+          startAdornment,
+          onClick: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          }
         }, (hasClearIcon || hasPopupIcon) && {
           endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
             className: classes.endAdornment,
@@ -639,6 +647,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * If `true`, the selected option becomes the value of the input
    * when the Autocomplete loses focus unless the user chooses
    * a different option or changes the character string in the input.
+   *
+   * When using `freeSolo` mode, the typed value will be the input value
+   * if the Autocomplete loses focus without highlighting an option.
    * @default false
    */
   autoSelect: PropTypes.bool,

package/modern/CardActionArea/CardActionArea.js

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

package/modern/Chip/Chip.js

@@ -77,7 +77,6 @@ const ChipRoot = styled('div', {
   theme,
   ownerState
 }) => {
-  const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
   const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
   return _extends({
     maxWidth: '100%',
@@ -144,12 +143,12 @@ const ChipRoot = styled('div', {
     })),
     [`& .${chipClasses.deleteIcon}`]: _extends({
       WebkitTapHighlightColor: 'transparent',
-      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
+      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
       fontSize: 22,
       cursor: 'pointer',
       margin: '0 5px 0 -6px',
       '&:hover': {
-        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(deleteIconColor, 0.4)
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
       }
     }, ownerState.size === 'small' && {
       fontSize: 16,

package/modern/NativeSelect/NativeSelectInput.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disabled", "IconComponent", "inputRef", "variant"];
+const _excluded = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -17,10 +17,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${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled']
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
@@ -87,7 +88,7 @@ const NativeSelectSelect = styled('select', {
     const {
       ownerState
     } = props;
-    return [styles.select, styles[ownerState.variant], {
+    return [styles.select, styles[ownerState.variant], ownerState.error && styles.error, {
       [`&.${nativeSelectClasses.multiple}`]: styles.multiple
     }];
   }
@@ -133,6 +134,7 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
   const {
       className,
       disabled,
+      error,
       IconComponent,
       inputRef,
       variant = 'standard'
@@ -140,7 +142,8 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     disabled,
-    variant
+    variant,
+    error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -175,6 +178,10 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
    * If `true`, the select is disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   */
+  error: PropTypes.bool,
   /**
    * The icon that displays the arrow.
    */

package/modern/NativeSelect/nativeSelectClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getNativeSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiNativeSelect', slot);
 }
-const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 export default nativeSelectClasses;

package/modern/Select/Select.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -67,21 +66,26 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   const fcs = formControlState({
     props,
     muiFormControl,
-    states: ['variant']
+    states: ['variant', 'error']
   });
   const variant = fcs.variant || variantProp;
-  const InputComponent = input || {
-    standard: _StyledInput || (_StyledInput = /*#__PURE__*/_jsx(StyledInput, {})),
-    outlined: /*#__PURE__*/_jsx(StyledOutlinedInput, {
-      label: label
-    }),
-    filled: _StyledFilledInput || (_StyledFilledInput = /*#__PURE__*/_jsx(StyledFilledInput, {}))
-  }[variant];
   const ownerState = _extends({}, props, {
     variant,
     classes: classesProp
   });
   const classes = useUtilityClasses(ownerState);
+  const InputComponent = input || {
+    standard: /*#__PURE__*/_jsx(StyledInput, {
+      ownerState: ownerState
+    }),
+    outlined: /*#__PURE__*/_jsx(StyledOutlinedInput, {
+      label: label,
+      ownerState: ownerState
+    }),
+    filled: /*#__PURE__*/_jsx(StyledFilledInput, {
+      ownerState: ownerState
+    })
+  }[variant];
   const inputComponentRef = useForkRef(ref, InputComponent.ref);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, _extends({
@@ -90,6 +94,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       inputComponent,
       inputProps: _extends({
         children,
+        error: fcs.error,
         IconComponent,
         variant,
         type: undefined,

package/modern/Select/SelectInput.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 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"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -33,6 +33,8 @@ const SelectSelect = styled('div', {
       [`&.${selectClasses.select}`]: styles.select
     }, {
       [`&.${selectClasses.select}`]: styles[ownerState.variant]
+    }, {
+      [`&.${selectClasses.error}`]: styles.error
     }, {
       [`&.${selectClasses.multiple}`]: styles.multiple
     }];
@@ -90,10 +92,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${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'],
     nativeInput: ['nativeInput']
   };
@@ -115,6 +118,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       defaultValue,
       disabled,
       displayEmpty,
+      error = false,
       IconComponent,
       inputRef: inputRefProp,
       labelId,
@@ -420,7 +424,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const ownerState = _extends({}, props, {
     variant,
     value,
-    open
+    open,
+    error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -450,6 +455,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         children: "\u200B"
       })) : display
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
+      "aria-invalid": error,
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,
       ref: inputRef,
@@ -541,6 +547,10 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * If `true`, the selected item is displayed even if its value is empty.
    */
   displayEmpty: PropTypes.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   */
+  error: PropTypes.bool,
   /**
    * The icon that displays the arrow.
    */

package/modern/Select/selectClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiSelect', slot);
 }
-const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 export default selectClasses;

package/modern/Slider/Slider.js

@@ -269,7 +269,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
   ownerState
 }) => _extends({
   [`&.${sliderClasses.valueLabelOpen}`]: {
-    transform: 'translateY(-100%) scale(1)'
+    transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(1)`
   },
   zIndex: 1,
   whiteSpace: 'nowrap'
@@ -278,7 +278,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
   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,
@@ -301,18 +301,18 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
     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/modern/Stack/Stack.js

@@ -45,6 +45,16 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
 } : void 0;
 export default Stack;

package/modern/Unstable_Grid2/Grid2.js

@@ -4,6 +4,7 @@ import { styled, useThemeProps } from '../styles';
 const Grid2 = createGrid2({
   createStyledComponent: styled('div', {
     name: 'MuiGrid2',
+    slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',

package/modern/index.js

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