@mui/material 5.11.14 → 5.11.16

package/umd/material-ui.development.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
@@ -6450,36 +6450,6 @@
   });
   compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
 
-  const createFontStyleFunction = prop => {
-    return props => {
-      if (props[prop] !== undefined && props[prop] !== null) {
-        const styleFromPropValue = propValue => {
-          var _props$theme$typograp;
-          // fetch the value directly defined in the theme, like fontWeightLight
-          let value = (_props$theme$typograp = props.theme.typography) == null ? void 0 : _props$theme$typograp[propValue];
-          if (typeof value === 'object') {
-            // typography variant was pulled, but these props can't be an object
-            value = null;
-          }
-          if (!value) {
-            var _props$theme$typograp2, _props$prop;
-            // fetch fontWeightLight when the value is 'light'
-            value = (_props$theme$typograp2 = props.theme.typography) == null ? void 0 : _props$theme$typograp2[`${prop}${props[prop] === 'default' || props[prop] === prop ? '' : capitalize((_props$prop = props[prop]) == null ? void 0 : _props$prop.toString())}`];
-          }
-          if (!value) {
-            var _props$theme$typograp3, _props$theme$typograp4, _props$theme$typograp5;
-            // fetch the value from the typography variant or default to the propValue
-            value = (_props$theme$typograp3 = (_props$theme$typograp4 = props.theme.typography) == null ? void 0 : (_props$theme$typograp5 = _props$theme$typograp4[propValue]) == null ? void 0 : _props$theme$typograp5[prop]) != null ? _props$theme$typograp3 : propValue;
-          }
-          return {
-            [prop]: value
-          };
-        };
-        return handleBreakpoints(props, props[prop], styleFromPropValue);
-      }
-      return null;
-    };
-  };
   const defaultSxConfig = {
     // borders
     border: {
@@ -6738,19 +6708,16 @@
     boxSizing: {},
     // typography
     fontFamily: {
-      themeKey: 'typography',
-      style: createFontStyleFunction('fontFamily')
+      themeKey: 'typography'
     },
     fontSize: {
-      themeKey: 'typography',
-      style: createFontStyleFunction('fontSize')
+      themeKey: 'typography'
     },
     fontStyle: {
       themeKey: 'typography'
     },
     fontWeight: {
-      themeKey: 'typography',
-      style: createFontStyleFunction('fontWeight')
+      themeKey: 'typography'
     },
     letterSpacing: {},
     textTransform: {},
@@ -6794,6 +6761,11 @@
       if (val == null) {
         return null;
       }
+      if (themeKey === 'typography' && val === 'inherit') {
+        return {
+          [prop]: val
+        };
+      }
       const themeMapping = getPath(theme, themeKey) || {};
       if (style) {
         return style(props);
@@ -8735,12 +8707,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Container;
   }
 
+  function appendLevel(level) {
+    if (!level) {
+      return '';
+    }
+    return `Level${level}`;
+  }
   function isNestedContainer(ownerState) {
     return ownerState.level > 0 && ownerState.container;
   }
   function createGetSelfSpacing(ownerState) {
     return function getSelfSpacing(axis) {
-      return `var(--Grid-${axis}Spacing${ownerState.level || ''})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level)})`;
     };
   }
   function createGetParentSpacing(ownerState) {
@@ -8748,9 +8726,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (ownerState.level === 0) {
         return `var(--Grid-${axis}Spacing)`;
       }
-      return `var(--Grid-${axis}Spacing${ownerState.level - 1 || ''})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level - 1)})`;
     };
   }
+  function getParentColumns(ownerState) {
+    if (ownerState.level === 0) {
+      return `var(--Grid-columns)`;
+    }
+    return `var(--Grid-columns${appendLevel(ownerState.level - 1)})`;
+  }
   const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
   const traverseBreakpoints = (breakpoints, responsive, iterator) => {
     const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
@@ -8821,7 +8805,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         style = {
           flexGrow: 0,
           flexBasis: 'auto',
-          width: `calc(100% * ${value} / var(--Grid-columns)${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
+          width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
         };
       }
       appendStyle(styles, style);
@@ -8842,7 +8826,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
       if (typeof value === 'number') {
         style = {
-          marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(--Grid-columns))`
+          marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
         };
       }
       appendStyle(styles, style);
@@ -8856,12 +8840,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     if (!ownerState.container) {
       return {};
     }
-    const styles = {
+    const styles = isNestedContainer(ownerState) ? {
+      [`--Grid-columns${appendLevel(ownerState.level)}`]: getParentColumns(ownerState)
+    } : {
       '--Grid-columns': 12
     };
     traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
       appendStyle(styles, {
-        '--Grid-columns': value
+        [`--Grid-columns${appendLevel(ownerState.level)}`]: value
       });
     });
     return styles;
