@mui/material 5.14.11 → 5.14.13

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.11
+ * @mui/material v5.14.13
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2404,6 +2404,16 @@
   };
   var usePreviousProps$1 = usePreviousProps;
 
+  /**
+   * Gets only the valid children of a component,
+   * and ignores any nullish or falsy child.
+   *
+   * @param children the children
+   */
+  function getValidReactChildren(children) {
+    return React__namespace.Children.toArray(children).filter(child => /*#__PURE__*/React__namespace.isValidElement(child));
+  }
+
   const visuallyHidden = {
     border: 0,
     clip: 'rect(0 0 0 0)',
@@ -6532,6 +6542,11 @@
     } else {
       value = getPath(themeMapping, propValueFinal) || userValue;
     }
+    if (typeof value === 'object') {
+      {
+        console.warn(`MUI: The value found in theme for prop: "${propValueFinal}" is an [Object] instead of string or number. Check if you forgot to add the correct dotted notation, eg, "background.paper" instead of "background".`);
+      }
+    }
     if (transform) {
       value = transform(value, userValue, themeMapping);
     }
@@ -7615,40 +7630,48 @@
     }
     return null;
   };
+  const transformVariants = variants => {
+    const variantsStyles = {};
+    if (variants) {
+      variants.forEach(definition => {
+        const key = propsToClassKey(definition.props);
+        variantsStyles[key] = definition.style;
+      });
+    }
+    return variantsStyles;
+  };
   const getVariantStyles = (name, theme) => {
     let variants = [];
     if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
       variants = theme.components[name].variants;
     }
-    const variantsStyles = {};
-    variants.forEach(definition => {
-      const key = propsToClassKey(definition.props);
-      variantsStyles[key] = definition.style;
-    });
-    return variantsStyles;
+    return transformVariants(variants);
   };
