@mui/material 5.15.6 → 5.15.8

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.6
+ * @mui/material v5.15.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -4992,7 +4992,7 @@
     injectFirst: PropTypes.bool
   } ;
 
-  function isEmpty$4(obj) {
+  function isEmpty$3(obj) {
     return obj === undefined || obj === null || Object.keys(obj).length === 0;
   }
   function GlobalStyles$2(props) {
@@ -5000,7 +5000,7 @@
       _props$defaultTheme = props.defaultTheme,
       defaultTheme = _props$defaultTheme === void 0 ? {} : _props$defaultTheme;
     var globalStyles = typeof styles === 'function' ? function (themeInput) {
-      return styles(isEmpty$4(themeInput) ? defaultTheme : themeInput);
+      return styles(isEmpty$3(themeInput) ? defaultTheme : themeInput);
     } : styles;
     return /*#__PURE__*/jsxRuntime_1(Global, {
       styles: globalStyles
@@ -5764,9 +5764,104 @@
     }, refs);
   }
 
+  var UNINITIALIZED = {};
+
+  /**
+   * A React.useRef() that is initialized lazily with a function. Note that it accepts an optional
+   * initialization argument, so the initialization function doesn't need to be an inline closure.
+   *
+   * @usage
+   *   const ref = useLazyRef(sortColumns, columns)
+   */
+  function useLazyRef(init, initArg) {
+    var ref = React__namespace.useRef(UNINITIALIZED);
+    if (ref.current === UNINITIALIZED) {
+      ref.current = init(initArg);
+    }
+    return ref;
+  }
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
+    }
+  }
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
+  var EMPTY = [];
+
+  /**
+   * A React.useEffect equivalent that runs once, when the component is mounted.
+   */
+  function useOnMount(fn) {
+    /* eslint-disable react-hooks/exhaustive-deps */
+    React__namespace.useEffect(fn, EMPTY);
+    /* eslint-enable react-hooks/exhaustive-deps */
+  }
+
+  var Timeout = /*#__PURE__*/function () {
+    function Timeout() {
+      var _this = this;
+      _classCallCheck(this, Timeout);
+      this.currentId = 0;
+      this.clear = function () {
+        if (_this.currentId !== 0) {
+          clearTimeout(_this.currentId);
+          _this.currentId = 0;
+        }
+      };
+      this.disposeEffect = function () {
+        return _this.clear;
+      };
+    }
+    _createClass(Timeout, [{
+      key: "start",
+      value:
+      /**
+       * Executes `fn` after `delay`, clearing any previously scheduled call.
+       */
+      function start(delay, fn) {
+        var _this2 = this;
+        this.clear();
+        this.currentId = setTimeout(function () {
+          _this2.currentId = 0;
+          fn();
+        }, delay);
+      }
+    }], [{
+      key: "create",
+      value: function create() {
+        return new Timeout();
+      }
+    }]);
+    return Timeout;
+  }();
+  function useTimeout() {
+    var timeout = useLazyRef(Timeout.create).current;
+    useOnMount(timeout.disposeEffect);
+    return timeout;
+  }
+
   var hadKeyboardEvent = true;
   var hadFocusVisibleRecently = false;
-  var hadFocusVisibleRecentlyTimeout;
+  var hadFocusVisibleRecentlyTimeout = new Timeout();
   var inputTypesWhitelist = {
     text: true,
     search: true,
@@ -5886,10 +5981,9 @@
         // If we don't see a visibility change within 100ms, it's probably a
         // regular focus change.
         hadFocusVisibleRecently = true;
-        window.clearTimeout(hadFocusVisibleRecentlyTimeout);
-        hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
+        hadFocusVisibleRecentlyTimeout.start(100, function () {
           hadFocusVisibleRecently = false;
-        }, 100);
+        });
         isFocusVisibleRef.current = false;
         return true;
       }
@@ -7405,6 +7499,79 @@
   styleFunctionSx.filterProps = ['sx'];
   var styleFunctionSx$1 = styleFunctionSx;
 
+  /**
+   * A universal utility to style components with multiple color modes. Always use it from the theme object.
+   * It works with:
+   *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
+   *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+   *  - Zero-runtime engine
+   *
+   * Tips: Use an array over object spread and place `theme.applyStyles()` last.
+   *
+   * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
+   *
+   * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
+   *
+   * @example
+   * 1. using with `styled`:
+   * ```jsx
+   *   const Component = styled('div')(({ theme }) => [
+   *     { background: '#e5e5e5' },
+   *     theme.applyStyles('dark', {
+   *       background: '#1c1c1c',
+   *       color: '#fff',
+   *     }),
+   *   ]);
+   * ```
+   *
+   * @example
+   * 2. using with `sx` prop:
+   * ```jsx
+   *   <Box sx={theme => [
+   *     { background: '#e5e5e5' },
+   *     theme.applyStyles('dark', {
+   *        background: '#1c1c1c',
+   *        color: '#fff',
+   *      }),
+   *     ]}
+   *   />
+   * ```
+   *
+   * @example
+   * 3. theming a component:
+   * ```jsx
+   *   extendTheme({
+   *     components: {
+   *       MuiButton: {
+   *         styleOverrides: {
+   *           root: ({ theme }) => [
+   *             { background: '#e5e5e5' },
+   *             theme.applyStyles('dark', {
+   *               background: '#1c1c1c',
+   *               color: '#fff',
+   *             }),
+   *           ],
+   *         },
+   *       }
+   *     }
+   *   })
+   *```
+   */
+  function applyStyles$2(key, styles) {
+    // @ts-expect-error this is 'any' type
+    var theme = this;
+    if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
+      // If CssVarsProvider is used as a provider,
+      // returns '* :where([data-mui-color-scheme="light|dark"]) &'
+      var selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+      return _defineProperty({}, selector, styles);
+    }
+    if (theme.palette.mode === key) {
+      return styles;
+    }
+    return {};
+  }
+
   function createTheme$1() {
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var _options$breakpoints = options.breakpoints,
@@ -7428,6 +7595,7 @@
       spacing: spacing,
       shape: _extends({}, shape$1, shapeInput)
     }, other);
+    muiTheme.applyStyles = applyStyles$2;
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
@@ -7561,29 +7729,6 @@
     return Box;
   }
 
-  function isEmpty$3(string) {
-    return string.length === 0;
-  }
-
-  /**
-   * Generates string classKey based on the properties provided. It starts with the
-   * variant if defined, and then it appends all other properties in alphabetical order.
-   * @param {object} props - the properties for which the classKey should be created.
-   */
-  function propsToClassKey(props) {
-    var variant = props.variant,
-      other = _objectWithoutProperties(props, ["variant"]);
-    var classKey = variant || '';
-    Object.keys(other).sort().forEach(function (key) {
-      if (key === 'color') {
-        classKey += isEmpty$3(classKey) ? props[key] : capitalize(props[key]);
-      } else {
-        classKey += "".concat(isEmpty$3(classKey) ? key : capitalize(key)).concat(capitalize(props[key].toString()));
-      }
-    });
-    return classKey;
-  }
-
   function isEmpty$2(obj) {
     return Object.keys(obj).length === 0;
   }
@@ -7596,73 +7741,6 @@
     // it's a lowercase character
     tag.charCodeAt(0) > 96;
   }
-  var getStyleOverrides = function getStyleOverrides(name, theme) {
-    if (theme.components && theme.components[name] && theme.components[name].styleOverrides) {
-      return theme.components[name].styleOverrides;
-    }
-    return null;
-  };
-  var transformVariants = function transformVariants(variants) {
-    var numOfCallbacks = 0;
-    var variantsStyles = {};
-    if (variants) {
-      variants.forEach(function (definition) {
-        var key = '';
-        if (typeof definition.props === 'function') {
-          key = "callback".concat(numOfCallbacks);
-          numOfCallbacks += 1;
-        } else {
-          key = propsToClassKey(definition.props);
-        }
-        variantsStyles[key] = definition.style;
-      });
-    }
-    return variantsStyles;
-  };
-  var getVariantStyles = function getVariantStyles(name, theme) {
-    var variants = [];
-    if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
-      variants = theme.components[name].variants;
-    }
-    return transformVariants(variants);
-  };
-  var variantsResolver = function variantsResolver(props, styles, variants) {
-    var _props$ownerState = props.ownerState,
-      ownerState = _props$ownerState === void 0 ? {} : _props$ownerState;
-    var variantsStyles = [];
-    var numOfCallbacks = 0;
-    if (variants) {
-      variants.forEach(function (variant) {
-        var isMatch = true;
-        if (typeof variant.props === 'function') {
-          var propsToCheck = _extends({}, props, ownerState);
-          isMatch = variant.props(propsToCheck);
-        } else {
-          Object.keys(variant.props).forEach(function (key) {
-            if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
-              isMatch = false;
-            }
-          });
-        }
-        if (isMatch) {
-          if (typeof variant.props === 'function') {
-            variantsStyles.push(styles["callback".concat(numOfCallbacks)]);
-          } else {
-            variantsStyles.push(styles[propsToClassKey(variant.props)]);
-          }
-        }
-        if (typeof variant.props === 'function') {
-          numOfCallbacks += 1;
-        }
-      });
-    }
-    return variantsStyles;
-  };
-  var themeVariantsResolver = function themeVariantsResolver(props, styles, theme, name) {
-    var _theme$components;
-    var 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) {
@@ -7689,28 +7767,50 @@
       return styles[slot];
     };
   }
-  var muiStyledFunctionResolver = function muiStyledFunctionResolver(_ref2) {
-    var styledArg = _ref2.styledArg,
-      props = _ref2.props,
-      defaultTheme = _ref2.defaultTheme,
-      themeId = _ref2.themeId;
-    var resolvedStyles = styledArg(_extends({}, props, {
-      theme: resolveTheme(_extends({}, props, {
-        defaultTheme: defaultTheme,
-        themeId: themeId
-      }))
-    }));
-    var optionalVariants;
-    if (resolvedStyles && resolvedStyles.variants) {
-      optionalVariants = resolvedStyles.variants;
-      delete resolvedStyles.variants;
+  function processStyleArg(callableStyle, _ref2) {
+    var ownerState = _ref2.ownerState,
+      props = _objectWithoutProperties(_ref2, ["ownerState"]);
+    var resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
+      ownerState: ownerState
+    }, props)) : callableStyle;
+    if (Array.isArray(resolvedStylesArg)) {
+      return resolvedStylesArg.flatMap(function (resolvedStyle) {
+        return processStyleArg(resolvedStyle, _extends({
+          ownerState: ownerState
+        }, props));
+      });
     }
-    if (optionalVariants) {
-      var variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
-      return [resolvedStyles].concat(_toConsumableArray(variantsStyles));
+    if (!!resolvedStylesArg && _typeof(resolvedStylesArg) === 'object' && Array.isArray(resolvedStylesArg.variants)) {
+      var _resolvedStylesArg$va = resolvedStylesArg.variants,
+        variants = _resolvedStylesArg$va === void 0 ? [] : _resolvedStylesArg$va,
+        otherStyles = _objectWithoutProperties(resolvedStylesArg, ["variants"]);
+      var result = otherStyles;
+      variants.forEach(function (variant) {
+        var isMatch = true;
+        if (typeof variant.props === 'function') {
+          isMatch = variant.props(_extends({
+            ownerState: ownerState
+          }, props));
+        } else {
+          Object.keys(variant.props).forEach(function (key) {
+            if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
+              isMatch = false;
+            }
+          });
+        }
+        if (isMatch) {
+          if (!Array.isArray(result)) {
+            result = [result];
+          }
+          result.push(typeof variant.style === 'function' ? variant.style(_extends({
+            ownerState: ownerState
+          }, props)) : variant.style);
+        }
+      });
+      return result;
     }
-    return resolvedStyles;
-  };
+    return resolvedStylesArg;
+  }
   function createStyled() {
     var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var themeId = input.themeId,
@@ -7774,102 +7874,65 @@
         shouldForwardProp: shouldForwardPropOption,
         label: label
       }, options));
-      var muiStyledResolver = function muiStyledResolver(styleArg) {
-        for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          expressions[_key - 1] = arguments[_key];
-        }
-        var expressionsWithDefaultTheme = expressions ? expressions.map(function (stylesArg) {
-          // 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.
-          if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
-            return function (props) {
-              return muiStyledFunctionResolver({
-                styledArg: stylesArg,
-                props: props,
-                defaultTheme: defaultTheme,
-                themeId: themeId
-              });
-            };
-          }
-          if (isPlainObject(stylesArg)) {
-            var transformedStylesArg = stylesArg;
-            var styledArgVariants;
-            if (stylesArg && stylesArg.variants) {
-              styledArgVariants = stylesArg.variants;
-              delete transformedStylesArg.variants;
-              transformedStylesArg = function transformedStylesArg(props) {
-                var result = stylesArg;
-                var variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
-                variantStyles.forEach(function (variantStyle) {
-                  result = deepmerge(result, variantStyle);
-                });
-                return result;
-              };
-            }
-            return transformedStylesArg;
-          }
-          return stylesArg;
-        }) : [];
-        var transformedStyleArg = styleArg;
-        if (isPlainObject(styleArg)) {
-          var styledArgVariants;
-          if (styleArg && styleArg.variants) {
-            styledArgVariants = styleArg.variants;
-            delete transformedStyleArg.variants;
-            transformedStyleArg = function transformedStyleArg(props) {
-              var result = styleArg;
-              var variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
-              variantStyles.forEach(function (variantStyle) {
-                result = deepmerge(result, variantStyle);
-              });
-              return result;
-            };
-          }
-        } else if (typeof styleArg === 'function' &&
+      var transformStyleArg = function transformStyleArg(stylesArg) {
         // 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 = function transformedStyleArg(props) {
-            return muiStyledFunctionResolver({
-              styledArg: styleArg,
-              props: props,
-              defaultTheme: defaultTheme,
-              themeId: themeId
-            });
+        if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
+          return function (props) {
+            return processStyleArg(stylesArg, _extends({}, props, {
+              theme: resolveTheme({
+                theme: props.theme,
+                defaultTheme: defaultTheme,
+                themeId: themeId
+              })
+            }));
           };
         }
+        return stylesArg;
+      };
+      var muiStyledResolver = function muiStyledResolver(styleArg) {
+        var transformedStyleArg = transformStyleArg(styleArg);
+        for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          expressions[_key - 1] = arguments[_key];
+        }
+        var expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
         if (componentName && overridesResolver) {
           expressionsWithDefaultTheme.push(function (props) {
             var theme = resolveTheme(_extends({}, props, {
               defaultTheme: defaultTheme,
               themeId: themeId
             }));
-            var styleOverrides = getStyleOverrides(componentName, theme);
-            if (styleOverrides) {
-              var resolvedStyleOverrides = {};
-              Object.entries(styleOverrides).forEach(function (_ref3) {
-                var _ref4 = _slicedToArray(_ref3, 2),
-                  slotKey = _ref4[0],
-                  slotStyle = _ref4[1];
-                resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
-                  theme: theme
-                })) : slotStyle;
-              });
-              return overridesResolver(props, resolvedStyleOverrides);
+            if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
+              return null;
             }
