@mui/material 5.15.7 → 5.15.8

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.7
+ * @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
@@ -7729,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;
   }
@@ -7764,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) {
@@ -7857,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,
@@ -7942,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) {
@@ -13708,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
   } ;
@@ -16400,153 +16295,736 @@
     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;
   }
-
-  function effect$2(_ref2) {
-    var state = _ref2.state;
-    var initialStyles = {
-      popper: {
-        position: state.options.strategy,
-        left: '0',
-        top: '0',
-        margin: '0'
-      },
-      arrow: {
-        position: 'absolute'
-      },
-      reference: {}
-    };
-    Object.assign(state.elements.popper.style, initialStyles.popper);
-    state.styles = initialStyles;
-
-    if (state.elements.arrow) {
-      Object.assign(state.elements.arrow.style, initialStyles.arrow);
+  /**
+   * @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 = [];
     }
-
-    return function () {
-      Object.keys(state.elements).forEach(function (name) {
-        var element = state.elements[name];
-        var attributes = state.attributes[name] || {};
-        var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
-
-        var style = styleProperties.reduce(function (style, property) {
-          style[property] = '';
-          return style;
-        }, {}); // arrow is optional + virtual elements
-
-        if (!isHTMLElement$1(element) || !getNodeName(element)) {
-          return;
+    _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);
 
-        Object.assign(element.style, style);
-        Object.keys(attributes).forEach(function (attribute) {
-          element.removeAttribute(attribute);
+        // 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;
         });
-      });
-    };
-  } // eslint-disable-next-line import/no-unused-modules
+        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;
+  }();
 
-  var applyStyles$1 = {
-    name: 'applyStyles',
-    enabled: true,
-    phase: 'write',
+  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'
+      },
+      reference: {}
+    };
+    Object.assign(state.elements.popper.style, initialStyles.popper);
+    state.styles = initialStyles;
+
+    if (state.elements.arrow) {
+      Object.assign(state.elements.arrow.style, initialStyles.arrow);
+    }
+
+    return function () {
+      Object.keys(state.elements).forEach(function (name) {
+        var element = state.elements[name];
+        var attributes = state.attributes[name] || {};
+        var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
+
+        var style = styleProperties.reduce(function (style, property) {
+          style[property] = '';
+          return style;
+        }, {}); // arrow is optional + virtual elements
+
+        if (!isHTMLElement$1(element) || !getNodeName(element)) {
+          return;
+        }
+
+        Object.assign(element.style, style);
+        Object.keys(attributes).forEach(function (attribute) {
+          element.removeAttribute(attribute);
+        });
+      });
+    };
+  } // eslint-disable-next-line import/no-unused-modules
+
+
+  var applyStyles$1 = {
+    name: 'applyStyles',
+    enabled: true,
+    phase: 'write',
     fn: applyStyles,
     effect: effect$2,
     requires: ['computeStyles']
@@ -18191,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);
@@ -18323,836 +18716,338 @@
       disablePortal = props.disablePortal,
       modifiers = props.modifiers,
       open = props.open,
-      initialPlacement = props.placement,
-      popperOptions = props.popperOptions,
-      popperRefProp = props.popperRef,
-      _props$slotProps = props.slotProps,
-      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
-      _props$slots = props.slots,
-      slots = _props$slots === void 0 ? {} : _props$slots,
-      TransitionProps = props.TransitionProps;
-      props.ownerState;
-      var other = _objectWithoutProperties(props, ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"]);
-    var tooltipRef = React__namespace.useRef(null);
-    var ownRef = useForkRef(tooltipRef, forwardedRef);
-    var popperRef = React__namespace.useRef(null);
-    var handlePopperRef = useForkRef(popperRef, popperRefProp);
-    var handlePopperRefRef = React__namespace.useRef(handlePopperRef);
-    useEnhancedEffect$1(function () {
-      handlePopperRefRef.current = handlePopperRef;
-    }, [handlePopperRef]);
-    React__namespace.useImperativeHandle(popperRefProp, function () {
-      return popperRef.current;
-    }, []);
-    var rtlPlacement = flipPlacement(initialPlacement, direction);
-    /**
-     * placement initialized from prop but can change during lifetime if modifiers.flip.
-     * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
-     */
-    var _React$useState = React__namespace.useState(rtlPlacement),
-      placement = _React$useState[0],
-      setPlacement = _React$useState[1];
-    var _React$useState2 = React__namespace.useState(resolveAnchorEl$1(anchorEl)),
-      resolvedAnchorElement = _React$useState2[0],
-      setResolvedAnchorElement = _React$useState2[1];
-    React__namespace.useEffect(function () {
-      if (popperRef.current) {
-        popperRef.current.forceUpdate();
-      }
-    });
-    React__namespace.useEffect(function () {
-      if (anchorEl) {
-        setResolvedAnchorElement(resolveAnchorEl$1(anchorEl));
-      }
-    }, [anchorEl]);
-    useEnhancedEffect$1(function () {
-      if (!resolvedAnchorElement || !open) {
-        return undefined;
-      }
-      var handlePopperUpdate = function handlePopperUpdate(data) {
-        setPlacement(data.placement);
-      };
-      {
-        if (resolvedAnchorElement && isHTMLElement(resolvedAnchorElement) && resolvedAnchorElement.nodeType === 1) {
-          var box = resolvedAnchorElement.getBoundingClientRect();
-          if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-            console.warn(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
-          }
-        }
-      }
-      var popperModifiers = [{
-        name: 'preventOverflow',
-        options: {
-          altBoundary: disablePortal
-        }
-      }, {
-        name: 'flip',
-        options: {
-          altBoundary: disablePortal
-        }
-      }, {
-        name: 'onUpdate',
-        enabled: true,
-        phase: 'afterWrite',
-        fn: function fn(_ref) {
-          var state = _ref.state;
-          handlePopperUpdate(state);
-        }
-      }];
-      if (modifiers != null) {
-        popperModifiers = popperModifiers.concat(modifiers);
-      }
-      if (popperOptions && popperOptions.modifiers != null) {
-        popperModifiers = popperModifiers.concat(popperOptions.modifiers);
-      }
-      var popper = createPopper(resolvedAnchorElement, tooltipRef.current, _extends({
-        placement: rtlPlacement
-      }, popperOptions, {
-        modifiers: popperModifiers
-      }));
-      handlePopperRefRef.current(popper);
-      return function () {
-        popper.destroy();
-        handlePopperRefRef.current(null);
-      };
-    }, [resolvedAnchorElement, disablePortal, modifiers, open, popperOptions, rtlPlacement]);
-    var childProps = {
-      placement: placement
-    };
-    if (TransitionProps !== null) {
-      childProps.TransitionProps = TransitionProps;
-    }
-    var classes = useUtilityClasses$1B();
-    var Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
-    var rootProps = useSlotProps({
-      elementType: Root,
-      externalSlotProps: slotProps.root,
-      externalForwardedProps: other,
-      additionalProps: {
-        role: 'tooltip',
-        ref: ownRef
-      },
-      ownerState: props,
-      className: classes.root
-    });
-    return /*#__PURE__*/jsxRuntime_1(Root, _extends({}, rootProps, {
-      children: typeof children === 'function' ? children(childProps) : children
-    }));
-  });
-
-  /**
-   * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
-   *
-   * Demos:
-   *
-   * - [Popper](https://mui.com/base-ui/react-popper/)
-   *
-   * API:
-   *
-   * - [Popper API](https://mui.com/base-ui/react-popper/components-api/#popper)
-   */
-  var Popper$2 = /*#__PURE__*/React__namespace.forwardRef(function Popper(props, forwardedRef) {
-    var anchorEl = props.anchorEl,
-      children = props.children,
-      containerProp = props.container,
-      _props$direction = props.direction,
-      direction = _props$direction === void 0 ? 'ltr' : _props$direction,
-      _props$disablePortal = props.disablePortal,
-      disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
-      _props$keepMounted = props.keepMounted,
-      keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
-      modifiers = props.modifiers,
-      open = props.open,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
-      _props$popperOptions = props.popperOptions,
-      popperOptions = _props$popperOptions === void 0 ? defaultPopperOptions : _props$popperOptions,
-      popperRef = props.popperRef,
-      style = props.style,
-      _props$transition = props.transition,
-      transition = _props$transition === void 0 ? false : _props$transition,
-      _props$slotProps2 = props.slotProps,
-      slotProps = _props$slotProps2 === void 0 ? {} : _props$slotProps2,
-      _props$slots2 = props.slots,
-      slots = _props$slots2 === void 0 ? {} : _props$slots2,
-      other = _objectWithoutProperties(props, ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"]);
-    var _React$useState3 = React__namespace.useState(true),
-      exited = _React$useState3[0],
-      setExited = _React$useState3[1];
-    var handleEnter = function handleEnter() {
-      setExited(false);
-    };
-    var handleExited = function handleExited() {
-      setExited(true);
-    };
-    if (!keepMounted && !open && (!transition || exited)) {
-      return null;
-    }
-
-    // If the container prop is provided, use that
-    // If the anchorEl prop is provided, use its parent body element as the container
-    // If neither are provided let the Modal take care of choosing the container
-    var container;
-    if (containerProp) {
-      container = containerProp;
-    } else if (anchorEl) {
-      var resolvedAnchorEl = resolveAnchorEl$1(anchorEl);
-      container = resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) ? ownerDocument(resolvedAnchorEl).body : ownerDocument(null).body;
-    }
-    var display = !open && keepMounted && (!transition || exited) ? 'none' : undefined;
-    var transitionProps = transition ? {
-      "in": open,
-      onEnter: handleEnter,
-      onExited: handleExited
-    } : undefined;
-    return /*#__PURE__*/jsxRuntime_1(Portal, {
-      disablePortal: disablePortal,
-      container: container,
-      children: /*#__PURE__*/jsxRuntime_1(PopperTooltip, _extends({
-        anchorEl: anchorEl,
-        direction: direction,
-        disablePortal: disablePortal,
-        modifiers: modifiers,
-        ref: forwardedRef,
-        open: transition ? !exited : open,
-        placement: placement,
-        popperOptions: popperOptions,
-        popperRef: popperRef,
-        slotProps: slotProps,
-        slots: slots
-      }, other, {
-        style: _extends({
-          // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
-          position: 'fixed',
-          // Fix Popper.js display issue
-          top: 0,
-          left: 0,
-          display: display
-        }, style),
-        TransitionProps: transitionProps,
-        children: children
-      }))
-    });
-  });
-  Popper$2.propTypes /* remove-proptypes */ = {
-    // ┌────────────────────────────── Warning ──────────────────────────────┐
-    // │ These PropTypes are generated from the TypeScript type definitions. │
-    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-    // └─────────────────────────────────────────────────────────────────────┘
-    /**
-     * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
-     * or a function that returns either.
-     * It's used to set the position of the popper.
-     * The return value will passed as the reference object of the Popper instance.
-     */
-    anchorEl: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]), function (props) {
-      if (props.open) {
-        var resolvedAnchorEl = resolveAnchorEl$1(props.anchorEl);
-        if (resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) && resolvedAnchorEl.nodeType === 1) {
-          var box = resolvedAnchorEl.getBoundingClientRect();
-          if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-            return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
-          }
-        } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== 'function' || isVirtualElement(resolvedAnchorEl) && resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {
-          return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'It should be an HTML element instance or a virtualElement ', '(https://popper.js.org/docs/v2/virtual-elements/).'].join('\n'));
-        }
-      }
-      return null;
-    }),
-    /**
-     * Popper render function or node.
-     */
-    children: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.node, PropTypes.func]),
-    /**
-     * 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]),
-    /**
-     * Direction of the text.
-     * @default 'ltr'
-     */
-    direction: PropTypes.oneOf(['ltr', 'rtl']),
-    /**
-     * The `children` will be under the DOM hierarchy of the parent component.
-     * @default false
-     */
-    disablePortal: PropTypes.bool,
-    /**
-     * Always keep the children in the DOM.
-     * This prop can be useful in SEO situation or
-     * when you want to maximize the responsiveness of the Popper.
-     * @default false
-     */
-    keepMounted: PropTypes.bool,
-    /**
-     * Popper.js is based on a "plugin-like" architecture,
-     * most of its features are fully encapsulated "modifiers".
-     *
-     * A modifier is a function that is called each time Popper.js needs to
-     * compute the position of the popper.
-     * For this reason, modifiers should be very performant to avoid bottlenecks.
-     * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
-     */
-    modifiers: PropTypes.arrayOf(PropTypes.shape({
-      data: PropTypes.object,
-      effect: PropTypes.func,
-      enabled: PropTypes.bool,
-      fn: PropTypes.func,
-      name: PropTypes.any,
-      options: PropTypes.object,
-      phase: PropTypes.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
-      requires: PropTypes.arrayOf(PropTypes.string),
-      requiresIfExists: PropTypes.arrayOf(PropTypes.string)
-    })),
-    /**
-     * If `true`, the component is shown.
-     */
-    open: PropTypes.bool.isRequired,
-    /**
-     * Popper placement.
-     * @default 'bottom'
-     */
-    placement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
-    /**
-     * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
-     * @default {}
-     */
-    popperOptions: PropTypes.shape({
-      modifiers: PropTypes.array,
-      onFirstUpdate: PropTypes.func,
-      placement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
-      strategy: PropTypes.oneOf(['absolute', 'fixed'])
-    }),
-    /**
-     * A ref that points to the used popper instance.
-     */
-    popperRef: refType$1,
-    /**
-     * The props used for each slot inside the Popper.
-     * @default {}
-     */
-    slotProps: PropTypes.shape({
-      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-    }),
-    /**
-     * The components used for each slot inside the Popper.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    slots: PropTypes.shape({
-      root: PropTypes.elementType
-    }),
-    /**
-     * Help supporting a react-transition-group/Transition component.
-     * @default false
-     */
-    transition: PropTypes.bool
-  } ;
-
-  // 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();
+      initialPlacement = props.placement,
+      popperOptions = props.popperOptions,
+      popperRefProp = props.popperRef,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
+      TransitionProps = props.TransitionProps;
+      props.ownerState;
+      var other = _objectWithoutProperties(props, ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"]);
+    var tooltipRef = React__namespace.useRef(null);
+    var ownRef = useForkRef(tooltipRef, forwardedRef);
+    var popperRef = React__namespace.useRef(null);
+    var handlePopperRef = useForkRef(popperRef, popperRefProp);
+    var handlePopperRefRef = React__namespace.useRef(handlePopperRef);
+    useEnhancedEffect$1(function () {
+      handlePopperRefRef.current = handlePopperRef;
+    }, [handlePopperRef]);
+    React__namespace.useImperativeHandle(popperRefProp, function () {
+      return popperRef.current;
+    }, []);
+    var rtlPlacement = flipPlacement(initialPlacement, direction);
+    /**
+     * placement initialized from prop but can change during lifetime if modifiers.flip.
+     * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
+     */
+    var _React$useState = React__namespace.useState(rtlPlacement),
+      placement = _React$useState[0],
+      setPlacement = _React$useState[1];
+    var _React$useState2 = React__namespace.useState(resolveAnchorEl$1(anchorEl)),
+      resolvedAnchorElement = _React$useState2[0],
+      setResolvedAnchorElement = _React$useState2[1];
+    React__namespace.useEffect(function () {
+      if (popperRef.current) {
+        popperRef.current.forceUpdate();
       }
     });
-    var isTopModal = React__namespace.useCallback(function () {
-      return manager.isTopModal(getModal());
-    }, [manager]);
-    var handlePortalRef = useEventCallback(function (node) {
-      mountNodeRef.current = node;
-      if (!node) {
-        return;
+    React__namespace.useEffect(function () {
+      if (anchorEl) {
+        setResolvedAnchorElement(resolveAnchorEl$1(anchorEl));
       }
-      if (open && isTopModal()) {
-        handleMounted();
-      } else if (modalRef.current) {
-        ariaHidden(modalRef.current, ariaHiddenProp);
+    }, [anchorEl]);
+    useEnhancedEffect$1(function () {
+      if (!resolvedAnchorElement || !open) {
+        return undefined;
       }
-    });
-    var handleClose = React__namespace.useCallback(function () {
-      manager.remove(getModal(), ariaHiddenProp);
-    }, [ariaHiddenProp, manager]);
-    React__namespace.useEffect(function () {
-      return function () {
-        handleClose();
+      var handlePopperUpdate = function handlePopperUpdate(data) {
+        setPlacement(data.placement);
       };
-    }, [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');
+      {
+        if (resolvedAnchorElement && isHTMLElement(resolvedAnchorElement) && resolvedAnchorElement.nodeType === 1) {
+          var box = resolvedAnchorElement.getBoundingClientRect();
+          if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+            console.warn(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
           }
         }
-      };
-    };
-    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 popperModifiers = [{
+        name: 'preventOverflow',
+        options: {
+          altBoundary: disablePortal
         }
-      };
-      var handleExited = function handleExited() {
-        setExited(true);
-        if (onTransitionExited) {
-          onTransitionExited();
+      }, {
+        name: 'flip',
+        options: {
+          altBoundary: disablePortal
         }
-        if (closeAfterTransition) {
-          handleClose();
+      }, {
+        name: 'onUpdate',
+        enabled: true,
+        phase: 'afterWrite',
+        fn: function fn(_ref) {
+          var state = _ref.state;
+          handlePopperUpdate(state);
         }
+      }];
+      if (modifiers != null) {
+        popperModifiers = popperModifiers.concat(modifiers);
+      }
+      if (popperOptions && popperOptions.modifiers != null) {
+        popperModifiers = popperModifiers.concat(popperOptions.modifiers);
+      }
+      var popper = createPopper(resolvedAnchorElement, tooltipRef.current, _extends({
+        placement: rtlPlacement
+      }, popperOptions, {
+        modifiers: popperModifiers
+      }));
+      handlePopperRefRef.current(popper);
+      return function () {
+        popper.destroy();
+        handlePopperRefRef.current(null);
       };
-      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
+    }, [resolvedAnchorElement, disablePortal, modifiers, open, popperOptions, rtlPlacement]);
+    var childProps = {
+      placement: placement
     };
-  }
+    if (TransitionProps !== null) {
+      childProps.TransitionProps = TransitionProps;
+    }
+    var classes = useUtilityClasses$1B();
+    var Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
+    var rootProps = useSlotProps({
+      elementType: Root,
+      externalSlotProps: slotProps.root,
+      externalForwardedProps: other,
+      additionalProps: {
+        role: 'tooltip',
+        ref: ownRef
+      },
+      ownerState: props,
+      className: classes.root
+    });
+    return /*#__PURE__*/jsxRuntime_1(Root, _extends({}, rootProps, {
+      children: typeof children === 'function' ? children(childProps) : children
+    }));
+  });
 
   /**
-   * 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.
+   * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
    *
    * Demos:
    *
-   * - [No SSR](https://mui.com/base-ui/react-no-ssr/)
+   * - [Popper](https://mui.com/base-ui/react-popper/)
    *
    * API:
    *
-   * - [NoSsr API](https://mui.com/base-ui/react-no-ssr/components-api/#no-ssr)
+   * - [Popper API](https://mui.com/base-ui/react-popper/components-api/#popper)
    */
-  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]);
+  var Popper$2 = /*#__PURE__*/React__namespace.forwardRef(function Popper(props, forwardedRef) {
+    var anchorEl = props.anchorEl,
+      children = props.children,
+      containerProp = props.container,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'ltr' : _props$direction,
+      _props$disablePortal = props.disablePortal,
+      disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
+      _props$keepMounted = props.keepMounted,
+      keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
+      modifiers = props.modifiers,
+      open = props.open,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
+      _props$popperOptions = props.popperOptions,
+      popperOptions = _props$popperOptions === void 0 ? defaultPopperOptions : _props$popperOptions,
+      popperRef = props.popperRef,
+      style = props.style,
+      _props$transition = props.transition,
+      transition = _props$transition === void 0 ? false : _props$transition,
+      _props$slotProps2 = props.slotProps,
+      slotProps = _props$slotProps2 === void 0 ? {} : _props$slotProps2,
+      _props$slots2 = props.slots,
+      slots = _props$slots2 === void 0 ? {} : _props$slots2,
+      other = _objectWithoutProperties(props, ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"]);
+    var _React$useState3 = React__namespace.useState(true),
+      exited = _React$useState3[0],
+      setExited = _React$useState3[1];
+    var handleEnter = function handleEnter() {
+      setExited(false);
+    };
+    var handleExited = function handleExited() {
+      setExited(true);
+    };
+    if (!keepMounted && !open && (!transition || exited)) {
+      return null;
+    }
 
-    // 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
+    // If the container prop is provided, use that
+    // If the anchorEl prop is provided, use its parent body element as the container
+    // If neither are provided let the Modal take care of choosing the container
+    var container;
+    if (containerProp) {
+      container = containerProp;
+    } else if (anchorEl) {
+      var resolvedAnchorEl = resolveAnchorEl$1(anchorEl);
+      container = resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) ? ownerDocument(resolvedAnchorEl).body : ownerDocument(null).body;
+    }
+    var display = !open && keepMounted && (!transition || exited) ? 'none' : undefined;
+    var transitionProps = transition ? {
+      "in": open,
+      onEnter: handleEnter,
+      onExited: handleExited
+    } : undefined;
+    return /*#__PURE__*/jsxRuntime_1(Portal, {
+      disablePortal: disablePortal,
+      container: container,
+      children: /*#__PURE__*/jsxRuntime_1(PopperTooltip, _extends({
+        anchorEl: anchorEl,
+        direction: direction,
+        disablePortal: disablePortal,
+        modifiers: modifiers,
+        ref: forwardedRef,
+        open: transition ? !exited : open,
+        placement: placement,
+        popperOptions: popperOptions,
+        popperRef: popperRef,
+        slotProps: slotProps,
+        slots: slots
+      }, other, {
+        style: _extends({
+          // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
+          position: 'fixed',
+          // Fix Popper.js display issue
+          top: 0,
+          left: 0,
+          display: display
+        }, style),
+        TransitionProps: transitionProps,
+        children: children
+      }))
     });
-  }
-  NoSsr.propTypes /* remove-proptypes */ = {
+  });
+  Popper$2.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.
+     * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
+     * or a function that returns either.
+     * It's used to set the position of the popper.
+     * The return value will passed as the reference object of the Popper instance.
      */
-    children: PropTypes.node,
+    anchorEl: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]), function (props) {
+      if (props.open) {
+        var resolvedAnchorEl = resolveAnchorEl$1(props.anchorEl);
+        if (resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) && resolvedAnchorEl.nodeType === 1) {
+          var box = resolvedAnchorEl.getBoundingClientRect();
+          if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+            return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+          }
+        } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== 'function' || isVirtualElement(resolvedAnchorEl) && resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {
+          return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'It should be an HTML element instance or a virtualElement ', '(https://popper.js.org/docs/v2/virtual-elements/).'].join('\n'));
+        }
+      }
+      return null;
+    }),
     /**
-     * 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.
+     * Popper render function or node.
+     */
+    children: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.node, PropTypes.func]),
+    /**
+     * 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]),
+    /**
+     * Direction of the text.
+     * @default 'ltr'
+     */
+    direction: PropTypes.oneOf(['ltr', 'rtl']),
+    /**
+     * The `children` will be under the DOM hierarchy of the parent component.
      * @default false
      */
