@mui/material 5.12.0 → 5.12.2

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.12.0
+ * @mui/material v5.12.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7342,6 +7342,9 @@
           }
           Component.displayName = displayName;
         }
+        if (tag.muiName) {
+          Component.muiName = tag.muiName;
+        }
         return Component;
       };
       if (defaultStyledResolver.withConfig) {
@@ -8639,11 +8642,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const generateCssVars = colorScheme => {
       if (!colorScheme) {
         return {
-          css: rootCss,
+          css: _extends({}, rootCss),
           vars: rootVars
         };
       }
-      return colorSchemesMap[colorScheme];
+      return {
+        css: _extends({}, colorSchemesMap[colorScheme].css),
+        vars: colorSchemesMap[colorScheme].vars
+      };
     };
     return {
       vars: themeVars,
@@ -8790,26 +8796,26 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return `Level${level}`;
   }
   function isNestedContainer(ownerState) {
-    return ownerState.level > 0 && ownerState.container;
+    return ownerState.unstable_level > 0 && ownerState.container;
   }
   function createGetSelfSpacing(ownerState) {
     return function getSelfSpacing(axis) {
-      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level)})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level)})`;
     };
   }
   function createGetParentSpacing(ownerState) {
     return function getParentSpacing(axis) {
-      if (ownerState.level === 0) {
+      if (ownerState.unstable_level === 0) {
         return `var(--Grid-${axis}Spacing)`;
       }
-      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.level - 1)})`;
+      return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level - 1)})`;
     };
   }
   function getParentColumns(ownerState) {
-    if (ownerState.level === 0) {
+    if (ownerState.unstable_level === 0) {
       return `var(--Grid-columns)`;
     }
-    return `var(--Grid-columns${appendLevel(ownerState.level - 1)})`;
+    return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
   }
   const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
   const traverseBreakpoints = (breakpoints, responsive, iterator) => {
@@ -8917,13 +8923,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       return {};
     }
     const styles = isNestedContainer(ownerState) ? {
-      [`--Grid-columns${appendLevel(ownerState.level)}`]: getParentColumns(ownerState)
+      [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: getParentColumns(ownerState)
     } : {
       '--Grid-columns': 12
     };
     traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
       appendStyle(styles, {
-        [`--Grid-columns${appendLevel(ownerState.level)}`]: value
+        [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
       });
     });
     return styles;
@@ -8939,12 +8945,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${appendLevel(ownerState.level)}`]: getParentSpacing('row')
+      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
       var _theme$spacing;
       appendStyle(styles, {
-        [`--Grid-rowSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
+        [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
       });
     });
     return styles;
@@ -8960,12 +8966,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${appendLevel(ownerState.level)}`]: getParentSpacing('column')
+      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
     } : {};
     traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
       var _theme$spacing2;
       appendStyle(styles, {
-        [`--Grid-columnSpacing${appendLevel(ownerState.level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
+        [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
       });
     });
     return styles;
@@ -9048,7 +9054,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return [`direction-xs-${String(direction)}`];
   };
 
-  const _excluded$2g = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
+  const _excluded$2g = ["className", "children", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow", "unstable_level"];
   const defaultTheme$5 = createTheme$1();
 
   // widening Theme to any so that the consumer can own the theme structure.
@@ -9071,7 +9077,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       useThemeProps = useThemePropsDefault$1,
       componentName = 'MuiGrid'
     } = options;
-    const NestedContext = /*#__PURE__*/React__namespace.createContext(0);
     const OverflowContext = /*#__PURE__*/React__namespace.createContext(undefined);
     const useUtilityClasses = (ownerState, theme) => {
       const {
@@ -9092,10 +9097,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const theme = useTheme$2();
       const themeProps = useThemeProps(inProps);
       const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
-      const level = React__namespace.useContext(NestedContext);
       const overflow = React__namespace.useContext(OverflowContext);
       const {
           className,
+          children,
           columns: columnsProp = 12,
           container = false,
           component = 'div',
@@ -9104,7 +9109,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           spacing: spacingProp = 0,
           rowSpacing: rowSpacingProp = spacingProp,
           columnSpacing: columnSpacingProp = spacingProp,
-          disableEqualOverflow: themeDisableEqualOverflow
+          disableEqualOverflow: themeDisableEqualOverflow,
+          unstable_level: level = 0
         } = props,
         rest = _objectWithoutPropertiesLoose(props, _excluded$2g);
       // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
@@ -9151,13 +9157,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         as: component,
         ownerState: ownerState,
         className: clsx(classes.root, className)
-      }, other));
-      if (container) {
-        result = /*#__PURE__*/jsxRuntime_1(NestedContext.Provider, {
-          value: level + 1,
-          children: result
-        });
-      }
+      }, other, {
+        children: React__namespace.Children.map(children, child => {
+          if ( /*#__PURE__*/React__namespace.isValidElement(child) && isMuiElement(child, ['Grid'])) {
+            var _child$props$unstable;
+            return /*#__PURE__*/React__namespace.cloneElement(child, {
+              unstable_level: (_child$props$unstable = child.props.unstable_level) != null ? _child$props$unstable : level + 1
+            });
+          }
+          return child;
+        })
+      }));
       if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
         // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
         // 1. It is the root grid with `disableEqualOverflow`.
@@ -9193,6 +9203,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
       xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
     } ;
+
+    // @ts-ignore internal logic for nested grid
+    Grid.muiName = 'Grid';
     return Grid;
   }
 
@@ -10257,7 +10270,14 @@ Use unitless line heights instead.` );
     }));
   }
   ThemeProvider.propTypes = {
-    theme: PropTypes.object
+    /**
+     * Your component tree.
+     */
+    children: PropTypes.node,
+    /**
+     * A theme object. You can provide a function to extend the outer theme.
+     */
+    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
   } ;
 
   function makeStyles() {
@@ -10402,7 +10422,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
 
       // assign component variables
-      assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+      assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
       if (key === 'light') {
         setColor(palette.Alert, 'errorColor', private_safeDarken(palette.error.light, 0.6));
         setColor(palette.Alert, 'infoColor', private_safeDarken(palette.info.light, 0.6));
@@ -10426,6 +10446,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
         setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
         setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
+        setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
+        setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
         setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
         setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
         setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
@@ -10486,6 +10508,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
         setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
         setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
+        setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
+        setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
         setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
         setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
         setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));