-            return null;
+            var styleOverrides = theme.components[componentName].styleOverrides;
+            var resolvedStyleOverrides = {};
+            // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
+            Object.entries(styleOverrides).forEach(function (_ref3) {
+              var _ref4 = _slicedToArray(_ref3, 2),
+                slotKey = _ref4[0],
+                slotStyle = _ref4[1];
+              resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
+                theme: theme
+              }));
+            });
+            return overridesResolver(props, resolvedStyleOverrides);
           });
         }
         if (componentName && !skipVariantsResolver) {
           expressionsWithDefaultTheme.push(function (props) {
+            var _theme$components;
             var theme = resolveTheme(_extends({}, props, {
               defaultTheme: defaultTheme,
               themeId: themeId
             }));
-            return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+            var themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
+            return processStyleArg({
+              variants: themeVariants
+            }, _extends({}, props, {
+              theme: theme
+            }));
           });
         }
         if (!skipSx) {
@@ -7918,7 +7981,7 @@
     return resolveProps(theme.components[name].defaultProps, props);
   }
 
-  function useThemeProps$1(_ref) {
+  function useThemeProps$2(_ref) {
     var props = _ref.props,
       name = _ref.name,
       defaultTheme = _ref.defaultTheme,
@@ -9243,7 +9306,7 @@
     }
   });
   var useThemePropsDefault$2 = function useThemePropsDefault(inProps) {
-    return useThemeProps$1({
+    return useThemeProps$2({
       props: inProps,
       name: 'MuiContainer',
       defaultTheme: defaultTheme$6
@@ -9631,7 +9694,7 @@
     }
   });
   function useThemePropsDefault$1(props) {
-    return useThemeProps$1({
+    return useThemeProps$2({
       props: props,
       name: 'MuiGrid',
       defaultTheme: defaultTheme$5
@@ -9795,7 +9858,7 @@
     }
   });
   function useThemePropsDefault(props) {
-    return useThemeProps$1({
+    return useThemeProps$2({
       props: props,
       name: 'MuiStack',
       defaultTheme: defaultTheme$4
@@ -10565,19 +10628,7 @@
       shadows: shadows$1.slice(),
       typography: createTypography(palette, typographyInput),
       transitions: createTransitions(transitionsInput),
-      zIndex: _extends({}, zIndex$1),
-      applyDarkStyles: function applyDarkStyles(css) {
-        if (this.vars) {
-          // If CssVarsProvider is used as a provider,
-          // returns ':where([data-mui-color-scheme="light|dark"]) &'
-          var selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
-          return _defineProperty({}, selector, css);
-        }
-        if (this.palette.mode === 'dark') {
-          return css;
-        }
-        return {};
-      }
+      zIndex: _extends({}, zIndex$1)
     });
     muiTheme = deepmerge(muiTheme, other);
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -10849,10 +10900,10 @@
     return theme[THEME_ID] || theme;
   }
 
-  function useThemeProps(_ref) {
+  function useThemeProps$1(_ref) {
     var props = _ref.props,
       name = _ref.name;
-    return useThemeProps$1({
+    return useThemeProps$2({
       props: props,
       name: name,
       defaultTheme: defaultTheme$3,
@@ -11343,7 +11394,7 @@
     };
   });
   var SvgIcon = /*#__PURE__*/React__namespace.forwardRef(function SvgIcon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSvgIcon'
     });
@@ -12587,7 +12638,7 @@
    * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
    */
   var Collapse = /*#__PURE__*/React__namespace.forwardRef(function Collapse(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCollapse'
     });
@@ -12619,17 +12670,12 @@
     });
     var classes = useUtilityClasses$1N(ownerState);
     var theme = useTheme();
-    var timer = React__namespace.useRef();
+    var timer = useTimeout();
     var wrapperRef = React__namespace.useRef(null);
     var autoTransitionDuration = React__namespace.useRef();
     var collapsedSize = typeof collapsedSizeProp === 'number' ? "".concat(collapsedSizeProp, "px") : collapsedSizeProp;
     var isHorizontal = orientation === 'horizontal';
     var size = isHorizontal ? 'width' : 'height';
-    React__namespace.useEffect(function () {
-      return function () {
-        clearTimeout(timer.current);
-      };
-    }, []);
     var nodeRef = React__namespace.useRef(null);
     var handleRef = useForkRef(ref, nodeRef);
     var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
@@ -12728,7 +12774,7 @@
     });
     var handleAddEndListener = function handleAddEndListener(next) {
       if (timeout === 'auto') {
-        timer.current = setTimeout(next, autoTransitionDuration.current || 0);
+        timer.start(autoTransitionDuration.current || 0, next);
       }
       if (addEndListener) {
         // Old call signature before `react-transition-group` implemented `nodeRef`
@@ -12920,7 +12966,7 @@
     }));
   });
   var Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPaper'
     });
@@ -13380,7 +13426,7 @@
     }));
   });
   var Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAccordion'
     });
@@ -13557,13 +13603,13 @@
     /**
      * The component used for the transition.
      * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-     * @deprecated Use `slots.transition` instead. This prop will be removed in v7.
+     * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     TransitionComponent: PropTypes.elementType,
     /**
      * Props applied to the transition element.
      * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
-     * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7.
+     * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     TransitionProps: PropTypes.object
   } ;
@@ -13604,7 +13650,7 @@
     });
   });
   var AccordionActions = /*#__PURE__*/React__namespace.forwardRef(function AccordionActions(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAccordionActions'
     });
@@ -13677,7 +13723,7 @@
     };
   });
   var AccordionDetails = /*#__PURE__*/React__namespace.forwardRef(function AccordionDetails(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAccordionDetails'
     });
@@ -13858,7 +13904,7 @@
    * TODO v5: Make private
    */
   var TouchRipple = /*#__PURE__*/React__namespace.forwardRef(function TouchRipple(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTouchRipple'
     });
@@ -13884,18 +13930,11 @@
     var ignoringMouseDown = React__namespace.useRef(false);
     // We use a timer in order to only show the ripples for touch "click" like events.
     // We don't want to display the ripple for touch scroll events.
-    var startTimer = React__namespace.useRef(0);
+    var startTimer = useTimeout();
 
     // This is the hook called once the previous timeout is ready.
     var startTimerCommit = React__namespace.useRef(null);
     var container = React__namespace.useRef(null);
-    React__namespace.useEffect(function () {
-      return function () {
-        if (startTimer.current) {
-          clearTimeout(startTimer.current);
-        }
-      };
-    }, []);
     var startCommit = React__namespace.useCallback(function (params) {
       var pulsate = params.pulsate,
         rippleX = params.rippleX,
@@ -13991,12 +14030,13 @@
             });
           };
           // Delay the execution of the ripple effect.
-          startTimer.current = setTimeout(function () {
+          // We have to make a tradeoff with this delay value.
+          startTimer.start(DELAY_RIPPLE, function () {
             if (startTimerCommit.current) {
               startTimerCommit.current();
               startTimerCommit.current = null;
             }
-          }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
+          });
         }
       } else {
         startCommit({
@@ -14007,21 +14047,21 @@
           cb: cb
         });
       }
-    }, [centerProp, startCommit]);
+    }, [centerProp, startCommit, startTimer]);
     var pulsate = React__namespace.useCallback(function () {
       start({}, {
         pulsate: true
       });
     }, [start]);
     var stop = React__namespace.useCallback(function (event, cb) {
-      clearTimeout(startTimer.current);
+      startTimer.clear();
 
       // The touch interaction occurs too quickly.
       // We still want to show ripple effect.
       if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
         startTimerCommit.current();
         startTimerCommit.current = null;
-        startTimer.current = setTimeout(function () {
+        startTimer.start(0, function () {
           stop(event, cb);
         });
         return;
@@ -14034,7 +14074,7 @@
         return oldRipples;
       });
       rippleCallback.current = cb;
-    }, []);
+    }, [startTimer]);
     React__namespace.useImperativeHandle(ref, function () {
       return {
         pulsate: pulsate,
@@ -14141,7 +14181,7 @@
    * It contains a load of style reset and some focus/ripple logic.
    */
   var ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function ButtonBase(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiButtonBase'
     });
@@ -14633,7 +14673,7 @@
     });
   });
   var AccordionSummary = /*#__PURE__*/React__namespace.forwardRef(function AccordionSummary(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAccordionSummary'
     });
@@ -14820,7 +14860,7 @@
    * regarding the available icon options.
    */
   var IconButton = /*#__PURE__*/React__namespace.forwardRef(function IconButton(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiIconButton'
     });
@@ -15054,7 +15094,7 @@
   };
   var Alert = /*#__PURE__*/React__namespace.forwardRef(function Alert(inProps, ref) {
     var _ref4, _slots$closeButton, _ref5, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAlert'
     });
@@ -15328,7 +15368,7 @@
     return colorTransformations$1[color] || color;
   };
   var Typography = /*#__PURE__*/React__namespace.forwardRef(function Typography(inProps, ref) {
-    var themeProps = useThemeProps({
+    var themeProps = useThemeProps$1({
       props: inProps,
       name: 'MuiTypography'
     });
@@ -15475,7 +15515,7 @@
     };
   });
   var AlertTitle = /*#__PURE__*/React__namespace.forwardRef(function AlertTitle(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAlertTitle'
     });
@@ -15613,7 +15653,7 @@
     }));
   });
   var AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAppBar'
     });
@@ -16255,112 +16295,695 @@
     FocusTrap['propTypes' + ''] = exactProp(FocusTrap.propTypes);
   }
 
-  var top = 'top';
-  var bottom = 'bottom';
-  var right = 'right';
-  var left = 'left';
-  var auto = 'auto';
-  var basePlacements = [top, bottom, right, left];
-  var start = 'start';
-  var end = 'end';
-  var clippingParents = 'clippingParents';
-  var viewport = 'viewport';
-  var popper = 'popper';
-  var reference = 'reference';
-  var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
-    return acc.concat([placement + "-" + start, placement + "-" + end]);
-  }, []);
-  var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
-    return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
-  }, []); // modifiers that need to read the DOM
-
-  var beforeRead = 'beforeRead';
-  var read = 'read';
-  var afterRead = 'afterRead'; // pure-logic modifiers
-
-  var beforeMain = 'beforeMain';
-  var main = 'main';
-  var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
-
-  var beforeWrite = 'beforeWrite';
-  var write = 'write';
-  var afterWrite = 'afterWrite';
-  var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
-
-  function getNodeName(element) {
-    return element ? (element.nodeName || '').toLowerCase() : null;
+  function getContainer$1(container) {
+    return typeof container === 'function' ? container() : container;
   }
 
-  function getWindow(node) {
-    if (node == null) {
-      return window;
+  /**
+   * Portals provide a first-class way to render children into a DOM node
+   * that exists outside the DOM hierarchy of the parent component.
+   *
+   * Demos:
+   *
+   * - [Portal](https://mui.com/base-ui/react-portal/)
+   *
+   * API:
+   *
+   * - [Portal API](https://mui.com/base-ui/react-portal/components-api/#portal)
+   */
+  var Portal = /*#__PURE__*/React__namespace.forwardRef(function Portal(props, forwardedRef) {
+    var children = props.children,
+      container = props.container,
+      _props$disablePortal = props.disablePortal,
+      disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal;
+    var _React$useState = React__namespace.useState(null),
+      mountNode = _React$useState[0],
+      setMountNode = _React$useState[1]; // @ts-expect-error TODO upstream fix
+    var handleRef = useForkRef( /*#__PURE__*/React__namespace.isValidElement(children) ? children.ref : null, forwardedRef);
+    useEnhancedEffect$1(function () {
+      if (!disablePortal) {
+        setMountNode(getContainer$1(container) || document.body);
+      }
+    }, [container, disablePortal]);
+    useEnhancedEffect$1(function () {
+      if (mountNode && !disablePortal) {
+        setRef(forwardedRef, mountNode);
+        return function () {
+          setRef(forwardedRef, null);
+        };
+      }
+      return undefined;
+    }, [forwardedRef, mountNode, disablePortal]);
+    if (disablePortal) {
+      if ( /*#__PURE__*/React__namespace.isValidElement(children)) {
+        var newProps = {
+          ref: handleRef
+        };
+        return /*#__PURE__*/React__namespace.cloneElement(children, newProps);
+      }
+      return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+        children: children
+      });
     }
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: mountNode ? /*#__PURE__*/ReactDOM__namespace.createPortal(children, mountNode) : mountNode
+    });
+  });
+  Portal.propTypes /* remove-proptypes */ = {
+    // ┌────────────────────────────── Warning ──────────────────────────────┐
+    // │ These PropTypes are generated from the TypeScript type definitions. │
+    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+    // └─────────────────────────────────────────────────────────────────────┘
+    /**
+     * The children to render into the `container`.
+     */
+    children: PropTypes.node,
+    /**
+     * An HTML element or function that returns one.
+     * The `container` will have the portal children appended to it.
+     *
+     * You can also provide a callback, which is called in a React layout effect.
+     * This lets you set the container from a ref, and also makes server-side rendering possible.
+     *
+     * By default, it uses the body of the top-level document object,
+     * so it's simply `document.body` most of the time.
+     */
+    container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
+    /**
+     * The `children` will be under the DOM hierarchy of the parent component.
+     * @default false
+     */
+    disablePortal: PropTypes.bool
+  } ;
+  {
+    // eslint-disable-next-line
+    Portal['propTypes' + ''] = exactProp(Portal.propTypes);
+  }
 
