@dxos/react-ui 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

package/dist/lib/node/index.cjs

@@ -74,6 +74,7 @@ __export(node_exports, {
   Treegrid: () => Treegrid,
   createDropdownMenuScope: () => createDropdownMenuScope,
   createPopoverScope: () => createPopoverScope,
+  createTooltipScope: () => createTooltipScope,
   hasIosKeyboard: () => hasIosKeyboard,
   initialSafeArea: () => initialSafeArea,
   isLabel: () => isLabel,
@@ -93,6 +94,7 @@ __export(node_exports, {
   useSafeArea: () => useSafeArea,
   useSidebars: () => useSidebars,
   useThemeContext: () => useThemeContext,
+  useTooltipContext: () => useTooltipContext,
   useTranslation: () => useTranslation,
   useTranslationsContext: () => useTranslationsContext,
   useVisualViewport: () => useVisualViewport
@@ -139,86 +141,98 @@ var import_react_slot5 = require("@radix-ui/react-slot");
 var import_react14 = __toESM(require("react"));
 var import_react15 = __toESM(require("react"));
 var import_react16 = __toESM(require("react"));
-var import_react_tooltip = require("@radix-ui/react-tooltip");
+var import_primitive = require("@radix-ui/primitive");
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
+var import_react_context3 = require("@radix-ui/react-context");
+var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
+var import_react_id = require("@radix-ui/react-id");
+var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
+var import_react_popper = require("@radix-ui/react-popper");
+var import_react_portal = require("@radix-ui/react-portal");
+var import_react_presence = require("@radix-ui/react-presence");
+var import_react_primitive6 = require("@radix-ui/react-primitive");
+var import_react_slot6 = require("@radix-ui/react-slot");
+var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+var VisuallyHiddenPrimitive = __toESM(require("@radix-ui/react-visually-hidden"));
 var import_react17 = __toESM(require("react"));
-var import_react18 = require("react");
 var import_react_toggle = require("@radix-ui/react-toggle");
-var import_react19 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
+var import_react19 = __toESM(require("react"));
 var import_react20 = __toESM(require("react"));
 var import_react21 = __toESM(require("react"));
-var import_react22 = __toESM(require("react"));
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_keyborg = require("keyborg");
+var import_react22 = __toESM(require("react"));
 var import_react23 = __toESM(require("react"));
 var import_react24 = __toESM(require("react"));
-var import_react25 = __toESM(require("react"));
-var import_react_context3 = require("@radix-ui/react-context");
+var import_react_context4 = require("@radix-ui/react-context");
 var import_react_dialog = require("@radix-ui/react-dialog");
-var import_react26 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_react_alert_dialog = require("@radix-ui/react-alert-dialog");
-var import_react_context4 = require("@radix-ui/react-context");
-var import_react27 = __toESM(require("react"));
+var import_react_context5 = require("@radix-ui/react-context");
+var import_react26 = __toESM(require("react"));
 var import_react_checkbox = require("@radix-ui/react-checkbox");
-var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
-var import_react28 = __toESM(require("react"));
+var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
+var import_react27 = __toESM(require("react"));
 var import_react_input = require("@dxos/react-input");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_react29 = require("@phosphor-icons/react");
-var import_react_slot6 = require("@radix-ui/react-slot");
-var import_react30 = __toESM(require("react"));
+var import_react28 = require("@phosphor-icons/react");
+var import_react_slot7 = require("@radix-ui/react-slot");
+var import_react29 = __toESM(require("react"));
 var import_react_list = require("@dxos/react-list");
+var import_react30 = __toESM(require("react"));
 var import_react31 = __toESM(require("react"));
 var import_react32 = __toESM(require("react"));
-var import_react33 = __toESM(require("react"));
 var import_react_tabster = require("@fluentui/react-tabster");
-var import_react_context5 = require("@radix-ui/react-context");
-var import_react_primitive6 = require("@radix-ui/react-primitive");
-var import_react_slot7 = require("@radix-ui/react-slot");
-var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
-var import_react34 = __toESM(require("react"));
 var import_react_context6 = require("@radix-ui/react-context");
-var import_react_dialog2 = require("@radix-ui/react-dialog");
 var import_react_primitive7 = require("@radix-ui/react-primitive");
 var import_react_slot8 = require("@radix-ui/react-slot");
 var import_react_use_controllable_state3 = require("@radix-ui/react-use-controllable-state");
-var import_react35 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
+var import_react_context7 = require("@radix-ui/react-context");
+var import_react_dialog2 = require("@radix-ui/react-dialog");
+var import_react_primitive8 = require("@radix-ui/react-primitive");
+var import_react_slot9 = require("@radix-ui/react-slot");
+var import_react_use_controllable_state4 = require("@radix-ui/react-use-controllable-state");
+var import_react34 = __toESM(require("react"));
 var import_log = require("@dxos/log");
 var import_react_hooks4 = require("@dxos/react-hooks");
-var import_react36 = require("react");
+var import_react35 = require("react");
 var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"));
-var import_react_primitive8 = require("@radix-ui/react-primitive");
-var import_react_slot9 = require("@radix-ui/react-slot");
-var import_react37 = __toESM(require("react"));
-var import_primitive = require("@radix-ui/primitive");
-var import_react_compose_refs = require("@radix-ui/react-compose-refs");
-var import_react_context7 = require("@radix-ui/react-context");
-var import_react_id = require("@radix-ui/react-id");
-var MenuPrimitive = __toESM(require("@radix-ui/react-menu"));
-var import_react_menu = require("@radix-ui/react-menu");
 var import_react_primitive9 = require("@radix-ui/react-primitive");
 var import_react_slot10 = require("@radix-ui/react-slot");
-var import_react_use_controllable_state4 = require("@radix-ui/react-use-controllable-state");
-var import_react38 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
+var import_react37 = require("react");
+var import_primitive2 = require("@radix-ui/primitive");
+var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
 var import_react_context8 = require("@radix-ui/react-context");
+var import_react_id2 = require("@radix-ui/react-id");
+var MenuPrimitive = __toESM(require("@radix-ui/react-menu"));
+var import_react_menu = require("@radix-ui/react-menu");
 var import_react_primitive10 = require("@radix-ui/react-primitive");
 var import_react_slot11 = require("@radix-ui/react-slot");
+var import_react_use_controllable_state5 = require("@radix-ui/react-use-controllable-state");
+var import_react38 = __toESM(require("react"));
+var import_react_context9 = require("@radix-ui/react-context");
+var import_react_primitive11 = require("@radix-ui/react-primitive");
+var import_react_slot12 = require("@radix-ui/react-slot");
 var import_react39 = __toESM(require("react"));
 var import_react_hooks5 = require("@dxos/react-hooks");
-var import_primitive2 = require("@radix-ui/primitive");
-var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react_context9 = require("@radix-ui/react-context");
-var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
+var import_primitive3 = require("@radix-ui/primitive");
+var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
+var import_react_context10 = require("@radix-ui/react-context");
+var import_react_dismissable_layer2 = require("@radix-ui/react-dismissable-layer");
 var import_react_focus_guards = require("@radix-ui/react-focus-guards");
 var import_react_focus_scope = require("@radix-ui/react-focus-scope");
-var import_react_id2 = require("@radix-ui/react-id");
-var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
-var import_react_popper = require("@radix-ui/react-popper");
-var import_react_portal = require("@radix-ui/react-portal");
-var import_react_presence = require("@radix-ui/react-presence");
-var import_react_primitive11 = require("@radix-ui/react-primitive");
-var import_react_slot12 = require("@radix-ui/react-slot");
-var import_react_use_controllable_state5 = require("@radix-ui/react-use-controllable-state");
+var import_react_id3 = require("@radix-ui/react-id");
+var PopperPrimitive2 = __toESM(require("@radix-ui/react-popper"));
+var import_react_popper2 = require("@radix-ui/react-popper");
+var import_react_portal2 = require("@radix-ui/react-portal");
+var import_react_presence2 = require("@radix-ui/react-presence");
+var import_react_primitive12 = require("@radix-ui/react-primitive");
+var import_react_slot13 = require("@radix-ui/react-slot");
+var import_react_use_controllable_state6 = require("@radix-ui/react-use-controllable-state");
 var import_aria_hidden = require("aria-hidden");
 var import_react40 = __toESM(require("react"));
 var import_react_remove_scroll = require("react-remove-scroll");
@@ -230,11 +244,11 @@ var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_react44 = __toESM(require("react"));
 var import_react_separator = require("@radix-ui/react-separator");
 var import_react45 = __toESM(require("react"));
-var import_react_primitive12 = require("@radix-ui/react-primitive");
-var import_react_slot13 = require("@radix-ui/react-slot");
-var import_react46 = __toESM(require("react"));
 var import_react_primitive13 = require("@radix-ui/react-primitive");
 var import_react_slot14 = require("@radix-ui/react-slot");
+var import_react46 = __toESM(require("react"));
+var import_react_primitive14 = require("@radix-ui/react-primitive");
+var import_react_slot15 = require("@radix-ui/react-slot");
 var import_react_toast = require("@radix-ui/react-toast");
 var import_react47 = __toESM(require("react"));
 var ToolbarPrimitive = __toESM(require("@radix-ui/react-toolbar"));
@@ -349,8 +363,8 @@ var useVisualViewport = (deps) => {
 };
 var AnchoredOverflowRoot = /* @__PURE__ */ (0, import_react.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
-  return /* @__PURE__ */ import_react.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
+  return /* @__PURE__ */ import_react.default.createElement(Root7, {
     role: "none",
     ...props,
     className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
@@ -359,8 +373,8 @@ var AnchoredOverflowRoot = /* @__PURE__ */ (0, import_react.forwardRef)(({ asChi
 });
 var AnchoredOverflowAnchor = /* @__PURE__ */ (0, import_react.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
-  return /* @__PURE__ */ import_react.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
+  return /* @__PURE__ */ import_react.default.createElement(Root7, {
     role: "none",
     ...props,
     className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
@@ -399,10 +413,10 @@ var AvatarContent = /* @__PURE__ */ (0, import_react10.forwardRef)(({ icon, clas
   });
 });
 var AvatarLabel = /* @__PURE__ */ (0, import_react10.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root5 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
+  const Root7 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ import_react10.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react10.default.createElement(Root7, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -412,10 +426,10 @@ var AvatarLabel = /* @__PURE__ */ (0, import_react10.forwardRef)(({ asChild, srO
   });
 });
 var AvatarDescription = /* @__PURE__ */ (0, import_react10.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-  const Root5 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
+  const Root7 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ import_react10.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react10.default.createElement(Root7, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -432,8 +446,8 @@ var Avatar = {
 };
 var Link = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, variant, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot4.Slot : import_react_primitive4.Primitive.a;
-  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot4.Slot : import_react_primitive4.Primitive.a;
+  return /* @__PURE__ */ import_react13.default.createElement(Root7, {
     ...props,
     className: tx("link.root", "link", {
       variant
@@ -443,8 +457,8 @@ var Link = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, variant, c
 });
 var BreadcrumbRoot = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.div;
-  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.div;
+  return /* @__PURE__ */ import_react12.default.createElement(Root7, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
@@ -453,8 +467,8 @@ var BreadcrumbRoot = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild,
 });
 var BreadcrumbList = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.ol;
-  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.ol;
+  return /* @__PURE__ */ import_react12.default.createElement(Root7, {
     role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
@@ -463,8 +477,8 @@ var BreadcrumbList = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild,
 });
 var BreadcrumbListItem = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.li;
-  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.li;
+  return /* @__PURE__ */ import_react12.default.createElement(Root7, {
     role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
@@ -472,16 +486,16 @@ var BreadcrumbListItem = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChi
   });
 });
 var BreadcrumbLink = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, ...props }, forwardedRef) => {
-  const Root5 = asChild ? import_react_slot3.Slot : Link;
-  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot3.Slot : Link;
+  return /* @__PURE__ */ import_react12.default.createElement(Root7, {
     ...props,
     ref: forwardedRef
   });
 });
 var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot3.Slot : "h1";
-  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot3.Slot : "h1";
+  return /* @__PURE__ */ import_react12.default.createElement(Root7, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -517,8 +531,8 @@ var Button = /* @__PURE__ */ (0, import_react14.memo)(/* @__PURE__ */ (0, import
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
   const density = useDensityContext(propsDensity);
-  const Root5 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.button;
-  return /* @__PURE__ */ import_react14.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.button;
+  return /* @__PURE__ */ import_react14.default.createElement(Root7, {
     ref,
     ...props,
     "data-variant": variant,
@@ -540,8 +554,8 @@ Button.displayName = BUTTON_NAME;
 var ButtonGroup = /* @__PURE__ */ (0, import_react14.forwardRef)(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext(propsElevation);
-  const Root5 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.div;
-  return /* @__PURE__ */ import_react14.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.div;
+  return /* @__PURE__ */ import_react14.default.createElement(Root7, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
@@ -566,89 +580,602 @@ var Icon = /* @__PURE__ */ (0, import_react16.memo)(/* @__PURE__ */ (0, import_r
     href
   }));
 }));
-var propIsNumber = (prop) => Number.isFinite(prop);
-var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
-var safePadding = (propsPadding, safePadding2, side) => {
-  return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
-};
-var useSafeCollisionPadding = (collisionPadding) => {
-  const { safeAreaPadding } = useThemeContext();
-  return (0, import_react18.useMemo)(() => ({
-    top: safePadding(collisionPadding, safeAreaPadding, "top"),
-    right: safePadding(collisionPadding, safeAreaPadding, "right"),
-    bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
-    left: safePadding(collisionPadding, safeAreaPadding, "left")
-  }), [
-    collisionPadding,
-    safeAreaPadding
+var [createTooltipContext, createTooltipScope] = (0, import_react_context3.createContextScope)("Tooltip", [
+  import_react_popper.createPopperScope
+]);
+var usePopperScope = (0, import_react_popper.createPopperScope)();
+var DEFAULT_DELAY_DURATION = 700;
+var TOOLTIP_OPEN = "tooltip.open";
+var TOOLTIP_NAME = "Tooltip";
+var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
+var TooltipProvider = (props) => {
+  const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300 } = props;
+  const isOpenDelayedRef = (0, import_react17.useRef)(true);
+  const isPointerInTransitRef = (0, import_react17.useRef)(false);
+  const skipDelayTimerRef = (0, import_react17.useRef)(0);
+  (0, import_react17.useEffect)(() => {
+    const skipDelayTimer = skipDelayTimerRef.current;
+    return () => window.clearTimeout(skipDelayTimer);
+  }, []);
+  const popperScope = usePopperScope(__scopeTooltip);
+  const [trigger, setTrigger] = (0, import_react17.useState)(null);
+  const [content, setContent] = (0, import_react17.useState)("");
+  const [side, setSide] = (0, import_react17.useState)(void 0);
+  const triggerRef = (0, import_react17.useRef)(trigger);
+  const handleTriggerChange = (0, import_react17.useCallback)((nextTrigger) => {
+    setTrigger(nextTrigger);
+    triggerRef.current = nextTrigger;
+    setContent(nextTrigger?.getAttribute("data-tooltip-content") ?? "");
+    setSide(nextTrigger?.getAttribute("data-tooltip-side") ?? void 0);
+  }, []);
+  const contentId = (0, import_react_id.useId)();
+  const openTimerRef = (0, import_react17.useRef)(0);
+  const wasOpenDelayedRef = (0, import_react17.useRef)(false);
+  const handleOpenChange = (0, import_react17.useCallback)((open2) => {
+    if (open2) {
+      window.clearTimeout(skipDelayTimerRef.current);
+      isOpenDelayedRef.current = false;
+      document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
+    } else {
+      window.clearTimeout(skipDelayTimerRef.current);
+      skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
+    }
+    onOpenChange?.(open2);
+  }, [
+    skipDelayDuration,
+    onOpenChange
   ]);
-};
-var TooltipProvider = import_react_tooltip.Provider;
-var TooltipRoot = import_react_tooltip.Root;
-var TooltipPortal = import_react_tooltip.TooltipPortal;
-var TooltipTrigger = import_react_tooltip.TooltipTrigger;
-var TooltipArrow = /* @__PURE__ */ (0, import_react17.forwardRef)(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_tooltip.TooltipArrow, {
-    ...props,
-    className: tx("tooltip.arrow", "tooltip__arrow", {}, classNames),
-    ref: forwardedRef
+  const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: handleOpenChange
   });
-});
-var TooltipContent = /* @__PURE__ */ (0, import_react17.forwardRef)(({ classNames, collisionPadding = 8, ...props }, forwardedRef) => {
+  const stateAttribute = (0, import_react17.useMemo)(() => {
+    return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
+  }, [
+    open
+  ]);
+  const handleOpen = (0, import_react17.useCallback)(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = 0;
+    wasOpenDelayedRef.current = false;
+    setOpen(true);
+  }, [
+    setOpen
+  ]);
+  const handleClose = (0, import_react17.useCallback)(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = 0;
+    setOpen(false);
+  }, [
+    setOpen
+  ]);
+  const handleDelayedOpen = (0, import_react17.useCallback)(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = window.setTimeout(() => {
+      wasOpenDelayedRef.current = true;
+      setOpen(true);
+      openTimerRef.current = 0;
+    }, delayDuration);
+  }, [
+    delayDuration,
+    setOpen
+  ]);
+  (0, import_react17.useEffect)(() => {
+    return () => {
+      if (openTimerRef.current) {
+        window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = 0;
+      }
+    };
+  }, []);
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
-  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_tooltip.TooltipContent, {
-    sideOffset: 4,
-    ...props,
-    collisionPadding: safeCollisionPadding,
+  return /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ import_react17.default.createElement(TooltipContextProvider, {
+    scope: __scopeTooltip,
+    contentId,
+    open,
+    stateAttribute,
+    trigger,
+    onTriggerChange: handleTriggerChange,
+    onTriggerEnter: (0, import_react17.useCallback)(() => {
+      if (isOpenDelayedRef.current) {
+        handleDelayedOpen();
+      } else {
+        handleOpen();
+      }
+    }, [
+      isOpenDelayedRef,
+      handleDelayedOpen,
+      handleOpen
+    ]),
+    onTriggerLeave: (0, import_react17.useCallback)(() => {
+      if (disableHoverableContent) {
+        handleClose();
+      } else {
+        window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = 0;
+      }
+    }, [
+      handleClose,
+      disableHoverableContent
+    ]),
+    onOpen: handleOpen,
+    onClose: handleClose,
+    disableHoverableContent,
+    isPointerInTransitRef,
+    onPointerInTransitChange: (0, import_react17.useCallback)((inTransit) => {
+      isPointerInTransitRef.current = inTransit;
+    }, [])
+  }, /* @__PURE__ */ import_react17.default.createElement(TooltipContent, {
+    side,
     className: tx("tooltip.content", "tooltip", {
       elevation
-    }, classNames),
+    })
+  }, content, /* @__PURE__ */ import_react17.default.createElement(TooltipArrow, {
+    className: tx("tooltip.arrow", "tooltip__arrow")
+  })), /* @__PURE__ */ import_react17.default.createElement(TooltipVirtualTrigger, {
+    virtualRef: triggerRef
+  }), children));
+};
+TooltipProvider.displayName = TOOLTIP_NAME;
+var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
+  const popperScope = usePopperScope(__scopeTooltip);
+  return /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Anchor, {
+    asChild: true,
+    ...popperScope,
+    virtualRef
+  });
+};
+var TRIGGER_NAME = "TooltipTrigger";
+var TooltipTrigger = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
+  const {
+    __scopeTooltip,
+    onInteract,
+    // TODO(thure): Pass `delayDuration` into the context.
+    delayDuration: _delayDuration,
+    suppressNextTooltip,
+    side,
+    content,
+    ...triggerProps
+  } = props;
+  const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
+  const ref = (0, import_react17.useRef)(null);
+  const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
+  const isPointerDownRef = (0, import_react17.useRef)(false);
+  const hasPointerMoveOpenedRef = (0, import_react17.useRef)(false);
+  const handlePointerUp = (0, import_react17.useCallback)(() => isPointerDownRef.current = false, []);
+  (0, import_react17.useEffect)(() => {
+    return () => document.removeEventListener("pointerup", handlePointerUp);
+  }, [
+    handlePointerUp
+  ]);
+  return /* @__PURE__ */ import_react17.default.createElement(import_react_primitive6.Primitive.button, {
+    // We purposefully avoid adding `type=button` here because tooltip triggers are also
+    // commonly anchors and the anchor `type` attribute signifies MIME type.
+    "aria-describedby": context.open ? context.contentId : void 0,
+    "data-state": context.stateAttribute,
+    "data-tooltip-content": content,
+    "data-tooltip-side": side,
+    ...triggerProps,
+    ref: composedRefs,
+    onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, (event) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+      if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
+        onInteract?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        context.onTriggerChange(ref.current);
+        context.onTriggerEnter();
+        hasPointerMoveOpenedRef.current = true;
+      }
+    }),
+    onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, () => {
+      context.onTriggerLeave();
+      hasPointerMoveOpenedRef.current = false;
+    }),
+    onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, () => {
+      if (context.open) {
+        context.onClose();
+      }
+      isPointerDownRef.current = true;
+      document.addEventListener("pointerup", handlePointerUp, {
+        once: true
+      });
+    }),
+    onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, (event) => {
+      if (!isPointerDownRef.current) {
+        onInteract?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (suppressNextTooltip?.current) {
+          suppressNextTooltip.current = false;
+        } else {
+          context.onTriggerChange(ref.current);
+          context.onOpen();
+        }
+      }
+    }),
+    onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, context.onClose),
+    onClick: (0, import_primitive.composeEventHandlers)(props.onClick, context.onClose)
+  });
+});
+TooltipTrigger.displayName = TRIGGER_NAME;
+var PORTAL_NAME = "TooltipPortal";
+var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
+  forceMount: void 0
+});
+var TooltipPortal = (props) => {
+  const { __scopeTooltip, forceMount, children, container } = props;
+  const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
+  return /* @__PURE__ */ import_react17.default.createElement(PortalProvider, {
+    scope: __scopeTooltip,
+    forceMount
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react_presence.Presence, {
+    present: forceMount || context.open
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react_portal.Portal, {
+    asChild: true,
+    container
+  }, children)));
+};
+TooltipPortal.displayName = PORTAL_NAME;
+var CONTENT_NAME = "TooltipContent";
+var TooltipContent = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
+  const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
+  const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
+  const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
+  return /* @__PURE__ */ import_react17.default.createElement(import_react_presence.Presence, {
+    present: forceMount || context.open
+  }, context.disableHoverableContent ? /* @__PURE__ */ import_react17.default.createElement(TooltipContentImpl, {
+    side,
+    ...contentProps,
+    ref: forwardedRef
+  }) : /* @__PURE__ */ import_react17.default.createElement(TooltipContentHoverable, {
+    side,
+    ...contentProps,
+    ref: forwardedRef
+  }));
+});
+var TooltipContentHoverable = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
+  const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
+  const ref = (0, import_react17.useRef)(null);
+  const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
+  const [pointerGraceArea, setPointerGraceArea] = (0, import_react17.useState)(null);
+  const { trigger, onClose } = context;
+  const content = ref.current;
+  const { onPointerInTransitChange } = context;
+  const handleRemoveGraceArea = (0, import_react17.useCallback)(() => {
+    setPointerGraceArea(null);
+    onPointerInTransitChange(false);
+  }, [
+    onPointerInTransitChange
+  ]);
+  const handleCreateGraceArea = (0, import_react17.useCallback)((event, hoverTarget) => {
+    const currentTarget = event.currentTarget;
+    const exitPoint = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+    const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
+    const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+    const graceArea = getHull([
+      ...paddedExitPoints,
+      ...hoverTargetPoints
+    ]);
+    setPointerGraceArea(graceArea);
+    onPointerInTransitChange(true);
+  }, [
+    onPointerInTransitChange
+  ]);
+  (0, import_react17.useEffect)(() => {
+    return () => handleRemoveGraceArea();
+  }, [
+    handleRemoveGraceArea
+  ]);
+  (0, import_react17.useEffect)(() => {
+    if (trigger && content) {
+      const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
+      const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
+      trigger.addEventListener("pointerleave", handleTriggerLeave);
+      content.addEventListener("pointerleave", handleContentLeave);
+      return () => {
+        trigger.removeEventListener("pointerleave", handleTriggerLeave);
+        content.removeEventListener("pointerleave", handleContentLeave);
+      };
+    }
+  }, [
+    trigger,
+    content,
+    handleCreateGraceArea,
+    handleRemoveGraceArea
+  ]);
+  (0, import_react17.useEffect)(() => {
+    if (pointerGraceArea) {
+      const handleTrackPointerGrace = (event) => {
+        const target = event.target;
+        const pointerPosition = {
+          x: event.clientX,
+          y: event.clientY
+        };
+        const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
+        const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
+        if (hasEnteredTarget) {
+          handleRemoveGraceArea();
+        } else if (isPointerOutsideGraceArea) {
+          handleRemoveGraceArea();
+          onClose();
+        }
+      };
+      document.addEventListener("pointermove", handleTrackPointerGrace);
+      return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
+    }
+  }, [
+    trigger,
+    content,
+    pointerGraceArea,
+    onClose,
+    handleRemoveGraceArea
+  ]);
+  return /* @__PURE__ */ import_react17.default.createElement(TooltipContentImpl, {
+    ...props,
+    ref: composedRefs
+  });
+});
+var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, {
+  isInside: false
+});
+var TooltipContentImpl = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
+  const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
+  const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
+  const popperScope = usePopperScope(__scopeTooltip);
+  const { onClose } = context;
+  (0, import_react17.useEffect)(() => {
+    document.addEventListener(TOOLTIP_OPEN, onClose);
+    return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
+  }, [
+    onClose
+  ]);
+  (0, import_react17.useEffect)(() => {
+    if (context.trigger) {
+      const handleScroll = (event) => {
+        const target = event.target;
+        if (target?.contains(context.trigger)) {
+          onClose();
+        }
+      };
+      window.addEventListener("scroll", handleScroll, {
+        capture: true
+      });
+      return () => window.removeEventListener("scroll", handleScroll, {
+        capture: true
+      });
+    }
+  }, [
+    context.trigger,
+    onClose
+  ]);
+  return /* @__PURE__ */ import_react17.default.createElement(import_react_dismissable_layer.DismissableLayer, {
+    asChild: true,
+    disableOutsidePointerEvents: false,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside: (event) => event.preventDefault(),
+    onDismiss: onClose
+  }, /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Content, {
+    "data-state": context.stateAttribute,
+    ...popperScope,
+    ...contentProps,
+    ref: forwardedRef,
+    style: {
+      ...contentProps.style,
+      // re-namespace exposed content custom properties
+      ...{
+        "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
+        "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
+        "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
+        "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
+        "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
+      }
+    }
+  }, /* @__PURE__ */ import_react17.default.createElement(import_react_slot6.Slottable, null, children), /* @__PURE__ */ import_react17.default.createElement(VisuallyHiddenContentContextProvider, {
+    scope: __scopeTooltip,
+    isInside: true
+  }, /* @__PURE__ */ import_react17.default.createElement(VisuallyHiddenPrimitive.Root, {
+    id: context.contentId,
+    role: "tooltip"
+  }, ariaLabel || children))));
+});
+TooltipContent.displayName = CONTENT_NAME;
+var ARROW_NAME = "TooltipArrow";
+var TooltipArrow = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
+  const { __scopeTooltip, ...arrowProps } = props;
+  const popperScope = usePopperScope(__scopeTooltip);
+  const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
+  return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Arrow, {
+    ...popperScope,
+    ...arrowProps,
     ref: forwardedRef
   });
 });