-  const variantsResolver = (props, styles, theme, name) => {
-    var _theme$components;
+  const variantsResolver = (props, styles, variants) => {
     const {
       ownerState = {}
     } = props;
     const variantsStyles = [];
-    const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
-    if (themeVariants) {
-      themeVariants.forEach(themeVariant => {
+    if (variants) {
+      variants.forEach(variant => {
         let isMatch = true;
-        Object.keys(themeVariant.props).forEach(key => {
-          if (ownerState[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
+        Object.keys(variant.props).forEach(key => {
+          if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
             isMatch = false;
           }
         });
         if (isMatch) {
-          variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
+          variantsStyles.push(styles[propsToClassKey(variant.props)]);
         }
       });
     }
     return variantsStyles;
   };
+  const themeVariantsResolver = (props, styles, theme, name) => {
+    var _theme$components;
+    const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
+    return variantsResolver(props, styles, themeVariants);
+  };
 
   // Update /system/styled/#api in case if this changes
   function shouldForwardProp(prop) {
@@ -7674,6 +7697,29 @@
     }
     return (props, styles) => styles[slot];
   }
+  const muiStyledFunctionResolver = ({
+    styledArg,
+    props,
+    defaultTheme,
+    themeId
+  }) => {
+    const resolvedStyles = styledArg(_extends({}, props, {
+      theme: resolveTheme(_extends({}, props, {
+        defaultTheme,
+        themeId
+      }))
+    }));
+    let optionalVariants;
+    if (resolvedStyles && resolvedStyles.variants) {
+      optionalVariants = resolvedStyles.variants;
+      delete resolvedStyles.variants;
+    }
+    if (optionalVariants) {
+      const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
+      return [resolvedStyles, ...variantsStyles];
+    }
+    return resolvedStyles;
+  };
   function createStyled(input = {}) {
     const {
       themeId,
@@ -7740,16 +7786,61 @@
           // On the server Emotion doesn't use React.forwardRef for creating components, so the created
           // component stays as a function. This condition makes sure that we do not interpolate functions
           // which are basically components used as a selectors.
-          return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
-            return stylesArg(_extends({}, props, {
-              theme: resolveTheme(_extends({}, props, {
-                defaultTheme,
-                themeId
-              }))
-            }));
-          } : stylesArg;
+          if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
+            return props => muiStyledFunctionResolver({
+              styledArg: stylesArg,
+              props,
+              defaultTheme,
+              themeId
+            });
+          }
+          if (isPlainObject(stylesArg)) {
+            let transformedStylesArg = stylesArg;
+            let styledArgVariants;
+            if (stylesArg && stylesArg.variants) {
+              styledArgVariants = stylesArg.variants;
+              delete transformedStylesArg.variants;
+              transformedStylesArg = props => {
+                let result = stylesArg;
+                const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+                variantStyles.forEach(variantStyle => {
+                  result = deepmerge(result, variantStyle);
+                });
+                return result;
+              };
+            }
+            return transformedStylesArg;
+          }
+          return stylesArg;
         }) : [];
         let transformedStyleArg = styleArg;
+        if (isPlainObject(styleArg)) {
+          let styledArgVariants;
+          if (styleArg && styleArg.variants) {
+            styledArgVariants = styleArg.variants;
+            delete transformedStyleArg.variants;
+            transformedStyleArg = props => {
+              let result = styleArg;
+              const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+              variantStyles.forEach(variantStyle => {
+                result = deepmerge(result, variantStyle);
+              });
+              return result;
+            };
+          }
+        } else if (typeof styleArg === 'function' &&
+        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
+        // component stays as a function. This condition makes sure that we do not interpolate functions
+        // which are basically components used as a selectors.
+        styleArg.__emotion_real !== styleArg) {
+          // If the type is function, we need to define the default theme.
+          transformedStyleArg = props => muiStyledFunctionResolver({
+            styledArg: styleArg,
+            props,
+            defaultTheme,
+            themeId
+          });
+        }
         if (componentName && overridesResolver) {
           expressionsWithDefaultTheme.push(props => {
             const theme = resolveTheme(_extends({}, props, {
@@ -7775,7 +7866,7 @@
               defaultTheme,
               themeId
             }));
-            return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+            return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
           });
         }
         if (!skipSx) {
@@ -7787,18 +7878,6 @@
           // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
           transformedStyleArg = [...styleArg, ...placeholders];
           transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-        } else if (typeof styleArg === 'function' &&
-        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-        // component stays as a function. This condition makes sure that we do not interpolate functions
-        // which are basically components used as a selectors.
-        styleArg.__emotion_real !== styleArg) {
-          // If the type is function, we need to define the default theme.
-          transformedStyleArg = props => styleArg(_extends({}, props, {
-            theme: resolveTheme(_extends({}, props, {
-              defaultTheme,
-              themeId
-            }))
-          }));
         }
         const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
         {
@@ -11260,7 +11339,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
      * @default 'inherit'
      */
@@ -14481,7 +14560,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'default'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -14752,7 +14831,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component. Unless provided, the value is taken from the `severity` prop.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
     /**
@@ -15259,7 +15338,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), PropTypes.string]),
@@ -19271,12 +19350,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     const trackOffset = valueToPercent(range ? values[0] : min, min, max);
     const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
-    const getRootProps = (otherHandlers = {}) => {
+    const getRootProps = (externalProps = {}) => {
+      const externalHandlers = extractEventHandlers(externalProps);
       const ownEventHandlers = {
-        onMouseDown: createHandleMouseDown(otherHandlers || {})
+        onMouseDown: createHandleMouseDown(externalHandlers || {})
       };
-      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
-      return _extends({
+      const mergedEventHandlers = _extends({}, externalHandlers, ownEventHandlers);
+      return _extends({}, externalProps, {
         ref: handleRef
       }, mergedEventHandlers);
     };
@@ -19291,12 +19371,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       (_otherHandlers$onMous3 = otherHandlers.onMouseLeave) == null || _otherHandlers$onMous3.call(otherHandlers, event);
       setOpen(-1);
     };
-    const getThumbProps = (otherHandlers = {}) => {
+    const getThumbProps = (externalProps = {}) => {
+      const externalHandlers = extractEventHandlers(externalProps);
       const ownEventHandlers = {
-        onMouseOver: createHandleMouseOver(otherHandlers || {}),
-        onMouseLeave: createHandleMouseLeave(otherHandlers || {})
+        onMouseOver: createHandleMouseOver(externalHandlers || {}),
+        onMouseLeave: createHandleMouseLeave(externalHandlers || {})
       };
-      return _extends({}, otherHandlers, ownEventHandlers);
+      return _extends({}, externalProps, externalHandlers, ownEventHandlers);
     };
     const getThumbStyle = index => {
       return {
@@ -19304,14 +19385,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         pointerEvents: active !== -1 && active !== index ? 'none' : undefined
       };
     };
-    const getHiddenInputProps = (otherHandlers = {}) => {
+    const getHiddenInputProps = (externalProps = {}) => {
       var _parameters$step;
+      const externalHandlers = extractEventHandlers(externalProps);
       const ownEventHandlers = {
-        onChange: createHandleHiddenInputChange(otherHandlers || {}),
-        onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
-        onBlur: createHandleHiddenInputBlur(otherHandlers || {})
+        onChange: createHandleHiddenInputChange(externalHandlers || {}),
+        onFocus: createHandleHiddenInputFocus(externalHandlers || {}),
+        onBlur: createHandleHiddenInputBlur(externalHandlers || {})
       };
-      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
+      const mergedEventHandlers = _extends({}, externalHandlers, ownEventHandlers);
       return _extends({
         tabIndex,
         'aria-labelledby': ariaLabelledby,
@@ -19324,7 +19406,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         max: parameters.max,
         step: parameters.step === null && parameters.marks ? 'any' : (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
         disabled
-      }, mergedEventHandlers, {
+      }, externalProps, mergedEventHandlers, {
         style: _extends({}, visuallyHidden$1, {
           direction: isRtl ? 'rtl' : 'ltr',
           // So that VoiceOver's focus indicator matches the thumb's dimensions
@@ -20651,10 +20733,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }),
       getClearProps: () => ({
         tabIndex: -1,
+        type: 'button',
         onClick: handleClear
       }),
       getPopupIndicatorProps: () => ({
         tabIndex: -1,
+        type: 'button',
         onClick: handlePopupIndicator
       }),
       getTagProps: ({
@@ -21292,9 +21376,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     paddingLeft: 12,
     paddingRight: 12,
     whiteSpace: 'nowrap'
+  }, ownerState.variant === 'outlined' && {
+    paddingLeft: 11,
+    paddingRight: 11
   }, ownerState.size === 'small' && {
     paddingLeft: 8,
     paddingRight: 8
+  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+    paddingLeft: 7,
+    paddingRight: 7
   }));
   function isDeleteKeyboardEvent(keyboardEvent) {
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
@@ -21459,7 +21549,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'default'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -22097,7 +22187,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -24462,7 +24552,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'default'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -25478,7 +25568,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning']), PropTypes.string]),
@@ -25726,9 +25816,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size,
       variant
     }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
-    const getButtonPositionClassName = (index, childrenParam) => {
+    const validChildren = getValidReactChildren(children);
+    const childrenCount = validChildren.length;
+    const getButtonPositionClassName = index => {
       const isFirstButton = index === 0;
-      const isLastButton = index === React__namespace.Children.count(childrenParam) - 1;
+      const isLastButton = index === childrenCount - 1;
       if (isFirstButton && isLastButton) {
         return '';
       }
@@ -25749,14 +25841,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, other, {
       children: /*#__PURE__*/jsxRuntime_1(ButtonGroupContext$1.Provider, {
         value: context,
-        children: React__namespace.Children.map(children, (child, index) => {
-          if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
-            return child;
-          }
+        children: validChildren.map((child, index) => {
           return /*#__PURE__*/jsxRuntime_1(ButtonGroupButtonContext$1.Provider, {
-            value: getButtonPositionClassName(index, children),
+            value: getButtonPositionClassName(index),
             children: child
-          });
+          }, index);
         })
       })
     }));
@@ -25781,7 +25870,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -26826,7 +26915,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     color: (theme.vars || theme).palette.text.secondary
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -26911,7 +27000,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -27183,7 +27272,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -28216,7 +28305,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     justifyContent: 'flex-end',
     flex: '0 0 auto'
   }, !ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8
     }
   }));
