@aviala-design/spiral 1.0.0 → 2.1.0

package/dist/index.cjs

@@ -77,6 +77,7 @@ __export(index_exports, {
   Feedback: () => Feedback,
   Fieldset: () => Fieldset,
   FormField: () => FormField,
+  HoverPopover: () => HoverPopover,
   Input: () => Input,
   InputGroup: () => InputGroup,
   InputGroupAddon: () => InputGroupAddon,
@@ -127,6 +128,7 @@ __export(index_exports, {
   RadioGroup: () => RadioGroup,
   RadioGroupItem: () => RadioGroupItem,
   RadioInput: () => RadioInput,
+  ResponsiveTooltip: () => ResponsiveTooltip,
   Scroll: () => Scroll,
   ScrollPicker: () => ScrollPicker,
   ScrollPickerColumn: () => ScrollPickerColumn,
@@ -643,6 +645,10 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
       allRound: {
         true: "min-w-[var(--button-min-width-allround,48px)] !rounded-[var(--border-radius-allround,99px)]",
         false: "min-w-[var(--button-min-width,46px)]"
+      },
+      compact: {
+        true: "min-w-0",
+        false: ""
       }
     },
     defaultVariants: {
@@ -727,6 +733,7 @@ var Button = (0, import_react6.forwardRef)(
     variant,
     size: sizeProp,
     allRound = false,
+    compact,
     iconOnly: iconOnlyProp,
     asChild = false,
     loading = false,
@@ -781,7 +788,7 @@ var Button = (0, import_react6.forwardRef)(
       !iconOnly && renderIcon(rightIcon, iconLevel, void 0, "button.icon-right")
     ] });
     const classes = cn(
-      buttonVariants({ mode, ...iconOnly ? {} : { allRound } }),
+      buttonVariants({ mode, ...iconOnly ? {} : { allRound }, compact }),
       iconOnly && "min-w-0",
       iconOnly && allRound && "!rounded-[var(--border-radius-allround,99px)]",
       className
@@ -3240,10 +3247,13 @@ function useSegmentatorState(value, defaultValue, onValueChange) {
   const [internal, setInternal] = (0, import_react23.useState)(defaultValue ?? "");
   const isControlled = value !== void 0;
   const current = isControlled ? value : internal;
-  const setValue = (next) => {
-    if (!isControlled) setInternal(next);
-    onValueChange?.(next);
-  };
+  const setValue = (0, import_react23.useCallback)(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
   return [current, setValue];
 }
 var SEGMENTATOR_DRAG_THRESHOLD_PX = 4;
@@ -3288,6 +3298,16 @@ function getEnabledSegmentatorItems(group) {
     group.querySelectorAll(".aviala-segmentator-item:not(:disabled)")
   );
 }
+function applyDragPreview(group, activeItem) {
+  const items = getEnabledSegmentatorItems(group);
+  for (const item of items) {
+    if (item === activeItem) {
+      item.setAttribute("data-drag-preview", "true");
+    } else {
+      item.removeAttribute("data-drag-preview");
+    }
+  }
+}
 function measureItemThumbMetrics(item, group) {
   const groupRect = group.getBoundingClientRect();
   const itemRect = item.getBoundingClientRect();
@@ -3509,7 +3529,6 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
     const layoutKey = useThemeLayoutKey();
     const consumeClickRef = (0, import_react23.useRef)(false);
     const pointerDragRef = (0, import_react23.useRef)(null);
-    const [dragPreviewValue, setDragPreviewValue] = (0, import_react23.useState)(null);
     const [dragState, setDragState] = (0, import_react23.useState)({
       pressing: false,
       active: false
@@ -3518,9 +3537,12 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
     const resetPointerInteraction = (0, import_react23.useCallback)(() => {
       pointerDragRef.current?.cleanupWindowListeners?.();
       pointerDragRef.current = null;
-      setDragPreviewValue(null);
       setDragState({ pressing: false, active: false });
-      const thumbEl = groupRef.current?.querySelector(
+      const group = groupRef.current;
+      if (group) {
+        applyDragPreview(group, null);
+      }
+      const thumbEl = group?.querySelector(
         ".aviala-segmentator-thumb"
       );
       if (thumbEl) {
@@ -3577,8 +3599,8 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
         if (itemChanged) {
           triggerSegmentatorHaptic("select");
           drag.snapUntil = performance.now() + 540;
-          if (nextPreviewValue) {
-            setDragPreviewValue(nextPreviewValue);
+          if (item) {
+            applyDragPreview(group, item);
           }
         }
         drag.previewValue = nextPreviewValue;
@@ -3654,7 +3676,7 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
         event.pointerId
       );
       writeThumbMetrics(metrics, false);
-      setDragPreviewValue(pressedValue);
+      applyDragPreview(group, pressedItem);
       setDragState({ pressing: true, active: false });
       group.setPointerCapture(event.pointerId);
     };
@@ -3662,16 +3684,17 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       SegmentatorContext.Provider,
       {
-        value: {
-          value: currentValue,
-          onValueChange: setValue,
-          mode,
-          allRound,
-          disabled,
-          consumeClickRef,
-          dragPreviewValue,
-          isPressing: dragState.pressing
-        },
+        value: (0, import_react23.useMemo)(
+          () => ({
+            value: currentValue,
+            onValueChange: setValue,
+            mode,
+            allRound,
+            disabled,
+            consumeClickRef
+          }),
+          [currentValue, setValue, mode, allRound, disabled]
+        ),
         children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "div",
           {
@@ -3742,7 +3765,6 @@ var SegmentatorItem = (0, import_react23.forwardRef)(
         "data-selected": selected ? "true" : "false",
         "data-value": value,
         "data-mode": ctx.mode,
-        "data-drag-preview": ctx.isPressing && ctx.dragPreviewValue === value ? "true" : void 0,
         "data-all-round": ctx.allRound ? "true" : "false",
         disabled: isDisabled,
         className: cn("aviala-segmentator-item aviala-focus-ring", iconOnly && "min-w-0", className),
@@ -4276,7 +4298,7 @@ function ColorPickerInputs({
       }
     ) : null,
     format === "hex" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "aviala-color-picker-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { children: "#" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { style: "normal", children: "#" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "input",
         {
@@ -4315,7 +4337,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitAlpha()
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { children: "%" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { style: "normal", children: "%" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       Select,
@@ -4835,6 +4857,7 @@ function Cascader({
   const isValueControlled = valueProp !== void 0;
   const open = isOpenControlled ? openProp : internalOpen;
   const selectedPath = isValueControlled ? valueProp ?? [] : internalValue;
+  const wasOpenRef = (0, import_react35.useRef)(open);
   (0, import_react35.useEffect)(() => {
     const markWindowBlur = () => {
       windowBlurCloseRef.current = true;
@@ -4843,10 +4866,20 @@ function Cascader({
     return () => window.removeEventListener("blur", markWindowBlur, true);
   }, []);
   (0, import_react35.useEffect)(() => {
-    if (open) {
-      setActivePath(selectedPath.length > 0 ? selectedPath.slice(0, -1) : []);
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+    if (!justOpened) return;
+    if (selectedPath.length === 0) {
+      setActivePath([]);
+      return;
+    }
+    const selectedOption = findOptionPath(options, selectedPath);
+    if (selectedOption?.children?.length) {
+      setActivePath(selectedPath);
+      return;
     }
-  }, [open, selectedPath]);
+    setActivePath(selectedPath.slice(0, -1));
+  }, [open, options, selectedPath]);
   (0, import_react35.useEffect)(() => {
     if (!open) {
       pointerDownCloseRef.current = false;
@@ -6120,12 +6153,19 @@ function DatePicker(props) {
       setActivePanel("date");
       return;
     }
+    setFocusedDay((current) => {
+      if (current) return current;
+      if (mode === "single" && singleValue) return startOfDay(singleValue);
+      const rangeAnchor = mode === "range" ? rangeValue.from ?? rangeValue.to : void 0;
+      if (rangeAnchor) return startOfDay(rangeAnchor);
+      return startOfDay(/* @__PURE__ */ new Date());
+    });
     const markPointerDown = () => {
       pointerDownCloseRef.current = true;
     };
     document.addEventListener("pointerdown", markPointerDown, true);
     return () => document.removeEventListener("pointerdown", markPointerDown, true);
-  }, [open]);
+  }, [mode, open, rangeValue.from, rangeValue.to, singleValue]);
   const handleOpenChange = (0, import_react39.useCallback)(
     (nextOpen) => {
       if (disabled && nextOpen) return;
@@ -6226,19 +6266,21 @@ function DatePicker(props) {
     ]
   );
   const selectDate = (0, import_react39.useCallback)(
-    (date) => {
+    (date, options) => {
       if (disabled || isDateDisabled(date, minDate, maxDate)) return;
       const day = startOfDay(date);
       setFocusedDay(day);
       if (!isSameMonth(day, viewMonth)) {
         setViewMonth(new Date(day.getFullYear(), day.getMonth(), 1));
       }
+      const switchToTime = options?.switchToTime ?? enableTime;
+      const shouldClose = options?.close ?? !enableTime;
       if (mode === "single") {
         const next = enableTime ? applyTimeToDate(day, timeValue.hours, timeValue.minutes) : day;
         commitSingle(next);
-        if (enableTime) {
+        if (switchToTime) {
           setActivePanel("time");
-        } else {
+        } else if (shouldClose) {
           handleOpenChange(false);
         }
         return;
@@ -6254,9 +6296,9 @@ function DatePicker(props) {
       if (isSameDay(day, currentFrom)) {
         commitRange({ from: withTime(day), to: withTime(day) });
         setRangeDraftFrom(void 0);
-        if (enableTime) {
+        if (switchToTime) {
           setActivePanel("time");
-        } else {
+        } else if (shouldClose) {
           handleOpenChange(false);
         }
         return;
@@ -6267,9 +6309,9 @@ function DatePicker(props) {
         to: normalized.to ? withTime(normalized.to) : void 0
       });
       setRangeDraftFrom(void 0);
-      if (enableTime) {
+      if (switchToTime) {
         setActivePanel("time");
-      } else {
+      } else if (shouldClose) {
         handleOpenChange(false);
       }
     },
@@ -6675,7 +6717,7 @@ function DatePickerPanelFooter() {
   if (!enableTime) return null;
   const panelValue = activePanel === "time" ? "time" : "date";
   const isRangeMode = mode === "range";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     SegmentatorGroup,
     {
       value: panelValue,
@@ -6706,7 +6748,7 @@ function DatePickerPanelFooter() {
         )
       ]
     }
-  );
+  ) });
 }
 function monthDiff(from, to) {
   return (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth());
@@ -6734,6 +6776,8 @@ function DatePickerCalendar({ className }) {
   const today = (0, import_react39.useMemo)(() => startOfDay(/* @__PURE__ */ new Date()), []);
   const days = (0, import_react39.useMemo)(() => getCalendarDays(viewMonth), [viewMonth]);
   const prevViewMonthRef = (0, import_react39.useRef)(viewMonth);
+  const dayGridRef = (0, import_react39.useRef)(null);
+  const pendingDayFocusRef = (0, import_react39.useRef)(false);
   const [monthSlide, setMonthSlide] = (0, import_react39.useState)(null);
   const isMonthPanel = activePanel === "month";
   const isTimePanel = activePanel === "time" && enableTime;
@@ -6790,40 +6834,40 @@ function DatePickerCalendar({ className }) {
       outgoingMonth: previous
     });
   }, [contentView, panel, viewMonth]);
+  (0, import_react39.useLayoutEffect)(() => {
+    if (!pendingDayFocusRef.current || !focusedDay) return;
+    const grid = dayGridRef.current;
+    if (!grid) return;
+    const target = grid.querySelector(
+      `button[data-day="${formatIsoDate(focusedDay)}"]`
+    );
+    if (!target || target.disabled) return;
+    pendingDayFocusRef.current = false;
+    target.focus();
+  }, [focusedDay, days, monthSlide]);
   const outgoingDays = (0, import_react39.useMemo)(
     () => monthSlide ? getCalendarDays(monthSlide.outgoingMonth) : null,
     [monthSlide]
   );
   const handleDayKeyDown = (event, date) => {
-    let next = null;
+    let deltaDays = 0;
     switch (event.key) {
       case "ArrowLeft":
-        next = new Date(date);
-        next.setDate(next.getDate() - 1);
+        deltaDays = -1;
         break;
       case "ArrowRight":
-        next = new Date(date);
-        next.setDate(next.getDate() + 1);
+        deltaDays = 1;
         break;
       case "ArrowUp":
-        next = new Date(date);
-        next.setDate(next.getDate() - 7);
+        deltaDays = -7;
         break;
       case "ArrowDown":
-        next = new Date(date);
-        next.setDate(next.getDate() + 7);
+        deltaDays = 7;
         break;
       case "Home":
-        next = new Date(date.getFullYear(), date.getMonth(), 1);
-        break;
       case "End":
-        next = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-        break;
       case "PageUp":
-        next = addMonths(date, event.shiftKey ? -12 : -1);
-        break;
       case "PageDown":
-        next = addMonths(date, event.shiftKey ? 12 : 1);
         break;
       case "Enter":
       case " ":
@@ -6834,8 +6878,31 @@ function DatePickerCalendar({ className }) {
         return;
     }
     event.preventDefault();
-    if (!next) return;
+    let next;
+    if (event.key === "Home") {
+      next = new Date(date.getFullYear(), date.getMonth(), 1);
+    } else if (event.key === "End") {
+      next = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    } else if (event.key === "PageUp") {
+      next = addMonths(date, event.shiftKey ? -12 : -1);
+    } else if (event.key === "PageDown") {
+      next = addMonths(date, event.shiftKey ? 12 : 1);
+    } else {
+      next = new Date(date);
+      next.setDate(next.getDate() + deltaDays);
+      let guard = 0;
+      while (isDateDisabled(next, minDate, maxDate) && guard < 366) {
+        next.setDate(next.getDate() + (deltaDays > 0 ? 1 : -1));
+        guard += 1;
+      }
+    }
     const normalized = startOfDay(next);
+    if (isDateDisabled(normalized, minDate, maxDate)) return;
+    pendingDayFocusRef.current = true;
+    if (mode === "single") {
+      selectDate(normalized, { close: false, switchToTime: false });
+      return;
+    }
     setFocusedDay(normalized);
     if (!isSameMonth(normalized, viewMonth)) {
       setViewMonth(new Date(normalized.getFullYear(), normalized.getMonth(), 1));
@@ -6889,6 +6956,7 @@ function DatePickerCalendar({ className }) {
       /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "div",
         {
+          ref: dayGridRef,
           className: "aviala-datepicker-calendar__grid",
           role: "grid",
           "aria-labelledby": `${calendarId}-label`,
@@ -6908,11 +6976,13 @@ function DatePickerCalendar({ className }) {
             const isToday = isSameDay(day, today);
             const dayDisabled = isDateDisabled(day, minDate, maxDate);
             const focused = focusedDay ? isSameDay(day, focusedDay) : false;
+            const dayKey = formatIsoDate(day);
             return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
               "button",
               {
                 type: "button",
                 role: "gridcell",
+                "data-day": dayKey,
                 tabIndex: focused || !focusedDay && isToday ? 0 : -1,
                 className: "aviala-datepicker-day aviala-focus-ring",
                 "data-outside": outside ? "true" : void 0,
@@ -6942,7 +7012,7 @@ function DatePickerCalendar({ className }) {
                   isToday ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
                 ]
               },
-              day.toISOString()
+              dayKey
             );
           })
         },
@@ -7457,37 +7527,9 @@ function Popover({
   const [internalOpen, setInternalOpen] = (0, import_react42.useState)(defaultOpen);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : internalOpen;
-  const windowBlurCloseRef = (0, import_react42.useRef)(false);
-  const pointerDownCloseRef = (0, import_react42.useRef)(false);
-  (0, import_react42.useEffect)(() => {
-    const markWindowBlur = () => {
-      windowBlurCloseRef.current = true;
-    };
-    window.addEventListener("blur", markWindowBlur, true);
-    return () => window.removeEventListener("blur", markWindowBlur, true);
-  }, []);
-  (0, import_react42.useEffect)(() => {
-    if (!open) {
-      pointerDownCloseRef.current = false;
-      return;
-    }
-    const markPointerDown = () => {
-      pointerDownCloseRef.current = true;
-    };
-    document.addEventListener("pointerdown", markPointerDown, true);
-    return () => document.removeEventListener("pointerdown", markPointerDown, true);
-  }, [open]);
   const handleOpenChange = (0, import_react42.useCallback)(
     (nextOpen) => {
-      if (!nextOpen && windowBlurCloseRef.current && !pointerDownCloseRef.current) {
-        windowBlurCloseRef.current = false;
-        return;
-      }
-      windowBlurCloseRef.current = false;
-      pointerDownCloseRef.current = false;
-      if (!isControlled) {
-        setInternalOpen(nextOpen);
-      }
+      if (!isControlled) setInternalOpen(nextOpen);
       onOpenChange?.(nextOpen);
     },
     [isControlled, onOpenChange]
@@ -7513,6 +7555,7 @@ var PopoverContent = (0, import_react42.forwardRef)(
     collisionPadding = 8,
     portalled = true,
     showArrow = false,
+    flush = false,
     ...props
   }, ref) => {
     const content = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -7525,7 +7568,14 @@ var PopoverContent = (0, import_react42.forwardRef)(
         className: cn("aviala-popover-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("aviala-popover-content__surface", typographyVariants({ level: "text" })), children }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "div",
+            {
+              className: cn("aviala-popover-content__surface", typographyVariants({ level: "text" })),
+              "data-flush": flush ? "true" : void 0,
+              children
+            }
+          ),
           showArrow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             PopoverPrimitive6.Arrow,
             {
@@ -7553,12 +7603,136 @@ var PopoverContent = (0, import_react42.forwardRef)(
 );
 PopoverContent.displayName = PopoverPrimitive6.Content.displayName;
 
+// src/components/hover-popover.tsx
+var import_react44 = require("react");
+
+// src/components/use-coarse-pointer.ts
+var import_react43 = require("react");
+function useCoarsePointer() {
+  const [coarse, setCoarse] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(pointer: coarse)");
+    const update = () => setCoarse(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  return coarse;
+}
+
+// src/components/hover-popover.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function HoverPopover({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 8,
+  collisionPadding = 8,
+  showArrow = true,
+  openDelay = 150,
+  closeDelay = 150,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  contentClassName
+}) {
+  const coarse = useCoarsePointer();
+  const isControlled = openProp !== void 0;
+  const [internalOpen, setInternalOpen] = (0, import_react44.useState)(defaultOpen);
+  const open = isControlled ? openProp : internalOpen;
+  const openTimer = (0, import_react44.useRef)(void 0);
+  const closeTimer = (0, import_react44.useRef)(void 0);
+  const clearTimers = (0, import_react44.useCallback)(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+  const setOpen = (0, import_react44.useCallback)(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  (0, import_react44.useEffect)(() => () => clearTimers(), [clearTimers]);
+  const keyboardOpenRef = (0, import_react44.useRef)(false);
+  const contentRef = (0, import_react44.useRef)(null);
+  const openNow = (0, import_react44.useCallback)(() => {
+    keyboardOpenRef.current = false;
+    clearTimers();
+    openTimer.current = setTimeout(() => setOpen(true), openDelay);
+  }, [clearTimers, openDelay, setOpen]);
+  const closeSoon = (0, import_react44.useCallback)(() => {
+    clearTimers();
+    closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
+  }, [clearTimers, closeDelay, setOpen]);
+  if (coarse) {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        PopoverContent,
+        {
+          side,
+          align,
+          sideOffset,
+          collisionPadding,
+          showArrow,
+          className: contentClassName,
+          children: content
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      PopoverTrigger,
+      {
+        asChild: true,
+        onMouseEnter: openNow,
+        onMouseLeave: closeSoon,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") keyboardOpenRef.current = true;
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      PopoverContent,
+      {
+        ref: contentRef,
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        showArrow,
+        className: contentClassName,
+        onOpenAutoFocus: (e) => {
+          if (!keyboardOpenRef.current) e.preventDefault();
+        },
+        onEscapeKeyDown: (e) => {
+          e.preventDefault();
+          setOpen(false);
+        },
+        onMouseEnter: clearTimers,
+        onMouseLeave: closeSoon,
+        onBlur: (e) => {
+          const next = e.relatedTarget;
+          if (next && contentRef.current?.contains(next)) return;
+          closeSoon();
+        },
+        children: content
+      }
+    )
+  ] });
+}
+
 // src/components/modal.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_icons15 = require("@aviala-design/icons");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_react43 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_react45 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var MODAL_ICON_SIZE = 16;
 var modalContentVariants = (0, import_class_variance_authority10.cva)("aviala-modal-content", {
   variants: {
@@ -7573,7 +7747,7 @@ var modalContentVariants = (0, import_class_variance_authority10.cva)("aviala-mo
 });
 function renderModalIcon(node) {
   if (!node) return null;
-  const content = (0, import_react43.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react43.cloneElement)(node, {
+  const content = (0, import_react45.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react45.cloneElement)(node, {
     width: MODAL_ICON_SIZE,
     height: MODAL_ICON_SIZE,
     className: cn(
@@ -7581,13 +7755,13 @@ function renderModalIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
 }
 var Modal = DialogPrimitive.Root;
 var ModalTrigger = DialogPrimitive.Trigger;
 var ModalPortal = DialogPrimitive.Portal;
 var ModalClose = DialogPrimitive.Close;
-var ModalOverlay = (0, import_react43.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var ModalOverlay = (0, import_react45.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -7596,7 +7770,7 @@ var ModalOverlay = (0, import_react43.forwardRef)(({ className, ...props }, ref)
   }
 ));
 ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var ModalContent = (0, import_react43.forwardRef)(
+var ModalContent = (0, import_react45.forwardRef)(
   ({
     className,
     children,
@@ -7606,25 +7780,31 @@ var ModalContent = (0, import_react43.forwardRef)(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalOverlay, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        DialogPrimitive.Content,
-        {
-          ref,
-          className: cn(modalContentVariants({ size }), className),
-          onOpenAutoFocus,
-          ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "aviala-modal-content__surface", children })
-        }
-      )
+    const overlay = showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalOverlay, {}) : null;
+    const panel = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(modalContentVariants({ size }), className),
+        onOpenAutoFocus,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "aviala-modal-content__surface", children })
+      }
+    );
+    if (!portalled) {
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+        overlay,
+        panel
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DialogPrimitive.Portal, { children: [
+      overlay,
+      panel
     ] });
-    if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DialogPrimitive.Portal, { children: content });
   }
 );
 ModalContent.displayName = DialogPrimitive.Content.displayName;
-var ModalHeader = (0, import_react43.forwardRef)(
+var ModalHeader = (0, import_react45.forwardRef)(
   ({
     className,
     children,
@@ -7633,39 +7813,39 @@ var ModalHeader = (0, import_react43.forwardRef)(
     showClose = true,
     closeLabel = "Close dialog",
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "aviala-modal__header-row", children: [
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "aviala-modal__header-row", children: [
     showIcon ? renderModalIcon(icon) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "aviala-modal__header-main", children }),
-    showClose ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      Link,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "aviala-modal__header-main", children }),
+    showClose ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      Button,
       {
-        level: "text",
+        type: "button",
         mode: "noBackgroundCustom",
         iconOnly: true,
         "aria-label": closeLabel,
         className: "aviala-modal__close",
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_icons15.SymbolWrong, { "aria-hidden": true })
+        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons15.SymbolWrong, { "aria-hidden": true })
       }
     ) }) : null
   ] }) })
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = (0, import_react43.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
+var ModalTitle = (0, import_react45.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
 ModalTitle.displayName = DialogPrimitive.Title.displayName;
-var ModalDescription = (0, import_react43.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
+var ModalDescription = (0, import_react45.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
 ModalDescription.displayName = DialogPrimitive.Description.displayName;
 function ModalHeaderText({
   title,
   description,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalHeader, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "aviala-modal__header-typeface", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalTitle, { children: title }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalDescription, { children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalHeader, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "aviala-modal__header-typeface", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalTitle, { children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalDescription, { children: description }) : null
   ] }) });
 }
-var ModalBody = (0, import_react43.forwardRef)(
-  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var ModalBody = (0, import_react45.forwardRef)(
+  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Typeface,
     {
       className: "aviala-modal__body-typeface",
@@ -7676,22 +7856,22 @@ var ModalBody = (0, import_react43.forwardRef)(
   ) : children })
 );
 ModalBody.displayName = "ModalBody";
-var ModalFooter = (0, import_react43.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, className: cn("aviala-modal__footer", className), ...props })
+var ModalFooter = (0, import_react45.forwardRef)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ref, className: cn("aviala-modal__footer", className), ...props })
 );
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_react44 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react46 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TOOLTIP_DELAY_DURATION = 300;
 function TooltipProvider({
   delayDuration = TOOLTIP_DELAY_DURATION,
   skipDelayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     TooltipPrimitive.Provider,
     {
       delayDuration,
@@ -7702,7 +7882,7 @@ function TooltipProvider({
 }
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = (0, import_react44.forwardRef)(
+var TooltipContent = (0, import_react46.forwardRef)(
   ({
     className,
     children,
@@ -7710,7 +7890,7 @@ var TooltipContent = (0, import_react44.forwardRef)(
     collisionPadding = 8,
     showArrow = true,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -7719,14 +7899,14 @@ var TooltipContent = (0, import_react44.forwardRef)(
       className: cn("aviala-tooltip-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
-        showArrow ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
+        showArrow ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           TooltipPrimitive.Arrow,
           {
             asChild: true,
             width: TOOLTIP_POINTER.width,
             height: TOOLTIP_POINTER.height,
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               OverlayPointerSvg,
               {
                 className: "aviala-tooltip-content__arrow",
@@ -7743,11 +7923,71 @@ var TooltipContent = (0, import_react44.forwardRef)(
 );
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
+// src/components/responsive-tooltip.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function ResponsiveTooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 4,
+  collisionPadding = 8,
+  showArrow = true,
+  delayDuration = TOOLTIP_DELAY_DURATION,
+  open,
+  defaultOpen,
+  onOpenChange,
+  contentClassName
+}) {
+  const coarse = useCoarsePointer();
+  if (coarse) {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Popover, { open, defaultOpen, onOpenChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        PopoverContent,
+        {
+          side,
+          align,
+          sideOffset,
+          collisionPadding,
+          showArrow,
+          className: contentClassName,
+          children: content
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    Tooltip,
+    {
+      delayDuration,
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          TooltipContent,
+          {
+            side,
+            align,
+            sideOffset,
+            collisionPadding,
+            showArrow,
+            className: contentClassName,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/feedback.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_icons16 = require("@aviala-design/icons");
-var import_react45 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react47 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var FEEDBACK_ICON_SIZE = 22;
 var feedbackVariants = (0, import_class_variance_authority11.cva)("aviala-feedback", {
   variants: {
@@ -7775,7 +8015,7 @@ var feedbackVariants = (0, import_class_variance_authority11.cva)("aviala-feedba
 });
 function renderFeedbackIcon(node) {
   if (!node) return null;
-  const content = (0, import_react45.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react45.cloneElement)(node, {
+  const content = (0, import_react47.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react47.cloneElement)(node, {
     width: FEEDBACK_ICON_SIZE,
     height: FEEDBACK_ICON_SIZE,
     className: cn(
@@ -7783,25 +8023,25 @@ function renderFeedbackIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
 }
 function defaultStatusIcon(type, mode) {
   const iconMode = mode === "primary" ? "fill" : "fill";
   const thickness = "Regular";
   switch (type) {
     case "information":
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons16.SymbolInformationCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolInformationCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons16.SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "wrong":
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons16.SymbolWrongCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolWrongCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons16.SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "normal":
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons16.GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
   }
 }
-var Feedback = (0, import_react45.forwardRef)(
+var Feedback = (0, import_react47.forwardRef)(
   ({
     className,
     type = "information",
@@ -7823,7 +8063,7 @@ var Feedback = (0, import_react45.forwardRef)(
     const tone = mode === "primary" ? "white" : "default";
     const isSmall = resolvedSize === "small";
     const resolvedRole = resolvedType === "wrong" ? "alert" : "status";
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "div",
       {
         ref,
@@ -7837,9 +8077,9 @@ var Feedback = (0, import_react45.forwardRef)(
         "data-size": resolvedSize,
         "data-mode": mode,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "aviala-feedback__body", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "aviala-feedback__body", children: [
           renderFeedbackIcon(icon ?? defaultStatusIcon(resolvedType, mode)),
-          isSmall ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          isSmall ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             Typeface,
             {
               className: "aviala-feedback__typeface",
@@ -7849,7 +8089,7 @@ var Feedback = (0, import_react45.forwardRef)(
               tone
             }
           ),
-          action ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          action ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             Link,
             {
               level: "text",
@@ -7865,7 +8105,7 @@ var Feedback = (0, import_react45.forwardRef)(
               children: action
             }
           ) : null,
-          showClose ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          showClose ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             Link,
             {
               level: "text",
@@ -7874,7 +8114,7 @@ var Feedback = (0, import_react45.forwardRef)(
               href: onClose ? "#" : void 0,
               "aria-label": closeLabel,
               className: "aviala-feedback__close",
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons16.SymbolWrong, { "aria-hidden": true }),
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolWrong, { "aria-hidden": true }),
               onClick: (event) => {
                 if (onClose) {
                   event.preventDefault();
@@ -7893,8 +8133,8 @@ Feedback.displayName = "Feedback";
 // src/components/alert.tsx
 var import_icons17 = require("@aviala-design/icons");
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_react46 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react48 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var ALERT_ICON_SIZE = 16;
 var alertVariants = (0, import_class_variance_authority12.cva)("aviala-alert", {
   variants: {
@@ -7922,7 +8162,7 @@ var alertVariants = (0, import_class_variance_authority12.cva)("aviala-alert", {
 });
 function renderAlertIcon(node) {
   if (!node) return null;
-  const content = (0, import_react46.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react46.cloneElement)(node, {
+  const content = (0, import_react48.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react48.cloneElement)(node, {
     width: ALERT_ICON_SIZE,
     height: ALERT_ICON_SIZE,
     className: cn(
@@ -7930,23 +8170,23 @@ function renderAlertIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
 }
 function defaultStatusIcon2(type) {
   const iconProps = { thickness: "Regular", mode: "fill", "aria-hidden": true };
   switch (type) {
     case "info":
     case "neutral":
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.SymbolInformationCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolInformationCircle, { ...iconProps });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.SymbolWarningCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolWarningCircle, { ...iconProps });
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.SymbolWrongCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolWrongCircle, { ...iconProps });
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.SymbolRightCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolRightCircle, { ...iconProps });
   }
 }
-var Alert = (0, import_react46.forwardRef)(
+var Alert = (0, import_react48.forwardRef)(
   ({
     className,
     type = "info",
@@ -7972,7 +8212,7 @@ var Alert = (0, import_react46.forwardRef)(
     const resolvedType = type ?? "info";
     const resolvedRole = resolvedType === "error" ? "alert" : "status";
     const hasActions = showActions && (action || secondaryAction);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
         ref,
@@ -7984,9 +8224,9 @@ var Alert = (0, import_react46.forwardRef)(
         "data-appearance": appearance,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "aviala-alert__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "aviala-alert__body", children: [
             showIcon ? renderAlertIcon(icon ?? defaultStatusIcon2(resolvedType)) : null,
-            isSmall ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            isSmall ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Typeface,
               {
                 className: "aviala-alert__typeface",
@@ -7995,7 +8235,7 @@ var Alert = (0, import_react46.forwardRef)(
                 secondary: description
               }
             ),
-            quickAction ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            quickAction ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Link,
               {
                 level: "text",
@@ -8011,7 +8251,7 @@ var Alert = (0, import_react46.forwardRef)(
                 children: quickAction
               }
             ) : null,
-            dismissible ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            dismissible ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Link,
               {
                 level: "text",
@@ -8020,7 +8260,7 @@ var Alert = (0, import_react46.forwardRef)(
                 href: onDismiss ? "#" : void 0,
                 "aria-label": closeLabel,
                 className: "aviala-alert__close",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.SymbolWrong, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolWrong, { "aria-hidden": true }),
                 onClick: (event) => {
                   if (onDismiss) {
                     event.preventDefault();
@@ -8030,8 +8270,8 @@ var Alert = (0, import_react46.forwardRef)(
               }
             ) : null
           ] }),
-          hasActions ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "aviala-alert__actions", children: [
-            action ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          hasActions ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "aviala-alert__actions", children: [
+            action ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Link,
               {
                 level: "caption",
@@ -8047,7 +8287,7 @@ var Alert = (0, import_react46.forwardRef)(
                 children: action
               }
             ) : null,
-            secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               Link,
               {
                 level: "caption",
@@ -8073,31 +8313,31 @@ Alert.displayName = "Alert";
 
 // src/components/list.tsx
 var import_icons18 = require("@aviala-design/icons");
-var import_react47 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var List = (0, import_react47.forwardRef)(
-  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { ref, className: cn("aviala-list", className), ...props, children: [
-    title != null ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListTitle, { children: title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListGroup, { children })
+var import_react49 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var List = (0, import_react49.forwardRef)(
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref, className: cn("aviala-list", className), ...props, children: [
+    title != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListTitle, { children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListGroup, { children })
   ] })
 );
 List.displayName = "List";
-var ListTitle = (0, import_react47.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: cn(typographyVariants({ level: "text" })), children }) })
+var ListTitle = (0, import_react49.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: cn(typographyVariants({ level: "text" })), children }) })
 );
 ListTitle.displayName = "ListTitle";
-var ListGroup = (0, import_react47.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
+var ListGroup = (0, import_react49.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
 );
 ListGroup.displayName = "ListGroup";
 function ListItemGroup({ label, children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("aviala-list", className), children: [
-    label != null ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListTitle, { children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListGroup, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("aviala-list", className), children: [
+    label != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListTitle, { children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListGroup, { children })
   ] });
 }
-var ListDivider = (0, import_react47.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+var ListDivider = (0, import_react49.forwardRef)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "span",
     {
       ref,
@@ -8108,15 +8348,15 @@ var ListDivider = (0, import_react47.forwardRef)(
   )
 );
 ListDivider.displayName = "ListDivider";
-var ListSeparator = (0, import_react47.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("hr", { ref, className: cn("aviala-list-separator", className), ...props })
+var ListSeparator = (0, import_react49.forwardRef)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("hr", { ref, className: cn("aviala-list-separator", className), ...props })
 );
 ListSeparator.displayName = "ListSeparator";
 function renderLeadingIcon(node, leading) {
   if (leading === "none") return null;
   const iconSize = leading === "shaped" ? 20 : 22;
-  const content = node ?? (leading === "shaped" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }));
-  const rendered = (0, import_react47.isValidElement)(content) && typeof content.type !== "string" ? (0, import_react47.cloneElement)(content, {
+  const content = node ?? (leading === "shaped" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }));
+  const rendered = (0, import_react49.isValidElement)(content) && typeof content.type !== "string" ? (0, import_react49.cloneElement)(content, {
     width: iconSize,
     height: iconSize,
     className: cn(
@@ -8124,7 +8364,7 @@ function renderLeadingIcon(node, leading) {
       "shrink-0"
     )
   }) : content;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "span",
     {
       className: cn(
@@ -8134,7 +8374,7 @@ function renderLeadingIcon(node, leading) {
     }
   ) });
 }
-var ListItem = (0, import_react47.forwardRef)(
+var ListItem = (0, import_react49.forwardRef)(
   ({
     className,
     itemType = "select",
@@ -8155,44 +8395,44 @@ var ListItem = (0, import_react47.forwardRef)(
     ...props
   }, ref) => {
     const isInteractive = interactive ?? onClick != null;
-    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (itemType) {
         case "action":
-          return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "aviala-list-item__more", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__more", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__trailing", children: [
               primaryAction,
-              secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 Button,
                 {
                   mode: "default",
                   size: "regular",
                   iconOnly: true,
                   "aria-label": "More",
-                  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true })
+                  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.DirectionArrowRightLight, { width: 18, height: 18 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListDivider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.DirectionArrowRightLight, { width: 18, height: 18 }) })
           ] });
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Switch, { ...switchProps })
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListDivider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ListDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "aviala-list-item__select", children: select })
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListDivider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "aviala-list-item__select", children: select })
           ] });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
         ref,
@@ -8207,8 +8447,8 @@ var ListItem = (0, import_react47.forwardRef)(
         ...props,
         children: [
           renderLeadingIcon(icon, leading),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "aviala-list-item__content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
             renderTrailing()
           ] }) })
         ]
@@ -8221,14 +8461,14 @@ ListItem.displayName = "ListItem";
 // src/components/navigation.tsx
 var PopoverPrimitive7 = __toESM(require("@radix-ui/react-popover"), 1);
 var import_react_slot5 = require("@radix-ui/react-slot");
-var import_react48 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react50 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function navigationItemButtonMode(active) {
   return active ? "second" : "noBackgroundCustom";
 }
-var NavigationDirectionContext = (0, import_react48.createContext)("vertical");
+var NavigationDirectionContext = (0, import_react50.createContext)("vertical");
 function useNavigationDirection() {
-  return (0, import_react48.useContext)(NavigationDirectionContext);
+  return (0, import_react50.useContext)(NavigationDirectionContext);
 }
 var NAVIGATION_ANIMATION_MS_FALLBACK = 300;
 var NAVIGATION_ANIMATION_EASING_FALLBACK = "cubic-bezier(0.33, 1, 0.68, 1)";
@@ -8287,11 +8527,17 @@ function measureNavigationIndicator(group, direction) {
     50
   );
   if (direction === "vertical") {
+    let inset = railInset;
+    if (item.matches(":active")) {
+      inset = readIndicatorToken(group, "--navigation-rail-inset-press", 9);
+    } else if (item.matches(":hover")) {
+      inset = readIndicatorToken(group, "--navigation-rail-inset-hover", 3);
+    }
     return {
       x: railLeft,
-      y: itemRect.top - groupRect.top + railInset,
+      y: itemRect.top - groupRect.top + inset,
       width: railWidth,
-      height: Math.max(0, itemRect.height - railInset * 2),
+      height: Math.max(0, itemRect.height - inset * 2),
       visible: true
     };
   }
@@ -8382,21 +8628,21 @@ function runIndicatorAnimation(el, group, start, next, durationMs, easing, gener
   };
 }
 function useNavigationIndicator(groupRef, direction, layoutKey) {
-  const indicatorRef = (0, import_react48.useRef)(null);
-  const metricsRef = (0, import_react48.useRef)(null);
-  const animationRef = (0, import_react48.useRef)(null);
-  const animationGenerationRef = (0, import_react48.useRef)(0);
-  const isAnimatingRef = (0, import_react48.useRef)(false);
-  const layoutTrackingFrameRef = (0, import_react48.useRef)(null);
-  const isLayoutTrackingRef = (0, import_react48.useRef)(false);
-  const isInitialMount = (0, import_react48.useRef)(true);
-  const [activeRevision, setActiveRevision] = (0, import_react48.useState)(0);
-  const measureIndicator = (0, import_react48.useCallback)(() => {
+  const indicatorRef = (0, import_react50.useRef)(null);
+  const metricsRef = (0, import_react50.useRef)(null);
+  const animationRef = (0, import_react50.useRef)(null);
+  const animationGenerationRef = (0, import_react50.useRef)(0);
+  const isAnimatingRef = (0, import_react50.useRef)(false);
+  const layoutTrackingFrameRef = (0, import_react50.useRef)(null);
+  const isLayoutTrackingRef = (0, import_react50.useRef)(false);
+  const isInitialMount = (0, import_react50.useRef)(true);
+  const [activeRevision, setActiveRevision] = (0, import_react50.useState)(0);
+  const measureIndicator = (0, import_react50.useCallback)(() => {
     const group = groupRef.current;
     if (!group) return null;
     return measureNavigationIndicator(group, direction);
   }, [direction, groupRef]);
-  const syncIndicator = (0, import_react48.useCallback)(
+  const syncIndicator = (0, import_react50.useCallback)(
     (metrics, instant = false) => {
       metricsRef.current = metrics;
       const el = indicatorRef.current;
@@ -8404,14 +8650,14 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     },
     []
   );
-  const cancelLayoutTracking = (0, import_react48.useCallback)(() => {
+  const cancelLayoutTracking = (0, import_react50.useCallback)(() => {
     if (layoutTrackingFrameRef.current != null) {
       cancelAnimationFrame(layoutTrackingFrameRef.current);
       layoutTrackingFrameRef.current = null;
     }
     isLayoutTrackingRef.current = false;
   }, []);
-  const remeasureIndicator = (0, import_react48.useCallback)(() => {
+  const remeasureIndicator = (0, import_react50.useCallback)(() => {
     if (isLayoutTrackingRef.current) return;
     const metrics = measureIndicator();
     if (!metrics) return;
@@ -8420,7 +8666,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     isAnimatingRef.current = false;
     syncIndicator(metrics, true);
   }, [measureIndicator, syncIndicator]);
-  const startExpandCollapseTracking = (0, import_react48.useCallback)(() => {
+  const startExpandCollapseTracking = (0, import_react50.useCallback)(() => {
     const group = groupRef.current;
     const el = indicatorRef.current;
     if (!group || !el) return;
@@ -8477,14 +8723,14 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     };
     layoutTrackingFrameRef.current = requestAnimationFrame(tick);
   }, [cancelLayoutTracking, groupRef, measureIndicator, syncIndicator]);
-  const onIndicatorRef = (0, import_react48.useCallback)((node) => {
+  const onIndicatorRef = (0, import_react50.useCallback)((node) => {
     indicatorRef.current = node;
     if (node && metricsRef.current && isInitialMount.current) {
       applyIndicatorMetrics(node, metricsRef.current, true);
       isInitialMount.current = false;
     }
   }, []);
-  (0, import_react48.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     const group = groupRef.current;
     const next = measureIndicator();
     if (!next) return;
@@ -8532,7 +8778,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     syncIndicator,
     groupRef
   ]);
-  (0, import_react48.useLayoutEffect)(() => {
+  (0, import_react50.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) return;
     const observer = new MutationObserver((mutations) => {
@@ -8589,9 +8835,35 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     startExpandCollapseTracking,
     syncIndicator
   ]);
+  (0, import_react50.useEffect)(() => {
+    if (direction !== "vertical") return;
+    const group = groupRef.current;
+    if (!group) return;
+    const refreshInteractionMetrics = () => {
+      if (isLayoutTrackingRef.current || isAnimatingRef.current) return;
+      const metrics = measureIndicator();
+      if (!metrics) return;
+      if (metricsRef.current && metricsApproxEqual2(metrics, metricsRef.current)) {
+        return;
+      }
+      syncIndicator(metrics, false);
+    };
+    group.addEventListener("pointerover", refreshInteractionMetrics);
+    group.addEventListener("pointerout", refreshInteractionMetrics);
+    group.addEventListener("pointerdown", refreshInteractionMetrics);
+    group.addEventListener("pointerup", refreshInteractionMetrics);
+    group.addEventListener("pointercancel", refreshInteractionMetrics);
+    return () => {
+      group.removeEventListener("pointerover", refreshInteractionMetrics);
+      group.removeEventListener("pointerout", refreshInteractionMetrics);
+      group.removeEventListener("pointerdown", refreshInteractionMetrics);
+      group.removeEventListener("pointerup", refreshInteractionMetrics);
+      group.removeEventListener("pointercancel", refreshInteractionMetrics);
+    };
+  }, [direction, groupRef, measureIndicator, syncIndicator]);
   return onIndicatorRef;
 }
-var Navigation = (0, import_react48.forwardRef)(
+var Navigation = (0, import_react50.forwardRef)(
   ({
     className,
     as: Tag2 = "nav",
@@ -8599,7 +8871,7 @@ var Navigation = (0, import_react48.forwardRef)(
     direction = "vertical",
     dividingLine = false,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     Tag2,
     {
       ref,
@@ -8612,8 +8884,8 @@ var Navigation = (0, import_react48.forwardRef)(
   ) })
 );
 Navigation.displayName = "Navigation";
-var NavigationBrand = (0, import_react48.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var NavigationBrand = (0, import_react50.forwardRef)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
       ref,
@@ -8623,40 +8895,40 @@ var NavigationBrand = (0, import_react48.forwardRef)(
   )
 );
 NavigationBrand.displayName = "NavigationBrand";
-var NavigationBrandTitle = (0, import_react48.forwardRef)(({ className, asChild = false, children, ...props }, ref) => {
+var NavigationBrandTitle = (0, import_react50.forwardRef)(({ className, asChild = false, children, ...props }, ref) => {
   const Comp = asChild ? import_react_slot5.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     Comp,
     {
       ref,
       className: cn("aviala-navigation-brand__title aviala-focus-ring", className),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Typography, { level: "text", as: "span", children })
+      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typography, { level: "text", as: "span", children })
     }
   );
 });
 NavigationBrandTitle.displayName = "NavigationBrandTitle";
-var NavigationSection = (0, import_react48.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var NavigationSection = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   "div",
   {
     ref,
     className: cn("aviala-navigation-section", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Typography, { level: "caption", as: "p", children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typography, { level: "caption", as: "p", children })
   }
 ));
 NavigationSection.displayName = "NavigationSection";
-var NavigationGroup = (0, import_react48.forwardRef)(
+var NavigationGroup = (0, import_react50.forwardRef)(
   ({ className, children, ...props }, ref) => {
     const direction = useNavigationDirection();
     const layoutKey = useThemeLayoutKey();
-    const groupRef = (0, import_react48.useRef)(null);
+    const groupRef = (0, import_react50.useRef)(null);
     const onIndicatorRef = useNavigationIndicator(
       groupRef,
       direction,
       layoutKey
     );
-    const setRefs = (0, import_react48.useCallback)(
+    const setRefs = (0, import_react50.useCallback)(
       (node) => {
         groupRef.current = node;
         if (typeof ref === "function") {
@@ -8667,14 +8939,14 @@ var NavigationGroup = (0, import_react48.forwardRef)(
       },
       [ref]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "div",
       {
         ref: setRefs,
         className: cn("aviala-navigation-group", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "span",
             {
               ref: onIndicatorRef,
@@ -8690,17 +8962,17 @@ var NavigationGroup = (0, import_react48.forwardRef)(
   }
 );
 NavigationGroup.displayName = "NavigationGroup";
-var NavigationItemGroup = (0, import_react48.forwardRef)(({ className, expanded, children, ...props }, ref) => {
+var NavigationItemGroup = (0, import_react50.forwardRef)(({ className, expanded, children, ...props }, ref) => {
   const isCollapsible = expanded !== void 0;
   const isCollapsed = isCollapsible && !expanded;
-  const innerRef = (0, import_react48.useRef)(null);
-  (0, import_react48.useLayoutEffect)(() => {
+  const innerRef = (0, import_react50.useRef)(null);
+  (0, import_react50.useLayoutEffect)(() => {
     const inner = innerRef.current;
     if (!inner) return;
     if (isCollapsed) inner.setAttribute("inert", "");
     else inner.removeAttribute("inert");
   }, [isCollapsed]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
       ref,
@@ -8708,7 +8980,7 @@ var NavigationItemGroup = (0, import_react48.forwardRef)(({ className, expanded,
       "data-expanded": isCollapsible ? expanded ? "true" : "false" : void 0,
       "aria-hidden": isCollapsed ? true : void 0,
       ...props,
-      children: isCollapsible ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
+      children: isCollapsible ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
     }
   );
 });
@@ -8719,9 +8991,9 @@ function renderItemIcon3(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "aviala-navigation-item__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-navigation-item__icon", children: content });
 }
-var NavigationItem = (0, import_react48.forwardRef)(
+var NavigationItem = (0, import_react50.forwardRef)(
   ({
     className,
     active,
@@ -8736,9 +9008,9 @@ var NavigationItem = (0, import_react48.forwardRef)(
     const Comp = asChild ? import_react_slot5.Slot : "a";
     const isActive = active ?? ariaCurrent === "page";
     const mode = navigationItemButtonMode(isActive);
-    const controlContent = /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    const controlContent = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
       renderItemIcon3(leftIcon),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Typography,
         {
           level: "text",
@@ -8747,15 +9019,15 @@ var NavigationItem = (0, import_react48.forwardRef)(
           children
         }
       ),
-      rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+      rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "span",
       {
         className: cn("aviala-navigation-item", className),
         "data-item-type": itemType,
         "data-active": isActive ? "true" : "false",
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           Comp,
           {
             ref,
@@ -8774,7 +9046,7 @@ var NavigationItem = (0, import_react48.forwardRef)(
   }
 );
 NavigationItem.displayName = "NavigationItem";
-var NavigationActions = (0, import_react48.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var NavigationActions = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   "div",
   {
     ref,
@@ -8784,7 +9056,7 @@ var NavigationActions = (0, import_react48.forwardRef)(({ className, children, .
   }
 ));
 NavigationActions.displayName = "NavigationActions";
-var NavigationActionsSlot = (0, import_react48.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var NavigationActionsSlot = (0, import_react50.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   "div",
   {
     ref,
@@ -8794,9 +9066,9 @@ var NavigationActionsSlot = (0, import_react48.forwardRef)(({ className, ...prop
 ));
 NavigationActionsSlot.displayName = "NavigationActionsSlot";
 var NAVIGATION_MENU_CLOSE_DELAY_MS = 150;
-var NavigationItemMenuContext = (0, import_react48.createContext)(null);
+var NavigationItemMenuContext = (0, import_react50.createContext)(null);
 function useNavigationItemMenuContext(component) {
-  const context = (0, import_react48.useContext)(NavigationItemMenuContext);
+  const context = (0, import_react50.useContext)(NavigationItemMenuContext);
   if (!context) {
     throw new Error(`${component} must be used within <NavigationItemMenu>`);
   }
@@ -8810,28 +9082,28 @@ function NavigationItemMenu({
   onOpenChange,
   children
 }) {
-  const [internalValue, setInternalValue] = (0, import_react48.useState)(defaultValue);
+  const [internalValue, setInternalValue] = (0, import_react50.useState)(defaultValue);
   const isValueControlled = valueProp !== void 0;
   const value = isValueControlled ? valueProp : internalValue;
-  const [internalOpen, setInternalOpen] = (0, import_react48.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react50.useState)(false);
   const isOpenControlled = openProp !== void 0;
   const open = isOpenControlled ? openProp : internalOpen;
-  const closeTimerRef = (0, import_react48.useRef)(null);
-  const openedByHoverRef = (0, import_react48.useRef)(false);
-  const setOpen = (0, import_react48.useCallback)(
+  const closeTimerRef = (0, import_react50.useRef)(null);
+  const openedByHoverRef = (0, import_react50.useRef)(false);
+  const setOpen = (0, import_react50.useCallback)(
     (nextOpen) => {
       if (!isOpenControlled) setInternalOpen(nextOpen);
       onOpenChange?.(nextOpen);
     },
     [isOpenControlled, onOpenChange]
   );
-  const cancelClose = (0, import_react48.useCallback)(() => {
+  const cancelClose = (0, import_react50.useCallback)(() => {
     if (closeTimerRef.current != null) {
       window.clearTimeout(closeTimerRef.current);
       closeTimerRef.current = null;
     }
   }, []);
-  const openMenu = (0, import_react48.useCallback)(
+  const openMenu = (0, import_react50.useCallback)(
     (viaHover) => {
       cancelClose();
       openedByHoverRef.current = viaHover;
@@ -8839,14 +9111,14 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  const scheduleClose = (0, import_react48.useCallback)(() => {
+  const scheduleClose = (0, import_react50.useCallback)(() => {
     cancelClose();
     closeTimerRef.current = window.setTimeout(() => {
       closeTimerRef.current = null;
       setOpen(false);
     }, NAVIGATION_MENU_CLOSE_DELAY_MS);
   }, [cancelClose, setOpen]);
-  const select = (0, import_react48.useCallback)(
+  const select = (0, import_react50.useCallback)(
     (nextValue) => {
       if (!isValueControlled) setInternalValue(nextValue);
       onValueChange?.(nextValue);
@@ -8855,8 +9127,8 @@ function NavigationItemMenu({
     },
     [cancelClose, isValueControlled, onValueChange, setOpen]
   );
-  (0, import_react48.useEffect)(() => cancelClose, [cancelClose]);
-  const contextValue = (0, import_react48.useMemo)(
+  (0, import_react50.useEffect)(() => cancelClose, [cancelClose]);
+  const contextValue = (0, import_react50.useMemo)(
     () => ({
       value,
       hasSelection: value != null && value !== "",
@@ -8868,7 +9140,7 @@ function NavigationItemMenu({
     }),
     [cancelClose, openMenu, scheduleClose, select, value]
   );
-  const handleOpenChange = (0, import_react48.useCallback)(
+  const handleOpenChange = (0, import_react50.useCallback)(
     (nextOpen) => {
       if (nextOpen) openedByHoverRef.current = false;
       cancelClose();
@@ -8876,9 +9148,9 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Popover, { open, onOpenChange: handleOpenChange, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Popover, { open, onOpenChange: handleOpenChange, children }) });
 }
-var NavigationItemMenuTrigger = (0, import_react48.forwardRef)(
+var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
   ({
     className,
     active,
@@ -8890,7 +9162,7 @@ var NavigationItemMenuTrigger = (0, import_react48.forwardRef)(
     const menu = useNavigationItemMenuContext("NavigationItemMenuTrigger");
     const isActive = active ?? menu.hasSelection;
     const mode = navigationItemButtonMode(isActive);
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "span",
       {
         className: cn("aviala-navigation-item", className),
@@ -8898,7 +9170,7 @@ var NavigationItemMenuTrigger = (0, import_react48.forwardRef)(
         "data-active": isActive ? "true" : "false",
         onMouseEnter: () => menu.openMenu(true),
         onMouseLeave: menu.scheduleClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           "button",
           {
             ref,
@@ -8911,7 +9183,7 @@ var NavigationItemMenuTrigger = (0, import_react48.forwardRef)(
             ...props,
             children: [
               renderItemIcon3(leftIcon),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 Typography,
                 {
                   level: "text",
@@ -8920,7 +9192,7 @@ var NavigationItemMenuTrigger = (0, import_react48.forwardRef)(
                   children
                 }
               ),
-              rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+              rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
             ]
           }
         ) })
@@ -8929,7 +9201,7 @@ var NavigationItemMenuTrigger = (0, import_react48.forwardRef)(
   }
 );
 NavigationItemMenuTrigger.displayName = "NavigationItemMenuTrigger";
-var NavigationItemMenuContent = (0, import_react48.forwardRef)(
+var NavigationItemMenuContent = (0, import_react50.forwardRef)(
   ({
     className,
     side,
@@ -8941,7 +9213,7 @@ var NavigationItemMenuContent = (0, import_react48.forwardRef)(
   }, ref) => {
     const direction = useNavigationDirection();
     const menu = useNavigationItemMenuContext("NavigationItemMenuContent");
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       PopoverPrimitive7.Content,
       {
         ref,
@@ -8962,7 +9234,7 @@ var NavigationItemMenuContent = (0, import_react48.forwardRef)(
   }
 );
 NavigationItemMenuContent.displayName = "NavigationItemMenuContent";
-var NavigationItemMenuItem = (0, import_react48.forwardRef)(
+var NavigationItemMenuItem = (0, import_react50.forwardRef)(
   ({
     className,
     value,
@@ -8976,7 +9248,7 @@ var NavigationItemMenuItem = (0, import_react48.forwardRef)(
   }, ref) => {
     const menu = useNavigationItemMenuContext("NavigationItemMenuItem");
     const isSelected = selected ?? menu.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "button",
       {
         ref,
@@ -8996,7 +9268,7 @@ var NavigationItemMenuItem = (0, import_react48.forwardRef)(
         ...props,
         children: [
           renderItemIcon3(leftIcon),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             Typography,
             {
               level: "text",
@@ -9005,7 +9277,7 @@ var NavigationItemMenuItem = (0, import_react48.forwardRef)(
               children
             }
           ),
-          rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
+          rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
         ]
       }
     );
@@ -9016,8 +9288,8 @@ NavigationItemMenuItem.displayName = "NavigationItemMenuItem";
 // src/components/slider.tsx
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
 var import_class_variance_authority13 = require("class-variance-authority");
-var import_react49 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react51 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var sliderVariants = (0, import_class_variance_authority13.cva)("aviala-slider", {
   variants: {
     size: {
@@ -9034,7 +9306,7 @@ var sliderVariants = (0, import_class_variance_authority13.cva)("aviala-slider",
     type: "default"
   }
 });
-var Slider = (0, import_react49.forwardRef)(
+var Slider = (0, import_react51.forwardRef)(
   ({
     className,
     size = "default",
@@ -9051,7 +9323,7 @@ var Slider = (0, import_react49.forwardRef)(
     const isRange = resolvedType === "range";
     const resolvedDefaultValue = defaultValue ?? (isRange ? [25, 75] : [50]);
     const thumbCount = isRange ? Math.max(2, value?.length ?? defaultValue?.length ?? 2) : 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       SliderPrimitive.Root,
       {
         ref,
@@ -9069,8 +9341,8 @@ var Slider = (0, import_react49.forwardRef)(
         "data-disabled": disabled ? "true" : void 0,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
-          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
+          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
         ]
       }
     );
@@ -9081,8 +9353,8 @@ Slider.displayName = "Slider";
 // src/components/upload.tsx
 var import_icons19 = require("@aviala-design/icons");
 var import_class_variance_authority14 = require("class-variance-authority");
-var import_react50 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react52 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var uploadVariants = (0, import_class_variance_authority14.cva)("aviala-upload aviala-focus-ring", {
   variants: {
     style: {
@@ -9094,7 +9366,7 @@ var uploadVariants = (0, import_class_variance_authority14.cva)("aviala-upload a
     style: "default"
   }
 });
-var Upload = (0, import_react50.forwardRef)(
+var Upload = (0, import_react52.forwardRef)(
   ({
     className,
     style = "default",
@@ -9112,8 +9384,8 @@ var Upload = (0, import_react50.forwardRef)(
     onDrop,
     ...props
   }, ref) => {
-    const inputRef = (0, import_react50.useRef)(null);
-    const [dragging, setDragging] = (0, import_react50.useState)(false);
+    const inputRef = (0, import_react52.useRef)(null);
+    const [dragging, setDragging] = (0, import_react52.useState)(false);
     const resolvedStyle = style ?? "default";
     const allowDrag = dragAndDrop ?? resolvedStyle === "large";
     const openPicker = () => {
@@ -9132,7 +9404,7 @@ var Upload = (0, import_react50.forwardRef)(
         onChange?.(event.dataTransfer.files);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
       "div",
       {
         ref,
@@ -9163,7 +9435,7 @@ var Upload = (0, import_react50.forwardRef)(
         onDrop: handleDrop,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "input",
             {
               ref: inputRef,
@@ -9178,8 +9450,8 @@ var Upload = (0, import_react50.forwardRef)(
               ...inputProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons19.GeneralUpload, { width: 16, height: 16 }) }),
-          resolvedStyle === "large" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons19.GeneralUpload, { width: 16, height: 16 }) }),
+          resolvedStyle === "large" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Typeface,
             {
               className: "aviala-upload__typeface",
@@ -9187,7 +9459,7 @@ var Upload = (0, import_react50.forwardRef)(
               primary: title,
               secondary: description
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
         ]
       }
     );
@@ -9196,8 +9468,8 @@ var Upload = (0, import_react50.forwardRef)(
 Upload.displayName = "Upload";
 
 // src/components/scroll-picker.tsx
-var import_react51 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react53 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var LOOP_SECTIONS2 = 3;
 var MIDDLE_SECTION2 = 1;
 function normalizeIndex2(index, length) {
@@ -9225,7 +9497,7 @@ function fractionalIndexAtScrollTop(metrics, scrollTop) {
   return (scrollTop - metrics.originTop) / metrics.pitch;
 }
 function ScrollPicker({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: cn("aviala-scroll-picker", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
 function ScrollPickerColumn({
   className,
@@ -9237,27 +9509,27 @@ function ScrollPickerColumn({
   formatValue,
   getValueKey
 }) {
-  const scrollRef = (0, import_react51.useRef)(null);
-  const isUserScrollingRef = (0, import_react51.useRef)(false);
-  const isProgrammaticScrollRef = (0, import_react51.useRef)(false);
-  const smoothTargetValueRef = (0, import_react51.useRef)(null);
-  const scrollEndTimerRef = (0, import_react51.useRef)(void 0);
-  const wheelAccumRef = (0, import_react51.useRef)(0);
-  const selectedValueRef = (0, import_react51.useRef)(value);
-  const reactId = (0, import_react51.useId)();
+  const scrollRef = (0, import_react53.useRef)(null);
+  const isUserScrollingRef = (0, import_react53.useRef)(false);
+  const isProgrammaticScrollRef = (0, import_react53.useRef)(false);
+  const smoothTargetValueRef = (0, import_react53.useRef)(null);
+  const scrollEndTimerRef = (0, import_react53.useRef)(void 0);
+  const wheelAccumRef = (0, import_react53.useRef)(0);
+  const selectedValueRef = (0, import_react53.useRef)(value);
+  const reactId = (0, import_react53.useId)();
   selectedValueRef.current = value;
-  const getIndex = (0, import_react51.useCallback)(
+  const getIndex = (0, import_react53.useCallback)(
     (candidate) => {
       const index = values.findIndex((item) => Object.is(item, candidate));
       return index >= 0 ? index : 0;
     },
     [values]
   );
-  const repeatedValues = (0, import_react51.useMemo)(() => {
+  const repeatedValues = (0, import_react53.useMemo)(() => {
     if (!loop) return [...values];
     return Array.from({ length: LOOP_SECTIONS2 }, () => values).flat();
   }, [loop, values]);
-  const scrollToIndex = (0, import_react51.useCallback)((index, behavior = "auto") => {
+  const scrollToIndex = (0, import_react53.useCallback)((index, behavior = "auto") => {
     const container = scrollRef.current;
     if (!container) return;
     const metrics = readMetrics(container);
@@ -9265,7 +9537,7 @@ function ScrollPickerColumn({
     isProgrammaticScrollRef.current = true;
     container.scrollTo({ top: scrollTopForIndex(container, metrics, index), behavior });
   }, []);
-  const scrollToValue = (0, import_react51.useCallback)(
+  const scrollToValue = (0, import_react53.useCallback)(
     (nextValue, behavior = "smooth") => {
       if (behavior === "smooth") {
         smoothTargetValueRef.current = nextValue;
@@ -9278,7 +9550,7 @@ function ScrollPickerColumn({
     },
     [getIndex, loop, scrollToIndex, values.length]
   );
-  const settleScroll = (0, import_react51.useCallback)(() => {
+  const settleScroll = (0, import_react53.useCallback)(() => {
     const container = scrollRef.current;
     if (!container || isProgrammaticScrollRef.current) {
       isProgrammaticScrollRef.current = false;
@@ -9324,7 +9596,7 @@ function ScrollPickerColumn({
     isUserScrollingRef.current = false;
     wheelAccumRef.current = 0;
   }, [loop, onChange, values]);
-  const handleScroll = (0, import_react51.useCallback)(() => {
+  const handleScroll = (0, import_react53.useCallback)(() => {
     if (isProgrammaticScrollRef.current) return;
     isUserScrollingRef.current = true;
     if (scrollEndTimerRef.current) {
@@ -9332,7 +9604,7 @@ function ScrollPickerColumn({
     }
     scrollEndTimerRef.current = setTimeout(settleScroll, WHEEL_SCROLL_END_MS);
   }, [settleScroll]);
-  (0, import_react51.useLayoutEffect)(() => {
+  (0, import_react53.useLayoutEffect)(() => {
     if (isUserScrollingRef.current) return;
     if (smoothTargetValueRef.current != null && Object.is(smoothTargetValueRef.current, value)) {
       return;
@@ -9347,7 +9619,7 @@ function ScrollPickerColumn({
     if (Math.abs(container.scrollTop - targetTop) <= 1) return;
     scrollToIndex(targetIndex, "auto");
   }, [getIndex, loop, scrollToIndex, value, values.length]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     const container = scrollRef.current;
     if (!container) return;
     const onScrollEnd = () => {
@@ -9364,7 +9636,7 @@ function ScrollPickerColumn({
       }
     };
   }, [settleScroll]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     const container = scrollRef.current;
     if (!container) return;
     const onWheel = (event) => {
@@ -9422,9 +9694,9 @@ function ScrollPickerColumn({
     }
   };
   const selectedOptionId = `${reactId}-${getIndex(value)}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "aviala-scroll-picker-column__viewport", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "aviala-scroll-picker-column__viewport", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "div",
       {
         ref: scrollRef,
@@ -9435,12 +9707,12 @@ function ScrollPickerColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
           const isSelected = Object.is(itemValue, value);
           const valueIndex = loop ? normalizeIndex2(index, values.length) : index;
           const optionId = `${reactId}-${loop ? index : valueIndex}`;
           const key = getValueKey?.(itemValue, index) ?? `${String(itemValue)}-${index}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("li", { className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             ScrollPickerItem,
             {
               id: isSelected ? selectedOptionId : optionId,
@@ -9466,7 +9738,7 @@ function ScrollPickerItem({
   className,
   onSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "button",
     {
       type: "button",
@@ -9489,9 +9761,9 @@ function ScrollPickerItem({
 // src/components/breadcrumb.tsx
 var import_icons20 = require("@aviala-design/icons");
 var import_class_variance_authority15 = require("class-variance-authority");
-var import_react52 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var BreadcrumbSizeContext = (0, import_react52.createContext)("default");
+var import_react54 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var BreadcrumbSizeContext = (0, import_react54.createContext)("default");
 function breadcrumbTypeLevel(size) {
   return size === "small" ? "caption" : "text";
 }
@@ -9506,10 +9778,10 @@ var breadcrumbVariants = (0, import_class_variance_authority15.cva)("aviala-brea
     size: "default"
   }
 });
-var Breadcrumb = (0, import_react52.forwardRef)(
+var Breadcrumb = (0, import_react54.forwardRef)(
   ({ className, size = "default", children, ...props }, ref) => {
     const resolvedSize = size ?? "default";
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "nav",
       {
         ref,
@@ -9517,18 +9789,18 @@ var Breadcrumb = (0, import_react52.forwardRef)(
         className: cn(breadcrumbVariants({ size: resolvedSize }), className),
         "data-size": resolvedSize,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ol", { className: "aviala-breadcrumb__list", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ol", { className: "aviala-breadcrumb__list", children })
       }
     ) });
   }
 );
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbItem = (0, import_react52.forwardRef)(
+var BreadcrumbItem = (0, import_react54.forwardRef)(
   ({ className, href, current = false, icon, onClick, children, ...props }, ref) => {
-    const size = (0, import_react52.useContext)(BreadcrumbSizeContext);
-    const label = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
-      children != null ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    const size = (0, import_react54.useContext)(BreadcrumbSizeContext);
+    const label = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
+      children != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         Typography,
         {
           level: breadcrumbTypeLevel(size),
@@ -9538,13 +9810,13 @@ var BreadcrumbItem = (0, import_react52.forwardRef)(
         }
       ) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "li",
       {
         ref,
         className: cn("aviala-breadcrumb-item-wrap", className),
         ...props,
-        children: href != null ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        children: href != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "a",
           {
             href,
@@ -9553,7 +9825,7 @@ var BreadcrumbItem = (0, import_react52.forwardRef)(
             "aria-current": current ? "page" : void 0,
             children: label
           }
-        ) : onClick != null ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        ) : onClick != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "button",
           {
             type: "button",
@@ -9563,7 +9835,7 @@ var BreadcrumbItem = (0, import_react52.forwardRef)(
             onClick,
             children: label
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "span",
           {
             className: "aviala-breadcrumb-item",
@@ -9577,10 +9849,10 @@ var BreadcrumbItem = (0, import_react52.forwardRef)(
   }
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbSeparator = (0, import_react52.forwardRef)(
+var BreadcrumbSeparator = (0, import_react54.forwardRef)(
   ({ className, children = "/", ...props }, ref) => {
-    const size = (0, import_react52.useContext)(BreadcrumbSizeContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    const size = (0, import_react54.useContext)(BreadcrumbSizeContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "li",
       {
         ref,
@@ -9588,13 +9860,13 @@ var BreadcrumbSeparator = (0, import_react52.forwardRef)(
         "aria-hidden": true,
         className: cn("aviala-breadcrumb-separator", className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
       }
     );
   }
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-var BreadcrumbEllipsisItem = (0, import_react52.forwardRef)(
+var BreadcrumbEllipsisItem = (0, import_react54.forwardRef)(
   ({
     className,
     href,
@@ -9603,12 +9875,12 @@ var BreadcrumbEllipsisItem = (0, import_react52.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
-      showChevron ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons20.DirectionArrowRightLight, { width: 14, height: 14, thickness: "Light" }) }) : null
+    const content = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
+      showChevron ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons20.DirectionArrowRightLight, { width: 14, height: 14, thickness: "Light" }) }) : null
     ] });
     if (href != null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "a",
         {
           ref,
@@ -9620,7 +9892,7 @@ var BreadcrumbEllipsisItem = (0, import_react52.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         ref,
@@ -9634,7 +9906,7 @@ var BreadcrumbEllipsisItem = (0, import_react52.forwardRef)(
   }
 );
 BreadcrumbEllipsisItem.displayName = "BreadcrumbEllipsisItem";
-var BreadcrumbEllipsis = (0, import_react52.forwardRef)(
+var BreadcrumbEllipsis = (0, import_react54.forwardRef)(
   ({
     className,
     children,
@@ -9646,11 +9918,11 @@ var BreadcrumbEllipsis = (0, import_react52.forwardRef)(
     "aria-label": ariaLabel,
     ...props
   }, ref) => {
-    const size = (0, import_react52.useContext)(BreadcrumbSizeContext);
-    const [uncontrolledActivated, setUncontrolledActivated] = (0, import_react52.useState)(defaultActivated);
+    const size = (0, import_react54.useContext)(BreadcrumbSizeContext);
+    const [uncontrolledActivated, setUncontrolledActivated] = (0, import_react54.useState)(defaultActivated);
     const isControlled = activatedProp !== void 0;
     const activated = isControlled ? Boolean(activatedProp) : uncontrolledActivated;
-    const setActivated = (0, import_react52.useCallback)(
+    const setActivated = (0, import_react54.useCallback)(
       (next) => {
         if (!isControlled) setUncontrolledActivated(next);
         onActivatedChange?.(next);
@@ -9658,8 +9930,8 @@ var BreadcrumbEllipsis = (0, import_react52.forwardRef)(
       [isControlled, onActivatedChange]
     );
     const iconSize = 14;
-    const icon = children ?? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons20.SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
-    const trigger = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    const icon = children ?? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons20.SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
+    const trigger = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         type: "button",
@@ -9678,9 +9950,9 @@ var BreadcrumbEllipsis = (0, import_react52.forwardRef)(
         children: icon
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Popover, { open: activated, onOpenChange: setActivated, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverTrigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Popover, { open: activated, onOpenChange: setActivated, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         PopoverContent,
         {
           className: "aviala-breadcrumb-ellipsis-menu",
@@ -9689,7 +9961,7 @@ var BreadcrumbEllipsis = (0, import_react52.forwardRef)(
           sideOffset: 7,
           showArrow: false,
           role: "menu",
-          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
         }
       )
     ] }) : trigger });
@@ -9698,9 +9970,9 @@ var BreadcrumbEllipsis = (0, import_react52.forwardRef)(
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
 // src/components/pagehead.tsx
-var import_react53 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var Pagehead = (0, import_react53.forwardRef)(
+var import_react55 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var Pagehead = (0, import_react55.forwardRef)(
   ({
     className,
     back,
@@ -9710,16 +9982,16 @@ var Pagehead = (0, import_react53.forwardRef)(
     actions,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "aviala-pagehead__main", children: [
-      back != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "aviala-pagehead__back", children: back }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "aviala-pagehead__title-block", children: [
-        breadcrumb != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
-        title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "aviala-pagehead__main", children: [
+      back != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-pagehead__back", children: back }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "aviala-pagehead__title-block", children: [
+        breadcrumb != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
+        title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
         children
       ] })
     ] }),
-    actions != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "aviala-pagehead__actions", children: actions }) : null
+    actions != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-pagehead__actions", children: actions }) : null
   ] })
 );
 Pagehead.displayName = "Pagehead";
@@ -9727,8 +9999,8 @@ Pagehead.displayName = "Pagehead";
 // src/components/steps.tsx
 var import_icons21 = require("@aviala-design/icons");
 var import_class_variance_authority16 = require("class-variance-authority");
-var import_react54 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react56 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var stepsVariants = (0, import_class_variance_authority16.cva)("aviala-steps", {
   variants: {
     direction: {
@@ -9740,8 +10012,8 @@ var stepsVariants = (0, import_class_variance_authority16.cva)("aviala-steps", {
     direction: "horizontal"
   }
 });
-var Steps = (0, import_react54.forwardRef)(
-  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+var Steps = (0, import_react56.forwardRef)(
+  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "div",
     {
       ref,
@@ -9756,20 +10028,20 @@ Steps.displayName = "Steps";
 function defaultStepsIconContent(state, index) {
   switch (state) {
     case "done":
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons21.SymbolRight, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons21.SymbolRight, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "fail":
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons21.SymbolWrong, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons21.SymbolWrong, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons21.SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons21.SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "waiting":
     case "inProgress":
     case "default":
     default:
-      return index != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
+      return index != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
   }
 }
-var StepsIcon = (0, import_react54.forwardRef)(
-  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+var StepsIcon = (0, import_react56.forwardRef)(
+  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "span",
     {
       ref,
@@ -9781,7 +10053,7 @@ var StepsIcon = (0, import_react54.forwardRef)(
   )
 );
 StepsIcon.displayName = "StepsIcon";
-var StepsItem = (0, import_react54.forwardRef)(
+var StepsItem = (0, import_react56.forwardRef)(
   ({
     className,
     state = "default",
@@ -9791,7 +10063,7 @@ var StepsItem = (0, import_react54.forwardRef)(
     icon,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
       ref,
@@ -9799,9 +10071,9 @@ var StepsItem = (0, import_react54.forwardRef)(
       "data-state": state,
       ...props,
       children: [
-        icon ?? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StepsIcon, { state, index }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "aviala-steps-item__body", children: [
-          title != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        icon ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StepsIcon, { state, index }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "aviala-steps-item__body", children: [
+          title != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Typography,
             {
               level: "subtitle",
@@ -9810,7 +10082,7 @@ var StepsItem = (0, import_react54.forwardRef)(
               children: title
             }
           ) : null,
-          description != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          description != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Typography,
             {
               level: "text",
@@ -9829,8 +10101,8 @@ StepsItem.displayName = "StepsItem";
 
 // src/components/pagination.tsx
 var import_icons22 = require("@aviala-design/icons");
-var import_react55 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_react57 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function buildPageList(page, pageCount) {
   if (pageCount <= 7) {
     return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -9853,7 +10125,17 @@ function buildPageList(page, pageCount) {
   }
   return result;
 }
-var Pagination = (0, import_react55.forwardRef)(
+function ellipsisRange(pages, index) {
+  const prev = pages[index - 1];
+  const next = pages[index + 1];
+  if (typeof prev !== "number" || typeof next !== "number") return [];
+  const start = prev + 1;
+  const end = next - 1;
+  const range = [];
+  for (let p = start; p <= end; p += 1) range.push(p);
+  return range;
+}
+var Pagination = (0, import_react57.forwardRef)(
   ({
     className,
     page: pageProp,
@@ -9871,9 +10153,10 @@ var Pagination = (0, import_react55.forwardRef)(
     sizeOptionLabel = (size) => `${size} \u9879`,
     ...props
   }, ref) => {
-    const [uncontrolledPage, setUncontrolledPage] = (0, import_react55.useState)(defaultPage);
-    const [uncontrolledPageSize, setUncontrolledPageSize] = (0, import_react55.useState)(defaultPageSize);
-    const [jumpValue, setJumpValue] = (0, import_react55.useState)("");
+    const [uncontrolledPage, setUncontrolledPage] = (0, import_react57.useState)(defaultPage);
+    const [uncontrolledPageSize, setUncontrolledPageSize] = (0, import_react57.useState)(defaultPageSize);
+    const [jumpValue, setJumpValue] = (0, import_react57.useState)("");
+    const [openEllipsis, setOpenEllipsis] = (0, import_react57.useState)(null);
     const page = pageProp ?? uncontrolledPage;
     const pageSize = pageSizeProp ?? uncontrolledPageSize;
     const safePageCount = Math.max(1, pageCount);
@@ -9894,7 +10177,7 @@ var Pagination = (0, import_react55.forwardRef)(
       setPage(parsed);
       setJumpValue("");
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       "div",
       {
         ref,
@@ -9903,8 +10186,8 @@ var Pagination = (0, import_react55.forwardRef)(
         "aria-label": props["aria-label"] ?? "Pagination",
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "aviala-pagination__controls", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "aviala-pagination__controls", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -9912,35 +10195,69 @@ var Pagination = (0, import_react55.forwardRef)(
                 iconOnly: true,
                 "aria-label": "Previous page",
                 disabled: currentPage <= 1,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons22.DirectionArrowLeftLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons22.DirectionArrowLeftLight, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage - 1)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-pagination__pages", children: pages.map(
-              (item, index) => item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                Typography,
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aviala-pagination__pages", children: pages.map(
+              (item, index) => item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                Popover,
                 {
-                  level: "text",
-                  as: "span",
-                  className: "aviala-pagination__page",
-                  "aria-hidden": true,
-                  children: "\u2026"
+                  open: openEllipsis === index,
+                  onOpenChange: (open) => setOpenEllipsis(open ? index : null),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "data-size": "regular",
+                        className: cn(
+                          buttonVariants({ mode: "noBackgroundCustom", compact: true }),
+                          "aviala-pagination__page--ellipsis"
+                        ),
+                        "aria-label": "\u66F4\u591A\u9875\u7801",
+                        "aria-haspopup": "menu",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: "\u2026" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "data-size": "regular",
+                        className: cn(
+                          buttonVariants({ mode: "noBackgroundCustom", compact: true }),
+                          "aviala-pagination__ellipsis-page"
+                        ),
+                        onClick: () => {
+                          setPage(p);
+                          setOpenEllipsis(null);
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: p })
+                      },
+                      p
+                    )) }) })
+                  ]
                 },
                 `ellipsis-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "button",
                 {
                   type: "button",
-                  className: "aviala-pagination__page aviala-focus-ring",
+                  "data-size": "regular",
+                  className: cn(
+                    buttonVariants({ mode: "noBackgroundCustom", compact: true }),
+                    "aviala-pagination__page"
+                  ),
                   "data-active": item === currentPage ? "true" : void 0,
                   "aria-current": item === currentPage ? "page" : void 0,
                   onClick: () => setPage(item),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Typography, { level: "text", as: "span", children: item })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: item })
                 },
                 item
               )
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -9948,14 +10265,14 @@ var Pagination = (0, import_react55.forwardRef)(
                 iconOnly: true,
                 "aria-label": "Next page",
                 disabled: currentPage >= safePageCount,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons22.DirectionArrowRightLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons22.DirectionArrowRightLight, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage + 1)
               }
             )
           ] }),
-          showJump ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "aviala-pagination__jump", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Typography, { level: "text", as: "span", children: jumpLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          showJump ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "aviala-pagination__jump", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: jumpLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Input,
               {
                 className: "aviala-pagination__jump-input",
@@ -9975,15 +10292,15 @@ var Pagination = (0, import_react55.forwardRef)(
               }
             )
           ] }) : null,
-          showSizeChanger ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "aviala-pagination__size", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Typography, { level: "text", as: "span", children: sizeLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+          showSizeChanger ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "aviala-pagination__size", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: sizeLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
               Select,
               {
                 value: String(pageSize),
                 onValueChange: (value) => setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     SelectTrigger,
                     {
                       size: "regular",
@@ -9991,7 +10308,7 @@ var Pagination = (0, import_react55.forwardRef)(
                       "aria-label": "Page size"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     SelectItem,
                     {
                       value: String(option),
@@ -10013,15 +10330,15 @@ Pagination.displayName = "Pagination";
 
 // src/components/card.tsx
 var import_icons23 = require("@aviala-design/icons");
-var import_react56 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var Card = (0, import_react56.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ref, className: cn("aviala-card", className), ...props, children })
+var import_react58 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var Card = (0, import_react58.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { ref, className: cn("aviala-card", className), ...props, children })
 );
 Card.displayName = "Card";
 function renderCardIcon(node) {
   if (!node) return null;
-  const content = (0, import_react56.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react56.cloneElement)(node, {
+  const content = (0, import_react58.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react58.cloneElement)(node, {
     width: 14,
     height: 14,
     className: cn(
@@ -10029,9 +10346,9 @@ function renderCardIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "aviala-card-head__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card-head__icon", children: content });
 }
-var CardHead = (0, import_react56.forwardRef)(
+var CardHead = (0, import_react58.forwardRef)(
   ({
     className,
     slotType = "select",
@@ -10047,38 +10364,38 @@ var CardHead = (0, import_react56.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (slotType) {
         case "action":
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons23.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
           ] });
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Switch, { ...switchProps })
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return select != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-card-head__trailing", children: select }) : null;
+          return select != null ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-card-head__trailing", children: select }) : null;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "div",
       {
         ref,
@@ -10086,9 +10403,9 @@ var CardHead = (0, import_react56.forwardRef)(
         "data-type": slotType,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "aviala-card-head__main", children: [
-            renderCardIcon(icon ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-card-head__main", children: [
+            renderCardIcon(icon ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
           ] }),
           renderTrailing()
         ]
@@ -10097,11 +10414,11 @@ var CardHead = (0, import_react56.forwardRef)(
   }
 );
 CardHead.displayName = "CardHead";
-var CardBody = (0, import_react56.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Typography, { level: "text", as: "span", children }) : children }) })
+var CardBody = (0, import_react58.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typography, { level: "text", as: "span", children }) : children }) })
 );
 CardBody.displayName = "CardBody";
-var CardBottom = (0, import_react56.forwardRef)(
+var CardBottom = (0, import_react58.forwardRef)(
   ({
     className,
     slotType = "action",
@@ -10114,46 +10431,46 @@ var CardBottom = (0, import_react56.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       if (children != null) return children;
       switch (slotType) {
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Switch, { ...switchProps })
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Switch, { ...switchProps })
           ] });
         case "select":
           return select;
         case "action":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons23.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
           ] });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "div",
       {
         ref,
         className: cn("aviala-card-bottom", className),
         "data-type": slotType,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
       }
     );
   }
@@ -10161,10 +10478,10 @@ var CardBottom = (0, import_react56.forwardRef)(
 CardBottom.displayName = "CardBottom";
 
 // src/components/table.tsx
-var import_react57 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var Table = (0, import_react57.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var import_react59 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Table = (0, import_react59.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       ref,
@@ -10176,8 +10493,8 @@ var Table = (0, import_react57.forwardRef)(
   )
 );
 Table.displayName = "Table";
-var TableRow = (0, import_react57.forwardRef)(
-  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var TableRow = (0, import_react59.forwardRef)(
+  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       ref,
@@ -10190,8 +10507,8 @@ var TableRow = (0, import_react57.forwardRef)(
   )
 );
 TableRow.displayName = "TableRow";
-var TableHead = (0, import_react57.forwardRef)(
-  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var TableHead = (0, import_react59.forwardRef)(
+  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       ref,
@@ -10199,14 +10516,14 @@ var TableHead = (0, import_react57.forwardRef)(
       className: cn("aviala-table-head", className),
       "data-content": content,
       ...props,
-      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "caption", as: "span", children }) : children
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "caption", as: "span", children }) : children
     }
   )
 );
 TableHead.displayName = "TableHead";
 function renderCellIcon(node) {
   if (!node) return null;
-  const content = (0, import_react57.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react57.cloneElement)(node, {
+  const content = (0, import_react59.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react59.cloneElement)(node, {
     width: 16,
     height: 16,
     className: cn(
@@ -10214,9 +10531,9 @@ function renderCellIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "aviala-table-cell__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-table-cell__icon", children: content });
 }
-var TableCell = (0, import_react57.forwardRef)(
+var TableCell = (0, import_react59.forwardRef)(
   ({
     className,
     content = "text",
@@ -10235,29 +10552,29 @@ var TableCell = (0, import_react57.forwardRef)(
       if (children != null) return children;
       switch (content) {
         case "checkbox":
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Checkbox, { ...checkboxProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Checkbox, { ...checkboxProps });
         case "icon+text":
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
             renderCellIcon(icon),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "people":
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-            people ?? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Avatar, { content: "text", level: "text", children: "A" }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: text }) })
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+            people ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Avatar, { content: "text", level: "text", children: "A" }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "badge":
-          return badge ?? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
+          return badge ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Switch, { ...switchProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Switch, { ...switchProps });
         case "action":
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aviala-table-cell__actions", children: actions });
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-table-cell__actions", children: actions });
         case "text":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: text }) });
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: text }) });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "div",
       {
         ref,
@@ -10319,6 +10636,7 @@ TableCell.displayName = "TableCell";
   Feedback,
   Fieldset,
   FormField,
+  HoverPopover,
   Input,
   InputGroup,
   InputGroupAddon,
@@ -10369,6 +10687,7 @@ TableCell.displayName = "TableCell";
   RadioGroup,
   RadioGroupItem,
   RadioInput,
+  ResponsiveTooltip,
   Scroll,
   ScrollPicker,
   ScrollPickerColumn,