@dxos/react-ui 0.7.4 → 0.7.5-labs.071a3e2

package/dist/lib/node/index.cjs

@@ -77,6 +77,7 @@ __export(node_exports, {
   createDropdownMenuScope: () => createDropdownMenuScope,
   createPopoverScope: () => createPopoverScope,
   hasIosKeyboard: () => hasIosKeyboard,
+  initialSafeArea: () => initialSafeArea,
   isLabel: () => isLabel,
   toLocalizedString: () => toLocalizedString,
   useAvatarContext: () => useAvatarContext,
@@ -86,9 +87,11 @@ __export(node_exports, {
   useDropdownMenuContext: () => useDropdownMenuContext,
   useDropdownMenuMenuScope: () => useDropdownMenuMenuScope,
   useElevationContext: () => useElevationContext,
+  useLandmarkMover: () => useLandmarkMover,
   useListContext: () => import_react_list.useListContext,
   useListItemContext: () => import_react_list.useListItemContext,
   useMainContext: () => useMainContext,
+  useSafeArea: () => useSafeArea,
   useSidebars: () => useSidebars,
   useThemeContext: () => useThemeContext,
   useTranslation: () => useTranslation,
@@ -105,57 +108,61 @@ var import_react = __toESM(require("react"));
 var import_react2 = require("react");
 var import_react3 = require("react");
 var import_react4 = require("react");
+var import_react_hooks = require("@dxos/react-hooks");
+var import_react5 = require("react");
 var import_locale = require("date-fns/locale");
 var import_i18next = __toESM(require("i18next"));
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_react_i18next2 = require("react-i18next");
-var import_react6 = require("react");
-var import_debug = require("@dxos/debug");
 var import_react7 = require("react");
+var import_debug = require("@dxos/debug");
+var import_react8 = require("react");
+var import_react_hooks2 = require("@dxos/react-hooks");
 var import_react_avatar = require("@radix-ui/react-avatar");
 var import_react_context = require("@radix-ui/react-context");
 var import_react_primitive2 = require("@radix-ui/react-primitive");
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_react8 = __toESM(require("react"));
-var import_react_hooks = require("@dxos/react-hooks");
 var import_react9 = __toESM(require("react"));
+var import_react_hooks3 = require("@dxos/react-hooks");
 var import_react10 = __toESM(require("react"));
-var import_react_hooks2 = require("@dxos/react-hooks");
-var import_react11 = require("@phosphor-icons/react");
+var import_react11 = __toESM(require("react"));
+var import_react_hooks4 = require("@dxos/react-hooks");
+var import_react12 = require("@phosphor-icons/react");
 var import_react_primitive3 = require("@radix-ui/react-primitive");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_react_primitive4 = require("@radix-ui/react-primitive");
 var import_react_slot4 = require("@radix-ui/react-slot");
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_react_context2 = require("@radix-ui/react-context");
 var import_react_primitive5 = require("@radix-ui/react-primitive");
 var import_react_slot5 = require("@radix-ui/react-slot");
-var import_react14 = __toESM(require("react"));
 var import_react15 = __toESM(require("react"));
-var import_react_tooltip = require("@radix-ui/react-tooltip");
 var import_react16 = __toESM(require("react"));
-var import_react_toggle = require("@radix-ui/react-toggle");
+var import_react_tooltip = require("@radix-ui/react-tooltip");
 var import_react17 = __toESM(require("react"));
-var import_react_toggle_group = require("@radix-ui/react-toggle-group");
-var import_react18 = __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_react_toggle_group = require("@radix-ui/react-toggle-group");
 var import_react20 = __toESM(require("react"));
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_keyborg = require("keyborg");
 var import_react21 = __toESM(require("react"));
 var import_react22 = __toESM(require("react"));
+var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_keyborg = require("keyborg");
 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_dialog = require("@radix-ui/react-dialog");
-var import_react24 = __toESM(require("react"));
+var import_react26 = __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_react25 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"));
 var import_react_primitive6 = require("@radix-ui/react-primitive");
 var import_react_slot6 = require("@radix-ui/react-slot");
-var import_react26 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_primitive = require("@radix-ui/primitive");
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
 var import_react_context5 = require("@radix-ui/react-context");
@@ -165,42 +172,41 @@ var import_react_menu = require("@radix-ui/react-menu");
 var import_react_primitive7 = require("@radix-ui/react-primitive");
 var import_react_slot7 = require("@radix-ui/react-slot");
 var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
-var import_react27 = __toESM(require("react"));
-var import_react28 = require("@phosphor-icons/react");
+var import_react29 = __toESM(require("react"));
 var import_react_checkbox = require("@radix-ui/react-checkbox");
-var import_react_switch = require("@radix-ui/react-switch");
 var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_react_input = require("@dxos/react-input");
-var import_react30 = require("@phosphor-icons/react");
+var import_react31 = require("@phosphor-icons/react");
 var import_react_slot8 = require("@radix-ui/react-slot");
-var import_react31 = __toESM(require("react"));
-var import_react_list = require("@dxos/react-list");
 var import_react32 = __toESM(require("react"));
+var import_react_list = require("@dxos/react-list");
+var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_react_tabster = require("@fluentui/react-tabster");
 var import_react_context6 = require("@radix-ui/react-context");
 var import_react_primitive8 = require("@radix-ui/react-primitive");
 var import_react_slot9 = require("@radix-ui/react-slot");
 var import_react_use_controllable_state3 = require("@radix-ui/react-use-controllable-state");
-var import_react33 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_react_tabster2 = require("@fluentui/react-tabster");
-var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
 var import_react_context7 = require("@radix-ui/react-context");
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 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_react34 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_log = require("@dxos/log");
-var import_react_hooks3 = require("@dxos/react-hooks");
-var import_react35 = require("react");
+var import_react_hooks5 = require("@dxos/react-hooks");
+var import_react38 = require("react");
 var import_react_context8 = require("@radix-ui/react-context");
 var import_react_primitive10 = require("@radix-ui/react-primitive");
 var import_react_slot11 = require("@radix-ui/react-slot");
-var import_react36 = __toESM(require("react"));
-var import_react_hooks4 = require("@dxos/react-hooks");
+var import_react39 = __toESM(require("react"));
+var import_react_hooks6 = require("@dxos/react-hooks");
 var import_primitive2 = require("@radix-ui/primitive");
-var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
+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_react_focus_guards = require("@radix-ui/react-focus-guards");
@@ -214,25 +220,25 @@ 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_aria_hidden = require("aria-hidden");
-var import_react37 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_react_remove_scroll = require("react-remove-scroll");
-var import_react38 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_react_scroll_area = require("@radix-ui/react-scroll-area");
-var import_react39 = __toESM(require("react"));
-var import_react40 = require("@phosphor-icons/react");
+var import_react42 = __toESM(require("react"));
+var import_react43 = require("@phosphor-icons/react");
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
-var import_react41 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var import_react_separator = require("@radix-ui/react-separator");
-var import_react42 = __toESM(require("react"));
+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_react43 = __toESM(require("react"));
+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_react_toast = require("@radix-ui/react-toast");
-var import_react44 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var ToolbarPrimitive = __toESM(require("@radix-ui/react-toolbar"));
-var import_react45 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var useDensityContext = (propsDensity) => {
   const { density } = (0, import_react2.useContext)(DensityContext);
   return propsDensity ?? density;
@@ -241,6 +247,25 @@ var useElevationContext = (propsElevation) => {
   const { elevation } = (0, import_react3.useContext)(ElevationContext);
   return propsElevation ?? elevation;
 };
+var initialSafeArea = {
+  top: NaN,
+  right: NaN,
+  bottom: NaN,
+  left: NaN
+};
+var useSafeArea = () => {
+  const [padding, setPadding] = (0, import_react4.useState)(initialSafeArea);
+  const handleResize = (0, import_react4.useCallback)(() => {
+    setPadding({
+      top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
+      right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
+      bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
+      left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
+    });
+  }, []);
+  (0, import_react_hooks.useResize)(handleResize);
+  return padding;
+};
 var initialLng = "en-US";
 var initialNs = "dxos-common";
 var initialDtLocale = import_locale.enUS;
@@ -261,21 +286,21 @@ void import_i18next.default.use(import_react_i18next2.initReactI18next).init({
     escapeValue: false
   }
 });
-var TranslationsContext = /* @__PURE__ */ (0, import_react5.createContext)({
+var TranslationsContext = /* @__PURE__ */ (0, import_react6.createContext)({
   appNs: initialNs,
   dtLocale: initialDtLocale
 });
 var useTranslation = (...args) => {
   const result = (0, import_react_i18next2.useTranslation)(...args);
-  const { dtLocale } = (0, import_react5.useContext)(TranslationsContext);
+  const { dtLocale } = (0, import_react6.useContext)(TranslationsContext);
   return {
     ...result,
     dtLocale
   };
 };
 var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
-  const [loaded, setLoaded] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
     setLoaded(false);
     if (resourceExtensions && resourceExtensions.length) {
       resourceExtensions.forEach((resource) => {
@@ -290,31 +315,27 @@ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtL
   }, [
     resourceExtensions
   ]);
-  return /* @__PURE__ */ import_react5.default.createElement(TranslationsContext.Provider, {
+  return /* @__PURE__ */ import_react6.default.createElement(TranslationsContext.Provider, {
     value: {
       appNs: appNs ?? initialNs,
       dtLocale: dtLocale ?? initialDtLocale
     }
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react5.Suspense, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react6.Suspense, {
     fallback
   }, loaded ? children : fallback));
 };
-var useTranslationsContext = () => (0, import_react4.useContext)(TranslationsContext);
-var useThemeContext = () => (0, import_react6.useContext)(ThemeContext) ?? (0, import_debug.raise)(new Error("Missing ThemeContext"));
+var useTranslationsContext = () => (0, import_react5.useContext)(TranslationsContext);
+var useThemeContext = () => (0, import_react7.useContext)(ThemeContext) ?? (0, import_debug.raise)(new Error("Missing ThemeContext"));
 var useVisualViewport = (deps) => {
-  const [width, setWidth] = (0, import_react7.useState)(null);
-  const [height, setHeight] = (0, import_react7.useState)(null);
-  (0, import_react7.useEffect)(() => {
-    const handleResize = () => {
-      if (window.visualViewport) {
-        setWidth(window.visualViewport.width);
-        setHeight(window.visualViewport.height);
-      }
-    };
-    window.visualViewport?.addEventListener("resize", handleResize);
-    handleResize();
-    return () => window.visualViewport?.removeEventListener("resize", handleResize);
-  }, deps ?? []);
+  const [width, setWidth] = (0, import_react8.useState)(null);
+  const [height, setHeight] = (0, import_react8.useState)(null);
+  const handleResize = (0, import_react8.useCallback)(() => {
+    if (window.visualViewport) {
+      setWidth(window.visualViewport.width);
+      setHeight(window.visualViewport.height);
+    }
+  }, []);
+  (0, import_react_hooks2.useResize)(handleResize);
   return {
     width,
     height
@@ -345,26 +366,26 @@ var AnchoredOverflow = {
   Anchor: AnchoredOverflowAnchor
 };
 var ICONS_URL = "/icons.svg";
-var Icon = /* @__PURE__ */ (0, import_react9.memo)(/* @__PURE__ */ (0, import_react9.forwardRef)(({ icon, classNames, size, ...props }, forwardedRef) => {
+var Icon = /* @__PURE__ */ (0, import_react10.memo)(/* @__PURE__ */ (0, import_react10.forwardRef)(({ icon, classNames, size, ...props }, forwardedRef) => {
   const { tx, noCache } = useThemeContext();
   const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
-  return /* @__PURE__ */ import_react9.default.createElement("svg", {
+  return /* @__PURE__ */ import_react10.default.createElement("svg", {
     ...props,
     className: tx("icon.root", "icon", {
       size
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react9.default.createElement("use", {
+  }, /* @__PURE__ */ import_react10.default.createElement("use", {
     href: `${url}#${icon}`
   }));
 }));
 var AVATAR_NAME = "Avatar";
 var [AvatarProvider, useAvatarContext] = (0, import_react_context.createContext)(AVATAR_NAME);
 var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children, labelId: propsLabelId, descriptionId: propsDescriptionId, maskId: propsMaskId, inGroup, hue }) => {
-  const labelId = (0, import_react_hooks.useId)("avatar__label", propsLabelId);
-  const descriptionId = (0, import_react_hooks.useId)("avatar__description", propsDescriptionId);
-  const maskId = (0, import_react_hooks.useId)("avatar__mask", propsMaskId);
-  return /* @__PURE__ */ import_react8.default.createElement(AvatarProvider, {
+  const labelId = (0, import_react_hooks3.useId)("avatar__label", propsLabelId);
+  const descriptionId = (0, import_react_hooks3.useId)("avatar__description", propsDescriptionId);
+  const maskId = (0, import_react_hooks3.useId)("avatar__mask", propsMaskId);
+  return /* @__PURE__ */ import_react9.default.createElement(AvatarProvider, {
     labelId,
     descriptionId,
     maskId,
@@ -377,7 +398,7 @@ var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children,
   }, children);
 };
 var rx = "0.25rem";
-var AvatarFrame = /* @__PURE__ */ (0, import_react8.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var AvatarFrame = /* @__PURE__ */ (0, import_react9.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, hue } = useAvatarContext("AvatarFrame");
   const { tx } = useThemeContext();
   const numericSize = size === "px" ? 1 : Number(size);
@@ -385,7 +406,7 @@ var AvatarFrame = /* @__PURE__ */ (0, import_react8.forwardRef)(({ classNames, c
   const ringWidth = status ? numericSize > 4 ? 2 : numericSize > 3 ? 1 : 1 : 0;
   const ringGap = status ? numericSize > 12 ? 3 : numericSize > 4 ? 2 : numericSize > 3 ? 1 : 0 : 0;
   const r = sizePx / 2 - ringGap - ringWidth;
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_avatar.Root, {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_avatar.Root, {
     role: "img",
     ...props,
     className: tx("avatar.root", "avatar", {
@@ -398,35 +419,35 @@ var AvatarFrame = /* @__PURE__ */ (0, import_react8.forwardRef)(({ classNames, c
       "aria-labelledby": labelId,
       "aria-describedby": descriptionId
     }
-  }, /* @__PURE__ */ import_react8.default.createElement("svg", {
+  }, /* @__PURE__ */ import_react9.default.createElement("svg", {
     viewBox: `0 0 ${sizePx} ${sizePx}`,
     width: sizePx,
     height: sizePx,
     className: tx("avatar.frame", "avatar__frame", {
       variant
     })
-  }, /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("mask", {
+  }, /* @__PURE__ */ import_react9.default.createElement("defs", null, /* @__PURE__ */ import_react9.default.createElement("mask", {
     id: maskId
-  }, variant === "circle" ? /* @__PURE__ */ import_react8.default.createElement("circle", {
+  }, variant === "circle" ? /* @__PURE__ */ import_react9.default.createElement("circle", {
     fill: "white",
     cx: "50%",
     cy: "50%",
     r
-  }) : /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }) : /* @__PURE__ */ import_react9.default.createElement("rect", {
     fill: "white",
     width: 2 * r,
     height: 2 * r,
     x: ringGap + ringWidth,
     y: ringGap + ringWidth,
     rx
-  }))), variant === "circle" ? /* @__PURE__ */ import_react8.default.createElement("circle", {
+  }))), variant === "circle" ? /* @__PURE__ */ import_react9.default.createElement("circle", {
     className: hue ? tx("hue.fill", "avatar__frame__circle", {
       hue
     }) : "fill-[var(--surface-bg)]",
     cx: "50%",
     cy: "50%",
     r
-  }) : /* @__PURE__ */ import_react8.default.createElement("rect", {
+  }) : /* @__PURE__ */ import_react9.default.createElement("rect", {
     className: hue ? tx("hue.fill", "avatar__frame__rect", {
       hue
     }) : "fill-[var(--surface-bg)]",
@@ -435,7 +456,7 @@ var AvatarFrame = /* @__PURE__ */ (0, import_react8.forwardRef)(({ classNames, c
     width: 2 * r,
     height: 2 * r,
     rx
-  }), children), /* @__PURE__ */ import_react8.default.createElement("span", {
+  }), children), /* @__PURE__ */ import_react9.default.createElement("span", {
     role: "none",
     className: tx("avatar.ring", "avatar__ring", {
       size,
@@ -448,11 +469,11 @@ var AvatarFrame = /* @__PURE__ */ (0, import_react8.forwardRef)(({ classNames, c
     }
   }));
 });
-var AvatarLabel = /* @__PURE__ */ (0, import_react8.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+var AvatarLabel = /* @__PURE__ */ (0, import_react9.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   const Root5 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
   const { tx } = useThemeContext();
   const { labelId } = useAvatarContext("AvatarLabel");
-  return /* @__PURE__ */ import_react8.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react9.default.createElement(Root5, {
     ...props,
     id: labelId,
     ref: forwardedRef,
@@ -461,11 +482,11 @@ var AvatarLabel = /* @__PURE__ */ (0, import_react8.forwardRef)(({ asChild, srOn
     }, classNames)
   });
 });
-var AvatarDescription = /* @__PURE__ */ (0, import_react8.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+var AvatarDescription = /* @__PURE__ */ (0, import_react9.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
   const Root5 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
   const { tx } = useThemeContext();
   const { descriptionId } = useAvatarContext("AvatarDescription");
-  return /* @__PURE__ */ import_react8.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react9.default.createElement(Root5, {
     ...props,
     id: descriptionId,
     ref: forwardedRef,
@@ -474,9 +495,9 @@ var AvatarDescription = /* @__PURE__ */ (0, import_react8.forwardRef)(({ asChild
     }, classNames)
   });
 });
-var AvatarMaskedImage = /* @__PURE__ */ (0, import_react8.forwardRef)((props, forwardedRef) => {
+var AvatarMaskedImage = /* @__PURE__ */ (0, import_react9.forwardRef)((props, forwardedRef) => {
   const { maskId } = useAvatarContext("AvatarFallback");
-  return /* @__PURE__ */ import_react8.default.createElement("image", {
+  return /* @__PURE__ */ import_react9.default.createElement("image", {
     width: "100%",
     height: "100%",
     ...props,
@@ -490,7 +511,7 @@ var AvatarMaskedText = (props) => {
   const { large } = props;
   const fontScale = (large ? 4 : 3) * (1 / 1.612);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react8.default.createElement("text", {
+  return /* @__PURE__ */ import_react9.default.createElement("text", {
     x: "50%",
     y: "50%",
     className: tx("avatar.fallbackText", "avatar__fallback-text"),
@@ -500,43 +521,43 @@ var AvatarMaskedText = (props) => {
     mask: `url(#${maskId})`
   }, props.children);
 };
-var AvatarImage = /* @__PURE__ */ (0, import_react8.forwardRef)(({ onLoadingStatusChange, ...props }, forwardedRef) => {
+var AvatarImage = /* @__PURE__ */ (0, import_react9.forwardRef)(({ onLoadingStatusChange, ...props }, forwardedRef) => {
   const { size } = useAvatarContext("AvatarImage");
   const pxSize = size === "px" ? 1 : size * 4;
   if (pxSize <= 20) {
     return null;
   }
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_avatar.Fallback, {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_avatar.Fallback, {
     asChild: true
-  }, /* @__PURE__ */ import_react8.default.createElement(AvatarMaskedImage, {
+  }, /* @__PURE__ */ import_react9.default.createElement(AvatarMaskedImage, {
     ...props,
     ref: forwardedRef
   }));
 });
-var AvatarIcon = /* @__PURE__ */ (0, import_react8.forwardRef)(({ onLoadingStatusChange, ...props }, forwardedRef) => {
+var AvatarIcon = /* @__PURE__ */ (0, import_react9.forwardRef)(({ onLoadingStatusChange, ...props }, forwardedRef) => {
   const { size } = useAvatarContext("AvatarIcon");
   const pxSize = size === "px" ? 1 : size * 4;
   if (pxSize <= 20) {
     return null;
   }
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_avatar.Fallback, {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_avatar.Fallback, {
     asChild: true
-  }, /* @__PURE__ */ import_react8.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react9.default.createElement(Icon, {
     ...props,
     ref: forwardedRef
   }));
 });
-var AvatarFallback = /* @__PURE__ */ (0, import_react8.forwardRef)(({ delayMs, text, ...props }, forwardedRef) => {
+var AvatarFallback = /* @__PURE__ */ (0, import_react9.forwardRef)(({ delayMs, text, ...props }, forwardedRef) => {
   const isTextOnly = Boolean(text && /[0-9a-zA-Z]+/.test(text));
   const { size } = useAvatarContext("AvatarFallback");
   const numericSize = size === "px" ? 1 : Number(size);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_avatar.Fallback, {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_avatar.Fallback, {
     delayMs,
     asChild: true
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, numericSize >= 6 && /* @__PURE__ */ import_react8.default.createElement(AvatarMaskedImage, {
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, numericSize >= 6 && /* @__PURE__ */ import_react9.default.createElement(AvatarMaskedImage, {
     ...props,
     ref: forwardedRef
-  }), text && /* @__PURE__ */ import_react8.default.createElement(AvatarMaskedText, {
+  }), text && /* @__PURE__ */ import_react9.default.createElement(AvatarMaskedText, {
     large: !isTextOnly
   }, text.toLocaleUpperCase())));
 });
@@ -549,17 +570,17 @@ var Avatar = {
   Label: AvatarLabel,
   Description: AvatarDescription
 };
-var AvatarGroupRoot = /* @__PURE__ */ (0, import_react10.forwardRef)(({ labelId: propsLabelId, descriptionId: propsDescriptionId, size, variant, children, classNames }, forwardedRef) => {
+var AvatarGroupRoot = /* @__PURE__ */ (0, import_react11.forwardRef)(({ labelId: propsLabelId, descriptionId: propsDescriptionId, size, variant, children, classNames }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const labelId = (0, import_react_hooks2.useId)("avatar-group__label", propsLabelId);
-  const descriptionId = (0, import_react_hooks2.useId)("avatar-group__description", propsDescriptionId);
-  return /* @__PURE__ */ import_react10.default.createElement(Avatar.Root, {
+  const labelId = (0, import_react_hooks4.useId)("avatar-group__label", propsLabelId);
+  const descriptionId = (0, import_react_hooks4.useId)("avatar-group__description", propsDescriptionId);
+  return /* @__PURE__ */ import_react11.default.createElement(Avatar.Root, {
     labelId,
     descriptionId,
     size,
     variant,
     inGroup: true
-  }, /* @__PURE__ */ import_react10.default.createElement("div", {
+  }, /* @__PURE__ */ import_react11.default.createElement("div", {
     role: "group",
     className: tx("avatar.group", "avatar-group", {}, classNames),
     "aria-labelledby": labelId,
@@ -569,7 +590,7 @@ var AvatarGroupRoot = /* @__PURE__ */ (0, import_react10.forwardRef)(({ labelId:
 });
 var AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest }) => {
   const { labelId, descriptionId, size: contextSize, variant: contextVariant } = useAvatarContext("AvatarGroupItemRoot");
-  return /* @__PURE__ */ import_react10.default.createElement(Avatar.Root, {
+  return /* @__PURE__ */ import_react11.default.createElement(Avatar.Root, {
     labelId,
     descriptionId,
     maskId,
@@ -580,10 +601,10 @@ var AvatarGroupItemRoot = ({ maskId, size, variant, status, children, ...rest })
     ...rest
   }, children);
 };
-var AvatarGroupLabel = /* @__PURE__ */ (0, import_react10.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var AvatarGroupLabel = /* @__PURE__ */ (0, import_react11.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { labelId, size } = useAvatarContext("AvatarGroupLabel");
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react10.default.createElement("span", {
+  return /* @__PURE__ */ import_react11.default.createElement("span", {
     ...props,
     id: labelId,
     className: tx("avatar.groupLabel", "avatar-group__label", {
@@ -592,10 +613,10 @@ var AvatarGroupLabel = /* @__PURE__ */ (0, import_react10.forwardRef)(({ srOnly,
     }, classNames)
   }, children);
 });
-var AvatarGroupDescription = /* @__PURE__ */ (0, import_react10.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var AvatarGroupDescription = /* @__PURE__ */ (0, import_react11.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { descriptionId } = useAvatarContext("AvatarGroupDescription");
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react10.default.createElement("span", {
+  return /* @__PURE__ */ import_react11.default.createElement("span", {
     ...props,
     id: descriptionId,
     className: tx("avatar.groupDescription", "avatar-group__description", {
@@ -611,10 +632,10 @@ var AvatarGroup = {
 var AvatarGroupItem = {
   Root: AvatarGroupItemRoot
 };
-var Link = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, variant, classNames, ...props }, forwardedRef) => {
+var Link = /* @__PURE__ */ (0, import_react14.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, {
+  return /* @__PURE__ */ import_react14.default.createElement(Root5, {
     ...props,
     className: tx("link.root", "link", {
       variant
@@ -622,47 +643,47 @@ var Link = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, variant, c
     ref: forwardedRef
   });
 });
-var BreadcrumbRoot = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbRoot = /* @__PURE__ */ (0, import_react13.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, {
+  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
     role: "navigation",
     ...props,
     className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbList = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbList = /* @__PURE__ */ (0, import_react13.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, {
+  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
     role: "list",
     ...props,
     className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbListItem = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbListItem = /* @__PURE__ */ (0, import_react13.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, {
+  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
     role: "listitem",
     ...props,
     className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var BreadcrumbLink = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, ...props }, forwardedRef) => {
+var BreadcrumbLink = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, ...props }, forwardedRef) => {
   const Root5 = asChild ? import_react_slot3.Slot : Link;
-  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
     ...props,
     ref: forwardedRef
   });
 });
-var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot3.Slot : "h1";
-  return /* @__PURE__ */ import_react12.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react13.default.createElement(Root5, {
     ...props,
     "aria-current": "page",
     className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
@@ -671,12 +692,12 @@ var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChil
 });
 var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react12.default.createElement(import_react_primitive3.Primitive.span, {
+  return /* @__PURE__ */ import_react13.default.createElement(import_react_primitive3.Primitive.span, {
     role: "separator",
     "aria-hidden": "true",
     ...props,
     className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
-  }, children ?? /* @__PURE__ */ import_react12.default.createElement(import_react11.Dot, {
+  }, children ?? /* @__PURE__ */ import_react13.default.createElement(import_react12.Dot, {
     weight: "bold"
   }));
 };
@@ -693,13 +714,13 @@ var BUTTON_NAME = "Button";
 var [ButtonGroupProvider, useButtonGroupContext] = (0, import_react_context2.createContext)(BUTTON_GROUP_NAME, {
   inGroup: false
 });
-var Button = /* @__PURE__ */ (0, import_react14.memo)(/* @__PURE__ */ (0, import_react14.forwardRef)(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
+var Button = /* @__PURE__ */ (0, import_react15.memo)(/* @__PURE__ */ (0, import_react15.forwardRef)(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
   const { inGroup } = useButtonGroupContext(BUTTON_NAME);
   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, {
+  return /* @__PURE__ */ import_react15.default.createElement(Root5, {
     ref,
     ...props,
     "data-variant": variant,
@@ -718,41 +739,62 @@ var Button = /* @__PURE__ */ (0, import_react14.memo)(/* @__PURE__ */ (0, import
   }, children);
 }));
 Button.displayName = BUTTON_NAME;
-var ButtonGroup = /* @__PURE__ */ (0, import_react14.forwardRef)(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+var ButtonGroup = /* @__PURE__ */ (0, import_react15.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, {
+  return /* @__PURE__ */ import_react15.default.createElement(Root5, {
     role: "none",
     ...props,
     className: tx("button.group", "button-group", {
       elevation
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react14.default.createElement(ButtonGroupProvider, {
+  }, /* @__PURE__ */ import_react15.default.createElement(ButtonGroupProvider, {
     inGroup: true
   }, children));
 });
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
+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 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_react16.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var TooltipArrow = /* @__PURE__ */ (0, import_react17.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react16.default.createElement(import_react_tooltip.TooltipArrow, {
+  return /* @__PURE__ */ import_react17.default.createElement(import_react_tooltip.TooltipArrow, {
     ...props,
     className: tx("tooltip.arrow", "tooltip__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var TooltipContent = /* @__PURE__ */ (0, import_react16.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var TooltipContent = /* @__PURE__ */ (0, import_react17.forwardRef)(({ classNames, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react16.default.createElement(import_react_tooltip.TooltipContent, {
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ import_react17.default.createElement(import_react_tooltip.TooltipContent, {
     sideOffset: 4,
-    collisionPadding: 8,
     ...props,
-    className: tx("tooltip.content", "tooltip", {}, classNames),
+    collisionPadding: safeCollisionPadding,
+    className: tx("tooltip.content", "tooltip", {
+      elevation
+    }, classNames),
     ref: forwardedRef
   });
 });
@@ -764,66 +806,83 @@ var Tooltip = {
   Arrow: TooltipArrow,
   Content: TooltipContent
 };
-var IconOnlyButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ tooltipPortal = true, tooltipZIndex: zIndex, ...props }, forwardedRef) => {
-  const content = /* @__PURE__ */ import_react15.default.createElement(Tooltip.Content, zIndex && {
-    style: {
-      zIndex
+var IconOnlyButton = /* @__PURE__ */ (0, import_react16.forwardRef)(({ tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react16.useState)(false);
+  const content = /* @__PURE__ */ import_react16.default.createElement(Tooltip.Content, {
+    ...zIndex && {
+      style: {
+        zIndex
+      }
+    },
+    side: tooltipSide
+  }, props.label, /* @__PURE__ */ import_react16.default.createElement(Tooltip.Arrow, null));
+  return /* @__PURE__ */ import_react16.default.createElement(Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip?.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
     }
-  }, props.label, /* @__PURE__ */ import_react15.default.createElement(Tooltip.Arrow, null));
-  return /* @__PURE__ */ import_react15.default.createElement(Tooltip.Root, null, /* @__PURE__ */ import_react15.default.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ import_react16.default.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
+  }, /* @__PURE__ */ import_react16.default.createElement(LabelledIconButton, {
     ...props,
     ref: forwardedRef
-  })), tooltipPortal ? /* @__PURE__ */ import_react15.default.createElement(Tooltip.Portal, null, content) : content);
+  })), tooltipPortal ? /* @__PURE__ */ import_react16.default.createElement(Tooltip.Portal, null, content) : content);
 });
-var LabelledIconButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ icon, size, iconOnly, label, classNames, iconClassNames, ...props }, forwardedRef) => {
+var LabelledIconButton = /* @__PURE__ */ (0, import_react16.forwardRef)(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react15.default.createElement(Button, {
+  return /* @__PURE__ */ import_react16.default.createElement(Button, {
     ...props,
     classNames: tx("iconButton.root", "iconButton", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react15.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react16.default.createElement(Icon, {
     icon,
     size,
     classNames: iconClassNames
-  }), /* @__PURE__ */ import_react15.default.createElement("span", {
+  }), /* @__PURE__ */ import_react16.default.createElement("span", {
     className: iconOnly ? "sr-only" : void 0
-  }, label));
+  }, label), caretDown && /* @__PURE__ */ import_react16.default.createElement(Icon, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }));
 });
-var IconButton = /* @__PURE__ */ (0, import_react15.forwardRef)((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ import_react15.default.createElement(IconOnlyButton, {
+var IconButton = /* @__PURE__ */ (0, import_react16.forwardRef)((props, forwardedRef) => props.iconOnly ? /* @__PURE__ */ import_react16.default.createElement(IconOnlyButton, {
   ...props,
   ref: forwardedRef
-}) : /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
+}) : /* @__PURE__ */ import_react16.default.createElement(LabelledIconButton, {
   ...props,
   ref: forwardedRef
 }));
-var Toggle = /* @__PURE__ */ (0, import_react17.forwardRef)(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_toggle.Toggle, {
+var Toggle = /* @__PURE__ */ (0, import_react19.forwardRef)(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react19.default.createElement(import_react_toggle.Toggle, {
     defaultPressed,
     pressed,
     onPressedChange,
     asChild: true
-  }, /* @__PURE__ */ import_react17.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react19.default.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToggleGroup = /* @__PURE__ */ (0, import_react18.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react18.default.createElement(import_react_toggle_group.ToggleGroup, {
+var ToggleGroup = /* @__PURE__ */ (0, import_react20.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react20.default.createElement(import_react_toggle_group.ToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ import_react18.default.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ import_react20.default.createElement(ButtonGroup, {
     classNames,
     children,
     ref: forwardedRef
   }));
 });
-var ToggleGroupItem = /* @__PURE__ */ (0, import_react18.forwardRef)(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react18.default.createElement(import_react_toggle_group.ToggleGroupItem, {
+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, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ import_react18.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react20.default.createElement(Button, {
     variant,
     elevation,
     density,
@@ -832,19 +891,19 @@ var ToggleGroupItem = /* @__PURE__ */ (0, import_react18.forwardRef)(({ variant,
     ref: forwardedRef
   }));
 });
-var ClipboardContext = /* @__PURE__ */ (0, import_react19.createContext)({
+var ClipboardContext = /* @__PURE__ */ (0, import_react21.createContext)({
   textValue: "",
   setTextValue: async (_) => {
   }
 });
-var useClipboard = () => (0, import_react19.useContext)(ClipboardContext);
+var useClipboard = () => (0, import_react21.useContext)(ClipboardContext);
 var ClipboardProvider = ({ children }) => {
-  const [textValue, setInternalTextValue] = (0, import_react19.useState)("");
-  const setTextValue = (0, import_react19.useCallback)(async (nextValue) => {
+  const [textValue, setInternalTextValue] = (0, import_react21.useState)("");
+  const setTextValue = (0, import_react21.useCallback)(async (nextValue) => {
     await navigator.clipboard.writeText(nextValue);
     return setInternalTextValue(nextValue);
   }, []);
-  return /* @__PURE__ */ import_react19.default.createElement(ClipboardContext.Provider, {
+  return /* @__PURE__ */ import_react21.default.createElement(ClipboardContext.Provider, {
     value: {
       textValue,
       setTextValue
@@ -854,45 +913,53 @@ var ClipboardProvider = ({ children }) => {
 var hasIosKeyboard = () => {
   return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
 };
-var DensityContext = /* @__PURE__ */ (0, import_react22.createContext)({
+var DensityContext = /* @__PURE__ */ (0, import_react24.createContext)({
   density: "fine"
 });
-var DensityProvider = ({ density, children }) => /* @__PURE__ */ import_react22.default.createElement(DensityContext.Provider, {
+var DensityProvider = ({ density, children }) => /* @__PURE__ */ import_react24.default.createElement(DensityContext.Provider, {
   value: {
     density
   }
 }, children);
-var ElevationContext = /* @__PURE__ */ (0, import_react23.createContext)({
+var ElevationContext = /* @__PURE__ */ (0, import_react25.createContext)({
   elevation: "base"
 });
-var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ import_react23.default.createElement(ElevationContext.Provider, {
+var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ import_react25.default.createElement(ElevationContext.Provider, {
   value: {
     elevation
   }
 }, children);
-var ThemeContext = /* @__PURE__ */ (0, import_react21.createContext)(void 0);
-var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", rootElevation = "base", ...rest }) => {
-  (0, import_react21.useEffect)(() => {
+var ThemeContext = /* @__PURE__ */ (0, import_react23.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)(() => {
     if (document.defaultView) {
       const kb = (0, import_keyborg.createKeyborg)(document.defaultView);
       kb.subscribe(handleInputModalityChange);
       return () => kb.unsubscribe(handleInputModalityChange);
     }
   }, []);
-  return /* @__PURE__ */ import_react21.default.createElement(ThemeContext.Provider, {
-    value: {
-      tx,
-      themeMode,
-      hasIosKeyboard: hasIosKeyboard(),
-      ...rest
-    }
-  }, /* @__PURE__ */ import_react21.default.createElement(TranslationsProvider, {
+  const safeAreaPadding = useSafeArea();
+  const contextValue = (0, import_react23.useMemo)(() => ({
+    tx,
+    themeMode,
+    hasIosKeyboard: hasIosKeyboard(),
+    safeAreaPadding,
+    ...rest
+  }), [
+    tx,
+    themeMode,
+    safeAreaPadding,
+    rest
+  ]);
+  return /* @__PURE__ */ import_react23.default.createElement(ThemeContext.Provider, {
+    value: contextValue
+  }, /* @__PURE__ */ import_react23.default.createElement(TranslationsProvider, {
     fallback,
     resourceExtensions,
     appNs
-  }, /* @__PURE__ */ import_react21.default.createElement(ElevationProvider, {
-    elevation: rootElevation
-  }, /* @__PURE__ */ import_react21.default.createElement(DensityProvider, {
+  }, /* @__PURE__ */ import_react23.default.createElement(ElevationProvider, {
+    elevation: "base"
+  }, /* @__PURE__ */ import_react23.default.createElement(DensityProvider, {
     density: rootDensity
   }, children))));
 };
@@ -908,7 +975,7 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
   const { t } = useTranslation("os");
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  return /* @__PURE__ */ import_react20.default.createElement(Button, {
+  return /* @__PURE__ */ import_react22.default.createElement(Button, {
     ...props,
     classNames: [
       "inline-flex flex-col justify-center",
@@ -916,21 +983,21 @@ var CopyButton = ({ value, classNames, iconProps, ...props }) => {
     ],
     onClick: () => setTextValue(value),
     "data-testid": "copy-invitation"
-  }, /* @__PURE__ */ import_react20.default.createElement("div", {
+  }, /* @__PURE__ */ import_react22.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme.mx)("flex gap-1 items-center", isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ import_react20.default.createElement("span", {
+  }, /* @__PURE__ */ import_react22.default.createElement("span", {
     className: "pli-1"
-  }, t("copy label")), /* @__PURE__ */ import_react20.default.createElement(Icon, {
+  }, t("copy label")), /* @__PURE__ */ import_react22.default.createElement(Icon, {
     icon: "ph--copy--regular",
     size: 5,
     ...iconProps
-  })), /* @__PURE__ */ import_react20.default.createElement("div", {
+  })), /* @__PURE__ */ import_react22.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme.mx)("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
-  }, /* @__PURE__ */ import_react20.default.createElement("span", {
+  }, /* @__PURE__ */ import_react22.default.createElement("span", {
     className: "pli-1"
-  }, t("copy success label")), /* @__PURE__ */ import_react20.default.createElement(Icon, {
+  }, t("copy success label")), /* @__PURE__ */ import_react22.default.createElement(Icon, {
     icon: "ph--check--regular",
     size: 5,
     ...iconProps
@@ -941,28 +1008,27 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t("copy success label") : t("copy label");
-  const [open, setOpen] = (0, import_react20.useState)(false);
-  return /* @__PURE__ */ import_react20.default.createElement(Tooltip.Root, {
+  const [open, setOpen] = (0, import_react22.useState)(false);
+  return /* @__PURE__ */ import_react22.default.createElement(Tooltip.Root, {
     delayDuration: 1500,
     open,
     onOpenChange: setOpen
-  }, /* @__PURE__ */ import_react20.default.createElement(Tooltip.Portal, null, /* @__PURE__ */ import_react20.default.createElement(Tooltip.Content, {
+  }, /* @__PURE__ */ import_react22.default.createElement(Tooltip.Portal, null, /* @__PURE__ */ import_react22.default.createElement(Tooltip.Content, {
     side: "bottom",
-    sideOffset: 12,
-    classNames: "z-30"
-  }, /* @__PURE__ */ import_react20.default.createElement("span", null, label), /* @__PURE__ */ import_react20.default.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ import_react20.default.createElement(Tooltip.Trigger, {
+    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_react20.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react22.default.createElement(Button, {
     variant,
     classNames: [
       "inline-flex flex-col justify-center",
       classNames
     ]
-  }, /* @__PURE__ */ import_react20.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react22.default.createElement(Icon, {
     icon: "ph--copy--regular",
     size: 5,
     ...iconProps
@@ -973,12 +1039,14 @@ var Clipboard = {
   IconButton: CopyButtonIconOnly,
   Provider: ClipboardProvider
 };
-var DialogRoot = import_react_dialog.Root;
+var DialogRoot = (props) => /* @__PURE__ */ import_react26.default.createElement(ElevationProvider, {
+  elevation: "dialog"
+}, /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.Root, props));
 var DialogTrigger = import_react_dialog.DialogTrigger;
 var DialogPortal = import_react_dialog.DialogPortal;
-var DialogTitle = /* @__PURE__ */ (0, import_react24.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogTitle = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react24.default.createElement(import_react_dialog.DialogTitle, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogTitle, {
     ...props,
     className: tx("dialog.title", "dialog__title", {
       srOnly
@@ -986,9 +1054,9 @@ var DialogTitle = /* @__PURE__ */ (0, import_react24.forwardRef)(({ classNames,
     ref: forwardedRef
   });
 });
-var DialogDescription = /* @__PURE__ */ (0, import_react24.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
+var DialogDescription = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react24.default.createElement(import_react_dialog.DialogDescription, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogDescription, {
     ...props,
     className: tx("dialog.description", "dialog__description", {
       srOnly
@@ -1002,30 +1070,28 @@ var DIALOG_CONTENT_NAME = "DialogContent";
 var [OverlayLayoutProvider, useOverlayLayoutContext] = (0, import_react_context3.createContext)(DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var DialogOverlay = /* @__PURE__ */ (0, import_react24.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var DialogOverlay = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react24.default.createElement(import_react_dialog.DialogOverlay, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogOverlay, {
     ...props,
-    className: tx("dialog.overlay", "dialog__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
+    className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
     ref: forwardedRef,
     "data-block-align": blockAlign
-  }, /* @__PURE__ */ import_react24.default.createElement(OverlayLayoutProvider, {
+  }, /* @__PURE__ */ import_react26.default.createElement(OverlayLayoutProvider, {
     inOverlayLayout: true
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ (0, import_react24.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ import_react24.default.createElement(import_react_dialog.DialogContent, {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_dialog.DialogContent, {
     ...props,
     className: tx("dialog.content", "dialog", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react24.default.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
+  }, children);
 });
 DialogContent.displayName = DIALOG_CONTENT_NAME;
 var Dialog = {
@@ -1038,14 +1104,16 @@ var Dialog = {
   Description: DialogDescription,
   Close: DialogClose
 };
-var AlertDialogRoot = import_react_alert_dialog.Root;
+var AlertDialogRoot = (props) => /* @__PURE__ */ import_react27.default.createElement(ElevationProvider, {
+  elevation: "dialog"
+}, /* @__PURE__ */ import_react27.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_react25.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogTitle = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react25.default.createElement(import_react_alert_dialog.AlertDialogTitle, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_alert_dialog.AlertDialogTitle, {
     ...props,
     className: tx("dialog.title", "dialog--alert__title", {
       srOnly
@@ -1053,9 +1121,9 @@ var AlertDialogTitle = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNa
     ref: forwardedRef
   });
 });
-var AlertDialogDescription = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
+var AlertDialogDescription = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react25.default.createElement(import_react_alert_dialog.AlertDialogDescription, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_alert_dialog.AlertDialogDescription, {
     ...props,
     className: tx("dialog.description", "dialog--alert__description", {
       srOnly
@@ -1068,30 +1136,28 @@ var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
 var [OverlayLayoutProvider2, useOverlayLayoutContext2] = (0, import_react_context4.createContext)(ALERT_DIALOG_OVERLAY_NAME, {
   inOverlayLayout: false
 });
-var AlertDialogOverlay = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+var AlertDialogOverlay = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react25.default.createElement(import_react_alert_dialog.AlertDialogOverlay, {
+  return /* @__PURE__ */ import_react27.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_react25.default.createElement(OverlayLayoutProvider2, {
+  }, /* @__PURE__ */ import_react27.default.createElement(OverlayLayoutProvider2, {
     inOverlayLayout: true
   }, children));
 });
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
-var AlertDialogContent = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var AlertDialogContent = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
-  return /* @__PURE__ */ import_react25.default.createElement(import_react_alert_dialog.AlertDialogContent, {
+  return /* @__PURE__ */ import_react27.default.createElement(import_react_alert_dialog.AlertDialogContent, {
     ...props,
     className: tx("dialog.content", "dialog--alert", {
       inOverlayLayout
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react25.default.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
+  }, children);
 });
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
 var AlertDialog = {
@@ -1108,29 +1174,31 @@ var AlertDialog = {
 var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
-var ContextMenuContent = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var ContextMenuContent = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react26.default.createElement(ContextMenuPrimitive.Content, {
-    collisionPadding: 8,
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Content, {
     ...props,
-    className: tx("menu.content", "menu", {}, classNames),
+    collisionPadding: safeCollisionPadding,
+    className: tx("menu.content", "menu", {
+      elevation
+    }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react26.default.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, children));
+  }, children);
 });
-var ContextMenuViewport = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var ContextMenuViewport = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot6.Slot : import_react_primitive6.Primitive.div;
-  return /* @__PURE__ */ import_react26.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react28.default.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ContextMenuArrow = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuArrow = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react26.default.createElement(ContextMenuPrimitive.Arrow, {
+  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Arrow, {
     ...props,
     className: tx("menu.arrow", "menu__arrow", {}, classNames),
     ref: forwardedRef
@@ -1138,33 +1206,33 @@ var ContextMenuArrow = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNa
 });
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
-var ContextMenuItem = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuItem = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react26.default.createElement(ContextMenuPrimitive.Item, {
+  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Item, {
     ...props,
     className: tx("menu.item", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuCheckboxItem = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuCheckboxItem = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react26.default.createElement(ContextMenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.CheckboxItem, {
     ...props,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuSeparator = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuSeparator = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react26.default.createElement(ContextMenuPrimitive.Separator, {
+  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Separator, {
     ...props,
     className: tx("menu.separator", "menu__item", {}, classNames),
     ref: forwardedRef
   });
 });
-var ContextMenuGroupLabel = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ContextMenuGroupLabel = /* @__PURE__ */ (0, import_react28.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react26.default.createElement(ContextMenuPrimitive.Label, {
+  return /* @__PURE__ */ import_react28.default.createElement(ContextMenuPrimitive.Label, {
     ...props,
     className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
     ref: forwardedRef
@@ -1193,24 +1261,24 @@ var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(D
 var DropdownMenuRoot = (props) => {
   const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  const triggerRef = (0, import_react27.useRef)(null);
+  const triggerRef = (0, import_react29.useRef)(null);
   const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ import_react27.default.createElement(DropdownMenuProvider, {
+  return /* @__PURE__ */ import_react29.default.createElement(DropdownMenuProvider, {
     scope: __scopeDropdownMenu,
     triggerId: (0, import_react_id.useId)(),
     triggerRef,
     contentId: (0, import_react_id.useId)(),
     open,
     onOpenChange: setOpen,
-    onOpenToggle: (0, import_react27.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: (0, import_react29.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     modal
-  }, /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Root, {
+  }, /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Root, {
     ...menuScope,
     open,
     onOpenChange: setOpen,
@@ -1220,14 +1288,14 @@ var DropdownMenuRoot = (props) => {
 };
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 var TRIGGER_NAME = "DropdownMenuTrigger";
-var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
   const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Anchor, {
     asChild: true,
     ...menuScope
-  }, /* @__PURE__ */ import_react27.default.createElement(import_react_primitive7.Primitive.button, {
+  }, /* @__PURE__ */ import_react29.default.createElement(import_react_primitive7.Primitive.button, {
     type: "button",
     id: context.triggerId,
     "aria-haspopup": "menu",
@@ -1275,12 +1343,12 @@ var DropdownMenuVirtualTrigger = (props) => {
   const { __scopeDropdownMenu, virtualRef } = props;
   const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (virtualRef.current) {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Anchor, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Anchor, {
     ...menuScope,
     virtualRef
   });
@@ -1290,33 +1358,36 @@ var PORTAL_NAME = "DropdownMenuPortal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Portal, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Portal, {
     ...menuScope,
     ...portalProps
   });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME;
-var DropdownMenuViewport = /* @__PURE__ */ (0, import_react27.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var DropdownMenuViewport = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot7.Slot : import_react_primitive7.Primitive.div;
-  return /* @__PURE__ */ import_react27.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react29.default.createElement(Root5, {
     ...props,
     className: tx("menu.viewport", "menu__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
 var CONTENT_NAME = "DropdownMenuContent";
-var DropdownMenuContent = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
-  const { __scopeDropdownMenu, classNames, ...contentProps } = props;
+var DropdownMenuContent = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
+  const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
   const { tx } = useThemeContext();
   const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+  const elevation = useElevationContext();
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  const hasInteractedOutsideRef = (0, import_react27.useRef)(false);
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Content, {
+  const hasInteractedOutsideRef = (0, import_react29.useRef)(false);
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Content, {
     id: context.contentId,
     "aria-labelledby": context.triggerId,
     ...menuScope,
     ...contentProps,
+    collisionPadding: safeCollisionPadding,
     ref: forwardedRef,
     onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
       if (!hasInteractedOutsideRef.current) {
@@ -1333,7 +1404,9 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react27.forwardRef)((props,
         hasInteractedOutsideRef.current = true;
       }
     }),
-    className: tx("menu.content", "menu", {}, classNames),
+    className: tx("menu.content", "menu", {
+      elevation
+    }, classNames),
     style: {
       ...props.style,
       // re-namespace exposed content custom properties
@@ -1349,10 +1422,10 @@ var DropdownMenuContent = /* @__PURE__ */ (0, import_react27.forwardRef)((props,
 });
 DropdownMenuContent.displayName = CONTENT_NAME;
 var GROUP_NAME = "DropdownMenuGroup";
-var DropdownMenuGroup = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuGroup = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...groupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Group, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Group, {
     ...menuScope,
     ...groupProps,
     ref: forwardedRef
@@ -1360,11 +1433,11 @@ var DropdownMenuGroup = /* @__PURE__ */ (0, import_react27.forwardRef)((props, f
 });
 DropdownMenuGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "DropdownMenuLabel";
-var DropdownMenuGroupLabel = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuGroupLabel = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...labelProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Label, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Label, {
     ...menuScope,
     ...labelProps,
     className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
@@ -1373,11 +1446,11 @@ var DropdownMenuGroupLabel = /* @__PURE__ */ (0, import_react27.forwardRef)((pro
 });
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "DropdownMenuItem";
-var DropdownMenuItem = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuItem = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...itemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Item, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Item, {
     ...menuScope,
     ...itemProps,
     className: tx("menu.item", "menu__item", {}, classNames),
@@ -1386,11 +1459,11 @@ var DropdownMenuItem = /* @__PURE__ */ (0, import_react27.forwardRef)((props, fo
 });
 DropdownMenuItem.displayName = ITEM_NAME;
 var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
-var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.CheckboxItem, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.CheckboxItem, {
     ...menuScope,
     ...checkboxItemProps,
     className: tx("menu.item", "menu__item--checkbox", {}, classNames),
@@ -1399,10 +1472,10 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react27.forwardRef)((p
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
-var DropdownMenuRadioGroup = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuRadioGroup = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.RadioGroup, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.RadioGroup, {
     ...menuScope,
     ...radioGroupProps,
     ref: forwardedRef
@@ -1410,10 +1483,10 @@ var DropdownMenuRadioGroup = /* @__PURE__ */ (0, import_react27.forwardRef)((pro
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
-var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.RadioItem, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.RadioItem, {
     ...menuScope,
     ...radioItemProps,
     ref: forwardedRef
@@ -1421,10 +1494,10 @@ var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react27.forwardRef)((prop
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 var INDICATOR_NAME = "DropdownMenuItemIndicator";
-var DropdownMenuItemIndicator = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuItemIndicator = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.ItemIndicator, {
     ...menuScope,
     ...itemIndicatorProps,
     ref: forwardedRef
@@ -1432,11 +1505,11 @@ var DropdownMenuItemIndicator = /* @__PURE__ */ (0, import_react27.forwardRef)((
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME = "DropdownMenuSeparator";
-var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Separator, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Separator, {
     ...menuScope,
     ...separatorProps,
     className: tx("menu.separator", "menu__item", {}, classNames),
@@ -1445,11 +1518,11 @@ var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react27.forwardRef)((prop
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME = "DropdownMenuArrow";
-var DropdownMenuArrow = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuArrow = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Arrow, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Arrow, {
     ...menuScope,
     ...arrowProps,
     className: tx("menu.arrow", "menu__arrow", {}, classNames),
@@ -1465,17 +1538,17 @@ var DropdownMenuSub = (props) => {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.Sub, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.Sub, {
     ...menuScope,
     open,
     onOpenChange: setOpen
   }, children);
 };
 var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
-var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.SubTrigger, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.SubTrigger, {
     ...menuScope,
     ...subTriggerProps,
     ref: forwardedRef
@@ -1483,10 +1556,10 @@ var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react27.forwardRef)((pro
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 var SUB_CONTENT_NAME = "DropdownMenuSubContent";
-var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react27.forwardRef)((props, forwardedRef) => {
+var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react29.forwardRef)((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ import_react27.default.createElement(MenuPrimitive.SubContent, {
+  return /* @__PURE__ */ import_react29.default.createElement(MenuPrimitive.SubContent, {
     ...menuScope,
     ...subContentProps,
     ref: forwardedRef,
@@ -1525,9 +1598,9 @@ var DropdownMenu = {
   SubContent: DropdownMenuSubContent
 };
 var useDropdownMenuMenuScope = useMenuScope;
-var Label3 = /* @__PURE__ */ (0, import_react29.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Label3 = /* @__PURE__ */ (0, import_react30.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react29.default.createElement(import_react_input.Label, {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.Label, {
     ...props,
     className: tx("input.label", "input__label", {
       srOnly
@@ -1535,9 +1608,9 @@ var Label3 = /* @__PURE__ */ (0, import_react29.forwardRef)(({ srOnly, className
     ref: forwardedRef
   }, children);
 });
-var Description = /* @__PURE__ */ (0, import_react29.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var Description = /* @__PURE__ */ (0, import_react30.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react29.default.createElement(import_react_input.Description, {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.Description, {
     ...props,
     className: tx("input.description", "input__description", {
       srOnly
@@ -1545,10 +1618,10 @@ var Description = /* @__PURE__ */ (0, import_react29.forwardRef)(({ srOnly, clas
     ref: forwardedRef
   }, children);
 });
-var Validation = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+var Validation = /* @__PURE__ */ (0, import_react30.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_react29.default.createElement(import_react_input.Validation, {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.Validation, {
     ...props,
     className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
       srOnly,
@@ -1557,9 +1630,9 @@ var Validation = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope,
     ref: forwardedRef
   }, children);
 });
-var DescriptionAndValidation = /* @__PURE__ */ (0, import_react29.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+var DescriptionAndValidation = /* @__PURE__ */ (0, import_react30.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react29.default.createElement(import_react_input.DescriptionAndValidation, {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.DescriptionAndValidation, {
     ...props,
     className: tx("input.descriptionAndValidation", "input__description-and-validation", {
       srOnly
@@ -1567,12 +1640,12 @@ var DescriptionAndValidation = /* @__PURE__ */ (0, import_react29.forwardRef)(({
     ref: forwardedRef
   }, children);
 });
-var PinInput = /* @__PURE__ */ (0, import_react29.forwardRef)(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
+var PinInput = /* @__PURE__ */ (0, import_react30.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_react29.useCallback)(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
+  const segmentClassName = (0, import_react30.useCallback)(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
     variant: "static",
     focused,
     disabled: props.disabled,
@@ -1586,7 +1659,7 @@ var PinInput = /* @__PURE__ */ (0, import_react29.forwardRef)(({ density: propsD
     propsElevation,
     density
   ]);
-  return /* @__PURE__ */ import_react29.default.createElement(import_react_input.PinInput, {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.PinInput, {
     ...props,
     segmentClassName,
     ...props.autoFocus && !hasIosKeyboard2 && {
@@ -1598,14 +1671,14 @@ var PinInput = /* @__PURE__ */ (0, import_react29.forwardRef)(({ density: propsD
     ref: forwardedRef
   });
 });
-var TextInput = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextInput = /* @__PURE__ */ (0, import_react30.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_react29.default.createElement(import_react_input.TextInput, {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.TextInput, {
     ...props,
     className: tx("input.input", "input", {
       variant,
@@ -1620,13 +1693,13 @@ var TextInput = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope,
     ref: forwardedRef
   });
 });
-var TextArea = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var TextArea = /* @__PURE__ */ (0, import_react30.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_react29.default.createElement(import_react_input.TextArea, {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_input.TextArea, {
     ...props,
     className: tx("input.input", "input--text-area", {
       variant,
@@ -1641,7 +1714,7 @@ var TextArea = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope, c
     ref: forwardedRef
   });
 });
-var Checkbox = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
+var Checkbox = /* @__PURE__ */ (0, import_react30.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,
@@ -1649,8 +1722,7 @@ var Checkbox = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope, c
   });
   const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
   const { tx } = useThemeContext();
-  const Icon3 = checked === "indeterminate" ? import_react28.Minus : checked ? import_react28.Check : import_react29.Fragment;
-  return /* @__PURE__ */ import_react29.default.createElement(import_react_checkbox.Root, {
+  return /* @__PURE__ */ import_react30.default.createElement(import_react_checkbox.Root, {
     ...props,
     checked,
     onCheckedChange,
@@ -1664,42 +1736,37 @@ var Checkbox = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope, c
       size
     }, "shrink-0", classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react29.default.createElement(import_react_checkbox.Indicator, {
-    asChild: true
-  }, /* @__PURE__ */ import_react29.default.createElement(Icon3, checked && {
-    weight,
-    className: tx("input.checkboxIndicator", "input--checkbox__indicator", {
-      size
+  }, /* @__PURE__ */ import_react30.default.createElement(Icon, {
+    icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
+    classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
+      size,
+      checked
     })
-  })));
+  }));
 });
-var Switch = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size = 5, classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
+var Switch = /* @__PURE__ */ (0, import_react30.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,
+    defaultProp: propsDefaultChecked ?? false,
     onChange: propsOnCheckedChange
   });
   const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
-  return /* @__PURE__ */ import_react29.default.createElement(import_react_switch.Root, {
-    ...props,
+  return /* @__PURE__ */ import_react30.default.createElement("input", {
+    type: "checkbox",
+    className: "dx-checkbox--switch dx-focus-ring",
     checked,
-    onCheckedChange,
+    onChange: (event) => {
+      onCheckedChange(event.target.checked);
+    },
     id,
     "aria-describedby": descriptionId,
+    ...props,
     ...validationValence === "error" && {
       "aria-invalid": "true",
       "aria-errormessage": errorMessageId
     },
-    className: tx("input.switch", "input--switch", {
-      size
-    }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react29.default.createElement(import_react_switch.Thumb, {
-    className: tx("input.switchThumb", "input--switch__thumb", {
-      size
-    })
-  }));
+  });
 });
 var Input = {
   Root: import_react_input.InputRoot,
@@ -1713,22 +1780,57 @@ var Input = {
   Validation,
   DescriptionAndValidation
 };
-var List = /* @__PURE__ */ (0, import_react31.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var edgeToOrientationMap = {
+  top: "horizontal",
+  bottom: "horizontal",
+  left: "vertical",
+  right: "vertical"
+};
+var orientationStyles = {
+  horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
+  vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
+};
+var edgeStyles = {
+  top: "top-[--line-offset] before:top-[--offset-terminal]",
+  right: "right-[--line-offset] before:right-[--offset-terminal]",
+  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
+  left: "left-[--line-offset] before:left-[--offset-terminal]"
+};
+var strokeSize = 2;
+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_react33.default.createElement("div", {
+    role: "none",
+    style: {
+      "--line-thickness": `${strokeSize}px`,
+      "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+      "--line-inset": `${lineInset}px`,
+      "--terminal-size": `${terminalSize}px`,
+      "--terminal-radius": `${terminalSize / 2}px`,
+      "--terminal-inset": `${terminalInset}px`,
+      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
+    },
+    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_react32.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
-  return /* @__PURE__ */ import_react31.default.createElement(DensityProvider, {
+  return /* @__PURE__ */ import_react32.default.createElement(DensityProvider, {
     density
-  }, /* @__PURE__ */ import_react31.default.createElement(import_react_list.List, {
+  }, /* @__PURE__ */ import_react32.default.createElement(import_react_list.List, {
     ...props,
     className: tx("list.root", "list", {}, classNames),
     ref: forwardedRef
   }, children));
 });
-var ListItemEndcap = /* @__PURE__ */ (0, import_react31.forwardRef)(({ children, classNames, asChild, ...props }, forwardedRef) => {
+var ListItemEndcap = /* @__PURE__ */ (0, import_react32.forwardRef)(({ children, classNames, asChild, ...props }, forwardedRef) => {
   const Root5 = asChild ? import_react_slot8.Slot : "div";
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react31.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react32.default.createElement(Root5, {
     ...!asChild && {
       role: "none"
     },
@@ -1742,7 +1844,7 @@ var ListItemEndcap = /* @__PURE__ */ (0, import_react31.forwardRef)(({ children,
 var MockListItemOpenTrigger = ({ classNames, ...props }) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react31.default.createElement("div", {
+  return /* @__PURE__ */ import_react32.default.createElement("div", {
     role: "none",
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
@@ -1750,10 +1852,10 @@ var MockListItemOpenTrigger = ({ classNames, ...props }) => {
     }, classNames)
   });
 };
-var ListItemHeading = /* @__PURE__ */ (0, import_react31.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
+var ListItemHeading = /* @__PURE__ */ (0, import_react32.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ import_react31.default.createElement(import_react_list.ListItemHeading, {
+  return /* @__PURE__ */ import_react32.default.createElement(import_react_list.ListItemHeading, {
     ...props,
     className: tx("list.item.heading", "list__listItem__heading", {
       density
@@ -1761,26 +1863,26 @@ var ListItemHeading = /* @__PURE__ */ (0, import_react31.forwardRef)(({ children
     ref: forwardedRef
   }, children);
 });
-var ListItemOpenTrigger = /* @__PURE__ */ (0, import_react31.forwardRef)(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+var ListItemOpenTrigger = /* @__PURE__ */ (0, import_react32.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_react30.CaretDown : import_react30.CaretRight;
-  return /* @__PURE__ */ import_react31.default.createElement(import_react_list.ListItemOpenTrigger, {
+  const Icon3 = open ? import_react31.CaretDown : import_react31.CaretRight;
+  return /* @__PURE__ */ import_react32.default.createElement(import_react_list.ListItemOpenTrigger, {
     ...props,
     className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
       density
     }, classNames),
     ref: forwardedRef
-  }, children || /* @__PURE__ */ import_react31.default.createElement(Icon3, {
+  }, children || /* @__PURE__ */ import_react32.default.createElement(Icon3, {
     weight: "bold",
     className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
   }));
 });
-var ListItemRoot = /* @__PURE__ */ (0, import_react31.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var ListItemRoot = /* @__PURE__ */ (0, import_react32.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext();
-  return /* @__PURE__ */ import_react31.default.createElement(import_react_list.ListItem, {
+  return /* @__PURE__ */ import_react32.default.createElement(import_react_list.ListItem, {
     ...props,
     className: tx("list.item.root", "list__listItem", {
       density,
@@ -1795,24 +1897,67 @@ var ListItem = {
   Heading: ListItemHeading,
   OpenTrigger: ListItemOpenTrigger,
   CollapsibleContent: import_react_list.ListItemCollapsibleContent,
-  MockOpenTrigger: MockListItemOpenTrigger
+  MockOpenTrigger: MockListItemOpenTrigger,
+  DropIndicator: ListDropIndicator
+};
+var edgeToOrientationMap2 = {
+  "reorder-above": "sibling",
+  "reorder-below": "sibling",
+  "make-child": "child",
+  reparent: "child"
+};
+var orientationStyles2 = {
+  // TODO(wittjosiah): Stop using left/right here.
+  sibling: "bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]",
+  child: "is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible"
+};
+var instructionStyles = {
+  "reorder-above": "block-start-[--line-offset] before:block-start-[--offset-terminal]",
+  "reorder-below": "block-end-[--line-offset] before:block-end-[--offset-terminal]",
+  "make-child": "border-accentSurface",
+  // TODO(wittjosiah): This is not occurring in the current implementation.
+  reparent: ""
+};
+var strokeSize2 = 2;
+var terminalSize2 = 8;
+var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
+var TreeDropIndicator = ({ instruction, gap = 0 }) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
+  const isBlocked = instruction.type === "instruction-blocked";
+  const desiredInstruction = isBlocked ? instruction.desired : instruction;
+  const orientation = edgeToOrientationMap2[desiredInstruction.type];
+  if (isBlocked) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react35.default.createElement("div", {
+    style: {
+      "--line-thickness": `${strokeSize2}px`,
+      "--line-offset": `${lineOffset}`,
+      "--terminal-size": `${terminalSize2}px`,
+      "--terminal-radius": `${terminalSize2 / 2}px`,
+      "--negative-terminal-size": `-${terminalSize2}px`,
+      "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
+      "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
+    },
+    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_react34.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react34.default.createElement(List, {
     ...props,
     ref: forwardedRef
   });
 });
-var TreeBranch = /* @__PURE__ */ (0, import_react32.forwardRef)(({ __listScope, ...props }, forwardedRef) => {
+var TreeBranch = /* @__PURE__ */ (0, import_react34.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_react34.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_react34.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react34.default.createElement(ListItem.Root, {
     role: "treeitem",
     ...props,
     ref: forwardedRef
@@ -1831,14 +1976,15 @@ var TreeItem = {
   Heading: TreeItemHeading,
   Body: TreeItemBody,
   OpenTrigger: TreeItemOpenTrigger,
-  MockOpenTrigger: MockTreeItemOpenTrigger
+  MockOpenTrigger: MockTreeItemOpenTrigger,
+  DropIndicator: TreeDropIndicator
 };
 var TREEGRID_ROW_NAME = "TreegridRow";
 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_react33.forwardRef)(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+var TreegridRoot = /* @__PURE__ */ (0, import_react36.forwardRef)(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
   const arrowNavigationAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
@@ -1846,7 +1992,7 @@ var TreegridRoot = /* @__PURE__ */ (0, import_react33.forwardRef)(({ asChild, cl
     tabbable: false,
     circular: true
   });
-  return /* @__PURE__ */ import_react33.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react36.default.createElement(Root5, {
     role: "treegrid",
     ...arrowNavigationAttrs,
     ...props,
@@ -1858,7 +2004,7 @@ var TreegridRoot = /* @__PURE__ */ (0, import_react33.forwardRef)(({ asChild, cl
     ref: forwardedRef
   }, children);
 });
-var TreegridRow = /* @__PURE__ */ (0, import_react33.forwardRef)(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+var TreegridRow = /* @__PURE__ */ (0, import_react36.forwardRef)(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot9.Slot : import_react_primitive8.Primitive.div;
   const pathParts = id.split(PATH_SEPARATOR);
@@ -1877,11 +2023,11 @@ var TreegridRow = /* @__PURE__ */ (0, import_react33.forwardRef)(({ __treegridRo
     circular: false,
     memorizeCurrent: false
   });
-  return /* @__PURE__ */ import_react33.default.createElement(TreegridRowProvider, {
+  return /* @__PURE__ */ import_react36.default.createElement(TreegridRowProvider, {
     open,
     onOpenChange,
     scope: __treegridRowScope
-  }, /* @__PURE__ */ import_react33.default.createElement(Root5, {
+  }, /* @__PURE__ */ import_react36.default.createElement(Root5, {
     role: "row",
     "aria-level": level,
     className: tx("treegrid.row", "treegrid__row", {
@@ -1896,15 +2042,15 @@ var TreegridRow = /* @__PURE__ */ (0, import_react33.forwardRef)(({ __treegridRo
     ...props,
     id,
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react33.default.createElement("div", {
+  }, /* @__PURE__ */ import_react36.default.createElement("div", {
     role: "none",
     className: "contents",
     ...arrowGroupAttrs
   }, children)));
 });
-var TreegridCell = /* @__PURE__ */ (0, import_react33.forwardRef)(({ classNames, children, indent, ...props }, forwardedRef) => {
+var TreegridCell = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, children, indent, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react33.default.createElement("div", {
+  return /* @__PURE__ */ import_react36.default.createElement("div", {
     role: "gridcell",
     className: tx("treegrid.cell", "treegrid__cell", {
       indent
@@ -1936,22 +2082,22 @@ var useSwipeToDismiss = (ref, {
   /* side = 'inline-start' */
 }) => {
   const $root = ref.current;
-  const [motionState, setMotionState] = (0, import_react35.useState)(0);
-  const [gestureStartX, setGestureStartX] = (0, import_react35.useState)(0);
-  const setIdle = (0, import_react35.useCallback)(() => {
+  const [motionState, setMotionState] = (0, import_react38.useState)(0);
+  const [gestureStartX, setGestureStartX] = (0, import_react38.useState)(0);
+  const setIdle = (0, import_react38.useCallback)(() => {
     setMotionState(0);
     $root?.style.removeProperty("inset-inline-start");
     $root?.style.setProperty("transition-duration", "200ms");
   }, [
     $root
   ]);
-  const setFollowing = (0, import_react35.useCallback)(() => {
+  const setFollowing = (0, import_react38.useCallback)(() => {
     setMotionState(2);
     $root?.style.setProperty("transition-duration", "0ms");
   }, [
     $root
   ]);
-  const handlePointerDown = (0, import_react35.useCallback)(({ screenX }) => {
+  const handlePointerDown = (0, import_react38.useCallback)(({ screenX }) => {
     if (motionState === 0) {
       setMotionState(1);
       setGestureStartX(screenX);
@@ -1959,7 +2105,7 @@ var useSwipeToDismiss = (ref, {
   }, [
     motionState
   ]);
-  const handlePointerMove = (0, import_react35.useCallback)(({ screenX }) => {
+  const handlePointerMove = (0, import_react38.useCallback)(({ screenX }) => {
     if ($root) {
       const delta = Math.min(screenX - gestureStartX, 0);
       switch (motionState) {
@@ -1983,12 +2129,12 @@ var useSwipeToDismiss = (ref, {
     motionState,
     gestureStartX
   ]);
-  const handlePointerUp = (0, import_react35.useCallback)(() => {
+  const handlePointerUp = (0, import_react38.useCallback)(() => {
     setIdle();
   }, [
     setIdle
   ]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     $root?.addEventListener("pointerdown", handlePointerDown);
     return () => {
       $root?.removeEventListener("pointerdown", handlePointerDown);
@@ -1997,7 +2143,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerDown
   ]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
     return () => {
       document.documentElement.removeEventListener("pointermove", handlePointerMove);
@@ -2006,7 +2152,7 @@ var useSwipeToDismiss = (ref, {
     $root,
     handlePointerMove
   ]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
     return () => {
       document.documentElement.removeEventListener("pointerup", handlePointerUp);
@@ -2024,7 +2170,7 @@ var MAIN_NAME = "Main";
 var GENERIC_CONSUMER_NAME = "GenericConsumer";
 var landmarkAttr = "data-main-landmark";
 var useLandmarkMover = (propsOnKeyDown, landmark) => {
-  const handleKeyDown = (0, import_react34.useCallback)((event) => {
+  const handleKeyDown = (0, import_react37.useCallback)((event) => {
     const target = event.target;
     if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
       event.preventDefault();
@@ -2053,8 +2199,8 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
 };
 var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MAIN_NAME, {
   resizing: false,
-  navigationSidebarOpen: false,
-  setNavigationSidebarOpen: (nextOpen) => {
+  navigationSidebarState: "closed",
+  setNavigationSidebarState: (nextState) => {
     import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
       L: 81,
@@ -2062,8 +2208,8 @@ var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MA
       C: (f, a) => f(...a)
     });
   },
-  complementarySidebarOpen: false,
-  setComplementarySidebarOpen: (nextOpen) => {
+  complementarySidebarState: "closed",
+  setComplementarySidebarState: (nextState) => {
     import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
       L: 86,
@@ -2073,52 +2219,46 @@ var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MA
   }
 });
 var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarOpen, navigationSidebarOpen, setComplementarySidebarOpen, complementarySidebarOpen } = useMainContext(consumerName);
+  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
   return {
-    navigationSidebarOpen,
-    setNavigationSidebarOpen,
-    toggleNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
-      navigationSidebarOpen,
-      setNavigationSidebarOpen
-    ]),
-    openNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarOpen(true), [
-      setNavigationSidebarOpen
+    navigationSidebarState,
+    setNavigationSidebarState,
+    toggleNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+      navigationSidebarState,
+      setNavigationSidebarState
     ]),
-    closeNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarOpen(false), [
-      setNavigationSidebarOpen
+    openNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: (0, import_react37.useCallback)(() => setNavigationSidebarState("closed"), []),
+    complementarySidebarState,
+    setComplementarySidebarState,
+    toggleComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+      complementarySidebarState,
+      setComplementarySidebarState
     ]),
-    complementarySidebarOpen,
-    setComplementarySidebarOpen,
-    toggleComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
-      complementarySidebarOpen,
-      setComplementarySidebarOpen
-    ]),
-    openComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarOpen(true), [
-      setComplementarySidebarOpen
-    ]),
-    closeComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarOpen(false), [
-      setComplementarySidebarOpen
-    ])
+    openComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: (0, import_react37.useCallback)(() => setComplementarySidebarState("closed"), [])
   };
 };
 var resizeDebounce = 3e3;
-var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavigationSidebarOpen, onNavigationSidebarOpenChange, complementarySidebarOpen: propsComplementarySidebarOpen, defaultComplementarySidebarOpen, onComplementarySidebarOpenChange, children, ...props }) => {
-  const [isLg] = (0, import_react_hooks3.useMediaQuery)("lg", {
+var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
+  const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
     ssr: false
   });
-  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = (0, import_react_use_controllable_state4.useControllableState)({
-    prop: propsNavigationSidebarOpen,
-    defaultProp: defaultNavigationSidebarOpen,
-    onChange: onNavigationSidebarOpenChange
+  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
+    prop: propsNavigationSidebarState,
+    defaultProp: defaultNavigationSidebarState,
+    onChange: onNavigationSidebarStateChange
   });
-  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = (0, import_react_use_controllable_state4.useControllableState)({
-    prop: propsComplementarySidebarOpen,
-    defaultProp: defaultComplementarySidebarOpen,
-    onChange: onComplementarySidebarOpenChange
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
+    prop: propsComplementarySidebarState,
+    defaultProp: defaultComplementarySidebarState,
+    onChange: onComplementarySidebarStateChange
   });
-  const [resizing, setResizing] = (0, import_react34.useState)(false);
-  const resizeInterval = (0, import_react34.useRef)(null);
-  const handleResize = (0, import_react34.useCallback)(() => {
+  const [resizing, setResizing] = (0, import_react37.useState)(false);
+  const resizeInterval = (0, import_react37.useRef)(null);
+  const handleResize = (0, import_react37.useCallback)(() => {
     setResizing(true);
     if (resizeInterval.current) {
       clearTimeout(resizeInterval.current);
@@ -2128,18 +2268,18 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
       resizeInterval.current = null;
     }, resizeDebounce);
   }, []);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [
     handleResize
   ]);
-  return /* @__PURE__ */ import_react34.default.createElement(MainProvider, {
+  return /* @__PURE__ */ import_react37.default.createElement(MainProvider, {
     ...props,
-    navigationSidebarOpen,
-    setNavigationSidebarOpen,
-    complementarySidebarOpen,
-    setComplementarySidebarOpen,
+    navigationSidebarState,
+    setNavigationSidebarState,
+    complementarySidebarState,
+    setComplementarySidebarState,
     resizing
   }, children);
 };
@@ -2147,17 +2287,17 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
-  const [isLg] = (0, import_react_hooks3.useMediaQuery)("lg", {
+var MainSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, ...props }, forwardedRef) => {
+  const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
     ssr: false
   });
   const { tx } = useThemeContext();
-  const ref = (0, import_react_hooks3.useForwardedRef)(forwardedRef);
-  const noopRef = (0, import_react34.useRef)(null);
+  const ref = (0, import_react_hooks5.useForwardedRef)(forwardedRef);
+  const noopRef = (0, import_react37.useRef)(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-    onDismiss: () => setOpen(false)
+    onDismiss: () => onStateChange?.("closed")
   });
-  const handleKeyDown = (0, import_react34.useCallback)((event) => {
+  const handleKeyDown = (0, import_react37.useCallback)((event) => {
     if (event.key === "Escape") {
       event.target.closest("[data-tabster]")?.focus();
     }
@@ -2166,10 +2306,10 @@ var MainSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames,
     props.onKeyDown
   ]);
   const Root5 = isLg ? import_react_primitive9.Primitive.div : import_react_dialog2.DialogContent;
-  return /* @__PURE__ */ import_react34.default.createElement(import_react_dialog2.Root, {
-    open,
+  return /* @__PURE__ */ import_react37.default.createElement(import_react_dialog2.Root, {
+    open: state !== "closed",
     modal: false
-  }, /* @__PURE__ */ import_react34.default.createElement(Root5, {
+  }, /* @__PURE__ */ import_react37.default.createElement(Root5, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -2177,59 +2317,57 @@ var MainSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames,
     },
     ...props,
     "data-side": side === "inline-end" ? "ie" : "is",
-    "data-state": open ? "open" : "closed",
+    "data-state": state,
     "data-resizing": resizing ? "true" : "false",
     className: tx("main.sidebar", "main__sidebar", {}, classNames),
     onKeyDown: handleKeyDown,
-    ...!open && {
+    ...state === "closed" && {
       inert: "true"
     },
     ref
-  }, /* @__PURE__ */ import_react34.default.createElement(ElevationProvider, {
-    elevation: "group"
-  }, children)));
+  }, children));
 });
-var MainNavigationSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
-  const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+var MainNavigationSidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
+  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
-  return /* @__PURE__ */ import_react34.default.createElement(MainSidebar, {
+  return /* @__PURE__ */ import_react37.default.createElement(MainSidebar, {
     ...mover,
     ...props,
-    open: navigationSidebarOpen,
-    setOpen: setNavigationSidebarOpen,
+    state: navigationSidebarState,
+    onStateChange: setNavigationSidebarState,
     resizing,
     side: "inline-start",
     ref: forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
-  const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+var MainComplementarySidebar = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
+  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
-  return /* @__PURE__ */ import_react34.default.createElement(MainSidebar, {
+  return /* @__PURE__ */ import_react37.default.createElement(MainSidebar, {
     ...mover,
     ...props,
-    open: complementarySidebarOpen,
-    setOpen: setComplementarySidebarOpen,
+    state: complementarySidebarState,
+    onStateChange: setComplementarySidebarState,
     resizing,
     side: "inline-end",
     ref: forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ (0, import_react34.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
-  const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
+var MainContent = /* @__PURE__ */ (0, import_react37.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
+  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root5 = asChild ? import_react_slot10.Slot : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
-  return /* @__PURE__ */ import_react34.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react37.default.createElement(Root5, {
     role,
     ...handlesFocus && {
       ...mover
     },
     ...props,
-    "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
-    "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed",
+    "data-sidebar-inline-start-state": navigationSidebarState,
+    "data-sidebar-inline-end-state": complementarySidebarState,
     className: tx("main.content", "main", {
       bounce,
       handlesFocus
@@ -2238,72 +2376,47 @@ var MainContent = /* @__PURE__ */ (0, import_react34.forwardRef)(({ asChild, cla
   }, children);
 });
 MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, ...props }, forwardedRef) => {
-  const [isLg] = (0, import_react_hooks3.useMediaQuery)("lg", {
+var MainOverlay = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = (0, import_react_hooks5.useMediaQuery)("lg", {
     ssr: false
   });
-  const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react34.default.createElement("div", {
+  return /* @__PURE__ */ import_react37.default.createElement("div", {
     onClick: () => {
-      setNavigationSidebarOpen(false);
-      setComplementarySidebarOpen(false);
+      setNavigationSidebarState("collapsed");
+      setComplementarySidebarState("collapsed");
     },
     ...props,
     className: tx("main.overlay", "main__overlay", {
       isLg,
-      inlineStartSidebarOpen: navigationSidebarOpen,
-      inlineEndSidebarOpen: complementarySidebarOpen
+      inlineStartSidebarOpen: navigationSidebarState,
+      inlineEndSidebarOpen: complementarySidebarState
     }, classNames),
-    "data-state": navigationSidebarOpen || complementarySidebarOpen ? "open" : "closed",
+    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
     "aria-hidden": "true",
     ref: forwardedRef
   });
 });
-var MainNotch = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
-  const notchElement = (0, import_react34.useRef)(null);
-  const ref = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, notchElement);
-  const handleKeyDown = (0, import_react34.useCallback)((event) => {
-    switch (event.key) {
-      case "Escape":
-        props?.onKeyDown?.(event);
-        notchElement.current?.focus();
-    }
-  }, [
-    props?.onKeyDown
-  ]);
-  const mover = useLandmarkMover(handleKeyDown, "3");
-  return /* @__PURE__ */ import_react34.default.createElement("div", {
-    role: "toolbar",
-    ...mover,
-    ...props,
-    "data-nav-sidebar-state": navigationSidebarOpen ? "open" : "closed",
-    className: tx("main.notch", "main__notch", {}, classNames),
-    ref
-  });
-});
 var Main = {
   Root: MainRoot,
   Content: MainContent,
   Overlay: MainOverlay,
   NavigationSidebar: MainNavigationSidebar,
-  ComplementarySidebar: MainComplementarySidebar,
-  Notch: MainNotch
+  ComplementarySidebar: MainComplementarySidebar
 };
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = (0, import_react_context8.createContext)(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ (0, import_react36.forwardRef)(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+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_hooks4.useId)("message__title", propsTitleId);
-  const descriptionId = (0, import_react_hooks4.useId)("message__description", propsDescriptionId);
+  const titleId = (0, import_react_hooks6.useId)("message__title", propsTitleId);
+  const descriptionId = (0, import_react_hooks6.useId)("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
   const Root5 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.div;
-  return /* @__PURE__ */ import_react36.default.createElement(MessageProvider, {
+  return /* @__PURE__ */ import_react39.default.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ import_react36.default.createElement(Root5, {
+  }, /* @__PURE__ */ import_react39.default.createElement(Root5, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -2316,11 +2429,11 @@ var MessageRoot = /* @__PURE__ */ (0, import_react36.forwardRef)(({ asChild, val
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ (0, import_react36.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
+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_react36.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react39.default.createElement(Root5, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -2329,11 +2442,11 @@ var MessageTitle = /* @__PURE__ */ (0, import_react36.forwardRef)(({ asChild, cl
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_BODY_NAME = "MessageBody";
-var MessageBody = /* @__PURE__ */ (0, import_react36.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
+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_react36.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react39.default.createElement(Root5, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -2355,43 +2468,43 @@ var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
 var PopoverRoot = (props) => {
   const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
   const popperScope = usePopperScope(__scopePopover);
-  const triggerRef = (0, import_react37.useRef)(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = (0, import_react37.useState)(false);
+  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)({
     prop: openProp,
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  return /* @__PURE__ */ import_react37.default.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ import_react37.default.createElement(PopoverProvider, {
+  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ import_react40.default.createElement(PopoverProvider, {
     scope: __scopePopover,
     contentId: (0, import_react_id2.useId)(),
     triggerRef,
     open,
     onOpenChange: setOpen,
-    onOpenToggle: (0, import_react37.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
+    onOpenToggle: (0, import_react40.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
       setOpen
     ]),
     hasCustomAnchor,
-    onCustomAnchorAdd: (0, import_react37.useCallback)(() => setHasCustomAnchor(true), []),
-    onCustomAnchorRemove: (0, import_react37.useCallback)(() => setHasCustomAnchor(false), []),
+    onCustomAnchorAdd: (0, import_react40.useCallback)(() => setHasCustomAnchor(true), []),
+    onCustomAnchorRemove: (0, import_react40.useCallback)(() => setHasCustomAnchor(false), []),
     modal
   }, children));
 };
 PopoverRoot.displayName = POPOVER_NAME;
 var ANCHOR_NAME = "PopoverAnchor";
-var PopoverAnchor = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
+var PopoverAnchor = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const { __scopePopover, ...anchorProps } = props;
   const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
   const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
-  (0, import_react37.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     onCustomAnchorAdd();
     return () => onCustomAnchorRemove();
   }, [
     onCustomAnchorAdd,
     onCustomAnchorRemove
   ]);
-  return /* @__PURE__ */ import_react37.default.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     ...anchorProps,
     ref: forwardedRef
@@ -2399,12 +2512,12 @@ var PopoverAnchor = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwa
 });
 PopoverAnchor.displayName = ANCHOR_NAME;
 var TRIGGER_NAME2 = "PopoverTrigger";
-var PopoverTrigger = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
+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_refs3.useComposedRefs)(forwardedRef, context.triggerRef);
-  const trigger = /* @__PURE__ */ import_react37.default.createElement(import_react_primitive11.Primitive.button, {
+  const composedTriggerRef = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, context.triggerRef);
+  const trigger = /* @__PURE__ */ import_react40.default.createElement(import_react_primitive11.Primitive.button, {
     type: "button",
     "aria-haspopup": "dialog",
     "aria-expanded": context.open,
@@ -2414,7 +2527,7 @@ var PopoverTrigger = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forw
     ref: composedTriggerRef,
     onClick: (0, import_primitive2.composeEventHandlers)(props.onClick, context.onOpenToggle)
   });
-  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ import_react37.default.createElement(PopperPrimitive.Anchor, {
+  return context.hasCustomAnchor ? trigger : /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Anchor, {
     asChild: true,
     ...popperScope
   }, trigger);
@@ -2425,12 +2538,12 @@ var PopoverVirtualTrigger = (props) => {
   const { __scopePopover, virtualRef } = props;
   const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
   const popperScope = usePopperScope(__scopePopover);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (virtualRef.current) {
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return /* @__PURE__ */ import_react37.default.createElement(PopperPrimitive.Anchor, {
+  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Anchor, {
     ...popperScope,
     virtualRef
   });
@@ -2443,48 +2556,48 @@ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME2, {
 var PopoverPortal = (props) => {
   const { __scopePopover, forceMount, children, container } = props;
   const context = usePopoverContext(PORTAL_NAME2, __scopePopover);
-  return /* @__PURE__ */ import_react37.default.createElement(PortalProvider, {
+  return /* @__PURE__ */ import_react40.default.createElement(PortalProvider, {
     scope: __scopePopover,
     forceMount
-  }, /* @__PURE__ */ import_react37.default.createElement(import_react_presence.Presence, {
+  }, /* @__PURE__ */ import_react40.default.createElement(import_react_presence.Presence, {
     present: forceMount || context.open
-  }, /* @__PURE__ */ import_react37.default.createElement(import_react_portal.Portal, {
+  }, /* @__PURE__ */ import_react40.default.createElement(import_react_portal.Portal, {
     asChild: true,
     container
   }, children)));
 };
 PopoverPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "PopoverContent";
-var PopoverContent = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const portalContext = usePortalContext(CONTENT_NAME2, props.__scopePopover);
   const { forceMount = portalContext.forceMount, ...contentProps } = props;
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  return /* @__PURE__ */ import_react37.default.createElement(import_react_presence.Presence, {
+  return /* @__PURE__ */ import_react40.default.createElement(import_react_presence.Presence, {
     present: forceMount || context.open
-  }, context.modal ? /* @__PURE__ */ import_react37.default.createElement(PopoverContentModal, {
+  }, context.modal ? /* @__PURE__ */ import_react40.default.createElement(PopoverContentModal, {
     ...contentProps,
     ref: forwardedRef
-  }) : /* @__PURE__ */ import_react37.default.createElement(PopoverContentNonModal, {
+  }) : /* @__PURE__ */ import_react40.default.createElement(PopoverContentNonModal, {
     ...contentProps,
     ref: forwardedRef
   }));
 });
 PopoverContent.displayName = CONTENT_NAME2;
-var PopoverContentModal = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
+var PopoverContentModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  const contentRef = (0, import_react37.useRef)(null);
-  const composedRefs = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, contentRef);
-  const isRightClickOutsideRef = (0, import_react37.useRef)(false);
-  (0, import_react37.useEffect)(() => {
+  const contentRef = (0, import_react40.useRef)(null);
+  const composedRefs = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, contentRef);
+  const isRightClickOutsideRef = (0, import_react40.useRef)(false);
+  (0, import_react40.useEffect)(() => {
     const content = contentRef.current;
     if (content) {
       return (0, import_aria_hidden.hideOthers)(content);
     }
   }, []);
-  return /* @__PURE__ */ import_react37.default.createElement(import_react_remove_scroll.RemoveScroll, {
+  return /* @__PURE__ */ import_react40.default.createElement(import_react_remove_scroll.RemoveScroll, {
     as: import_react_slot12.Slot,
     allowPinchZoom: true
-  }, /* @__PURE__ */ import_react37.default.createElement(PopoverContentImpl, {
+  }, /* @__PURE__ */ import_react40.default.createElement(PopoverContentImpl, {
     ...props,
     ref: composedRefs,
     // we make sure we're not trapping once it's been closed
@@ -2512,11 +2625,11 @@ var PopoverContentModal = /* @__PURE__ */ (0, import_react37.forwardRef)((props,
     })
   }));
 });
-var PopoverContentNonModal = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
+var PopoverContentNonModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const context = usePopoverContext(CONTENT_NAME2, props.__scopePopover);
-  const hasInteractedOutsideRef = (0, import_react37.useRef)(false);
-  const hasPointerDownOutsideRef = (0, import_react37.useRef)(false);
-  return /* @__PURE__ */ import_react37.default.createElement(PopoverContentImpl, {
+  const hasInteractedOutsideRef = (0, import_react40.useRef)(false);
+  const hasPointerDownOutsideRef = (0, import_react40.useRef)(false);
+  return /* @__PURE__ */ import_react40.default.createElement(PopoverContentImpl, {
     ...props,
     ref: forwardedRef,
     trapFocus: false,
@@ -2551,19 +2664,21 @@ var PopoverContentNonModal = /* @__PURE__ */ (0, import_react37.forwardRef)((pro
     }
   });
 });
-var PopoverContentImpl = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
-  const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, classNames, ...contentProps } = props;
+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 { tx } = useThemeContext();
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
   (0, import_react_focus_guards.useFocusGuards)();
-  return /* @__PURE__ */ import_react37.default.createElement(import_react_focus_scope.FocusScope, {
+  return /* @__PURE__ */ import_react40.default.createElement(import_react_focus_scope.FocusScope, {
     asChild: true,
     loop: true,
     trapped: trapFocus,
     onMountAutoFocus: onOpenAutoFocus,
     onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ import_react37.default.createElement(import_react_dismissable_layer.DismissableLayer, {
+  }, /* @__PURE__ */ import_react40.default.createElement(import_react_dismissable_layer.DismissableLayer, {
     asChild: true,
     disableOutsidePointerEvents,
     onInteractOutside,
@@ -2571,13 +2686,16 @@ var PopoverContentImpl = /* @__PURE__ */ (0, import_react37.forwardRef)((props,
     onPointerDownOutside,
     onFocusOutside,
     onDismiss: () => context.onOpenChange(false)
-  }, /* @__PURE__ */ import_react37.default.createElement(PopperPrimitive.Content, {
+  }, /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Content, {
     "data-state": getState(context.open),
     role: "dialog",
     id: context.contentId,
     ...popperScope,
     ...contentProps,
-    className: tx("popover.content", "popover", {}, classNames),
+    collisionPadding: safeCollisionPadding,
+    className: tx("popover.content", "popover", {
+      elevation
+    }, classNames),
     ref: forwardedRef,
     style: {
       ...contentProps.style,
@@ -2593,10 +2711,10 @@ var PopoverContentImpl = /* @__PURE__ */ (0, import_react37.forwardRef)((props,
   })));
 });
 var CLOSE_NAME = "PopoverClose";
-var PopoverClose = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
+var PopoverClose = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const { __scopePopover, ...closeProps } = props;
   const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-  return /* @__PURE__ */ import_react37.default.createElement(import_react_primitive11.Primitive.button, {
+  return /* @__PURE__ */ import_react40.default.createElement(import_react_primitive11.Primitive.button, {
     type: "button",
     ...closeProps,
     ref: forwardedRef,
@@ -2605,11 +2723,11 @@ var PopoverClose = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwar
 });
 PopoverClose.displayName = CLOSE_NAME;
 var ARROW_NAME2 = "PopoverArrow";
-var PopoverArrow = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
   const { __scopePopover, classNames, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopePopover);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react37.default.createElement(PopperPrimitive.Arrow, {
+  return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive.Arrow, {
     ...popperScope,
     ...arrowProps,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
@@ -2617,10 +2735,10 @@ var PopoverArrow = /* @__PURE__ */ (0, import_react37.forwardRef)((props, forwar
   });
 });
 PopoverArrow.displayName = ARROW_NAME2;
-var PopoverViewport = /* @__PURE__ */ (0, import_react37.forwardRef)(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+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_react37.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react40.default.createElement(Root5, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -2641,9 +2759,9 @@ var Popover = {
   Arrow: PopoverArrow,
   Viewport: PopoverViewport
 };
-var Status = /* @__PURE__ */ (0, import_react38.forwardRef)(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
+var Status = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react38.default.createElement("span", {
+  return /* @__PURE__ */ import_react41.default.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", "status", {
@@ -2651,7 +2769,7 @@ var Status = /* @__PURE__ */ (0, import_react38.forwardRef)(({ classNames, child
       variant
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react38.default.createElement("span", {
+  }, /* @__PURE__ */ import_react41.default.createElement("span", {
     role: "none",
     className: tx("status.bar", "status__bar", {
       indeterminate,
@@ -2664,42 +2782,42 @@ var Status = /* @__PURE__ */ (0, import_react38.forwardRef)(({ classNames, child
     }
   }), children);
 });
-var ScrollAreaRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaRoot = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react39.default.createElement(import_react_scroll_area.Root, {
+  return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Root, {
     ...props,
     className: tx("scrollArea.root", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaViewport = /* @__PURE__ */ (0, import_react39.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaViewport = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react39.default.createElement(import_react_scroll_area.Viewport, {
+  return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Viewport, {
     ...props,
     className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaScrollbar = /* @__PURE__ */ (0, import_react39.forwardRef)(({ classNames, variant = "fine", ...props }, forwardedRef) => {
+var ScrollAreaScrollbar = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, variant = "fine", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react39.default.createElement(import_react_scroll_area.Scrollbar, {
+  return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Scrollbar, {
     "data-variant": variant,
     ...props,
     className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaThumb = /* @__PURE__ */ (0, import_react39.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaThumb = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react39.default.createElement(import_react_scroll_area.Thumb, {
+  return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Thumb, {
     ...props,
     className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaCorner = /* @__PURE__ */ (0, import_react39.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaCorner = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react39.default.createElement(import_react_scroll_area.Corner, {
+  return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Corner, {
     ...props,
     className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
     ref: forwardedRef
@@ -2717,101 +2835,106 @@ var SelectTrigger = SelectPrimitive.Trigger;
 var SelectValue = SelectPrimitive.Value;
 var SelectIcon = SelectPrimitive.Icon;
 var SelectPortal = SelectPrimitive.Portal;
-var SelectTriggerButton = /* @__PURE__ */ (0, import_react41.forwardRef)(({ children, placeholder, ...props }, forwardedRef) => {
+var SelectTriggerButton = /* @__PURE__ */ (0, import_react44.forwardRef)(({ children, placeholder, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react41.default.createElement(Button, props, /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ import_react44.default.createElement(Button, props, /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ import_react41.default.createElement("span", {
+  }, children), /* @__PURE__ */ import_react44.default.createElement("span", {
     className: "w-1 flex-1"
-  }), /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.Icon, {
+  }), /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ import_react41.default.createElement(import_react40.CaretDown, {
+  }, /* @__PURE__ */ import_react44.default.createElement(import_react43.CaretDown, {
     className: tx("select.triggerIcon", "select__trigger__icon", {}),
     weight: "bold"
   }))));
 });
-var SelectContent = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.Content, {
+  const elevation = useElevationContext();
+  const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Content, {
     ...props,
-    className: tx("select.content", "select__content", {}, classNames),
+    collisionPadding: safeCollisionPadding,
+    className: tx("select.content", "select__content", {
+      elevation
+    }, classNames),
     position: "popper",
     ref: forwardedRef
   }, children);
 });
-var SelectScrollUpButton2 = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ import_react41.default.createElement(import_react40.CaretUp, {
+  }, children ?? /* @__PURE__ */ import_react44.default.createElement(import_react43.CaretUp, {
     weight: "bold"
   }));
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ import_react41.default.createElement(import_react40.CaretDown, {
+  }, children ?? /* @__PURE__ */ import_react44.default.createElement(import_react43.CaretDown, {
     weight: "bold"
   }));
 });
-var SelectViewport2 = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
+var SelectViewport2 = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.SelectViewport, {
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.SelectViewport, {
     ...props,
     className: tx("select.viewport", "select__viewport", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectItem = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
   });
 });
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", "option__indicator", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectOption = /* @__PURE__ */ (0, import_react41.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ (0, import_react44.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ import_react41.default.createElement("span", {
+  }, /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ import_react44.default.createElement("span", {
     className: "grow w-1"
-  }), /* @__PURE__ */ import_react41.default.createElement(Icon, {
+  }), /* @__PURE__ */ import_react44.default.createElement(Icon, {
     icon: "ph--check--regular"
   }));
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", "select__separator", {}, classNames),
     ref: forwardedRef
   });
 });
-var SelectArrow = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react41.default.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", "select__arrow", {}, classNames),
     ref: forwardedRef
@@ -2837,76 +2960,78 @@ var Select = {
   Separator: SelectSeparator,
   Arrow: SelectArrow
 };
-var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
+var Separator4 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, orientation = "horizontal", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react42.default.createElement(import_react_separator.Separator, {
+  return /* @__PURE__ */ import_react45.default.createElement(import_react_separator.Separator, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
       orientation
-    }, classNames)
+    }, classNames),
+    ref: forwardedRef
   });
-};
-var Tag = /* @__PURE__ */ (0, import_react43.forwardRef)(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+});
+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_react43.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react46.default.createElement(Root5, {
     ...props,
-    className: tx("tag.root", "tag", {
+    className: tx("tag.root", "dx-tag", {
       palette
     }, classNames),
+    "data-hue": palette,
     ref: forwardedRef
   });
 });
 var ToastProvider = import_react_toast.ToastProvider;
-var ToastViewport = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ (0, import_react47.forwardRef)(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react44.default.createElement(import_react_toast.ToastViewport, {
+  return /* @__PURE__ */ import_react47.default.createElement(import_react_toast.ToastViewport, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ (0, import_react47.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react44.default.createElement(import_react_toast.Root, {
+  return /* @__PURE__ */ import_react47.default.createElement(import_react_toast.Root, {
     ...props,
     className: tx("toast.root", "toast", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react44.default.createElement(ElevationProvider, {
-    elevation: "chrome"
+  }, /* @__PURE__ */ import_react47.default.createElement(ElevationProvider, {
+    elevation: "toast"
   }, children));
 });
-var ToastBody = /* @__PURE__ */ (0, import_react44.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+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_react44.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react47.default.createElement(Root5, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ (0, import_react44.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+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_react44.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react47.default.createElement(Root5, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ (0, import_react44.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+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_react44.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react47.default.createElement(Root5, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ (0, import_react44.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
+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_react44.default.createElement(Root5, {
+  return /* @__PURE__ */ import_react47.default.createElement(Root5, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -2925,54 +3050,62 @@ var Toast = {
   Action: ToastAction,
   Close: ToastClose
 };
-var ToolbarRoot = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var ToolbarRoot = /* @__PURE__ */ (0, import_react48.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ import_react45.default.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Root, {
     ...props,
     className: tx("toolbar.root", "toolbar", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ToolbarButton = /* @__PURE__ */ (0, import_react45.forwardRef)((props, forwardedRef) => {
-  return /* @__PURE__ */ import_react45.default.createElement(ToolbarPrimitive.Button, {
+var ToolbarButton = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Button, {
+    asChild: true
+  }, /* @__PURE__ */ import_react48.default.createElement(Button, {
+    ...props,
+    ref: forwardedRef
+  }));
+});
+var ToolbarIconButton = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ import_react45.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react48.default.createElement(IconButton, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggle = /* @__PURE__ */ (0, import_react45.forwardRef)((props, forwardedRef) => {
-  return /* @__PURE__ */ import_react45.default.createElement(ToolbarPrimitive.Button, {
+var ToolbarToggle = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ import_react45.default.createElement(Toggle, {
+  }, /* @__PURE__ */ import_react48.default.createElement(Toggle, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ (0, import_react45.forwardRef)((props, forwardedRef) => {
-  return /* @__PURE__ */ import_react45.default.createElement(ToolbarPrimitive.Link, {
+var ToolbarLink = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
+  return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ import_react45.default.createElement(Link, {
+  }, /* @__PURE__ */ import_react48.default.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react45.default.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+var ToolbarToggleGroup2 = /* @__PURE__ */ (0, import_react48.forwardRef)(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ import_react45.default.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ import_react48.default.createElement(ButtonGroup, {
     classNames,
     children,
     elevation,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ (0, import_react45.forwardRef)(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ import_react45.default.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupItem = /* @__PURE__ */ (0, import_react48.forwardRef)(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ import_react45.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react48.default.createElement(Button, {
     variant,
     density,
     elevation,
@@ -2981,26 +3114,42 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ (0, import_react45.forwardRef)(({ v
     ref: forwardedRef
   }));
 });
-var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ import_react45.default.createElement(ToolbarPrimitive.Separator, {
+var ToolbarToggleGroupIconItem = /* @__PURE__ */ (0, import_react48.forwardRef)(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+    ...props,
     asChild: true
-  }, /* @__PURE__ */ import_react45.default.createElement(Separator4, {
-    orientation: "vertical",
-    ...props
+  }, /* @__PURE__ */ import_react48.default.createElement(IconButton, {
+    variant,
+    density,
+    elevation,
+    classNames,
+    icon,
+    label,
+    iconOnly,
+    ref: forwardedRef
   }));
-};
-var ToolbarExpander = () => /* @__PURE__ */ import_react45.default.createElement("div", {
-  className: "grow"
+});
+var ToolbarSeparator = /* @__PURE__ */ (0, import_react48.forwardRef)(({ variant = "line", ...props }, forwardedRef) => {
+  return variant === "line" ? /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Separator, {
+    asChild: true
+  }, /* @__PURE__ */ import_react48.default.createElement(Separator4, {
+    ...props,
+    ref: forwardedRef
+  })) : /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Separator, {
+    className: "grow",
+    ref: forwardedRef
+  });
 });
 var Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
   Link: ToolbarLink,
   Toggle: ToolbarToggle,
   ToggleGroup: ToolbarToggleGroup2,
   ToggleGroupItem: ToolbarToggleGroupItem,
-  Separator: ToolbarSeparator,
-  Expander: ToolbarExpander
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
+  Separator: ToolbarSeparator
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -3052,6 +3201,7 @@ var Toolbar = {
   createDropdownMenuScope,
   createPopoverScope,
   hasIosKeyboard,
+  initialSafeArea,
   isLabel,
   toLocalizedString,
   useAvatarContext,
@@ -3061,9 +3211,11 @@ var Toolbar = {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
+  useLandmarkMover,
   useListContext,
   useListItemContext,
   useMainContext,
+  useSafeArea,
   useSidebars,
   useThemeContext,
   useTranslation,