-    if (node.toString() !== '[object Window]') {
-      var ownerDocument = node.ownerDocument;
-      return ownerDocument ? ownerDocument.defaultView || window : window;
+  // Is a vertical scrollbar displayed?
+  function isOverflowing(container) {
+    var doc = ownerDocument(container);
+    if (doc.body === container) {
+      return ownerWindow(container).innerWidth > doc.documentElement.clientWidth;
     }
-
-    return node;
+    return container.scrollHeight > container.clientHeight;
   }
-
-  function isElement(node) {
-    var OwnElement = getWindow(node).Element;
-    return node instanceof OwnElement || node instanceof Element;
+  function ariaHidden(element, show) {
+    if (show) {
+      element.setAttribute('aria-hidden', 'true');
+    } else {
+      element.removeAttribute('aria-hidden');
+    }
   }
-
-  function isHTMLElement$1(node) {
-    var OwnElement = getWindow(node).HTMLElement;
-    return node instanceof OwnElement || node instanceof HTMLElement;
+  function getPaddingRight(element) {
+    return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
   }
-
-  function isShadowRoot(node) {
-    // IE 11 has no ShadowRoot
-    if (typeof ShadowRoot === 'undefined') {
+  function isAriaHiddenForbiddenOnElement(element) {
+    // The forbidden HTML tags are the ones from ARIA specification that
+    // can be children of body and can't have aria-hidden attribute.
+    // cf. https://www.w3.org/TR/html-aria/#docconformance
+    var forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK'];
+    var isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
+    var isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
+    return isForbiddenTagName || isInputHidden;
+  }
+  function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
+    var blacklist = [mountElement, currentElement].concat(_toConsumableArray(elementsToExclude));
+    [].forEach.call(container.children, function (element) {
+      var isNotExcludedElement = blacklist.indexOf(element) === -1;
+      var isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
+      if (isNotExcludedElement && isNotForbiddenElement) {
+        ariaHidden(element, show);
+      }
+    });
+  }
+  function findIndexOf(items, callback) {
+    var idx = -1;
+    items.some(function (item, index) {
+      if (callback(item)) {
+        idx = index;
+        return true;
+      }
       return false;
-    }
-
-    var OwnElement = getWindow(node).ShadowRoot;
-    return node instanceof OwnElement || node instanceof ShadowRoot;
+    });
+    return idx;
   }
+  function handleContainer(containerInfo, props) {
+    var restoreStyle = [];
+    var container = containerInfo.container;
+    if (!props.disableScrollLock) {
+      if (isOverflowing(container)) {
+        // Compute the size before applying overflow hidden to avoid any scroll jumps.
+        var scrollbarSize = getScrollbarSize(ownerDocument(container));
+        restoreStyle.push({
+          value: container.style.paddingRight,
+          property: 'padding-right',
+          el: container
+        });
+        // Use computed style, here to get the real padding to add our scrollbar width.
+        container.style.paddingRight = "".concat(getPaddingRight(container) + scrollbarSize, "px");
 
-  // and applies them to the HTMLElements such as popper and arrow
-
-  function applyStyles(_ref) {
-    var state = _ref.state;
-    Object.keys(state.elements).forEach(function (name) {
-      var style = state.styles[name] || {};
-      var attributes = state.attributes[name] || {};
-      var element = state.elements[name]; // arrow is optional + virtual elements
-
-      if (!isHTMLElement$1(element) || !getNodeName(element)) {
-        return;
-      } // Flow doesn't support to extend this property, but it's the most
-      // effective way to apply styles to an HTMLElement
-      // $FlowFixMe[cannot-write]
-
-
-      Object.assign(element.style, style);
-      Object.keys(attributes).forEach(function (name) {
-        var value = attributes[name];
+        // .mui-fixed is a global helper.
+        var fixedElements = ownerDocument(container).querySelectorAll('.mui-fixed');
+        [].forEach.call(fixedElements, function (element) {
+          restoreStyle.push({
+            value: element.style.paddingRight,
+            property: 'padding-right',
+            el: element
+          });
+          element.style.paddingRight = "".concat(getPaddingRight(element) + scrollbarSize, "px");
+        });
+      }
+      var scrollContainer;
+      if (container.parentNode instanceof DocumentFragment) {
+        scrollContainer = ownerDocument(container).body;
+      } else {
+        // Support html overflow-y: auto for scroll stability between pages
+        // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+        var parent = container.parentElement;
+        var containerWindow = ownerWindow(container);
+        scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+      }
 
-        if (value === false) {
-          element.removeAttribute(name);
+      // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+      // screensize shrink.
+      restoreStyle.push({
+        value: scrollContainer.style.overflow,
+        property: 'overflow',
+        el: scrollContainer
+      }, {
+        value: scrollContainer.style.overflowX,
+        property: 'overflow-x',
+        el: scrollContainer
+      }, {
+        value: scrollContainer.style.overflowY,
+        property: 'overflow-y',
+        el: scrollContainer
+      });
+      scrollContainer.style.overflow = 'hidden';
+    }
+    var restore = function restore() {
+      restoreStyle.forEach(function (_ref) {
+        var value = _ref.value,
+          el = _ref.el,
+          property = _ref.property;
+        if (value) {
+          el.style.setProperty(property, value);
         } else {
-          element.setAttribute(name, value === true ? '' : value);
+          el.style.removeProperty(property);
         }
       });
+    };
+    return restore;
+  }
+  function getHiddenSiblings(container) {
+    var hiddenSiblings = [];
+    [].forEach.call(container.children, function (element) {
+      if (element.getAttribute('aria-hidden') === 'true') {
+        hiddenSiblings.push(element);
+      }
     });
+    return hiddenSiblings;
   }
+  /**
+   * @ignore - do not document.
+   *
+   * Proper state management for containers and the modals in those containers.
+   * Simplified, but inspired by react-overlay's ModalManager class.
+   * Used by the Modal to ensure proper styling of containers.
+   */
+  var ModalManager = /*#__PURE__*/function () {
+    function ModalManager() {
+      _classCallCheck(this, ModalManager);
+      this.containers = void 0;
+      this.modals = void 0;
+      this.modals = [];
+      this.containers = [];
+    }
+    _createClass(ModalManager, [{
+      key: "add",
+      value: function add(modal, container) {
+        var modalIndex = this.modals.indexOf(modal);
+        if (modalIndex !== -1) {
+          return modalIndex;
+        }
+        modalIndex = this.modals.length;
+        this.modals.push(modal);
 
-  function effect$2(_ref2) {
-    var state = _ref2.state;
-    var initialStyles = {
-      popper: {
-        position: state.options.strategy,
-        left: '0',
-        top: '0',
-        margin: '0'
+        // If the modal we are adding is already in the DOM.
+        if (modal.modalRef) {
+          ariaHidden(modal.modalRef, false);
+        }
+        var hiddenSiblings = getHiddenSiblings(container);
+        ariaHiddenSiblings(container, modal.mount, modal.modalRef, hiddenSiblings, true);
+        var containerIndex = findIndexOf(this.containers, function (item) {
+          return item.container === container;
+        });
+        if (containerIndex !== -1) {
+          this.containers[containerIndex].modals.push(modal);
+          return modalIndex;
+        }
+        this.containers.push({
+          modals: [modal],
+          container: container,
+          restore: null,
+          hiddenSiblings: hiddenSiblings
+        });
+        return modalIndex;
+      }
+    }, {
+      key: "mount",
+      value: function mount(modal, props) {
+        var containerIndex = findIndexOf(this.containers, function (item) {
+          return item.modals.indexOf(modal) !== -1;
+        });
+        var containerInfo = this.containers[containerIndex];
+        if (!containerInfo.restore) {
+          containerInfo.restore = handleContainer(containerInfo, props);
+        }
+      }
+    }, {
+      key: "remove",
+      value: function remove(modal) {
+        var ariaHiddenState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        var modalIndex = this.modals.indexOf(modal);
+        if (modalIndex === -1) {
+          return modalIndex;
+        }
+        var containerIndex = findIndexOf(this.containers, function (item) {
+          return item.modals.indexOf(modal) !== -1;
+        });
+        var containerInfo = this.containers[containerIndex];
+        containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
+        this.modals.splice(modalIndex, 1);
+
+        // If that was the last modal in a container, clean up the container.
+        if (containerInfo.modals.length === 0) {
+          // The modal might be closed before it had the chance to be mounted in the DOM.
+          if (containerInfo.restore) {
+            containerInfo.restore();
+          }
+          if (modal.modalRef) {
+            // In case the modal wasn't in the DOM yet.
+            ariaHidden(modal.modalRef, ariaHiddenState);
+          }
+          ariaHiddenSiblings(containerInfo.container, modal.mount, modal.modalRef, containerInfo.hiddenSiblings, false);
+          this.containers.splice(containerIndex, 1);
+        } else {
+          // Otherwise make sure the next top modal is visible to a screen reader.
+          var nextTop = containerInfo.modals[containerInfo.modals.length - 1];
+          // as soon as a modal is adding its modalRef is undefined. it can't set
+          // aria-hidden because the dom element doesn't exist either
+          // when modal was unmounted before modalRef gets null
+          if (nextTop.modalRef) {
+            ariaHidden(nextTop.modalRef, false);
+          }
+        }
+        return modalIndex;
+      }
+    }, {
+      key: "isTopModal",
+      value: function isTopModal(modal) {
+        return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
+      }
+    }]);
+    return ModalManager;
+  }();
+
+  function getContainer(container) {
+    return typeof container === 'function' ? container() : container;
+  }
+  function getHasTransition(children) {
+    return children ? children.props.hasOwnProperty('in') : false;
+  }
+
+  // A modal manager used to track and manage the state of open Modals.
+  // Modals don't open on the server so this won't conflict with concurrent requests.
+  var defaultManager = new ModalManager();
+  /**
+   *
+   * Demos:
+   *
+   * - [Modal](https://mui.com/base-ui/react-modal/#hook)
+   *
+   * API:
+   *
+   * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
+   */
+  function useModal(parameters) {
+    var container = parameters.container,
+      _parameters$disableEs = parameters.disableEscapeKeyDown,
+      disableEscapeKeyDown = _parameters$disableEs === void 0 ? false : _parameters$disableEs,
+      _parameters$disableSc = parameters.disableScrollLock,
+      disableScrollLock = _parameters$disableSc === void 0 ? false : _parameters$disableSc,
+      _parameters$manager = parameters.manager,
+      manager = _parameters$manager === void 0 ? defaultManager : _parameters$manager,
+      _parameters$closeAfte = parameters.closeAfterTransition,
+      closeAfterTransition = _parameters$closeAfte === void 0 ? false : _parameters$closeAfte,
+      onTransitionEnter = parameters.onTransitionEnter,
+      onTransitionExited = parameters.onTransitionExited,
+      children = parameters.children,
+      onClose = parameters.onClose,
+      open = parameters.open,
+      rootRef = parameters.rootRef; // @ts-ignore internal logic
+    var modal = React__namespace.useRef({});
+    var mountNodeRef = React__namespace.useRef(null);
+    var modalRef = React__namespace.useRef(null);
+    var handleRef = useForkRef(modalRef, rootRef);
+    var _React$useState = React__namespace.useState(!open),
+      exited = _React$useState[0],
+      setExited = _React$useState[1];
+    var hasTransition = getHasTransition(children);
+    var ariaHiddenProp = true;
+    if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
+      ariaHiddenProp = false;
+    }
+    var getDoc = function getDoc() {
+      return ownerDocument(mountNodeRef.current);
+    };
+    var getModal = function getModal() {
+      modal.current.modalRef = modalRef.current;
+      modal.current.mount = mountNodeRef.current;
+      return modal.current;
+    };
+    var handleMounted = function handleMounted() {
+      manager.mount(getModal(), {
+        disableScrollLock: disableScrollLock
+      });
+
+      // Fix a bug on Chrome where the scroll isn't initially 0.
+      if (modalRef.current) {
+        modalRef.current.scrollTop = 0;
+      }
+    };
+    var handleOpen = useEventCallback(function () {
+      var resolvedContainer = getContainer(container) || getDoc().body;
+      manager.add(getModal(), resolvedContainer);
+
+      // The element was already mounted.
+      if (modalRef.current) {
+        handleMounted();
+      }
+    });
+    var isTopModal = React__namespace.useCallback(function () {
+      return manager.isTopModal(getModal());
+    }, [manager]);
+    var handlePortalRef = useEventCallback(function (node) {
+      mountNodeRef.current = node;
+      if (!node) {
+        return;
+      }
+      if (open && isTopModal()) {
+        handleMounted();
+      } else if (modalRef.current) {
+        ariaHidden(modalRef.current, ariaHiddenProp);
+      }
+    });
+    var handleClose = React__namespace.useCallback(function () {
+      manager.remove(getModal(), ariaHiddenProp);
+    }, [ariaHiddenProp, manager]);
+    React__namespace.useEffect(function () {
+      return function () {
+        handleClose();
+      };
+    }, [handleClose]);
+    React__namespace.useEffect(function () {
+      if (open) {
+        handleOpen();
+      } else if (!hasTransition || !closeAfterTransition) {
+        handleClose();
+      }
+    }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
+    var createHandleKeyDown = function createHandleKeyDown(otherHandlers) {
+      return function (event) {
+        var _otherHandlers$onKeyD;
+        (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
+
+        // The handler doesn't take event.defaultPrevented into account:
+        //
+        // event.preventDefault() is meant to stop default behaviors like
+        // clicking a checkbox to check it, hitting a button to submit a form,
+        // and hitting left arrow to move the cursor in a text input etc.
+        // Only special HTML elements have these default behaviors.
+        if (event.key !== 'Escape' || event.which === 229 ||
+        // Wait until IME is settled.
+        !isTopModal()) {
+          return;
+        }
+        if (!disableEscapeKeyDown) {
+          // Swallow the event, in case someone is listening for the escape key on the body.
+          event.stopPropagation();
+          if (onClose) {
+            onClose(event, 'escapeKeyDown');
+          }
+        }
+      };
+    };
+    var createHandleBackdropClick = function createHandleBackdropClick(otherHandlers) {
+      return function (event) {
+        var _otherHandlers$onClic;
+        (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
+        if (event.target !== event.currentTarget) {
+          return;
+        }
+        if (onClose) {
+          onClose(event, 'backdropClick');
+        }
+      };
+    };
+    var getRootProps = function getRootProps() {
+      var otherHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var propsEventHandlers = extractEventHandlers(parameters);
+
+      // The custom event handlers shouldn't be spread on the root element
+      delete propsEventHandlers.onTransitionEnter;
+      delete propsEventHandlers.onTransitionExited;
+      var externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
+      return _extends({
+        role: 'presentation'
+      }, externalEventHandlers, {
+        onKeyDown: createHandleKeyDown(externalEventHandlers),
+        ref: handleRef
+      });
+    };
+    var getBackdropProps = function getBackdropProps() {
+      var otherHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var externalEventHandlers = otherHandlers;
+      return _extends({
+        'aria-hidden': true
+      }, externalEventHandlers, {
+        onClick: createHandleBackdropClick(externalEventHandlers),
+        open: open
+      });
+    };
+    var getTransitionProps = function getTransitionProps() {
+      var handleEnter = function handleEnter() {
+        setExited(false);
+        if (onTransitionEnter) {
+          onTransitionEnter();
+        }
+      };
+      var handleExited = function handleExited() {
+        setExited(true);
+        if (onTransitionExited) {
+          onTransitionExited();
+        }
+        if (closeAfterTransition) {
+          handleClose();
+        }
+      };
+      return {
+        onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter),
+        onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited)
+      };
+    };
+    return {
+      getRootProps: getRootProps,
+      getBackdropProps: getBackdropProps,
+      getTransitionProps: getTransitionProps,
+      rootRef: handleRef,
+      portalRef: handlePortalRef,
+      isTopModal: isTopModal,
+      exited: exited,
+      hasTransition: hasTransition
+    };
+  }
+
+  /**
+   * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+   *
+   * This component can be useful in a variety of situations:
+   *
+   * *   Escape hatch for broken dependencies not supporting SSR.
+   * *   Improve the time-to-first paint on the client by only rendering above the fold.
+   * *   Reduce the rendering time on the server.
+   * *   Under too heavy server load, you can turn on service degradation.
+   *
+   * Demos:
+   *
+   * - [No SSR](https://mui.com/base-ui/react-no-ssr/)
+   *
+   * API:
+   *
+   * - [NoSsr API](https://mui.com/base-ui/react-no-ssr/components-api/#no-ssr)
+   */
+  function NoSsr(props) {
+    var children = props.children,
+      _props$defer = props.defer,
+      defer = _props$defer === void 0 ? false : _props$defer,
+      _props$fallback = props.fallback,
+      fallback = _props$fallback === void 0 ? null : _props$fallback;
+    var _React$useState = React__namespace.useState(false),
+      mountedState = _React$useState[0],
+      setMountedState = _React$useState[1];
+    useEnhancedEffect$1(function () {
+      if (!defer) {
+        setMountedState(true);
+      }
+    }, [defer]);
+    React__namespace.useEffect(function () {
+      if (defer) {
+        setMountedState(true);
+      }
+    }, [defer]);
+
+    // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
+    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
+      children: mountedState ? children : fallback
+    });
+  }
+  NoSsr.propTypes /* remove-proptypes */ = {
+    // ┌────────────────────────────── Warning ──────────────────────────────┐
+    // │ These PropTypes are generated from the TypeScript type definitions. │
+    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+    // └─────────────────────────────────────────────────────────────────────┘
+    /**
+     * You can wrap a node.
+     */
+    children: PropTypes.node,
+    /**
+     * If `true`, the component will not only prevent server-side rendering.
+     * It will also defer the rendering of the children into a different screen frame.
+     * @default false
+     */
+    defer: PropTypes.bool,
+    /**
+     * The fallback content to display.
+     * @default null
+     */
+    fallback: PropTypes.node
+  } ;
+  {
+    // eslint-disable-next-line
+    NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
+  }
+
+  var top = 'top';
+  var bottom = 'bottom';
+  var right = 'right';
+  var left = 'left';
+  var auto = 'auto';
+  var basePlacements = [top, bottom, right, left];
+  var start = 'start';
+  var end = 'end';
+  var clippingParents = 'clippingParents';
+  var viewport = 'viewport';
+  var popper = 'popper';
+  var reference = 'reference';
+  var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
+    return acc.concat([placement + "-" + start, placement + "-" + end]);
+  }, []);
+  var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
+    return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
+  }, []); // modifiers that need to read the DOM
+
+  var beforeRead = 'beforeRead';
+  var read = 'read';
+  var afterRead = 'afterRead'; // pure-logic modifiers
+
+  var beforeMain = 'beforeMain';
+  var main = 'main';
+  var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+
+  var beforeWrite = 'beforeWrite';
+  var write = 'write';
+  var afterWrite = 'afterWrite';
+  var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
+
+  function getNodeName(element) {
+    return element ? (element.nodeName || '').toLowerCase() : null;
+  }
+
+  function getWindow(node) {
+    if (node == null) {
+      return window;
+    }
+
+    if (node.toString() !== '[object Window]') {
+      var ownerDocument = node.ownerDocument;
+      return ownerDocument ? ownerDocument.defaultView || window : window;
+    }
+
+    return node;
+  }
+
+  function isElement(node) {
+    var OwnElement = getWindow(node).Element;
+    return node instanceof OwnElement || node instanceof Element;
+  }
+
+  function isHTMLElement$1(node) {
+    var OwnElement = getWindow(node).HTMLElement;
+    return node instanceof OwnElement || node instanceof HTMLElement;
+  }
+
+  function isShadowRoot(node) {
+    // IE 11 has no ShadowRoot
+    if (typeof ShadowRoot === 'undefined') {
+      return false;
+    }
+
+    var OwnElement = getWindow(node).ShadowRoot;
+    return node instanceof OwnElement || node instanceof ShadowRoot;
+  }
+
+  // and applies them to the HTMLElements such as popper and arrow
+
+  function applyStyles(_ref) {
+    var state = _ref.state;
+    Object.keys(state.elements).forEach(function (name) {
+      var style = state.styles[name] || {};
+      var attributes = state.attributes[name] || {};
+      var element = state.elements[name]; // arrow is optional + virtual elements
+
+      if (!isHTMLElement$1(element) || !getNodeName(element)) {
+        return;
+      } // Flow doesn't support to extend this property, but it's the most
+      // effective way to apply styles to an HTMLElement
+      // $FlowFixMe[cannot-write]
+
+
+      Object.assign(element.style, style);
+      Object.keys(attributes).forEach(function (name) {
+        var value = attributes[name];
+
+        if (value === false) {
+          element.removeAttribute(name);
+        } else {
+          element.setAttribute(name, value === true ? '' : value);
+        }
+      });
+    });
+  }
+
+  function effect$2(_ref2) {
+    var state = _ref2.state;
+    var initialStyles = {
+      popper: {
+        position: state.options.strategy,
+        left: '0',
+        top: '0',
+        margin: '0'
       },
       arrow: {
         position: 'absolute'
@@ -18046,91 +18669,6 @@
     defaultModifiers: defaultModifiers
   }); // eslint-disable-next-line import/no-unused-modules
 
-  function getContainer$1(container) {
-    return typeof container === 'function' ? container() : container;
-  }
-
-  /**
-   * Portals provide a first-class way to render children into a DOM node
-   * that exists outside the DOM hierarchy of the parent component.
-   *
-   * Demos:
-   *
-   * - [Portal](https://mui.com/base-ui/react-portal/)
-   *
-   * API:
-   *
-   * - [Portal API](https://mui.com/base-ui/react-portal/components-api/#portal)
-   */
-  var Portal = /*#__PURE__*/React__namespace.forwardRef(function Portal(props, forwardedRef) {
-    var children = props.children,
-      container = props.container,
-      _props$disablePortal = props.disablePortal,
-      disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal;
-    var _React$useState = React__namespace.useState(null),
-      mountNode = _React$useState[0],
-      setMountNode = _React$useState[1]; // @ts-expect-error TODO upstream fix
-    var handleRef = useForkRef( /*#__PURE__*/React__namespace.isValidElement(children) ? children.ref : null, forwardedRef);
-    useEnhancedEffect$1(function () {
-      if (!disablePortal) {
-        setMountNode(getContainer$1(container) || document.body);
-      }
-    }, [container, disablePortal]);
-    useEnhancedEffect$1(function () {
-      if (mountNode && !disablePortal) {
-        setRef(forwardedRef, mountNode);
-        return function () {
-          setRef(forwardedRef, null);
-        };
-      }
-      return undefined;
-    }, [forwardedRef, mountNode, disablePortal]);
-    if (disablePortal) {
-      if ( /*#__PURE__*/React__namespace.isValidElement(children)) {
-        var newProps = {
-          ref: handleRef
-        };
-        return /*#__PURE__*/React__namespace.cloneElement(children, newProps);
-      }
-      return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
-        children: children
-      });
-    }
-    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
-      children: mountNode ? /*#__PURE__*/ReactDOM__namespace.createPortal(children, mountNode) : mountNode
-    });
-  });
-  Portal.propTypes /* remove-proptypes */ = {
-    // ┌────────────────────────────── Warning ──────────────────────────────┐
-    // │ These PropTypes are generated from the TypeScript type definitions. │
-    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-    // └─────────────────────────────────────────────────────────────────────┘
-    /**
-     * The children to render into the `container`.
-     */
-    children: PropTypes.node,
-    /**
-     * An HTML element or function that returns one.
-     * The `container` will have the portal children appended to it.
-     *
-     * You can also provide a callback, which is called in a React layout effect.
-     * This lets you set the container from a ref, and also makes server-side rendering possible.
-     *
-     * By default, it uses the body of the top-level document object,
-     * so it's simply `document.body` most of the time.
-     */
-    container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
-    /**
-     * The `children` will be under the DOM hierarchy of the parent component.
-     * @default false
-     */
-    disablePortal: PropTypes.bool
-  } ;
-  {
-    // eslint-disable-next-line
-    Portal['propTypes' + ''] = exactProp(Portal.propTypes);
-  }
-
   var COMPONENT_NAME = 'Popper';
   function getPopperUtilityClass(slot) {
     return generateUtilityClass(COMPONENT_NAME, slot);
@@ -18511,528 +19049,6 @@
     transition: PropTypes.bool
   } ;
 
-  function _classCallCheck(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
-  }
-
-  function _defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
-    }
-  }
-  function _createClass(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    Object.defineProperty(Constructor, "prototype", {
-      writable: false
-    });
-    return Constructor;
-  }
-
-  // Is a vertical scrollbar displayed?
-  function isOverflowing(container) {
-    var doc = ownerDocument(container);
-    if (doc.body === container) {
-      return ownerWindow(container).innerWidth > doc.documentElement.clientWidth;
-    }
-    return container.scrollHeight > container.clientHeight;
-  }
-  function ariaHidden(element, show) {
-    if (show) {
-      element.setAttribute('aria-hidden', 'true');
-    } else {
-      element.removeAttribute('aria-hidden');
-    }
-  }
-  function getPaddingRight(element) {
-    return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
-  }
-  function isAriaHiddenForbiddenOnElement(element) {
-    // The forbidden HTML tags are the ones from ARIA specification that
-    // can be children of body and can't have aria-hidden attribute.
-    // cf. https://www.w3.org/TR/html-aria/#docconformance
-    var forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK'];
-    var isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
-    var isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
-    return isForbiddenTagName || isInputHidden;
-  }
-  function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
-    var blacklist = [mountElement, currentElement].concat(_toConsumableArray(elementsToExclude));
-    [].forEach.call(container.children, function (element) {
-      var isNotExcludedElement = blacklist.indexOf(element) === -1;
-      var isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
-      if (isNotExcludedElement && isNotForbiddenElement) {
-        ariaHidden(element, show);
-      }
-    });
-  }
-  function findIndexOf(items, callback) {
-    var idx = -1;
-    items.some(function (item, index) {
-      if (callback(item)) {
-        idx = index;
-        return true;
-      }
-      return false;
-    });
-    return idx;
-  }
-  function handleContainer(containerInfo, props) {
-    var restoreStyle = [];
-    var container = containerInfo.container;
-    if (!props.disableScrollLock) {
-      if (isOverflowing(container)) {
-        // Compute the size before applying overflow hidden to avoid any scroll jumps.
-        var scrollbarSize = getScrollbarSize(ownerDocument(container));
-        restoreStyle.push({
-          value: container.style.paddingRight,
-          property: 'padding-right',
-          el: container
-        });
-        // Use computed style, here to get the real padding to add our scrollbar width.
-        container.style.paddingRight = "".concat(getPaddingRight(container) + scrollbarSize, "px");
-
-        // .mui-fixed is a global helper.
-        var fixedElements = ownerDocument(container).querySelectorAll('.mui-fixed');
-        [].forEach.call(fixedElements, function (element) {
-          restoreStyle.push({
-            value: element.style.paddingRight,
-            property: 'padding-right',
-            el: element
-          });
-          element.style.paddingRight = "".concat(getPaddingRight(element) + scrollbarSize, "px");
-        });
-      }
-      var scrollContainer;
-      if (container.parentNode instanceof DocumentFragment) {
-        scrollContainer = ownerDocument(container).body;
-      } else {
-        // Support html overflow-y: auto for scroll stability between pages
-        // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
-        var parent = container.parentElement;
-        var containerWindow = ownerWindow(container);
-        scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
-      }
-
-      // Block the scroll even if no scrollbar is visible to account for mobile keyboard
-      // screensize shrink.
-      restoreStyle.push({
-        value: scrollContainer.style.overflow,
-        property: 'overflow',
-        el: scrollContainer
-      }, {
-        value: scrollContainer.style.overflowX,
-        property: 'overflow-x',
-        el: scrollContainer
-      }, {
-        value: scrollContainer.style.overflowY,
-        property: 'overflow-y',
-        el: scrollContainer
-      });
-      scrollContainer.style.overflow = 'hidden';
-    }
-    var restore = function restore() {
-      restoreStyle.forEach(function (_ref) {
-        var value = _ref.value,
-          el = _ref.el,
-          property = _ref.property;
-        if (value) {
-          el.style.setProperty(property, value);
-        } else {
-          el.style.removeProperty(property);
-        }
-      });
-    };
-    return restore;
-  }
-  function getHiddenSiblings(container) {
-    var hiddenSiblings = [];
-    [].forEach.call(container.children, function (element) {
-      if (element.getAttribute('aria-hidden') === 'true') {
-        hiddenSiblings.push(element);
-      }
-    });
-    return hiddenSiblings;
-  }
-  /**
-   * @ignore - do not document.
-   *
-   * Proper state management for containers and the modals in those containers.
-   * Simplified, but inspired by react-overlay's ModalManager class.
-   * Used by the Modal to ensure proper styling of containers.
-   */
-  var ModalManager = /*#__PURE__*/function () {
-    function ModalManager() {
-      _classCallCheck(this, ModalManager);
-      this.containers = void 0;
-      this.modals = void 0;
-      this.modals = [];
-      this.containers = [];
-    }
-    _createClass(ModalManager, [{
-      key: "add",
-      value: function add(modal, container) {
-        var modalIndex = this.modals.indexOf(modal);
-        if (modalIndex !== -1) {
-          return modalIndex;
-        }
-        modalIndex = this.modals.length;
-        this.modals.push(modal);
-
-        // If the modal we are adding is already in the DOM.
-        if (modal.modalRef) {
-          ariaHidden(modal.modalRef, false);
-        }
-        var hiddenSiblings = getHiddenSiblings(container);
-        ariaHiddenSiblings(container, modal.mount, modal.modalRef, hiddenSiblings, true);
-        var containerIndex = findIndexOf(this.containers, function (item) {
-          return item.container === container;
-        });
-        if (containerIndex !== -1) {
-          this.containers[containerIndex].modals.push(modal);
-          return modalIndex;
-        }
-        this.containers.push({
-          modals: [modal],
-          container: container,
-          restore: null,
-          hiddenSiblings: hiddenSiblings
-        });
-        return modalIndex;
-      }
-    }, {
-      key: "mount",
-      value: function mount(modal, props) {
-        var containerIndex = findIndexOf(this.containers, function (item) {
-          return item.modals.indexOf(modal) !== -1;
-        });
-        var containerInfo = this.containers[containerIndex];
-        if (!containerInfo.restore) {
-          containerInfo.restore = handleContainer(containerInfo, props);
-        }
-      }
-    }, {
-      key: "remove",
-      value: function remove(modal) {
-        var ariaHiddenState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-        var modalIndex = this.modals.indexOf(modal);
-        if (modalIndex === -1) {
-          return modalIndex;
-        }
-        var containerIndex = findIndexOf(this.containers, function (item) {
-          return item.modals.indexOf(modal) !== -1;
-        });
-        var containerInfo = this.containers[containerIndex];
-        containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
-        this.modals.splice(modalIndex, 1);
-
-        // If that was the last modal in a container, clean up the container.
-        if (containerInfo.modals.length === 0) {
-          // The modal might be closed before it had the chance to be mounted in the DOM.
-          if (containerInfo.restore) {
-            containerInfo.restore();
-          }
-          if (modal.modalRef) {
-            // In case the modal wasn't in the DOM yet.
-            ariaHidden(modal.modalRef, ariaHiddenState);
-          }
-          ariaHiddenSiblings(containerInfo.container, modal.mount, modal.modalRef, containerInfo.hiddenSiblings, false);
-          this.containers.splice(containerIndex, 1);
-        } else {
-          // Otherwise make sure the next top modal is visible to a screen reader.
-          var nextTop = containerInfo.modals[containerInfo.modals.length - 1];
-          // as soon as a modal is adding its modalRef is undefined. it can't set
-          // aria-hidden because the dom element doesn't exist either
-          // when modal was unmounted before modalRef gets null
-          if (nextTop.modalRef) {
-            ariaHidden(nextTop.modalRef, false);
-          }
-        }
-        return modalIndex;
-      }
-    }, {
-      key: "isTopModal",
-      value: function isTopModal(modal) {
-        return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
-      }
-    }]);
-    return ModalManager;
-  }();
-
-  function getContainer(container) {
-    return typeof container === 'function' ? container() : container;
-  }
-  function getHasTransition(children) {
-    return children ? children.props.hasOwnProperty('in') : false;
-  }
-
-  // A modal manager used to track and manage the state of open Modals.
-  // Modals don't open on the server so this won't conflict with concurrent requests.
-  var defaultManager = new ModalManager();
-  /**
-   *
-   * Demos:
-   *
-   * - [Modal](https://mui.com/base-ui/react-modal/#hook)
-   *
-   * API:
-   *
-   * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
-   */
-  function useModal(parameters) {
-    var container = parameters.container,
-      _parameters$disableEs = parameters.disableEscapeKeyDown,
-      disableEscapeKeyDown = _parameters$disableEs === void 0 ? false : _parameters$disableEs,
-      _parameters$disableSc = parameters.disableScrollLock,
-      disableScrollLock = _parameters$disableSc === void 0 ? false : _parameters$disableSc,
-      _parameters$manager = parameters.manager,
-      manager = _parameters$manager === void 0 ? defaultManager : _parameters$manager,
-      _parameters$closeAfte = parameters.closeAfterTransition,
-      closeAfterTransition = _parameters$closeAfte === void 0 ? false : _parameters$closeAfte,
-      onTransitionEnter = parameters.onTransitionEnter,
-      onTransitionExited = parameters.onTransitionExited,
-      children = parameters.children,
-      onClose = parameters.onClose,
-      open = parameters.open,
-      rootRef = parameters.rootRef; // @ts-ignore internal logic
-    var modal = React__namespace.useRef({});
-    var mountNodeRef = React__namespace.useRef(null);
-    var modalRef = React__namespace.useRef(null);
-    var handleRef = useForkRef(modalRef, rootRef);
-    var _React$useState = React__namespace.useState(!open),
-      exited = _React$useState[0],
-      setExited = _React$useState[1];
-    var hasTransition = getHasTransition(children);
-    var ariaHiddenProp = true;
-    if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
-      ariaHiddenProp = false;
-    }
-    var getDoc = function getDoc() {
-      return ownerDocument(mountNodeRef.current);
-    };
-    var getModal = function getModal() {
-      modal.current.modalRef = modalRef.current;
-      modal.current.mount = mountNodeRef.current;
-      return modal.current;
-    };
-    var handleMounted = function handleMounted() {
-      manager.mount(getModal(), {
-        disableScrollLock: disableScrollLock
-      });
-
-      // Fix a bug on Chrome where the scroll isn't initially 0.
-      if (modalRef.current) {
-        modalRef.current.scrollTop = 0;
-      }
-    };
-    var handleOpen = useEventCallback(function () {
-      var resolvedContainer = getContainer(container) || getDoc().body;
-      manager.add(getModal(), resolvedContainer);
-
-      // The element was already mounted.
-      if (modalRef.current) {
-        handleMounted();
-      }
-    });
-    var isTopModal = React__namespace.useCallback(function () {
-      return manager.isTopModal(getModal());
-    }, [manager]);
-    var handlePortalRef = useEventCallback(function (node) {
-      mountNodeRef.current = node;
-      if (!node) {
-        return;
-      }
-      if (open && isTopModal()) {
-        handleMounted();
-      } else if (modalRef.current) {
-        ariaHidden(modalRef.current, ariaHiddenProp);
-      }
-    });
-    var handleClose = React__namespace.useCallback(function () {
-      manager.remove(getModal(), ariaHiddenProp);
-    }, [ariaHiddenProp, manager]);
-    React__namespace.useEffect(function () {
-      return function () {
-        handleClose();
-      };
-    }, [handleClose]);
-    React__namespace.useEffect(function () {
-      if (open) {
-        handleOpen();
-      } else if (!hasTransition || !closeAfterTransition) {
-        handleClose();
-      }
-    }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
-    var createHandleKeyDown = function createHandleKeyDown(otherHandlers) {
-      return function (event) {
-        var _otherHandlers$onKeyD;
-        (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
-
-        // The handler doesn't take event.defaultPrevented into account:
-        //
-        // event.preventDefault() is meant to stop default behaviors like
-        // clicking a checkbox to check it, hitting a button to submit a form,
-        // and hitting left arrow to move the cursor in a text input etc.
-        // Only special HTML elements have these default behaviors.
-        if (event.key !== 'Escape' || event.which === 229 ||
-        // Wait until IME is settled.
-        !isTopModal()) {
-          return;
-        }
-        if (!disableEscapeKeyDown) {
-          // Swallow the event, in case someone is listening for the escape key on the body.
-          event.stopPropagation();
-          if (onClose) {
-            onClose(event, 'escapeKeyDown');
-          }
-        }
-      };
-    };
-    var createHandleBackdropClick = function createHandleBackdropClick(otherHandlers) {
-      return function (event) {
-        var _otherHandlers$onClic;
-        (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
-        if (event.target !== event.currentTarget) {
-          return;
-        }
-        if (onClose) {
-          onClose(event, 'backdropClick');
-        }
-      };
-    };
-    var getRootProps = function getRootProps() {
-      var otherHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var propsEventHandlers = extractEventHandlers(parameters);
-
-      // The custom event handlers shouldn't be spread on the root element
-      delete propsEventHandlers.onTransitionEnter;
-      delete propsEventHandlers.onTransitionExited;
-      var externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
-      return _extends({
-        role: 'presentation'
-      }, externalEventHandlers, {
-        onKeyDown: createHandleKeyDown(externalEventHandlers),
-        ref: handleRef
-      });
-    };
-    var getBackdropProps = function getBackdropProps() {
-      var otherHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var externalEventHandlers = otherHandlers;
-      return _extends({
-        'aria-hidden': true
-      }, externalEventHandlers, {
-        onClick: createHandleBackdropClick(externalEventHandlers),
-        open: open
-      });
-    };
-    var getTransitionProps = function getTransitionProps() {
-      var handleEnter = function handleEnter() {
-        setExited(false);
-        if (onTransitionEnter) {
-          onTransitionEnter();
-        }
-      };
-      var handleExited = function handleExited() {
-        setExited(true);
-        if (onTransitionExited) {
-          onTransitionExited();
-        }
-        if (closeAfterTransition) {
-          handleClose();
-        }
-      };
-      return {
-        onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter),
-        onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited)
-      };
-    };
-    return {
-      getRootProps: getRootProps,
-      getBackdropProps: getBackdropProps,
-      getTransitionProps: getTransitionProps,
-      rootRef: handleRef,
-      portalRef: handlePortalRef,
-      isTopModal: isTopModal,
-      exited: exited,
-      hasTransition: hasTransition
-    };
-  }
-
-  /**
-   * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
-   *
-   * This component can be useful in a variety of situations:
-   *
-   * *   Escape hatch for broken dependencies not supporting SSR.
-   * *   Improve the time-to-first paint on the client by only rendering above the fold.
-   * *   Reduce the rendering time on the server.
-   * *   Under too heavy server load, you can turn on service degradation.
-   *
-   * Demos:
-   *
-   * - [No SSR](https://mui.com/base-ui/react-no-ssr/)
-   *
-   * API:
-   *
-   * - [NoSsr API](https://mui.com/base-ui/react-no-ssr/components-api/#no-ssr)
-   */
-  function NoSsr(props) {
-    var children = props.children,
-      _props$defer = props.defer,
-      defer = _props$defer === void 0 ? false : _props$defer,
-      _props$fallback = props.fallback,
-      fallback = _props$fallback === void 0 ? null : _props$fallback;
-    var _React$useState = React__namespace.useState(false),
-      mountedState = _React$useState[0],
-      setMountedState = _React$useState[1];
-    useEnhancedEffect$1(function () {
-      if (!defer) {
-        setMountedState(true);
-      }
-    }, [defer]);
-    React__namespace.useEffect(function () {
-      if (defer) {
-        setMountedState(true);
-      }
-    }, [defer]);
-
-    // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
-    return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
-      children: mountedState ? children : fallback
-    });
-  }
-  NoSsr.propTypes /* remove-proptypes */ = {
-    // ┌────────────────────────────── Warning ──────────────────────────────┐
-    // │ These PropTypes are generated from the TypeScript type definitions. │
-    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-    // └─────────────────────────────────────────────────────────────────────┘
-    /**
-     * You can wrap a node.
-     */
-    children: PropTypes.node,
-    /**
-     * If `true`, the component will not only prevent server-side rendering.
-     * It will also defer the rendering of the children into a different screen frame.
-     * @default false
-     */
-    defer: PropTypes.bool,
-    /**
-     * The fallback content to display.
-     * @default null
-     */
-    fallback: PropTypes.node
-  } ;
-  {
-    // eslint-disable-next-line
-    NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
-  }
-
   var INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
   function asc(a, b) {
     return a - b;
@@ -19224,6 +19240,8 @@
       scale = _parameters$scale === void 0 ? Identity$1 : _parameters$scale,
       _parameters$step = parameters.step,
       step = _parameters$step === void 0 ? 1 : _parameters$step,
+      _parameters$shiftStep = parameters.shiftStep,
+      shiftStep = _parameters$shiftStep === void 0 ? 10 : _parameters$shiftStep,
       tabIndex = parameters.tabIndex,
       valueProp = parameters.value;
     var touchId = React__namespace.useRef();
@@ -19312,6 +19330,75 @@
         otherHandlers == null || (_otherHandlers$onBlur = otherHandlers.onBlur) == null || _otherHandlers$onBlur.call(otherHandlers, event);
       };
     };