+TooltipArrow.displayName = ARROW_NAME;
+var getExitSideFromRect = (point, rect) => {
+  const top = Math.abs(rect.top - point.y);
+  const bottom = Math.abs(rect.bottom - point.y);
+  const right = Math.abs(rect.right - point.x);
+  const left = Math.abs(rect.left - point.x);
+  switch (Math.min(top, bottom, right, left)) {
+    case left:
+      return "left";
+    case right:
+      return "right";
+    case top:
+      return "top";
+    case bottom:
+      return "bottom";
+    default:
+      throw new Error("unreachable");
+  }
+};
+var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
+  const paddedExitPoints = [];
+  switch (exitSide) {
+    case "top":
+      paddedExitPoints.push({
+        x: exitPoint.x - padding,
+        y: exitPoint.y + padding
+      }, {
+        x: exitPoint.x + padding,
+        y: exitPoint.y + padding
+      });
+      break;
+    case "bottom":
+      paddedExitPoints.push({
+        x: exitPoint.x - padding,
+        y: exitPoint.y - padding
+      }, {
+        x: exitPoint.x + padding,
+        y: exitPoint.y - padding
+      });
+      break;
+    case "left":
+      paddedExitPoints.push({
+        x: exitPoint.x + padding,
+        y: exitPoint.y - padding
+      }, {
+        x: exitPoint.x + padding,
+        y: exitPoint.y + padding
+      });
+      break;
+    case "right":
+      paddedExitPoints.push({
+        x: exitPoint.x - padding,
+        y: exitPoint.y - padding
+      }, {
+        x: exitPoint.x - padding,
+        y: exitPoint.y + padding
+      });
+      break;
+  }
+  return paddedExitPoints;
+};
+var getPointsFromRect = (rect) => {
+  const { top, right, bottom, left } = rect;
+  return [
+    {
+      x: left,
+      y: top
+    },
+    {
+      x: right,
+      y: top
+    },
+    {
+      x: right,
+      y: bottom
+    },
+    {
+      x: left,
+      y: bottom
+    }
+  ];
+};
+var isPointInPolygon = (point, polygon) => {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) {
+      inside = !inside;
+    }
+  }
+  return inside;
+};
+var getHull = (points) => {
+  const newPoints = points.slice();
+  newPoints.sort((a, b) => {
+    if (a.x < b.x) {
+      return -1;
+    } else if (a.x > b.x) {
+      return 1;
+    } else if (a.y < b.y) {
+      return -1;
+    } else if (a.y > b.y) {
+      return 1;
+    } else {
+      return 0;
+    }
+  });
+  return getHullPresorted(newPoints);
+};
+var getHullPresorted = (points) => {
+  if (points.length <= 1) {
+    return points.slice();
+  }
+  const upperHull = [];
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    while (upperHull.length >= 2) {
+      const q = upperHull[upperHull.length - 1];
+      const r = upperHull[upperHull.length - 2];
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
+        upperHull.pop();
+      } else {
+        break;
+      }
+    }
+    upperHull.push(p);
+  }
+  upperHull.pop();
+  const lowerHull = [];
+  for (let i = points.length - 1; i >= 0; i--) {
+    const p = points[i];
+    while (lowerHull.length >= 2) {
+      const q = lowerHull[lowerHull.length - 1];
+      const r = lowerHull[lowerHull.length - 2];
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
+        lowerHull.pop();
+      } else {
+        break;
+      }
+    }
+    lowerHull.push(p);
+  }
+  lowerHull.pop();
+  if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
+    return upperHull;
+  } else {
+    return upperHull.concat(lowerHull);
+  }
+};
 var Tooltip = {
   Provider: TooltipProvider,
-  Root: TooltipRoot,
-  Portal: TooltipPortal,
-  Trigger: TooltipTrigger,
-  Arrow: TooltipArrow,
-  Content: TooltipContent
-};
-var IconOnlyButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react15.useState)(false);
+  Trigger: TooltipTrigger
+};
+var IconOnlyButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ noTooltip, tooltipPortal = true, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
   if (noTooltip) {
     return /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
       ...props,
       ref: forwardedRef
     });
   }
