@mui/material 5.11.15 → 5.11.16

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,

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/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/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.11.15",
+  "version": "5.11.16",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,14 +46,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-alpha.123",
-    "@mui/core-downloads-tracker": "^5.11.15",
-    "@mui/system": "^5.11.15",
+    "@mui/base": "5.0.0-alpha.124",
+    "@mui/core-downloads-tracker": "^5.11.16",
+    "@mui/system": "^5.11.16",
     "@mui/types": "^7.2.3",
     "@mui/utils": "^5.11.13",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
-    "csstype": "^3.1.1",
+    "csstype": "^3.1.2",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5"

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.15
+ * @mui/material v5.11.16
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -10738,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 {
@@ -10784,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 {
@@ -11012,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 {
@@ -13246,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 {
@@ -13485,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 {
@@ -13947,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;
@@ -14287,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 {
@@ -14488,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 {
@@ -14952,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 {
@@ -15108,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 {
@@ -16108,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({
@@ -16267,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,
@@ -22454,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, {
@@ -22544,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,
@@ -25563,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,
@@ -31009,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',
@@ -36462,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);
@@ -36542,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
       }];
     }
@@ -36588,6 +36603,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
         className,
         disabled,
+        error,
         IconComponent,
         inputRef,
         variant = 'standard'
@@ -36595,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, {
@@ -36630,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.
      */
@@ -39071,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',
@@ -39089,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
       }];
@@ -39146,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']
     };
@@ -39171,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,
@@ -39476,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, {
@@ -39506,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,
@@ -39597,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.
      */
@@ -39691,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 {
@@ -39742,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({
@@ -39765,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,
@@ -40470,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'
@@ -40479,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,
@@ -40502,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),