+    var changeValue = function changeValue(event, valueInput) {
+      var index = Number(event.currentTarget.getAttribute('data-index'));
+      var value = values[index];
+      var marksIndex = marksValues.indexOf(value);
+      var newValue = valueInput;
+      if (marks && step == null) {
+        var maxMarksValue = marksValues[marksValues.length - 1];
+        if (newValue > maxMarksValue) {
+          newValue = maxMarksValue;
+        } else if (newValue < marksValues[0]) {
+          newValue = marksValues[0];
+        } else {
+          newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
+        }
+      }
+      newValue = clamp(newValue, min, max);
+      if (range) {
+        // Bound the new value to the thumb's neighbours.
+        if (disableSwap) {
+          newValue = clamp(newValue, values[index - 1] || -Infinity, values[index + 1] || Infinity);
+        }
+        var previousValue = newValue;
+        newValue = setValueIndex({
+          values: values,
+          newValue: newValue,
+          index: index
+        });
+        var activeIndex = index;
+
+        // Potentially swap the index if needed.
+        if (!disableSwap) {
+          activeIndex = newValue.indexOf(previousValue);
+        }
+        focusThumb({
+          sliderRef: sliderRef,
+          activeIndex: activeIndex
+        });
+      }
+      setValueState(newValue);
+      setFocusedThumbIndex(index);
+      if (handleChange && !areValuesEqual(newValue, valueDerived)) {
+        handleChange(event, newValue, index);
+      }
+      if (onChangeCommitted) {
+        onChangeCommitted(event, newValue);
+      }
+    };
+    var createHandleHiddenInputKeyDown = function createHandleHiddenInputKeyDown(otherHandlers) {
+      return function (event) {
+        var _otherHandlers$onKeyD;
+        // The Shift + Up/Down keyboard shortcuts for moving the slider makes sense to be supported
+        // only if the step is defined. If the step is null, this means tha the marks are used for specifying the valid values.
+        if (step !== null) {
+          var index = Number(event.currentTarget.getAttribute('data-index'));
+          var value = values[index];
+          var newValue = null;
+          if ((event.key === 'ArrowLeft' || event.key === 'ArrowDown') && event.shiftKey || event.key === 'PageDown') {
+            newValue = Math.max(value - shiftStep, min);
+          } else if ((event.key === 'ArrowRight' || event.key === 'ArrowUp') && event.shiftKey || event.key === 'PageUp') {
+            newValue = Math.min(value + shiftStep, max);
+          }
+          if (newValue !== null) {
+            changeValue(event, newValue);
+            event.preventDefault();
+          }
+        }
+        otherHandlers == null || (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
+      };
+    };
     useEnhancedEffect$1(function () {
       if (disabled && sliderRef.current.contains(document.activeElement)) {
         var _document$activeEleme;
@@ -19332,53 +19419,8 @@
       return function (event) {
         var _otherHandlers$onChan;
         (_otherHandlers$onChan = otherHandlers.onChange) == null || _otherHandlers$onChan.call(otherHandlers, event);
-        var index = Number(event.currentTarget.getAttribute('data-index'));
-        var value = values[index];
-        var marksIndex = marksValues.indexOf(value);
-
         // @ts-ignore
-        var newValue = event.target.valueAsNumber;
-        if (marks && step == null) {
-          var maxMarksValue = marksValues[marksValues.length - 1];
-          if (newValue > maxMarksValue) {
-            newValue = maxMarksValue;
-          } else if (newValue < marksValues[0]) {
-            newValue = marksValues[0];
-          } else {
-            newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
-          }
-        }
-        newValue = clamp(newValue, min, max);
-        if (range) {
-          // Bound the new value to the thumb's neighbours.
-          if (disableSwap) {
-            newValue = clamp(newValue, values[index - 1] || -Infinity, values[index + 1] || Infinity);
-          }
-          var previousValue = newValue;
-          newValue = setValueIndex({
-            values: values,
-            newValue: newValue,
-            index: index
-          });
-          var activeIndex = index;
-
-          // Potentially swap the index if needed.
-          if (!disableSwap) {
-            activeIndex = newValue.indexOf(previousValue);
-          }
-          focusThumb({
-            sliderRef: sliderRef,
-            activeIndex: activeIndex
-          });
-        }
-        setValueState(newValue);
-        setFocusedThumbIndex(index);
-        if (handleChange && !areValuesEqual(newValue, valueDerived)) {
-          handleChange(event, newValue, index);
-        }
-        if (onChangeCommitted) {
-          onChangeCommitted(event, newValue);
-        }
+        changeValue(event, event.target.valueAsNumber);
       };
     };
     var previousIndex = React__namespace.useRef();
@@ -19654,7 +19696,8 @@
       var ownEventHandlers = {
         onChange: createHandleHiddenInputChange(externalHandlers || {}),
         onFocus: createHandleHiddenInputFocus(externalHandlers || {}),
-        onBlur: createHandleHiddenInputBlur(externalHandlers || {})
+        onBlur: createHandleHiddenInputBlur(externalHandlers || {}),
+        onKeyDown: createHandleHiddenInputKeyDown(externalHandlers || {})
       };
       var mergedEventHandlers = _extends({}, externalHandlers, ownEventHandlers);
       return _extends({
@@ -19718,7 +19761,7 @@
       onClose = parameters.onClose,
       open = parameters.open,
       resumeHideDuration = parameters.resumeHideDuration;
-    var timerAutoHide = React__namespace.useRef();
+    var timerAutoHide = useTimeout();
     React__namespace.useEffect(function () {
       if (!open) {
         return undefined;
@@ -19748,28 +19791,23 @@
       if (!onClose || autoHideDurationParam == null) {
         return;
       }
-      clearTimeout(timerAutoHide.current);
-      timerAutoHide.current = setTimeout(function () {
+      timerAutoHide.start(autoHideDurationParam, function () {
         handleClose(null, 'timeout');
-      }, autoHideDurationParam);
+      });
     });
     React__namespace.useEffect(function () {
       if (open) {
         setAutoHideTimer(autoHideDuration);
       }
-      return function () {
-        clearTimeout(timerAutoHide.current);
-      };
-    }, [open, autoHideDuration, setAutoHideTimer]);
+      return timerAutoHide.clear;
+    }, [open, autoHideDuration, setAutoHideTimer, timerAutoHide]);
     var handleClickAway = function handleClickAway(event) {
       onClose == null || onClose(event, 'clickaway');
     };
 
     // Pause the timer when the user is interacting with the Snackbar
     // or when the user hide the window.
-    var handlePause = function handlePause() {
-      clearTimeout(timerAutoHide.current);
-    };
+    var handlePause = timerAutoHide.clear;
 
     // Restart the timer when the user is no longer interacting with the Snackbar
     // or when the window is shown back.
@@ -19817,7 +19855,7 @@
         };
       }
       return undefined;
-    }, [disableWindowBlurListener, handleResume, open]);
+    }, [disableWindowBlurListener, open, handleResume, handlePause]);
     var getRootProps = function getRootProps() {
       var externalProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
@@ -21181,7 +21219,7 @@
   var Popper = /*#__PURE__*/React__namespace.forwardRef(function Popper(inProps, ref) {
     var _slots$root;
     var theme = useTheme$3();
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPopper'
     });
@@ -21406,7 +21444,7 @@
     });
   });
   var ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListSubheader'
     });