-  const content = /* @__PURE__ */ import_react15.default.createElement(Tooltip.Content, {
-    ...zIndex && {
-      style: {
-        zIndex
-      }
-    },
-    side: tooltipSide
-  }, props.label, /* @__PURE__ */ import_react15.default.createElement(Tooltip.Arrow, null));
-  return /* @__PURE__ */ import_react15.default.createElement(Tooltip.Root, {
-    open: triggerTooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (suppressNextTooltip?.current) {
-        setTriggerTooltipOpen(false);
-        suppressNextTooltip.current = false;
-      } else {
-        setTriggerTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ import_react15.default.createElement(Tooltip.Trigger, {
-    asChild: true
+  return /* @__PURE__ */ import_react15.default.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: props.label,
+    side: tooltipSide,
+    suppressNextTooltip
   }, /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
     ...props,
     ref: forwardedRef
-  })), tooltipPortal ? /* @__PURE__ */ import_react15.default.createElement(Tooltip.Portal, null, content) : content);
+  }));
 });
 var LabelledIconButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
@@ -674,32 +1201,32 @@ var IconButton = /* @__PURE__ */ (0, import_react15.forwardRef)((props, forwarde
   ...props,
   ref: forwardedRef
 }));
-var Toggle = /* @__PURE__ */ (0, import_react19.forwardRef)(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react19.default.createElement(import_react_toggle.Toggle, {
+var Toggle = /* @__PURE__ */ (0, import_react18.forwardRef)(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_toggle.Toggle, {
     defaultPressed,
     pressed,
     onPressedChange,
     asChild: true
-  }, /* @__PURE__ */ import_react19.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react18.default.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToggleGroup = /* @__PURE__ */ (0, import_react20.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react20.default.createElement(import_react_toggle_group.ToggleGroup, {
+var ToggleGroup = /* @__PURE__ */ (0, import_react19.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react19.default.createElement(import_react_toggle_group.ToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ import_react20.default.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ import_react19.default.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
-var ToggleGroupItem = /* @__PURE__ */ (0, import_react20.forwardRef)(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react20.default.createElement(import_react_toggle_group.ToggleGroupItem, {
+var ToggleGroupItem = /* @__PURE__ */ (0, import_react19.forwardRef)(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react19.default.createElement(import_react_toggle_group.ToggleGroupItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ import_react20.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react19.default.createElement(Button, {
     variant,
     elevation,
     density,
@@ -708,19 +1235,19 @@ var ToggleGroupItem = /* @__PURE__ */ (0, import_react20.forwardRef)(({ variant,
     ref: forwardedRef
   }));
 });
-var ClipboardContext = /* @__PURE__ */ (0, import_react21.createContext)({
+var ClipboardContext = /* @__PURE__ */ (0, import_react20.createContext)({
   textValue: "",
   setTextValue: async (_) => {
   }
 });
-var useClipboard = () => (0, import_react21.useContext)(ClipboardContext);
+var useClipboard = () => (0, import_react20.useContext)(ClipboardContext);
 var ClipboardProvider = ({ children }) => {
-  const [textValue, setInternalTextValue] = (0, import_react21.useState)("");
-  const setTextValue = (0, import_react21.useCallback)(async (nextValue) => {
+  const [textValue, setInternalTextValue] = (0, import_react20.useState)("");
+  const setTextValue = (0, import_react20.useCallback)(async (nextValue) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
-  return /* @__PURE__ */ import_react21.default.createElement(ClipboardContext.Provider, {
+  return /* @__PURE__ */ import_react20.default.createElement(ClipboardContext.Provider, {
     value: {
       textValue,
       setTextValue
@@ -730,25 +1257,25 @@ var ClipboardProvider = ({ children }) => {
 var hasIosKeyboard = () => {
   return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
 };
-var DensityContext = /* @__PURE__ */ (0, import_react24.createContext)({
+var DensityContext = /* @__PURE__ */ (0, import_react23.createContext)({
   density: "fine"
 });
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ import_react24.default.createElement(DensityContext.Provider, {
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ import_react23.default.createElement(DensityContext.Provider, {
   value: {
     density
   }
 }, children);
-var ElevationContext = /* @__PURE__ */ (0, import_react25.createContext)({
+var ElevationContext = /* @__PURE__ */ (0, import_react24.createContext)({
   elevation: "base"
 });
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ import_react25.default.createElement(ElevationContext.Provider, {
+var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ import_react24.default.createElement(ElevationContext.Provider, {
   value: {
     elevation
   }
 }, children);
-var ThemeContext = /* @__PURE__ */ (0, import_react23.createContext)(void 0);
+var ThemeContext = /* @__PURE__ */ (0, import_react22.createContext)(void 0);
 var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
-  (0, import_react23.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (document.defaultView) {
       const kb = (0, import_keyborg.createKeyborg)(document.defaultView);
       kb.subscribe(handleInputModalityChange);
@@ -756,7 +1283,7 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
     }
   }, []);
   const safeAreaPadding = useSafeArea();
-  const contextValue = (0, import_react23.useMemo)(() => ({
+  const contextValue = (0, import_react22.useMemo)(() => ({
     tx,
     themeMode,
     hasIosKeyboard: hasIosKeyboard(),
@@ -768,15 +1295,15 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
     safeAreaPadding,
     rest
   ]);
-  return /* @__PURE__ */ import_react23.default.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ import_react22.default.createElement(ThemeContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ import_react23.default.createElement(TranslationsProvider, {
+  }, /* @__PURE__ */ import_react22.default.createElement(TranslationsProvider, {
     fallback,
     resourceExtensions,
     appNs
-  }, /* @__PURE__ */ import_react23.default.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ import_react22.default.createElement(ElevationProvider, {
     elevation: "base"
-  }, /* @__PURE__ */ import_react23.default.createElement(DensityProvider, {
+  }, /* @__PURE__ */ import_react22.default.createElement(DensityProvider, {
     density: rootDensity
   }, children))));
 };
@@ -792,7 +1319,7 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
   const { t } = useTranslation("os");
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  return /* @__PURE__ */ import_react22.default.createElement(Button, {
+  return /* @__PURE__ */ import_react21.default.createElement(Button, {
     ...props,
     classNames: [
       "inline-flex flex-col justify-center",
@@ -800,70 +1327,59 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
     ],
     onClick: () => setTextValue(value),
     "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ import_react22.default.createElement("div", {
+  }, /* @__PURE__ */ import_react21.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ import_react22.default.createElement("span", {
+  }, /* @__PURE__ */ import_react21.default.createElement("span", {
     className: "pli-1"
-  }, t("copy label")), /* @__PURE__ */ import_react22.default.createElement(Icon, {
+  }, t("copy label")), /* @__PURE__ */ import_react21.default.createElement(Icon, {
     icon: "ph--copy--regular",
     size: 5,
     ...iconProps
-  })), /* @__PURE__ */ import_react22.default.createElement("div", {
+  })), /* @__PURE__ */ import_react21.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ import_react22.default.createElement("span", {
+  }, /* @__PURE__ */ import_react21.default.createElement("span", {
     className: "pli-1"
-  }, t("copy success label")), /* @__PURE__ */ import_react22.default.createElement(Icon, {
+  }, t("copy success label")), /* @__PURE__ */ import_react21.default.createElement(Icon, {
     icon: "ph--check--regular",
     size: 5,
     ...iconProps
   })));
 };
-var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) => {
+var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, iconProps, variant, ...props }) => {
   const { t } = useTranslation("os");
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
-  const [open, setOpen] = (0, import_react22.useState)(false);
-  return /* @__PURE__ */ import_react22.default.createElement(Tooltip.Root, {
-    delayDuration: 1500,
-    open,
-    onOpenChange: setOpen
-  }, /* @__PURE__ */ import_react22.default.createElement(Tooltip.Portal, null, /* @__PURE__ */ import_react22.default.createElement(Tooltip.Content, {
-    side: "bottom",
-    sideOffset: 12
-  }, /* @__PURE__ */ import_react22.default.createElement("span", null, label), /* @__PURE__ */ import_react22.default.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ import_react22.default.createElement(Tooltip.Trigger, {
-    "aria-label": label,
-    ...props,
-    onClick: () => setTextValue(value).then(() => setOpen(true)),
-    "data-testid": "copy-invitation",
-    asChild: true
-  }, /* @__PURE__ */ import_react22.default.createElement(Button, {
+  const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
+  return /* @__PURE__ */ import_react21.default.createElement(IconButton, {
+    iconOnly: true,
+    label,
+    icon: "ph--copy--regular",
+    size: 5,
     variant,
     classNames: [
       "inline-flex flex-col justify-center",
       classNames
-    ]
-  }, /* @__PURE__ */ import_react22.default.createElement(Icon, {
-    icon: "ph--copy--regular",
-    size: 5,
-    ...iconProps
-  }))));
+    ],
+    onClick: () => setTextValue(value).then(onOpen),
+    "data-testid": "copy-invitation"
+  });
 };
 var Clipboard = {
   Button: CopyButton,
   IconButton: CopyButtonIconOnly,
   Provider: ClipboardProvider
 };
-var DialogRoot = (props) => /* @__PURE__ */ import_react26.default.createElement(ElevationProvider, {
+var DialogRoot = (props) => /* @__PURE__ */ import_react25.default.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.Root, props));
+}, /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.Root, props));
 var DialogTrigger = import_react_dialog.DialogTrigger;
 var DialogPortal = import_react_dialog.DialogPortal;
-var DialogTitle = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogTitle, {
+  return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogTitle, {
     ...props,
     className: tx("dialog.title", "dialog__title", {
       srOnly
@@ -871,9 +1387,9 @@ var DialogTitle = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames,
     ref: forwardedRef
   });
 });
-var DialogDescription = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogDescription, {
+  return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogDescription, {
     ...props,
     className: tx("dialog.description", "dialog__description", {
       srOnly
@@ -884,25 +1400,25 @@ var DialogDescription = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classN
 var DialogClose = import_react_dialog.DialogClose;
 var DIALOG_OVERLAY_NAME = "DialogOverlay";
 var DIALOG_CONTENT_NAME = "DialogContent";
-var [OverlayLayoutProvider, useOverlayLayoutContext] = (0, import_react_context3.createContext)(DIALOG_OVERLAY_NAME, {
-  inOverlayLayout: false
-});
-var DialogOverlay = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var [OverlayLayoutProvider, useOverlayLayoutContext] = (0, import_react_context4.createContext)(DIALOG_OVERLAY_NAME, {});
+var DialogOverlay = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogOverlay, {
+  return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogOverlay, {
     ...props,
     className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
     ref: forwardedRef,
     "data-block-align": blockAlign
-  }, /* @__PURE__ */ import_react26.default.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ import_react25.default.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogContent, {
+  return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogContent, {
+    // NOTE: Radix warning unless set to undefined.
+    // https://www.radix-ui.com/primitives/docs/components/dialog#description
     "aria-describedby": void 0,
     ...props,
     className: tx("dialog.content", "dialog", {
@@ -922,16 +1438,16 @@ var Dialog = {
   Description: DialogDescription,
   Close: DialogClose
 };
-var AlertDialogRoot = (props) => /* @__PURE__ */ import_react27.default.createElement(ElevationProvider, {
+var AlertDialogRoot = (props) => /* @__PURE__ */ import_react26.default.createElement(ElevationProvider, {
   elevation: "dialog"
-}, /* @__PURE__ */ import_react27.default.createElement(import_react_alert_dialog.Root, props));
+}, /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.Root, props));
 var AlertDialogTrigger = import_react_alert_dialog.AlertDialogTrigger;
 var AlertDialogPortal = import_react_alert_dialog.AlertDialogPortal;
 var AlertDialogCancel = import_react_alert_dialog.AlertDialogCancel;
 var AlertDialogAction = import_react_alert_dialog.AlertDialogAction;
-var AlertDialogTitle = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react27.default.createElement(import_react_alert_dialog.AlertDialogTitle, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogTitle, {
     ...props,
     className: tx("dialog.title", "dialog--alert__title", {
       srOnly
@@ -939,9 +1455,9 @@ var AlertDialogTitle = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNa
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react27.default.createElement(import_react_alert_dialog.AlertDialogDescription, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogDescription, {
     ...props,
     className: tx("dialog.description", "dialog--alert__description", {
       srOnly
@@ -951,25 +1467,25 @@ var AlertDialogDescription = /* @__PURE__ */ (0, import_react27.forwardRef)(({ c
 });
 var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
 var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
-var [OverlayLayoutProvider2, useOverlayLayoutContext2] = (0, import_react_context4.createContext)(ALERT_DIALOG_OVERLAY_NAME, {
+var [OverlayLayoutProvider2, useOverlayLayoutContext2] = (0, import_react_context5.createContext)(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react27.default.createElement(import_react_alert_dialog.AlertDialogOverlay, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogOverlay, {
     ...props,
     className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
     ref: forwardedRef,
     "data-block-align": blockAlign
-  }, /* @__PURE__ */ import_react27.default.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ import_react26.default.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ import_react27.default.createElement(import_react_alert_dialog.AlertDialogContent, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogContent, {
     ...props,
     className: tx("dialog.content", "dialog--alert", {
       inOverlayLayout
@@ -989,9 +1505,9 @@ var AlertDialog = {
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction
 };
-var Label = /* @__PURE__ */ (0, import_react28.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Label = /* @__PURE__ */ (0, import_react27.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.Label, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_input.Label, {
     ...props,
     className: tx("input.label", "input__label", {
       srOnly
@@ -999,9 +1515,9 @@ var Label = /* @__PURE__ */ (0, import_react28.forwardRef)(({ srOnly, classNames
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ (0, import_react28.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ (0, import_react27.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.Description, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_input.Description, {
     ...props,
     className: tx("input.description", "input__description", {
       srOnly
@@ -1009,10 +1525,10 @@ var Description = /* @__PURE__ */ (0, import_react28.forwardRef)(({ srOnly, clas
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.Validation, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_input.Validation, {
     ...props,
     className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
       srOnly,
@@ -1021,9 +1537,9 @@ var Validation = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope,
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ (0, import_react28.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ (0, import_react27.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.DescriptionAndValidation, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_input.DescriptionAndValidation, {
     ...props,
     className: tx("input.descriptionAndValidation", "input__description-and-validation", {
       srOnly
@@ -1031,12 +1547,12 @@ var DescriptionAndValidation = /* @__PURE__ */ (0, import_react28.forwardRef)(({
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ (0, import_react28.forwardRef)(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ (0, import_react27.forwardRef)(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
-  const segmentClassName = (0, import_react28.useCallback)(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+  const segmentClassName = (0, import_react27.useCallback)(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
     variant: "static",
     focused,
     disabled: props.disabled,
@@ -1050,7 +1566,7 @@ var PinInput = /* @__PURE__ */ (0, import_react28.forwardRef)(({ density: propsD
     propsElevation,
     density
   ]);
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.PinInput, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_input.PinInput, {
     ...props,
     segmentClassName,
     ...props.autoFocus && !hasIosKeyboard2 && {
@@ -1062,14 +1578,14 @@ var PinInput = /* @__PURE__ */ (0, import_react28.forwardRef)(({ density: propsD
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const themeContextValue = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
   const { tx } = themeContextValue;
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.TextInput, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_input.TextInput, {
     ...props,
     className: tx("input.input", "input", {
       variant,
@@ -1084,13 +1600,13 @@ var TextInput = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope,
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
   const { tx } = useThemeContext();
   const density = useDensityContext(propsDensity);
   const elevation = useElevationContext(propsElevation);
   const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_input.TextArea, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_input.TextArea, {
     ...props,
     className: tx("input.input", "input--text-area", {
       variant,
@@ -1105,15 +1621,15 @@ var TextArea = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, c
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
-  const [checked, onCheckedChange] = (0, import_react_use_controllable_state.useControllableState)({
+var Checkbox = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
     prop: propsChecked,
     defaultProp: propsDefaultChecked,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_checkbox.Root, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_checkbox.Root, {
     ...props,
     checked,
     onCheckedChange,
@@ -1127,7 +1643,7 @@ var Checkbox = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, c
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react28.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react27.default.createElement(Icon, {
     icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
     classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
       size,
@@ -1135,14 +1651,14 @@ var Checkbox = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, c
     })
   }));
 });
-var Switch = /* @__PURE__ */ (0, import_react28.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
-  const [checked, onCheckedChange] = (0, import_react_use_controllable_state.useControllableState)({
+var Switch = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
+  const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
     prop: propsChecked,
     defaultProp: propsDefaultChecked ?? false,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ import_react28.default.createElement("input", {
+  return /* @__PURE__ */ import_react27.default.createElement("input", {
     type: "checkbox",
     className: (0, import_react_ui_theme3.mx)("dx-checkbox--switch dx-focus-ring", classNames),
     checked,
@@ -1192,7 +1708,7 @@ var terminalSize = 8;
 var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ import_react31.default.createElement("div", {
+  return /* @__PURE__ */ import_react30.default.createElement("div", {
     role: "none",
     style: {
       "--line-thickness": `${strokeSize}px`,
@@ -1206,22 +1722,22 @@ var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineIns
     className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
   });
 };
-var List = /* @__PURE__ */ (0, import_react30.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var List = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ import_react30.default.createElement(DensityProvider, {
+  return /* @__PURE__ */ import_react29.default.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ import_react30.default.createElement(import_react_list.List, {
+  }, /* @__PURE__ */ import_react29.default.createElement(import_react_list.List, {
     ...props,
     className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ (0, import_react30.forwardRef)(({ children, classNames, asChild, ...props }, forwardedRef) => {
-  const Root5 = asChild ? import_react_slot6.Slot : "div";
+var ListItemEndcap = /* @__PURE__ */ (0, import_react29.forwardRef)(({ children, classNames, asChild, ...props }, forwardedRef) => {
+  const Root7 = asChild ? import_react_slot7.Slot : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react30.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react29.default.createElement(Root7, {
     ...!asChild && {
       role: "none"
     },
@@ -1235,7 +1751,7 @@ var ListItemEndcap = /* @__PURE__ */ (0, import_react30.forwardRef)(({ children,
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react30.default.createElement("div", {
+  return /* @__PURE__ */ import_react29.default.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
@@ -1243,10 +1759,10 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ (0, import_react30.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ (0, import_react29.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_list.ListItemHeading, {
+  return /* @__PURE__ */ import_react29.default.createElement(import_react_list.ListItemHeading, {
     ...props,
     className: tx("list.item.heading", "list__listItem__heading", {
       density
@@ -1254,26 +1770,26 @@ var ListItemHeading = /* @__PURE__ */ (0, import_react30.forwardRef)(({ children
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ (0, import_react30.forwardRef)(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
   const { open } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listItemScope);
-  const Icon3 = open ? import_react29.CaretDown : import_react29.CaretRight;
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_list.ListItemOpenTrigger, {
+  const Icon3 = open ? import_react28.CaretDown : import_react28.CaretRight;
+  return /* @__PURE__ */ import_react29.default.createElement(import_react_list.ListItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ import_react30.default.createElement(Icon3, {
+  }, children || /* @__PURE__ */ import_react29.default.createElement(Icon3, {
     weight: "bold",
     className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ (0, import_react30.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_list.ListItem, {
+  return /* @__PURE__ */ import_react29.default.createElement(import_react_list.ListItem, {
     ...props,
     className: tx("list.item.root", "list__listItem", {
       density,
@@ -1320,7 +1836,7 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
   if (isBlocked) {
     return null;
   }
-  return /* @__PURE__ */ import_react33.default.createElement("div", {
+  return /* @__PURE__ */ import_react32.default.createElement("div", {
     style: {
       "--line-thickness": `${strokeSize2}px`,
       "--line-offset": `${lineOffset}`,
@@ -1333,22 +1849,22 @@ var TreeDropIndicator = ({ instruction, gap = 0 }) => {
     className: `absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
   });
 };
-var TreeRoot = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
-  return /* @__PURE__ */ import_react32.default.createElement(List, {
+var TreeRoot = /* @__PURE__ */ (0, import_react31.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react31.default.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ (0, import_react32.forwardRef)(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ (0, import_react31.forwardRef)(({ __listScope, ...props }, forwardedRef) => {
   const { headingId } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listScope);
-  return /* @__PURE__ */ import_react32.default.createElement(List, {
+  return /* @__PURE__ */ import_react31.default.createElement(List, {
     ...props,
     "aria-labelledby": headingId,
     ref: forwardedRef
   });
 });
-var TreeItemRoot = /* @__PURE__ */ (0, import_react32.forwardRef)((props, forwardedRef) => {
-  return /* @__PURE__ */ import_react32.default.createElement(ListItem.Root, {
+var TreeItemRoot = /* @__PURE__ */ (0, import_react31.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react31.default.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1371,19 +1887,19 @@ var TreeItem = {
   DropIndicator: TreeDropIndicator
 };
 var TREEGRID_ROW_NAME = "TreegridRow";
-var [createTreegridRowContext, createTreegridRowScope] = (0, import_react_context5.createContextScope)(TREEGRID_ROW_NAME, []);
+var [createTreegridRowContext, createTreegridRowScope] = (0, import_react_context6.createContextScope)(TREEGRID_ROW_NAME, []);
 var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
 var PATH_SEPARATOR = "~";
 var PARENT_OF_SEPARATOR = " ";
-var TreegridRoot = /* @__PURE__ */ (0, import_react34.forwardRef)(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+var TreegridRoot = /* @__PURE__ */ (0, import_react33.forwardRef)(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot7.Slot : import_react_primitive6.Primitive.div;
+  const Root7 = asChild ? import_react_slot8.Slot : import_react_primitive7.Primitive.div;
   const arrowNavigationAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
     axis: "vertical",
     tabbable: false,
     circular: true
   });
-  return /* @__PURE__ */ import_react34.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react33.default.createElement(Root7, {
     role: "treegrid",
     ...arrowNavigationAttrs,
     ...props,
@@ -1395,12 +1911,12 @@ var TreegridRoot = /* @__PURE__ */ (0, import_react34.forwardRef)(({ asChild, cl
     ref: forwardedRef
   }, children);
 });
-var TreegridRow = /* @__PURE__ */ (0, import_react34.forwardRef)(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+var TreegridRow = /* @__PURE__ */ (0, import_react33.forwardRef)(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot7.Slot : import_react_primitive6.Primitive.div;
+  const Root7 = asChild ? import_react_slot8.Slot : import_react_primitive7.Primitive.div;
   const pathParts = id.split(PATH_SEPARATOR);
   const level = pathParts.length - 1;
-  const [open, onOpenChange] = (0, import_react_use_controllable_state2.useControllableState)({
+  const [open, onOpenChange] = (0, import_react_use_controllable_state3.useControllableState)({
     prop: propsOpen,
     onChange: propsOnOpenChange,
     defaultProp: defaultOpen
@@ -1414,11 +1930,11 @@ var TreegridRow = /* @__PURE__ */ (0, import_react34.forwardRef)(({ __treegridRo
     circular: false,
     memorizeCurrent: false
   });
-  return /* @__PURE__ */ import_react34.default.createElement(TreegridRowProvider, {
+  return /* @__PURE__ */ import_react33.default.createElement(TreegridRowProvider, {
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ import_react34.default.createElement(Root5, {
+  }, /* @__PURE__ */ import_react33.default.createElement(Root7, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", "treegrid__row", {
@@ -1433,15 +1949,15 @@ var TreegridRow = /* @__PURE__ */ (0, import_react34.forwardRef)(({ __treegridRo
     ...props,
     id,
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react34.default.createElement("div", {
+  }, /* @__PURE__ */ import_react33.default.createElement("div", {
     role: "none",
     className: "contents",
     ...arrowGroupAttrs
   }, children)));
 });
-var TreegridCell = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, children, indent, ...props }, forwardedRef) => {
+var TreegridCell = /* @__PURE__ */ (0, import_react33.forwardRef)(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react34.default.createElement("div", {
+  return /* @__PURE__ */ import_react33.default.createElement("div", {
     role: "gridcell",
     className: tx("treegrid.cell", "treegrid__cell", {
       indent
@@ -1473,22 +1989,22 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = (0, import_react36.useState)(0);
-  const [gestureStartX, setGestureStartX] = (0, import_react36.useState)(0);
-  const setIdle = (0, import_react36.useCallback)(() => {
+  const [motionState, setMotionState] = (0, import_react35.useState)(0);
+  const [gestureStartX, setGestureStartX] = (0, import_react35.useState)(0);
+  const setIdle = (0, import_react35.useCallback)(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = (0, import_react36.useCallback)(() => {
+  const setFollowing = (0, import_react35.useCallback)(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = (0, import_react36.useCallback)(({ screenX }) => {
+  const handlePointerDown = (0, import_react35.useCallback)(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -1496,7 +2012,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = (0, import_react36.useCallback)(({ screenX }) => {
+  const handlePointerMove = (0, import_react35.useCallback)(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -1520,12 +2036,12 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = (0, import_react36.useCallback)(() => {
+  const handlePointerUp = (0, import_react35.useCallback)(() => {
     setIdle();
   }, [
     setIdle
   ]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     $root?.addEventListener("pointerdown", handlePointerDown);
     return () => {
       $root?.removeEventListener("pointerdown", handlePointerDown);
@@ -1534,7 +2050,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerDown
   ]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
     return () => {
       document.documentElement.removeEventListener("pointermove", handlePointerMove);
@@ -1543,7 +2059,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerMove
   ]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
     return () => {
       document.documentElement.removeEventListener("pointerup", handlePointerUp);
@@ -1561,7 +2077,7 @@ var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = (0, import_react35.useCallback)((event) => {
+  const handleKeyDown = (0, import_react34.useCallback)((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -1588,7 +2104,7 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
     ...focusableGroupAttrs
   };
 };
-var [MainProvider, useMainContext] = (0, import_react_context6.createContext)(MAIN_NAME, {
+var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MAIN_NAME, {
   resizing: false,
   navigationSidebarState: "closed",
   setNavigationSidebarState: (nextState) => {
@@ -1614,22 +2130,22 @@ var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
   return {
     navigationSidebarState,
     setNavigationSidebarState,
-    toggleNavigationSidebar: (0, import_react35.useCallback)(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
       navigationSidebarState,
       setNavigationSidebarState
     ]),
-    openNavigationSidebar: (0, import_react35.useCallback)(() => setNavigationSidebarState("expanded"), []),
-    collapseNavigationSidebar: (0, import_react35.useCallback)(() => setNavigationSidebarState("collapsed"), []),
-    closeNavigationSidebar: (0, import_react35.useCallback)(() => setNavigationSidebarState("closed"), []),
+    openNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState("closed"), []),
     complementarySidebarState,
     setComplementarySidebarState,
-    toggleComplementarySidebar: (0, import_react35.useCallback)(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+    toggleComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
       complementarySidebarState,
       setComplementarySidebarState
     ]),
-    openComplementarySidebar: (0, import_react35.useCallback)(() => setComplementarySidebarState("expanded"), []),
-    collapseComplementarySidebar: (0, import_react35.useCallback)(() => setComplementarySidebarState("collapsed"), []),
-    closeComplementarySidebar: (0, import_react35.useCallback)(() => setComplementarySidebarState("closed"), [])
+    openComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState("closed"), [])
   };
 };
 var resizeDebounce = 3e3;
@@ -1637,19 +2153,19 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
   const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
     ssr: false
   });
-  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state3.useControllableState)({
+  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
     prop: propsNavigationSidebarState,
     defaultProp: defaultNavigationSidebarState,
     onChange: onNavigationSidebarStateChange
   });
-  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = (0, import_react_use_controllable_state3.useControllableState)({
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
     prop: propsComplementarySidebarState,
     defaultProp: defaultComplementarySidebarState,
     onChange: onComplementarySidebarStateChange
   });
-  const [resizing, setResizing] = (0, import_react35.useState)(false);
-  const resizeInterval = (0, import_react35.useRef)(null);
-  const handleResize = (0, import_react35.useCallback)(() => {
+  const [resizing, setResizing] = (0, import_react34.useState)(false);
+  const resizeInterval = (0, import_react34.useRef)(null);
+  const handleResize = (0, import_react34.useCallback)(() => {
     setResizing(true);
     if (resizeInterval.current) {
       clearTimeout(resizeInterval.current);
@@ -1659,13 +2175,13 @@ var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNa
       resizeInterval.current = null;
     }, resizeDebounce);
   }, []);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [
     handleResize
   ]);
-  return /* @__PURE__ */ import_react35.default.createElement(MainProvider, {
+  return /* @__PURE__ */ import_react34.default.createElement(MainProvider, {
     ...props,
     navigationSidebarState,
     setNavigationSidebarState,
@@ -1678,18 +2194,18 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ (0, import_react35.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
   const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
     ssr: false
   });
   const { tx } = useThemeContext();
   const { t } = useTranslation();
   const ref = (0, import_react_hooks4.useForwardedRef)(forwardedRef);
-  const noopRef = (0, import_react35.useRef)(null);
+  const noopRef = (0, import_react34.useRef)(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => onStateChange?.("closed")
   });
-  const handleKeyDown = (0, import_react35.useCallback)((event) => {
+  const handleKeyDown = (0, import_react34.useCallback)((event) => {
     if (event.key === "Escape") {
       event.target.closest("[data-tabster]")?.focus();
     }
@@ -1697,14 +2213,14 @@ var MainSidebar = /* @__PURE__ */ (0, import_react35.forwardRef)(({ classNames,
   }, [
     props.onKeyDown
   ]);
-  const Root5 = isLg ? import_react_primitive7.Primitive.div : import_react_dialog2.DialogContent;
-  return /* @__PURE__ */ import_react35.default.createElement(import_react_dialog2.Root, {
+  const Root7 = isLg ? import_react_primitive8.Primitive.div : import_react_dialog2.DialogContent;
+  return /* @__PURE__ */ import_react34.default.createElement(import_react_dialog2.Root, {
     open: state !== "closed",
     "aria-label": toLocalizedString(label, t),
     modal: false
-  }, !isLg && /* @__PURE__ */ import_react35.default.createElement(import_react_dialog2.DialogTitle, {
+  }, !isLg && /* @__PURE__ */ import_react34.default.createElement(import_react_dialog2.DialogTitle, {
     className: "sr-only"
-  }, toLocalizedString(label, t)), /* @__PURE__ */ import_react35.default.createElement(Root5, {
+  }, toLocalizedString(label, t)), /* @__PURE__ */ import_react34.default.createElement(Root7, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -1722,10 +2238,10 @@ var MainSidebar = /* @__PURE__ */ (0, import_react35.forwardRef)(({ classNames,
     ref
   }, children));
 });
-var MainNavigationSidebar = /* @__PURE__ */ (0, import_react35.forwardRef)((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
   const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ import_react35.default.createElement(MainSidebar, {
+  return /* @__PURE__ */ import_react34.default.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: navigationSidebarState,
@@ -1736,10 +2252,10 @@ var MainNavigationSidebar = /* @__PURE__ */ (0, import_react35.forwardRef)((prop
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ (0, import_react35.forwardRef)((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
   const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ import_react35.default.createElement(MainSidebar, {
+  return /* @__PURE__ */ import_react34.default.createElement(MainSidebar, {
     ...mover,
     ...props,
     state: complementarySidebarState,
@@ -1750,12 +2266,12 @@ var MainComplementarySidebar = /* @__PURE__ */ (0, import_react35.forwardRef)((p
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ (0, import_react35.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ (0, import_react34.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
   const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot8.Slot : role ? "div" : "main";
+  const Root7 = asChild ? import_react_slot9.Slot : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ import_react35.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react34.default.createElement(Root7, {
     role,
     ...handlesFocus && {
       ...mover
@@ -1771,13 +2287,13 @@ var MainContent = /* @__PURE__ */ (0, import_react35.forwardRef)(({ asChild, cla
   }, children);
 });
 MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ (0, import_react35.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
     ssr: false
   });
   const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react35.default.createElement("div", {
+  return /* @__PURE__ */ import_react34.default.createElement("div", {
     onClick: () => {
       setNavigationSidebarState("collapsed");
       setComplementarySidebarState("collapsed");
@@ -1800,14 +2316,31 @@ var Main = {
   NavigationSidebar: MainNavigationSidebar,
   ComplementarySidebar: MainComplementarySidebar
 };
+var propIsNumber = (prop) => Number.isFinite(prop);
+var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
+var safePadding = (propsPadding, safePadding2, side) => {
+  return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
+};
+var useSafeCollisionPadding = (collisionPadding) => {
+  const { safeAreaPadding } = useThemeContext();
+  return (0, import_react37.useMemo)(() => ({
+    top: safePadding(collisionPadding, safeAreaPadding, "top"),
+    right: safePadding(collisionPadding, safeAreaPadding, "right"),
+    bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
+    left: safePadding(collisionPadding, safeAreaPadding, "left")
+  }), [
+    collisionPadding,
+    safeAreaPadding
+  ]);
+};
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
+var ContextMenuContent = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
-  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Content, {
+  return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Content, {
     ...props,
     collisionPadding: safeCollisionPadding,
     className: tx("menu.content", "menu", {
@@ -1816,18 +2349,18 @@ var ContextMenuContent = /* @__PURE__ */ (0, import_react37.forwardRef)(({ class
     ref: forwardedRef
   }, children);
 });
-var ContextMenuViewport = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
-  return /* @__PURE__ */ import_react37.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot10.Slot : import_react_primitive9.Primitive.div;
+  return /* @__PURE__ */ import_react36.default.createElement(Root7, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuArrow = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Arrow, {
+  return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
     className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
@@ -1835,33 +2368,33 @@ var ContextMenuArrow = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNa
 });
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
-var ContextMenuItem = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuItem = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Item, {
+  return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Item, {
     ...props,
     className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuCheckboxItem = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuCheckboxItem = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuSeparator = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuSeparator = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Separator, {
+  return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Separator, {
     ...props,
     className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuGroupLabel = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuGroupLabel = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react37.default.createElement(ContextMenuPrimitive.Label, {
+  return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Label, {
     ...props,
     className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
@@ -1882,7 +2415,7 @@ var ContextMenu2 = {
   GroupLabel: ContextMenuGroupLabel
 };
 var DROPDOWN_MENU_NAME = "DropdownMenu";
-var [createDropdownMenuContext, createDropdownMenuScope] = (0, import_react_context7.createContextScope)(DROPDOWN_MENU_NAME, [
+var [createDropdownMenuContext, createDropdownMenuScope] = (0, import_react_context8.createContextScope)(DROPDOWN_MENU_NAME, [
   import_react_menu.createMenuScope
 ]);
 var useMenuScope = (0, import_react_menu.createMenuScope)();
@@ -1891,16 +2424,16 @@ var DropdownMenuRoot = (props) => {
   const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const triggerRef = (0, import_react38.useRef)(null);
-  const [open = false, setOpen] = (0, import_react_use_controllable_state4.useControllableState)({
+  const [open = false, setOpen] = (0, import_react_use_controllable_state5.useControllableState)({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
   return /* @__PURE__ */ import_react38.default.createElement(DropdownMenuProvider, {
     scope: __scopeDropdownMenu,
-    triggerId: (0, import_react_id.useId)(),
+    triggerId: (0, import_react_id2.useId)(),
     triggerRef,
-    contentId: (0, import_react_id.useId)(),
+    contentId: (0, import_react_id2.useId)(),
     open,
     onOpenChange: setOpen,
     onOpenToggle: (0, import_react38.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
@@ -1916,15 +2449,15 @@ var DropdownMenuRoot = (props) => {
   }, children));
 };
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
-var TRIGGER_NAME = "DropdownMenuTrigger";
+var TRIGGER_NAME2 = "DropdownMenuTrigger";
 var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
-  const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
+  const context = useDropdownMenuContext(TRIGGER_NAME2, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
   return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Anchor, {
     asChild: true,
     ...menuScope
-  }, /* @__PURE__ */ import_react38.default.createElement(import_react_primitive9.Primitive.button, {
+  }, /* @__PURE__ */ import_react38.default.createElement(import_react_primitive10.Primitive.button, {
     type: "button",
     id: context.triggerId,
     "aria-haspopup": "menu",
@@ -1934,8 +2467,8 @@ var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props,
     "data-disabled": disabled ? "" : void 0,
     disabled,
     ...triggerProps,
-    ref: (0, import_react_compose_refs.composeRefs)(forwardedRef, context.triggerRef),
-    onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, (event) => {
+    ref: (0, import_react_compose_refs2.composeRefs)(forwardedRef, context.triggerRef),
+    onPointerDown: (0, import_primitive2.composeEventHandlers)(props.onPointerDown, (event) => {
       if (!disabled && event.button === 0 && event.ctrlKey === false) {
         context.onOpenToggle();
         if (!context.open) {
@@ -1943,7 +2476,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props,
         }
       }
     }),
-    onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
+    onKeyDown: (0, import_primitive2.composeEventHandlers)(props.onKeyDown, (event) => {
       if (disabled) {
         return;
       }
@@ -1966,7 +2499,7 @@ var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props,
     })
   }));
 });
-DropdownMenuTrigger.displayName = TRIGGER_NAME;
+DropdownMenuTrigger.displayName = TRIGGER_NAME2;
 var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
 var DropdownMenuVirtualTrigger = (props) => {
   const { __scopeDropdownMenu, virtualRef } = props;
@@ -1983,7 +2516,7 @@ var DropdownMenuVirtualTrigger = (props) => {
   });
 };
 DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
-var PORTAL_NAME = "DropdownMenuPortal";
+var PORTAL_NAME2 = "DropdownMenuPortal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
@@ -1992,21 +2525,21 @@ var DropdownMenuPortal = (props) => {
     ...portalProps
   });
 };
-DropdownMenuPortal.displayName = PORTAL_NAME;
+DropdownMenuPortal.displayName = PORTAL_NAME2;
 var DropdownMenuViewport = /* @__PURE__ */ (0, import_react38.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot10.Slot : import_react_primitive9.Primitive.div;
-  return /* @__PURE__ */ import_react38.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.div;
+  return /* @__PURE__ */ import_react38.default.createElement(Root7, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var CONTENT_NAME = "DropdownMenuContent";
+var CONTENT_NAME2 = "DropdownMenuContent";
 var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
   const { tx } = useThemeContext();
-  const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+  const context = useDropdownMenuContext(CONTENT_NAME2, __scopeDropdownMenu);
   const elevation = useElevationContext();
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const hasInteractedOutsideRef = (0, import_react38.useRef)(false);
@@ -2018,14 +2551,14 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)((props,
     ...contentProps,
     collisionPadding: safeCollisionPadding,
     ref: forwardedRef,
-    onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
+    onCloseAutoFocus: (0, import_primitive2.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
       if (!hasInteractedOutsideRef.current) {
         context.triggerRef.current?.focus();
       }
       hasInteractedOutsideRef.current = false;
       event.preventDefault();
     }),
-    onInteractOutside: (0, import_primitive.composeEventHandlers)(props.onInteractOutside, (event) => {
+    onInteractOutside: (0, import_primitive2.composeEventHandlers)(props.onInteractOutside, (event) => {
       const originalEvent = event.detail.originalEvent;
       const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
       const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
@@ -2049,7 +2582,7 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)((props,
     }
   });
 });
-DropdownMenuContent.displayName = CONTENT_NAME;
+DropdownMenuContent.displayName = CONTENT_NAME2;
 var GROUP_NAME = "DropdownMenuGroup";
 var DropdownMenuGroup = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...groupProps } = props;
@@ -2146,7 +2679,7 @@ var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react38.forwardRef)((prop
   });
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
-var ARROW_NAME = "DropdownMenuArrow";
+var ARROW_NAME2 = "DropdownMenuArrow";
 var DropdownMenuArrow = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
@@ -2158,11 +2691,11 @@ var DropdownMenuArrow = /* @__PURE__ */ (0, import_react38.forwardRef)((props, f
     ref: forwardedRef
   });
 });
-DropdownMenuArrow.displayName = ARROW_NAME;
+DropdownMenuArrow.displayName = ARROW_NAME2;
 var DropdownMenuSub = (props) => {
   const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  const [open = false, setOpen] = (0, import_react_use_controllable_state4.useControllableState)({
+  const [open = false, setOpen] = (0, import_react_use_controllable_state5.useControllableState)({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
@@ -2228,17 +2761,17 @@ var DropdownMenu = {
 };
 var useDropdownMenuMenuScope = useMenuScope;
 var MESSAGE_NAME = "Message";
-var [MessageProvider, useMessageContext] = (0, import_react_context8.createContext)(MESSAGE_NAME);
+var [MessageProvider, useMessageContext] = (0, import_react_context9.createContext)(MESSAGE_NAME);
 var MessageRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = (0, import_react_hooks5.useId)("message__title", propsTitleId);
   const descriptionId = (0, import_react_hooks5.useId)("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Root5 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.div;
+  const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.div;
   return /* @__PURE__ */ import_react39.default.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ import_react39.default.createElement(Root5, {
+  }, /* @__PURE__ */ import_react39.default.createElement(Root7, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -2254,8 +2787,8 @@ var MESSAGE_TITLE_NAME = "MessageTitle";
 var MessageTitle = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Root5 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.h2;
-  return /* @__PURE__ */ import_react39.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.h2;
+  return /* @__PURE__ */ import_react39.default.createElement(Root7, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -2267,8 +2800,8 @@ var MESSAGE_BODY_NAME = "MessageBody";
 var MessageBody = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
-  const Root5 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.p;
-  return /* @__PURE__ */ import_react39.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.p;
+  return /* @__PURE__ */ import_react39.default.createElement(Root7, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -2282,24 +2815,24 @@ var Message = {
   Body: MessageBody
 };
 var POPOVER_NAME = "Popover";
-var [createPopoverContext, createPopoverScope] = (0, import_react_context9.createContextScope)(POPOVER_NAME, [
-  import_react_popper.createPopperScope
+var [createPopoverContext, createPopoverScope] = (0, import_react_context10.createContextScope)(POPOVER_NAME, [
+  import_react_popper2.createPopperScope
 ]);
-var usePopperScope = (0, import_react_popper.createPopperScope)();
+var usePopperScope2 = (0, import_react_popper2.createPopperScope)();
 var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
 var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
-  const popperScope = usePopperScope(__scopePopover);
+  const popperScope = usePopperScope2(__scopePopover);
   const triggerRef = (0, import_react40.useRef)(null);
   const [hasCustomAnchor, setHasCustomAnchor] = (0, import_react40.useState)(false);
-  const [open = false, setOpen] = (0, import_react_use_controllable_state5.useControllableState)({
+  const [open = false, setOpen] = (0, import_react_use_controllable_state6.useControllableState)({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ import_react40.default.createElement(PopoverProvider, {
+  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Root, popperScope, /* @__PURE__ */ import_react40.default.createElement(PopoverProvider, {
     scope: __scopePopover,
-    contentId: (0, import_react_id2.useId)(),
+    contentId: (0, import_react_id3.useId)(),
     triggerRef,
     open,
     onOpenChange: setOpen,
@@ -2317,7 +2850,7 @@ var ANCHOR_NAME = "PopoverAnchor";
 var PopoverAnchor = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const { __scopePopover, ...anchorProps } = props;
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
-  const popperScope = usePopperScope(__scopePopover);
+  const popperScope = usePopperScope2(__scopePopover);
   const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
   (0, import_react40.useEffect)(() => {
     onCustomAnchorAdd();
@@ -2326,20 +2859,20 @@ var PopoverAnchor = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwa
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
   });
 });
 PopoverAnchor.displayName = ANCHOR_NAME;
-var TRIGGER_NAME2 = "PopoverTrigger";
+var TRIGGER_NAME3 = "PopoverTrigger";
 var PopoverTrigger = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const { __scopePopover, ...triggerProps } = props;
-  const context = usePopoverContext(TRIGGER_NAME2, __scopePopover);
-  const popperScope = usePopperScope(__scopePopover);
-  const composedTriggerRef = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, context.triggerRef);
-  const trigger = /* @__PURE__ */ import_react40.default.createElement(import_react_primitive11.Primitive.button, {
+  const context = usePopoverContext(TRIGGER_NAME3, __scopePopover);
+  const popperScope = usePopperScope2(__scopePopover);
+  const composedTriggerRef = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, context.triggerRef);
+  const trigger = /* @__PURE__ */ import_react40.default.createElement(import_react_primitive12.Primitive.button, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -2347,54 +2880,54 @@ var PopoverTrigger = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forw
     "data-state": getState(context.open),
     ...triggerProps,
     ref: composedTriggerRef,
-    onClick: (0, import_primitive2.composeEventHandlers)(props.onClick, context.onOpenToggle)
+    onClick: (0, import_primitive3.composeEventHandlers)(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
 });
-PopoverTrigger.displayName = TRIGGER_NAME2;
+PopoverTrigger.displayName = TRIGGER_NAME3;
 var VIRTUAL_TRIGGER_NAME2 = "PopoverVirtualTrigger";
 var PopoverVirtualTrigger = (props) => {
   const { __scopePopover, virtualRef } = props;
   const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
-  const popperScope = usePopperScope(__scopePopover);
+  const popperScope = usePopperScope2(__scopePopover);
   (0, import_react40.useEffect)(() => {
     if (virtualRef.current) {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Anchor, {
     ...popperScope,
     virtualRef
   });
 };
 PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME2;
-var PORTAL_NAME2 = "PopoverPortal";
-var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
+var PORTAL_NAME3 = "PopoverPortal";
+var [PortalProvider2, usePortalContext2] = createPopoverContext(PORTAL_NAME3, {
   forceMount: void 0
 });
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
-  const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
-  return /* @__PURE__ */ import_react40.default.createElement(PortalProvider, {
+  const context = usePopoverContext(PORTAL_NAME3, __scopePopover);
+  return /* @__PURE__ */ import_react40.default.createElement(PortalProvider2, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ import_react40.default.createElement(import_react_presence.Presence, {
+  }, /* @__PURE__ */ import_react40.default.createElement(import_react_presence2.Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ import_react40.default.createElement(import_react_portal.Portal, {
+  }, /* @__PURE__ */ import_react40.default.createElement(import_react_portal2.Portal, {
     asChild: true,
     container
   }, children)));
 };
-PopoverPortal.displayName = PORTAL_NAME2;
-var CONTENT_NAME2 = "PopoverContent";
+PopoverPortal.displayName = PORTAL_NAME3;
+var CONTENT_NAME3 = "PopoverContent";
 var PopoverContent = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
-  const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
+  const portalContext = usePortalContext2(CONTENT_NAME3, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
-  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  return /* @__PURE__ */ import_react40.default.createElement(import_react_presence.Presence, {
+  const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
+  return /* @__PURE__ */ import_react40.default.createElement(import_react_presence2.Presence, {
     present: forceMount || context.open
   }, context.modal ? /* @__PURE__ */ import_react40.default.createElement(PopoverContentModal, {
     ...contentProps,
@@ -2404,11 +2937,11 @@ var PopoverContent = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forw
     ref: forwardedRef
   }));
 });
-PopoverContent.displayName = CONTENT_NAME2;
+PopoverContent.displayName = CONTENT_NAME3;
 var PopoverContentModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
-  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
   const contentRef = (0, import_react40.useRef)(null);
-  const composedRefs = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, contentRef);
+  const composedRefs = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, contentRef);
   const isRightClickOutsideRef = (0, import_react40.useRef)(false);
   (0, import_react40.useEffect)(() => {
     const content = contentRef.current;
@@ -2417,7 +2950,7 @@ var PopoverContentModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props,
     }
   }, []);
   return /* @__PURE__ */ import_react40.default.createElement(import_react_remove_scroll.RemoveScroll, {
-    as: import_react_slot12.Slot,
+    as: import_react_slot13.Slot,
     allowPinchZoom: true
   }, /* @__PURE__ */ import_react40.default.createElement(PopoverContentImpl, {
     ...props,
@@ -2426,13 +2959,13 @@ var PopoverContentModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props,
     // (closed !== unmounted when animating out)
     trapFocus: context.open,
     disableOutsidePointerEvents: true,
-    onCloseAutoFocus: (0, import_primitive2.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
+    onCloseAutoFocus: (0, import_primitive3.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
       event.preventDefault();
       if (!isRightClickOutsideRef.current) {
         context.triggerRef.current?.focus();
       }
     }),
-    onPointerDownOutside: (0, import_primitive2.composeEventHandlers)(props.onPointerDownOutside, (event) => {
+    onPointerDownOutside: (0, import_primitive3.composeEventHandlers)(props.onPointerDownOutside, (event) => {
       const originalEvent = event.detail.originalEvent;
       const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
       const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
@@ -2442,13 +2975,13 @@ var PopoverContentModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props,
     }),
     // When focus is trapped, a `focusout` event may still happen.
     // We make sure we don't trigger our `onDismiss` in such case.
-    onFocusOutside: (0, import_primitive2.composeEventHandlers)(props.onFocusOutside, (event) => event.preventDefault(), {
+    onFocusOutside: (0, import_primitive3.composeEventHandlers)(props.onFocusOutside, (event) => event.preventDefault(), {
       checkForDefaultPrevented: false
     })
   }));
 });
 var PopoverContentNonModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
-  const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
+  const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
   const hasInteractedOutsideRef = (0, import_react40.useRef)(false);
   const hasPointerDownOutsideRef = (0, import_react40.useRef)(false);
   return /* @__PURE__ */ import_react40.default.createElement(PopoverContentImpl, {
@@ -2488,8 +3021,8 @@ var PopoverContentNonModal = /* @__PURE__ */ (0, import_react40.forwardRef)((pro
 });
 var PopoverContentImpl = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
-  const context = usePopoverContext(CONTENT_NAME2, __scopePopover);
-  const popperScope = usePopperScope(__scopePopover);
+  const context = usePopoverContext(CONTENT_NAME3, __scopePopover);
+  const popperScope = usePopperScope2(__scopePopover);
   const { tx } = useThemeContext();
   const elevation = useElevationContext();
   const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
@@ -2500,7 +3033,7 @@ var PopoverContentImpl = /* @__PURE__ */ (0, import_react40.forwardRef)((props,
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ import_react40.default.createElement(import_react_dismissable_layer.DismissableLayer, {
+  }, /* @__PURE__ */ import_react40.default.createElement(import_react_dismissable_layer2.DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -2508,7 +3041,7 @@ var PopoverContentImpl = /* @__PURE__ */ (0, import_react40.forwardRef)((props,
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
@@ -2536,31 +3069,31 @@ var CLOSE_NAME = "PopoverClose";
 var PopoverClose = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ import_react40.default.createElement(import_react_primitive11.Primitive.button, {
+  return /* @__PURE__ */ import_react40.default.createElement(import_react_primitive12.Primitive.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
-    onClick: (0, import_primitive2.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
+    onClick: (0, import_primitive3.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
   });
 });
 PopoverClose.displayName = CLOSE_NAME;
-var ARROW_NAME2 = "PopoverArrow";
+var ARROW_NAME3 = "PopoverArrow";
 var PopoverArrow = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
-  const popperScope = usePopperScope(__scopePopover);
+  const popperScope = usePopperScope2(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Arrow, {
+  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-PopoverArrow.displayName = ARROW_NAME2;
+PopoverArrow.displayName = ARROW_NAME3;
 var PopoverViewport = /* @__PURE__ */ (0, import_react40.forwardRef)(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.div;
-  return /* @__PURE__ */ import_react40.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot13.Slot : import_react_primitive12.Primitive.div;
+  return /* @__PURE__ */ import_react40.default.createElement(Root7, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -2795,8 +3328,8 @@ var Separator4 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, o
 });
 var Tag = /* @__PURE__ */ (0, import_react46.forwardRef)(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot13.Slot : import_react_primitive12.Primitive.span;
-  return /* @__PURE__ */ import_react46.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot14.Slot : import_react_primitive13.Primitive.span;
+  return /* @__PURE__ */ import_react46.default.createElement(Root7, {
     ...props,
     className: tx("tag.root", "dx-tag", {
       palette
@@ -2825,8 +3358,8 @@ var ToastRoot = /* @__PURE__ */ (0, import_react47.forwardRef)(({ classNames, ch
 });
 var ToastBody = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot14.Slot : import_react_primitive13.Primitive.div;
-  return /* @__PURE__ */ import_react47.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot15.Slot : import_react_primitive14.Primitive.div;
+  return /* @__PURE__ */ import_react47.default.createElement(Root7, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
@@ -2834,8 +3367,8 @@ var ToastBody = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, class
 });
 var ToastTitle = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot14.Slot : import_react_toast.ToastTitle;
-  return /* @__PURE__ */ import_react47.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot15.Slot : import_react_toast.ToastTitle;
+  return /* @__PURE__ */ import_react47.default.createElement(Root7, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
@@ -2843,8 +3376,8 @@ var ToastTitle = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, clas
 });
 var ToastDescription = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot14.Slot : import_react_toast.ToastDescription;
-  return /* @__PURE__ */ import_react47.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot15.Slot : import_react_toast.ToastDescription;
+  return /* @__PURE__ */ import_react47.default.createElement(Root7, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
@@ -2852,8 +3385,8 @@ var ToastDescription = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild
 });
 var ToastActions = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root5 = asChild ? import_react_slot14.Slot : import_react_primitive13.Primitive.div;
-  return /* @__PURE__ */ import_react47.default.createElement(Root5, {
+  const Root7 = asChild ? import_react_slot15.Slot : import_react_primitive14.Primitive.div;
+  return /* @__PURE__ */ import_react47.default.createElement(Root7, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -3020,6 +3553,7 @@ var Toolbar = {
   Treegrid,
   createDropdownMenuScope,
   createPopoverScope,
+  createTooltipScope,
   hasIosKeyboard,
   initialSafeArea,
   isLabel,
@@ -3039,6 +3573,7 @@ var Toolbar = {
   useSafeArea,
   useSidebars,
   useThemeContext,
+  useTooltipContext,
   useTranslation,
   useTranslationsContext,
   useVisualViewport,