@leta-io/components 0.2.0 → 0.3.0

package/dist/index.js

@@ -218,8 +218,11 @@ var Checkbox = /* @__PURE__ */ React3.forwardRef(
           alignItems: "center",
           justifyContent: "center",
           boxSizing: "border-box",
-          width: 30,
-          height: 30,
+          // 32×32 = a 20px glyph in 6px padding (Figma 2026-09-25: the glyph
+          // grew 18→20; the padding is unchanged). The box is the hit area,
+          // deliberately larger than the mark it draws.
+          width: 32,
+          height: 32,
           padding: "var(--padding-6px)",
           cursor: disabled ? "not-allowed" : "pointer",
           opacity: disabled ? "var(--opacity-60)" : 1
@@ -250,7 +253,7 @@ var Checkbox = /* @__PURE__ */ React3.forwardRef(
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx3("svg", { width: 18, height: 18, viewBox: "0 -960 960 960", fill, "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: path }) })
+          /* @__PURE__ */ jsx3("svg", { width: 20, height: 20, viewBox: "0 -960 960 960", fill, "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: path }) })
         ]
       }
     );
@@ -288,8 +291,11 @@ var RadioButton = /* @__PURE__ */ React4.forwardRef(
           alignItems: "center",
           justifyContent: "center",
           boxSizing: "border-box",
-          width: 30,
-          height: 30,
+          // 32×32 = a 20px glyph in 6px padding (Figma 2026-09-25: the glyph
+          // grew 18→20; the padding is unchanged). The box is the hit area,
+          // deliberately larger than the mark it draws.
+          width: 32,
+          height: 32,
           padding: "var(--padding-6px)",
           cursor: disabled ? "not-allowed" : "pointer",
           opacity: disabled ? "var(--opacity-60)" : 1
@@ -320,7 +326,7 @@ var RadioButton = /* @__PURE__ */ React4.forwardRef(
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx4("svg", { width: 18, height: 18, viewBox: "0 -960 960 960", fill, "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: path }) })
+          /* @__PURE__ */ jsx4("svg", { width: 20, height: 20, viewBox: "0 -960 960 960", fill, "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: path }) })
         ]
       }
     );
@@ -1234,12 +1240,17 @@ var Badge = /* @__PURE__ */ React9.forwardRef(
 import * as React10 from "react";
 import { Icon as Icon5 } from "@leta-io/icons";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var TEXT_TOKEN = {
+  information: "var(--text-information-label)",
+  neutral: "var(--text-default-label)"
+};
 var Tag = /* @__PURE__ */ React10.forwardRef(
-  function Tag2({ label, onRemove, removeLabel = "Remove", className, style, ...rest }, ref) {
+  function Tag2({ label, onRemove, removeLabel = "Remove", color = "information", className, style, ...rest }, ref) {
     const [hovered, setHovered] = React10.useState(false);
     const [pressed, setPressed] = React10.useState(false);
-    const bg = pressed ? "var(--surface-information-desktop-badge-pressed)" : hovered ? "var(--surface-information-desktop-badge-hover)" : "var(--surface-information-desktop-badge)";
-    const border = pressed ? "var(--border-information-desktop-badge-pressed)" : hovered ? "var(--border-information-desktop-badge-hover)" : "var(--border-information-desktop-badge)";
+    const state = pressed ? "-pressed" : hovered ? "-hover" : "";
+    const bg = `var(--surface-${color}-desktop-badge${state})`;
+    const border = `var(--border-${color}-desktop-badge${state})`;
     return /* @__PURE__ */ jsxs7(
       "span",
       {
@@ -1255,7 +1266,7 @@ var Tag = /* @__PURE__ */ React10.forwardRef(
           paddingRight: onRemove ? "var(--padding-4px)" : "var(--padding-6px)",
           borderRadius: "var(--rounding-md)",
           backgroundColor: bg,
-          color: "var(--text-information-label)",
+          color: TEXT_TOKEN[color],
           boxShadow: `inset 0 0 0 var(--stroke-xs) ${border}`,
           whiteSpace: "nowrap",
           boxSizing: "border-box",
@@ -2613,7 +2624,7 @@ var MapZoomControl = /* @__PURE__ */ React27.forwardRef(
               className: "leta-map-zoom-btn",
               onClick: onZoomIn,
               disabled: disableZoomIn,
-              "aria-label": "Zoom in",
+              "aria-label": "Zoom In",
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -2652,7 +2663,7 @@ var MapZoomControl = /* @__PURE__ */ React27.forwardRef(
               className: "leta-map-zoom-btn",
               onClick: onZoomOut,
               disabled: disableZoomOut,
-              "aria-label": "Zoom out",
+              "aria-label": "Zoom Out",
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -3182,7 +3193,7 @@ var SearchField = /* @__PURE__ */ React31.forwardRef(function SearchField2({
           {
             type: "button",
             onClick: handleClear,
-            "aria-label": "Clear search",
+            "aria-label": "Clear Search",
             style: { flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", border: 0, background: "transparent", padding: 0, cursor: "pointer", color: "var(--icons-neutral-default)" },
             children: /* @__PURE__ */ jsx31(Icon16, { name: "Cancel", size: 16 })
           }
@@ -3496,8 +3507,10 @@ var SIZE = {
   "dropdown-basic": { width: "100%", minHeight: 40 },
   "dropdown-advanced": { width: "100%", minHeight: 68 },
   "dropdown-destructive": { width: "100%", minHeight: 40 },
-  "checkbox-selection": { width: "100%", minHeight: 50 },
-  "radio-selection": { width: "100%", minHeight: 50 },
+  // 52 = the row's 10px vertical padding around the 32px control (Figma
+  // 2026-09-25 — follows the Checkbox/Radio glyph growing 18→20).
+  "checkbox-selection": { width: "100%", minHeight: 52 },
+  "radio-selection": { width: "100%", minHeight: 52 },
   "day-cell": { width: 32, height: 32 },
   "time-picker": { width: 77, height: 32 },
   "filter-group": { width: "100%", minHeight: 40 },
@@ -4278,12 +4291,12 @@ var SideBar = /* @__PURE__ */ React38.forwardRef(function SideBar2({
               padding: "var(--padding-12px)",
               borderBottom: "var(--stroke-xs) solid var(--border-neutral-default)"
             },
-            children: collapsed ? /* @__PURE__ */ jsx38(HoverTip, { label: "Open sidebar", placement: "right", children: /* @__PURE__ */ jsx38(CollapsedSidebarLogo, { "aria-label": "Open sidebar", onClick: toggle }) }) : /* @__PURE__ */ jsxs27(Fragment5, { children: [
+            children: collapsed ? /* @__PURE__ */ jsx38(HoverTip, { label: "Open Sidebar", placement: "right", children: /* @__PURE__ */ jsx38(CollapsedSidebarLogo, { "aria-label": "Open Sidebar", onClick: toggle }) }) : /* @__PURE__ */ jsxs27(Fragment5, { children: [
               /* @__PURE__ */ jsxs27("span", { style: { display: "flex", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
                 /* @__PURE__ */ jsx38(LetaLogo, { type: "symbol" }),
                 /* @__PURE__ */ jsx38(LetaLogo, { type: "wordmark" })
               ] }),
-              /* @__PURE__ */ jsx38(HoverTip, { label: "Close sidebar", children: /* @__PURE__ */ jsx38(Button, { variant: "ghost", size: "medium", prominent: true, iconOnly: "Sidebar", "aria-label": "Close sidebar", onClick: toggle }) })
+              /* @__PURE__ */ jsx38(HoverTip, { label: "Close Sidebar", children: /* @__PURE__ */ jsx38(Button, { variant: "ghost", size: "medium", prominent: true, iconOnly: "Sidebar", "aria-label": "Close Sidebar", onClick: toggle }) })
             ] })
           }
         ),
@@ -4388,11 +4401,11 @@ var Breadcrumbs = /* @__PURE__ */ React39.forwardRef(
         // which the chevron only hints at. The tip says it outright.
         //
         // Default `small` variant and `auto` placement, matching the SideBar's
-        // "Open sidebar"/"Close sidebar" — the precedent for tooltips on chrome
+        // "Open Sidebar"/"Close Sidebar" — the precedent for tooltips on chrome
         // controls, which live inside the design-system component rather than the
         // consuming shell. `HoverTip` already dismisses on `pointerdown`, so the
         // tip is gone before the switcher panel paints over the same spot.
-        /* @__PURE__ */ jsx39(HoverTip, { label: "Switch company", children: /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx39(HoverTip, { label: "Switch Company", children: /* @__PURE__ */ jsx39(
           Button,
           {
             variant: "plain",
@@ -5898,7 +5911,7 @@ var Cell = /* @__PURE__ */ React52.forwardRef(function Cell2({
       break;
     }
     case "actions":
-      inner = actions ?? /* @__PURE__ */ jsx52(Button, { variant: "ghost", size: "small", iconOnly: "More", "aria-label": "More actions" });
+      inner = actions ?? /* @__PURE__ */ jsx52(Button, { variant: "ghost", size: "small", iconOnly: "More", "aria-label": "More Actions" });
       break;
     case "preview-chips":
       inner = chips.map((c, i) => /* @__PURE__ */ jsx52(Chip, { label: c }, i));
@@ -5955,7 +5968,7 @@ var Cell = /* @__PURE__ */ React52.forwardRef(function Cell2({
       inner = slotContent ?? /* @__PURE__ */ jsxs38("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", minWidth: 0, width: "100%" }, children: [
         /* @__PURE__ */ jsx52(TruncatedIdText, { id: orderId, className: "text-label-m-medium", color: "var(--text-default-heading)" }),
         /* @__PURE__ */ jsxs38("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
-          /* @__PURE__ */ jsx52(HoverTip, { label: copyTooltip, children: /* @__PURE__ */ jsx52(Button, { variant: "secondary", size: "extra-small", iconOnly: "Copy", iconOutlined: true, copyIcon: "Check-Circle", "aria-label": "Copy order ID", onClick: onCopyOrderId }) }),
+          /* @__PURE__ */ jsx52(HoverTip, { label: copyTooltip, children: /* @__PURE__ */ jsx52(Button, { variant: "secondary", size: "extra-small", iconOnly: "Copy", iconOutlined: true, copyIcon: "Check-Circle", "aria-label": "Copy Order ID", onClick: onCopyOrderId }) }),
           /* @__PURE__ */ jsx52(HoverTip, { label: sourceTooltip ?? (manual ? "Created manually" : "Created via integration"), children: sourceIcon }),
           showScheduledIcon && (scheduledTooltip ? /* @__PURE__ */ jsx52(HoverTip, { label: scheduledTooltip, children: calendarIcon }) : calendarIcon),
           showBroadcastIcon && /* @__PURE__ */ jsx52(HoverTip, { label: broadcastTooltip, children: broadcastIcon })
@@ -5969,8 +5982,8 @@ var Cell = /* @__PURE__ */ React52.forwardRef(function Cell2({
         showDriverActions ? /* @__PURE__ */ jsxs38("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", minWidth: 0 }, children: [
           /* @__PURE__ */ jsx52(Truncate, { className: "text-label-m-medium", color: "var(--text-default-heading)", children: name }),
           /* @__PURE__ */ jsxs38("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
-            showSwapDriver && /* @__PURE__ */ jsx52(HoverTip, { label: swapTooltip, children: /* @__PURE__ */ jsx52(Button, { variant: "secondary", size: "extra-small", iconOnly: "Swap", "aria-label": "Change driver", onClick: onSwapDriver }) }),
-            /* @__PURE__ */ jsx52(HoverTip, { label: callTooltip, children: /* @__PURE__ */ jsx52(Button, { variant: "secondary", size: "extra-small", iconOnly: "Phone", iconOutlined: true, "aria-label": "Call driver", onClick: onCallDriver }) })
+            showSwapDriver && /* @__PURE__ */ jsx52(HoverTip, { label: swapTooltip, children: /* @__PURE__ */ jsx52(Button, { variant: "secondary", size: "extra-small", iconOnly: "Swap", "aria-label": "Change Driver", onClick: onSwapDriver }) }),
+            /* @__PURE__ */ jsx52(HoverTip, { label: callTooltip, children: /* @__PURE__ */ jsx52(Button, { variant: "secondary", size: "extra-small", iconOnly: "Phone", iconOutlined: true, "aria-label": "Call Driver", onClick: onCallDriver }) })
           ] })
         ] }) : (
           // Finished orders — name only, centered against the avatar (no actions).
@@ -6350,7 +6363,7 @@ var Pagination = /* @__PURE__ */ React54.forwardRef(function Pagination2({
                 variant: "secondary",
                 size: "small",
                 iconRight: "Chevron-Down",
-                "aria-label": "Rows per page",
+                "aria-label": "Rows per Page",
                 onClick: () => onRowsPerPageClick?.(),
                 children: rowsPerPage
               }
@@ -7016,7 +7029,7 @@ var TopFilter = /* @__PURE__ */ React56.forwardRef(
     const [pressed, setPressed] = React56.useState(false);
     const bg = pressed ? "var(--surface-neutral-top-filter-tab-pressed)" : hovered ? "var(--surface-neutral-top-filter-tab-hover)" : selected ? "var(--surface-neutral-top-filter-tab-active)" : "var(--surface-neutral-top-filter-tab-idle)";
     const border = selected ? "var(--border-secondary-top-filter-tab-active)" : pressed ? "var(--border-neutral-top-filter-tab-pressed)" : hovered ? "var(--border-neutral-top-filter-tab-hover)" : "var(--border-neutral-top-filter-tab-idle)";
-    return /* @__PURE__ */ jsxs41(
+    return /* @__PURE__ */ jsx56(
       "button",
       {
         ref,
@@ -7026,7 +7039,6 @@ var TopFilter = /* @__PURE__ */ React56.forwardRef(
         style: {
           display: "inline-flex",
           alignItems: "center",
-          gap: "var(--spacing-8px)",
           height: 40,
           paddingTop: "var(--padding-8px)",
           paddingBottom: "var(--padding-8px)",
@@ -7036,7 +7048,10 @@ var TopFilter = /* @__PURE__ */ React56.forwardRef(
           borderRadius: "var(--rounding-lg)",
           backgroundColor: bg,
           color: "var(--text-default-label)",
-          boxShadow: `inset 0 0 0 var(--stroke-sm) ${border}`,
+          // 1px unselected, 1.5px selected — the weight is part of how a
+          // selected filter reads, not decoration (Figma 2026-09-25: all six
+          // unselected variants are 1, all six selected are 1.5).
+          boxShadow: `inset 0 0 0 ${selected ? "var(--stroke-sm)" : "var(--stroke-xs)"} ${border}`,
           border: "none",
           cursor: "pointer",
           userSelect: "none",
@@ -7062,11 +7077,22 @@ var TopFilter = /* @__PURE__ */ React56.forwardRef(
           onMouseUp?.(e);
         },
         ...rest,
-        children: [
-          label,
-          advanced && selected && badge,
-          advanced && /* @__PURE__ */ jsx56(Icon30, { name: "Chevron-Down", size: 16, color: "var(--icons-neutral-button)" })
-        ]
+        children: /* @__PURE__ */ jsxs41(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "var(--spacing-8px)",
+              padding: "var(--padding-4px) var(--padding-6px)"
+            },
+            children: [
+              label,
+              advanced && selected && badge,
+              advanced && /* @__PURE__ */ jsx56(Icon30, { name: "Chevron-Down", size: 16, color: "var(--icons-neutral-button)" })
+            ]
+          }
+        )
       }
     );
   }
@@ -8772,7 +8798,15 @@ function useScrollEdges(containerRef) {
       mo?.disconnect();
     };
   });
-  React71.useEffect(() => () => detachRef.current(), []);
+  React71.useEffect(
+    () => () => {
+      detachRef.current();
+      detachRef.current = () => {
+      };
+      attachedRef.current = null;
+    },
+    []
+  );
   return edges;
 }
 
@@ -8880,7 +8914,7 @@ var ModalHeaders = /* @__PURE__ */ React73.forwardRef(
                     {
                       type: "button",
                       onClick: onNavBack,
-                      "aria-label": "Go back",
+                      "aria-label": "Go Back",
                       className: "leta-modal-nav-arrow",
                       children: /* @__PURE__ */ jsx71(Icon35, { name: "Arrow-Left", size: "xl", "aria-hidden": true })
                     }
@@ -9127,10 +9161,393 @@ var ModalShell = /* @__PURE__ */ React76.forwardRef(
   }
 );
 
-// src/DesktopMetricCard/DesktopMetricCard.tsx
+// src/Popover/Popover.tsx
+import * as React78 from "react";
+import { createPortal as createPortal2 } from "react-dom";
+
+// src/utils/useRovingFocus.ts
 import * as React77 from "react";
+function useRovingFocus(ref) {
+  React77.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (el.contains(document.activeElement)) return;
+    if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
+    el.focus({ preventScroll: true });
+  }, []);
+  React77.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const items = () => {
+      const rows = [...el.querySelectorAll('.leta-dmo[tabindex="0"]')];
+      if (rows.length > 0) return rows.filter(isVisible);
+      return [...el.querySelectorAll(".leta-dmo input, .leta-dmo button")].filter(isVisible);
+    };
+    const onKeyDown = (e) => {
+      const isArrow = e.key === "ArrowDown" || e.key === "ArrowUp";
+      const isEdge = e.key === "Home" || e.key === "End";
+      if (!isArrow && !isEdge) return;
+      if (isEdge && isTextEntry(e.target)) return;
+      const list = items();
+      if (list.length === 0) return;
+      const active = document.activeElement;
+      const at = active ? list.indexOf(active) : -1;
+      let next;
+      if (e.key === "Home") next = 0;
+      else if (e.key === "End") next = list.length - 1;
+      else if (at === -1) next = e.key === "ArrowDown" ? 0 : list.length - 1;
+      else next = (at + (e.key === "ArrowDown" ? 1 : -1) + list.length) % list.length;
+      e.preventDefault();
+      list[next]?.focus();
+      list[next]?.scrollIntoView({ block: "nearest" });
+    };
+    el.addEventListener("keydown", onKeyDown);
+    return () => el.removeEventListener("keydown", onKeyDown);
+  });
+}
+function isVisible(el) {
+  return el.offsetParent !== null || el.getClientRects().length > 0;
+}
+function isTextEntry(target) {
+  const el = target;
+  if (!el) return false;
+  const tag = el.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || el.isContentEditable;
+}
+
+// src/Popover/Popover.tsx
+import { Fragment as Fragment15, jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
+var POPOVER_STYLE_ID = "leta-popover-motion";
+var POPOVER_CSS = `
+@keyframes leta-popover-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes leta-popover-out {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(-4px) scale(0.98); }
+}
+.leta-popover-panel { animation: leta-popover-in 140ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; }
+.leta-popover-panel.exiting { animation: leta-popover-out 100ms cubic-bezier(0.4, 0, 1, 1) forwards; }
+@media (prefers-reduced-motion: reduce) { .leta-popover-panel, .leta-popover-panel.exiting { animation: none; } }
+/* Scrollable dropdown lists show NO scrollbar chrome \u2014 the scroll affordance is the
+   list height instead: it's sized so the last visible option is partially cut off. */
+.leta-popover-list { scrollbar-width: none; -ms-overflow-style: none; }
+.leta-popover-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
+`;
+function ensurePopoverStyles() {
+  if (typeof document === "undefined" || document.getElementById(POPOVER_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = POPOVER_STYLE_ID;
+  el.textContent = POPOVER_CSS;
+  document.head.appendChild(el);
+}
+var currentOwner = null;
+var currentForceClose = null;
+function Popover({
+  anchorRect,
+  onClose,
+  placement = "bottom-start",
+  flip = true,
+  offset = 4,
+  children
+}) {
+  const panelRef = React78.useRef(null);
+  const [pos, setPos] = React78.useState(null);
+  const [exiting, setExiting] = React78.useState(false);
+  const exitTimerRef = React78.useRef(null);
+  ensurePopoverStyles();
+  const onCloseRef = React78.useRef(onClose);
+  onCloseRef.current = onClose;
+  const handleClose = React78.useCallback(() => {
+    if (exiting) return;
+    setExiting(true);
+    exitTimerRef.current = setTimeout(() => {
+      onClose();
+    }, 110);
+  }, [exiting, onClose]);
+  React78.useEffect(() => () => {
+    if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
+  }, []);
+  React78.useEffect(() => {
+    if (exitTimerRef.current) {
+      clearTimeout(exitTimerRef.current);
+      exitTimerRef.current = null;
+    }
+    setExiting(false);
+  }, [anchorRect]);
+  useEscapeLayer(!exiting, handleClose);
+  React78.useEffect(() => {
+    const id = /* @__PURE__ */ Symbol("popover");
+    const triggerEl = document.activeElement;
+    if (currentOwner !== null && currentForceClose) currentForceClose();
+    currentOwner = id;
+    currentForceClose = () => onCloseRef.current();
+    return () => {
+      if (currentOwner === id) {
+        currentOwner = null;
+        currentForceClose = null;
+      }
+      triggerEl?.focus?.();
+    };
+  }, []);
+  const reposition = React78.useCallback(() => {
+    if (!anchorRect || !panelRef.current) return;
+    const panel = panelRef.current.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const margin = 8;
+    const isEnd = placement === "bottom-end" || placement === "top-end";
+    const above = placement === "top-start" || placement === "top-end";
+    const aboveOffset = offset + 8;
+    const horizontal = isEnd ? { right: Math.max(margin, vw - anchorRect.right) } : { left: Math.max(margin, Math.min(anchorRect.left, vw - panel.width - margin)) };
+    if (above) {
+      const bottom = Math.max(margin, vh - anchorRect.top + aboveOffset);
+      setPos({ ...horizontal, bottom });
+      return;
+    }
+    let top = anchorRect.bottom + offset;
+    if (!flip) {
+      setPos({ ...horizontal, top });
+      return;
+    }
+    if (top + panel.height > vh - margin && anchorRect.top - aboveOffset - panel.height > margin) {
+      top = anchorRect.top - aboveOffset - panel.height;
+    }
+    top = Math.max(margin, Math.min(top, vh - panel.height - margin));
+    setPos({ ...horizontal, top });
+  }, [anchorRect, placement, flip, offset]);
+  React78.useLayoutEffect(() => {
+    reposition();
+  }, [reposition]);
+  React78.useEffect(() => {
+    const el = panelRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => reposition());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [reposition]);
+  if (!anchorRect) return null;
+  return createPortal2(
+    /* @__PURE__ */ jsxs53(Fragment15, { children: [
+      /* @__PURE__ */ jsx73(
+        "div",
+        {
+          "aria-hidden": true,
+          onClick: (e) => {
+            e.stopPropagation();
+            handleClose();
+          },
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 1999,
+            // Inert from the instant the close is REQUESTED, not when the timer
+            // fires. This is what makes a frozen exit timer cost a stale node
+            // instead of a page that has stopped responding to clicks.
+            pointerEvents: exiting ? "none" : "auto"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx73(
+        "div",
+        {
+          ref: panelRef,
+          className: pos ? `leta-popover-panel${exiting ? " exiting" : ""}` : void 0,
+          onClick: (e) => e.stopPropagation(),
+          style: {
+            position: "fixed",
+            // Exactly one horizontal anchor: `right` for end-aligned placements (see
+            // `reposition`), `left` otherwise. Setting both would stretch the panel.
+            ...pos?.right != null ? { right: pos.right } : { left: pos?.left ?? anchorRect.left },
+            ...pos?.bottom != null ? { bottom: pos.bottom } : { top: pos?.top ?? anchorRect.bottom + offset },
+            zIndex: 2e3,
+            transformOrigin: `${placement.startsWith("top") ? "bottom" : "top"} ${placement.endsWith("end") ? "right" : "left"}`,
+            // Hide until measured to avoid a one-frame jump.
+            visibility: pos ? "visible" : "hidden"
+          },
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function MenuPanel({
+  width = 220,
+  children
+}) {
+  const panelRef = React78.useRef(null);
+  useRovingFocus(panelRef);
+  return /* @__PURE__ */ jsx73(
+    "div",
+    {
+      ref: panelRef,
+      role: "menu",
+      style: {
+        width,
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--spacing-4px)",
+        padding: "var(--padding-8px)",
+        backgroundColor: "var(--surface-neutral-bg-default)",
+        border: "var(--stroke-xs) solid var(--border-neutral-default)",
+        borderRadius: "var(--rounding-xl)",
+        boxShadow: "var(--shadow-neutral-3)"
+      },
+      children
+    }
+  );
+}
+function MenuDivider({ inset = false } = {}) {
+  return /* @__PURE__ */ jsx73(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        height: "var(--stroke-xs)",
+        backgroundColor: "var(--border-neutral-default)",
+        marginTop: "var(--spacing-4px)",
+        marginBottom: "var(--spacing-4px)",
+        ...inset ? null : {
+          marginLeft: "calc(-1 * var(--padding-8px))",
+          marginRight: "calc(-1 * var(--padding-8px))"
+        }
+      }
+    }
+  );
+}
+function MenuFlyout({
+  rowRect,
+  prefer = "right",
+  children
+}) {
+  const ref = React78.useRef(null);
+  const [pos, setPos] = React78.useState(null);
+  React78.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const gap = 8;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const rightOf = rowRect.right + gap;
+    const leftOf = rowRect.left - w - gap;
+    let left = prefer === "right" ? rightOf : leftOf;
+    if (prefer === "right" ? left + w > window.innerWidth - 8 : left < 8) {
+      left = prefer === "right" ? leftOf : rightOf;
+    }
+    left = Math.max(8, Math.min(left, window.innerWidth - w - 8));
+    let top = rowRect.top - 8;
+    top = Math.max(8, Math.min(top, window.innerHeight - h - 8));
+    setPos({ left, top });
+  }, [rowRect, prefer]);
+  return createPortal2(
+    /* @__PURE__ */ jsx73(
+      "div",
+      {
+        ref,
+        onClick: (e) => e.stopPropagation(),
+        style: {
+          position: "fixed",
+          left: pos?.left ?? rowRect.left,
+          top: pos?.top ?? rowRect.top,
+          zIndex: 2001,
+          // Hidden until measured, so it never paints at the fallback position first.
+          visibility: pos ? "visible" : "hidden"
+        },
+        children
+      }
+    ),
+    document.body
+  );
+}
+
+// src/DialogOverlay/DialogOverlay.tsx
+import * as React79 from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { Fragment as Fragment16, jsx as jsx74, jsxs as jsxs54 } from "react/jsx-runtime";
+var DIALOG_OVERLAY_DEFAULT_TIER = 1600;
+var EXIT_MS = 160;
+var stylesInjected = false;
+function ensureStyles21() {
+  if (stylesInjected || typeof document === "undefined") return;
+  stylesInjected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-leta", "dialog-overlay");
+  el.textContent = `
+.leta-dialog-scrim { opacity: 0; transition: opacity 220ms ease-out; }
+.leta-dialog-scrim.open { opacity: 1; }
+.leta-dialog-scrim.closing { transition: opacity ${EXIT_MS}ms ease-in; opacity: 0; }
+.leta-dialog-panel { opacity: 0; transform: translate(-50%, -50%) scale(0.96); transition: opacity 220ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.2, 0, 0, 1); }
+.leta-dialog-panel.open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+.leta-dialog-panel.closing { transition: opacity ${EXIT_MS}ms ease-in, transform ${EXIT_MS}ms ease-in; opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
+@media (prefers-reduced-motion: reduce) {
+  .leta-dialog-scrim, .leta-dialog-scrim.open, .leta-dialog-scrim.closing,
+  .leta-dialog-panel, .leta-dialog-panel.open, .leta-dialog-panel.closing { transition: none; }
+}`;
+  document.head.appendChild(el);
+}
+function DialogOverlay({
+  onClose,
+  children,
+  extra,
+  tier = DIALOG_OVERLAY_DEFAULT_TIER
+}) {
+  ensureStyles21();
+  const [closing, setClosing] = React79.useState(false);
+  const [entered, setEntered] = React79.useState(false);
+  React79.useEffect(() => {
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setEntered(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, []);
+  const exitTimerRef = React79.useRef(null);
+  React79.useEffect(() => () => {
+    if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
+  }, []);
+  const closeAnd = (fn) => {
+    if (closing) return;
+    setClosing(true);
+    exitTimerRef.current = setTimeout(fn, EXIT_MS);
+  };
+  const close = () => closeAnd(onClose);
+  const stateClass = closing ? "closing" : entered ? "open" : "";
+  return createPortal3(
+    /* @__PURE__ */ jsxs54(Fragment16, { children: [
+      /* @__PURE__ */ jsx74(
+        "div",
+        {
+          "aria-hidden": true,
+          onClick: close,
+          className: `leta-dialog-scrim ${stateClass}`,
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "var(--leta-overlay-scrim, rgba(16,16,16,0.4))",
+            zIndex: tier,
+            // Inert from the close REQUEST — a frozen exit timer must never leave a
+            // click-blocking surface behind.
+            pointerEvents: closing ? "none" : "auto"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx74("div", { className: `leta-dialog-panel ${stateClass}`, style: { position: "fixed", top: "50%", left: "50%", zIndex: tier + 1 }, children: children({ close, closeAnd }) }),
+      extra
+    ] }),
+    document.body
+  );
+}
+
+// src/DesktopMetricCard/DesktopMetricCard.tsx
+import * as React80 from "react";
 import { Icon as Icon36 } from "@leta-io/icons";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var VARIANCE_BADGE = {
   neutral: { color: "neutral" },
   positive: { color: "success", icon: "Up-Arrow" },
@@ -9143,7 +9560,7 @@ var STYLES16 = `
     outline-offset: 4px;
   }
 `;
-function ensureStyles21() {
+function ensureStyles22() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID25)) return;
   const el = document.createElement("style");
@@ -9175,7 +9592,7 @@ var STATE_STYLE = {
     ring: true
   }
 };
-var DesktopMetricCard = /* @__PURE__ */ React77.forwardRef(
+var DesktopMetricCard = /* @__PURE__ */ React80.forwardRef(
   function DesktopMetricCard2({
     metric = "10",
     eyebrowText = "This week",
@@ -9196,9 +9613,9 @@ var DesktopMetricCard = /* @__PURE__ */ React77.forwardRef(
     onMouseUp,
     ...rest
   }, ref) {
-    ensureStyles21();
-    const [hovered, setHovered] = React77.useState(false);
-    const [pressed, setPressed] = React77.useState(false);
+    ensureStyles22();
+    const [hovered, setHovered] = React80.useState(false);
+    const [pressed, setPressed] = React80.useState(false);
     const state = forcedState ?? (pressed ? "pressed" : hovered ? "hover" : "default");
     const hasVariance = variance !== "none";
     const varianceBadge = hasVariance ? VARIANCE_BADGE[variance] : void 0;
@@ -9231,8 +9648,8 @@ var DesktopMetricCard = /* @__PURE__ */ React77.forwardRef(
       ...ringStyle,
       ...style
     };
-    const trailing = trailingContent === void 0 ? /* @__PURE__ */ jsx73(Icon36, { name: "Proceed", size: 20 }) : trailingContent;
-    return /* @__PURE__ */ jsx73(
+    const trailing = trailingContent === void 0 ? /* @__PURE__ */ jsx75(Icon36, { name: "Proceed", size: 20 }) : trailingContent;
+    return /* @__PURE__ */ jsx75(
       "button",
       {
         ref,
@@ -9257,7 +9674,7 @@ var DesktopMetricCard = /* @__PURE__ */ React77.forwardRef(
           onMouseUp?.(e);
         },
         ...rest,
-        children: /* @__PURE__ */ jsx73(
+        children: /* @__PURE__ */ jsx75(
           ContentPrimitives,
           {
             type: "metrics",
@@ -9284,8 +9701,8 @@ var DesktopMetricCard = /* @__PURE__ */ React77.forwardRef(
 );
 
 // src/OptionCard/OptionCard.tsx
-import * as React78 from "react";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import * as React81 from "react";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var STYLE_ID26 = "leta-option-card-styles";
 var STYLES17 = `
   /* The focusable element is the nested radio <input>; draw the focus ring
@@ -9295,7 +9712,7 @@ var STYLES17 = `
     outline-offset: 4px;
   }
 `;
-function ensureStyles22() {
+function ensureStyles23() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID26)) return;
   const el = document.createElement("style");
@@ -9324,7 +9741,7 @@ var SHADOW = {
   active: null,
   focus: null
 };
-var OptionCard = /* @__PURE__ */ React78.forwardRef(
+var OptionCard = /* @__PURE__ */ React81.forwardRef(
   function OptionCard2({
     title,
     description = "Enter description here",
@@ -9344,9 +9761,9 @@ var OptionCard = /* @__PURE__ */ React78.forwardRef(
     onMouseUp,
     ...rest
   }, ref) {
-    ensureStyles22();
-    const [hovered, setHovered] = React78.useState(false);
-    const [pressed, setPressed] = React78.useState(false);
+    ensureStyles23();
+    const [hovered, setHovered] = React81.useState(false);
+    const [pressed, setPressed] = React81.useState(false);
     const state = forcedState ?? (selected ? "active" : pressed ? "pressed" : hovered ? "hover" : "idle");
     const rootStyle = {
       display: "flex",
@@ -9369,7 +9786,7 @@ var OptionCard = /* @__PURE__ */ React78.forwardRef(
       } : {},
       ...style
     };
-    return /* @__PURE__ */ jsx74(
+    return /* @__PURE__ */ jsx76(
       "label",
       {
         ref,
@@ -9393,7 +9810,7 @@ var OptionCard = /* @__PURE__ */ React78.forwardRef(
           onMouseUp?.(e);
         },
         ...rest,
-        children: /* @__PURE__ */ jsx74(
+        children: /* @__PURE__ */ jsx76(
           ContentPrimitives,
           {
             type: "utility",
@@ -9404,7 +9821,7 @@ var OptionCard = /* @__PURE__ */ React78.forwardRef(
             showPassiveElements: false,
             showInteractiveElements: showTrailing,
             contentAlign: "top",
-            interactiveElements: showTrailing ? trailing ?? /* @__PURE__ */ jsx74(
+            interactiveElements: showTrailing ? trailing ?? /* @__PURE__ */ jsx76(
               RadioButton,
               {
                 checked: selected,
@@ -9423,10 +9840,10 @@ var OptionCard = /* @__PURE__ */ React78.forwardRef(
 );
 
 // src/ContentCard/ContentCard.tsx
-import * as React79 from "react";
-import { jsx as jsx75 } from "react/jsx-runtime";
-var ContentCard = /* @__PURE__ */ React79.forwardRef(function ContentCard2({ children, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx75(
+import * as React82 from "react";
+import { jsx as jsx77 } from "react/jsx-runtime";
+var ContentCard = /* @__PURE__ */ React82.forwardRef(function ContentCard2({ children, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx77(
     "div",
     {
       ref,
@@ -9438,12 +9855,17 @@ var ContentCard = /* @__PURE__ */ React79.forwardRef(function ContentCard2({ chi
         gap: "var(--spacing-16px)",
         padding: "var(--padding-20px)",
         borderRadius: "var(--rounding-xl)",
-        border: "var(--stroke-xs) solid var(--border-neutral-default)",
+        // Painted as an inset shadow, not a `border` — Figma strokes this card
+        // INSIDE, which adds nothing to its size. A real 1px border in a
+        // `border-box` card with no fixed height adds 2px, so every Content Card
+        // measured 2px taller than designed (86 against the Broadcasting Status
+        // Card's 84). The repo's own convention for strokes, applied late here.
+        boxShadow: "inset 0 0 0 var(--stroke-xs) var(--border-neutral-default)",
         backgroundColor: "var(--surface-neutral-bg-default)",
         ...style
       },
       ...rest,
-      children: children ?? /* @__PURE__ */ jsx75(
+      children: children ?? /* @__PURE__ */ jsx77(
         ContentPrimitives,
         {
           type: "utility",
@@ -9451,7 +9873,7 @@ var ContentCard = /* @__PURE__ */ React79.forwardRef(function ContentCard2({ chi
           subtext: "Enter description here",
           showVisualAnchor: false,
           showInteractiveElements: true,
-          interactiveElements: /* @__PURE__ */ jsx75(Button, { variant: "secondary", size: "medium", children: "Dispatch" })
+          interactiveElements: /* @__PURE__ */ jsx77(Button, { variant: "secondary", size: "medium", children: "Dispatch" })
         }
       )
     }
@@ -9459,10 +9881,10 @@ var ContentCard = /* @__PURE__ */ React79.forwardRef(function ContentCard2({ chi
 });
 
 // src/ContentCard/StackedCards.tsx
-import * as React80 from "react";
-import { Fragment as Fragment15, jsx as jsx76, jsxs as jsxs53 } from "react/jsx-runtime";
-var StackedCards = /* @__PURE__ */ React80.forwardRef(function StackedCards2({ children, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx76(
+import * as React83 from "react";
+import { Fragment as Fragment17, jsx as jsx78, jsxs as jsxs55 } from "react/jsx-runtime";
+var StackedCards = /* @__PURE__ */ React83.forwardRef(function StackedCards2({ children, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       ref,
@@ -9476,20 +9898,20 @@ var StackedCards = /* @__PURE__ */ React80.forwardRef(function StackedCards2({ c
         ...style
       },
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs53(Fragment15, { children: [
-        /* @__PURE__ */ jsx76(ContentCard, {}),
-        /* @__PURE__ */ jsx76(ContentCard, {})
+      children: children ?? /* @__PURE__ */ jsxs55(Fragment17, { children: [
+        /* @__PURE__ */ jsx78(ContentCard, {}),
+        /* @__PURE__ */ jsx78(ContentCard, {})
       ] })
     }
   );
 });
 
 // src/InputSection/InputSection.tsx
-import * as React81 from "react";
-import { jsx as jsx77, jsxs as jsxs54 } from "react/jsx-runtime";
+import * as React84 from "react";
+import { jsx as jsx79, jsxs as jsxs56 } from "react/jsx-runtime";
 var DASHED = "var(--stroke-xs) dashed var(--border-neutral-default)";
 function FormDemarcator({ style, ...rest }) {
-  return /* @__PURE__ */ jsx77("div", { role: "separator", "aria-orientation": "horizontal", style: { width: "100%", height: 0, borderTop: DASHED, ...style }, ...rest });
+  return /* @__PURE__ */ jsx79("div", { role: "separator", "aria-orientation": "horizontal", style: { width: "100%", height: 0, borderTop: DASHED, ...style }, ...rest });
 }
 var DEFAULT_FIELDS = Array.from({ length: 8 }, () => ({
   variant: "basic",
@@ -9497,15 +9919,15 @@ var DEFAULT_FIELDS = Array.from({ length: 8 }, () => ({
   placeholder: "Field Text",
   showHelper: false
 }));
-var InputGroup = /* @__PURE__ */ React81.forwardRef(function InputGroup2({ title = "Group Name", description = "Provide details for this group", fields = DEFAULT_FIELDS, headerTrailing, header, children, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs54(
+var InputGroup = /* @__PURE__ */ React84.forwardRef(function InputGroup2({ title = "Group Name", description = "Provide details for this group", fields = DEFAULT_FIELDS, headerTrailing, header, children, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs56(
     "div",
     {
       ref,
       style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", width: "100%", boxSizing: "border-box", ...style },
       ...rest,
       children: [
-        header ?? /* @__PURE__ */ jsx77(
+        header ?? /* @__PURE__ */ jsx79(
           ContentPrimitives,
           {
             type: "group-header",
@@ -9518,21 +9940,21 @@ var InputGroup = /* @__PURE__ */ React81.forwardRef(function InputGroup2({ title
             interactiveElements: headerTrailing
           }
         ),
-        children ?? /* @__PURE__ */ jsx77("div", { style: { display: "flex", flexWrap: "wrap", columnGap: "var(--spacing-32px)", rowGap: "var(--spacing-20px)", width: "100%" }, children: fields.map((f, i) => /* @__PURE__ */ jsx77("div", { style: { flex: "1 1 calc(50% - (var(--spacing-32px) / 2))", minWidth: 240 }, children: /* @__PURE__ */ jsx77(InputField, { ...f, style: { width: "100%", ...f.style } }) }, i)) })
+        children ?? /* @__PURE__ */ jsx79("div", { style: { display: "flex", flexWrap: "wrap", columnGap: "var(--spacing-32px)", rowGap: "var(--spacing-20px)", width: "100%" }, children: fields.map((f, i) => /* @__PURE__ */ jsx79("div", { style: { flex: "1 1 calc(50% - (var(--spacing-32px) / 2))", minWidth: 240 }, children: /* @__PURE__ */ jsx79(InputField, { ...f, style: { width: "100%", ...f.style } }) }, i)) })
       ]
     }
   );
 });
-var InputSection = /* @__PURE__ */ React81.forwardRef(function InputSection2({ title = "Text", description = "Enter description here", showChevron = true, defaultOpen = true, onToggle, header, children, style, ...rest }, ref) {
-  const [open, setOpen] = React81.useState(defaultOpen);
+var InputSection = /* @__PURE__ */ React84.forwardRef(function InputSection2({ title = "Text", description = "Enter description here", showChevron = true, defaultOpen = true, onToggle, header, children, style, ...rest }, ref) {
+  const [open, setOpen] = React84.useState(defaultOpen);
   const toggle = () => onToggle ? onToggle() : setOpen((o) => !o);
-  const items = React81.Children.toArray(children ?? [/* @__PURE__ */ jsx77(InputGroup, {}, "g1"), /* @__PURE__ */ jsx77(InputGroup, {}, "g2")]);
+  const items = React84.Children.toArray(children ?? [/* @__PURE__ */ jsx79(InputGroup, {}, "g1"), /* @__PURE__ */ jsx79(InputGroup, {}, "g2")]);
   const body = [];
   items.forEach((child, i) => {
-    if (i > 0) body.push(/* @__PURE__ */ jsx77(FormDemarcator, {}, `d${i}`));
+    if (i > 0) body.push(/* @__PURE__ */ jsx79(FormDemarcator, {}, `d${i}`));
     body.push(child);
   });
-  return /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs56(
     "div",
     {
       ref,
@@ -9540,7 +9962,7 @@ var InputSection = /* @__PURE__ */ React81.forwardRef(function InputSection2({ t
       style: { display: "flex", flexDirection: "column", gap: 0, width: "100%", boxSizing: "border-box", backgroundColor: "var(--surface-neutral-bg-default)", ...style },
       ...rest,
       children: [
-        header ?? (showChevron ? /* @__PURE__ */ jsx77(AccordionHeader, { open, onToggle: toggle, children: /* @__PURE__ */ jsx77(
+        header ?? (showChevron ? /* @__PURE__ */ jsx79(AccordionHeader, { open, onToggle: toggle, children: /* @__PURE__ */ jsx79(
           ContentPrimitives,
           {
             type: "section-heading",
@@ -9548,10 +9970,10 @@ var InputSection = /* @__PURE__ */ React81.forwardRef(function InputSection2({ t
             subtext: description,
             showTrailingContent: true,
             showInteractiveElements: true,
-            interactiveElements: /* @__PURE__ */ jsx77(AccordionChevron, { open, onToggle: toggle }),
+            interactiveElements: /* @__PURE__ */ jsx79(AccordionChevron, { open, onToggle: toggle }),
             showPassiveElements: false
           }
-        ) }) : /* @__PURE__ */ jsx77(
+        ) }) : /* @__PURE__ */ jsx79(
           ContentPrimitives,
           {
             type: "section-heading",
@@ -9562,22 +9984,22 @@ var InputSection = /* @__PURE__ */ React81.forwardRef(function InputSection2({ t
             showPassiveElements: false
           }
         )),
-        /* @__PURE__ */ jsx77(AccordionContent, { open: showChevron ? open : true, gap: "var(--spacing-24px)", children: body })
+        /* @__PURE__ */ jsx79(AccordionContent, { open: showChevron ? open : true, gap: "var(--spacing-24px)", children: body })
       ]
     }
   );
 });
 
 // src/Toast/Toast.tsx
-import * as React82 from "react";
+import * as React85 from "react";
 import { Icon as Icon37 } from "@leta-io/icons";
-import { jsx as jsx78, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs57 } from "react/jsx-runtime";
 var TYPE_CONFIG2 = {
   success: { icon: "Check-Circle", iconColor: "var(--icons-success-default)" },
   warning: { icon: "Warning", iconColor: "var(--icons-warning-default)" },
   error: { icon: "Cancel-Circle", iconColor: "var(--icons-error-default)" }
 };
-var Toast = /* @__PURE__ */ React82.forwardRef(function Toast2({
+var Toast = /* @__PURE__ */ React85.forwardRef(function Toast2({
   type = "success",
   title = "Toast Title",
   showTitle = true,
@@ -9592,7 +10014,7 @@ var Toast = /* @__PURE__ */ React82.forwardRef(function Toast2({
 }, ref) {
   const config = TYPE_CONFIG2[type];
   const isDestructive = type === "error";
-  React82.useEffect(() => {
+  React85.useEffect(() => {
     if (!duration || !onDismiss) return;
     const t = setTimeout(onDismiss, duration);
     return () => clearTimeout(t);
@@ -9612,7 +10034,7 @@ var Toast = /* @__PURE__ */ React82.forwardRef(function Toast2({
     boxShadow: "inset 0 0 0 var(--stroke-xs) var(--border-neutral-default), var(--shadow-neutral-2)",
     ...style
   };
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs57(
     "div",
     {
       ref,
@@ -9621,16 +10043,16 @@ var Toast = /* @__PURE__ */ React82.forwardRef(function Toast2({
       style: rootStyle,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs55("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-12px)", minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx78("div", { style: { flexShrink: 0, width: 24, height: 24, color: config.iconColor }, children: /* @__PURE__ */ jsx78(Icon37, { name: config.icon, outlined: false, size: 24 }) }),
-          /* @__PURE__ */ jsxs55("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-2px)", minWidth: 0 }, children: [
-            showTitle && title && /* @__PURE__ */ jsx78("span", { className: "text-body-l-medium", style: { color: "var(--text-default-heading)" }, children: title }),
-            showSubtitle && subtitle && /* @__PURE__ */ jsx78("span", { className: "text-body-m-regular", style: { color: "var(--text-default-sub-body)" }, children: subtitle })
+        /* @__PURE__ */ jsxs57("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-12px)", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx80("div", { style: { flexShrink: 0, width: 24, height: 24, color: config.iconColor }, children: /* @__PURE__ */ jsx80(Icon37, { name: config.icon, outlined: false, size: 24 }) }),
+          /* @__PURE__ */ jsxs57("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-2px)", minWidth: 0 }, children: [
+            showTitle && title && /* @__PURE__ */ jsx80("span", { className: "text-body-l-medium", style: { color: "var(--text-default-heading)" }, children: title }),
+            showSubtitle && subtitle && /* @__PURE__ */ jsx80("span", { className: "text-body-m-regular", style: { color: "var(--text-default-sub-body)" }, children: subtitle })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs55("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxs57("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", flexShrink: 0 }, children: [
           showCTA && children,
-          onDismiss && /* @__PURE__ */ jsx78(
+          onDismiss && /* @__PURE__ */ jsx80(
             Button,
             {
               variant: "ghost",
@@ -9648,24 +10070,24 @@ var Toast = /* @__PURE__ */ React82.forwardRef(function Toast2({
 });
 
 // src/DateTimePicker/DateTimePicker.tsx
-import * as React85 from "react";
+import * as React88 from "react";
 import { Icon as Icon40 } from "@leta-io/icons";
 
 // src/DateTimePicker/Calendar.tsx
-import * as React84 from "react";
+import * as React87 from "react";
 import "@leta-io/icons";
 
 // src/MobileMenuOptions/MobileMenuOptions.tsx
-import * as React83 from "react";
+import * as React86 from "react";
 import { Icon as Icon38 } from "@leta-io/icons";
-import { Fragment as Fragment16, jsx as jsx79, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx81, jsxs as jsxs58 } from "react/jsx-runtime";
 var STYLE_ID27 = "leta-mmo-styles";
 var STYLES18 = `
   .leta-mmo { cursor: pointer; }
   .leta-mmo[aria-disabled="true"] { cursor: not-allowed; }
   .leta-mmo:focus-visible { outline: var(--stroke-sm) solid var(--border-secondary-component-focus); outline-offset: 2px; }
 `;
-function ensureStyles23() {
+function ensureStyles24() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID27)) return;
   const el = document.createElement("style");
@@ -9707,9 +10129,9 @@ function borderVar3(type, press, active, disabled) {
       return null;
   }
 }
-var MobileMenuOptions = /* @__PURE__ */ React83.forwardRef(function MobileMenuOptions2({ type = "combobox", label = "Insert Text", leadingIcon, showLeadingIcon = false, active = false, selected = false, disabled = false, state, onSelect, className, style, role, ...rest }, ref) {
-  ensureStyles23();
-  const [press, setPress] = React83.useState(false);
+var MobileMenuOptions = /* @__PURE__ */ React86.forwardRef(function MobileMenuOptions2({ type = "combobox", label = "Insert Text", leadingIcon, showLeadingIcon = false, active = false, selected = false, disabled = false, state, onSelect, className, style, role, ...rest }, ref) {
+  ensureStyles24();
+  const [press, setPress] = React86.useState(false);
   const isCell = type === "mobile-day-cell";
   const isSel = type === "checkbox-selection" || type === "radio-selection";
   const forced = state != null;
@@ -9724,7 +10146,7 @@ var MobileMenuOptions = /* @__PURE__ */ React83.forwardRef(function MobileMenuOp
   };
   let inner;
   if (isSel) {
-    inner = /* @__PURE__ */ jsx79(
+    inner = /* @__PURE__ */ jsx81(
       SelectionControl,
       {
         variant: type === "checkbox-selection" ? "checkbox" : "radio",
@@ -9735,17 +10157,17 @@ var MobileMenuOptions = /* @__PURE__ */ React83.forwardRef(function MobileMenuOp
       }
     );
   } else if (isCell) {
-    inner = /* @__PURE__ */ jsx79("span", { className: "text-label-m-regular", style: { color: textColor }, children: label });
+    inner = /* @__PURE__ */ jsx81("span", { className: "text-label-m-regular", style: { color: textColor }, children: label });
   } else {
-    inner = /* @__PURE__ */ jsxs56(Fragment16, { children: [
-      /* @__PURE__ */ jsxs56("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", flex: 1, minWidth: 0 }, children: [
-        showLeadingIcon && /* @__PURE__ */ jsx79("span", { style: { flexShrink: 0, display: "flex", color: "var(--icons-neutral-default)" }, children: /* @__PURE__ */ jsx79(Icon38, { name: leadingIcon ?? "Question", outlined: true, size: 16 }) }),
-        /* @__PURE__ */ jsx79("span", { className: "text-label-m-regular", style: { color: textColor, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label })
+    inner = /* @__PURE__ */ jsxs58(Fragment18, { children: [
+      /* @__PURE__ */ jsxs58("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", flex: 1, minWidth: 0 }, children: [
+        showLeadingIcon && /* @__PURE__ */ jsx81("span", { style: { flexShrink: 0, display: "flex", color: "var(--icons-neutral-default)" }, children: /* @__PURE__ */ jsx81(Icon38, { name: leadingIcon ?? "Question", outlined: true, size: 16 }) }),
+        /* @__PURE__ */ jsx81("span", { className: "text-label-m-regular", style: { color: textColor, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label })
       ] }),
-      active && !disabled && /* @__PURE__ */ jsx79("span", { style: { flexShrink: 0, display: "flex", color: "var(--icons-neutral-default)" }, children: /* @__PURE__ */ jsx79(Icon38, { name: "Check", size: 16 }) })
+      active && !disabled && /* @__PURE__ */ jsx81("span", { style: { flexShrink: 0, display: "flex", color: "var(--icons-neutral-default)" }, children: /* @__PURE__ */ jsx81(Icon38, { name: "Check", size: 16 }) })
     ] });
   }
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx81(
     "div",
     {
       ref,
@@ -9884,21 +10306,21 @@ function timeOptions(stepMinutes = 30) {
 }
 
 // src/DateTimePicker/Calendar.tsx
-import { jsx as jsx80, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs59 } from "react/jsx-runtime";
 var RANGE_BG = "var(--surface-neutral-bg-muted)";
-var Calendar = /* @__PURE__ */ React84.forwardRef(function Calendar2({ year, month, platform = "desktop", selected, rangeStart, rangeEnd, minDate, onSelectDay, onPrevMonth, onNextMonth, onPrevYear, onNextYear, style }, ref) {
+var Calendar = /* @__PURE__ */ React87.forwardRef(function Calendar2({ year, month, platform = "desktop", selected, rangeStart, rangeEnd, minDate, onSelectDay, onPrevMonth, onNextMonth, onPrevYear, onNextYear, style }, ref) {
   const isMobile = platform === "mobile";
   const weeks = monthMatrix(year, month);
   const minDay = minDate ? stripTime(minDate) : null;
   const isPast = (d) => minDay != null && stripTime(d) < minDay;
-  const navBtn = (icon, onClick, label) => isMobile ? /* @__PURE__ */ jsx80(Button, { variant: "secondary", size: "small", platform: "mobile", iconOnly: icon, "aria-label": label ?? icon, onClick }) : /* @__PURE__ */ jsx80(Button, { variant: "secondary", size: "small", iconOnly: icon, "aria-label": label ?? icon, onClick });
-  const header = /* @__PURE__ */ jsxs57("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: "var(--spacing-8px)", width: "100%" }, children: [
-    isMobile ? navBtn("Chevron-Left", onPrevMonth, "Previous month") : /* @__PURE__ */ jsxs57("div", { style: { display: "flex", gap: "var(--spacing-8px)" }, children: [
+  const navBtn = (icon, onClick, label) => isMobile ? /* @__PURE__ */ jsx82(Button, { variant: "secondary", size: "small", platform: "mobile", iconOnly: icon, "aria-label": label ?? icon, onClick }) : /* @__PURE__ */ jsx82(Button, { variant: "secondary", size: "small", iconOnly: icon, "aria-label": label ?? icon, onClick });
+  const header = /* @__PURE__ */ jsxs59("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: "var(--spacing-8px)", width: "100%" }, children: [
+    isMobile ? navBtn("Chevron-Left", onPrevMonth, "Previous month") : /* @__PURE__ */ jsxs59("div", { style: { display: "flex", gap: "var(--spacing-8px)" }, children: [
       navBtn("Backward", onPrevYear, "Previous year"),
       navBtn("Chevron-Left", onPrevMonth, "Previous month")
     ] }),
-    /* @__PURE__ */ jsx80("span", { className: "text-label-l-semibold", style: { color: "var(--text-default-heading)", whiteSpace: "nowrap" }, children: formatMonthYear(year, month, !isMobile) }),
-    isMobile ? navBtn("Chevron-Right", onNextMonth, "Next month") : /* @__PURE__ */ jsxs57("div", { style: { display: "flex", gap: "var(--spacing-8px)" }, children: [
+    /* @__PURE__ */ jsx82("span", { className: "text-label-l-semibold", style: { color: "var(--text-default-heading)", whiteSpace: "nowrap" }, children: formatMonthYear(year, month, !isMobile) }),
+    isMobile ? navBtn("Chevron-Right", onNextMonth, "Next month") : /* @__PURE__ */ jsxs59("div", { style: { display: "flex", gap: "var(--spacing-8px)" }, children: [
       navBtn("Chevron-Right", onNextMonth, "Next month"),
       navBtn("Forward", onNextYear, "Next year")
     ] })
@@ -9906,7 +10328,7 @@ var Calendar = /* @__PURE__ */ React84.forwardRef(function Calendar2({ year, mon
   const CELL2 = 32;
   const ROW = { display: "flex", flexDirection: "row", gap: "var(--spacing-8px)", alignItems: "center" };
   const mobileCol = { flex: 1, minWidth: 0, display: "flex", alignItems: "center", justifyContent: "center" };
-  const weekdayRow = isMobile ? /* @__PURE__ */ jsx80("div", { style: { display: "flex", width: "100%" }, children: WEEKDAYS.map((d) => /* @__PURE__ */ jsx80("div", { style: mobileCol, children: /* @__PURE__ */ jsx80("span", { className: "text-label-s-regular", style: { color: "var(--text-default-sub-body)" }, children: d }) }, d)) }) : /* @__PURE__ */ jsx80("div", { style: { ...ROW, padding: "var(--padding-8px) 0" }, children: WEEKDAYS.map((d) => /* @__PURE__ */ jsx80("span", { className: "text-label-s-regular", style: { width: CELL2, flexShrink: 0, textAlign: "center", color: "var(--text-default-sub-body)" }, children: d }, d)) });
+  const weekdayRow = isMobile ? /* @__PURE__ */ jsx82("div", { style: { display: "flex", width: "100%" }, children: WEEKDAYS.map((d) => /* @__PURE__ */ jsx82("div", { style: mobileCol, children: /* @__PURE__ */ jsx82("span", { className: "text-label-s-regular", style: { color: "var(--text-default-sub-body)" }, children: d }) }, d)) }) : /* @__PURE__ */ jsx82("div", { style: { ...ROW, padding: "var(--padding-8px) 0" }, children: WEEKDAYS.map((d) => /* @__PURE__ */ jsx82("span", { className: "text-label-s-regular", style: { width: CELL2, flexShrink: 0, textAlign: "center", color: "var(--text-default-sub-body)" }, children: d }, d)) });
   const isActive = (d) => isSameDay(d, selected) || isSameDay(d, rangeStart) || isSameDay(d, rangeEnd);
   const stripped = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
   const lo = rangeStart && rangeEnd ? Math.min(stripped(rangeStart), stripped(rangeEnd)) : null;
@@ -9915,12 +10337,12 @@ var Calendar = /* @__PURE__ */ React84.forwardRef(function Calendar2({ year, mon
   const dayCell = (date, inMonth) => {
     const day = date.getDate();
     if (!inMonth) {
-      return /* @__PURE__ */ jsx80("span", { "aria-hidden": "true", style: { width: CELL2, height: CELL2, flexShrink: 0 } });
+      return /* @__PURE__ */ jsx82("span", { "aria-hidden": "true", style: { width: CELL2, height: CELL2, flexShrink: 0 } });
     }
     const disabled = isPast(date);
-    return isMobile ? /* @__PURE__ */ jsx80(MobileMenuOptions, { type: "mobile-day-cell", label: String(day), active: isActive(date), disabled, onSelect: () => onSelectDay?.(date) }) : /* @__PURE__ */ jsx80(DesktopMenuOptions, { type: "day-cell", label: String(day), active: isActive(date), disabled, onSelect: () => onSelectDay?.(date) });
+    return isMobile ? /* @__PURE__ */ jsx82(MobileMenuOptions, { type: "mobile-day-cell", label: String(day), active: isActive(date), disabled, onSelect: () => onSelectDay?.(date) }) : /* @__PURE__ */ jsx82(DesktopMenuOptions, { type: "day-cell", label: String(day), active: isActive(date), disabled, onSelect: () => onSelectDay?.(date) });
   };
-  const middleCell = (date) => /* @__PURE__ */ jsx80(
+  const middleCell = (date) => /* @__PURE__ */ jsx82(
     "button",
     {
       type: "button",
@@ -9930,13 +10352,13 @@ var Calendar = /* @__PURE__ */ React84.forwardRef(function Calendar2({ year, mon
       children: date.getDate()
     }
   );
-  const renderWeekMobile = (week, wi) => /* @__PURE__ */ jsx80("div", { style: { display: "flex", width: "100%" }, children: week.map((cell, j) => {
+  const renderWeekMobile = (week, wi) => /* @__PURE__ */ jsx82("div", { style: { display: "flex", width: "100%" }, children: week.map((cell, j) => {
     const inR = cell.inMonth && inRangeIncl(cell.date);
     const isStart = isSameDay(cell.date, rangeStart);
     const isEnd = isSameDay(cell.date, rangeEnd);
     const single = isStart && isEnd;
-    return /* @__PURE__ */ jsxs57("div", { style: { ...mobileCol, position: "relative" }, children: [
-      inR && !single && /* @__PURE__ */ jsx80("div", { style: {
+    return /* @__PURE__ */ jsxs59("div", { style: { ...mobileCol, position: "relative" }, children: [
+      inR && !single && /* @__PURE__ */ jsx82("div", { style: {
         position: "absolute",
         top: 0,
         bottom: 0,
@@ -9948,7 +10370,7 @@ var Calendar = /* @__PURE__ */ React84.forwardRef(function Calendar2({ year, mon
         borderTopRightRadius: isEnd ? 8 : 0,
         borderBottomRightRadius: isEnd ? 8 : 0
       } }),
-      /* @__PURE__ */ jsx80("div", { style: { position: "relative" }, children: inR && !isStart && !isEnd ? middleCell(cell.date) : dayCell(cell.date, cell.inMonth) })
+      /* @__PURE__ */ jsx82("div", { style: { position: "relative" }, children: inR && !isStart && !isEnd ? middleCell(cell.date) : dayCell(cell.date, cell.inMonth) })
     ] }, j);
   }) }, wi);
   const renderWeek = (week, wi) => {
@@ -9958,7 +10380,7 @@ var Calendar = /* @__PURE__ */ React84.forwardRef(function Calendar2({ year, mon
     while (i < week.length) {
       const cell = week[i];
       if (!(cell.inMonth && inRangeIncl(cell.date))) {
-        items.push(/* @__PURE__ */ jsx80(React84.Fragment, { children: dayCell(cell.date, cell.inMonth) }, i));
+        items.push(/* @__PURE__ */ jsx82(React87.Fragment, { children: dayCell(cell.date, cell.inMonth) }, i));
         i++;
         continue;
       }
@@ -9969,23 +10391,23 @@ var Calendar = /* @__PURE__ */ React84.forwardRef(function Calendar2({ year, mon
       }
       const containsEndpoint = seg.some((c) => isSameDay(c.date, rangeStart) || isSameDay(c.date, rangeEnd));
       items.push(
-        /* @__PURE__ */ jsx80("div", { style: { display: "flex", flexDirection: "row", flexShrink: 0, gap: "var(--spacing-8px)", backgroundColor: RANGE_BG, borderRadius: containsEndpoint ? 8 : 0 }, children: seg.map((c, j) => {
+        /* @__PURE__ */ jsx82("div", { style: { display: "flex", flexDirection: "row", flexShrink: 0, gap: "var(--spacing-8px)", backgroundColor: RANGE_BG, borderRadius: containsEndpoint ? 8 : 0 }, children: seg.map((c, j) => {
           const ep = isSameDay(c.date, rangeStart) || isSameDay(c.date, rangeEnd);
-          return /* @__PURE__ */ jsx80(React84.Fragment, { children: ep ? dayCell(c.date, true) : middleCell(c.date) }, j);
+          return /* @__PURE__ */ jsx82(React87.Fragment, { children: ep ? dayCell(c.date, true) : middleCell(c.date) }, j);
         }) }, `band-${i}`)
       );
     }
-    return /* @__PURE__ */ jsx80("div", { style: ROW, children: items }, wi);
+    return /* @__PURE__ */ jsx82("div", { style: ROW, children: items }, wi);
   };
-  return /* @__PURE__ */ jsxs57("div", { ref, style: { display: "flex", flexDirection: "column", gap: isMobile ? "var(--spacing-16px)" : "var(--spacing-8px)", width: "100%", boxSizing: "border-box", ...style }, children: [
+  return /* @__PURE__ */ jsxs59("div", { ref, style: { display: "flex", flexDirection: "column", gap: isMobile ? "var(--spacing-16px)" : "var(--spacing-8px)", width: "100%", boxSizing: "border-box", ...style }, children: [
     header,
     weekdayRow,
-    /* @__PURE__ */ jsx80("div", { style: { display: "flex", flexDirection: "column", gap: isMobile ? "var(--spacing-12px)" : "var(--spacing-8px)" }, children: weeks.map((week, wi) => renderWeek(week, wi)) })
+    /* @__PURE__ */ jsx82("div", { style: { display: "flex", flexDirection: "column", gap: isMobile ? "var(--spacing-12px)" : "var(--spacing-8px)" }, children: weeks.map((week, wi) => renderWeek(week, wi)) })
   ] });
 });
 
 // src/DateTimePicker/DateTimePicker.tsx
-import { Fragment as Fragment18, jsx as jsx81, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx83, jsxs as jsxs60 } from "react/jsx-runtime";
 var RANGE_PRESETS = ["Today", "Yesterday", "Last 7 Days", "Last 30 Days", "Custom"];
 function startOfToday() {
   const d = /* @__PURE__ */ new Date();
@@ -10034,7 +10456,7 @@ function ensureDateTimePickerStyles() {
   el.textContent = DTP_CSS;
   document.head.appendChild(el);
 }
-var Demarcator = ({ vertical }) => vertical ? /* @__PURE__ */ jsx81("div", { style: { width: "var(--stroke-xs)", alignSelf: "stretch", backgroundColor: "var(--border-neutral-default)", flexShrink: 0 } }) : /* @__PURE__ */ jsx81("div", { style: { height: "var(--stroke-xs)", width: "100%", backgroundColor: "var(--border-neutral-default)" } });
+var Demarcator = ({ vertical }) => vertical ? /* @__PURE__ */ jsx83("div", { style: { width: "var(--stroke-xs)", alignSelf: "stretch", backgroundColor: "var(--border-neutral-default)", flexShrink: 0 } }) : /* @__PURE__ */ jsx83("div", { style: { height: "var(--stroke-xs)", width: "100%", backgroundColor: "var(--border-neutral-default)" } });
 function nearestTimeOption(d, step) {
   const total = d.getHours() * 60 + d.getMinutes();
   const snapped = Math.min(Math.round(total / step) * step, 24 * 60 - step);
@@ -10050,14 +10472,14 @@ var WHEEL_PERIODS = ["AM", "PM"];
 var WHEEL_H = 151;
 var WHEEL_ROW = 40;
 function WheelColumn({ values, value, onChange }) {
-  const ref = React85.useRef(null);
+  const ref = React88.useRef(null);
   const idx = Math.max(0, values.indexOf(value));
-  React85.useEffect(() => {
+  React88.useEffect(() => {
     if (ref.current) ref.current.scrollTop = idx * WHEEL_ROW;
   }, [idx]);
-  return /* @__PURE__ */ jsxs58("div", { style: { position: "relative", flex: 1, minWidth: 0, height: WHEEL_H, overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx81("div", { style: { position: "absolute", left: 8, right: 8, top: "50%", transform: "translateY(-50%)", height: WHEEL_ROW, border: "var(--stroke-xs) solid var(--border-neutral-default)", borderRadius: "var(--rounding-lg)", pointerEvents: "none" } }),
-    /* @__PURE__ */ jsx81("div", { ref, style: { height: "100%", overflowY: "auto", overscrollBehavior: "none", scrollSnapType: "y mandatory", padding: `${(WHEEL_H - WHEEL_ROW) / 2}px 0` }, children: values.map((v) => /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsxs60("div", { style: { position: "relative", flex: 1, minWidth: 0, height: WHEEL_H, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx83("div", { style: { position: "absolute", left: 8, right: 8, top: "50%", transform: "translateY(-50%)", height: WHEEL_ROW, border: "var(--stroke-xs) solid var(--border-neutral-default)", borderRadius: "var(--rounding-lg)", pointerEvents: "none" } }),
+    /* @__PURE__ */ jsx83("div", { ref, style: { height: "100%", overflowY: "auto", overscrollBehavior: "none", scrollSnapType: "y mandatory", padding: `${(WHEEL_H - WHEEL_ROW) / 2}px 0` }, children: values.map((v) => /* @__PURE__ */ jsx83(
       "button",
       {
         type: "button",
@@ -10070,34 +10492,34 @@ function WheelColumn({ values, value, onChange }) {
     )) })
   ] });
 }
-var DateTimePicker = /* @__PURE__ */ React85.forwardRef(function DateTimePicker2({ type = "simple", platform = "desktop", defaultMonth, defaultDate, defaultRange, defaultPreset, minDate, title = "Select Date", subtitle = "Pick a date", onApply, onCancel, style, ...rest }, ref) {
+var DateTimePicker = /* @__PURE__ */ React88.forwardRef(function DateTimePicker2({ type = "simple", platform = "desktop", defaultMonth, defaultDate, defaultRange, defaultPreset, minDate, title = "Select Date", subtitle = "Pick a date", onApply, onCancel, style, ...rest }, ref) {
   ensureDateTimePickerStyles();
   const isMobile = platform === "mobile";
   const TIME_STEP = 30;
   const seedTime = defaultDate && type === "date-time" ? nearestTimeOption(defaultDate, TIME_STEP) : null;
   const seedMonthFrom = defaultRange?.start ?? defaultRange?.end ?? defaultDate ?? null;
   const init = defaultMonth ?? (seedMonthFrom ? { year: seedMonthFrom.getFullYear(), month: seedMonthFrom.getMonth() } : { year: (/* @__PURE__ */ new Date()).getFullYear(), month: (/* @__PURE__ */ new Date()).getMonth() });
-  const [view, setView] = React85.useState(init);
-  const [selected, setSelected] = React85.useState(defaultDate ?? null);
-  const [range, setRange] = React85.useState({
+  const [view, setView] = React88.useState(init);
+  const [selected, setSelected] = React88.useState(defaultDate ?? null);
+  const [range, setRange] = React88.useState({
     start: defaultRange?.start ?? null,
     end: defaultRange?.end ?? null
   });
-  const [preset, setPreset] = React85.useState(
+  const [preset, setPreset] = React88.useState(
     RANGE_PRESETS.includes(defaultPreset ?? "") ? defaultPreset : "Custom"
   );
-  const [time, setTime] = React85.useState(seedTime);
+  const [time, setTime] = React88.useState(seedTime);
   const seedWheel = seedTime ? /^(\d{2}):(\d{2}) (AM|PM)$/.exec(seedTime) : null;
-  const [tH, setTH] = React85.useState(seedWheel ? String(Number(seedWheel[1])) : "1");
-  const [tM, setTM] = React85.useState(seedWheel ? seedWheel[2] : "00");
-  const [tPer, setTPer] = React85.useState(seedWheel ? seedWheel[3] : "AM");
+  const [tH, setTH] = React88.useState(seedWheel ? String(Number(seedWheel[1])) : "1");
+  const [tM, setTM] = React88.useState(seedWheel ? seedWheel[2] : "00");
+  const [tPer, setTPer] = React88.useState(seedWheel ? seedWheel[3] : "AM");
   const composeTime = (h, m, p) => `${h}:${m} ${p}`;
-  const [startText, setStartText] = React85.useState("");
-  const [endText, setEndText] = React85.useState("");
-  React85.useEffect(() => {
+  const [startText, setStartText] = React88.useState("");
+  const [endText, setEndText] = React88.useState("");
+  React88.useEffect(() => {
     setStartText(fmt(range.start));
   }, [range.start]);
-  React85.useEffect(() => {
+  React88.useEffect(() => {
     setEndText(fmt(range.end));
   }, [range.end]);
   const commitStart = () => {
@@ -10157,20 +10579,20 @@ var DateTimePicker = /* @__PURE__ */ React85.forwardRef(function DateTimePicker2
   const daysCount = diffDaysInclusive(range.start, range.end);
   const hasRange = !!(range.start && range.end);
   const formatDateTime = (d, t) => `${MONTHS_ABBR[d.getMonth()]} ${d.getDate()} ${d.getFullYear()}, ${t}`;
-  const cardFooter = (message, bannerIcon, applyEnabled, onClear) => /* @__PURE__ */ jsx81("div", { style: { boxShadow: "inset 0 var(--stroke-xs) 0 var(--border-neutral-default)", padding: "var(--padding-16px)" }, children: /* @__PURE__ */ jsxs58(
+  const cardFooter = (message, bannerIcon, applyEnabled, onClear) => /* @__PURE__ */ jsx83("div", { style: { boxShadow: "inset 0 var(--stroke-xs) 0 var(--border-neutral-default)", padding: "var(--padding-16px)" }, children: /* @__PURE__ */ jsxs60(
     FooterFrame,
     {
       variant: "card",
-      leading: /* @__PURE__ */ jsx81(NotificationBanner, { type: "neutral", variant: "subtle", icon: bannerIcon, description: message, showContentButtons: false }),
+      leading: /* @__PURE__ */ jsx83(NotificationBanner, { type: "neutral", variant: "subtle", icon: bannerIcon, description: message, showContentButtons: false }),
       children: [
-        /* @__PURE__ */ jsx81(Button, { variant: "secondary", size: "medium", onClick: onClear, children: "Clear" }),
-        /* @__PURE__ */ jsx81(Button, { variant: "primary", size: "medium", disabled: !applyEnabled, onClick: () => onApply?.({ date: selected, start: range.start, end: range.end, time, preset, explicit: true }), children: "Apply" })
+        /* @__PURE__ */ jsx83(Button, { variant: "secondary", size: "medium", onClick: onClear, children: "Clear" }),
+        /* @__PURE__ */ jsx83(Button, { variant: "primary", size: "medium", disabled: !applyEnabled, onClick: () => onApply?.({ date: selected, start: range.start, end: range.end, time, preset, explicit: true }), children: "Apply" })
       ]
     }
   ) });
   const minTimeMinutes = minDate && selected && isSameDay(selected, minDate) ? minDate.getHours() * 60 + minDate.getMinutes() : null;
-  const times = React85.useMemo(() => timeOptions(TIME_STEP), []);
-  const timeDisabled = React85.useCallback(
+  const times = React88.useMemo(() => timeOptions(TIME_STEP), []);
+  const timeDisabled = React88.useCallback(
     (t) => {
       if (minTimeMinutes == null) return false;
       const { h, m } = parseTimeOption(t);
@@ -10178,15 +10600,15 @@ var DateTimePicker = /* @__PURE__ */ React85.forwardRef(function DateTimePicker2
     },
     [minTimeMinutes]
   );
-  const firstEnabledIdx = React85.useMemo(() => {
+  const firstEnabledIdx = React88.useMemo(() => {
     if (minTimeMinutes == null) return 0;
     const i = times.findIndex((t) => !timeDisabled(t));
     return i < 0 ? 0 : i;
   }, [times, minTimeMinutes, timeDisabled]);
-  const timeListRef = React85.useRef(null);
-  const didPlaceTimeList = React85.useRef(false);
-  const seedTimeIdx = React85.useMemo(() => seedTime ? times.indexOf(seedTime) : -1, [times, seedTime]);
-  React85.useLayoutEffect(() => {
+  const timeListRef = React88.useRef(null);
+  const didPlaceTimeList = React88.useRef(false);
+  const seedTimeIdx = React88.useMemo(() => seedTime ? times.indexOf(seedTime) : -1, [times, seedTime]);
+  React88.useLayoutEffect(() => {
     const el = timeListRef.current;
     if (!el) return;
     const idx = !didPlaceTimeList.current && seedTimeIdx > 0 ? seedTimeIdx : firstEnabledIdx;
@@ -10204,9 +10626,9 @@ var DateTimePicker = /* @__PURE__ */ React85.forwardRef(function DateTimePicker2
     }
     return animateScrollTop(el, target);
   }, [firstEnabledIdx, seedTimeIdx]);
-  const timeColumn = /* @__PURE__ */ jsxs58("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)", flex: 1, minWidth: 0, alignSelf: "stretch", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx81("span", { className: "text-label-l-semibold", style: { color: "var(--text-default-heading)", textAlign: "center", whiteSpace: "nowrap" }, children: "Time of Day" }),
-    /* @__PURE__ */ jsx81("div", { style: { position: "relative", flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx81("div", { ref: timeListRef, className: "leta-dtp-noscrollbar", style: { position: "absolute", inset: 0, margin: "-4px -4px 0", boxSizing: "border-box", padding: "4px 4px 0", scrollPaddingBlock: 4, display: "flex", flexDirection: "column", gap: "var(--spacing-8px)", overflowY: "auto", overscrollBehavior: "contain" }, children: times.map((t) => /* @__PURE__ */ jsx81(DesktopMenuOptions, { type: "time-picker", label: t, active: time === t, disabled: timeDisabled(t), onSelect: () => setTime(t), style: { width: "100%" } }, t)) }) })
+  const timeColumn = /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)", flex: 1, minWidth: 0, alignSelf: "stretch", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx83("span", { className: "text-label-l-semibold", style: { color: "var(--text-default-heading)", textAlign: "center", whiteSpace: "nowrap" }, children: "Time of Day" }),
+    /* @__PURE__ */ jsx83("div", { style: { position: "relative", flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx83("div", { ref: timeListRef, className: "leta-dtp-noscrollbar", style: { position: "absolute", inset: 0, margin: "-4px -4px 0", boxSizing: "border-box", padding: "4px 4px 0", scrollPaddingBlock: 4, display: "flex", flexDirection: "column", gap: "var(--spacing-8px)", overflowY: "auto", overscrollBehavior: "contain" }, children: times.map((t) => /* @__PURE__ */ jsx83(DesktopMenuOptions, { type: "time-picker", label: t, active: time === t, disabled: timeDisabled(t), onSelect: () => setTime(t), style: { width: "100%" } }, t)) }) })
   ] });
   const cardBase = {
     boxSizing: "border-box",
@@ -10215,7 +10637,7 @@ var DateTimePicker = /* @__PURE__ */ React85.forwardRef(function DateTimePicker2
     flexDirection: "column"
   };
   if (isMobile) {
-    const calendar = /* @__PURE__ */ jsx81(
+    const calendar = /* @__PURE__ */ jsx83(
       Calendar,
       {
         platform: "mobile",
@@ -10231,67 +10653,67 @@ var DateTimePicker = /* @__PURE__ */ React85.forwardRef(function DateTimePicker2
       }
     );
     const mobileHeight = { simple: 500, "date-range": 568, "date-time": 632 }[type];
-    const sectionHeading = (t) => /* @__PURE__ */ jsx81("span", { className: "text-label-l-semibold", style: { color: "var(--text-default-heading)" }, children: t });
-    return /* @__PURE__ */ jsxs58("div", { ref, style: { ...cardBase, width: 360, height: mobileHeight, borderRadius: "var(--rounding-xxl)", overflow: "hidden", border: "var(--stroke-xs) solid var(--border-neutral-default)", ...style }, ...rest, children: [
-      /* @__PURE__ */ jsxs58("div", { style: { flexShrink: 0, display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", padding: "var(--padding-24px) var(--padding-16px) var(--padding-16px)", borderBottom: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: [
-        /* @__PURE__ */ jsxs58("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx81("span", { className: "text-heading-s-semibold", style: { color: "var(--text-default-heading)" }, children: title }),
-          subtitle ? /* @__PURE__ */ jsx81("span", { className: "text-body-m-regular", style: { color: "var(--text-default-sub-body)" }, children: subtitle }) : null
+    const sectionHeading = (t) => /* @__PURE__ */ jsx83("span", { className: "text-label-l-semibold", style: { color: "var(--text-default-heading)" }, children: t });
+    return /* @__PURE__ */ jsxs60("div", { ref, style: { ...cardBase, width: 360, height: mobileHeight, borderRadius: "var(--rounding-xxl)", overflow: "hidden", border: "var(--stroke-xs) solid var(--border-neutral-default)", ...style }, ...rest, children: [
+      /* @__PURE__ */ jsxs60("div", { style: { flexShrink: 0, display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", padding: "var(--padding-24px) var(--padding-16px) var(--padding-16px)", borderBottom: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: [
+        /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx83("span", { className: "text-heading-s-semibold", style: { color: "var(--text-default-heading)" }, children: title }),
+          subtitle ? /* @__PURE__ */ jsx83("span", { className: "text-body-m-regular", style: { color: "var(--text-default-sub-body)" }, children: subtitle }) : null
         ] }),
-        /* @__PURE__ */ jsx81("button", { type: "button", "aria-label": "Close", onClick: onCancel, style: { flexShrink: 0, width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--rounding-round)", border: "none", background: "var(--surface-neutral-bg-muted)", cursor: "pointer", padding: 0 }, children: /* @__PURE__ */ jsx81(Icon40, { name: "Cancel", size: 16, style: { color: "var(--icons-neutral-default)" } }) })
+        /* @__PURE__ */ jsx83("button", { type: "button", "aria-label": "Close", onClick: onCancel, style: { flexShrink: 0, width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--rounding-round)", border: "none", background: "var(--surface-neutral-bg-muted)", cursor: "pointer", padding: 0 }, children: /* @__PURE__ */ jsx83(Icon40, { name: "Cancel", size: 16, style: { color: "var(--icons-neutral-default)" } }) })
       ] }),
-      /* @__PURE__ */ jsxs58("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", padding: "var(--padding-16px) var(--padding-16px) var(--padding-40px)" }, children: [
-        type === "date-range" && /* @__PURE__ */ jsx81(
+      /* @__PURE__ */ jsxs60("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", padding: "var(--padding-16px) var(--padding-16px) var(--padding-40px)" }, children: [
+        type === "date-range" && /* @__PURE__ */ jsx83(
           GroupedInput,
           {
             variant: "range-input",
-            from: /* @__PURE__ */ jsx81(InputField, { placeholder: "dd/mm/yyyy", showLabel: false, showHelper: false, ...editableField(startText, setStartText, commitStart), style: { width: "100%" } }),
-            to: /* @__PURE__ */ jsx81(InputField, { placeholder: "dd/mm/yyyy", showLabel: false, showHelper: false, ...editableField(endText, setEndText, commitEnd), style: { width: "100%" } })
+            from: /* @__PURE__ */ jsx83(InputField, { placeholder: "dd/mm/yyyy", showLabel: false, showHelper: false, ...editableField(startText, setStartText, commitStart), style: { width: "100%" } }),
+            to: /* @__PURE__ */ jsx83(InputField, { placeholder: "dd/mm/yyyy", showLabel: false, showHelper: false, ...editableField(endText, setEndText, commitEnd), style: { width: "100%" } })
           }
         ),
         type === "date-time" && sectionHeading("Date"),
         calendar,
-        type === "date-time" && /* @__PURE__ */ jsxs58(Fragment18, { children: [
-          /* @__PURE__ */ jsx81(Demarcator, {}),
+        type === "date-time" && /* @__PURE__ */ jsxs60(Fragment20, { children: [
+          /* @__PURE__ */ jsx83(Demarcator, {}),
           sectionHeading("Time"),
-          /* @__PURE__ */ jsxs58("div", { style: { display: "flex", gap: "var(--spacing-8px)" }, children: [
-            /* @__PURE__ */ jsx81(WheelColumn, { values: WHEEL_HOURS, value: tH, onChange: (v) => {
+          /* @__PURE__ */ jsxs60("div", { style: { display: "flex", gap: "var(--spacing-8px)" }, children: [
+            /* @__PURE__ */ jsx83(WheelColumn, { values: WHEEL_HOURS, value: tH, onChange: (v) => {
               setTH(v);
               setTime(composeTime(v, tM, tPer));
             } }),
-            /* @__PURE__ */ jsx81(WheelColumn, { values: WHEEL_MINUTES, value: tM, onChange: (v) => {
+            /* @__PURE__ */ jsx83(WheelColumn, { values: WHEEL_MINUTES, value: tM, onChange: (v) => {
               setTM(v);
               setTime(composeTime(tH, v, tPer));
             } }),
-            /* @__PURE__ */ jsx81(WheelColumn, { values: WHEEL_PERIODS, value: tPer, onChange: (v) => {
+            /* @__PURE__ */ jsx83(WheelColumn, { values: WHEEL_PERIODS, value: tPer, onChange: (v) => {
               setTPer(v);
               setTime(composeTime(tH, tM, v));
             } })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs58("div", { style: { flexShrink: 0, display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", padding: "var(--padding-16px) var(--padding-16px) 0", borderTop: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: [
-        /* @__PURE__ */ jsxs58("div", { style: { display: "flex", gap: "var(--spacing-16px)" }, children: [
-          type !== "simple" && /* @__PURE__ */ jsx81(Button, { variant: "secondary", size: "medium", style: { flex: 1, borderRadius: "var(--rounding-round)" }, onClick: () => {
+      /* @__PURE__ */ jsxs60("div", { style: { flexShrink: 0, display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", padding: "var(--padding-16px) var(--padding-16px) 0", borderTop: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: [
+        /* @__PURE__ */ jsxs60("div", { style: { display: "flex", gap: "var(--spacing-16px)" }, children: [
+          type !== "simple" && /* @__PURE__ */ jsx83(Button, { variant: "secondary", size: "medium", style: { flex: 1, borderRadius: "var(--rounding-round)" }, onClick: () => {
             setSelected(null);
             setRange({ start: null, end: null });
             setTime(null);
           }, children: "Clear" }),
-          /* @__PURE__ */ jsx81(Button, { variant: "primary", size: "medium", style: { flex: 1, borderRadius: "var(--rounding-round)" }, disabled: type === "date-range" ? !hasRange : type === "date-time" ? !(selected && time) : !selected, onClick: () => onApply?.({ date: selected, start: range.start, end: range.end, time }), children: "Apply" })
+          /* @__PURE__ */ jsx83(Button, { variant: "primary", size: "medium", style: { flex: 1, borderRadius: "var(--rounding-round)" }, disabled: type === "date-range" ? !hasRange : type === "date-time" ? !(selected && time) : !selected, onClick: () => onApply?.({ date: selected, start: range.start, end: range.end, time }), children: "Apply" })
         ] }),
-        /* @__PURE__ */ jsx81("div", { style: { height: 24, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx81("div", { style: { width: 108, height: 4, borderRadius: "var(--rounding-round)", backgroundColor: "var(--icons-neutral-default)" } }) })
+        /* @__PURE__ */ jsx83("div", { style: { height: 24, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx83("div", { style: { width: 108, height: 4, borderRadius: "var(--rounding-round)", backgroundColor: "var(--icons-neutral-default)" } }) })
       ] })
     ] });
   }
   const desktopCard = { ...cardBase, borderRadius: "var(--rounding-xxl)", overflow: "hidden", boxShadow: "0 0 0 var(--stroke-xs) var(--border-neutral-default), var(--shadow-neutral-3)", ...style };
   if (type === "simple") {
-    return /* @__PURE__ */ jsx81("div", { ref, style: { ...desktopCard, width: 304 }, ...rest, children: /* @__PURE__ */ jsx81("div", { style: { padding: "var(--padding-16px)" }, children: /* @__PURE__ */ jsx81(Calendar, { year: view.year, month: view.month, selected, minDate, onSelectDay: setSelected, onPrevMonth: prevMonth, onNextMonth: nextMonth, onPrevYear: prevYear, onNextYear: nextYear }) }) });
+    return /* @__PURE__ */ jsx83("div", { ref, style: { ...desktopCard, width: 304 }, ...rest, children: /* @__PURE__ */ jsx83("div", { style: { padding: "var(--padding-16px)" }, children: /* @__PURE__ */ jsx83(Calendar, { year: view.year, month: view.month, selected, minDate, onSelectDay: setSelected, onPrevMonth: prevMonth, onNextMonth: nextMonth, onPrevYear: prevYear, onNextYear: nextYear }) }) });
   }
   if (type === "date-time") {
-    return /* @__PURE__ */ jsxs58("div", { ref, style: { ...desktopCard, width: 418 }, ...rest, children: [
-      /* @__PURE__ */ jsxs58("div", { style: { display: "flex", flexDirection: "row", gap: "var(--spacing-12px)", minHeight: 304, boxSizing: "border-box", padding: "var(--padding-16px) var(--padding-16px) 0" }, children: [
-        /* @__PURE__ */ jsx81("div", { style: { width: 272, flexShrink: 0, paddingBottom: "var(--padding-16px)" }, children: /* @__PURE__ */ jsx81(Calendar, { year: view.year, month: view.month, selected, minDate, onSelectDay: setSelected, onPrevMonth: prevMonth, onNextMonth: nextMonth, onPrevYear: prevYear, onNextYear: nextYear }) }),
-        /* @__PURE__ */ jsx81(Demarcator, { vertical: true }),
+    return /* @__PURE__ */ jsxs60("div", { ref, style: { ...desktopCard, width: 418 }, ...rest, children: [
+      /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "row", gap: "var(--spacing-12px)", minHeight: 304, boxSizing: "border-box", padding: "var(--padding-16px) var(--padding-16px) 0" }, children: [
+        /* @__PURE__ */ jsx83("div", { style: { width: 272, flexShrink: 0, paddingBottom: "var(--padding-16px)" }, children: /* @__PURE__ */ jsx83(Calendar, { year: view.year, month: view.month, selected, minDate, onSelectDay: setSelected, onPrevMonth: prevMonth, onNextMonth: nextMonth, onPrevYear: prevYear, onNextYear: nextYear }) }),
+        /* @__PURE__ */ jsx83(Demarcator, { vertical: true }),
         timeColumn
       ] }),
       cardFooter(selected && time ? formatDateTime(selected, time) : "Select date & time", selected && time ? "Calendar" : void 0, !!(selected && time), () => {
@@ -10301,17 +10723,17 @@ var DateTimePicker = /* @__PURE__ */ React85.forwardRef(function DateTimePicker2
     ] });
   }
   const isCustom = preset === "Custom";
-  const rangeCalendars = /* @__PURE__ */ jsxs58("div", { style: { display: "flex", flexDirection: "row", gap: "var(--spacing-12px)", padding: isCustom ? "0 var(--padding-16px) var(--padding-16px)" : "var(--padding-16px)" }, children: [
-    /* @__PURE__ */ jsx81("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx81(Calendar, { year: view.year, month: view.month, rangeStart: range.start, rangeEnd: range.end, minDate, onSelectDay: pickRangeDay, onPrevMonth: prevMonth, onNextMonth: nextMonth, onPrevYear: prevYear, onNextYear: nextYear }) }),
-    /* @__PURE__ */ jsx81(Demarcator, { vertical: true }),
-    /* @__PURE__ */ jsx81("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx81(Calendar, { year: next.year, month: next.month, rangeStart: range.start, rangeEnd: range.end, minDate, onSelectDay: pickRangeDay, onPrevMonth: prevMonth, onNextMonth: nextMonth, onPrevYear: prevYear, onNextYear: nextYear }) })
+  const rangeCalendars = /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "row", gap: "var(--spacing-12px)", padding: isCustom ? "0 var(--padding-16px) var(--padding-16px)" : "var(--padding-16px)" }, children: [
+    /* @__PURE__ */ jsx83("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx83(Calendar, { year: view.year, month: view.month, rangeStart: range.start, rangeEnd: range.end, minDate, onSelectDay: pickRangeDay, onPrevMonth: prevMonth, onNextMonth: nextMonth, onPrevYear: prevYear, onNextYear: nextYear }) }),
+    /* @__PURE__ */ jsx83(Demarcator, { vertical: true }),
+    /* @__PURE__ */ jsx83("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx83(Calendar, { year: next.year, month: next.month, rangeStart: range.start, rangeEnd: range.end, minDate, onSelectDay: pickRangeDay, onPrevMonth: prevMonth, onNextMonth: nextMonth, onPrevYear: prevYear, onNextYear: nextYear }) })
   ] });
-  return /* @__PURE__ */ jsx81("div", { ref, style: { ...desktopCard, width: 764 }, ...rest, children: /* @__PURE__ */ jsxs58("div", { style: { display: "flex", flexDirection: "row", alignItems: "stretch" }, children: [
-    /* @__PURE__ */ jsx81("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)", padding: "var(--padding-8px)", width: 164, flexShrink: 0, borderRight: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: RANGE_PRESETS.map((p) => /* @__PURE__ */ jsx81(DesktopMenuOptions, { type: "combobox", label: p, active: preset === p, onSelect: () => applyPreset(p), style: { width: "100%" } }, p)) }),
-    /* @__PURE__ */ jsxs58("div", { style: { display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }, children: [
-      isCustom && /* @__PURE__ */ jsxs58("div", { style: { display: "flex", flexDirection: "row", gap: "var(--spacing-16px)", padding: "var(--padding-16px)" }, children: [
-        /* @__PURE__ */ jsx81("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx81(InputField, { label: "Start", placeholder: "dd/mm/yyyy", showHelper: false, ...editableField(startText, setStartText, commitStart), style: { width: "100%" } }) }),
-        /* @__PURE__ */ jsx81("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx81(InputField, { label: "End", placeholder: "dd/mm/yyyy", showHelper: false, ...editableField(endText, setEndText, commitEnd), style: { width: "100%" } }) })
+  return /* @__PURE__ */ jsx83("div", { ref, style: { ...desktopCard, width: 764 }, ...rest, children: /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "row", alignItems: "stretch" }, children: [
+    /* @__PURE__ */ jsx83("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)", padding: "var(--padding-8px)", width: 164, flexShrink: 0, borderRight: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: RANGE_PRESETS.map((p) => /* @__PURE__ */ jsx83(DesktopMenuOptions, { type: "combobox", label: p, active: preset === p, onSelect: () => applyPreset(p), style: { width: "100%" } }, p)) }),
+    /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }, children: [
+      isCustom && /* @__PURE__ */ jsxs60("div", { style: { display: "flex", flexDirection: "row", gap: "var(--spacing-16px)", padding: "var(--padding-16px)" }, children: [
+        /* @__PURE__ */ jsx83("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx83(InputField, { label: "Start", placeholder: "dd/mm/yyyy", showHelper: false, ...editableField(startText, setStartText, commitStart), style: { width: "100%" } }) }),
+        /* @__PURE__ */ jsx83("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx83(InputField, { label: "End", placeholder: "dd/mm/yyyy", showHelper: false, ...editableField(endText, setEndText, commitEnd), style: { width: "100%" } }) })
       ] }),
       rangeCalendars,
       isCustom && cardFooter(`${daysCount} day${daysCount === 1 ? "" : "s"} selected`, "Calendar", hasRange, () => {
@@ -10323,7 +10745,7 @@ var DateTimePicker = /* @__PURE__ */ React85.forwardRef(function DateTimePicker2
 });
 
 // src/TextArea/TextArea.tsx
-import * as React86 from "react";
+import * as React89 from "react";
 import { Icon as Icon41 } from "@leta-io/icons";
 
 // src/TextArea/sanitizeRichText.ts
@@ -10618,7 +11040,7 @@ function cleanStickyMarker(marker) {
 }
 
 // src/TextArea/TextArea.tsx
-import { Fragment as Fragment19, jsx as jsx82, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx84, jsxs as jsxs61 } from "react/jsx-runtime";
 var STYLE_ID28 = "leta-textarea-styles";
 var STYLES19 = `
   .leta-textarea__input {
@@ -10643,7 +11065,7 @@ var STYLES19 = `
   }
   .leta-textarea__rich-input:empty::before { content: ''; }
 `;
-function ensureStyles24() {
+function ensureStyles25() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID28)) return;
   const el = document.createElement("style");
@@ -10658,15 +11080,15 @@ function LabelSection({
   tag,
   labelToggle
 }) {
-  return /* @__PURE__ */ jsxs59("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", minHeight: 20 }, children: [
-    /* @__PURE__ */ jsxs59("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsxs59("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
-        /* @__PURE__ */ jsx82("span", { className: "text-label-m-medium", style: { color: "var(--text-default-label-idle)" }, children: label }),
-        showLabelIcon && /* @__PURE__ */ jsx82("span", { style: { display: "flex", color: "var(--icons-neutral-idle)", flexShrink: 0 }, children: /* @__PURE__ */ jsx82(Icon41, { name: labelIcon ?? "Info", outlined: true, size: 18 }) })
+  return /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", minHeight: 20 }, children: [
+    /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
+        /* @__PURE__ */ jsx84("span", { className: "text-label-m-medium", style: { color: "var(--text-default-label-idle)" }, children: label }),
+        showLabelIcon && /* @__PURE__ */ jsx84("span", { style: { display: "flex", color: "var(--icons-neutral-idle)", flexShrink: 0 }, children: /* @__PURE__ */ jsx84(Icon41, { name: labelIcon ?? "Info", outlined: true, size: 18 }) })
       ] }),
-      tag !== "none" && /* @__PURE__ */ jsx82("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label-idle)" }, children: tag === "optional" ? "(Optional)" : "(Required)" })
+      tag !== "none" && /* @__PURE__ */ jsx84("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label-idle)" }, children: tag === "optional" ? "(Optional)" : "(Required)" })
     ] }),
-    labelToggle && /* @__PURE__ */ jsx82("div", { style: { flexShrink: 0 }, children: labelToggle })
+    labelToggle && /* @__PURE__ */ jsx84("div", { style: { flexShrink: 0 }, children: labelToggle })
   ] });
 }
 function Message({
@@ -10680,15 +11102,15 @@ function Message({
   if (!message) return null;
   const messageColor = error ? "var(--text-error-label)" : warning ? "var(--text-warning-label)" : disabled ? "var(--text-disabled-helper-disabled)" : "var(--text-default-helper)";
   const messageIcon = error ? "Error" : warning ? "Warning" : null;
-  return /* @__PURE__ */ jsxs59("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", minHeight: 16 }, children: [
-    messageIcon && /* @__PURE__ */ jsx82("span", { style: { display: "flex", flexShrink: 0, color: error ? "var(--icons-error-default)" : "var(--icons-warning-default)" }, children: /* @__PURE__ */ jsx82(Icon41, { name: messageIcon, outlined: false, size: 16 }) }),
-    /* @__PURE__ */ jsx82("span", { className: "text-label-s-regular", style: { color: messageColor }, children: message })
+  return /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", minHeight: 16 }, children: [
+    messageIcon && /* @__PURE__ */ jsx84("span", { style: { display: "flex", flexShrink: 0, color: error ? "var(--icons-error-default)" : "var(--icons-warning-default)" }, children: /* @__PURE__ */ jsx84(Icon41, { name: messageIcon, outlined: false, size: 16 }) }),
+    /* @__PURE__ */ jsx84("span", { className: "text-label-s-regular", style: { color: messageColor }, children: message })
   ] });
 }
 function borderColorFor(disabled, error, focused) {
   return disabled ? "var(--border-disabled-default)" : error ? "var(--border-error-default)" : focused ? "var(--border-secondary-component-focus)" : "var(--border-neutral-default)";
 }
-var BasicField = /* @__PURE__ */ React86.forwardRef(function BasicField2({ props, borderColor, onFocusChange }, ref) {
+var BasicField = /* @__PURE__ */ React89.forwardRef(function BasicField2({ props, borderColor, onFocusChange }, ref) {
   const {
     rows = 4,
     placeholder = "Some descriptive text here would be very nice to see",
@@ -10723,9 +11145,9 @@ var BasicField = /* @__PURE__ */ React86.forwardRef(function BasicField2({ props
     style: _style,
     ...textareaProps
   } = props;
-  const [count, setCount] = React86.useState(String(value ?? defaultValue ?? "").length);
+  const [count, setCount] = React89.useState(String(value ?? defaultValue ?? "").length);
   const len = value !== void 0 ? String(value).length : count;
-  return /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsxs61(
     "div",
     {
       style: {
@@ -10741,7 +11163,7 @@ var BasicField = /* @__PURE__ */ React86.forwardRef(function BasicField2({ props
         boxShadow: `inset 0 0 0 var(--stroke-xs) ${borderColor}`
       },
       children: [
-        /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx84(
           "textarea",
           {
             ref,
@@ -10768,7 +11190,7 @@ var BasicField = /* @__PURE__ */ React86.forwardRef(function BasicField2({ props
             ...textareaProps
           }
         ),
-        showCounter && /* @__PURE__ */ jsxs59("span", { className: "text-label-s-regular", style: { color: "var(--text-default-placeholder)", alignSelf: "flex-end", flexShrink: 0 }, children: [
+        showCounter && /* @__PURE__ */ jsxs61("span", { className: "text-label-s-regular", style: { color: "var(--text-default-placeholder)", alignSelf: "flex-end", flexShrink: 0 }, children: [
           len,
           maxLength != null ? `/${maxLength}` : ""
         ] })
@@ -10777,7 +11199,7 @@ var BasicField = /* @__PURE__ */ React86.forwardRef(function BasicField2({ props
   );
 });
 var ALL_FORMATS = ["bold", "italic", "underline"];
-var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props, borderColor, onFocusChange }, ref) {
+var RichField = /* @__PURE__ */ React89.forwardRef(function RichField2({ props, borderColor, onFocusChange }, ref) {
   const {
     placeholder = "Some descriptive text here would be very nice to see",
     disabled = false,
@@ -10797,15 +11219,15 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     onFocus,
     onBlur
   } = props;
-  const editableRef = React86.useRef(null);
-  React86.useImperativeHandle(ref, () => editableRef.current, []);
-  const stickyMarkerRef = React86.useRef(null);
-  const pendingFormatsRef = React86.useRef(/* @__PURE__ */ new Set());
-  const lastEmittedRef = React86.useRef(void 0);
-  const [activeFormats, setActiveFormats] = React86.useState(/* @__PURE__ */ new Set());
-  const [hasContent, setHasContent] = React86.useState(() => htmlToPlainText(value ?? defaultValue ?? "").length > 0);
-  const [plainLength, setPlainLength] = React86.useState(() => htmlToPlainText(value ?? defaultValue ?? "").length);
-  React86.useEffect(() => {
+  const editableRef = React89.useRef(null);
+  React89.useImperativeHandle(ref, () => editableRef.current, []);
+  const stickyMarkerRef = React89.useRef(null);
+  const pendingFormatsRef = React89.useRef(/* @__PURE__ */ new Set());
+  const lastEmittedRef = React89.useRef(void 0);
+  const [activeFormats, setActiveFormats] = React89.useState(/* @__PURE__ */ new Set());
+  const [hasContent, setHasContent] = React89.useState(() => htmlToPlainText(value ?? defaultValue ?? "").length > 0);
+  const [plainLength, setPlainLength] = React89.useState(() => htmlToPlainText(value ?? defaultValue ?? "").length);
+  React89.useEffect(() => {
     const el = editableRef.current;
     if (!el) return;
     const initial = sanitizeRichText(value ?? defaultValue ?? "");
@@ -10821,7 +11243,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
       sel?.addRange(range);
     }
   }, []);
-  React86.useEffect(() => {
+  React89.useEffect(() => {
     if (value === void 0) return;
     const el = editableRef.current;
     if (!el || value === lastEmittedRef.current) return;
@@ -10835,7 +11257,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     pendingFormatsRef.current = /* @__PURE__ */ new Set();
     setActiveFormats(/* @__PURE__ */ new Set());
   }, [value]);
-  const notifyChange = React86.useCallback(() => {
+  const notifyChange = React89.useCallback(() => {
     const el = editableRef.current;
     if (!el) return;
     const clean = sanitizeRichText(el.innerHTML);
@@ -10845,7 +11267,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     setHasContent(plain.length > 0);
     setPlainLength(plain.length);
   }, [onChange]);
-  const recomputeActiveFormats = React86.useCallback(() => {
+  const recomputeActiveFormats = React89.useCallback(() => {
     const el = editableRef.current;
     if (!el) return;
     const sel = getSelectionIn(el);
@@ -10854,7 +11276,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     const next = range.collapsed ? stickyMarkerRef.current ? new Set(pendingFormatsRef.current) : getFormatsAt(sel.anchorNode, el) : new Set(ALL_FORMATS.filter((f) => isRangeFullyFormatted(range, el, f)));
     setActiveFormats(next);
   }, []);
-  React86.useEffect(() => {
+  React89.useEffect(() => {
     function handleSelectionChange() {
       const el = editableRef.current;
       if (!el) return;
@@ -10873,7 +11295,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     document.addEventListener("selectionchange", handleSelectionChange);
     return () => document.removeEventListener("selectionchange", handleSelectionChange);
   }, [recomputeActiveFormats]);
-  const handleToggleFormat = React86.useCallback((format) => {
+  const handleToggleFormat = React89.useCallback((format) => {
     const el = editableRef.current;
     if (!el || disabled) return;
     if (!getSelectionIn(el)) {
@@ -10915,7 +11337,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     if (format === "italic") onItalic?.(nextActive);
     if (format === "underline") onUnderline?.(nextActive);
   }, [disabled, onBold, onItalic, onUnderline, recomputeActiveFormats, notifyChange]);
-  const handleInput = React86.useCallback(() => {
+  const handleInput = React89.useCallback(() => {
     const marker = stickyMarkerRef.current;
     if (marker && marker.textContent && marker.textContent !== ZWSP) {
       cleanStickyMarker(marker);
@@ -10925,7 +11347,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     notifyChange();
     recomputeActiveFormats();
   }, [notifyChange, recomputeActiveFormats]);
-  const handleBeforeInput = React86.useCallback((e) => {
+  const handleBeforeInput = React89.useCallback((e) => {
     if (maxLength == null) return;
     const native = e.nativeEvent;
     const insertingTypes = /* @__PURE__ */ new Set(["insertText", "insertCompositionText", "insertFromPaste", "insertLineBreak"]);
@@ -10936,7 +11358,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     const insertLen = native.data?.length ?? 1;
     if (currentLen + insertLen > maxLength) e.preventDefault();
   }, [maxLength]);
-  const handleKeyDown2 = React86.useCallback((e) => {
+  const handleKeyDown2 = React89.useCallback((e) => {
     if (e.key !== "Enter") return;
     e.preventDefault();
     const el = editableRef.current;
@@ -10944,7 +11366,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     insertLineBreak(el);
     notifyChange();
   }, [notifyChange]);
-  const handlePaste = React86.useCallback((e) => {
+  const handlePaste = React89.useCallback((e) => {
     e.preventDefault();
     const el = editableRef.current;
     if (!el) return;
@@ -10954,8 +11376,8 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
     else if (text) insertPlainText(el, text);
     notifyChange();
   }, [notifyChange]);
-  return /* @__PURE__ */ jsxs59("div", { style: { display: "flex", flexDirection: "column", width: "100%", boxSizing: "border-box" }, children: [
-    /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "column", width: "100%", boxSizing: "border-box" }, children: [
+    /* @__PURE__ */ jsxs61(
       "div",
       {
         style: {
@@ -10976,8 +11398,8 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
           borderTopRightRadius: "var(--rounding-lg)"
         },
         children: [
-          /* @__PURE__ */ jsxs59("div", { style: { position: "relative", flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: [
-            /* @__PURE__ */ jsx82(
+          /* @__PURE__ */ jsxs61("div", { style: { position: "relative", flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+            /* @__PURE__ */ jsx84(
               "div",
               {
                 ref: editableRef,
@@ -11010,7 +11432,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
                 }
               }
             ),
-            !hasContent && /* @__PURE__ */ jsx82(
+            !hasContent && /* @__PURE__ */ jsx84(
               "span",
               {
                 "aria-hidden": true,
@@ -11020,14 +11442,14 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
               }
             )
           ] }),
-          showCounter && /* @__PURE__ */ jsxs59("span", { className: "text-label-s-regular", style: { color: "var(--text-default-placeholder)", alignSelf: "flex-end", flexShrink: 0 }, children: [
+          showCounter && /* @__PURE__ */ jsxs61("span", { className: "text-label-s-regular", style: { color: "var(--text-default-placeholder)", alignSelf: "flex-end", flexShrink: 0 }, children: [
             plainLength,
             maxLength != null ? `/${maxLength}` : ""
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs59(
+    /* @__PURE__ */ jsxs61(
       "div",
       {
         style: {
@@ -11044,8 +11466,8 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
           backgroundColor: "var(--surface-neutral-bg-default)"
         },
         children: [
-          /* @__PURE__ */ jsxs59("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
-            /* @__PURE__ */ jsx82(
+          /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
+            /* @__PURE__ */ jsx84(
               ToggleButton,
               {
                 icon: "Format-Bold",
@@ -11056,7 +11478,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
                 disabled
               }
             ),
-            /* @__PURE__ */ jsx82(
+            /* @__PURE__ */ jsx84(
               ToggleButton,
               {
                 icon: "Format-Italics",
@@ -11067,7 +11489,7 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
                 disabled
               }
             ),
-            /* @__PURE__ */ jsx82(
+            /* @__PURE__ */ jsx84(
               ToggleButton,
               {
                 icon: "Format-Underline",
@@ -11082,39 +11504,39 @@ var RichField = /* @__PURE__ */ React86.forwardRef(function RichField2({ props,
           trailing !== null && /* `leta-textarea__trailing` is a stable hook so a host can animate or
              restyle this region without having to re-implement the default
              Cancel/Save pair just to wrap it in an element of its own. */
-          /* @__PURE__ */ jsx82("div", { className: "leta-textarea__trailing", style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: trailing ?? /* @__PURE__ */ jsxs59(Fragment19, { children: [
-            /* @__PURE__ */ jsx82(Button, { variant: "secondary", size: "small", onClick: onCancel, disabled, children: "Cancel" }),
-            /* @__PURE__ */ jsx82(Button, { variant: "primary", size: "small", onClick: onSave, disabled: disabled || saveDisabled, children: "Save" })
+          /* @__PURE__ */ jsx84("div", { className: "leta-textarea__trailing", style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: trailing ?? /* @__PURE__ */ jsxs61(Fragment21, { children: [
+            /* @__PURE__ */ jsx84(Button, { variant: "secondary", size: "small", onClick: onCancel, disabled, children: "Cancel" }),
+            /* @__PURE__ */ jsx84(Button, { variant: "primary", size: "small", onClick: onSave, disabled: disabled || saveDisabled, children: "Save" })
           ] }) })
         ]
       }
     )
   ] });
 });
-var TextArea = /* @__PURE__ */ React86.forwardRef(function TextArea2(props, ref) {
-  ensureStyles24();
-  const [focused, setFocused] = React86.useState(false);
+var TextArea = /* @__PURE__ */ React89.forwardRef(function TextArea2(props, ref) {
+  ensureStyles25();
+  const [focused, setFocused] = React89.useState(false);
   const borderColor = borderColorFor(props.disabled, props.error, focused);
-  return /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsxs61(
     "div",
     {
       className: props.className,
       style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "var(--spacing-8px)", width: 350, boxSizing: "border-box", ...props.style },
       children: [
-        (props.showLabel ?? true) && /* @__PURE__ */ jsx82(LabelSection, { label: props.label ?? "Label Text", showLabelIcon: props.showLabelIcon, labelIcon: props.labelIcon, tag: props.tag ?? "none", labelToggle: props.labelToggle }),
-        props.variant === "rich" ? /* @__PURE__ */ jsx82(RichField, { ref, props, borderColor, onFocusChange: setFocused }) : /* @__PURE__ */ jsx82(BasicField, { ref, props, borderColor, onFocusChange: setFocused }),
-        /* @__PURE__ */ jsx82(Message, { error: props.error, warning: props.warning, disabled: props.disabled, helperText: props.helperText ?? "Helper text goes here", showHelper: props.showHelper ?? true })
+        (props.showLabel ?? true) && /* @__PURE__ */ jsx84(LabelSection, { label: props.label ?? "Label Text", showLabelIcon: props.showLabelIcon, labelIcon: props.labelIcon, tag: props.tag ?? "none", labelToggle: props.labelToggle }),
+        props.variant === "rich" ? /* @__PURE__ */ jsx84(RichField, { ref, props, borderColor, onFocusChange: setFocused }) : /* @__PURE__ */ jsx84(BasicField, { ref, props, borderColor, onFocusChange: setFocused }),
+        /* @__PURE__ */ jsx84(Message, { error: props.error, warning: props.warning, disabled: props.disabled, helperText: props.helperText ?? "Helper text goes here", showHelper: props.showHelper ?? true })
       ]
     }
   );
 });
 
 // src/MobileSearchInput/MobileSearchInput.tsx
-import * as React87 from "react";
+import * as React90 from "react";
 import "@leta-io/icons";
-import { jsx as jsx83, jsxs as jsxs60 } from "react/jsx-runtime";
-var MobileSearchInput = /* @__PURE__ */ React87.forwardRef(function MobileSearchInput2({ placeholder = "Search here...", icon = "Search", label, helperText, onClear, disabled = false, value, defaultValue, onChange, className, style, ...inputProps }, ref) {
-  const field = /* @__PURE__ */ jsx83(
+import { jsx as jsx85, jsxs as jsxs62 } from "react/jsx-runtime";
+var MobileSearchInput = /* @__PURE__ */ React90.forwardRef(function MobileSearchInput2({ placeholder = "Search here...", icon = "Search", label, helperText, onClear, disabled = false, value, defaultValue, onChange, className, style, ...inputProps }, ref) {
+  const field = /* @__PURE__ */ jsx85(
     SearchField,
     {
       ref,
@@ -11131,23 +11553,23 @@ var MobileSearchInput = /* @__PURE__ */ React87.forwardRef(function MobileSearch
     }
   );
   if (!label && !helperText) {
-    return /* @__PURE__ */ jsx83("div", { className, style: { width: 350, boxSizing: "border-box", ...style }, children: field });
+    return /* @__PURE__ */ jsx85("div", { className, style: { width: 350, boxSizing: "border-box", ...style }, children: field });
   }
-  return /* @__PURE__ */ jsxs60("div", { className, style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "var(--spacing-8px)", width: 350, boxSizing: "border-box", ...style }, children: [
-    label && /* @__PURE__ */ jsx83("span", { className: "text-label-m-medium", style: { color: "var(--text-default-label-idle)" }, children: label }),
+  return /* @__PURE__ */ jsxs62("div", { className, style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "var(--spacing-8px)", width: 350, boxSizing: "border-box", ...style }, children: [
+    label && /* @__PURE__ */ jsx85("span", { className: "text-label-m-medium", style: { color: "var(--text-default-label-idle)" }, children: label }),
     field,
-    helperText && /* @__PURE__ */ jsx83("span", { className: "text-label-s-regular", style: { color: "var(--text-default-helper)" }, children: helperText })
+    helperText && /* @__PURE__ */ jsx85("span", { className: "text-label-s-regular", style: { color: "var(--text-default-helper)" }, children: helperText })
   ] });
 });
 
 // src/MapSearchInput/MapSearchInput.tsx
-import * as React88 from "react";
+import * as React91 from "react";
 import "@leta-io/icons";
-import { jsx as jsx84, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs63 } from "react/jsx-runtime";
 var PANEL_PAD = "var(--padding-16px)";
 var RESULTS_PANEL_HEIGHT = 400;
-var ResultsDivider = () => /* @__PURE__ */ jsx84("div", { "aria-hidden": true, style: { height: 0, borderTop: "var(--stroke-xs) solid var(--border-neutral-default)" } });
-var MapSearchInput = /* @__PURE__ */ React88.forwardRef(function MapSearchInput2({
+var ResultsDivider = () => /* @__PURE__ */ jsx86("div", { "aria-hidden": true, style: { height: 0, borderTop: "var(--stroke-xs) solid var(--border-neutral-default)" } });
+var MapSearchInput = /* @__PURE__ */ React91.forwardRef(function MapSearchInput2({
   state = "active-results",
   placeholder = "Search here...",
   icon = "Search",
@@ -11169,7 +11591,7 @@ var MapSearchInput = /* @__PURE__ */ React88.forwardRef(function MapSearchInput2
   ...inputProps
 }, ref) {
   const open = state !== "idle";
-  const field = /* @__PURE__ */ jsx84(
+  const field = /* @__PURE__ */ jsx86(
     SearchField,
     {
       ref,
@@ -11189,7 +11611,7 @@ var MapSearchInput = /* @__PURE__ */ React88.forwardRef(function MapSearchInput2
     }
   );
   if (!open) {
-    return /* @__PURE__ */ jsx84(
+    return /* @__PURE__ */ jsx86(
       "div",
       {
         className,
@@ -11198,9 +11620,9 @@ var MapSearchInput = /* @__PURE__ */ React88.forwardRef(function MapSearchInput2
       }
     );
   }
-  const topSection = /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", padding: `${PANEL_PAD} ${PANEL_PAD} 0 ${PANEL_PAD}` }, children: [
-    /* @__PURE__ */ jsx84("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", flexWrap: "wrap" }, children: filters.map((f, i) => /* @__PURE__ */ jsx84(Chip, { label: f, active: i === activeFilter }, i)) }),
-    /* @__PURE__ */ jsxs61("span", { className: "text-heading-s-semibold", style: { color: "var(--text-default-heading)" }, children: [
+  const topSection = /* @__PURE__ */ jsxs63("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", padding: `${PANEL_PAD} ${PANEL_PAD} 0 ${PANEL_PAD}` }, children: [
+    /* @__PURE__ */ jsx86("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", flexWrap: "wrap" }, children: filters.map((f, i) => /* @__PURE__ */ jsx86(Chip, { label: f, active: i === activeFilter }, i)) }),
+    /* @__PURE__ */ jsxs63("span", { className: "text-heading-s-semibold", style: { color: "var(--text-default-heading)" }, children: [
       "Results (",
       resultsCount,
       ")"
@@ -11208,31 +11630,31 @@ var MapSearchInput = /* @__PURE__ */ React88.forwardRef(function MapSearchInput2
   ] });
   let panel;
   if (state === "no-history") {
-    panel = /* @__PURE__ */ jsx84("div", { style: { padding: PANEL_PAD }, children: /* @__PURE__ */ jsx84("span", { className: "text-label-m-regular", style: { color: "var(--text-default-helper)" }, children: noHistoryText }) });
+    panel = /* @__PURE__ */ jsx86("div", { style: { padding: PANEL_PAD }, children: /* @__PURE__ */ jsx86("span", { className: "text-label-m-regular", style: { color: "var(--text-default-helper)" }, children: noHistoryText }) });
   } else if (state === "active-history") {
-    panel = /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", padding: PANEL_PAD }, children: [
-      /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: "var(--spacing-8px)" }, children: [
-        /* @__PURE__ */ jsx84("span", { className: "text-heading-s-semibold", style: { color: "var(--text-default-heading)" }, children: recentTitle }),
-        /* @__PURE__ */ jsx84(Button, { variant: "plain", size: "small", onClick: onClearHistory, children: "Clear All" })
+    panel = /* @__PURE__ */ jsxs63("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", padding: PANEL_PAD }, children: [
+      /* @__PURE__ */ jsxs63("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: "var(--spacing-8px)" }, children: [
+        /* @__PURE__ */ jsx86("span", { className: "text-heading-s-semibold", style: { color: "var(--text-default-heading)" }, children: recentTitle }),
+        /* @__PURE__ */ jsx86(Button, { variant: "plain", size: "small", onClick: onClearHistory, children: "Clear All" })
       ] }),
-      children ?? /* @__PURE__ */ jsx84("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)" }, children: ["LTA-ID-001", "LTA-ID-002", "Michael", "Kitisuru"].map((l) => /* @__PURE__ */ jsx84(DesktopMenuOptions, { type: "dropdown-basic", label: l, showChevron: false }, l)) })
+      children ?? /* @__PURE__ */ jsx86("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)" }, children: ["LTA-ID-001", "LTA-ID-002", "Michael", "Kitisuru"].map((l) => /* @__PURE__ */ jsx86(DesktopMenuOptions, { type: "dropdown-basic", label: l, showChevron: false }, l)) })
     ] });
   } else if (state === "empty-results") {
-    panel = /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", height: RESULTS_PANEL_HEIGHT, boxSizing: "border-box" }, children: [
+    panel = /* @__PURE__ */ jsxs63("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", height: RESULTS_PANEL_HEIGHT, boxSizing: "border-box" }, children: [
       topSection,
-      /* @__PURE__ */ jsx84("div", { style: { flex: 1, minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: PANEL_PAD }, children: /* @__PURE__ */ jsx84(EmptyState, { type: "no-results", size: "mobile", description: noResultsText }) })
+      /* @__PURE__ */ jsx86("div", { style: { flex: 1, minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: PANEL_PAD }, children: /* @__PURE__ */ jsx86(EmptyState, { type: "no-results", size: "mobile", description: noResultsText }) })
     ] });
   } else {
     const rows = ["1", "2", "3", "4"];
-    panel = /* @__PURE__ */ jsxs61("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", height: RESULTS_PANEL_HEIGHT, boxSizing: "border-box" }, children: [
+    panel = /* @__PURE__ */ jsxs63("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", height: RESULTS_PANEL_HEIGHT, boxSizing: "border-box" }, children: [
       topSection,
-      /* @__PURE__ */ jsx84("div", { style: { flex: 1, minHeight: 0, overflow: "auto", overscrollBehavior: "contain", padding: `0 var(--padding-10px) var(--padding-40px) var(--padding-10px)` }, children: children ?? /* @__PURE__ */ jsx84("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)" }, children: rows.map((id, i) => /* @__PURE__ */ jsxs61(React88.Fragment, { children: [
-        /* @__PURE__ */ jsx84(DesktopMenuOptions, { type: "dropdown-advanced", label: "Title", subtext: "Enter description here" }),
-        i < rows.length - 1 && /* @__PURE__ */ jsx84(ResultsDivider, {})
+      /* @__PURE__ */ jsx86("div", { style: { flex: 1, minHeight: 0, overflow: "auto", overscrollBehavior: "contain", padding: `0 var(--padding-10px) var(--padding-40px) var(--padding-10px)` }, children: children ?? /* @__PURE__ */ jsx86("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)" }, children: rows.map((id, i) => /* @__PURE__ */ jsxs63(React91.Fragment, { children: [
+        /* @__PURE__ */ jsx86(DesktopMenuOptions, { type: "dropdown-advanced", label: "Title", subtext: "Enter description here" }),
+        i < rows.length - 1 && /* @__PURE__ */ jsx86(ResultsDivider, {})
       ] }, id)) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs63(
     "div",
     {
       className,
@@ -11257,15 +11679,15 @@ var MapSearchInput = /* @__PURE__ */ React88.forwardRef(function MapSearchInput2
 });
 
 // src/MobileMapSearchInput/MobileMapSearchInput.tsx
-import * as React90 from "react";
+import * as React93 from "react";
 import "@leta-io/icons";
 
 // src/MobileDropdown/MobileDropdown.tsx
-import * as React89 from "react";
+import * as React92 from "react";
 import "@leta-io/icons";
-import { jsx as jsx85 } from "react/jsx-runtime";
-var MobileDropdown = /* @__PURE__ */ React89.forwardRef(function MobileDropdown2({ options, children, maxHeight = 248, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx85(
+import { jsx as jsx87 } from "react/jsx-runtime";
+var MobileDropdown = /* @__PURE__ */ React92.forwardRef(function MobileDropdown2({ options, children, maxHeight = 248, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx87(
     "div",
     {
       ref,
@@ -11282,7 +11704,7 @@ var MobileDropdown = /* @__PURE__ */ React89.forwardRef(function MobileDropdown2
         ...style
       },
       ...rest,
-      children: /* @__PURE__ */ jsx85("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", paddingBottom: 8 }, children: children ?? options?.map((o, i) => /* @__PURE__ */ jsx85(
+      children: /* @__PURE__ */ jsx87("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", paddingBottom: 8 }, children: children ?? options?.map((o, i) => /* @__PURE__ */ jsx87(
         MobileMenuOptions,
         {
           type: o.type,
@@ -11301,8 +11723,8 @@ var MobileDropdown = /* @__PURE__ */ React89.forwardRef(function MobileDropdown2
 });
 
 // src/MobileMapSearchInput/MobileMapSearchInput.tsx
-import { jsx as jsx86, jsxs as jsxs62 } from "react/jsx-runtime";
-var MobileMapSearchInput = /* @__PURE__ */ React90.forwardRef(function MobileMapSearchInput2({
+import { jsx as jsx88, jsxs as jsxs64 } from "react/jsx-runtime";
+var MobileMapSearchInput = /* @__PURE__ */ React93.forwardRef(function MobileMapSearchInput2({
   placeholder = "Search here...",
   icon = "Search",
   open = true,
@@ -11316,8 +11738,8 @@ var MobileMapSearchInput = /* @__PURE__ */ React90.forwardRef(function MobileMap
   style,
   ...inputProps
 }, ref) {
-  return /* @__PURE__ */ jsxs62("div", { className, style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "var(--spacing-8px)", width: 350, boxSizing: "border-box", ...style }, children: [
-    /* @__PURE__ */ jsx86("div", { style: { borderRadius: "var(--rounding-round)", boxShadow: "var(--shadow-neutral-1)" }, children: /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsxs64("div", { className, style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "var(--spacing-8px)", width: 350, boxSizing: "border-box", ...style }, children: [
+    /* @__PURE__ */ jsx88("div", { style: { borderRadius: "var(--rounding-round)", boxShadow: "var(--shadow-neutral-1)" }, children: /* @__PURE__ */ jsx88(
       SearchField,
       {
         ref,
@@ -11334,7 +11756,7 @@ var MobileMapSearchInput = /* @__PURE__ */ React90.forwardRef(function MobileMap
         ...inputProps
       }
     ) }),
-    open && /* @__PURE__ */ jsx86(
+    open && /* @__PURE__ */ jsx88(
       MobileDropdown,
       {
         maxHeight: 248,
@@ -11351,10 +11773,10 @@ var MobileMapSearchInput = /* @__PURE__ */ React90.forwardRef(function MobileMap
 });
 
 // src/FileUpload/FileUpload.tsx
-import * as React91 from "react";
+import * as React94 from "react";
 import { Icon as Icon42 } from "@leta-io/icons";
-import { jsx as jsx87, jsxs as jsxs63 } from "react/jsx-runtime";
-var FileUpload = /* @__PURE__ */ React91.forwardRef(function FileUpload2({
+import { jsx as jsx89, jsxs as jsxs65 } from "react/jsx-runtime";
+var FileUpload = /* @__PURE__ */ React94.forwardRef(function FileUpload2({
   label = "Attach an image",
   showLabel = true,
   showLabelIcon = false,
@@ -11370,27 +11792,27 @@ var FileUpload = /* @__PURE__ */ React91.forwardRef(function FileUpload2({
   style,
   ...rest
 }, ref) {
-  const inputRef = React91.useRef(null);
-  const [dragOver, setDragOver] = React91.useState(false);
+  const inputRef = React94.useRef(null);
+  const [dragOver, setDragOver] = React94.useState(false);
   const handleFiles = (files) => {
     if (files && files.length) onFiles?.(files);
   };
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs65(
     "div",
     {
       ref,
       style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "var(--spacing-20px)", width: 350, boxSizing: "border-box", ...style },
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs63("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "var(--spacing-8px)" }, children: [
-          showLabel && /* @__PURE__ */ jsxs63("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", minHeight: 20 }, children: [
-            /* @__PURE__ */ jsxs63("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
-              /* @__PURE__ */ jsx87("span", { className: "text-label-m-medium", style: { color: "var(--text-default-label-idle)" }, children: label }),
-              showLabelIcon && /* @__PURE__ */ jsx87("span", { style: { display: "flex", color: "var(--icons-neutral-idle)", flexShrink: 0 }, children: /* @__PURE__ */ jsx87(Icon42, { name: labelIcon, outlined: true, size: 18 }) })
+        /* @__PURE__ */ jsxs65("div", { style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "var(--spacing-8px)" }, children: [
+          showLabel && /* @__PURE__ */ jsxs65("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", minHeight: 20 }, children: [
+            /* @__PURE__ */ jsxs65("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
+              /* @__PURE__ */ jsx89("span", { className: "text-label-m-medium", style: { color: "var(--text-default-label-idle)" }, children: label }),
+              showLabelIcon && /* @__PURE__ */ jsx89("span", { style: { display: "flex", color: "var(--icons-neutral-idle)", flexShrink: 0 }, children: /* @__PURE__ */ jsx89(Icon42, { name: labelIcon, outlined: true, size: 18 }) })
             ] }),
-            tag !== "none" && /* @__PURE__ */ jsx87("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label-idle)" }, children: tag === "optional" ? "(Optional)" : "(Required)" })
+            tag !== "none" && /* @__PURE__ */ jsx89("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label-idle)" }, children: tag === "optional" ? "(Optional)" : "(Required)" })
           ] }),
-          /* @__PURE__ */ jsxs63(
+          /* @__PURE__ */ jsxs65(
             "div",
             {
               onDragOver: (e) => {
@@ -11418,10 +11840,10 @@ var FileUpload = /* @__PURE__ */ React91.forwardRef(function FileUpload2({
                 backgroundColor: "var(--surface-neutral-input-field)"
               },
               children: [
-                /* @__PURE__ */ jsx87("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label)", textAlign: "center" }, children: promptText }),
-                /* @__PURE__ */ jsx87(Button, { variant: "secondary", size: "small", onClick: () => inputRef.current?.click(), children: browseLabel }),
-                /* @__PURE__ */ jsx87("span", { className: "text-label-s-regular", style: { color: "var(--text-default-label-idle)", textAlign: "center" }, children: maxSizeText }),
-                /* @__PURE__ */ jsx87(
+                /* @__PURE__ */ jsx89("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label)", textAlign: "center" }, children: promptText }),
+                /* @__PURE__ */ jsx89(Button, { variant: "secondary", size: "small", onClick: () => inputRef.current?.click(), children: browseLabel }),
+                /* @__PURE__ */ jsx89("span", { className: "text-label-s-regular", style: { color: "var(--text-default-label-idle)", textAlign: "center" }, children: maxSizeText }),
+                /* @__PURE__ */ jsx89(
                   "input",
                   {
                     ref: inputRef,
@@ -11443,11 +11865,11 @@ var FileUpload = /* @__PURE__ */ React91.forwardRef(function FileUpload2({
 });
 
 // src/FileUpload/FileUploadCard.tsx
-import * as React92 from "react";
+import * as React95 from "react";
 import { Icon as Icon43 } from "@leta-io/icons";
-import { jsx as jsx88, jsxs as jsxs64 } from "react/jsx-runtime";
-var FileUploadCard = /* @__PURE__ */ React92.forwardRef(function FileUploadCard2({ status = "uploading", filename, size, progress = 0, onRemove, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs64(
+import { jsx as jsx90, jsxs as jsxs66 } from "react/jsx-runtime";
+var FileUploadCard = /* @__PURE__ */ React95.forwardRef(function FileUploadCard2({ status = "uploading", filename, size, progress = 0, onRemove, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs66(
     "div",
     {
       ref,
@@ -11464,26 +11886,26 @@ var FileUploadCard = /* @__PURE__ */ React92.forwardRef(function FileUploadCard2
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs64("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: "var(--spacing-20px)" }, children: [
-          /* @__PURE__ */ jsxs64("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx88("span", { style: { flexShrink: 0, display: "flex", color: "var(--icons-neutral-default)" }, children: /* @__PURE__ */ jsx88(Icon43, { name: status === "uploaded" ? "Check-Circle" : "Loading", outlined: true, size: 20 }) }),
-            /* @__PURE__ */ jsxs64("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx88("span", { className: "text-label-m-semibold", style: { color: "var(--text-default-heading)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: filename }),
-              size && /* @__PURE__ */ jsx88("span", { className: "text-label-s-regular", style: { color: "var(--text-default-sub-body)" }, children: size })
+        /* @__PURE__ */ jsxs66("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: "var(--spacing-20px)" }, children: [
+          /* @__PURE__ */ jsxs66("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx90("span", { style: { flexShrink: 0, display: "flex", color: "var(--icons-neutral-default)" }, children: /* @__PURE__ */ jsx90(Icon43, { name: status === "uploaded" ? "Check-Circle" : "Loading", outlined: true, size: 20 }) }),
+            /* @__PURE__ */ jsxs66("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx90("span", { className: "text-label-m-semibold", style: { color: "var(--text-default-heading)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: filename }),
+              size && /* @__PURE__ */ jsx90("span", { className: "text-label-s-regular", style: { color: "var(--text-default-sub-body)" }, children: size })
             ] })
           ] }),
-          /* @__PURE__ */ jsx88(Button, { variant: "ghost", size: "small", iconOnly: "Cancel", "aria-label": "Remove file", onClick: onRemove })
+          /* @__PURE__ */ jsx90(Button, { variant: "ghost", size: "small", iconOnly: "Cancel", "aria-label": "Remove File", onClick: onRemove })
         ] }),
-        status === "uploading" && /* @__PURE__ */ jsx88(DesktopProgressIndicator, { variant: "upload", value: progress })
+        status === "uploading" && /* @__PURE__ */ jsx90(DesktopProgressIndicator, { variant: "upload", value: progress })
       ]
     }
   );
 });
 
 // src/MobileFileUpload/MobileFileUpload.tsx
-import * as React93 from "react";
+import * as React96 from "react";
 import { Icon as Icon44 } from "@leta-io/icons";
-import { jsx as jsx89, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs67 } from "react/jsx-runtime";
 var STYLE_ID29 = "leta-mobile-file-upload-styles";
 var STYLES20 = `
   .leta-mfu__add, .leta-mfu__delete { cursor: pointer; }
@@ -11492,7 +11914,7 @@ var STYLES20 = `
     outline-offset: 4px;
   }
 `;
-function ensureStyles25() {
+function ensureStyles26() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID29)) return;
   const el = document.createElement("style");
@@ -11501,7 +11923,7 @@ function ensureStyles25() {
   document.head.appendChild(el);
 }
 var TILE = { width: 111, height: 104, flexShrink: 0, borderRadius: "var(--rounding-lg)", boxSizing: "border-box" };
-var MobileFileUpload = /* @__PURE__ */ React93.forwardRef(function MobileFileUpload2({
+var MobileFileUpload = /* @__PURE__ */ React96.forwardRef(function MobileFileUpload2({
   label = "Attach an image",
   showLabel = true,
   showLabelIcon = false,
@@ -11515,25 +11937,25 @@ var MobileFileUpload = /* @__PURE__ */ React93.forwardRef(function MobileFileUpl
   style,
   ...rest
 }, ref) {
-  ensureStyles25();
+  ensureStyles26();
   const adds = addTiles ?? (images.length === 0 ? 3 : 0);
-  return /* @__PURE__ */ jsxs65(
+  return /* @__PURE__ */ jsxs67(
     "div",
     {
       ref,
       style: { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "var(--spacing-8px)", width: 350, boxSizing: "border-box", ...style },
       ...rest,
       children: [
-        showLabel && /* @__PURE__ */ jsxs65("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", minHeight: 20 }, children: [
-          /* @__PURE__ */ jsxs65("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
-            /* @__PURE__ */ jsx89("span", { className: "text-label-m-medium", style: { color: "var(--text-default-label-idle)" }, children: label }),
-            showLabelIcon && /* @__PURE__ */ jsx89("span", { style: { display: "flex", color: "var(--icons-neutral-idle)", flexShrink: 0 }, children: /* @__PURE__ */ jsx89(Icon44, { name: labelIcon, outlined: true, size: 18 }) })
+        showLabel && /* @__PURE__ */ jsxs67("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-4px)", minHeight: 20 }, children: [
+          /* @__PURE__ */ jsxs67("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)" }, children: [
+            /* @__PURE__ */ jsx91("span", { className: "text-label-m-medium", style: { color: "var(--text-default-label-idle)" }, children: label }),
+            showLabelIcon && /* @__PURE__ */ jsx91("span", { style: { display: "flex", color: "var(--icons-neutral-idle)", flexShrink: 0 }, children: /* @__PURE__ */ jsx91(Icon44, { name: labelIcon, outlined: true, size: 18 }) })
           ] }),
-          tag !== "none" && /* @__PURE__ */ jsx89("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label-idle)" }, children: tag === "optional" ? "(Optional)" : "(Required)" })
+          tag !== "none" && /* @__PURE__ */ jsx91("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label-idle)" }, children: tag === "optional" ? "(Optional)" : "(Required)" })
         ] }),
-        /* @__PURE__ */ jsxs65("div", { style: { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: "var(--spacing-8px)" }, children: [
-          images.map((img, i) => /* @__PURE__ */ jsxs65("div", { style: { ...TILE, position: "relative", overflow: "visible" }, children: [
-            /* @__PURE__ */ jsx89(
+        /* @__PURE__ */ jsxs67("div", { style: { display: "flex", flexDirection: "row", flexWrap: "wrap", gap: "var(--spacing-8px)" }, children: [
+          images.map((img, i) => /* @__PURE__ */ jsxs67("div", { style: { ...TILE, position: "relative", overflow: "visible" }, children: [
+            /* @__PURE__ */ jsx91(
               "img",
               {
                 src: img.src,
@@ -11541,12 +11963,12 @@ var MobileFileUpload = /* @__PURE__ */ React93.forwardRef(function MobileFileUpl
                 style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "var(--rounding-lg)", display: "block" }
               }
             ),
-            /* @__PURE__ */ jsx89(
+            /* @__PURE__ */ jsx91(
               "button",
               {
                 type: "button",
                 className: "leta-mfu__delete",
-                "aria-label": "Remove image",
+                "aria-label": "Remove Image",
                 onClick: () => onRemove?.(i),
                 style: {
                   position: "absolute",
@@ -11563,11 +11985,11 @@ var MobileFileUpload = /* @__PURE__ */ React93.forwardRef(function MobileFileUpl
                   backgroundColor: "var(--surface-neutral-bg-default)",
                   color: "var(--icons-error-default)"
                 },
-                children: /* @__PURE__ */ jsx89(Icon44, { name: "Delete", outlined: true, size: 16 })
+                children: /* @__PURE__ */ jsx91(Icon44, { name: "Delete", outlined: true, size: 16 })
               }
             )
           ] }, `img-${i}`)),
-          Array.from({ length: adds }).map((_, i) => /* @__PURE__ */ jsxs65(
+          Array.from({ length: adds }).map((_, i) => /* @__PURE__ */ jsxs67(
             "button",
             {
               type: "button",
@@ -11584,8 +12006,8 @@ var MobileFileUpload = /* @__PURE__ */ React93.forwardRef(function MobileFileUpl
                 backgroundColor: "var(--surface-neutral-input-field)"
               },
               children: [
-                /* @__PURE__ */ jsx89("span", { style: { display: "flex", color: "var(--icons-neutral-idle)" }, children: /* @__PURE__ */ jsx89(Icon44, { name: "Image-Upload", outlined: false, size: 40 }) }),
-                /* @__PURE__ */ jsx89("span", { className: "text-label-s-regular", style: { color: "var(--text-default-label-idle)" }, children: addLabel })
+                /* @__PURE__ */ jsx91("span", { style: { display: "flex", color: "var(--icons-neutral-idle)" }, children: /* @__PURE__ */ jsx91(Icon44, { name: "Image-Upload", outlined: false, size: 40 }) }),
+                /* @__PURE__ */ jsx91("span", { className: "text-label-s-regular", style: { color: "var(--text-default-label-idle)" }, children: addLabel })
               ]
             },
             `add-${i}`
@@ -11597,10 +12019,10 @@ var MobileFileUpload = /* @__PURE__ */ React93.forwardRef(function MobileFileUpl
 });
 
 // src/Placeholder/Placeholder.tsx
-import * as React94 from "react";
-import { jsx as jsx90 } from "react/jsx-runtime";
-var Placeholder = /* @__PURE__ */ React94.forwardRef(function Placeholder2({ label = "Placeholder", minHeight = 120, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx90(
+import * as React97 from "react";
+import { jsx as jsx92 } from "react/jsx-runtime";
+var Placeholder = /* @__PURE__ */ React97.forwardRef(function Placeholder2({ label = "Placeholder", minHeight = 120, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx92(
     "div",
     {
       ref,
@@ -11618,67 +12040,15 @@ var Placeholder = /* @__PURE__ */ React94.forwardRef(function Placeholder2({ lab
         ...style
       },
       ...rest,
-      children: /* @__PURE__ */ jsx90("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label-idle)", textAlign: "center" }, children: label })
+      children: /* @__PURE__ */ jsx92("span", { className: "text-label-m-regular", style: { color: "var(--text-default-label-idle)", textAlign: "center" }, children: label })
     }
   );
 });
 
 // src/DesktopDropdowns/DesktopDropdowns.tsx
-import * as React96 from "react";
+import * as React98 from "react";
 import "@leta-io/icons";
-
-// src/utils/useRovingFocus.ts
-import * as React95 from "react";
-function useRovingFocus(ref) {
-  React95.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    if (el.contains(document.activeElement)) return;
-    if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
-    el.focus({ preventScroll: true });
-  }, []);
-  React95.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const items = () => {
-      const rows = [...el.querySelectorAll('.leta-dmo[tabindex="0"]')];
-      if (rows.length > 0) return rows.filter(isVisible);
-      return [...el.querySelectorAll(".leta-dmo input, .leta-dmo button")].filter(isVisible);
-    };
-    const onKeyDown = (e) => {
-      const isArrow = e.key === "ArrowDown" || e.key === "ArrowUp";
-      const isEdge = e.key === "Home" || e.key === "End";
-      if (!isArrow && !isEdge) return;
-      if (isEdge && isTextEntry(e.target)) return;
-      const list = items();
-      if (list.length === 0) return;
-      const active = document.activeElement;
-      const at = active ? list.indexOf(active) : -1;
-      let next;
-      if (e.key === "Home") next = 0;
-      else if (e.key === "End") next = list.length - 1;
-      else if (at === -1) next = e.key === "ArrowDown" ? 0 : list.length - 1;
-      else next = (at + (e.key === "ArrowDown" ? 1 : -1) + list.length) % list.length;
-      e.preventDefault();
-      list[next]?.focus();
-      list[next]?.scrollIntoView({ block: "nearest" });
-    };
-    el.addEventListener("keydown", onKeyDown);
-    return () => el.removeEventListener("keydown", onKeyDown);
-  });
-}
-function isVisible(el) {
-  return el.offsetParent !== null || el.getClientRects().length > 0;
-}
-function isTextEntry(target) {
-  const el = target;
-  if (!el) return false;
-  const tag = el.tagName;
-  return tag === "INPUT" || tag === "TEXTAREA" || el.isContentEditable;
-}
-
-// src/DesktopDropdowns/DesktopDropdowns.tsx
-import { Fragment as Fragment22, jsx as jsx91, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx93, jsxs as jsxs68 } from "react/jsx-runtime";
 var WIDTH = {
   combobox: 350,
   "combobox-empty": 350,
@@ -11755,18 +12125,18 @@ var USER_MENU_GROUPS = [
 ];
 var col4 = { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)" };
 function List({ children }) {
-  return /* @__PURE__ */ jsx91("div", { style: { ...col4, padding: "var(--padding-8px)" }, children });
+  return /* @__PURE__ */ jsx93("div", { style: { ...col4, padding: "var(--padding-8px)" }, children });
 }
 function ScrollList({ height, flushBottom, children }) {
-  return /* @__PURE__ */ jsx91("div", { style: { ...col4, padding: `var(--padding-8px) var(--padding-8px) ${flushBottom ? "0px" : "var(--padding-8px)"}`, maxHeight: height, overflowY: "auto", overscrollBehavior: "contain" }, children });
+  return /* @__PURE__ */ jsx93("div", { style: { ...col4, padding: `var(--padding-8px) var(--padding-8px) ${flushBottom ? "0px" : "var(--padding-8px)"}`, maxHeight: height, overflowY: "auto", overscrollBehavior: "contain" }, children });
 }
 function Divider3() {
-  return /* @__PURE__ */ jsx91("div", { style: { height: "var(--stroke-xs)", backgroundColor: "var(--border-neutral-default)", width: "100%", flexShrink: 0 } });
+  return /* @__PURE__ */ jsx93("div", { style: { height: "var(--stroke-xs)", backgroundColor: "var(--border-neutral-default)", width: "100%", flexShrink: 0 } });
 }
 function ResultsLabel({ text }) {
   const m = text.match(/^(\d[\d,]*)(.*)$/);
-  return /* @__PURE__ */ jsx91("span", { className: "text-body-l-regular", style: { color: "var(--text-default-body)", whiteSpace: "nowrap" }, children: m ? /* @__PURE__ */ jsxs66(Fragment22, { children: [
-    /* @__PURE__ */ jsx91("span", { className: "text-body-l-semibold", children: m[1] }),
+  return /* @__PURE__ */ jsx93("span", { className: "text-body-l-regular", style: { color: "var(--text-default-body)", whiteSpace: "nowrap" }, children: m ? /* @__PURE__ */ jsxs68(Fragment24, { children: [
+    /* @__PURE__ */ jsx93("span", { className: "text-body-l-semibold", children: m[1] }),
     m[2]
   ] }) : text });
 }
@@ -11779,21 +12149,21 @@ function FilterFooter({
   onSecondaryClick,
   onPrimaryClick
 }) {
-  return /* @__PURE__ */ jsxs66(
+  return /* @__PURE__ */ jsxs68(
     FooterFrame,
     {
       variant: showLeading ? "data-summary" : "default",
-      leading: showLeading ? /* @__PURE__ */ jsx91(ResultsLabel, { text: resultsText }) : void 0,
+      leading: showLeading ? /* @__PURE__ */ jsx93(ResultsLabel, { text: resultsText }) : void 0,
       scrollShadow: true,
       style: { flexShrink: 0 },
       children: [
-        /* @__PURE__ */ jsx91(Button, { variant: "secondary", size: "medium", disabled: secondaryDisabled, onClick: onSecondaryClick, children: secondaryLabel }),
-        /* @__PURE__ */ jsx91(Button, { variant: "primary", size: "medium", disabled: primaryDisabled, onClick: onPrimaryClick, children: "Show Results" })
+        /* @__PURE__ */ jsx93(Button, { variant: "secondary", size: "medium", disabled: secondaryDisabled, onClick: onSecondaryClick, children: secondaryLabel }),
+        /* @__PURE__ */ jsx93(Button, { variant: "primary", size: "medium", disabled: primaryDisabled, onClick: onPrimaryClick, children: "Show Results" })
       ]
     }
   );
 }
-var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdowns2({
+var DesktopDropdowns = /* @__PURE__ */ React98.forwardRef(function DesktopDropdowns2({
   variant = "combobox",
   options,
   activeIndex = 0,
@@ -11823,12 +12193,12 @@ var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdo
   const filterOpts = options ?? DEFAULT_FILTER_OPTIONS;
   const dims = groups ?? DEFAULT_FILTER_GROUPS;
   const fixedHeight = variant === "filter-group" || variant === "filter-group-empty" ? 360 : variant === "basic-filter" || variant === "basic-filter-search" || variant === "basic-filter-search-empty" ? 328 : void 0;
-  const [active, setActive] = React96.useState(activeIndex);
-  const [checked, setChecked] = React96.useState(() => /* @__PURE__ */ new Set());
-  const [sortField, setSortField] = React96.useState(sortIndex);
-  const [activeGroup, setActiveGroup] = React96.useState(0);
-  const [groupSearch, setGroupSearch] = React96.useState(variant === "filter-group-empty" ? "Xyzzy" : "");
-  const [groupChecked, setGroupChecked] = React96.useState(
+  const [active, setActive] = React98.useState(activeIndex);
+  const [checked, setChecked] = React98.useState(() => /* @__PURE__ */ new Set());
+  const [sortField, setSortField] = React98.useState(sortIndex);
+  const [activeGroup, setActiveGroup] = React98.useState(0);
+  const [groupSearch, setGroupSearch] = React98.useState(variant === "filter-group-empty" ? "Xyzzy" : "");
+  const [groupChecked, setGroupChecked] = React98.useState(
     () => dims.map((_, i) => initialGroupSelections?.[i] ?? [])
   );
   const toggleGroupChecked = (groupIdx, value) => {
@@ -11847,7 +12217,7 @@ var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdo
     onGroupSelectionChange?.(next);
     onReset?.();
   };
-  const [sortDir, setSortDir] = React96.useState(sortDirection === "asc" ? 0 : 1);
+  const [sortDir, setSortDir] = React98.useState(sortDirection === "asc" ? 0 : 1);
   const toggleChecked = (i) => {
     const next = new Set(checked);
     if (next.has(i)) next.delete(i);
@@ -11865,55 +12235,55 @@ var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdo
   } else {
     switch (variant) {
       case "combobox":
-        body = /* @__PURE__ */ jsx91(ScrollList, { height: 240, children: opts.map((l, i) => /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "combobox", label: l, active: i === active, onSelect: () => setActive(i) }, i)) });
+        body = /* @__PURE__ */ jsx93(ScrollList, { height: 240, children: opts.map((l, i) => /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "combobox", label: l, active: i === active, onSelect: () => setActive(i) }, i)) });
         break;
       case "combobox-empty":
-        body = /* @__PURE__ */ jsx91("div", { style: { height: 248, boxSizing: "border-box", display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--padding-8px)" }, children: /* @__PURE__ */ jsx91(EmptyState, { type: "no-results", size: "desktop", showIcon: false, description: emptyDescription }) });
+        body = /* @__PURE__ */ jsx93("div", { style: { height: 248, boxSizing: "border-box", display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--padding-8px)" }, children: /* @__PURE__ */ jsx93(EmptyState, { type: "no-results", size: "desktop", showIcon: false, description: emptyDescription }) });
         break;
       case "combobox-search":
-        body = /* @__PURE__ */ jsxs66(Fragment22, { children: [
-          /* @__PURE__ */ jsx91("div", { style: { padding: "var(--padding-8px)", borderBottom: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: /* @__PURE__ */ jsx91(SearchInput, { placeholder: "Search here...", style: { width: "100%" } }) }),
-          /* @__PURE__ */ jsx91(ScrollList, { height: 240, children: opts.map((l, i) => /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "combobox", label: l, active: i === active, onSelect: () => setActive(i) }, i)) })
+        body = /* @__PURE__ */ jsxs68(Fragment24, { children: [
+          /* @__PURE__ */ jsx93("div", { style: { padding: "var(--padding-8px)", borderBottom: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: /* @__PURE__ */ jsx93(SearchInput, { placeholder: "Search here...", style: { width: "100%" } }) }),
+          /* @__PURE__ */ jsx93(ScrollList, { height: 240, children: opts.map((l, i) => /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "combobox", label: l, active: i === active, onSelect: () => setActive(i) }, i)) })
         ] });
         break;
       case "combobox-search-empty":
-        body = /* @__PURE__ */ jsxs66(Fragment22, { children: [
-          /* @__PURE__ */ jsx91("div", { style: { padding: "var(--padding-8px)", borderBottom: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: /* @__PURE__ */ jsx91(SearchInput, { defaultValue: "Xyzzy", onClear: () => {
+        body = /* @__PURE__ */ jsxs68(Fragment24, { children: [
+          /* @__PURE__ */ jsx93("div", { style: { padding: "var(--padding-8px)", borderBottom: "var(--stroke-xs) solid var(--border-neutral-default)" }, children: /* @__PURE__ */ jsx93(SearchInput, { defaultValue: "Xyzzy", onClear: () => {
           }, style: { width: "100%" } }) }),
-          /* @__PURE__ */ jsx91("div", { style: { height: 248, display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--padding-16px)" }, children: /* @__PURE__ */ jsx91(EmptyState, { type: "no-results", size: "desktop", showIcon: false, description: emptyDescription }) })
+          /* @__PURE__ */ jsx93("div", { style: { height: 248, display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--padding-16px)" }, children: /* @__PURE__ */ jsx93(EmptyState, { type: "no-results", size: "desktop", showIcon: false, description: emptyDescription }) })
         ] });
         break;
       case "combobox-create":
-        body = /* @__PURE__ */ jsxs66(Fragment22, { children: [
-          /* @__PURE__ */ jsx91(ScrollList, { height: 240, flushBottom: true, children: opts.map((l, i) => /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "combobox", label: l, active: i === active, onSelect: () => setActive(i) }, i)) }),
-          /* @__PURE__ */ jsx91("div", { style: { padding: "var(--padding-8px)", borderTop: "var(--stroke-xs) solid var(--border-neutral-default)", flexShrink: 0 }, children: /* @__PURE__ */ jsx91(Button, { variant: "ghost", size: "medium", iconLeft: "Add", style: { width: "100%", justifyContent: "flex-start" }, children: createLabel }) })
+        body = /* @__PURE__ */ jsxs68(Fragment24, { children: [
+          /* @__PURE__ */ jsx93(ScrollList, { height: 240, flushBottom: true, children: opts.map((l, i) => /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "combobox", label: l, active: i === active, onSelect: () => setActive(i) }, i)) }),
+          /* @__PURE__ */ jsx93("div", { style: { padding: "var(--padding-8px)", borderTop: "var(--stroke-xs) solid var(--border-neutral-default)", flexShrink: 0 }, children: /* @__PURE__ */ jsx93(Button, { variant: "ghost", size: "medium", iconLeft: "Add", style: { width: "100%", justifyContent: "flex-start" }, children: createLabel }) })
         ] });
         break;
       case "combobox-create-empty":
-        body = /* @__PURE__ */ jsxs66(Fragment22, { children: [
-          /* @__PURE__ */ jsx91("div", { style: { padding: "var(--padding-16px)" }, children: /* @__PURE__ */ jsx91(NotificationBanner, { type: "info", variant: "subtle", description: "Can\u2019t find a match? Try adding it instead." }) }),
-          /* @__PURE__ */ jsx91("div", { style: { padding: "var(--padding-8px)", borderTop: "var(--stroke-xs) solid var(--border-neutral-default)", flexShrink: 0 }, children: /* @__PURE__ */ jsx91(Button, { variant: "ghost", size: "medium", iconLeft: "Add", style: { width: "100%", justifyContent: "flex-start" }, children: createLabel }) })
+        body = /* @__PURE__ */ jsxs68(Fragment24, { children: [
+          /* @__PURE__ */ jsx93("div", { style: { padding: "var(--padding-16px)" }, children: /* @__PURE__ */ jsx93(NotificationBanner, { type: "info", variant: "subtle", description: "Can\u2019t find a match? Try adding it instead." }) }),
+          /* @__PURE__ */ jsx93("div", { style: { padding: "var(--padding-8px)", borderTop: "var(--stroke-xs) solid var(--border-neutral-default)", flexShrink: 0 }, children: /* @__PURE__ */ jsx93(Button, { variant: "ghost", size: "medium", iconLeft: "Add", style: { width: "100%", justifyContent: "flex-start" }, children: createLabel }) })
         ] });
         break;
       case "actions":
-        body = /* @__PURE__ */ jsxs66(Fragment22, { children: [
-          /* @__PURE__ */ jsx91(List, { children: opts.map((l, i) => /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "dropdown-basic", label: l, showLeadingIcon: true, showChevron: false }, i)) }),
-          /* @__PURE__ */ jsx91(Divider3, {}),
-          /* @__PURE__ */ jsx91("div", { style: { padding: "var(--padding-8px)" }, children: /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "dropdown-destructive", label: "Delete", showLeadingIcon: true, leadingIcon: "Delete" }) })
+        body = /* @__PURE__ */ jsxs68(Fragment24, { children: [
+          /* @__PURE__ */ jsx93(List, { children: opts.map((l, i) => /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "dropdown-basic", label: l, showLeadingIcon: true, showChevron: false }, i)) }),
+          /* @__PURE__ */ jsx93(Divider3, {}),
+          /* @__PURE__ */ jsx93("div", { style: { padding: "var(--padding-8px)" }, children: /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "dropdown-destructive", label: "Delete", showLeadingIcon: true, leadingIcon: "Delete" }) })
         ] });
         break;
       case "user-menu":
-        body = /* @__PURE__ */ jsxs66(Fragment22, { children: [
-          /* @__PURE__ */ jsx91("div", { style: { padding: "var(--padding-8px)" }, children: /* @__PURE__ */ jsxs66("div", { style: { display: "flex", alignItems: "center", gap: "var(--spacing-8px)", padding: "var(--padding-10px)" }, children: [
-            /* @__PURE__ */ jsx91(Avatar, { name: userName, src: userAvatarSrc, size: "small", tone: userTone }),
-            /* @__PURE__ */ jsxs66("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx91("span", { className: "text-label-l-semibold", style: { color: "var(--text-default-heading)", whiteSpace: "nowrap" }, children: userName }),
-              /* @__PURE__ */ jsx91("span", { className: "text-label-s-regular", style: { color: "var(--text-default-sub-body)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: userEmail })
+        body = /* @__PURE__ */ jsxs68(Fragment24, { children: [
+          /* @__PURE__ */ jsx93("div", { style: { padding: "var(--padding-8px)" }, children: /* @__PURE__ */ jsxs68("div", { style: { display: "flex", alignItems: "center", gap: "var(--spacing-8px)", padding: "var(--padding-10px)" }, children: [
+            /* @__PURE__ */ jsx93(Avatar, { name: userName, src: userAvatarSrc, size: "small", tone: userTone }),
+            /* @__PURE__ */ jsxs68("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-4px)", minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx93("span", { className: "text-label-l-semibold", style: { color: "var(--text-default-heading)", whiteSpace: "nowrap" }, children: userName }),
+              /* @__PURE__ */ jsx93("span", { className: "text-label-s-regular", style: { color: "var(--text-default-sub-body)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: userEmail })
             ] })
           ] }) }),
-          USER_MENU_GROUPS.map((group, gi) => /* @__PURE__ */ jsxs66(React96.Fragment, { children: [
-            /* @__PURE__ */ jsx91(Divider3, {}),
-            /* @__PURE__ */ jsx91(List, { children: group.map((item) => /* @__PURE__ */ jsx91(
+          USER_MENU_GROUPS.map((group, gi) => /* @__PURE__ */ jsxs68(React98.Fragment, { children: [
+            /* @__PURE__ */ jsx93(Divider3, {}),
+            /* @__PURE__ */ jsx93(List, { children: group.map((item) => /* @__PURE__ */ jsx93(
               DesktopMenuOptions,
               {
                 type: "dropdown-basic",
@@ -11939,12 +12309,12 @@ var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdo
           setSortDir(d);
           onSortChange?.({ index: sortField, label: sel?.label ?? "", direction: d === 0 ? "asc" : "desc" });
         };
-        body = /* @__PURE__ */ jsxs66(Fragment22, { children: [
-          /* @__PURE__ */ jsx91(List, { children: sortOptions.map((o, i) => /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "radio-selection", label: o.label, selected: i === sortField, onSelect: () => pickField(i) }, `${o.label}-${i}`)) }),
-          /* @__PURE__ */ jsx91(Divider3, {}),
-          /* @__PURE__ */ jsxs66(List, { children: [
-            /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "combobox", label: ascLabel, showLeadingIcon: true, leadingIcon: "Up-Arrow", active: sortDir === 0, onSelect: () => pickDir(0) }),
-            /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "combobox", label: descLabel, showLeadingIcon: true, leadingIcon: "Down-Arrow", active: sortDir === 1, onSelect: () => pickDir(1) })
+        body = /* @__PURE__ */ jsxs68(Fragment24, { children: [
+          /* @__PURE__ */ jsx93(List, { children: sortOptions.map((o, i) => /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "radio-selection", label: o.label, selected: i === sortField, onSelect: () => pickField(i) }, `${o.label}-${i}`)) }),
+          /* @__PURE__ */ jsx93(Divider3, {}),
+          /* @__PURE__ */ jsxs68(List, { children: [
+            /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "combobox", label: ascLabel, showLeadingIcon: true, leadingIcon: "Up-Arrow", active: sortDir === 0, onSelect: () => pickDir(0) }),
+            /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "combobox", label: descLabel, showLeadingIcon: true, leadingIcon: "Down-Arrow", active: sortDir === 1, onSelect: () => pickDir(1) })
           ] })
         ] });
         break;
@@ -11954,15 +12324,15 @@ var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdo
       case "basic-filter-search-empty": {
         const search = variant !== "basic-filter";
         const searchEmpty = variant === "basic-filter-search-empty";
-        body = /* @__PURE__ */ jsxs66(Fragment22, { children: [
+        body = /* @__PURE__ */ jsxs68(Fragment24, { children: [
           search && // Figma "Search" frame: pad 8 + a 1px bottom outline separating it from the list.
-          /* @__PURE__ */ jsx91("div", { style: { padding: "var(--padding-8px)", borderBottom: "var(--stroke-xs) solid var(--border-neutral-default)", flexShrink: 0 }, children: /* @__PURE__ */ jsx91(SearchInput, { ...searchEmpty ? { defaultValue: "Xyzzy", onClear: () => {
+          /* @__PURE__ */ jsx93("div", { style: { padding: "var(--padding-8px)", borderBottom: "var(--stroke-xs) solid var(--border-neutral-default)", flexShrink: 0 }, children: /* @__PURE__ */ jsx93(SearchInput, { ...searchEmpty ? { defaultValue: "Xyzzy", onClear: () => {
           } } : { placeholder: "Search here..." }, style: { width: "100%" } }) }),
-          searchEmpty ? /* @__PURE__ */ jsx91("div", { style: { flex: 1, minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--padding-8px)" }, children: /* @__PURE__ */ jsx91(EmptyState, { type: "no-results", size: "desktop", showIcon: false, style: { maxWidth: "100%" } }) }) : (
+          searchEmpty ? /* @__PURE__ */ jsx93("div", { style: { flex: 1, minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--padding-8px)" }, children: /* @__PURE__ */ jsx93(EmptyState, { type: "no-results", size: "desktop", showIcon: false, style: { maxWidth: "100%" } }) }) : (
             // Flex-fill the fixed 328 card (Figma): list scrolls under the footer.
-            /* @__PURE__ */ jsx91("div", { style: { ...col4, flex: 1, minHeight: 0, padding: "var(--padding-8px)", overflowY: "auto", overscrollBehavior: "contain" }, children: filterOpts.map((l, i) => /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "checkbox-selection", label: l, selected: checked.has(i), onSelect: () => toggleChecked(i) }, i)) })
+            /* @__PURE__ */ jsx93("div", { style: { ...col4, flex: 1, minHeight: 0, padding: "var(--padding-8px)", overflowY: "auto", overscrollBehavior: "contain" }, children: filterOpts.map((l, i) => /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "checkbox-selection", label: l, selected: checked.has(i), onSelect: () => toggleChecked(i) }, i)) })
           ),
-          /* @__PURE__ */ jsx91(FilterFooter, { resultsText, secondaryLabel: "Reset", primaryDisabled: searchEmpty })
+          /* @__PURE__ */ jsx93(FilterFooter, { resultsText, secondaryLabel: "Reset", primaryDisabled: searchEmpty })
         ] });
         break;
       }
@@ -11972,9 +12342,9 @@ var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdo
         const q = groupSearch.trim().toLowerCase();
         const visibleOptions = activeDim ? activeDim.options.filter((o) => o.toLowerCase().includes(q)) : [];
         const noMatch = visibleOptions.length === 0;
-        body = /* @__PURE__ */ jsxs66(Fragment22, { children: [
-          /* @__PURE__ */ jsxs66("div", { style: { display: "flex", flexDirection: "row", flex: 1, minHeight: 0, justifyContent: "space-between" }, children: [
-            /* @__PURE__ */ jsx91("div", { style: { width: 196, flexShrink: 0, boxSizing: "border-box", display: "flex", flexDirection: "column", gap: "var(--spacing-12px)", padding: "16px 16px 0 16px", borderRight: "var(--stroke-xs) solid var(--border-neutral-default)", overflowY: "auto", overscrollBehavior: "contain" }, children: dims.map((d, i) => /* @__PURE__ */ jsx91(
+        body = /* @__PURE__ */ jsxs68(Fragment24, { children: [
+          /* @__PURE__ */ jsxs68("div", { style: { display: "flex", flexDirection: "row", flex: 1, minHeight: 0, justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx93("div", { style: { width: 196, flexShrink: 0, boxSizing: "border-box", display: "flex", flexDirection: "column", gap: "var(--spacing-12px)", padding: "16px 16px 0 16px", borderRight: "var(--stroke-xs) solid var(--border-neutral-default)", overflowY: "auto", overscrollBehavior: "contain" }, children: dims.map((d, i) => /* @__PURE__ */ jsx93(
               DesktopMenuOptions,
               {
                 type: "filter-group",
@@ -11990,9 +12360,9 @@ var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdo
               },
               d.label
             )) }),
-            /* @__PURE__ */ jsxs66("div", { style: { flex: 1, minWidth: 0, minHeight: 0, boxSizing: "border-box", display: "flex", flexDirection: "column", gap: "var(--spacing-12px)", padding: "16px 16px 0 16px" }, children: [
-              /* @__PURE__ */ jsx91(SearchInput, { placeholder: "Search here...", value: groupSearch, onChange: (e) => setGroupSearch(e.target.value), onClear: () => setGroupSearch(""), style: { width: "100%" } }),
-              noMatch ? /* @__PURE__ */ jsx91("div", { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx91(
+            /* @__PURE__ */ jsxs68("div", { style: { flex: 1, minWidth: 0, minHeight: 0, boxSizing: "border-box", display: "flex", flexDirection: "column", gap: "var(--spacing-12px)", padding: "16px 16px 0 16px" }, children: [
+              /* @__PURE__ */ jsx93(SearchInput, { placeholder: "Search here...", value: groupSearch, onChange: (e) => setGroupSearch(e.target.value), onClear: () => setGroupSearch(""), style: { width: "100%" } }),
+              noMatch ? /* @__PURE__ */ jsx93("div", { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx93(
                 EmptyState,
                 {
                   type: "no-results",
@@ -12001,10 +12371,10 @@ var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdo
                   description: activeDim ? `All ${pluralizeDimension(activeDim.label)} will be displayed here.` : void 0,
                   style: { maxWidth: "100%" }
                 }
-              ) }) : /* @__PURE__ */ jsx91("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", ...col4 }, children: visibleOptions.map((l) => /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "checkbox-selection", label: l, selected: groupChecked[activeGroup]?.includes(l) ?? false, onSelect: () => toggleGroupChecked(activeGroup, l) }, l)) })
+              ) }) : /* @__PURE__ */ jsx93("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", overscrollBehavior: "contain", ...col4 }, children: visibleOptions.map((l) => /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "checkbox-selection", label: l, selected: groupChecked[activeGroup]?.includes(l) ?? false, onSelect: () => toggleGroupChecked(activeGroup, l) }, l)) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx91(
+          /* @__PURE__ */ jsx93(
             FilterFooter,
             {
               resultsText,
@@ -12019,19 +12389,19 @@ var DesktopDropdowns = /* @__PURE__ */ React96.forwardRef(function DesktopDropdo
         break;
       }
       case "timepicker":
-        body = /* @__PURE__ */ jsx91(ScrollList, { height: 232, children: TIMES.map((t, i) => /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "combobox", label: t, active: i === active, onSelect: () => setActive(i) }, t)) });
+        body = /* @__PURE__ */ jsx93(ScrollList, { height: 232, children: TIMES.map((t, i) => /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "combobox", label: t, active: i === active, onSelect: () => setActive(i) }, t)) });
         break;
       case "stacked-list":
-        body = /* @__PURE__ */ jsx91("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)", padding: "var(--padding-8px)" }, children: (options ?? ["a", "b", "c", "d"]).map((_, i, arr) => /* @__PURE__ */ jsxs66(React96.Fragment, { children: [
-          /* @__PURE__ */ jsx91(DesktopMenuOptions, { type: "dropdown-advanced", label: "Title", subtext: "Enter description here" }),
-          i < arr.length - 1 && /* @__PURE__ */ jsx91(Divider3, {})
+        body = /* @__PURE__ */ jsx93("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-8px)", padding: "var(--padding-8px)" }, children: (options ?? ["a", "b", "c", "d"]).map((_, i, arr) => /* @__PURE__ */ jsxs68(React98.Fragment, { children: [
+          /* @__PURE__ */ jsx93(DesktopMenuOptions, { type: "dropdown-advanced", label: "Title", subtext: "Enter description here" }),
+          i < arr.length - 1 && /* @__PURE__ */ jsx93(Divider3, {})
         ] }, i)) });
         break;
     }
   }
-  const cardRef = React96.useRef(null);
+  const cardRef = React98.useRef(null);
   useRovingFocus(cardRef);
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx93(
     "div",
     {
       ref: (node) => {
@@ -12158,21 +12528,21 @@ var LAST_UPDATED_COLUMN = { label: "Last Updated", role: "utility", width: 120 }
 var CREATED_BY_COLUMN = { label: "Created By", role: "primary", flex: 0.5, minWidth: 200 };
 
 // src/BulkActionsToolbar/BulkActionsToolbar.tsx
-import * as React97 from "react";
-import { Fragment as Fragment24, jsx as jsx92, jsxs as jsxs67 } from "react/jsx-runtime";
-var DefaultActions = () => /* @__PURE__ */ jsxs67(Fragment24, { children: [
-  /* @__PURE__ */ jsx92(Button, { variant: "ghost", size: "medium", iconLeft: "Proceed", iconOutlined: true, children: "Action" }),
-  /* @__PURE__ */ jsx92(Button, { variant: "ghost", size: "medium", iconLeft: "Proceed", iconOutlined: true, children: "Action" }),
-  /* @__PURE__ */ jsx92(Button, { variant: "ghost-error", size: "medium", iconLeft: "Proceed", iconOutlined: true, children: "Action" })
+import * as React99 from "react";
+import { Fragment as Fragment26, jsx as jsx94, jsxs as jsxs69 } from "react/jsx-runtime";
+var DefaultActions = () => /* @__PURE__ */ jsxs69(Fragment26, { children: [
+  /* @__PURE__ */ jsx94(Button, { variant: "ghost", size: "medium", iconLeft: "Proceed", iconOutlined: true, children: "Action" }),
+  /* @__PURE__ */ jsx94(Button, { variant: "ghost", size: "medium", iconLeft: "Proceed", iconOutlined: true, children: "Action" }),
+  /* @__PURE__ */ jsx94(Button, { variant: "ghost-error", size: "medium", iconLeft: "Proceed", iconOutlined: true, children: "Action" })
 ] });
-var Divider4 = () => /* @__PURE__ */ jsx92(
+var Divider4 = () => /* @__PURE__ */ jsx94(
   "div",
   {
     "aria-hidden": true,
     style: { alignSelf: "center", width: "var(--stroke-xs)", height: 32, backgroundColor: "var(--border-neutral-default)", flexShrink: 0 }
   }
 );
-var BulkActionsToolbar = /* @__PURE__ */ React97.forwardRef(
+var BulkActionsToolbar = /* @__PURE__ */ React99.forwardRef(
   function BulkActionsToolbar2({
     selectionLabel = "10 selected",
     onSelectionClick,
@@ -12186,12 +12556,12 @@ var BulkActionsToolbar = /* @__PURE__ */ React97.forwardRef(
     style,
     ...rest
   }, ref) {
-    return /* @__PURE__ */ jsxs67(
+    return /* @__PURE__ */ jsxs69(
       "div",
       {
         ref,
         role: "toolbar",
-        "aria-label": "Bulk actions",
+        "aria-label": "Bulk Actions",
         className: ["leta-bulk-actions-toolbar", className].filter(Boolean).join(" "),
         style: {
           boxSizing: "border-box",
@@ -12210,24 +12580,24 @@ var BulkActionsToolbar = /* @__PURE__ */ React97.forwardRef(
         },
         ...rest,
         children: [
-          /* @__PURE__ */ jsxs67("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-12px)" }, children: [
-            /* @__PURE__ */ jsx92(Button, { variant: "ghost", size: "medium", iconRight: "Chevron-Down", onClick: onSelectionClick, children: selectionLabel }),
-            summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx92("span", { style: { color: "var(--text-default-label)", whiteSpace: "nowrap" }, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs67(React97.Fragment, { children: [
-              i > 0 && /* @__PURE__ */ jsx92("span", { className: "text-label-m-regular", children: " \xB7 " }),
-              /* @__PURE__ */ jsx92("span", { className: "text-label-m-semibold", children: item.value }),
-              /* @__PURE__ */ jsxs67("span", { className: "text-label-m-regular", children: [
+          /* @__PURE__ */ jsxs69("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-12px)" }, children: [
+            /* @__PURE__ */ jsx94(Button, { variant: "ghost", size: "medium", iconRight: "Chevron-Down", onClick: onSelectionClick, children: selectionLabel }),
+            summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx94("span", { style: { color: "var(--text-default-label)", whiteSpace: "nowrap" }, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs69(React99.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx94("span", { className: "text-label-m-regular", children: " \xB7 " }),
+              /* @__PURE__ */ jsx94("span", { className: "text-label-m-semibold", children: item.value }),
+              /* @__PURE__ */ jsxs69("span", { className: "text-label-m-regular", children: [
                 " ",
                 item.unit
               ] })
             ] }, i)) })
           ] }),
-          /* @__PURE__ */ jsx92(Divider4, {}),
-          /* @__PURE__ */ jsxs67("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-12px)" }, children: [
-            actions ?? /* @__PURE__ */ jsx92(DefaultActions, {}),
-            showOverflow && /* @__PURE__ */ jsx92(HoverTip, { label: "More actions", children: /* @__PURE__ */ jsx92(Button, { variant: "ghost", size: "medium", prominent: true, iconOnly: "More", "aria-label": "More actions", onClick: onOverflowClick }) })
+          /* @__PURE__ */ jsx94(Divider4, {}),
+          /* @__PURE__ */ jsxs69("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-12px)" }, children: [
+            actions ?? /* @__PURE__ */ jsx94(DefaultActions, {}),
+            showOverflow && /* @__PURE__ */ jsx94(HoverTip, { label: "More Actions", children: /* @__PURE__ */ jsx94(Button, { variant: "ghost", size: "medium", prominent: true, iconOnly: "More", "aria-label": "More Actions", onClick: onOverflowClick }) })
           ] }),
-          /* @__PURE__ */ jsx92(Divider4, {}),
-          /* @__PURE__ */ jsx92(HoverTip, { label: "Clear selections", children: /* @__PURE__ */ jsx92(Button, { variant: "ghost", size: "medium", prominent: true, iconOnly: "Cancel", "aria-label": "Clear selections", onClick: onClose }) })
+          /* @__PURE__ */ jsx94(Divider4, {}),
+          /* @__PURE__ */ jsx94(HoverTip, { label: "Clear Selections", children: /* @__PURE__ */ jsx94(Button, { variant: "ghost", size: "medium", prominent: true, iconOnly: "Cancel", "aria-label": "Clear Selections", onClick: onClose }) })
         ]
       }
     );
@@ -12235,11 +12605,11 @@ var BulkActionsToolbar = /* @__PURE__ */ React97.forwardRef(
 );
 
 // src/ListSection/ListSection.tsx
-import * as React98 from "react";
-import { jsx as jsx93, jsxs as jsxs68 } from "react/jsx-runtime";
+import * as React100 from "react";
+import { jsx as jsx95, jsxs as jsxs70 } from "react/jsx-runtime";
 var DASHED2 = "var(--stroke-xs) dashed var(--border-neutral-default)";
 function ListDemarcator() {
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx95(
     "div",
     {
       role: "separator",
@@ -12252,20 +12622,20 @@ var DEFAULT_ITEMS = Array.from({ length: 6 }, () => ({
   label: "Text",
   value: "Enter Description here"
 }));
-var ListGroup = /* @__PURE__ */ React98.forwardRef(
+var ListGroup = /* @__PURE__ */ React100.forwardRef(
   function ListGroup2({ title = "Group Name", description = "Enter description here", items = DEFAULT_ITEMS, children, style, ...rest }, ref) {
     const rows = [];
     for (let i = 0; i < items.length; i += 2) {
       rows.push(items.slice(i, i + 2));
     }
-    return /* @__PURE__ */ jsxs68(
+    return /* @__PURE__ */ jsxs70(
       "div",
       {
         ref,
         style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", width: "100%", ...style },
         ...rest,
         children: [
-          /* @__PURE__ */ jsx93(
+          /* @__PURE__ */ jsx95(
             ContentPrimitives,
             {
               type: "group-header",
@@ -12278,7 +12648,7 @@ var ListGroup = /* @__PURE__ */ React98.forwardRef(
               showInteractiveElements: false
             }
           ),
-          children ?? /* @__PURE__ */ jsx93("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", width: "100%" }, children: rows.map((pair, rowIdx) => /* @__PURE__ */ jsx93("div", { style: { display: "flex", gap: "var(--spacing-16px)", width: "100%" }, children: pair.map((item, colIdx) => /* @__PURE__ */ jsx93(
+          children ?? /* @__PURE__ */ jsx95("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-20px)", width: "100%" }, children: rows.map((pair, rowIdx) => /* @__PURE__ */ jsx95("div", { style: { display: "flex", gap: "var(--spacing-16px)", width: "100%" }, children: pair.map((item, colIdx) => /* @__PURE__ */ jsx95(
             ContentPrimitives,
             {
               type: "vertical-list-row",
@@ -12297,16 +12667,16 @@ var ListGroup = /* @__PURE__ */ React98.forwardRef(
     );
   }
 );
-var ListSection = /* @__PURE__ */ React98.forwardRef(
+var ListSection = /* @__PURE__ */ React100.forwardRef(
   function ListSection2({ title = "Title", subtext = "Enter description here", children, defaultOpen = true, style, ...rest }, ref) {
     const { open, toggle } = useAccordion(defaultOpen);
-    const items = React98.Children.toArray(children ?? [/* @__PURE__ */ jsx93(ListGroup, {}, "g1"), /* @__PURE__ */ jsx93(ListGroup, {}, "g2")]);
+    const items = React100.Children.toArray(children ?? [/* @__PURE__ */ jsx95(ListGroup, {}, "g1"), /* @__PURE__ */ jsx95(ListGroup, {}, "g2")]);
     const body = [];
     items.forEach((child, i) => {
-      if (i > 0) body.push(/* @__PURE__ */ jsx93(ListDemarcator, {}, `d${i}`));
+      if (i > 0) body.push(/* @__PURE__ */ jsx95(ListDemarcator, {}, `d${i}`));
       body.push(child);
     });
-    return /* @__PURE__ */ jsxs68(
+    return /* @__PURE__ */ jsxs70(
       "div",
       {
         ref,
@@ -12325,7 +12695,7 @@ var ListSection = /* @__PURE__ */ React98.forwardRef(
         },
         ...rest,
         children: [
-          /* @__PURE__ */ jsx93(AccordionHeader, { open, onToggle: toggle, children: /* @__PURE__ */ jsx93(
+          /* @__PURE__ */ jsx95(AccordionHeader, { open, onToggle: toggle, children: /* @__PURE__ */ jsx95(
             ContentPrimitives,
             {
               type: "section-heading",
@@ -12333,11 +12703,11 @@ var ListSection = /* @__PURE__ */ React98.forwardRef(
               subtext,
               showTrailingContent: true,
               showInteractiveElements: true,
-              interactiveElements: /* @__PURE__ */ jsx93(AccordionChevron, { open, onToggle: toggle }),
+              interactiveElements: /* @__PURE__ */ jsx95(AccordionChevron, { open, onToggle: toggle }),
               showPassiveElements: false
             }
           ) }),
-          /* @__PURE__ */ jsx93(AccordionContent, { open, gap: "var(--spacing-24px)", children: body })
+          /* @__PURE__ */ jsx95(AccordionContent, { open, gap: "var(--spacing-24px)", children: body })
         ]
       }
     );
@@ -12345,9 +12715,9 @@ var ListSection = /* @__PURE__ */ React98.forwardRef(
 );
 
 // src/TableSection/TableSection.tsx
-import * as React99 from "react";
-import { jsx as jsx94, jsxs as jsxs69 } from "react/jsx-runtime";
-var TableSection = /* @__PURE__ */ React99.forwardRef(
+import * as React101 from "react";
+import { jsx as jsx96, jsxs as jsxs71 } from "react/jsx-runtime";
+var TableSection = /* @__PURE__ */ React101.forwardRef(
   function TableSection2({
     title = "Title",
     subtext = "Enter description here",
@@ -12358,7 +12728,7 @@ var TableSection = /* @__PURE__ */ React99.forwardRef(
     ...rest
   }, ref) {
     const { open, toggle } = useAccordion(defaultOpen);
-    return /* @__PURE__ */ jsxs69(
+    return /* @__PURE__ */ jsxs71(
       "div",
       {
         ref,
@@ -12373,7 +12743,7 @@ var TableSection = /* @__PURE__ */ React99.forwardRef(
         },
         ...rest,
         children: [
-          /* @__PURE__ */ jsx94(AccordionHeader, { open, onToggle: toggle, children: /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx96(AccordionHeader, { open, onToggle: toggle, children: /* @__PURE__ */ jsx96(
             ContentPrimitives,
             {
               type: "section-heading",
@@ -12381,14 +12751,14 @@ var TableSection = /* @__PURE__ */ React99.forwardRef(
               subtext,
               showTrailingContent: true,
               showInteractiveElements: true,
-              interactiveElements: /* @__PURE__ */ jsx94(AccordionChevron, { open, onToggle: toggle }),
+              interactiveElements: /* @__PURE__ */ jsx96(AccordionChevron, { open, onToggle: toggle }),
               showPassiveElements: false
             }
           ) }),
-          /* @__PURE__ */ jsx94(AccordionContent, { open, gap: "var(--spacing-24px)", children: children ?? /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx96(AccordionContent, { open, gap: "var(--spacing-24px)", children: children ?? /* @__PURE__ */ jsx96(
             TableContainer,
             {
-              controls: /* @__PURE__ */ jsx94(TableDataControl, { variant: "search-column", showColumnControl: false, filterCount })
+              controls: /* @__PURE__ */ jsx96(TableDataControl, { variant: "search-column", showColumnControl: false, filterCount })
             }
           ) })
         ]
@@ -12398,9 +12768,9 @@ var TableSection = /* @__PURE__ */ React99.forwardRef(
 );
 
 // src/AlertDialog/AlertDialog.tsx
-import * as React100 from "react";
-import { jsx as jsx95, jsxs as jsxs70 } from "react/jsx-runtime";
-var AlertDialog = /* @__PURE__ */ React100.forwardRef(
+import * as React102 from "react";
+import { jsx as jsx97, jsxs as jsxs72 } from "react/jsx-runtime";
+var AlertDialog = /* @__PURE__ */ React102.forwardRef(
   function AlertDialog2({
     variant = "basic",
     title = "Title",
@@ -12416,7 +12786,7 @@ var AlertDialog = /* @__PURE__ */ React100.forwardRef(
     onClose,
     ...rest
   }, ref) {
-    return /* @__PURE__ */ jsxs70(
+    return /* @__PURE__ */ jsxs72(
       ModalShell,
       {
         ref,
@@ -12425,7 +12795,7 @@ var AlertDialog = /* @__PURE__ */ React100.forwardRef(
         role: "alertdialog",
         "aria-label": title,
         onEscape: onClose ?? onCancel,
-        header: /* @__PURE__ */ jsx95(
+        header: /* @__PURE__ */ jsx97(
           ModalHeaders,
           {
             variant: "default",
@@ -12437,14 +12807,14 @@ var AlertDialog = /* @__PURE__ */ React100.forwardRef(
             leadingIconColor: variant === "warning" ? "var(--icons-warning-default)" : void 0
           }
         ),
-        footer: /* @__PURE__ */ jsxs70(
+        footer: /* @__PURE__ */ jsxs72(
           FooterFrame,
           {
             variant: footerLeading ? "tertiary-action" : "default",
             leading: footerLeading,
             children: [
-              /* @__PURE__ */ jsx95(Button, { variant: "secondary", size: "medium", onClick: onCancel, children: cancelLabel }),
-              /* @__PURE__ */ jsx95(Button, { variant: destructive ? "destructive" : "primary", size: "medium", onClick: onConfirm, children: confirmLabel })
+              /* @__PURE__ */ jsx97(Button, { variant: "secondary", size: "medium", onClick: onCancel, children: cancelLabel }),
+              /* @__PURE__ */ jsx97(Button, { variant: destructive ? "destructive" : "primary", size: "medium", onClick: onConfirm, children: confirmLabel })
             ]
           }
         ),
@@ -12452,7 +12822,7 @@ var AlertDialog = /* @__PURE__ */ React100.forwardRef(
         ...rest,
         children: [
           banner,
-          children ?? /* @__PURE__ */ jsx95(
+          children ?? /* @__PURE__ */ jsx97(
             "span",
             {
               className: "text-body-l-regular",
@@ -12467,7 +12837,7 @@ var AlertDialog = /* @__PURE__ */ React100.forwardRef(
 );
 
 // src/ModalDialog/ModalDialog.tsx
-import * as React101 from "react";
+import * as React103 from "react";
 
 // src/utils/downloadFile.ts
 async function downloadFile(url, filename) {
@@ -12495,7 +12865,7 @@ var SIGNATURE_IMAGE = new URL("./assets/signature.png", import.meta.url).href;
 var DOORSTEP_DELIVERY_IMAGE = new URL("./assets/doorstep-delivery.png", import.meta.url).href;
 
 // src/ModalDialog/ModalDialog.tsx
-import { Fragment as Fragment25, jsx as jsx96, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx98, jsxs as jsxs73 } from "react/jsx-runtime";
 var IMAGE_VARIANTS = /* @__PURE__ */ new Set(["signature", "image"]);
 var DEFAULT_DOWNLOAD_FILENAME = {
   signature: "signature.png",
@@ -12526,7 +12896,7 @@ var RECT = {
 function defaultBody(variant, imageSrc, signatureSrc) {
   switch (variant) {
     case "comment":
-      return /* @__PURE__ */ jsx96(
+      return /* @__PURE__ */ jsx98(
         TextArea,
         {
           showLabel: false,
@@ -12537,12 +12907,12 @@ function defaultBody(variant, imageSrc, signatureSrc) {
         }
       );
     case "form":
-      return /* @__PURE__ */ jsxs71("div", { style: { display: "flex", flexDirection: "row", gap: 32, width: "100%" }, children: [
-        /* @__PURE__ */ jsx96(InputField, { label: "Label Text", showHelper: false, placeholder: "Field Text", style: { flex: 1 } }),
-        /* @__PURE__ */ jsx96(InputField, { label: "Label Text", showHelper: false, placeholder: "Field Text", style: { flex: 1 } })
+      return /* @__PURE__ */ jsxs73("div", { style: { display: "flex", flexDirection: "row", gap: 32, width: "100%" }, children: [
+        /* @__PURE__ */ jsx98(InputField, { label: "Label Text", showHelper: false, placeholder: "Field Text", style: { flex: 1 } }),
+        /* @__PURE__ */ jsx98(InputField, { label: "Label Text", showHelper: false, placeholder: "Field Text", style: { flex: 1 } })
       ] });
     case "signature":
-      return /* @__PURE__ */ jsx96(
+      return /* @__PURE__ */ jsx98(
         "div",
         {
           role: "img",
@@ -12555,7 +12925,7 @@ function defaultBody(variant, imageSrc, signatureSrc) {
         }
       );
     case "image":
-      return /* @__PURE__ */ jsx96(
+      return /* @__PURE__ */ jsx98(
         "div",
         {
           role: "img",
@@ -12571,10 +12941,10 @@ function defaultBody(variant, imageSrc, signatureSrc) {
         }
       );
     case "multi-choice":
-      return /* @__PURE__ */ jsx96("div", { style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" }, children: Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ jsx96(OptionCard, { title: "Text", description: "Enter description here", showTrailing: false }, i)) });
+      return /* @__PURE__ */ jsx98("div", { style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" }, children: Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ jsx98(OptionCard, { title: "Text", description: "Enter description here", showTrailing: false }, i)) });
   }
 }
-var ModalDialog = /* @__PURE__ */ React101.forwardRef(
+var ModalDialog = /* @__PURE__ */ React103.forwardRef(
   function ModalDialog2({
     variant = "comment",
     title = "Title",
@@ -12604,7 +12974,7 @@ var ModalDialog = /* @__PURE__ */ React101.forwardRef(
       const filename = downloadFileName ?? DEFAULT_DOWNLOAD_FILENAME[variant === "signature" ? "signature" : "image"];
       void downloadFile(src, filename);
     });
-    return /* @__PURE__ */ jsx96(
+    return /* @__PURE__ */ jsx98(
       ModalShell,
       {
         ref,
@@ -12613,10 +12983,10 @@ var ModalDialog = /* @__PURE__ */ React101.forwardRef(
         role: "dialog",
         "aria-label": title,
         onEscape: onClose ?? onCancel,
-        header: /* @__PURE__ */ jsx96(ModalHeaders, { variant: "default", title, onClose: onClose ?? onCancel, showSecondaryContent: false }),
-        footer: /* @__PURE__ */ jsx96(FooterFrame, { variant: "default", children: isImageVariant && showDownloadResolved ? /* @__PURE__ */ jsx96(Button, { variant: "secondary", size: "medium", iconLeft: "Download", onClick: handleDownload, children: "Download Image" }) : /* @__PURE__ */ jsxs71(Fragment25, { children: [
-          /* @__PURE__ */ jsx96(Button, { variant: "secondary", size: "medium", onClick: onCancel, children: cancelLabel }),
-          showConfirm && /* @__PURE__ */ jsx96(
+        header: /* @__PURE__ */ jsx98(ModalHeaders, { variant: "default", title, onClose: onClose ?? onCancel, showSecondaryContent: false }),
+        footer: /* @__PURE__ */ jsx98(FooterFrame, { variant: "default", children: isImageVariant && showDownloadResolved ? /* @__PURE__ */ jsx98(Button, { variant: "secondary", size: "medium", iconLeft: "Download", onClick: handleDownload, children: "Download Image" }) : /* @__PURE__ */ jsxs73(Fragment27, { children: [
+          /* @__PURE__ */ jsx98(Button, { variant: "secondary", size: "medium", onClick: onCancel, children: cancelLabel }),
+          showConfirm && /* @__PURE__ */ jsx98(
             Button,
             {
               variant: confirmVariant ?? (destructive ? "destructive" : "primary"),
@@ -12639,11 +13009,11 @@ var ModalDialog = /* @__PURE__ */ React101.forwardRef(
 );
 
 // src/LargeModal/LargeModal.tsx
-import * as React102 from "react";
-import { jsx as jsx97, jsxs as jsxs72 } from "react/jsx-runtime";
+import * as React104 from "react";
+import { jsx as jsx99, jsxs as jsxs74 } from "react/jsx-runtime";
 function DefaultTabs() {
-  const [active, setActive] = React102.useState(0);
-  return /* @__PURE__ */ jsx97(
+  const [active, setActive] = React104.useState(0);
+  return /* @__PURE__ */ jsx99(
     PageTabsControl,
     {
       tabs: [{ label: "Default" }, { label: "Default" }, { label: "Default" }],
@@ -12655,26 +13025,26 @@ function DefaultTabs() {
 function defaultBody2(variant, filterCount) {
   switch (variant) {
     case "single-column-form":
-      return /* @__PURE__ */ jsxs72("div", { style: { display: "flex", flexDirection: "column", gap: 32, paddingBottom: 100, width: "100%" }, children: [
-        /* @__PURE__ */ jsx97(InputSection, {}),
-        /* @__PURE__ */ jsx97(InputSection, {}),
-        /* @__PURE__ */ jsx97(InputSection, {})
+      return /* @__PURE__ */ jsxs74("div", { style: { display: "flex", flexDirection: "column", gap: 32, paddingBottom: 100, width: "100%" }, children: [
+        /* @__PURE__ */ jsx99(InputSection, {}),
+        /* @__PURE__ */ jsx99(InputSection, {}),
+        /* @__PURE__ */ jsx99(InputSection, {})
       ] });
     case "dual-column-form":
-      return /* @__PURE__ */ jsxs72("div", { style: { display: "flex", flexDirection: "row", gap: 20, width: "100%", alignItems: "stretch", flex: "1 0 auto", minHeight: 0 }, children: [
-        /* @__PURE__ */ jsx97("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 32, paddingBottom: 100 }, children: /* @__PURE__ */ jsx97(InputSection, {}) }),
-        /* @__PURE__ */ jsx97("div", { style: { width: 0, flexShrink: 0, borderLeft: "var(--stroke-xs) solid var(--border-neutral-default)" } }),
-        /* @__PURE__ */ jsx97("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 32, paddingBottom: 100 }, children: /* @__PURE__ */ jsx97(InputSection, {}) })
+      return /* @__PURE__ */ jsxs74("div", { style: { display: "flex", flexDirection: "row", gap: 20, width: "100%", alignItems: "stretch", flex: "1 0 auto", minHeight: 0 }, children: [
+        /* @__PURE__ */ jsx99("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 32, paddingBottom: 100 }, children: /* @__PURE__ */ jsx99(InputSection, {}) }),
+        /* @__PURE__ */ jsx99("div", { style: { width: 0, flexShrink: 0, borderLeft: "var(--stroke-xs) solid var(--border-neutral-default)" } }),
+        /* @__PURE__ */ jsx99("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 32, paddingBottom: 100 }, children: /* @__PURE__ */ jsx99(InputSection, {}) })
       ] });
     case "drawer-read":
-      return /* @__PURE__ */ jsxs72("div", { style: { display: "flex", flexDirection: "column", gap: 20, paddingBottom: 100, width: "100%" }, children: [
-        /* @__PURE__ */ jsx97(ListSection, { defaultOpen: true }),
-        /* @__PURE__ */ jsx97(ListSection, { defaultOpen: true }),
-        /* @__PURE__ */ jsx97(ListSection, { defaultOpen: true })
+      return /* @__PURE__ */ jsxs74("div", { style: { display: "flex", flexDirection: "column", gap: 20, paddingBottom: 100, width: "100%" }, children: [
+        /* @__PURE__ */ jsx99(ListSection, { defaultOpen: true }),
+        /* @__PURE__ */ jsx99(ListSection, { defaultOpen: true }),
+        /* @__PURE__ */ jsx99(ListSection, { defaultOpen: true })
       ] });
     case "centered":
-      return /* @__PURE__ */ jsxs72("div", { style: { display: "flex", flexDirection: "column", gap: 32, paddingBottom: 100, width: "100%" }, children: [
-        /* @__PURE__ */ jsx97(InputSection, { title: "Text", children: /* @__PURE__ */ jsx97(
+      return /* @__PURE__ */ jsxs74("div", { style: { display: "flex", flexDirection: "column", gap: 32, paddingBottom: 100, width: "100%" }, children: [
+        /* @__PURE__ */ jsx99(InputSection, { title: "Text", children: /* @__PURE__ */ jsx99(
           InputGroup,
           {
             fields: [
@@ -12683,12 +13053,12 @@ function defaultBody2(variant, filterCount) {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx97(FormDemarcator, {}),
-        /* @__PURE__ */ jsx97(TableSection, { defaultOpen: true, filterCount })
+        /* @__PURE__ */ jsx99(FormDemarcator, {}),
+        /* @__PURE__ */ jsx99(TableSection, { defaultOpen: true, filterCount })
       ] });
   }
 }
-var LargeModal = /* @__PURE__ */ React102.forwardRef(
+var LargeModal = /* @__PURE__ */ React104.forwardRef(
   function LargeModal2({
     variant = "centered",
     title = "Title",
@@ -12708,8 +13078,8 @@ var LargeModal = /* @__PURE__ */ React102.forwardRef(
     const bodyHeight = isDrawer ? void 0 : 768 - 80 - 80;
     const resolvedCancel = cancelLabel ?? (isCentered ? "Close" : "Cancel");
     const resolvedConfirm = confirmLabel ?? (isCentered ? "Confirm" : "Save");
-    const resolvedLeading = footerLeading ?? (isCentered ? /* @__PURE__ */ jsx97(SelectionControl, { variant: "checkbox", label: "Don't show this again" }) : void 0);
-    return /* @__PURE__ */ jsx97(
+    const resolvedLeading = footerLeading ?? (isCentered ? /* @__PURE__ */ jsx99(SelectionControl, { variant: "checkbox", label: "Don't show this again" }) : void 0);
+    return /* @__PURE__ */ jsx99(
       ModalShell,
       {
         ref,
@@ -12718,19 +13088,19 @@ var LargeModal = /* @__PURE__ */ React102.forwardRef(
         role: "dialog",
         "aria-label": title,
         onEscape: onClose ?? onCancel,
-        header: /* @__PURE__ */ jsx97(
+        header: /* @__PURE__ */ jsx99(
           ModalHeaders,
           {
             variant: isDrawer ? "with-tabs" : "default",
             title,
             onClose: onClose ?? onCancel,
             showSecondaryContent: false,
-            tabs: isDrawer ? tabs ?? /* @__PURE__ */ jsx97(DefaultTabs, {}) : void 0
+            tabs: isDrawer ? tabs ?? /* @__PURE__ */ jsx99(DefaultTabs, {}) : void 0
           }
         ),
-        footer: /* @__PURE__ */ jsxs72(FooterFrame, { variant: "preference", leading: resolvedLeading, children: [
-          /* @__PURE__ */ jsx97(Button, { variant: "secondary", size: "medium", onClick: onCancel, children: resolvedCancel }),
-          /* @__PURE__ */ jsx97(Button, { variant: "primary", size: "medium", onClick: onConfirm, children: resolvedConfirm })
+        footer: /* @__PURE__ */ jsxs74(FooterFrame, { variant: "preference", leading: resolvedLeading, children: [
+          /* @__PURE__ */ jsx99(Button, { variant: "secondary", size: "medium", onClick: onCancel, children: resolvedCancel }),
+          /* @__PURE__ */ jsx99(Button, { variant: "primary", size: "medium", onClick: onConfirm, children: resolvedConfirm })
         ] }),
         bodyHeight,
         fillHeight: isDrawer,
@@ -12743,19 +13113,19 @@ var LargeModal = /* @__PURE__ */ React102.forwardRef(
 );
 
 // src/ExtraLargeModal/ExtraLargeModal.tsx
-import * as React103 from "react";
-import { Fragment as Fragment26, jsx as jsx98, jsxs as jsxs73 } from "react/jsx-runtime";
+import * as React105 from "react";
+import { Fragment as Fragment28, jsx as jsx100, jsxs as jsxs75 } from "react/jsx-runtime";
 var COLUMNS = Array.from({ length: 6 }, () => ({ label: "Label", width: 120 }));
 var ROW_CELLS = Array.from({ length: 6 }, () => ({ type: "sample" }));
 var ROWS = Array.from({ length: 12 }, () => ({ cells: ROW_CELLS }));
 function TableToolbar() {
-  return /* @__PURE__ */ jsxs73("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", width: "100%" }, children: [
-    /* @__PURE__ */ jsx98(SearchInput, { placeholder: "Search here...", style: { flex: 1, minWidth: 0 } }),
-    /* @__PURE__ */ jsx98(Button, { variant: "secondary", size: "medium", iconOnly: "Filter", "aria-label": "Filter" }),
-    /* @__PURE__ */ jsx98(Button, { variant: "secondary", size: "medium", iconOnly: "Sort", "aria-label": "Sort" })
+  return /* @__PURE__ */ jsxs75("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-8px)", width: "100%" }, children: [
+    /* @__PURE__ */ jsx100(SearchInput, { placeholder: "Search here...", style: { flex: 1, minWidth: 0 } }),
+    /* @__PURE__ */ jsx100(Button, { variant: "secondary", size: "medium", iconOnly: "Filter", "aria-label": "Filter" }),
+    /* @__PURE__ */ jsx100(Button, { variant: "secondary", size: "medium", iconOnly: "Sort", "aria-label": "Sort" })
   ] });
 }
-var ExtraLargeModal = /* @__PURE__ */ React103.forwardRef(
+var ExtraLargeModal = /* @__PURE__ */ React105.forwardRef(
   function ExtraLargeModal2({
     title = "Title",
     tableContent,
@@ -12768,7 +13138,7 @@ var ExtraLargeModal = /* @__PURE__ */ React103.forwardRef(
     onClose,
     ...rest
   }, ref) {
-    return /* @__PURE__ */ jsxs73(
+    return /* @__PURE__ */ jsxs75(
       ModalShell,
       {
         ref,
@@ -12777,15 +13147,15 @@ var ExtraLargeModal = /* @__PURE__ */ React103.forwardRef(
         role: "dialog",
         "aria-label": title,
         onEscape: onClose ?? onCancel,
-        header: /* @__PURE__ */ jsx98(ModalHeaders, { variant: "default", title, onClose: onClose ?? onCancel, showSecondaryContent: false }),
-        footer: /* @__PURE__ */ jsxs73(FooterFrame, { variant: "default", children: [
-          /* @__PURE__ */ jsx98(Button, { variant: "secondary", size: "medium", onClick: onCancel, children: cancelLabel }),
-          /* @__PURE__ */ jsx98(Button, { variant: "primary", size: "medium", onClick: onConfirm, children: confirmLabel })
+        header: /* @__PURE__ */ jsx100(ModalHeaders, { variant: "default", title, onClose: onClose ?? onCancel, showSecondaryContent: false }),
+        footer: /* @__PURE__ */ jsxs75(FooterFrame, { variant: "default", children: [
+          /* @__PURE__ */ jsx100(Button, { variant: "secondary", size: "medium", onClick: onCancel, children: cancelLabel }),
+          /* @__PURE__ */ jsx100(Button, { variant: "primary", size: "medium", onClick: onConfirm, children: confirmLabel })
         ] }),
         bodyHeight: 608,
         bodyStyle: { flexDirection: "row", padding: 0, gap: 0, overflow: "hidden" },
         children: [
-          /* @__PURE__ */ jsxs73(
+          /* @__PURE__ */ jsxs75(
             "div",
             {
               style: {
@@ -12800,7 +13170,7 @@ var ExtraLargeModal = /* @__PURE__ */ React103.forwardRef(
                 overflow: "hidden"
               },
               children: [
-                /* @__PURE__ */ jsx98(
+                /* @__PURE__ */ jsx100(
                   ContentPrimitives,
                   {
                     type: "section-heading",
@@ -12809,9 +13179,9 @@ var ExtraLargeModal = /* @__PURE__ */ React103.forwardRef(
                     showTrailingContent: false
                   }
                 ),
-                tableContent ?? /* @__PURE__ */ jsxs73(Fragment26, { children: [
-                  /* @__PURE__ */ jsx98(TableToolbar, {}),
-                  /* @__PURE__ */ jsx98("div", { style: { flex: 1, minHeight: 0, display: "flex" }, children: /* @__PURE__ */ jsx98(
+                tableContent ?? /* @__PURE__ */ jsxs75(Fragment28, { children: [
+                  /* @__PURE__ */ jsx100(TableToolbar, {}),
+                  /* @__PURE__ */ jsx100("div", { style: { flex: 1, minHeight: 0, display: "flex" }, children: /* @__PURE__ */ jsx100(
                     Table,
                     {
                       columns: COLUMNS,
@@ -12826,7 +13196,7 @@ var ExtraLargeModal = /* @__PURE__ */ React103.forwardRef(
               ]
             }
           ),
-          /* @__PURE__ */ jsx98("div", { style: { position: "relative", flex: 1, minWidth: 0, overflow: "hidden" }, children: mapContent ?? /* @__PURE__ */ jsx98(MapView, { center: mapCenter }) })
+          /* @__PURE__ */ jsx100("div", { style: { position: "relative", flex: 1, minWidth: 0, overflow: "hidden" }, children: mapContent ?? /* @__PURE__ */ jsx100(MapView, { center: mapCenter }) })
         ]
       }
     );
@@ -12857,6 +13227,7 @@ export {
   ConfigurationCardRow,
   ContentCard,
   ContentPrimitives,
+  DIALOG_OVERLAY_DEFAULT_TIER,
   DOORSTEP_DELIVERY_IMAGE,
   DataRows,
   DateTimePicker,
@@ -12865,6 +13236,7 @@ export {
   DesktopMetricCard,
   DesktopProgressIndicator,
   DesktopSegmentControl,
+  DialogOverlay,
   DurationLabel,
   EmptyState,
   ExtraLargeModal,
@@ -12893,6 +13265,9 @@ export {
   MapSearchInput,
   MapView,
   MapZoomControl,
+  MenuDivider,
+  MenuFlyout,
+  MenuPanel,
   MobileBadge,
   MobileChip,
   MobileDropdown,
@@ -12915,6 +13290,7 @@ export {
   PageTabsControl,
   Pagination,
   Placeholder,
+  Popover,
   ProgressTracker,
   RadioButton,
   SCHEDULED_ORDER_COLUMNS,