@@ -21705,7 +21743,7 @@
    * Chips represent complex entities in small blocks, such as a contact.
    */
   var Chip = /*#__PURE__*/React__namespace.forwardRef(function Chip(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiChip'
     });
@@ -22193,7 +22231,7 @@
    */
   var InputBase = /*#__PURE__*/React__namespace.forwardRef(function InputBase(inProps, ref) {
     var _slotProps$input;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiInputBase'
     });
@@ -23031,7 +23069,7 @@
   }));
   var Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
     var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAutocomplete'
     });
@@ -23855,7 +23893,7 @@
           backgroundColor: theme.vars.palette.Avatar.defaultBg
         } : _extends({
           backgroundColor: theme.palette.grey[400]
-        }, theme.applyDarkStyles({
+        }, theme.applyStyles('dark', {
           backgroundColor: theme.palette.grey[600]
         })))
       }]
@@ -23928,7 +23966,7 @@
     return loaded;
   }
   var Avatar = /*#__PURE__*/React__namespace.forwardRef(function Avatar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAvatar'
     });
@@ -23968,7 +24006,10 @@
         ownerState: ownerState,
         className: classes.img
       }, imgProps));
-    } else if (childrenProp != null) {
+
+      // We only render valid children, non valid children are rendered with a fallback
+      // We consider that invalid children are all falsy values, except 0, which is valid.
+    } else if (!!childrenProp || childrenProp === 0) {
       children = childrenProp;
     } else if (hasImg && alt) {
       children = alt[0];
@@ -24070,36 +24111,21 @@
       return _extends(_defineProperty({}, "& .".concat(avatarGroupClasses$1.avatar), styles.avatar), styles.root);
     }
   })(function (_ref) {
-    var theme = _ref.theme;
+    var theme = _ref.theme,
+      ownerState = _ref.ownerState;
+    var marginValue = ownerState.spacing && SPACINGS$2[ownerState.spacing] !== undefined ? SPACINGS$2[ownerState.spacing] : -ownerState.spacing;
     return _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(avatarClasses$1.root), {
       border: "2px solid ".concat((theme.vars || theme).palette.background["default"]),
       boxSizing: 'content-box',
-      marginLeft: -8,
+      marginLeft: marginValue != null ? marginValue : -8,
       '&:last-child': {
         marginLeft: 0
       }
     }), "display", 'flex'), "flexDirection", 'row-reverse');
   });