@@ -29537,7 +29626,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'default'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
@@ -29827,7 +29916,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
@@ -30220,7 +30309,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -30954,7 +31043,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
     /**
@@ -32600,7 +32689,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'inherit'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'action', 'disabled', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -33324,7 +33413,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
@@ -33811,7 +33900,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
     /**
@@ -34174,7 +34263,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string]),
@@ -37780,7 +37869,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
@@ -38163,14 +38252,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     [`&.${paginationItemClasses$1.selected}`]: {
       backgroundColor: (theme.vars || theme).palette.action.selected,
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: (theme.vars || theme).palette.action.selected
         }
       },
       [`&.${paginationItemClasses$1.focusVisible}`]: {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       },
       [`&.${paginationItemClasses$1.disabled}`]: {
         opacity: 1,
@@ -38334,7 +38423,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The active color.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'standard'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'standard']), PropTypes.string]),
@@ -38543,7 +38632,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The active color.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'standard'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'standard']), PropTypes.string]),
@@ -38867,7 +38956,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -40178,11 +40267,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     const classes = useUtilityClasses$x(ownerState);
     const paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
+    const listboxId = useId();
     return /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime_1(SelectSelect, _extends({
         ref: handleDisplayRef,
         tabIndex: tabIndex,
-        role: "button",
+        role: "combobox",
+        "aria-controls": listboxId,
         "aria-disabled": disabled ? 'true' : undefined,
         "aria-expanded": open ? 'true' : 'false',
         "aria-haspopup": "listbox",
@@ -40238,15 +40329,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           'aria-labelledby': labelId,
           role: 'listbox',
           'aria-multiselectable': multiple ? 'true' : undefined,
-          disableListWrap: true
+          disableListWrap: true,
+          id: listboxId
         }, MenuProps.MenuListProps),
-        slotProps: {
+        slotProps: _extends({}, MenuProps.slotProps, {
           paper: _extends({}, paperProps, {
             style: _extends({
               minWidth: menuMinWidth
             }, paperProps != null ? paperProps.style : null)
           })
-        },
+        }),
         children: items
       }))]
     });
@@ -40885,7 +40977,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getSliderUtilityClass(slot) {
     return generateUtilityClass('MuiSlider', slot);
   }
-  const sliderClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
+  const sliderClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'thumbColorError', 'thumbColorSuccess', 'thumbColorInfo', 'thumbColorWarning', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
   var sliderClasses$1 = sliderClasses;
 
   const useValueLabelClasses = props => {
@@ -41540,10 +41632,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
-    color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
+    color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
     /**
      * The components used for each slot inside.
      *
@@ -46015,7 +46107,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -49146,7 +49238,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the component.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'primary'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -49441,7 +49533,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the button when it is in an active state.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'standard'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -49684,7 +49776,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * The color of the button when it is selected.
      * It supports both default and custom theme colors, which can be added as shown in the
-     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
      * @default 'standard'
      */
     color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),