@@ -10657,6 +10681,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
   }
 
+  function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+    return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+  }
+
   const defaultContextValue = {
     disableDefaultClasses: false
   };
@@ -10734,7 +10762,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * The merge order is (the latter overrides the former):
    * 1. The internal props (specified as a getter function to work with get*Props hook result)
-   * 2. Additional props (specified internally on an unstyled component)
+   * 2. Additional props (specified internally on a Base UI component)
    * 3. External props specified on the owner component. These should only be used on a root slot.
    * 4. External props specified in the `slotProps.*` prop.
    * 5. The `className` prop - combined from all the above.
@@ -10829,7 +10857,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * Demos:
    *
-   * - [Unstyled badge](https://mui.com/base/react-badge/#hook)
+   * - [Badge](https://mui.com/base/react-badge/#hook)
    *
    * API:
    *
@@ -13410,7 +13438,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   var Portal$1 = Portal;
 
-  function getPopperUnstyledUtilityClass(slot) {
+  function getPopperUtilityClass(slot) {
     return generateUtilityClass('MuiPopper', slot);
   }
   generateUtilityClasses('MuiPopper', ['root']);
@@ -13447,7 +13475,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const slots = {
       root: ['root']
     };
-    return composeClasses(slots, useClassNamesOverride(getPopperUnstyledUtilityClass));
+    return composeClasses(slots, useClassNamesOverride(getPopperUtilityClass));
   };
   const defaultPopperOptions = {};
   const PopperTooltip = /*#__PURE__*/React__namespace.forwardRef(function PopperTooltip(props, ref) {
@@ -13575,13 +13603,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * Demos:
    *
-   * - [Unstyled Popper](https://mui.com/base/react-popper/)
+   * - [Popper](https://mui.com/base/react-popper/)
    *
    * API:
    *
-   * - [PopperUnstyled API](https://mui.com/base/react-popper/components-api/#popper-unstyled)
+   * - [Popper API](https://mui.com/base/react-popper/components-api/#popper)
    */
-  const PopperUnstyled = /*#__PURE__*/React__namespace.forwardRef(function PopperUnstyled(props, ref) {
+  const Popper$2 = /*#__PURE__*/React__namespace.forwardRef(function Popper(props, ref) {
     const {
         anchorEl,
         children,
@@ -13656,7 +13684,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }))
     });
   });
-  PopperUnstyled.propTypes /* remove-proptypes */ = {
+  Popper$2.propTypes /* remove-proptypes */ = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
     // |     To update them edit TypeScript types and run "yarn proptypes"  |
@@ -13778,7 +13806,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     transition: PropTypes.bool
   } ;
-  var PopperUnstyled$1 = PopperUnstyled;
+  var BasePopper = Popper$2;
 
   // Is a vertical scrollbar displayed?
   function isOverflowing(container) {
@@ -13996,8 +14024,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getModalUtilityClass(slot) {
     return generateUtilityClass('MuiModal', slot);
   }
-  const modalUnstyledClasses = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
-  var modalUnstyledClasses$1 = modalUnstyledClasses;
+  const modalClasses$1 = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
+  var modalUnstyledClasses = modalClasses$1;
 
   const _excluded$25 = ["children", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
   const useUtilityClasses$1N = ownerState => {
@@ -14037,13 +14065,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * Demos:
    *
-   * - [Unstyled Modal](https://mui.com/base/react-modal/)
+   * - [Modal](https://mui.com/base/react-modal/)
    *
    * API:
    *
-   * - [ModalUnstyled API](https://mui.com/base/react-modal/components-api/#modal-unstyled)
+   * - [Modal API](https://mui.com/base/react-modal/components-api/#modal)
    */
-  const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUnstyled(props, forwardedRef) {
+  const Modal$2 = /*#__PURE__*/React__namespace.forwardRef(function Modal(props, forwardedRef) {
     var _props$ariaHidden, _ref;
     const {
         children,
@@ -14246,7 +14274,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }))
     });
   });
-  ModalUnstyled.propTypes /* remove-proptypes */ = {
+  Modal$2.propTypes /* remove-proptypes */ = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
     // |     To update them edit TypeScript types and run "yarn proptypes"  |
@@ -14363,7 +14391,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       root: PropTypes.elementType
     })
   } ;
-  var ModalUnstyled$1 = ModalUnstyled;
+  var ModalUnstyled = Modal$2;
 
   /**
    * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
@@ -14525,6 +14553,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       setActive(activeIndex);
     }
   }
+  function areValuesEqual(newValue, oldValue) {
+    if (typeof newValue === 'number' && typeof oldValue === 'number') {
+      return newValue === oldValue;
+    }
+    if (typeof newValue === 'object' && typeof oldValue === 'object') {
+      return areArraysEqual(newValue, oldValue);
+    }
+    return false;
+  }
   const axisProps = {
     horizontal: {
       offset: percent => ({
@@ -14578,7 +14615,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * Demos:
    *
-   * - [Unstyled Slider](https://mui.com/base/react-slider/#hook)
+   * - [Slider](https://mui.com/base/react-slider/#hook)
    *
    * API:
    *
@@ -14727,7 +14764,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
       setValueState(newValue);
       setFocusedThumbIndex(index);
-      if (handleChange) {
+      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
         handleChange(event, newValue, index);
       }
       if (onChangeCommitted) {
@@ -14830,7 +14867,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       if (!dragging && moveCount.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
         setDragging(true);
       }
-      if (handleChange && newValue !== valueDerived) {
+      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
         handleChange(nativeEvent, newValue, activeIndex);
       }
     });
@@ -14885,7 +14922,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           setActive
         });
         setValueState(newValue);
-        if (handleChange) {
+        if (handleChange && !areValuesEqual(newValue, valueDerived)) {
           handleChange(nativeEvent, newValue, activeIndex);
         }
       }
@@ -14952,7 +14989,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           setActive
         });
         setValueState(newValue);
-        if (handleChange) {
+        if (handleChange && !areValuesEqual(newValue, valueDerived)) {
           handleChange(event, newValue, activeIndex);
         }
       }
@@ -15042,7 +15079,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * Demos:
    *
-   * - [Unstyled Snackbar](https://mui.com/base/react-snackbar/#hook)
+   * - [Snackbar](https://mui.com/base/react-snackbar/#hook)
    *
    * API:
    *
@@ -20524,8 +20561,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var AppBar$1 = AppBar;
 
-  const _excluded$1R = ["components", "componentsProps", "slots", "slotProps"];
-  const PopperRoot = styled$1(PopperUnstyled$1, {
+  const _excluded$1R = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+  const PopperRoot = styled$1(BasePopper, {
     name: 'MuiPopper',
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -20551,20 +20588,44 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       name: 'MuiPopper'
     });
     const {
+        anchorEl,
+        component,
         components,
         componentsProps,
+        container,
+        disablePortal,
+        keepMounted,
+        modifiers,
+        open,
+        placement,
+        popperOptions,
+        popperRef,
+        transition,
         slots,
         slotProps
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1R);
     const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
+    const otherProps = _extends({
+      anchorEl,
+      component,
+      container,
+      disablePortal,
+      keepMounted,
+      modifiers,
+      open,
+      placement,
+      popperOptions,
+      popperRef,
+      transition
+    }, other);
     return /*#__PURE__*/jsxRuntime_1(PopperRoot, _extends({
       direction: theme == null ? void 0 : theme.direction,
       slots: {
         root: RootComponent
       },
       slotProps: slotProps != null ? slotProps : componentsProps
-    }, other, {
+    }, otherProps, {
       ref: ref
     }));
   });
@@ -22232,7 +22293,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         paddingRight: 52 + 4 + 9
       },
       [`& .${autocompleteClasses$1.input}`]: {
-        padding: '7.5px 4px 7.5px 6px'
+        padding: '7.5px 4px 7.5px 5px'
       },
       [`& .${autocompleteClasses$1.endAdornment}`]: {
         right: 9
@@ -22245,7 +22306,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       paddingBottom: 6,
       paddingLeft: 6,
       [`& .${autocompleteClasses$1.input}`]: {
-        padding: '2.5px 4px 2.5px 6px'
+        padding: '2.5px 4px 2.5px 8px'
       }
     },
     [`& .${filledInputClasses$1.root}`]: {
@@ -25001,6 +25062,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => {
     var _theme$palette$getCon, _theme$palette;
+    const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+    const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
     return _extends({}, theme.typography.button, {
       minWidth: 64,
       padding: '6px 16px',
@@ -25029,7 +25092,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           backgroundColor: 'transparent'
         }
       }, ownerState.variant === 'contained' && {
-        backgroundColor: (theme.vars || theme).palette.grey.A100,
+        backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
         boxShadow: (theme.vars || theme).shadows[4],
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
@@ -25072,7 +25135,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       color: theme.vars ?
       // this is safe because grey does not change between default light/dark mode
       theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
-      backgroundColor: (theme.vars || theme).palette.grey[300],
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
       boxShadow: (theme.vars || theme).shadows[2]
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
       color: (theme.vars || theme).palette[ownerState.color].contrastText,
@@ -27146,8 +27209,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  const _excluded$1s = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
-  const modalClasses = modalUnstyledClasses$1;
+  const _excluded$1s = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+  const modalClasses = modalUnstyledClasses;
   const ModalRoot = styled$1('div', {
     name: 'MuiModal',
     slot: 'Root',
@@ -27206,6 +27269,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className,
         closeAfterTransition = false,
         children,
+        container,
         component,
         components = {},
         componentsProps = {},
@@ -27217,6 +27281,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         disableScrollLock = false,
         hideBackdrop = false,
         keepMounted = false,
+        onBackdropClick,
+        onClose,
+        open,
         slotProps,
         slots,
         // eslint-disable-next-line react/prop-types
@@ -27225,6 +27292,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       other = _objectWithoutPropertiesLoose(props, _excluded$1s);
     const [exited, setExited] = React__namespace.useState(true);
     const commonProps = {
+      container,
       closeAfterTransition,
       disableAutoFocus,
       disableEnforceFocus,
@@ -27233,7 +27301,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableRestoreFocus,
       disableScrollLock,
       hideBackdrop,
-      keepMounted
+      keepMounted,
+      onBackdropClick,
+      onClose,
+      open
     };
     const ownerState = _extends({}, props, commonProps, {
       exited
@@ -27242,7 +27313,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
     const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
     const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-    return /*#__PURE__*/jsxRuntime_1(ModalUnstyled$1, _extends({
+    return /*#__PURE__*/jsxRuntime_1(ModalUnstyled, _extends({
       slots: {
         root: RootSlot,
         backdrop: BackdropSlot
@@ -29767,7 +29838,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           if (!isMuiElement(child, ['Input', 'Select'])) {
             return;
           }
-          if (isFilled(child.props, true)) {
+          if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
             initialFilled = true;
           }
         });
@@ -29919,20 +29990,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getFormControlLabelUtilityClasses(slot) {
     return generateUtilityClass('MuiFormControlLabel', slot);
   }
-  const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
+  const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
   var formControlLabelClasses$1 = formControlLabelClasses;
 
-  const _excluded$1g = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
+  const _excluded$1g = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
   const useUtilityClasses$13 = ownerState => {
     const {
       classes,
       disabled,
       labelPlacement,
-      error
+      error,
+      required
     } = ownerState;
     const slots = {
-      root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error'],
-      label: ['label', disabled && 'disabled']
+      root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error', required && 'required'],
+      label: ['label', disabled && 'disabled'],
+      asterisk: ['asterisk', error && 'error']
     };
     return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
   };
@@ -29981,13 +30054,24 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }
   }));
+  const AsteriskComponent$1 = styled$1('span', {
+    name: 'MuiFormControlLabel',
+    slot: 'Asterisk',
+    overridesResolver: (props, styles) => styles.asterisk
+  })(({
+    theme
+  }) => ({
+    [`&.${formControlLabelClasses$1.error}`]: {
+      color: (theme.vars || theme).palette.error.main
+    }
+  }));
 
   /**
    * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
    * Use this component if you want to display an extra label.
    */
   const FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
-    var _slotProps$typography;
+    var _ref, _slotProps$typography;
     const props = useThemeProps({
       props: inProps,
       name: 'MuiFormControlLabel'
@@ -30000,19 +30084,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         disableTypography,
         label: labelProp,
         labelPlacement = 'end',
+        required: requiredProp,
         slotProps = {}
       } = props,
       other = _objectWithoutPropertiesLoose(props, _excluded$1g);
     const muiFormControl = useFormControl();
-    let disabled = disabledProp;
-    if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
-      disabled = control.props.disabled;
-    }
-    if (typeof disabled === 'undefined' && muiFormControl) {
-      disabled = muiFormControl.disabled;
-    }
+    const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
+    const required = requiredProp != null ? requiredProp : control.props.required;
     const controlProps = {
-      disabled
+      disabled,
+      required
     };
     ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
       if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
@@ -30027,6 +30108,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const ownerState = _extends({}, props, {
       disabled,
       labelPlacement,
+      required,
       error: fcs.error
     });
     const classes = useUtilityClasses$13(ownerState);
@@ -30045,7 +30127,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState,
       ref: ref
     }, other, {
-      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label]
+      children: [/*#__PURE__*/React__namespace.cloneElement(control, controlProps), label, required && /*#__PURE__*/jsxRuntime_2(AsteriskComponent$1, {
+        ownerState: ownerState,
+        "aria-hidden": true,
+        className: classes.asterisk,
+        children: ["\u2009", '*']
+      })]
     }));
   });
   FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -30108,6 +30195,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * You can pull out the new checked state by accessing `event.target.checked` (boolean).
      */
     onChange: PropTypes.func,
+    /**
+     * If `true`, the label will indicate that the `input` is required.
+     */
+    required: PropTypes.bool,
     /**
      * The props used for each slot inside.
      * @default {}
@@ -43535,7 +43626,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /**
      * 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),
+     * 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.
@@ -47498,7 +47589,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const setMeasurements = () => {
       scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
     };
-    React__namespace.useEffect(() => {
+    useEnhancedEffect$1(() => {
       const handleResize = debounce$1(() => {
         const prevHeight = scrollbarHeight.current;
         setMeasurements();
@@ -49482,7 +49573,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.alertTitleClasses = alertTitleClasses$1;
   exports.alpha = alpha;
   exports.appBarClasses = appBarClasses$1;
-  exports.ariaHidden = ariaHidden;
   exports.autocompleteClasses = autocompleteClasses$1;
   exports.avatarClasses = avatarClasses$1;
   exports.avatarGroupClasses = avatarGroupClasses$1;
@@ -49611,7 +49701,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getMenuItemUtilityClass = getMenuItemUtilityClass;
   exports.getMenuUtilityClass = getMenuUtilityClass;
   exports.getMobileStepperUtilityClass = getMobileStepperUtilityClass;
-  exports.getModalUtilityClass = getModalUtilityClass;
   exports.getNativeSelectUtilityClasses = getNativeSelectUtilityClasses;
   exports.getOffsetLeft = getOffsetLeft;
   exports.getOffsetTop = getOffsetTop;
@@ -49691,7 +49780,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.menuItemClasses = menuItemClasses$1;
   exports.mobileStepperClasses = mobileStepperClasses$1;
   exports.modalClasses = modalClasses;
-  exports.modalUnstyledClasses = modalUnstyledClasses$1;
   exports.nativeSelectClasses = nativeSelectClasses$1;
   exports.outlinedInputClasses = outlinedInputClasses$1;
   exports.ownerDocument = ownerDocument;