-  var AvatarGroupAvatar = styled$1(Avatar$1, {
-    name: 'MuiAvatarGroup',
-    slot: 'Avatar',
-    overridesResolver: function overridesResolver(props, styles) {
-      return styles.avatar;
-    }
-  })(function (_ref3) {
-    var theme = _ref3.theme;
-    return {
-      border: "2px solid ".concat((theme.vars || theme).palette.background["default"]),
-      boxSizing: 'content-box',
-      marginLeft: -8,
-      '&:last-child': {
-        marginLeft: 0
-      }
-    };
-  });
   var AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
     var _slotProps$additional;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiAvatarGroup'
     });
@@ -24144,7 +24170,6 @@
     var maxAvatars = Math.min(children.length, clampedMax - 1);
     var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
     var extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : "+".concat(extraAvatars);
-    var marginLeft = spacing && SPACINGS$2[spacing] !== undefined ? SPACINGS$2[spacing] : -spacing;
     var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
     return /*#__PURE__*/jsxRuntime_2(AvatarGroupRoot, _extends({
       as: component,
@@ -24152,23 +24177,14 @@
       className: clsx(classes.root, className),
       ref: ref
     }, other, {
-      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_1(AvatarGroupAvatar, _extends({
-        ownerState: ownerState,
+      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_1(Avatar$1, _extends({
         variant: variant
       }, additionalAvatarSlotProps, {
         className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
-        style: _extends({
-          marginLeft: marginLeft
-        }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
         children: extraAvatarsElement
-      })) : null, children.slice(0, maxAvatars).reverse().map(function (child, index) {
+      })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
         return /*#__PURE__*/React__namespace.cloneElement(child, {
           className: clsx(child.props.className, classes.avatar),
-          style: _extends({
-            // Consistent with "&:last-child" styling for the default spacing,
-            // we do not apply custom marginLeft spacing on the last child
-            marginLeft: index === maxAvatars - 1 ? undefined : marginLeft
-          }, child.props.style),
           variant: child.props.variant || variant
         });
       })]
@@ -24491,7 +24507,7 @@
   });
   var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function Backdrop(inProps, ref) {
     var _slotProps$root, _ref2, _slots$root;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiBackdrop'
     });
@@ -24634,6 +24650,11 @@
   } ;
   var Backdrop$1 = Backdrop;
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function createUseThemeProps(name) {
+    return useThemeProps$1;
+  }
+
   function getBadgeUtilityClass(slot) {
     return generateUtilityClass$1('MuiBadge', slot);
   }
@@ -24644,6 +24665,7 @@
 
   var RADIUS_STANDARD = 10;
   var RADIUS_DOT = 4;
+  var useThemeProps = createUseThemeProps();
   var useUtilityClasses$1t = function useUtilityClasses(ownerState) {
     var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
@@ -25095,7 +25117,7 @@
     };
   });
   var BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiBottomNavigation'
     });
@@ -25251,7 +25273,7 @@
     }));
   });
   var BottomNavigationAction = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigationAction(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiBottomNavigationAction'
     });
@@ -25518,7 +25540,7 @@
     }, []);
   }
   var Breadcrumbs = /*#__PURE__*/React__namespace.forwardRef(function Breadcrumbs(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiBreadcrumbs'
     });
@@ -25917,7 +25939,7 @@
     var contextProps = React__namespace.useContext(ButtonGroupContext$1);
     var buttonGroupButtonContextPositionClassName = React__namespace.useContext(ButtonGroupButtonContext$1);
     var resolvedProps = resolveProps(contextProps, inProps);
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: resolvedProps,
       name: 'MuiButton'
     });
@@ -26178,7 +26200,7 @@
     })));
   });
   var ButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ButtonGroup(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiButtonGroup'
     });
@@ -26367,7 +26389,7 @@
     };
   });
   var Card = /*#__PURE__*/React__namespace.forwardRef(function Card(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCard'
     });
@@ -26482,7 +26504,7 @@
     };
   });
   var CardActionArea = /*#__PURE__*/React__namespace.forwardRef(function CardActionArea(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardActionArea'
     });
@@ -26566,7 +26588,7 @@
     });
   });
   var CardActions = /*#__PURE__*/React__namespace.forwardRef(function CardActions(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardActions'
     });
@@ -26641,7 +26663,7 @@
     };
   });
   var CardContent = /*#__PURE__*/React__namespace.forwardRef(function CardContent(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardContent'
     });