-    defer: PropTypes.bool,
+    disablePortal: PropTypes.bool,
     /**
-     * The fallback content to display.
-     * @default null
+     * Always keep the children in the DOM.
+     * This prop can be useful in SEO situation or
+     * when you want to maximize the responsiveness of the Popper.
+     * @default false
      */
-    fallback: PropTypes.node
+    keepMounted: PropTypes.bool,
+    /**
+     * Popper.js is based on a "plugin-like" architecture,
+     * most of its features are fully encapsulated "modifiers".
+     *
+     * A modifier is a function that is called each time Popper.js needs to
+     * compute the position of the popper.
+     * For this reason, modifiers should be very performant to avoid bottlenecks.
+     * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
+     */
+    modifiers: PropTypes.arrayOf(PropTypes.shape({
+      data: PropTypes.object,
+      effect: PropTypes.func,
+      enabled: PropTypes.bool,
+      fn: PropTypes.func,
+      name: PropTypes.any,
+      options: PropTypes.object,
+      phase: PropTypes.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
+      requires: PropTypes.arrayOf(PropTypes.string),
+      requiresIfExists: PropTypes.arrayOf(PropTypes.string)
+    })),
+    /**
+     * If `true`, the component is shown.
+     */
+    open: PropTypes.bool.isRequired,
+    /**
+     * Popper placement.
+     * @default 'bottom'
+     */
+    placement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+    /**
+     * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
+     * @default {}
+     */
+    popperOptions: PropTypes.shape({
+      modifiers: PropTypes.array,
+      onFirstUpdate: PropTypes.func,
+      placement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+      strategy: PropTypes.oneOf(['absolute', 'fixed'])
+    }),
+    /**
+     * A ref that points to the used popper instance.
+     */
+    popperRef: refType$1,
+    /**
+     * The props used for each slot inside the Popper.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside the Popper.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      root: PropTypes.elementType
+    }),
+    /**
+     * Help supporting a react-transition-group/Transition component.
+     * @default false
+     */
+    transition: PropTypes.bool
   } ;
-  {
-    // eslint-disable-next-line
-    NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
-  }
 
   var INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
   function asc(a, b) {
@@ -19345,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();
@@ -19433,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;
@@ -19453,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();
@@ -19775,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({
@@ -24084,7 +24006,10 @@
         ownerState: ownerState,
         className: classes.img
       }, imgProps));
-    } else if (childrenProp != null && childrenProp !== '' && typeof childrenProp !== 'boolean') {
+
+      // 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];
@@ -41743,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,
@@ -41759,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,
@@ -41772,6 +41699,7 @@
       color: color,
       size: size,
       step: step,
+      shiftStep: shiftStep,
       scale: scale,
       track: track,
       valueLabelDisplay: valueLabelDisplay,
@@ -42119,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'
@@ -43732,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;
     }