@@ -8877,12 +8863,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const styles = isNestedContainer(ownerState) ? {
       // Set the default spacing as its parent spacing.
       // It will be overridden if spacing props are provided
-      [`--Grid-rowSpacing${ownerState.level || ''}`]: getParentSpacing('row')
+      [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('row')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
       var _theme$spacing;
       appendStyle(styles, {
-        [`--Grid-rowSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+        [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
       });
     });
     return styles;
@@ -8898,12 +8884,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const styles = isNestedContainer(ownerState) ? {
       // Set the default spacing as its parent spacing.
       // It will be overridden if spacing props are provided
-      [`--Grid-columnSpacing${ownerState.level || ''}`]: getParentSpacing('column')
+      [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: getParentSpacing('column')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
       var _theme$spacing2;
       appendStyle(styles, {
-        [`--Grid-columnSpacing${ownerState.level || ''}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+        [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
       });
     });
     return styles;
@@ -9134,7 +9120,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Grid;
   }
 
-  const _excluded$2e = ["component", "direction", "spacing", "divider", "children", "className"];
+  const _excluded$2e = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
   const defaultTheme$4 = createTheme$1();
   // widening Theme to any so that the consumer can own the theme structure.
   const defaultCreateStyledComponent = systemStyled('div', {
@@ -9218,6 +9204,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         });
       }
       const styleFromPropValue = (propValue, breakpoint) => {
+        if (ownerState.useFlexGap) {
+          return {
+            gap: getValue(transformer, propValue)
+          };
+        }
         return {
           '& > :not(style) + :not(style)': {
             margin: 0,
@@ -9255,12 +9246,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           spacing = 0,
           divider,
           children,
-          className
+          className,
+          useFlexGap = false
         } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded$2e);
       const ownerState = {
         direction,
-        spacing
+        spacing,
+        useFlexGap
       };
       const classes = useUtilityClasses();
       return /*#__PURE__*/jsxRuntime_1(StackRoot, _extends({
@@ -10745,7 +10738,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [useBadge API](https://mui.com/base/api/use-badge/)
+   * - [useBadge API](https://mui.com/base/react-badge/hooks-api/#use-badge)
    */
   function useBadge(parameters) {
     const {
@@ -10791,7 +10784,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [ClickAwayListener API](https://mui.com/base/api/click-away-listener/)
+   * - [ClickAwayListener API](https://mui.com/base/react-click-away-listener/components-api/#click-away-listener)
    */
   function ClickAwayListener(props) {
     const {
@@ -11019,7 +11012,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [FocusTrap API](https://mui.com/base/api/focus-trap/)
+   * - [FocusTrap API](https://mui.com/base/react-focus-trap/components-api/#focus-trap)
    */
   function FocusTrap(props) {
     const {
@@ -11429,7 +11422,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getUAString() {
     var uaData = navigator.userAgentData;
 
-    if (uaData != null && uaData.brands) {
+    if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
       return uaData.brands.map(function (item) {
         return item.brand + "/" + item.version;
       }).join(' ');
@@ -11757,10 +11750,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   // Zooming can change the DPR, but it seems to report a value that will
   // cleanly divide the values into the appropriate subpixels.
 
-  function roundOffsetsByDPR(_ref) {
+  function roundOffsetsByDPR(_ref, win) {
     var x = _ref.x,
         y = _ref.y;
-    var win = window;
     var dpr = win.devicePixelRatio || 1;
     return {
       x: round$1(x * dpr) / dpr || 0,
@@ -11843,7 +11835,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
       x: x,
       y: y
-    }) : {
+    }, getWindow(popper)) : {
       x: x,
       y: y
     };
@@ -13254,7 +13246,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [Portal API](https://mui.com/base/api/portal/)
+   * - [Portal API](https://mui.com/base/react-portal/components-api/#portal)
    */
   const Portal = /*#__PURE__*/React__namespace.forwardRef(function Portal(props, ref) {
     const {
@@ -13493,7 +13485,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [PopperUnstyled API](https://mui.com/base/api/popper-unstyled/)
+   * - [PopperUnstyled API](https://mui.com/base/react-popper/components-api/#popper-unstyled)
    */
   const PopperUnstyled = /*#__PURE__*/React__namespace.forwardRef(function PopperUnstyled(props, ref) {
     const {
@@ -13955,7 +13947,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [ModalUnstyled API](https://mui.com/base/api/modal-unstyled/)
+   * - [ModalUnstyled API](https://mui.com/base/react-modal/components-api/#modal-unstyled)
    */
   const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUnstyled(props, forwardedRef) {
     var _props$ariaHidden, _ref;
@@ -14295,7 +14287,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [NoSsr API](https://mui.com/base/api/no-ssr/)
+   * - [NoSsr API](https://mui.com/base/react-no-ssr/components-api/#no-ssr)
    */
   function NoSsr(props) {
     const {
@@ -14496,7 +14488,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [useSlider API](https://mui.com/base/api/use-slider/)
+   * - [useSlider API](https://mui.com/base/react-slider/hooks-api/#use-slider)
    */
   function useSlider(parameters) {
     const {
@@ -14960,7 +14952,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [useSnackbar API](https://mui.com/base/api/use-snackbar/)
+   * - [useSnackbar API](https://mui.com/base/react-snackbar/hooks-api/#use-snackbar)
    */
   function useSnackbar(parameters) {
     const {
@@ -15116,7 +15108,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * API:
    *
-   * - [TextareaAutosize API](https://mui.com/base/api/textarea-autosize/)
+   * - [TextareaAutosize API](https://mui.com/base/react-textarea-autosize/components-api/#textarea-autosize)
    */
   const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function TextareaAutosize(props, ref) {
     const {
@@ -16116,12 +16108,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         handleOpen(event);
       }
     };
-    const handleOptionMouseOver = event => {
-      setHighlightedIndex({
-        event,
-        index: Number(event.currentTarget.getAttribute('data-option-index')),
-        reason: 'mouse'
-      });
+    const handleOptionMouseMove = event => {
+      const index = Number(event.currentTarget.getAttribute('data-option-index'));
+      if (highlightedIndexRef.current !== index) {
+        setHighlightedIndex({
+          event,
+          index,
+          reason: 'mouse'
+        });
+      }
     };
     const handleOptionTouchStart = event => {
       setHighlightedIndex({
@@ -16275,7 +16270,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           tabIndex: -1,
           role: 'option',
           id: `${id}-option-${index}`,
-          onMouseOver: handleOptionMouseOver,
+          onMouseMove: handleOptionMouseMove,
           onClick: handleOptionClick,
           onTouchStart: handleOptionTouchStart,
           'data-option-index': index,
@@ -20814,7 +20809,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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%',
@@ -20881,12 +20875,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       })),
       [`& .${chipClasses$1.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,
@@ -22463,6 +22457,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }));
     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, {
@@ -22553,7 +22550,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           InputProps: _extends({
             ref: setAnchorEl,
             className: classes.inputRoot,
-            startAdornment
+            startAdornment,
+            onClick: event => {
+              if (event.target === event.currentTarget) {
+                handleInputMouseDown(event);
+              }
+            }
           }, (hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/jsxRuntime_2(AutocompleteEndAdornment, {
               className: classes.endAdornment,
@@ -22653,6 +22655,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * 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,
@@ -25569,6 +25574,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) => ({
     display: 'block',
     textAlign: 'inherit',
+    borderRadius: 'inherit',
+    // for Safari to work https://github.com/mui/material-ui/issues/36285.
     width: '100%',
     [`&:hover .${cardActionAreaClasses$1.focusHighlight}`]: {
       opacity: (theme.vars || theme).palette.action.hoverOpacity,
@@ -31015,6 +31022,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const Grid2 = createGrid({
     createStyledComponent: styled$1('div', {
       name: 'MuiGrid2',
+      slot: 'Root',
       overridesResolver: (props, styles) => styles.root
     }),
     componentName: 'MuiGrid2',
@@ -36468,20 +36476,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   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']);
   var nativeSelectClasses$1 = nativeSelectClasses;
 
-  const _excluded$O = ["className", "disabled", "IconComponent", "inputRef", "variant"];
+  const _excluded$O = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
   const useUtilityClasses$F = ownerState => {
     const {
       classes,
       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);
@@ -36548,7 +36557,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       const {
         ownerState
       } = props;
-      return [styles.select, styles[ownerState.variant], {
+      return [styles.select, styles[ownerState.variant], ownerState.error && styles.error, {
         [`&.${nativeSelectClasses$1.multiple}`]: styles.multiple
       }];
     }
@@ -36594,6 +36603,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
         className,
         disabled,
+        error,
         IconComponent,
         inputRef,
         variant = 'standard'
@@ -36601,7 +36611,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       other = _objectWithoutPropertiesLoose(props, _excluded$O);
     const ownerState = _extends({}, props, {
       disabled,
-      variant
+      variant,
+      error
     });
     const classes = useUtilityClasses$F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
@@ -36636,6 +36647,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * 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.
      */
@@ -39077,11 +39092,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   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']);
   var selectClasses$1 = selectClasses;
 
   var _span;
-  const _excluded$D = ["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$D = ["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"];
   const SelectSelect = styled$1('div', {
     name: 'MuiSelect',
     slot: 'Select',
@@ -39095,6 +39110,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         [`&.${selectClasses$1.select}`]: styles.select
       }, {
         [`&.${selectClasses$1.select}`]: styles[ownerState.variant]
+      }, {
+        [`&.${selectClasses$1.error}`]: styles.error
       }, {
         [`&.${selectClasses$1.multiple}`]: styles.multiple
       }];
@@ -39152,10 +39169,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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']
     };
@@ -39177,6 +39195,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         defaultValue,
         disabled,
         displayEmpty,
+        error = false,
         IconComponent,
         inputRef: inputRefProp,
         labelId,
@@ -39482,7 +39501,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       variant,
       value,
-      open
+      open,
+      error
     });
     const classes = useUtilityClasses$x(ownerState);
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
@@ -39512,6 +39532,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           children: "\u200B"
         })) : display
       })), /*#__PURE__*/jsxRuntime_1(SelectNativeInput, _extends({
+        "aria-invalid": error,
         value: Array.isArray(value) ? value.join(',') : value,
         name: name,
         ref: inputRef,
@@ -39603,6 +39624,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * 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.
      */
@@ -39697,7 +39722,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var SelectInput$1 = SelectInput;
 
-  var _StyledInput, _StyledFilledInput;
   const _excluded$C = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
   const useUtilityClasses$w = ownerState => {
     const {
@@ -39748,21 +39772,26 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const fcs = formControlState({
       props,
       muiFormControl,
-      states: ['variant']
+      states: ['variant', 'error']
     });
     const variant = fcs.variant || variantProp;
-    const InputComponent = input || {
-      standard: _StyledInput || (_StyledInput = /*#__PURE__*/jsxRuntime_1(StyledInput, {})),
-      outlined: /*#__PURE__*/jsxRuntime_1(StyledOutlinedInput, {
-        label: label
-      }),
-      filled: _StyledFilledInput || (_StyledFilledInput = /*#__PURE__*/jsxRuntime_1(StyledFilledInput, {}))
-    }[variant];
     const ownerState = _extends({}, props, {
       variant,
       classes: classesProp
     });
     const classes = useUtilityClasses$w(ownerState);
+    const InputComponent = input || {
+      standard: /*#__PURE__*/jsxRuntime_1(StyledInput, {
+        ownerState: ownerState
+      }),
+      outlined: /*#__PURE__*/jsxRuntime_1(StyledOutlinedInput, {
+        label: label,
+        ownerState: ownerState
+      }),
+      filled: /*#__PURE__*/jsxRuntime_1(StyledFilledInput, {
+        ownerState: ownerState
+      })
+    }[variant];
     const inputComponentRef = useForkRef(ref, InputComponent.ref);
     return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
       children: /*#__PURE__*/React__namespace.cloneElement(InputComponent, _extends({
@@ -39771,6 +39800,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         inputComponent,
         inputProps: _extends({
           children,
+          error: fcs.error,
           IconComponent,
           variant,
           type: undefined,
@@ -40476,7 +40506,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => _extends({
     [`&.${sliderClasses$1.valueLabelOpen}`]: {
-      transform: 'translateY(-100%) scale(1)'
+      transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(1)`
     },
     zIndex: 1,
     whiteSpace: 'nowrap'
@@ -40485,7 +40515,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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,
@@ -40508,18 +40538,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       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),
@@ -43411,7 +43441,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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
   } ;
   var Stack$1 = Stack;