@@ -26752,7 +26774,7 @@
     flex: '1 1 auto'
   });
   var CardHeader = /*#__PURE__*/React__namespace.forwardRef(function CardHeader(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardHeader'
     });
@@ -26921,7 +26943,7 @@
   var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
   var IMAGE_COMPONENTS = ['picture', 'img'];
   var CardMedia = /*#__PURE__*/React__namespace.forwardRef(function CardMedia(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCardMedia'
     });
@@ -27333,7 +27355,7 @@
   var defaultIndeterminateIcon = /*#__PURE__*/jsxRuntime_1(IndeterminateCheckBoxIcon, {});
   var Checkbox = /*#__PURE__*/React__namespace.forwardRef(function Checkbox(inProps, ref) {
     var _icon$props$fontSize, _indeterminateIcon$pr;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCheckbox'
     });
@@ -27565,7 +27587,7 @@
    * attribute to `true` on that region until it has finished loading.
    */
   var CircularProgress = /*#__PURE__*/React__namespace.forwardRef(function CircularProgress(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCircularProgress'
     });
@@ -27705,8 +27727,8 @@
         return [styles.root, styles["maxWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
       }
     }),
-    useThemeProps: function useThemeProps$1(inProps) {
-      return useThemeProps({
+    useThemeProps: function useThemeProps(inProps) {
+      return useThemeProps$1({
         props: inProps,
         name: 'MuiContainer'
       });
@@ -27829,7 +27851,7 @@
     return defaultStyles;
   };
   function CssBaseline(inProps) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiCssBaseline'
     });
@@ -27958,7 +27980,7 @@
    */
   var Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, ref) {
     var _ref2, _slots$root, _ref3, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiModal',
       props: inProps
     });
@@ -28412,7 +28434,7 @@
    * Dialogs are overlaid modal paper based components with a backdrop.
    */
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function Dialog(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialog'
     });
@@ -28696,7 +28718,7 @@
     });
   });
   var DialogActions = /*#__PURE__*/React__namespace.forwardRef(function DialogActions(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialogActions'
     });
@@ -28788,7 +28810,7 @@
     }));
   });
   var DialogContent = /*#__PURE__*/React__namespace.forwardRef(function DialogContent(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialogContent'
     });
@@ -28860,7 +28882,7 @@
     }
   })({});
   var DialogContentText = /*#__PURE__*/React__namespace.forwardRef(function DialogContentText(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialogContentText'
     });
@@ -28921,7 +28943,7 @@
     flex: '0 0 auto'
   });
   var DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitle(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDialogTitle'
     });
@@ -29101,7 +29123,7 @@
     });
   });
   var Divider = /*#__PURE__*/React__namespace.forwardRef(function Divider(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDivider'
     });
@@ -29647,7 +29669,7 @@
    * when `variant="temporary"` is set.
    */
   var Drawer = /*#__PURE__*/React__namespace.forwardRef(function Drawer(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiDrawer'
     });
@@ -29944,7 +29966,7 @@
     });
   });
   var Fab = /*#__PURE__*/React__namespace.forwardRef(function Fab(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFab'
     });
@@ -30215,7 +30237,7 @@
   });
   var FilledInput = /*#__PURE__*/React__namespace.forwardRef(function FilledInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFilledInput'
     });
@@ -30535,7 +30557,7 @@
    * For instance, only one input can be focused at the same time, the state shouldn't be shared.
    */
   var FormControl = /*#__PURE__*/React__namespace.forwardRef(function FormControl(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormControl'
     });
@@ -30765,8 +30787,8 @@
         return styles.root;
       }
     }),
-    useThemeProps: function useThemeProps$1(inProps) {
-      return useThemeProps({
+    useThemeProps: function useThemeProps(inProps) {
+      return useThemeProps$1({
         props: inProps,
         name: 'MuiStack'
       });
@@ -30895,7 +30917,7 @@
    */
   var FormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function FormControlLabel(inProps, ref) {
     var _ref5, _slotProps$typography;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormControlLabel'
     });
@@ -31088,7 +31110,7 @@
    * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
    */
   var FormGroup = /*#__PURE__*/React__namespace.forwardRef(function FormGroup(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormGroup'
     });
@@ -31193,7 +31215,7 @@
     });
   });
   var FormHelperText = /*#__PURE__*/React__namespace.forwardRef(function FormHelperText(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormHelperText'
     });
@@ -31357,7 +31379,7 @@
     });
   });
   var FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiFormLabel'
     });
@@ -31813,7 +31835,7 @@
     return composeClasses(slots, getGridUtilityClass, classes);
   };
   var Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-    var themeProps = useThemeProps({
+    var themeProps = useThemeProps$1({
       props: inProps,
       name: 'MuiGrid'
     });
@@ -32030,8 +32052,8 @@
       }
     }),
     componentName: 'MuiGrid2',
-    useThemeProps: function useThemeProps$1(inProps) {
-      return useThemeProps({
+    useThemeProps: function useThemeProps(inProps) {
+      return useThemeProps$1({
         props: inProps,
         name: 'MuiGrid2'
       });
@@ -32123,7 +32145,7 @@
       _props$TransitionComp = props.TransitionComponent,
       TransitionComponent = _props$TransitionComp === void 0 ? Transition$1 : _props$TransitionComp,
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
-    var timer = React__namespace.useRef();
+    var timer = useTimeout();
     var autoTimeout = React__namespace.useRef();
     var theme = useTheme();
     var nodeRef = React__namespace.useRef(null);
@@ -32211,18 +32233,13 @@
     var handleExited = normalizedTransitionCallback(onExited);
     var handleAddEndListener = function handleAddEndListener(next) {
       if (timeout === 'auto') {
-        timer.current = setTimeout(next, autoTimeout.current || 0);
+        timer.start(autoTimeout.current || 0, next);
       }
       if (addEndListener) {
         // Old call signature before `react-transition-group` implemented `nodeRef`
         addEndListener(nodeRef.current, next);
       }
     };
-    React__namespace.useEffect(function () {
-      return function () {
-        clearTimeout(timer.current);
-      };
-    }, []);
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       appear: appear,
       "in": inProp,
@@ -33026,7 +33043,7 @@
     };
   });
   var Icon = /*#__PURE__*/React__namespace.forwardRef(function Icon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiIcon'
     });
@@ -33151,7 +33168,7 @@
     });
   });
   var ImageList = /*#__PURE__*/React__namespace.forwardRef(function ImageList(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiImageList'
     });
@@ -33312,7 +33329,7 @@
     })));
   });
   var ImageListItem = /*#__PURE__*/React__namespace.forwardRef(function ImageListItem(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiImageListItem'
     });
@@ -33540,7 +33557,7 @@
     });
   });
   var ImageListItemBar = /*#__PURE__*/React__namespace.forwardRef(function ImageListItemBar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiImageListItemBar'
     });
@@ -33714,7 +33731,7 @@
   })({});
   var Input = /*#__PURE__*/React__namespace.forwardRef(function Input(inProps, ref) {
     var _ref3, _slots$root, _ref4, _slots$input;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiInput'
     });
@@ -34002,7 +34019,7 @@
     });
   });
   var InputAdornment = /*#__PURE__*/React__namespace.forwardRef(function InputAdornment(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiInputAdornment'
     });
@@ -34202,7 +34219,7 @@
     }));
   });
   var InputLabel = /*#__PURE__*/React__namespace.forwardRef(function InputLabel(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiInputLabel',
       props: inProps
     });
@@ -34474,7 +34491,7 @@
    * attribute to `true` on that region until it has finished loading.
    */
   var LinearProgress = /*#__PURE__*/React__namespace.forwardRef(function LinearProgress(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiLinearProgress'
     });
@@ -34681,7 +34698,7 @@
     }));
   });
   var Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiLink'
     });
@@ -34852,7 +34869,7 @@
     });
   });
   var List = /*#__PURE__*/React__namespace.forwardRef(function List(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiList'
     });
@@ -35025,7 +35042,7 @@
     });
   });
   var ListItemButton = /*#__PURE__*/React__namespace.forwardRef(function ListItemButton(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemButton'
     });
@@ -35208,7 +35225,7 @@
    * Must be used as the last child of ListItem to function properly.
    */
   var ListItemSecondaryAction = /*#__PURE__*/React__namespace.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemSecondaryAction'
     });
@@ -35353,7 +35370,7 @@
    * Uses an additional container component if `ListItemSecondaryAction` is the last child.
    */
   var ListItem = /*#__PURE__*/React__namespace.forwardRef(function ListItem(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItem'
     });
@@ -35687,7 +35704,7 @@
    * A simple wrapper to apply `List` styles to an `Avatar`.
    */
   var ListItemAvatar = /*#__PURE__*/React__namespace.forwardRef(function ListItemAvatar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemAvatar'
     });
@@ -35766,7 +35783,7 @@
    * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
    */
   var ListItemIcon = /*#__PURE__*/React__namespace.forwardRef(function ListItemIcon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemIcon'
     });
@@ -35849,7 +35866,7 @@
     });
   });
   var ListItemText = /*#__PURE__*/React__namespace.forwardRef(function ListItemText(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiListItemText'
     });
@@ -36304,7 +36321,7 @@
   });
   var Popover = /*#__PURE__*/React__namespace.forwardRef(function Popover(inProps, ref) {
     var _slotProps$paper, _slots$root, _slots$paper;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPopover'
     });
@@ -36821,7 +36838,7 @@
   });
   var Menu = /*#__PURE__*/React__namespace.forwardRef(function Menu(inProps, ref) {
     var _slots$paper, _slotProps$paper;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiMenu'
     });
@@ -37164,7 +37181,7 @@
     })));
   });
   var MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiMenuItem'
     });
@@ -37406,7 +37423,7 @@
     });
   });
   var MobileStepper = /*#__PURE__*/React__namespace.forwardRef(function MobileStepper(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiMobileStepper'
     });
@@ -37724,7 +37741,7 @@
    * An alternative to `<Select native />` with a much smaller bundle size footprint.
    */
   var NativeSelect = /*#__PURE__*/React__namespace.forwardRef(function NativeSelect(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiNativeSelect',
       props: inProps
     });
@@ -38050,7 +38067,7 @@
   });
   var OutlinedInput = /*#__PURE__*/React__namespace.forwardRef(function OutlinedInput(inProps, ref) {
     var _ref5, _slots$root, _ref6, _slots$input, _React$Fragment;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiOutlinedInput'
     });
@@ -38600,7 +38617,7 @@
     });
   });
   var PaginationItem = /*#__PURE__*/React__namespace.forwardRef(function PaginationItem(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPaginationItem'
     });
@@ -38803,7 +38820,7 @@
     return "Go to ".concat(type, " page");
   }
   var Pagination = /*#__PURE__*/React__namespace.forwardRef(function Pagination(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiPagination'
     });
@@ -39159,7 +39176,7 @@
   var defaultIcon$1 = /*#__PURE__*/jsxRuntime_1(RadioButtonIcon, {});
   var Radio = /*#__PURE__*/React__namespace.forwardRef(function Radio(inProps, ref) {
     var _defaultIcon$props$fo, _defaultCheckedIcon$p;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiRadio'
     });
@@ -39640,7 +39657,7 @@
     return "".concat(value, " Star").concat(value !== 1 ? 's' : '');
   }
   var Rating = /*#__PURE__*/React__namespace.forwardRef(function Rating(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiRating',
       props: inProps
     });
@@ -40081,7 +40098,7 @@
     }, colorSchemeStyles);
   });
   var ScopedCssBaseline = /*#__PURE__*/React__namespace.forwardRef(function ScopedCssBaseline(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiScopedCssBaseline'
     });
@@ -40804,7 +40821,7 @@
   var StyledOutlinedInput = styled$1(OutlinedInput$1, styledRootConfig)('');
   var StyledFilledInput = styled$1(FilledInput$1, styledRootConfig)('');
   var Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       name: 'MuiSelect',
       props: inProps
     });
@@ -40897,7 +40914,7 @@
         }, inputProps, {
           classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses
         }, input ? input.props.inputProps : {})
-      }, multiple && _native && variant === 'outlined' ? {
+      }, (multiple && _native || displayEmpty) && variant === 'outlined' ? {
         notched: true
       } : {}, {
         ref: inputComponentRef,
@@ -41127,7 +41144,7 @@
     return ownerState.animation === 'wave' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n\n      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */\n      -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &::after {\n        animation: ", " 2s linear 0.5s infinite;\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n        content: '';\n        position: absolute;\n        transform: translateX(-100%); /* Avoid flash during server-side hydration */\n        bottom: 0;\n        left: 0;\n        right: 0;\n        top: 0;\n      }\n    "])), waveKeyframe, (theme.vars || theme).palette.action.hover);
   });
   var Skeleton = /*#__PURE__*/React__namespace.forwardRef(function Skeleton(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSkeleton'
     });
@@ -41615,7 +41632,7 @@
   };
   var Slider = /*#__PURE__*/React__namespace.forwardRef(function Slider(inputProps, ref) {
     var _ref9, _slots$root, _ref10, _slots$rail, _ref11, _slots$track, _ref12, _slots$thumb, _ref13, _slots$valueLabel, _ref14, _slots$mark, _ref15, _slots$markLabel, _ref16, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inputProps,
       name: 'MuiSlider'
     });
@@ -41651,6 +41668,8 @@
       props.onChangeCommitted;
       var _props$orientation = props.orientation,
       orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
+      _props$shiftStep = props.shiftStep,
+      shiftStep = _props$shiftStep === void 0 ? 10 : _props$shiftStep,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
       _props$step = props.step,
@@ -41667,7 +41686,7 @@
       valueLabelDisplay = _props$valueLabelDisp === void 0 ? 'off' : _props$valueLabelDisp,
       _props$valueLabelForm = props.valueLabelFormat,
       valueLabelFormat = _props$valueLabelForm === void 0 ? Identity : _props$valueLabelForm,
