@aviala-design/spiral 2.0.0 → 2.1.0

package/dist/index.js

@@ -471,6 +471,10 @@ var buttonVariants = cva3(
       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: {
@@ -555,6 +559,7 @@ var Button = forwardRef3(
     variant,
     size: sizeProp,
     allRound = false,
+    compact,
     iconOnly: iconOnlyProp,
     asChild = false,
     loading = false,
@@ -609,7 +614,7 @@ var Button = forwardRef3(
       !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
@@ -3103,6 +3108,7 @@ import {
   useContext as useContext3,
   useEffect as useEffect3,
   useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo3,
   useRef as useRef4,
   useState as useState6
 } from "react";
@@ -3136,10 +3142,13 @@ function useSegmentatorState(value, defaultValue, onValueChange) {
   const [internal, setInternal] = useState6(defaultValue ?? "");
   const isControlled = value !== void 0;
   const current = isControlled ? value : internal;
-  const setValue = (next) => {
-    if (!isControlled) setInternal(next);
-    onValueChange?.(next);
-  };
+  const setValue = useCallback4(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
   return [current, setValue];
 }
 var SEGMENTATOR_DRAG_THRESHOLD_PX = 4;
@@ -3184,6 +3193,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();
@@ -3405,7 +3424,6 @@ var SegmentatorGroup = forwardRef20(
     const layoutKey = useThemeLayoutKey();
     const consumeClickRef = useRef4(false);
     const pointerDragRef = useRef4(null);
-    const [dragPreviewValue, setDragPreviewValue] = useState6(null);
     const [dragState, setDragState] = useState6({
       pressing: false,
       active: false
@@ -3414,9 +3432,12 @@ var SegmentatorGroup = forwardRef20(
     const resetPointerInteraction = useCallback4(() => {
       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) {
@@ -3473,8 +3494,8 @@ var SegmentatorGroup = forwardRef20(
         if (itemChanged) {
           triggerSegmentatorHaptic("select");
           drag.snapUntil = performance.now() + 540;
-          if (nextPreviewValue) {
-            setDragPreviewValue(nextPreviewValue);
+          if (item) {
+            applyDragPreview(group, item);
           }
         }
         drag.previewValue = nextPreviewValue;
@@ -3550,7 +3571,7 @@ var SegmentatorGroup = forwardRef20(
         event.pointerId
       );
       writeThumbMetrics(metrics, false);
-      setDragPreviewValue(pressedValue);
+      applyDragPreview(group, pressedItem);
       setDragState({ pressing: true, active: false });
       group.setPointerCapture(event.pointerId);
     };
@@ -3558,16 +3579,17 @@ var SegmentatorGroup = forwardRef20(
     return /* @__PURE__ */ jsx21(
       SegmentatorContext.Provider,
       {
-        value: {
-          value: currentValue,
-          onValueChange: setValue,
-          mode,
-          allRound,
-          disabled,
-          consumeClickRef,
-          dragPreviewValue,
-          isPressing: dragState.pressing
-        },
+        value: useMemo3(
+          () => ({
+            value: currentValue,
+            onValueChange: setValue,
+            mode,
+            allRound,
+            disabled,
+            consumeClickRef
+          }),
+          [currentValue, setValue, mode, allRound, disabled]
+        ),
         children: /* @__PURE__ */ jsxs15(
           "div",
           {
@@ -3638,7 +3660,6 @@ var SegmentatorItem = forwardRef20(
         "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),
@@ -3987,7 +4008,7 @@ function usePointerDrag(ref, onMove, enabled = true) {
 }
 
 // src/components/color-picker/use-color-picker-state.ts
-import { useCallback as useCallback6, useMemo as useMemo3, useState as useState7 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo4, useState as useState7 } from "react";
 function useColorPickerState({
   value: controlledValue,
   defaultValue = DEFAULT_COLOR,
@@ -4010,7 +4031,7 @@ function useColorPickerState({
     },
     [controlledValue, onChange]
   );
-  const hsva = useMemo3(() => toHsva(value), [value]);
+  const hsva = useMemo4(() => toHsva(value), [value]);
   const setHsva = useCallback6(
     (partial, meta) => {
       setValue(fromHsva({ ...hsva, ...partial }), meta);
@@ -4610,7 +4631,7 @@ import {
   useContext as useContext5,
   useEffect as useEffect5,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo4,
+  useMemo as useMemo5,
   useRef as useRef7,
   useState as useState10
 } from "react";
@@ -4831,7 +4852,7 @@ function Cascader({
     },
     [changeOnSelect, commitValue, expandTo, handleOpenChange, options]
   );
-  const contextValue = useMemo4(
+  const contextValue = useMemo5(
     () => ({
       open,
       disabled,
@@ -5121,7 +5142,7 @@ function CascaderOptionsMenu({ className }) {
   const menuRef = useRef7(null);
   const columnElRefs = useRef7(/* @__PURE__ */ new Map());
   const [columns, setColumns] = useState10([]);
-  const columnPaths = useMemo4(() => {
+  const columnPaths = useMemo5(() => {
     const paths = [[]];
     const expansion = activePath.length > 0 ? activePath : selectedPath.slice(0, -1);
     for (let index = 0; index < expansion.length; index += 1) {
@@ -5314,7 +5335,7 @@ import {
   useEffect as useEffect7,
   useId as useId4,
   useLayoutEffect as useLayoutEffect5,
-  useMemo as useMemo7,
+  useMemo as useMemo8,
   useRef as useRef9,
   useState as useState11
 } from "react";
@@ -5522,14 +5543,14 @@ function parseDateRangeInput(text) {
 }
 
 // src/components/date-picker/date-picker-month-wheels.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/components/date-picker/date-picker-time-wheel.tsx
 import {
   useCallback as useCallback11,
   useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef8
 } from "react";
 
@@ -5607,7 +5628,7 @@ function DatePickerTimeWheelColumn({
   const wheelAccumRef = useRef8(0);
   const selectedValueRef = useRef8(value);
   selectedValueRef.current = value;
-  const repeatedValues = useMemo5(() => {
+  const repeatedValues = useMemo6(() => {
     if (!loop) return [...values];
     return Array.from({ length: LOOP_SECTIONS }, () => values).flat();
   }, [loop, values]);
@@ -5875,7 +5896,7 @@ function DatePickerMonthYearWheels({
   const { viewMonth, setViewMonth, minDate, maxDate } = useDatePickerContext();
   const year = viewMonth.getFullYear();
   const month = viewMonth.getMonth() + 1;
-  const yearValues = useMemo6(() => {
+  const yearValues = useMemo7(() => {
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     const start = minDate?.getFullYear() ?? currentYear - 100;
     const end = maxDate?.getFullYear() ?? currentYear + 100;
@@ -6244,7 +6265,7 @@ function DatePicker(props) {
       viewMonth
     ]
   );
-  const contextValue = useMemo7(
+  const contextValue = useMemo8(
     () => ({
       open,
       setOpen: handleOpenChange,
@@ -6685,8 +6706,8 @@ function DatePickerCalendar({ className }) {
     setActivePanel,
     enableTime
   } = useDatePickerContext();
-  const today = useMemo7(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const days = useMemo7(() => getCalendarDays(viewMonth), [viewMonth]);
+  const today = useMemo8(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const days = useMemo8(() => getCalendarDays(viewMonth), [viewMonth]);
   const prevViewMonthRef = useRef9(viewMonth);
   const dayGridRef = useRef9(null);
   const pendingDayFocusRef = useRef9(false);
@@ -6757,7 +6778,7 @@ function DatePickerCalendar({ className }) {
     pendingDayFocusRef.current = false;
     target.focus();
   }, [focusedDay, days, monthSlide]);
-  const outgoingDays = useMemo7(
+  const outgoingDays = useMemo8(
     () => monthSlide ? getCalendarDays(monthSlide.outgoingMonth) : null,
     [monthSlide]
   );
@@ -7142,7 +7163,7 @@ import {
   forwardRef as forwardRef28,
   useCallback as useCallback13,
   useEffect as useEffect8,
-  useMemo as useMemo8,
+  useMemo as useMemo9,
   useRef as useRef10,
   useState as useState12
 } from "react";
@@ -7244,7 +7265,7 @@ function TimePicker({
     },
     [disabled, isOpenControlled, onOpenChange]
   );
-  const contextValue = useMemo8(
+  const contextValue = useMemo9(
     () => ({
       open,
       disabled,
@@ -7392,8 +7413,6 @@ import * as PopoverPrimitive6 from "@radix-ui/react-popover";
 import {
   forwardRef as forwardRef29,
   useCallback as useCallback14,
-  useEffect as useEffect9,
-  useRef as useRef11,
   useState as useState13
 } from "react";
 
@@ -7452,37 +7471,9 @@ function Popover({
   const [internalOpen, setInternalOpen] = useState13(defaultOpen);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : internalOpen;
-  const windowBlurCloseRef = useRef11(false);
-  const pointerDownCloseRef = useRef11(false);
-  useEffect9(() => {
-    const markWindowBlur = () => {
-      windowBlurCloseRef.current = true;
-    };
-    window.addEventListener("blur", markWindowBlur, true);
-    return () => window.removeEventListener("blur", markWindowBlur, true);
-  }, []);
-  useEffect9(() => {
-    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 = useCallback14(
     (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]
@@ -7508,6 +7499,7 @@ var PopoverContent = forwardRef29(
     collisionPadding = 8,
     portalled = true,
     showArrow = false,
+    flush = false,
     ...props
   }, ref) => {
     const content = /* @__PURE__ */ jsxs31(
@@ -7520,7 +7512,14 @@ var PopoverContent = forwardRef29(
         className: cn("aviala-popover-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx41("div", { className: cn("aviala-popover-content__surface", typographyVariants({ level: "text" })), children }),
+          /* @__PURE__ */ jsx41(
+            "div",
+            {
+              className: cn("aviala-popover-content__surface", typographyVariants({ level: "text" })),
+              "data-flush": flush ? "true" : void 0,
+              children
+            }
+          ),
           showArrow ? /* @__PURE__ */ jsx41(
             PopoverPrimitive6.Arrow,
             {
@@ -7548,6 +7547,135 @@ var PopoverContent = forwardRef29(
 );
 PopoverContent.displayName = PopoverPrimitive6.Content.displayName;
 
+// src/components/hover-popover.tsx
+import {
+  useCallback as useCallback15,
+  useEffect as useEffect10,
+  useRef as useRef11,
+  useState as useState15
+} from "react";
+
+// src/components/use-coarse-pointer.ts
+import { useEffect as useEffect9, useState as useState14 } from "react";
+function useCoarsePointer() {
+  const [coarse, setCoarse] = useState14(false);
+  useEffect9(() => {
+    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
+import { jsx as jsx42, jsxs as jsxs32 } from "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] = useState15(defaultOpen);
+  const open = isControlled ? openProp : internalOpen;
+  const openTimer = useRef11(void 0);
+  const closeTimer = useRef11(void 0);
+  const clearTimers = useCallback15(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+  const setOpen = useCallback15(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  useEffect10(() => () => clearTimers(), [clearTimers]);
+  const keyboardOpenRef = useRef11(false);
+  const contentRef = useRef11(null);
+  const openNow = useCallback15(() => {
+    keyboardOpenRef.current = false;
+    clearTimers();
+    openTimer.current = setTimeout(() => setOpen(true), openDelay);
+  }, [clearTimers, openDelay, setOpen]);
+  const closeSoon = useCallback15(() => {
+    clearTimers();
+    closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
+  }, [clearTimers, closeDelay, setOpen]);
+  if (coarse) {
+    return /* @__PURE__ */ jsxs32(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx42(
+        PopoverContent,
+        {
+          side,
+          align,
+          sideOffset,
+          collisionPadding,
+          showArrow,
+          className: contentClassName,
+          children: content
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs32(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx42(
+      PopoverTrigger,
+      {
+        asChild: true,
+        onMouseEnter: openNow,
+        onMouseLeave: closeSoon,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") keyboardOpenRef.current = true;
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx42(
+      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
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { SymbolWrong as SymbolWrong2 } from "@aviala-design/icons";
@@ -7557,7 +7685,7 @@ import {
   forwardRef as forwardRef30,
   isValidElement as isValidElement13
 } from "react";
-import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var MODAL_ICON_SIZE = 16;
 var modalContentVariants = cva10("aviala-modal-content", {
   variants: {
@@ -7580,13 +7708,13 @@ function renderModalIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx42("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx43("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 = forwardRef30(({ className, ...props }, ref) => /* @__PURE__ */ jsx42(
+var ModalOverlay = forwardRef30(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -7605,24 +7733,24 @@ var ModalContent = forwardRef30(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const overlay = showOverlay ? /* @__PURE__ */ jsx42(ModalOverlay, {}) : null;
-    const panel = /* @__PURE__ */ jsx42(
+    const overlay = showOverlay ? /* @__PURE__ */ jsx43(ModalOverlay, {}) : null;
+    const panel = /* @__PURE__ */ jsx43(
       DialogPrimitive.Content,
       {
         ref,
         className: cn(modalContentVariants({ size }), className),
         onOpenAutoFocus,
         ...props,
-        children: /* @__PURE__ */ jsx42("div", { className: "aviala-modal-content__surface", children })
+        children: /* @__PURE__ */ jsx43("div", { className: "aviala-modal-content__surface", children })
       }
     );
     if (!portalled) {
-      return /* @__PURE__ */ jsxs32(Fragment6, { children: [
+      return /* @__PURE__ */ jsxs33(Fragment6, { children: [
         overlay,
         panel
       ] });
     }
-    return /* @__PURE__ */ jsxs32(DialogPrimitive.Portal, { children: [
+    return /* @__PURE__ */ jsxs33(DialogPrimitive.Portal, { children: [
       overlay,
       panel
     ] });
@@ -7638,10 +7766,10 @@ var ModalHeader = forwardRef30(
     showClose = true,
     closeLabel = "Close dialog",
     ...props
-  }, ref) => /* @__PURE__ */ jsx42("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ jsxs32("div", { className: "aviala-modal__header-row", children: [
+  }, ref) => /* @__PURE__ */ jsx43("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ jsxs33("div", { className: "aviala-modal__header-row", children: [
     showIcon ? renderModalIcon(icon) : null,
-    /* @__PURE__ */ jsx42("div", { className: "aviala-modal__header-main", children }),
-    showClose ? /* @__PURE__ */ jsx42(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43("div", { className: "aviala-modal__header-main", children }),
+    showClose ? /* @__PURE__ */ jsx43(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx43(
       Button,
       {
         type: "button",
@@ -7649,28 +7777,28 @@ var ModalHeader = forwardRef30(
         iconOnly: true,
         "aria-label": closeLabel,
         className: "aviala-modal__close",
-        leftIcon: /* @__PURE__ */ jsx42(SymbolWrong2, { "aria-hidden": true })
+        leftIcon: /* @__PURE__ */ jsx43(SymbolWrong2, { "aria-hidden": true })
       }
     ) }) : null
   ] }) })
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx42(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx42(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
+var ModalTitle = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx43(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx43(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
 ModalTitle.displayName = DialogPrimitive.Title.displayName;
-var ModalDescription = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx42(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx42(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
+var ModalDescription = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx43(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx43(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
 ModalDescription.displayName = DialogPrimitive.Description.displayName;
 function ModalHeaderText({
   title,
   description,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(ModalHeader, { ...props, children: /* @__PURE__ */ jsxs32("div", { className: "aviala-modal__header-typeface", children: [
-    /* @__PURE__ */ jsx42(ModalTitle, { children: title }),
-    description ? /* @__PURE__ */ jsx42(ModalDescription, { children: description }) : null
+  return /* @__PURE__ */ jsx43(ModalHeader, { ...props, children: /* @__PURE__ */ jsxs33("div", { className: "aviala-modal__header-typeface", children: [
+    /* @__PURE__ */ jsx43(ModalTitle, { children: title }),
+    description ? /* @__PURE__ */ jsx43(ModalDescription, { children: description }) : null
   ] }) });
 }
 var ModalBody = forwardRef30(
-  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ jsx42("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ jsx42(
+  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ jsx43("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ jsx43(
     Typeface,
     {
       className: "aviala-modal__body-typeface",
@@ -7682,21 +7810,21 @@ var ModalBody = forwardRef30(
 );
 ModalBody.displayName = "ModalBody";
 var ModalFooter = forwardRef30(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx42("div", { ref, className: cn("aviala-modal__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43("div", { ref, className: cn("aviala-modal__footer", className), ...props })
 );
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var TOOLTIP_DELAY_DURATION = 300;
 function TooltipProvider({
   delayDuration = TOOLTIP_DELAY_DURATION,
   skipDelayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     TooltipPrimitive.Provider,
     {
       delayDuration,
@@ -7715,7 +7843,7 @@ var TooltipContent = forwardRef31(
     collisionPadding = 8,
     showArrow = true,
     ...props
-  }, ref) => /* @__PURE__ */ jsx43(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs33(
+  }, ref) => /* @__PURE__ */ jsx44(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs34(
     TooltipPrimitive.Content,
     {
       ref,
@@ -7724,14 +7852,14 @@ var TooltipContent = forwardRef31(
       className: cn("aviala-tooltip-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx43("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
-        showArrow ? /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
+        showArrow ? /* @__PURE__ */ jsx44(
           TooltipPrimitive.Arrow,
           {
             asChild: true,
             width: TOOLTIP_POINTER.width,
             height: TOOLTIP_POINTER.height,
-            children: /* @__PURE__ */ jsx43(
+            children: /* @__PURE__ */ jsx44(
               OverlayPointerSvg,
               {
                 className: "aviala-tooltip-content__arrow",
@@ -7748,6 +7876,66 @@ var TooltipContent = forwardRef31(
 );
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
+// src/components/responsive-tooltip.tsx
+import { jsx as jsx45, jsxs as jsxs35 } from "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__ */ jsxs35(Popover, { open, defaultOpen, onOpenChange, children: [
+      /* @__PURE__ */ jsx45(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx45(
+        PopoverContent,
+        {
+          side,
+          align,
+          sideOffset,
+          collisionPadding,
+          showArrow,
+          className: contentClassName,
+          children: content
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs35(
+    Tooltip,
+    {
+      delayDuration,
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx45(
+          TooltipContent,
+          {
+            side,
+            align,
+            sideOffset,
+            collisionPadding,
+            showArrow,
+            className: contentClassName,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/feedback.tsx
 import { cva as cva11 } from "class-variance-authority";
 import {
@@ -7763,7 +7951,7 @@ import {
   forwardRef as forwardRef32,
   isValidElement as isValidElement14
 } from "react";
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var FEEDBACK_ICON_SIZE = 22;
 var feedbackVariants = cva11("aviala-feedback", {
   variants: {
@@ -7799,22 +7987,22 @@ function renderFeedbackIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx44("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx46("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__ */ jsx44(SymbolInformationCircle2, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx46(SymbolInformationCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ jsx44(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx46(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "wrong":
-      return /* @__PURE__ */ jsx44(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx46(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ jsx44(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx46(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "normal":
-      return /* @__PURE__ */ jsx44(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
+      return /* @__PURE__ */ jsx46(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
   }
 }
 var Feedback = forwardRef32(
@@ -7839,7 +8027,7 @@ var Feedback = forwardRef32(
     const tone = mode === "primary" ? "white" : "default";
     const isSmall = resolvedSize === "small";
     const resolvedRole = resolvedType === "wrong" ? "alert" : "status";
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         ref,
@@ -7853,9 +8041,9 @@ var Feedback = forwardRef32(
         "data-size": resolvedSize,
         "data-mode": mode,
         ...props,
-        children: /* @__PURE__ */ jsxs34("div", { className: "aviala-feedback__body", children: [
+        children: /* @__PURE__ */ jsxs36("div", { className: "aviala-feedback__body", children: [
           renderFeedbackIcon(icon ?? defaultStatusIcon(resolvedType, mode)),
-          isSmall ? /* @__PURE__ */ jsx44(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx44(
+          isSmall ? /* @__PURE__ */ jsx46(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx46(
             Typeface,
             {
               className: "aviala-feedback__typeface",
@@ -7865,7 +8053,7 @@ var Feedback = forwardRef32(
               tone
             }
           ),
-          action ? /* @__PURE__ */ jsx44(
+          action ? /* @__PURE__ */ jsx46(
             Link,
             {
               level: "text",
@@ -7881,7 +8069,7 @@ var Feedback = forwardRef32(
               children: action
             }
           ) : null,
-          showClose ? /* @__PURE__ */ jsx44(
+          showClose ? /* @__PURE__ */ jsx46(
             Link,
             {
               level: "text",
@@ -7890,7 +8078,7 @@ var Feedback = forwardRef32(
               href: onClose ? "#" : void 0,
               "aria-label": closeLabel,
               className: "aviala-feedback__close",
-              leftIcon: /* @__PURE__ */ jsx44(SymbolWrong3, { "aria-hidden": true }),
+              leftIcon: /* @__PURE__ */ jsx46(SymbolWrong3, { "aria-hidden": true }),
               onClick: (event) => {
                 if (onClose) {
                   event.preventDefault();
@@ -7920,7 +8108,7 @@ import {
   forwardRef as forwardRef33,
   isValidElement as isValidElement15
 } from "react";
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var ALERT_ICON_SIZE = 16;
 var alertVariants = cva12("aviala-alert", {
   variants: {
@@ -7956,20 +8144,20 @@ function renderAlertIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx45("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx47("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__ */ jsx45(SymbolInformationCircle3, { ...iconProps });
+      return /* @__PURE__ */ jsx47(SymbolInformationCircle3, { ...iconProps });
     case "warning":
-      return /* @__PURE__ */ jsx45(SymbolWarningCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx47(SymbolWarningCircle2, { ...iconProps });
     case "error":
-      return /* @__PURE__ */ jsx45(SymbolWrongCircle3, { ...iconProps });
+      return /* @__PURE__ */ jsx47(SymbolWrongCircle3, { ...iconProps });
     case "success":
-      return /* @__PURE__ */ jsx45(SymbolRightCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx47(SymbolRightCircle2, { ...iconProps });
   }
 }
 var Alert = forwardRef33(
@@ -7998,7 +8186,7 @@ var Alert = forwardRef33(
     const resolvedType = type ?? "info";
     const resolvedRole = resolvedType === "error" ? "alert" : "status";
     const hasActions = showActions && (action || secondaryAction);
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs37(
       "div",
       {
         ref,
@@ -8010,9 +8198,9 @@ var Alert = forwardRef33(
         "data-appearance": appearance,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs35("div", { className: "aviala-alert__body", children: [
+          /* @__PURE__ */ jsxs37("div", { className: "aviala-alert__body", children: [
             showIcon ? renderAlertIcon(icon ?? defaultStatusIcon2(resolvedType)) : null,
-            isSmall ? /* @__PURE__ */ jsx45(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx45(
+            isSmall ? /* @__PURE__ */ jsx47(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx47(
               Typeface,
               {
                 className: "aviala-alert__typeface",
@@ -8021,7 +8209,7 @@ var Alert = forwardRef33(
                 secondary: description
               }
             ),
-            quickAction ? /* @__PURE__ */ jsx45(
+            quickAction ? /* @__PURE__ */ jsx47(
               Link,
               {
                 level: "text",
@@ -8037,7 +8225,7 @@ var Alert = forwardRef33(
                 children: quickAction
               }
             ) : null,
-            dismissible ? /* @__PURE__ */ jsx45(
+            dismissible ? /* @__PURE__ */ jsx47(
               Link,
               {
                 level: "text",
@@ -8046,7 +8234,7 @@ var Alert = forwardRef33(
                 href: onDismiss ? "#" : void 0,
                 "aria-label": closeLabel,
                 className: "aviala-alert__close",
-                leftIcon: /* @__PURE__ */ jsx45(SymbolWrong4, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx47(SymbolWrong4, { "aria-hidden": true }),
                 onClick: (event) => {
                   if (onDismiss) {
                     event.preventDefault();
@@ -8056,8 +8244,8 @@ var Alert = forwardRef33(
               }
             ) : null
           ] }),
-          hasActions ? /* @__PURE__ */ jsxs35("div", { className: "aviala-alert__actions", children: [
-            action ? /* @__PURE__ */ jsx45(
+          hasActions ? /* @__PURE__ */ jsxs37("div", { className: "aviala-alert__actions", children: [
+            action ? /* @__PURE__ */ jsx47(
               Link,
               {
                 level: "caption",
@@ -8073,7 +8261,7 @@ var Alert = forwardRef33(
                 children: action
               }
             ) : null,
-            secondaryAction ? /* @__PURE__ */ jsx45(
+            secondaryAction ? /* @__PURE__ */ jsx47(
               Link,
               {
                 level: "caption",
@@ -8107,30 +8295,30 @@ import {
   forwardRef as forwardRef34,
   isValidElement as isValidElement16
 } from "react";
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var List = forwardRef34(
-  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs36("div", { ref, className: cn("aviala-list", className), ...props, children: [
-    title != null ? /* @__PURE__ */ jsx46(ListTitle, { children: title }) : null,
-    /* @__PURE__ */ jsx46(ListGroup, { children })
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs38("div", { ref, className: cn("aviala-list", className), ...props, children: [
+    title != null ? /* @__PURE__ */ jsx48(ListTitle, { children: title }) : null,
+    /* @__PURE__ */ jsx48(ListGroup, { children })
   ] })
 );
 List.displayName = "List";
 var ListTitle = forwardRef34(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx46("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx46("span", { className: cn(typographyVariants({ level: "text" })), children }) })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx48("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx48("span", { className: cn(typographyVariants({ level: "text" })), children }) })
 );
 ListTitle.displayName = "ListTitle";
 var ListGroup = forwardRef34(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx46("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx48("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
 );
 ListGroup.displayName = "ListGroup";
 function ListItemGroup({ label, children, className }) {
-  return /* @__PURE__ */ jsxs36("div", { className: cn("aviala-list", className), children: [
-    label != null ? /* @__PURE__ */ jsx46(ListTitle, { children: label }) : null,
-    /* @__PURE__ */ jsx46(ListGroup, { children })
+  return /* @__PURE__ */ jsxs38("div", { className: cn("aviala-list", className), children: [
+    label != null ? /* @__PURE__ */ jsx48(ListTitle, { children: label }) : null,
+    /* @__PURE__ */ jsx48(ListGroup, { children })
   ] });
 }
 var ListDivider = forwardRef34(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
     "span",
     {
       ref,
@@ -8142,13 +8330,13 @@ var ListDivider = forwardRef34(
 );
 ListDivider.displayName = "ListDivider";
 var ListSeparator = forwardRef34(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx46("hr", { ref, className: cn("aviala-list-separator", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("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__ */ jsx46(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx46(GeneralSetting, { "aria-hidden": true }));
+  const content = node ?? (leading === "shaped" ? /* @__PURE__ */ jsx48(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx48(GeneralSetting, { "aria-hidden": true }));
   const rendered = isValidElement16(content) && typeof content.type !== "string" ? cloneElement11(content, {
     width: iconSize,
     height: iconSize,
@@ -8157,7 +8345,7 @@ function renderLeadingIcon(node, leading) {
       "shrink-0"
     )
   }) : content;
-  return /* @__PURE__ */ jsx46("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx48(
     "span",
     {
       className: cn(
@@ -8188,44 +8376,44 @@ var ListItem = forwardRef34(
     ...props
   }, ref) => {
     const isInteractive = interactive ?? onClick != null;
-    const primaryAction = action ?? /* @__PURE__ */ jsx46(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx46(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ jsx48(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx48(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (itemType) {
         case "action":
-          return /* @__PURE__ */ jsxs36("div", { className: "aviala-list-item__more", children: [
-            /* @__PURE__ */ jsxs36("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__more", children: [
+            /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
               primaryAction,
-              secondaryAction ?? /* @__PURE__ */ jsx46(
+              secondaryAction ?? /* @__PURE__ */ jsx48(
                 Button,
                 {
                   mode: "default",
                   size: "regular",
                   iconOnly: true,
                   "aria-label": "More",
-                  leftIcon: /* @__PURE__ */ jsx46(GeneralSetting, { "aria-hidden": true })
+                  leftIcon: /* @__PURE__ */ jsx48(GeneralSetting, { "aria-hidden": true })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx46(ListDivider, {}),
-            /* @__PURE__ */ jsx46("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx46(DirectionArrowRightLight2, { width: 18, height: 18 }) })
+            /* @__PURE__ */ jsx48(ListDivider, {}),
+            /* @__PURE__ */ jsx48("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx48(DirectionArrowRightLight2, { width: 18, height: 18 }) })
           ] });
         case "switch":
-          return /* @__PURE__ */ jsxs36("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx46(ListDivider, {}),
-            /* @__PURE__ */ jsx46(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx48(ListDivider, {}),
+            /* @__PURE__ */ jsx48(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return /* @__PURE__ */ jsxs36("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx46(ListDivider, {}),
-            /* @__PURE__ */ jsx46("span", { className: "aviala-list-item__select", children: select })
+            /* @__PURE__ */ jsx48(ListDivider, {}),
+            /* @__PURE__ */ jsx48("span", { className: "aviala-list-item__select", children: select })
           ] });
       }
     };
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs38(
       "div",
       {
         ref,
@@ -8240,8 +8428,8 @@ var ListItem = forwardRef34(
         ...props,
         children: [
           renderLeadingIcon(icon, leading),
-          /* @__PURE__ */ jsx46("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs36("div", { className: "aviala-list-item__content", children: [
-            /* @__PURE__ */ jsx46("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx46(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
+          /* @__PURE__ */ jsx48("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__content", children: [
+            /* @__PURE__ */ jsx48("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx48(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
             renderTrailing()
           ] }) })
         ]
@@ -8257,15 +8445,15 @@ import { Slot as Slot5 } from "@radix-ui/react-slot";
 import {
   createContext as createContext8,
   forwardRef as forwardRef35,
-  useCallback as useCallback15,
+  useCallback as useCallback16,
   useContext as useContext8,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo9,
+  useMemo as useMemo10,
   useRef as useRef12,
-  useState as useState14
+  useState as useState16
 } from "react";
-import { Fragment as Fragment7, jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 function navigationItemButtonMode(active) {
   return active ? "second" : "noBackgroundCustom";
 }
@@ -8330,11 +8518,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
     };
   }
@@ -8433,13 +8627,13 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
   const layoutTrackingFrameRef = useRef12(null);
   const isLayoutTrackingRef = useRef12(false);
   const isInitialMount = useRef12(true);
-  const [activeRevision, setActiveRevision] = useState14(0);
-  const measureIndicator = useCallback15(() => {
+  const [activeRevision, setActiveRevision] = useState16(0);
+  const measureIndicator = useCallback16(() => {
     const group = groupRef.current;
     if (!group) return null;
     return measureNavigationIndicator(group, direction);
   }, [direction, groupRef]);
-  const syncIndicator = useCallback15(
+  const syncIndicator = useCallback16(
     (metrics, instant = false) => {
       metricsRef.current = metrics;
       const el = indicatorRef.current;
@@ -8447,14 +8641,14 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     },
     []
   );
-  const cancelLayoutTracking = useCallback15(() => {
+  const cancelLayoutTracking = useCallback16(() => {
     if (layoutTrackingFrameRef.current != null) {
       cancelAnimationFrame(layoutTrackingFrameRef.current);
       layoutTrackingFrameRef.current = null;
     }
     isLayoutTrackingRef.current = false;
   }, []);
-  const remeasureIndicator = useCallback15(() => {
+  const remeasureIndicator = useCallback16(() => {
     if (isLayoutTrackingRef.current) return;
     const metrics = measureIndicator();
     if (!metrics) return;
@@ -8463,7 +8657,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     isAnimatingRef.current = false;
     syncIndicator(metrics, true);
   }, [measureIndicator, syncIndicator]);
-  const startExpandCollapseTracking = useCallback15(() => {
+  const startExpandCollapseTracking = useCallback16(() => {
     const group = groupRef.current;
     const el = indicatorRef.current;
     if (!group || !el) return;
@@ -8520,7 +8714,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     };
     layoutTrackingFrameRef.current = requestAnimationFrame(tick);
   }, [cancelLayoutTracking, groupRef, measureIndicator, syncIndicator]);
-  const onIndicatorRef = useCallback15((node) => {
+  const onIndicatorRef = useCallback16((node) => {
     indicatorRef.current = node;
     if (node && metricsRef.current && isInitialMount.current) {
       applyIndicatorMetrics(node, metricsRef.current, true);
@@ -8632,6 +8826,32 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     startExpandCollapseTracking,
     syncIndicator
   ]);
+  useEffect11(() => {
+    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 = forwardRef35(
@@ -8642,7 +8862,7 @@ var Navigation = forwardRef35(
     direction = "vertical",
     dividingLine = false,
     ...props
-  }, ref) => /* @__PURE__ */ jsx47(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx47(
+  }, ref) => /* @__PURE__ */ jsx49(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx49(
     Tag2,
     {
       ref,
@@ -8656,7 +8876,7 @@ var Navigation = forwardRef35(
 );
 Navigation.displayName = "Navigation";
 var NavigationBrand = forwardRef35(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
     "div",
     {
       ref,
@@ -8668,24 +8888,24 @@ var NavigationBrand = forwardRef35(
 NavigationBrand.displayName = "NavigationBrand";
 var NavigationBrandTitle = forwardRef35(({ className, asChild = false, children, ...props }, ref) => {
   const Comp = asChild ? Slot5 : "a";
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49(
     Comp,
     {
       ref,
       className: cn("aviala-navigation-brand__title aviala-focus-ring", className),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx47(Typography, { level: "text", as: "span", children })
+      children: asChild ? children : /* @__PURE__ */ jsx49(Typography, { level: "text", as: "span", children })
     }
   );
 });
 NavigationBrandTitle.displayName = "NavigationBrandTitle";
-var NavigationSection = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx47(
+var NavigationSection = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx49(
   "div",
   {
     ref,
     className: cn("aviala-navigation-section", className),
     ...props,
-    children: /* @__PURE__ */ jsx47(Typography, { level: "caption", as: "p", children })
+    children: /* @__PURE__ */ jsx49(Typography, { level: "caption", as: "p", children })
   }
 ));
 NavigationSection.displayName = "NavigationSection";
@@ -8699,7 +8919,7 @@ var NavigationGroup = forwardRef35(
       direction,
       layoutKey
     );
-    const setRefs = useCallback15(
+    const setRefs = useCallback16(
       (node) => {
         groupRef.current = node;
         if (typeof ref === "function") {
@@ -8710,14 +8930,14 @@ var NavigationGroup = forwardRef35(
       },
       [ref]
     );
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs39(
       "div",
       {
         ref: setRefs,
         className: cn("aviala-navigation-group", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx49(
             "span",
             {
               ref: onIndicatorRef,
@@ -8743,7 +8963,7 @@ var NavigationItemGroup = forwardRef35(({ className, expanded, children, ...prop
     if (isCollapsed) inner.setAttribute("inert", "");
     else inner.removeAttribute("inert");
   }, [isCollapsed]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       ref,
@@ -8751,7 +8971,7 @@ var NavigationItemGroup = forwardRef35(({ className, expanded, children, ...prop
       "data-expanded": isCollapsible ? expanded ? "true" : "false" : void 0,
       "aria-hidden": isCollapsed ? true : void 0,
       ...props,
-      children: isCollapsible ? /* @__PURE__ */ jsx47("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
+      children: isCollapsible ? /* @__PURE__ */ jsx49("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
     }
   );
 });
@@ -8762,7 +8982,7 @@ function renderItemIcon3(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx47("span", { className: "aviala-navigation-item__icon", children: content });
+  return /* @__PURE__ */ jsx49("span", { className: "aviala-navigation-item__icon", children: content });
 }
 var NavigationItem = forwardRef35(
   ({
@@ -8779,9 +8999,9 @@ var NavigationItem = forwardRef35(
     const Comp = asChild ? Slot5 : "a";
     const isActive = active ?? ariaCurrent === "page";
     const mode = navigationItemButtonMode(isActive);
-    const controlContent = /* @__PURE__ */ jsxs37(Fragment7, { children: [
+    const controlContent = /* @__PURE__ */ jsxs39(Fragment7, { children: [
       renderItemIcon3(leftIcon),
-      /* @__PURE__ */ jsx47(
+      /* @__PURE__ */ jsx49(
         Typography,
         {
           level: "text",
@@ -8790,15 +9010,15 @@ var NavigationItem = forwardRef35(
           children
         }
       ),
-      rightIcon ? /* @__PURE__ */ jsx47("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+      rightIcon ? /* @__PURE__ */ jsx49("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
     ] });
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx49(
       "span",
       {
         className: cn("aviala-navigation-item", className),
         "data-item-type": itemType,
         "data-active": isActive ? "true" : "false",
-        children: /* @__PURE__ */ jsx47(
+        children: /* @__PURE__ */ jsx49(
           Comp,
           {
             ref,
@@ -8817,7 +9037,7 @@ var NavigationItem = forwardRef35(
   }
 );
 NavigationItem.displayName = "NavigationItem";
-var NavigationActions = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx47(
+var NavigationActions = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx49(
   "div",
   {
     ref,
@@ -8827,7 +9047,7 @@ var NavigationActions = forwardRef35(({ className, children, ...props }, ref) =>
   }
 ));
 NavigationActions.displayName = "NavigationActions";
-var NavigationActionsSlot = forwardRef35(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+var NavigationActionsSlot = forwardRef35(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
   "div",
   {
     ref,
@@ -8853,28 +9073,28 @@ function NavigationItemMenu({
   onOpenChange,
   children
 }) {
-  const [internalValue, setInternalValue] = useState14(defaultValue);
+  const [internalValue, setInternalValue] = useState16(defaultValue);
   const isValueControlled = valueProp !== void 0;
   const value = isValueControlled ? valueProp : internalValue;
-  const [internalOpen, setInternalOpen] = useState14(false);
+  const [internalOpen, setInternalOpen] = useState16(false);
   const isOpenControlled = openProp !== void 0;
   const open = isOpenControlled ? openProp : internalOpen;
   const closeTimerRef = useRef12(null);
   const openedByHoverRef = useRef12(false);
-  const setOpen = useCallback15(
+  const setOpen = useCallback16(
     (nextOpen) => {
       if (!isOpenControlled) setInternalOpen(nextOpen);
       onOpenChange?.(nextOpen);
     },
     [isOpenControlled, onOpenChange]
   );
-  const cancelClose = useCallback15(() => {
+  const cancelClose = useCallback16(() => {
     if (closeTimerRef.current != null) {
       window.clearTimeout(closeTimerRef.current);
       closeTimerRef.current = null;
     }
   }, []);
-  const openMenu = useCallback15(
+  const openMenu = useCallback16(
     (viaHover) => {
       cancelClose();
       openedByHoverRef.current = viaHover;
@@ -8882,14 +9102,14 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  const scheduleClose = useCallback15(() => {
+  const scheduleClose = useCallback16(() => {
     cancelClose();
     closeTimerRef.current = window.setTimeout(() => {
       closeTimerRef.current = null;
       setOpen(false);
     }, NAVIGATION_MENU_CLOSE_DELAY_MS);
   }, [cancelClose, setOpen]);
-  const select = useCallback15(
+  const select = useCallback16(
     (nextValue) => {
       if (!isValueControlled) setInternalValue(nextValue);
       onValueChange?.(nextValue);
@@ -8898,8 +9118,8 @@ function NavigationItemMenu({
     },
     [cancelClose, isValueControlled, onValueChange, setOpen]
   );
-  useEffect10(() => cancelClose, [cancelClose]);
-  const contextValue = useMemo9(
+  useEffect11(() => cancelClose, [cancelClose]);
+  const contextValue = useMemo10(
     () => ({
       value,
       hasSelection: value != null && value !== "",
@@ -8911,7 +9131,7 @@ function NavigationItemMenu({
     }),
     [cancelClose, openMenu, scheduleClose, select, value]
   );
-  const handleOpenChange = useCallback15(
+  const handleOpenChange = useCallback16(
     (nextOpen) => {
       if (nextOpen) openedByHoverRef.current = false;
       cancelClose();
@@ -8919,7 +9139,7 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  return /* @__PURE__ */ jsx47(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx47(Popover, { open, onOpenChange: handleOpenChange, children }) });
+  return /* @__PURE__ */ jsx49(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx49(Popover, { open, onOpenChange: handleOpenChange, children }) });
 }
 var NavigationItemMenuTrigger = forwardRef35(
   ({
@@ -8933,7 +9153,7 @@ var NavigationItemMenuTrigger = forwardRef35(
     const menu = useNavigationItemMenuContext("NavigationItemMenuTrigger");
     const isActive = active ?? menu.hasSelection;
     const mode = navigationItemButtonMode(isActive);
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx49(
       "span",
       {
         className: cn("aviala-navigation-item", className),
@@ -8941,7 +9161,7 @@ var NavigationItemMenuTrigger = forwardRef35(
         "data-active": isActive ? "true" : "false",
         onMouseEnter: () => menu.openMenu(true),
         onMouseLeave: menu.scheduleClose,
-        children: /* @__PURE__ */ jsx47(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs37(
+        children: /* @__PURE__ */ jsx49(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs39(
           "button",
           {
             ref,
@@ -8954,7 +9174,7 @@ var NavigationItemMenuTrigger = forwardRef35(
             ...props,
             children: [
               renderItemIcon3(leftIcon),
-              /* @__PURE__ */ jsx47(
+              /* @__PURE__ */ jsx49(
                 Typography,
                 {
                   level: "text",
@@ -8963,7 +9183,7 @@ var NavigationItemMenuTrigger = forwardRef35(
                   children
                 }
               ),
-              rightIcon ? /* @__PURE__ */ jsx47("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+              rightIcon ? /* @__PURE__ */ jsx49("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
             ]
           }
         ) })
@@ -8984,7 +9204,7 @@ var NavigationItemMenuContent = forwardRef35(
   }, ref) => {
     const direction = useNavigationDirection();
     const menu = useNavigationItemMenuContext("NavigationItemMenuContent");
-    return /* @__PURE__ */ jsx47(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx49(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx49(
       PopoverPrimitive7.Content,
       {
         ref,
@@ -9019,7 +9239,7 @@ var NavigationItemMenuItem = forwardRef35(
   }, ref) => {
     const menu = useNavigationItemMenuContext("NavigationItemMenuItem");
     const isSelected = selected ?? menu.value === value;
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs39(
       "button",
       {
         ref,
@@ -9039,7 +9259,7 @@ var NavigationItemMenuItem = forwardRef35(
         ...props,
         children: [
           renderItemIcon3(leftIcon),
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx49(
             Typography,
             {
               level: "text",
@@ -9048,7 +9268,7 @@ var NavigationItemMenuItem = forwardRef35(
               children
             }
           ),
-          rightIcon ? /* @__PURE__ */ jsx47("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
+          rightIcon ? /* @__PURE__ */ jsx49("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
         ]
       }
     );
@@ -9060,7 +9280,7 @@ NavigationItemMenuItem.displayName = "NavigationItemMenuItem";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cva as cva13 } from "class-variance-authority";
 import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 var sliderVariants = cva13("aviala-slider", {
   variants: {
     size: {
@@ -9094,7 +9314,7 @@ var Slider = forwardRef36(
     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__ */ jsxs38(
+    return /* @__PURE__ */ jsxs40(
       SliderPrimitive.Root,
       {
         ref,
@@ -9112,8 +9332,8 @@ var Slider = forwardRef36(
         "data-disabled": disabled ? "true" : void 0,
         ...props,
         children: [
-          /* @__PURE__ */ jsx48(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ jsx48(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
-          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx48(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
+          /* @__PURE__ */ jsx50(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ jsx50(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
+          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx50(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
         ]
       }
     );
@@ -9127,9 +9347,9 @@ import { cva as cva14 } from "class-variance-authority";
 import {
   forwardRef as forwardRef37,
   useRef as useRef13,
-  useState as useState15
+  useState as useState17
 } from "react";
-import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
 var uploadVariants = cva14("aviala-upload aviala-focus-ring", {
   variants: {
     style: {
@@ -9160,7 +9380,7 @@ var Upload = forwardRef37(
     ...props
   }, ref) => {
     const inputRef = useRef13(null);
-    const [dragging, setDragging] = useState15(false);
+    const [dragging, setDragging] = useState17(false);
     const resolvedStyle = style ?? "default";
     const allowDrag = dragAndDrop ?? resolvedStyle === "large";
     const openPicker = () => {
@@ -9179,7 +9399,7 @@ var Upload = forwardRef37(
         onChange?.(event.dataTransfer.files);
       }
     };
-    return /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs41(
       "div",
       {
         ref,
@@ -9210,7 +9430,7 @@ var Upload = forwardRef37(
         onDrop: handleDrop,
         ...props,
         children: [
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             "input",
             {
               ref: inputRef,
@@ -9225,8 +9445,8 @@ var Upload = forwardRef37(
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsx49("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx49(GeneralUpload, { width: 16, height: 16 }) }),
-          resolvedStyle === "large" ? /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx51(GeneralUpload, { width: 16, height: 16 }) }),
+          resolvedStyle === "large" ? /* @__PURE__ */ jsx51(
             Typeface,
             {
               className: "aviala-upload__typeface",
@@ -9234,7 +9454,7 @@ var Upload = forwardRef37(
               primary: title,
               secondary: description
             }
-          ) : /* @__PURE__ */ jsx49(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
+          ) : /* @__PURE__ */ jsx51(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
         ]
       }
     );
@@ -9244,14 +9464,14 @@ Upload.displayName = "Upload";
 
 // src/components/scroll-picker.tsx
 import {
-  useCallback as useCallback16,
-  useEffect as useEffect11,
+  useCallback as useCallback17,
+  useEffect as useEffect12,
   useId as useId5,
   useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo10,
+  useMemo as useMemo11,
   useRef as useRef14
 } from "react";
-import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
 var LOOP_SECTIONS2 = 3;
 var MIDDLE_SECTION2 = 1;
 function normalizeIndex2(index, length) {
@@ -9279,7 +9499,7 @@ function fractionalIndexAtScrollTop(metrics, scrollTop) {
   return (scrollTop - metrics.originTop) / metrics.pitch;
 }
 function ScrollPicker({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx50("div", { className: cn("aviala-scroll-picker", className), ...props, children });
+  return /* @__PURE__ */ jsx52("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
 function ScrollPickerColumn({
   className,
@@ -9300,18 +9520,18 @@ function ScrollPickerColumn({
   const selectedValueRef = useRef14(value);
   const reactId = useId5();
   selectedValueRef.current = value;
-  const getIndex = useCallback16(
+  const getIndex = useCallback17(
     (candidate) => {
       const index = values.findIndex((item) => Object.is(item, candidate));
       return index >= 0 ? index : 0;
     },
     [values]
   );
-  const repeatedValues = useMemo10(() => {
+  const repeatedValues = useMemo11(() => {
     if (!loop) return [...values];
     return Array.from({ length: LOOP_SECTIONS2 }, () => values).flat();
   }, [loop, values]);
-  const scrollToIndex = useCallback16((index, behavior = "auto") => {
+  const scrollToIndex = useCallback17((index, behavior = "auto") => {
     const container = scrollRef.current;
     if (!container) return;
     const metrics = readMetrics(container);
@@ -9319,7 +9539,7 @@ function ScrollPickerColumn({
     isProgrammaticScrollRef.current = true;
     container.scrollTo({ top: scrollTopForIndex(container, metrics, index), behavior });
   }, []);
-  const scrollToValue = useCallback16(
+  const scrollToValue = useCallback17(
     (nextValue, behavior = "smooth") => {
       if (behavior === "smooth") {
         smoothTargetValueRef.current = nextValue;
@@ -9332,7 +9552,7 @@ function ScrollPickerColumn({
     },
     [getIndex, loop, scrollToIndex, values.length]
   );
-  const settleScroll = useCallback16(() => {
+  const settleScroll = useCallback17(() => {
     const container = scrollRef.current;
     if (!container || isProgrammaticScrollRef.current) {
       isProgrammaticScrollRef.current = false;
@@ -9378,7 +9598,7 @@ function ScrollPickerColumn({
     isUserScrollingRef.current = false;
     wheelAccumRef.current = 0;
   }, [loop, onChange, values]);
-  const handleScroll = useCallback16(() => {
+  const handleScroll = useCallback17(() => {
     if (isProgrammaticScrollRef.current) return;
     isUserScrollingRef.current = true;
     if (scrollEndTimerRef.current) {
@@ -9401,7 +9621,7 @@ function ScrollPickerColumn({
     if (Math.abs(container.scrollTop - targetTop) <= 1) return;
     scrollToIndex(targetIndex, "auto");
   }, [getIndex, loop, scrollToIndex, value, values.length]);
-  useEffect11(() => {
+  useEffect12(() => {
     const container = scrollRef.current;
     if (!container) return;
     const onScrollEnd = () => {
@@ -9418,7 +9638,7 @@ function ScrollPickerColumn({
       }
     };
   }, [settleScroll]);
-  useEffect11(() => {
+  useEffect12(() => {
     const container = scrollRef.current;
     if (!container) return;
     const onWheel = (event) => {
@@ -9476,9 +9696,9 @@ function ScrollPickerColumn({
     }
   };
   const selectedOptionId = `${reactId}-${getIndex(value)}`;
-  return /* @__PURE__ */ jsx50("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ jsxs40("div", { className: "aviala-scroll-picker-column__viewport", children: [
-    /* @__PURE__ */ jsx50("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
-    /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ jsxs42("div", { className: "aviala-scroll-picker-column__viewport", children: [
+    /* @__PURE__ */ jsx52("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
+    /* @__PURE__ */ jsx52(
       "div",
       {
         ref: scrollRef,
@@ -9489,12 +9709,12 @@ function ScrollPickerColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsx50("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ jsx52("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__ */ jsx50("li", { className: "contents", children: /* @__PURE__ */ jsx50(
+          return /* @__PURE__ */ jsx52("li", { className: "contents", children: /* @__PURE__ */ jsx52(
             ScrollPickerItem,
             {
               id: isSelected ? selectedOptionId : optionId,
@@ -9520,7 +9740,7 @@ function ScrollPickerItem({
   className,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     "button",
     {
       type: "button",
@@ -9546,11 +9766,11 @@ import { cva as cva15 } from "class-variance-authority";
 import {
   createContext as createContext9,
   forwardRef as forwardRef38,
-  useCallback as useCallback17,
+  useCallback as useCallback18,
   useContext as useContext9,
-  useState as useState16
+  useState as useState18
 } from "react";
-import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
 var BreadcrumbSizeContext = createContext9("default");
 function breadcrumbTypeLevel(size) {
   return size === "small" ? "caption" : "text";
@@ -9569,7 +9789,7 @@ var breadcrumbVariants = cva15("aviala-breadcrumb", {
 var Breadcrumb = forwardRef38(
   ({ className, size = "default", children, ...props }, ref) => {
     const resolvedSize = size ?? "default";
-    return /* @__PURE__ */ jsx51(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx53(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx53(
       "nav",
       {
         ref,
@@ -9577,7 +9797,7 @@ var Breadcrumb = forwardRef38(
         className: cn(breadcrumbVariants({ size: resolvedSize }), className),
         "data-size": resolvedSize,
         ...props,
-        children: /* @__PURE__ */ jsx51("ol", { className: "aviala-breadcrumb__list", children })
+        children: /* @__PURE__ */ jsx53("ol", { className: "aviala-breadcrumb__list", children })
       }
     ) });
   }
@@ -9586,9 +9806,9 @@ Breadcrumb.displayName = "Breadcrumb";
 var BreadcrumbItem = forwardRef38(
   ({ className, href, current = false, icon, onClick, children, ...props }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
-    const label = /* @__PURE__ */ jsxs41(Fragment8, { children: [
-      icon ? /* @__PURE__ */ jsx51("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
-      children != null ? /* @__PURE__ */ jsx51(
+    const label = /* @__PURE__ */ jsxs43(Fragment8, { children: [
+      icon ? /* @__PURE__ */ jsx53("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
+      children != null ? /* @__PURE__ */ jsx53(
         Typography,
         {
           level: breadcrumbTypeLevel(size),
@@ -9598,13 +9818,13 @@ var BreadcrumbItem = forwardRef38(
         }
       ) : null
     ] });
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx53(
       "li",
       {
         ref,
         className: cn("aviala-breadcrumb-item-wrap", className),
         ...props,
-        children: href != null ? /* @__PURE__ */ jsx51(
+        children: href != null ? /* @__PURE__ */ jsx53(
           "a",
           {
             href,
@@ -9613,7 +9833,7 @@ var BreadcrumbItem = forwardRef38(
             "aria-current": current ? "page" : void 0,
             children: label
           }
-        ) : onClick != null ? /* @__PURE__ */ jsx51(
+        ) : onClick != null ? /* @__PURE__ */ jsx53(
           "button",
           {
             type: "button",
@@ -9623,7 +9843,7 @@ var BreadcrumbItem = forwardRef38(
             onClick,
             children: label
           }
-        ) : /* @__PURE__ */ jsx51(
+        ) : /* @__PURE__ */ jsx53(
           "span",
           {
             className: "aviala-breadcrumb-item",
@@ -9640,7 +9860,7 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbSeparator = forwardRef38(
   ({ className, children = "/", ...props }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx53(
       "li",
       {
         ref,
@@ -9648,7 +9868,7 @@ var BreadcrumbSeparator = forwardRef38(
         "aria-hidden": true,
         className: cn("aviala-breadcrumb-separator", className),
         ...props,
-        children: /* @__PURE__ */ jsx51(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
+        children: /* @__PURE__ */ jsx53(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
       }
     );
   }
@@ -9663,12 +9883,12 @@ var BreadcrumbEllipsisItem = forwardRef38(
     children,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsxs41(Fragment8, { children: [
-      /* @__PURE__ */ jsx51(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
-      showChevron ? /* @__PURE__ */ jsx51("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx51(DirectionArrowRightLight3, { width: 14, height: 14, thickness: "Light" }) }) : null
+    const content = /* @__PURE__ */ jsxs43(Fragment8, { children: [
+      /* @__PURE__ */ jsx53(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
+      showChevron ? /* @__PURE__ */ jsx53("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx53(DirectionArrowRightLight3, { width: 14, height: 14, thickness: "Light" }) }) : null
     ] });
     if (href != null) {
-      return /* @__PURE__ */ jsx51(
+      return /* @__PURE__ */ jsx53(
         "a",
         {
           ref,
@@ -9680,7 +9900,7 @@ var BreadcrumbEllipsisItem = forwardRef38(
         }
       );
     }
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx53(
       "button",
       {
         ref,
@@ -9707,10 +9927,10 @@ var BreadcrumbEllipsis = forwardRef38(
     ...props
   }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
-    const [uncontrolledActivated, setUncontrolledActivated] = useState16(defaultActivated);
+    const [uncontrolledActivated, setUncontrolledActivated] = useState18(defaultActivated);
     const isControlled = activatedProp !== void 0;
     const activated = isControlled ? Boolean(activatedProp) : uncontrolledActivated;
-    const setActivated = useCallback17(
+    const setActivated = useCallback18(
       (next) => {
         if (!isControlled) setUncontrolledActivated(next);
         onActivatedChange?.(next);
@@ -9718,8 +9938,8 @@ var BreadcrumbEllipsis = forwardRef38(
       [isControlled, onActivatedChange]
     );
     const iconSize = 14;
-    const icon = children ?? /* @__PURE__ */ jsx51(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
-    const trigger = /* @__PURE__ */ jsx51(
+    const icon = children ?? /* @__PURE__ */ jsx53(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
+    const trigger = /* @__PURE__ */ jsx53(
       "button",
       {
         type: "button",
@@ -9738,9 +9958,9 @@ var BreadcrumbEllipsis = forwardRef38(
         children: icon
       }
     );
-    return /* @__PURE__ */ jsx51("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ jsxs41(Popover, { open: activated, onOpenChange: setActivated, children: [
-      /* @__PURE__ */ jsx51(PopoverTrigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx53("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ jsxs43(Popover, { open: activated, onOpenChange: setActivated, children: [
+      /* @__PURE__ */ jsx53(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx53(
         PopoverContent,
         {
           className: "aviala-breadcrumb-ellipsis-menu",
@@ -9749,7 +9969,7 @@ var BreadcrumbEllipsis = forwardRef38(
           sideOffset: 7,
           showArrow: false,
           role: "menu",
-          children: /* @__PURE__ */ jsx51("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
+          children: /* @__PURE__ */ jsx53("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
         }
       )
     ] }) : trigger });
@@ -9761,7 +9981,7 @@ BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 import {
   forwardRef as forwardRef39
 } from "react";
-import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
 var Pagehead = forwardRef39(
   ({
     className,
@@ -9772,16 +9992,16 @@ var Pagehead = forwardRef39(
     actions,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs42("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
-    /* @__PURE__ */ jsxs42("div", { className: "aviala-pagehead__main", children: [
-      back != null ? /* @__PURE__ */ jsx52("div", { className: "aviala-pagehead__back", children: back }) : null,
-      /* @__PURE__ */ jsxs42("div", { className: "aviala-pagehead__title-block", children: [
-        breadcrumb != null ? /* @__PURE__ */ jsx52("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
-        title != null || description != null ? /* @__PURE__ */ jsx52("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ jsx52(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
+  }, ref) => /* @__PURE__ */ jsxs44("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
+    /* @__PURE__ */ jsxs44("div", { className: "aviala-pagehead__main", children: [
+      back != null ? /* @__PURE__ */ jsx54("div", { className: "aviala-pagehead__back", children: back }) : null,
+      /* @__PURE__ */ jsxs44("div", { className: "aviala-pagehead__title-block", children: [
+        breadcrumb != null ? /* @__PURE__ */ jsx54("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
+        title != null || description != null ? /* @__PURE__ */ jsx54("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ jsx54(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
         children
       ] })
     ] }),
-    actions != null ? /* @__PURE__ */ jsx52("div", { className: "aviala-pagehead__actions", children: actions }) : null
+    actions != null ? /* @__PURE__ */ jsx54("div", { className: "aviala-pagehead__actions", children: actions }) : null
   ] })
 );
 Pagehead.displayName = "Pagehead";
@@ -9796,7 +10016,7 @@ import { cva as cva16 } from "class-variance-authority";
 import {
   forwardRef as forwardRef40
 } from "react";
-import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
 var stepsVariants = cva16("aviala-steps", {
   variants: {
     direction: {
@@ -9809,7 +10029,7 @@ var stepsVariants = cva16("aviala-steps", {
   }
 });
 var Steps = forwardRef40(
-  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx53(
+  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx55(
     "div",
     {
       ref,
@@ -9824,20 +10044,20 @@ Steps.displayName = "Steps";
 function defaultStepsIconContent(state, index) {
   switch (state) {
     case "done":
-      return /* @__PURE__ */ jsx53(SymbolRight4, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ jsx55(SymbolRight4, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "fail":
-      return /* @__PURE__ */ jsx53(SymbolWrong5, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ jsx55(SymbolWrong5, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ jsx53(SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ jsx55(SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "waiting":
     case "inProgress":
     case "default":
     default:
-      return index != null ? /* @__PURE__ */ jsx53(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
+      return index != null ? /* @__PURE__ */ jsx55(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
   }
 }
 var StepsIcon = forwardRef40(
-  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ jsx53(
+  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ jsx55(
     "span",
     {
       ref,
@@ -9859,7 +10079,7 @@ var StepsItem = forwardRef40(
     icon,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs43(
+  }, ref) => /* @__PURE__ */ jsxs45(
     "div",
     {
       ref,
@@ -9867,9 +10087,9 @@ var StepsItem = forwardRef40(
       "data-state": state,
       ...props,
       children: [
-        icon ?? /* @__PURE__ */ jsx53(StepsIcon, { state, index }),
-        /* @__PURE__ */ jsxs43("div", { className: "aviala-steps-item__body", children: [
-          title != null ? /* @__PURE__ */ jsx53(
+        icon ?? /* @__PURE__ */ jsx55(StepsIcon, { state, index }),
+        /* @__PURE__ */ jsxs45("div", { className: "aviala-steps-item__body", children: [
+          title != null ? /* @__PURE__ */ jsx55(
             Typography,
             {
               level: "subtitle",
@@ -9878,7 +10098,7 @@ var StepsItem = forwardRef40(
               children: title
             }
           ) : null,
-          description != null ? /* @__PURE__ */ jsx53(
+          description != null ? /* @__PURE__ */ jsx55(
             Typography,
             {
               level: "text",
@@ -9902,9 +10122,9 @@ import {
 } from "@aviala-design/icons";
 import {
   forwardRef as forwardRef41,
-  useState as useState17
+  useState as useState19
 } from "react";
-import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs46 } from "react/jsx-runtime";
 function buildPageList(page, pageCount) {
   if (pageCount <= 7) {
     return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -9927,6 +10147,16 @@ function buildPageList(page, pageCount) {
   }
   return result;
 }
+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 = forwardRef41(
   ({
     className,
@@ -9945,9 +10175,10 @@ var Pagination = forwardRef41(
     sizeOptionLabel = (size) => `${size} \u9879`,
     ...props
   }, ref) => {
-    const [uncontrolledPage, setUncontrolledPage] = useState17(defaultPage);
-    const [uncontrolledPageSize, setUncontrolledPageSize] = useState17(defaultPageSize);
-    const [jumpValue, setJumpValue] = useState17("");
+    const [uncontrolledPage, setUncontrolledPage] = useState19(defaultPage);
+    const [uncontrolledPageSize, setUncontrolledPageSize] = useState19(defaultPageSize);
+    const [jumpValue, setJumpValue] = useState19("");
+    const [openEllipsis, setOpenEllipsis] = useState19(null);
     const page = pageProp ?? uncontrolledPage;
     const pageSize = pageSizeProp ?? uncontrolledPageSize;
     const safePageCount = Math.max(1, pageCount);
@@ -9968,7 +10199,7 @@ var Pagination = forwardRef41(
       setPage(parsed);
       setJumpValue("");
     };
-    return /* @__PURE__ */ jsxs44(
+    return /* @__PURE__ */ jsxs46(
       "div",
       {
         ref,
@@ -9977,8 +10208,8 @@ var Pagination = forwardRef41(
         "aria-label": props["aria-label"] ?? "Pagination",
         ...props,
         children: [
-          /* @__PURE__ */ jsxs44("div", { className: "aviala-pagination__controls", children: [
-            /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsxs46("div", { className: "aviala-pagination__controls", children: [
+            /* @__PURE__ */ jsx56(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -9986,35 +10217,69 @@ var Pagination = forwardRef41(
                 iconOnly: true,
                 "aria-label": "Previous page",
                 disabled: currentPage <= 1,
-                leftIcon: /* @__PURE__ */ jsx54(DirectionArrowLeftLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx56(DirectionArrowLeftLight, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage - 1)
               }
             ),
-            /* @__PURE__ */ jsx54("div", { className: "aviala-pagination__pages", children: pages.map(
-              (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx54(
-                Typography,
+            /* @__PURE__ */ jsx56("div", { className: "aviala-pagination__pages", children: pages.map(
+              (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsxs46(
+                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__ */ jsx56(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
+                      "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__ */ jsx56(Typography, { level: "text", as: "span", children: "\u2026" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx56(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ jsx56("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ jsx56(
+                      "button",
+                      {
+                        type: "button",
+                        "data-size": "regular",
+                        className: cn(
+                          buttonVariants({ mode: "noBackgroundCustom", compact: true }),
+                          "aviala-pagination__ellipsis-page"
+                        ),
+                        onClick: () => {
+                          setPage(p);
+                          setOpenEllipsis(null);
+                        },
+                        children: /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: p })
+                      },
+                      p
+                    )) }) })
+                  ]
                 },
                 `ellipsis-${index}`
-              ) : /* @__PURE__ */ jsx54(
+              ) : /* @__PURE__ */ jsx56(
                 "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__ */ jsx54(Typography, { level: "text", as: "span", children: item })
+                  children: /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: item })
                 },
                 item
               )
             ) }),
-            /* @__PURE__ */ jsx54(
+            /* @__PURE__ */ jsx56(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10022,14 +10287,14 @@ var Pagination = forwardRef41(
                 iconOnly: true,
                 "aria-label": "Next page",
                 disabled: currentPage >= safePageCount,
-                leftIcon: /* @__PURE__ */ jsx54(DirectionArrowRightLight4, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx56(DirectionArrowRightLight4, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage + 1)
               }
             )
           ] }),
-          showJump ? /* @__PURE__ */ jsxs44("div", { className: "aviala-pagination__jump", children: [
-            /* @__PURE__ */ jsx54(Typography, { level: "text", as: "span", children: jumpLabel }),
-            /* @__PURE__ */ jsx54(
+          showJump ? /* @__PURE__ */ jsxs46("div", { className: "aviala-pagination__jump", children: [
+            /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: jumpLabel }),
+            /* @__PURE__ */ jsx56(
               Input,
               {
                 className: "aviala-pagination__jump-input",
@@ -10049,15 +10314,15 @@ var Pagination = forwardRef41(
               }
             )
           ] }) : null,
-          showSizeChanger ? /* @__PURE__ */ jsxs44("div", { className: "aviala-pagination__size", children: [
-            /* @__PURE__ */ jsx54(Typography, { level: "text", as: "span", children: sizeLabel }),
-            /* @__PURE__ */ jsxs44(
+          showSizeChanger ? /* @__PURE__ */ jsxs46("div", { className: "aviala-pagination__size", children: [
+            /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: sizeLabel }),
+            /* @__PURE__ */ jsxs46(
               Select,
               {
                 value: String(pageSize),
                 onValueChange: (value) => setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx56(
                     SelectTrigger,
                     {
                       size: "regular",
@@ -10065,7 +10330,7 @@ var Pagination = forwardRef41(
                       "aria-label": "Page size"
                     }
                   ),
-                  /* @__PURE__ */ jsx54(SelectContent, { children: /* @__PURE__ */ jsx54(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx56(SelectContent, { children: /* @__PURE__ */ jsx56(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx56(
                     SelectItem,
                     {
                       value: String(option),
@@ -10095,9 +10360,9 @@ import {
   forwardRef as forwardRef42,
   isValidElement as isValidElement17
 } from "react";
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx57, jsxs as jsxs47 } from "react/jsx-runtime";
 var Card = forwardRef42(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx55("div", { ref, className: cn("aviala-card", className), ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx57("div", { ref, className: cn("aviala-card", className), ...props, children })
 );
 Card.displayName = "Card";
 function renderCardIcon(node) {
@@ -10110,7 +10375,7 @@ function renderCardIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx55("span", { className: "aviala-card-head__icon", children: content });
+  return /* @__PURE__ */ jsx57("span", { className: "aviala-card-head__icon", children: content });
 }
 var CardHead = forwardRef42(
   ({
@@ -10128,38 +10393,38 @@ var CardHead = forwardRef42(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ jsx55(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx55(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ jsx57(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx57(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (slotType) {
         case "action":
-          return /* @__PURE__ */ jsxs45("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ jsxs47("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ jsx55(
+            secondaryAction ?? /* @__PURE__ */ jsx57(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ jsx55(GeneralSetting2, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx57(GeneralSetting2, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsx55("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx55(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ jsx57("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx57(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
           ] });
         case "switch":
-          return /* @__PURE__ */ jsxs45("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ jsxs47("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx55("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx55(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx57("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx57(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return select != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-card-head__trailing", children: select }) : null;
+          return select != null ? /* @__PURE__ */ jsx57("div", { className: "aviala-card-head__trailing", children: select }) : null;
       }
     };
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs47(
       "div",
       {
         ref,
@@ -10167,9 +10432,9 @@ var CardHead = forwardRef42(
         "data-type": slotType,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs45("div", { className: "aviala-card-head__main", children: [
-            renderCardIcon(icon ?? /* @__PURE__ */ jsx55(GeneralSetting2, { "aria-hidden": true })),
-            /* @__PURE__ */ jsx55("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ jsx55(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
+          /* @__PURE__ */ jsxs47("div", { className: "aviala-card-head__main", children: [
+            renderCardIcon(icon ?? /* @__PURE__ */ jsx57(GeneralSetting2, { "aria-hidden": true })),
+            /* @__PURE__ */ jsx57("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ jsx57(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
           ] }),
           renderTrailing()
         ]
@@ -10179,7 +10444,7 @@ var CardHead = forwardRef42(
 );
 CardHead.displayName = "CardHead";
 var CardBody = forwardRef42(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx55("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ jsx55("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx55(Typography, { level: "text", as: "span", children }) : children }) })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx57("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ jsx57("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children }) : children }) })
 );
 CardBody.displayName = "CardBody";
 var CardBottom = forwardRef42(
@@ -10195,46 +10460,46 @@ var CardBottom = forwardRef42(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ jsx55(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx55(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ jsx57(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx57(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       if (children != null) return children;
       switch (slotType) {
         case "switch":
-          return /* @__PURE__ */ jsxs45(Fragment9, { children: [
+          return /* @__PURE__ */ jsxs47(Fragment9, { children: [
             primaryAction,
-            /* @__PURE__ */ jsx55("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx55(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx57("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx57(Switch, { ...switchProps })
           ] });
         case "select":
           return select;
         case "action":
         default:
-          return /* @__PURE__ */ jsxs45(Fragment9, { children: [
+          return /* @__PURE__ */ jsxs47(Fragment9, { children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ jsx55(
+            secondaryAction ?? /* @__PURE__ */ jsx57(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ jsx55(GeneralSetting2, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx57(GeneralSetting2, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsx55("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx55(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ jsx57("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx57(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
           ] });
       }
     };
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx57(
       "div",
       {
         ref,
         className: cn("aviala-card-bottom", className),
         "data-type": slotType,
         ...props,
-        children: /* @__PURE__ */ jsx55("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
+        children: /* @__PURE__ */ jsx57("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
       }
     );
   }
@@ -10247,9 +10512,9 @@ import {
   forwardRef as forwardRef43,
   isValidElement as isValidElement18
 } from "react";
-import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx58, jsxs as jsxs48 } from "react/jsx-runtime";
 var Table = forwardRef43(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx56(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx58(
     "div",
     {
       ref,
@@ -10262,7 +10527,7 @@ var Table = forwardRef43(
 );
 Table.displayName = "Table";
 var TableRow = forwardRef43(
-  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ jsx56(
+  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ jsx58(
     "div",
     {
       ref,
@@ -10276,7 +10541,7 @@ var TableRow = forwardRef43(
 );
 TableRow.displayName = "TableRow";
 var TableHead = forwardRef43(
-  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ jsx56(
+  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ jsx58(
     "div",
     {
       ref,
@@ -10284,7 +10549,7 @@ var TableHead = forwardRef43(
       className: cn("aviala-table-head", className),
       "data-content": content,
       ...props,
-      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx56(Typography, { level: "caption", as: "span", children }) : children
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx58(Typography, { level: "caption", as: "span", children }) : children
     }
   )
 );
@@ -10299,7 +10564,7 @@ function renderCellIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx56("span", { className: "aviala-table-cell__icon", children: content });
+  return /* @__PURE__ */ jsx58("span", { className: "aviala-table-cell__icon", children: content });
 }
 var TableCell = forwardRef43(
   ({
@@ -10320,29 +10585,29 @@ var TableCell = forwardRef43(
       if (children != null) return children;
       switch (content) {
         case "checkbox":
-          return /* @__PURE__ */ jsx56(Checkbox, { ...checkboxProps });
+          return /* @__PURE__ */ jsx58(Checkbox, { ...checkboxProps });
         case "icon+text":
-          return /* @__PURE__ */ jsxs46(Fragment10, { children: [
+          return /* @__PURE__ */ jsxs48(Fragment10, { children: [
             renderCellIcon(icon),
-            /* @__PURE__ */ jsx56("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: text }) })
+            /* @__PURE__ */ jsx58("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "people":
-          return /* @__PURE__ */ jsxs46(Fragment10, { children: [
-            people ?? /* @__PURE__ */ jsx56(Avatar, { content: "text", level: "text", children: "A" }),
-            /* @__PURE__ */ jsx56("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: text }) })
+          return /* @__PURE__ */ jsxs48(Fragment10, { children: [
+            people ?? /* @__PURE__ */ jsx58(Avatar, { content: "text", level: "text", children: "A" }),
+            /* @__PURE__ */ jsx58("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "badge":
-          return badge ?? /* @__PURE__ */ jsx56(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
+          return badge ?? /* @__PURE__ */ jsx58(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
         case "switch":
-          return /* @__PURE__ */ jsx56(Switch, { ...switchProps });
+          return /* @__PURE__ */ jsx58(Switch, { ...switchProps });
         case "action":
-          return /* @__PURE__ */ jsx56("div", { className: "aviala-table-cell__actions", children: actions });
+          return /* @__PURE__ */ jsx58("div", { className: "aviala-table-cell__actions", children: actions });
         case "text":
         default:
-          return /* @__PURE__ */ jsx56("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: text }) });
+          return /* @__PURE__ */ jsx58("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children: text }) });
       }
     };
-    return /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx58(
       "div",
       {
         ref,
@@ -10403,6 +10668,7 @@ export {
   Feedback,
   Fieldset,
   FormField,
+  HoverPopover,
   Input,
   InputGroup,
   InputGroupAddon,
@@ -10453,6 +10719,7 @@ export {
   RadioGroup,
   RadioGroupItem,
   RadioInput,
+  ResponsiveTooltip,
   Scroll,
   ScrollPicker,
   ScrollPickerColumn,