-      other = _objectWithoutProperties(props, ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"]);
+      other = _objectWithoutProperties(props, ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "shiftStep", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"]);
     var ownerState = _extends({}, props, {
       isRtl: isRtl,
       max: max,
@@ -41680,6 +41699,7 @@
       color: color,
       size: size,
       step: step,
+      shiftStep: shiftStep,
       scale: scale,
       track: track,
       valueLabelDisplay: valueLabelDisplay,
@@ -42027,6 +42047,11 @@
      * }
      */
     scale: PropTypes.func,
+    /**
+     * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+     * @default 10
+     */
+    shiftStep: PropTypes.number,
     /**
      * The size of the slider.
      * @default 'medium'
@@ -42187,7 +42212,7 @@
     marginRight: -8
   });
   var SnackbarContent = /*#__PURE__*/React__namespace.forwardRef(function SnackbarContent(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSnackbarContent'
     });
@@ -42309,7 +42334,7 @@
     })));
   });
   var Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSnackbar'
     });
@@ -42844,7 +42869,7 @@
     });
   });
   var SpeedDial = /*#__PURE__*/React__namespace.forwardRef(function SpeedDial(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSpeedDial'
     });
@@ -42894,12 +42919,7 @@
       direction: direction
     });
     var classes = useUtilityClasses$r(ownerState);
-    var eventTimer = React__namespace.useRef();
-    React__namespace.useEffect(function () {
-      return function () {
-        clearTimeout(eventTimer.current);
-      };
-    }, []);
+    var eventTimer = useTimeout();
 
     /**
      * an index in actions.current
@@ -42982,9 +43002,9 @@
       if (event.type === 'blur' && onBlur) {
         onBlur(event);
       }
-      clearTimeout(eventTimer.current);
+      eventTimer.clear();
       if (event.type === 'blur') {
-        eventTimer.current = setTimeout(function () {
+        eventTimer.start(0, function () {
           setOpenState(false);
           if (onClose) {
             onClose(event, 'blur');
@@ -43001,7 +43021,7 @@
       if (FabProps.onClick) {
         FabProps.onClick(event);
       }
-      clearTimeout(eventTimer.current);
+      eventTimer.clear();
       if (open) {
         setOpenState(false);
         if (onClose) {
@@ -43025,10 +43045,10 @@
       // When moving the focus between two items,
       // a chain if blur and focus event is triggered.
       // We only handle the last event.
-      clearTimeout(eventTimer.current);
+      eventTimer.clear();
       if (!open) {
         // Wait for a future focus or click event
-        eventTimer.current = setTimeout(function () {
+        eventTimer.start(0, function () {
           setOpenState(true);
           if (onOpen) {
             var eventMap = {
@@ -43391,7 +43411,7 @@
     };
   });
   var hystersisOpen = false;
-  var hystersisTimer = null;
+  var hystersisTimer = new Timeout();
   var cursorPosition = {
     x: 0,
     y: 0
@@ -43408,7 +43428,7 @@
   // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
   var Tooltip = /*#__PURE__*/React__namespace.forwardRef(function Tooltip(inProps, ref) {
     var _ref5, _slots$popper, _ref6, _ref7, _slots$transition, _ref8, _slots$tooltip, _ref9, _slots$arrow, _slotProps$popper, _ref10, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref11, _slotProps$tooltip2, _slotProps$arrow, _ref12, _slotProps$arrow2;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTooltip'
     });
@@ -43473,10 +43493,10 @@
       setArrowRef = _React$useState2[1];
     var ignoreNonTouchEvents = React__namespace.useRef(false);
     var disableInteractive = disableInteractiveProp || followCursor;
-    var closeTimer = React__namespace.useRef();
-    var enterTimer = React__namespace.useRef();
-    var leaveTimer = React__namespace.useRef();
-    var touchTimer = React__namespace.useRef();
+    var closeTimer = useTimeout();
+    var enterTimer = useTimeout();
+    var leaveTimer = useTimeout();
+    var touchTimer = useTimeout();
     var _useControlled = useControlled({
         controlled: openProp,
         "default": false,
@@ -43499,23 +43519,18 @@
     }
     var id = useId(idProp);
     var prevUserSelect = React__namespace.useRef();
-    var stopTouchInteraction = React__namespace.useCallback(function () {
+    var stopTouchInteraction = useEventCallback(function () {
       if (prevUserSelect.current !== undefined) {
         document.body.style.WebkitUserSelect = prevUserSelect.current;
         prevUserSelect.current = undefined;
       }
-      clearTimeout(touchTimer.current);
-    }, []);
+      touchTimer.clear();
+    });
     React__namespace.useEffect(function () {
-      return function () {
-        clearTimeout(closeTimer.current);
-        clearTimeout(enterTimer.current);
-        clearTimeout(leaveTimer.current);
-        stopTouchInteraction();
-      };
+      return stopTouchInteraction;
     }, [stopTouchInteraction]);
     var handleOpen = function handleOpen(event) {
-      clearTimeout(hystersisTimer);
+      hystersisTimer.clear();
       hystersisOpen = true;
 
       // The mouseover event will trigger for every nested element in the tooltip.
@@ -43531,18 +43546,16 @@
      * @param {React.SyntheticEvent | Event} event
      */
     function (event) {
-      clearTimeout(hystersisTimer);
-      hystersisTimer = setTimeout(function () {
+      hystersisTimer.start(800 + leaveDelay, function () {
         hystersisOpen = false;
-      }, 800 + leaveDelay);
+      });
       setOpenState(false);
       if (onClose && open) {
         onClose(event);
       }
-      clearTimeout(closeTimer.current);
-      closeTimer.current = setTimeout(function () {
+      closeTimer.start(theme.transitions.duration.shortest, function () {
         ignoreNonTouchEvents.current = false;
-      }, theme.transitions.duration.shortest);
+      });
     });
     var handleEnter = function handleEnter(event) {
       if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -43555,22 +43568,21 @@
       if (childNode) {
         childNode.removeAttribute('title');
       }
-      clearTimeout(enterTimer.current);
-      clearTimeout(leaveTimer.current);
+      enterTimer.clear();
+      leaveTimer.clear();
       if (enterDelay || hystersisOpen && enterNextDelay) {
-        enterTimer.current = setTimeout(function () {
+        enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, function () {
           handleOpen(event);
-        }, hystersisOpen ? enterNextDelay : enterDelay);
+        });
       } else {
         handleOpen(event);
       }
     };
     var handleLeave = function handleLeave(event) {
-      clearTimeout(enterTimer.current);
-      clearTimeout(leaveTimer.current);
-      leaveTimer.current = setTimeout(function () {
+      enterTimer.clear();
+      leaveTimer.start(leaveDelay, function () {
         handleClose(event);
-      }, leaveDelay);
+      });
     };
     var _useIsFocusVisible = useIsFocusVisible(),
       isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
@@ -43611,26 +43623,25 @@
     var handleMouseLeave = handleLeave;
     var handleTouchStart = function handleTouchStart(event) {
       detectTouchStart(event);
-      clearTimeout(leaveTimer.current);
-      clearTimeout(closeTimer.current);
+      leaveTimer.clear();
+      closeTimer.clear();
       stopTouchInteraction();
       prevUserSelect.current = document.body.style.WebkitUserSelect;
       // Prevent iOS text selection on long-tap.
       document.body.style.WebkitUserSelect = 'none';
-      touchTimer.current = setTimeout(function () {
+      touchTimer.start(enterTouchDelay, function () {
         document.body.style.WebkitUserSelect = prevUserSelect.current;
         handleEnter(event);
-      }, enterTouchDelay);
+      });
     };
     var handleTouchEnd = function handleTouchEnd(event) {
       if (children.props.onTouchEnd) {
         children.props.onTouchEnd(event);
       }
       stopTouchInteraction();
-      clearTimeout(leaveTimer.current);
-      leaveTimer.current = setTimeout(function () {
+      leaveTimer.start(leaveTouchDelay, function () {
         handleClose(event);
-      }, leaveTouchDelay);
+      });
     };
     React__namespace.useEffect(function () {
       if (!open) {
@@ -43654,6 +43665,7 @@
     var handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);
 
     // There is no point in displaying an empty tooltip.
+    // So we exclude all falsy values, except 0, which is valid.
     if (!title && title !== 0) {
       open = false;
     }
@@ -44091,7 +44103,7 @@
     });
   });
   var SpeedDialAction = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialAction(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSpeedDialAction'
     });
@@ -44285,7 +44297,7 @@
     }));
   });
   var SpeedDialIcon = /*#__PURE__*/React__namespace.forwardRef(function SpeedDialIcon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSpeedDialIcon'
     });
@@ -44416,7 +44428,7 @@
     });
   });
   var Step = /*#__PURE__*/React__namespace.forwardRef(function Step(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStep'
     });
@@ -44607,7 +44619,7 @@
     };
   });
   var StepIcon = /*#__PURE__*/React__namespace.forwardRef(function StepIcon(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepIcon'
     });
@@ -44806,7 +44818,7 @@
   });
   var StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
     var _slotProps$label;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepLabel'
     });
@@ -44970,7 +44982,7 @@
     }));
   });
   var StepButton = /*#__PURE__*/React__namespace.forwardRef(function StepButton(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepButton'
     });
@@ -45104,7 +45116,7 @@
     });
   });
   var StepConnector = /*#__PURE__*/React__namespace.forwardRef(function StepConnector(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepConnector'
     });
@@ -45201,7 +45213,7 @@
     }
   })({});
   var StepContent = /*#__PURE__*/React__namespace.forwardRef(function StepContent(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepContent'
     });
@@ -45333,7 +45345,7 @@
   });
   var defaultConnector = /*#__PURE__*/jsxRuntime_1(StepConnector$1, {});
   var Stepper = /*#__PURE__*/React__namespace.forwardRef(function Stepper(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiStepper'
     });
@@ -45599,7 +45611,7 @@
   }
   var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
   var SwipeableDrawer = /*#__PURE__*/React__namespace.forwardRef(function SwipeableDrawer(inProps, ref) {
-    var props = useThemeProps$1({
+    var props = useThemeProps$2({
       name: 'MuiSwipeableDrawer',
       props: inProps
     });
@@ -46262,7 +46274,7 @@
     };
   });
   var Switch = /*#__PURE__*/React__namespace.forwardRef(function Switch(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiSwitch'
     });
@@ -46487,7 +46499,7 @@
     });
   });
   var Tab = /*#__PURE__*/React__namespace.forwardRef(function Tab(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTab'
     });
@@ -46691,7 +46703,7 @@
   });
   var defaultComponent$4 = 'table';
   var Table = /*#__PURE__*/React__namespace.forwardRef(function Table(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTable'
     });
@@ -46812,7 +46824,7 @@
   };
   var defaultComponent$3 = 'tbody';
   var TableBody = /*#__PURE__*/React__namespace.forwardRef(function TableBody(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableBody'
     });
@@ -46947,7 +46959,7 @@
    * or otherwise a `<td>` element.
    */
   var TableCell = /*#__PURE__*/React__namespace.forwardRef(function TableCell(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableCell'
     });
@@ -47086,7 +47098,7 @@
     overflowX: 'auto'
   });
   var TableContainer = /*#__PURE__*/React__namespace.forwardRef(function TableContainer(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableContainer'
     });
@@ -47161,7 +47173,7 @@
   };
   var defaultComponent$2 = 'tfoot';
   var TableFooter = /*#__PURE__*/React__namespace.forwardRef(function TableFooter(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableFooter'
     });
@@ -47240,7 +47252,7 @@
   };
   var defaultComponent$1 = 'thead';
   var TableHead = /*#__PURE__*/React__namespace.forwardRef(function TableHead(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableHead'
     });
@@ -47336,7 +47348,7 @@
     return ownerState.variant === 'regular' && theme.mixins.toolbar;
   });
   var Toolbar = /*#__PURE__*/React__namespace.forwardRef(function Toolbar(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiToolbar'
     });
@@ -47710,7 +47722,7 @@
    */
   var TablePagination = /*#__PURE__*/React__namespace.forwardRef(function TablePagination(inProps, ref) {
     var _slotProps$select;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTablePagination'
     });
@@ -48066,7 +48078,7 @@
    * based on the material table element parent (head, body, etc).
    */
   var TableRow = /*#__PURE__*/React__namespace.forwardRef(function TableRow(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableRow'
     });
@@ -48214,7 +48226,7 @@
    * A button based label for placing inside `TableCell` for column sorting.
    */
   var TableSortLabel = /*#__PURE__*/React__namespace.forwardRef(function TableSortLabel(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTableSortLabel'
     });
@@ -48425,7 +48437,7 @@
   });
   var TabScrollButton = /*#__PURE__*/React__namespace.forwardRef(function TabScrollButton(inProps, ref) {
     var _slots$StartScrollBut, _slots$EndScrollButto;
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTabScrollButton'
     });
@@ -48703,7 +48715,7 @@
   var defaultIndicatorStyle = {};
   var warnedOnceTabPresent = false;
   var Tabs = /*#__PURE__*/React__namespace.forwardRef(function Tabs(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTabs'
     });
@@ -49414,7 +49426,7 @@
    * - using the underlying components directly as shown in the demos
    */
   var TextField = /*#__PURE__*/React__namespace.forwardRef(function TextField(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiTextField'
     });
@@ -49830,7 +49842,7 @@
     var resolvedProps = resolveProps(_extends({}, contextProps, {
       selected: isValueSelected(inProps.value, contextValue)
     }), inProps);
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: resolvedProps,
       name: 'MuiToggleButton'
     });
@@ -50034,7 +50046,7 @@
     }));
   });
   var ToggleButtonGroup = /*#__PURE__*/React__namespace.forwardRef(function ToggleButtonGroup(inProps, ref) {
-    var props = useThemeProps({
+    var props = useThemeProps$1({
       props: inProps,
       name: 'MuiToggleButtonGroup'
     });
@@ -50703,7 +50715,7 @@
   exports.useStepContext = useStepContext;
   exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
-  exports.useThemeProps = useThemeProps;
+  exports.useThemeProps = useThemeProps$1;
   exports.withStyles = withStyles;
   exports.withTheme = withTheme;