@aviala-design/spiral 2.0.0 → 2.2.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
@@ -652,6 +657,25 @@ import {
   useState as useState2
 } from "react";
 
+// src/lib/render-slot-icon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function renderSlotIcon(node, className, debugId) {
+  if (!node) return null;
+  const content = cloneAvialaIconElement(node, {
+    level: "text",
+    biggerSize: true
+  });
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      className,
+      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
+      ...debugId ? spiralDebugId(debugId) : void 0,
+      children: content
+    }
+  );
+}
+
 // src/components/badge.tsx
 import { cva as cva4 } from "class-variance-authority";
 import {
@@ -660,7 +684,7 @@ import {
   isValidElement as isValidElement4
 } from "react";
 import { resolveIconSizeToken as resolveIconSizeToken3 } from "@aviala-design/icons";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var badgeVariants = cva4("aviala-badge", {
   variants: {
     style: {
@@ -717,7 +741,7 @@ function renderBadgeIcon(node, level) {
       )
     }
   ) : node;
-  return /* @__PURE__ */ jsx5("span", { className: "aviala-badge__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx6("span", { className: "aviala-badge__icon", "aria-hidden": true, children: content });
 }
 var Badge = forwardRef4(
   ({
@@ -756,7 +780,7 @@ var Badge = forwardRef4(
         ...props,
         children: [
           renderBadgeIcon(leftIcon, resolvedLevel),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             Typography,
             {
               level: typographyLevel,
@@ -775,7 +799,7 @@ var Badge = forwardRef4(
 Badge.displayName = "Badge";
 
 // src/components/input.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function resolveInputState(value, defaultValue, focused) {
   const current = value ?? defaultValue ?? "";
   if (String(current).length === 0) return "empty";
@@ -792,25 +816,9 @@ var inputRootVariants = cva5("aviala-input relative min-w-0 font-sans", {
     fullWidth: true
   }
 });
-function renderSlotIcon(node, debugId) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ jsx6(
-    "span",
-    {
-      className: "aviala-input__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      ...debugId ? spiralDebugId(debugId) : void 0,
-      children: content
-    }
-  );
-}
 function renderBadgeArea(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ jsx6("span", { className: "aviala-input__badge-area", children: isValidElement5(node) && node.type === Badge ? node : /* @__PURE__ */ jsx6(Badge, { children: node }) });
+  return /* @__PURE__ */ jsx7("span", { className: "aviala-input__badge-area", children: isValidElement5(node) && node.type === Badge ? node : /* @__PURE__ */ jsx7(Badge, { children: node }) });
 }
 var Input = forwardRef5(
   ({
@@ -847,14 +855,14 @@ var Input = forwardRef5(
         "data-disabled": disabled ? "true" : void 0,
         ...spiralDebugId("input"),
         children: [
-          renderSlotIcon(leftIcon, "input.left-icon"),
+          renderSlotIcon(leftIcon, "aviala-input__slot", "input.left-icon"),
           renderBadgeArea(leftBadge),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "div",
             {
               className: "aviala-input__field relative z-[1] flex min-w-0 flex-1 flex-col justify-center",
               ...spiralDebugId("input.field"),
-              children: /* @__PURE__ */ jsx6(
+              children: /* @__PURE__ */ jsx7(
                 "input",
                 {
                   ref,
@@ -888,7 +896,7 @@ var Input = forwardRef5(
             }
           ),
           renderBadgeArea(rightBadge),
-          renderSlotIcon(rightIcon, "input.right-icon")
+          renderSlotIcon(rightIcon, "aviala-input__slot", "input.right-icon")
         ]
       }
     );
@@ -907,7 +915,7 @@ import {
   useRef,
   useState as useState3
 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function assignRef(ref, value) {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -949,25 +957,9 @@ function decimalPlaces(n) {
   const i = text.indexOf(".");
   return i === -1 ? 0 : text.length - i - 1;
 }
-function renderSlotIcon2(node, debugId) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ jsx7(
-    "span",
-    {
-      className: "aviala-input__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      ...debugId ? spiralDebugId(debugId) : void 0,
-      children: content
-    }
-  );
-}
 function renderBadgeArea2(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ jsx7("span", { className: "aviala-input__badge-area", children: isValidElement6(node) && node.type === Badge ? node : /* @__PURE__ */ jsx7(Badge, { children: node }) });
+  return /* @__PURE__ */ jsx8("span", { className: "aviala-input__badge-area", children: isValidElement6(node) && node.type === Badge ? node : /* @__PURE__ */ jsx8(Badge, { children: node }) });
 }
 var numberInputRootVariants = inputRootVariants;
 var NumberInput = forwardRef6(
@@ -1036,14 +1028,14 @@ var NumberInput = forwardRef6(
         "data-disabled": disabled ? "true" : void 0,
         ...spiralDebugId("number-input"),
         children: [
-          renderSlotIcon2(leftIcon, "number-input.left-icon"),
+          renderSlotIcon(leftIcon, "aviala-input__slot", "number-input.left-icon"),
           renderBadgeArea2(leftBadge),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "div",
             {
               className: "aviala-input__field relative z-[1] flex min-w-0 flex-1 flex-col justify-center",
               ...spiralDebugId("number-input.field"),
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 "input",
                 {
                   ref: (node) => {
@@ -1101,14 +1093,14 @@ var NumberInput = forwardRef6(
             }
           ),
           renderBadgeArea2(rightBadge),
-          renderSlotIcon2(rightIcon, "number-input.right-icon"),
+          renderSlotIcon(rightIcon, "aviala-input__slot", "number-input.right-icon"),
           showControls ? /* @__PURE__ */ jsxs4(
             "div",
             {
               className: "aviala-number-input__controls",
               ...spiralDebugId("number-input.controls"),
               children: [
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -1119,10 +1111,10 @@ var NumberInput = forwardRef6(
                     onMouseDown: (event) => event.preventDefault(),
                     onClick: () => applyStep(1),
                     ...spiralDebugId("number-input.step-up"),
-                    children: /* @__PURE__ */ jsx7(DirectionArrowUpLight, { level: "text", biggerSize: true, "aria-hidden": true })
+                    children: /* @__PURE__ */ jsx8(DirectionArrowUpLight, { level: "text", biggerSize: true, "aria-hidden": true })
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -1133,7 +1125,7 @@ var NumberInput = forwardRef6(
                     onMouseDown: (event) => event.preventDefault(),
                     onClick: () => applyStep(-1),
                     ...spiralDebugId("number-input.step-down"),
-                    children: /* @__PURE__ */ jsx7(DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
+                    children: /* @__PURE__ */ jsx8(DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
                   }
                 )
               ]
@@ -1155,7 +1147,7 @@ import {
   useRef as useRef2,
   useState as useState4
 } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function assignRef2(ref, value) {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -1169,22 +1161,6 @@ function resolveTextareaState(value, defaultValue, focused) {
   if (String(current).length === 0) return "empty";
   return focused ? "typing" : "fill";
 }
-function renderSlotIcon3(node, debugId) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ jsx8(
-    "span",
-    {
-      className: "aviala-textarea__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      ...debugId ? spiralDebugId(debugId) : void 0,
-      children: content
-    }
-  );
-}
 var Textarea = forwardRef7(
   ({
     className,
@@ -1296,8 +1272,8 @@ var Textarea = forwardRef7(
         onMouseDown: handleShellMouseDown,
         ...spiralDebugId("textarea"),
         children: [
-          renderSlotIcon3(leftIcon, "textarea.left-icon"),
-          /* @__PURE__ */ jsx8("div", { className: "aviala-textarea__field", ...spiralDebugId("textarea.field"), children: /* @__PURE__ */ jsx8(
+          renderSlotIcon(leftIcon, "aviala-textarea__slot", "textarea.left-icon"),
+          /* @__PURE__ */ jsx9("div", { className: "aviala-textarea__field", ...spiralDebugId("textarea.field"), children: /* @__PURE__ */ jsx9(
             "textarea",
             {
               ref: setTextareaRef,
@@ -1324,7 +1300,7 @@ var Textarea = forwardRef7(
               ...props
             }
           ) }),
-          renderSlotIcon3(rightIcon, "textarea.right-icon"),
+          renderSlotIcon(rightIcon, "aviala-textarea__slot", "textarea.right-icon"),
           showController ? /* @__PURE__ */ jsxs5("div", { className: "aviala-textarea__controller", ...spiralDebugId("textarea.controller"), children: [
             /* @__PURE__ */ jsxs5(
               "span",
@@ -1337,7 +1313,7 @@ var Textarea = forwardRef7(
                 ]
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1347,7 +1323,7 @@ var Textarea = forwardRef7(
                 tabIndex: disabled ? -1 : 0,
                 onPointerDown: handleResizePointerDown,
                 ...spiralDebugId("textarea.resize"),
-                children: /* @__PURE__ */ jsx8(SymbolResize, { thickness: "Regular", mode: "default", "aria-hidden": true })
+                children: /* @__PURE__ */ jsx9(SymbolResize, { thickness: "Regular", mode: "default", "aria-hidden": true })
               }
             )
           ] }) : null
@@ -1386,7 +1362,7 @@ import { Slot as Slot3 } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef8
 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var levelStyles = {
   caption: {
     className: typographyVariants({ level: "caption" }),
@@ -1405,7 +1381,7 @@ function renderIcon2(node, level) {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       className: cn(
@@ -1446,7 +1422,7 @@ var Link = forwardRef8(
       onClick?.(e);
     };
     if (asChild) {
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         Comp,
         {
           className: sharedClassName,
@@ -1476,7 +1452,7 @@ var Link = forwardRef8(
         onClick: handleClick,
         children: [
           renderIcon2(leftIcon ?? (iconOnly ? rightIcon : void 0), resolvedLevel),
-          !iconOnly && children !== void 0 && children !== null && /* @__PURE__ */ jsx9(
+          !iconOnly && children !== void 0 && children !== null && /* @__PURE__ */ jsx10(
             "span",
             {
               className: cn(
@@ -1495,7 +1471,7 @@ var Link = forwardRef8(
 Link.displayName = "Link";
 
 // src/components/select.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var SELECT_SUB_MENU_CLOSE_DELAY_MS = 250;
 var SELECT_SUB_MENU_EXIT_ANIM_MS = 150;
 var SelectSubMenuContext = createContext2(null);
@@ -1729,29 +1705,13 @@ function parseSelectSubItemChildren(children) {
 function isWithinSelectSubLayer(target) {
   return target instanceof Element && target.closest(".aviala-select-sub-content") !== null;
 }
-function renderSlotIcon4(node, debugId) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ jsx10(
-    "span",
-    {
-      className: "aviala-select-trigger__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      ...debugId ? spiralDebugId(debugId) : void 0,
-      children: content
-    }
-  );
-}
 function renderItemIcon(node, iconLevel = "text", debugId) {
   if (!node) return null;
   const content = cloneAvialaIconElement(node, {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "span",
     {
       className: cn(
@@ -1766,16 +1726,16 @@ function renderItemIcon(node, iconLevel = "text", debugId) {
 }
 function renderBadgeSlot(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ jsx10("span", { className: "aviala-select-item__badge", children: isValidElement7(node) && node.type === Badge ? node : /* @__PURE__ */ jsx10(Badge, { children: node }) });
+  return /* @__PURE__ */ jsx11("span", { className: "aviala-select-item__badge", children: isValidElement7(node) && node.type === Badge ? node : /* @__PURE__ */ jsx11(Badge, { children: node }) });
 }
 function SelectItemFormRadio() {
   return /* @__PURE__ */ jsxs7("span", { className: "aviala-select-item__form-radio", "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx10("span", { className: "aviala-select-item__form-radio-surface" }),
-    /* @__PURE__ */ jsx10("span", { className: "aviala-select-item__form-radio-indicator" })
+    /* @__PURE__ */ jsx11("span", { className: "aviala-select-item__form-radio-surface" }),
+    /* @__PURE__ */ jsx11("span", { className: "aviala-select-item__form-radio-indicator" })
   ] });
 }
 function SelectItemFormCheckbox() {
-  return /* @__PURE__ */ jsx10("span", { className: "aviala-select-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11("span", { className: "aviala-select-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx11(
     SymbolRight,
     {
       className: "aviala-select-item__form-checkbox-icon",
@@ -1786,20 +1746,20 @@ function SelectItemFormCheckbox() {
   ) });
 }
 function SelectItemTrailingRadio() {
-  return /* @__PURE__ */ jsx10(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ jsx10(SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx11(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ jsx11(SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function SelectItemTrailingCheckbox() {
-  return /* @__PURE__ */ jsx10(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx10(SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx11(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx11(SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function SelectItemDefaultAvatar() {
-  return /* @__PURE__ */ jsx10("span", { className: "aviala-select-item__avatar", "aria-hidden": true, children: /* @__PURE__ */ jsx10(UsersUserCircle, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx11("span", { className: "aviala-select-item__avatar", "aria-hidden": true, children: /* @__PURE__ */ jsx11(UsersUserCircle, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function renderFunctionSlot(itemFunction, layout, showFunctionIcon, icon) {
   if (!showFunctionIcon) return null;
   if (layout === "checked") return null;
   const functionStyle = icon ? iconSlotCssVarStyle(icon, "--select-item-function-icon-size", "text", true) : void 0;
   if (icon !== void 0) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "span",
       {
         className: "aviala-select-item__function",
@@ -1811,19 +1771,19 @@ function renderFunctionSlot(itemFunction, layout, showFunctionIcon, icon) {
   }
   switch (itemFunction) {
     case "radio":
-      return /* @__PURE__ */ jsx10("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ jsx10(SelectItemTrailingRadio, {}) });
+      return /* @__PURE__ */ jsx11("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ jsx11(SelectItemTrailingRadio, {}) });
     case "checkbox":
-      return /* @__PURE__ */ jsx10("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ jsx10(SelectItemTrailingCheckbox, {}) });
+      return /* @__PURE__ */ jsx11("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ jsx11(SelectItemTrailingCheckbox, {}) });
     case "simple":
     case "action":
     default:
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         "span",
         {
           className: "aviala-select-item__function",
           style: iconLevelCssVarStyle("text", true, "--select-item-function-icon-size"),
           ...spiralDebugId("select.content.item.function"),
-          children: /* @__PURE__ */ jsx10(DirectionArrowRight, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ jsx11(DirectionArrowRight, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       );
   }
@@ -1876,7 +1836,7 @@ function Select({
     },
     [isControlled, onOpenChange]
   );
-  return /* @__PURE__ */ jsx10(SelectDismissContext.Provider, { value: dismissContextValue, children: /* @__PURE__ */ jsx10(SelectPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
+  return /* @__PURE__ */ jsx11(SelectDismissContext.Provider, { value: dismissContextValue, children: /* @__PURE__ */ jsx11(SelectPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
 }
 var SelectValue = SelectPrimitive.Value;
 var SelectGroup = SelectPrimitive.Group;
@@ -1911,7 +1871,7 @@ function wrapUngroupedSelectItems(children) {
   const flushBareItems = () => {
     if (bareItems.length === 0) return;
     wrapped.push(
-      /* @__PURE__ */ jsx10(SelectGroup, { className: "aviala-select-group", children: /* @__PURE__ */ jsx10("div", { className: "aviala-select-group__slot", children: bareItems }) }, `__select-auto-group-${autoGroupIndex++}`)
+      /* @__PURE__ */ jsx11(SelectGroup, { className: "aviala-select-group", children: /* @__PURE__ */ jsx11("div", { className: "aviala-select-group__slot", children: bareItems }) }, `__select-auto-group-${autoGroupIndex++}`)
     );
     bareItems = [];
   };
@@ -1962,8 +1922,8 @@ var SelectTrigger = forwardRef9(
         ...spiralDebugId("select.trigger"),
         ...props,
         children: [
-          renderSlotIcon4(leftIcon, "select.trigger.icon-left"),
-          /* @__PURE__ */ jsx10("span", { className: "aviala-select-trigger__field", children: /* @__PURE__ */ jsx10(
+          renderSlotIcon(leftIcon, "aviala-select-trigger__slot", "select.trigger.icon-left"),
+          /* @__PURE__ */ jsx11("span", { className: "aviala-select-trigger__field", children: /* @__PURE__ */ jsx11(
             SelectPrimitive.Value,
             {
               placeholder,
@@ -1971,15 +1931,15 @@ var SelectTrigger = forwardRef9(
               ...spiralDebugId("select.trigger.value")
             }
           ) }),
-          renderSlotIcon4(rightIcon, "select.trigger.icon-right"),
-          /* @__PURE__ */ jsx10(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx10(
+          renderSlotIcon(rightIcon, "aviala-select-trigger__slot", "select.trigger.icon-right"),
+          /* @__PURE__ */ jsx11(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx11(
             "span",
             {
               className: "aviala-select-trigger__expand",
               "aria-hidden": true,
               style: expandIcon ? iconSlotCssVarStyle(expandIcon, "--input-slot-icon-size", "text", true) : iconLevelCssVarStyle("text", true, "--input-slot-icon-size"),
               ...spiralDebugId("select.trigger.expand"),
-              children: expandIcon ?? /* @__PURE__ */ jsx10(
+              children: expandIcon ?? /* @__PURE__ */ jsx11(
                 DirectionArrowDownLight2,
                 {
                   className: "aviala-select-trigger__expand-icon",
@@ -2022,7 +1982,7 @@ var SelectContent = forwardRef9(
         dismissContext.pointerDownCloseRef.current = false;
       }
     };
-    const content = /* @__PURE__ */ jsx10(SelectSubMenuContext.Provider, { value: subMenuLayer, children: /* @__PURE__ */ jsx10(
+    const content = /* @__PURE__ */ jsx11(SelectSubMenuContext.Provider, { value: subMenuLayer, children: /* @__PURE__ */ jsx11(
       SelectPrimitive.Content,
       {
         ref,
@@ -2032,7 +1992,7 @@ var SelectContent = forwardRef9(
         onCloseAutoFocus: handleCloseAutoFocus,
         ...spiralDebugId("select.content"),
         ...props,
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx11(
           SelectPrimitive.Viewport,
           {
             className: "aviala-select-viewport",
@@ -2043,11 +2003,11 @@ var SelectContent = forwardRef9(
       }
     ) });
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx10(SelectPrimitive.Portal, { children: content });
+    return /* @__PURE__ */ jsx11(SelectPrimitive.Portal, { children: content });
   }
 );
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = forwardRef9(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var SelectLabel = forwardRef9(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   SelectPrimitive.Label,
   {
     ref,
@@ -2083,15 +2043,15 @@ var SelectItem = forwardRef9(
     const showTrailingFunction = showFunctionIcon && layout !== "checked" && itemFunction !== "form-radio" && itemFunction !== "form-checkbox";
     const textLevel = isTitle ? "caption" : "text";
     const textContent = isPeople ? /* @__PURE__ */ jsxs7("span", { className: "aviala-select-item__content", children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         SelectPrimitive.ItemText,
         {
           className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })),
           children
         }
       ),
-      subtitle != null && subtitle !== false ? /* @__PURE__ */ jsx10("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
-    ] }) : /* @__PURE__ */ jsx10(
+      subtitle != null && subtitle !== false ? /* @__PURE__ */ jsx11("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
+    ] }) : /* @__PURE__ */ jsx11(
       SelectPrimitive.ItemText,
       {
         className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })),
@@ -2108,14 +2068,14 @@ var SelectItem = forwardRef9(
         ...spiralDebugId("select.content.item"),
         ...props,
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx10(SelectItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx10(SelectItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx11(SelectItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx11(SelectItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon(leftIcon, leftIconLevel, "select.content.item.icon-left") : null,
-          isPeople ? avatar ?? /* @__PURE__ */ jsx10(SelectItemDefaultAvatar, {}) : null,
+          isPeople ? avatar ?? /* @__PURE__ */ jsx11(SelectItemDefaultAvatar, {}) : null,
           textContent,
           showBadge ? renderBadgeSlot(badge ?? "Text") : null,
           showRightIcon && rightIcon ? renderItemIcon(rightIcon, leftIconLevel, "select.content.item.icon-right") : null,
-          showMoreFunction ? /* @__PURE__ */ jsx10("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ jsx10(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
+          showMoreFunction ? /* @__PURE__ */ jsx11("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ jsx11(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
           renderFunctionSlot(itemFunction, layout, showTrailingFunction, icon)
         ]
       }
@@ -2192,9 +2152,9 @@ var SelectSubItem = forwardRef9(
     const showTrailingFunction = showFunctionIcon && layout !== "checked" && itemFunction !== "form-radio" && itemFunction !== "form-checkbox";
     const textLevel = isTitle ? "caption" : "text";
     const textContent = isPeople ? /* @__PURE__ */ jsxs7("span", { className: "aviala-select-item__content", children: [
-      /* @__PURE__ */ jsx10("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren }),
-      subtitle != null && subtitle !== false ? /* @__PURE__ */ jsx10("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
-    ] }) : /* @__PURE__ */ jsx10("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren });
+      /* @__PURE__ */ jsx11("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren }),
+      subtitle != null && subtitle !== false ? /* @__PURE__ */ jsx11("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
+    ] }) : /* @__PURE__ */ jsx11("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren });
     const handleTriggerBlur = (event) => {
       scheduleCloseSubItem(subItemId, event.relatedTarget);
     };
@@ -2230,19 +2190,19 @@ var SelectSubItem = forwardRef9(
         onBlur: handleTriggerBlur,
         onKeyDown: handleKeyDown,
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx10(SelectItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx10(SelectItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx11(SelectItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx11(SelectItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon(leftIcon, leftIconLevel) : null,
-          isPeople ? avatar ?? /* @__PURE__ */ jsx10(SelectItemDefaultAvatar, {}) : null,
+          isPeople ? avatar ?? /* @__PURE__ */ jsx11(SelectItemDefaultAvatar, {}) : null,
           textContent,
           showBadge ? renderBadgeSlot(badge ?? "Text") : null,
           showRightIcon && rightIcon ? renderItemIcon(rightIcon, leftIconLevel) : null,
-          showMoreFunction ? /* @__PURE__ */ jsx10("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ jsx10(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
+          showMoreFunction ? /* @__PURE__ */ jsx11("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ jsx11(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
           renderFunctionSlot(itemFunction, layout, showTrailingFunction, icon)
         ]
       }
     );
-    const flyout = /* @__PURE__ */ jsx10(
+    const flyout = /* @__PURE__ */ jsx11(
       PopoverPrimitive.Content,
       {
         ref: contentRef,
@@ -2260,10 +2220,10 @@ var SelectSubItem = forwardRef9(
         onPointerEnter: handleOpen,
         onPointerLeave: handlePointerLeave,
         onPointerDownOutside: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ jsx10("div", { className: "aviala-select-viewport aviala-select-sub-content__viewport", children: wrapUngroupedSelectItems(subMenu.children) })
+        children: /* @__PURE__ */ jsx11("div", { className: "aviala-select-viewport aviala-select-sub-content__viewport", children: wrapUngroupedSelectItems(subMenu.children) })
       }
     );
-    return /* @__PURE__ */ jsx10(PopoverPrimitive.Root, { open, modal: false, children: /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsx11(PopoverPrimitive.Root, { open, modal: false, children: /* @__PURE__ */ jsxs7(
       "div",
       {
         ref: (node) => {
@@ -2278,8 +2238,8 @@ var SelectSubItem = forwardRef9(
         onPointerEnter: handleOpen,
         onPointerLeave: handlePointerLeave,
         children: [
-          /* @__PURE__ */ jsx10(PopoverPrimitive.Anchor, { asChild: true, children: itemRow }),
-          portalled ? /* @__PURE__ */ jsx10(PopoverPrimitive.Portal, { children: flyout }) : flyout
+          /* @__PURE__ */ jsx11(PopoverPrimitive.Anchor, { asChild: true, children: itemRow }),
+          portalled ? /* @__PURE__ */ jsx11(PopoverPrimitive.Portal, { children: flyout }) : flyout
         ]
       }
     ) });
@@ -2287,12 +2247,12 @@ var SelectSubItem = forwardRef9(
 );
 SelectSubItem.displayName = "SelectSubItem";
 var SelectSubItemPeople = forwardRef9(
-  (props, ref) => /* @__PURE__ */ jsx10(SelectSubItem, { ref, layout: "people", ...props })
+  (props, ref) => /* @__PURE__ */ jsx11(SelectSubItem, { ref, layout: "people", ...props })
 );
 SelectSubItemPeople.displayName = "SelectSubItemPeople";
-var SelectItemPeople = forwardRef9((props, ref) => /* @__PURE__ */ jsx10(SelectItem, { ref, layout: "people", ...props }));
+var SelectItemPeople = forwardRef9((props, ref) => /* @__PURE__ */ jsx11(SelectItem, { ref, layout: "people", ...props }));
 SelectItemPeople.displayName = "SelectItemPeople";
-var SelectSeparator = forwardRef9(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var SelectSeparator = forwardRef9(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2308,17 +2268,17 @@ function SelectItemGroup({
   className
 }) {
   return /* @__PURE__ */ jsxs7(SelectGroup, { className: cn("aviala-select-group", className), children: [
-    label ? /* @__PURE__ */ jsx10(SelectLabel, { children: label }) : null,
-    /* @__PURE__ */ jsx10("div", { className: "aviala-select-group__slot", children }),
-    showDivider ? /* @__PURE__ */ jsx10(SelectSeparator, {}) : null
+    label ? /* @__PURE__ */ jsx11(SelectLabel, { children: label }) : null,
+    /* @__PURE__ */ jsx11("div", { className: "aviala-select-group__slot", children }),
+    showDivider ? /* @__PURE__ */ jsx11(SelectSeparator, {}) : null
   ] });
 }
 
 // src/components/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Label2 = forwardRef10(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Label2 = forwardRef10(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   LabelPrimitive.Root,
   {
     ref,
@@ -2339,7 +2299,7 @@ import {
   forwardRef as forwardRef11,
   isValidElement as isValidElement8
 } from "react";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var avatarVariants = cva6("aviala-avatar", {
   variants: {
     level: {
@@ -2412,7 +2372,7 @@ var Avatar = forwardRef11(
   }, ref) => {
     const resolvedLevel = level ?? "text";
     const resolvedContent = content ?? "text";
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "span",
       {
         ref,
@@ -2429,7 +2389,7 @@ var Avatar = forwardRef11(
         "data-line-height-fix": lineHeightFix ? "true" : "false",
         ...props,
         children: /* @__PURE__ */ jsxs8("span", { className: "aviala-avatar__surface", children: [
-          resolvedContent === "picture" && src ? /* @__PURE__ */ jsx12(
+          resolvedContent === "picture" && src ? /* @__PURE__ */ jsx13(
             "img",
             {
               className: "aviala-avatar__image",
@@ -2438,8 +2398,8 @@ var Avatar = forwardRef11(
               ...imgProps
             }
           ) : null,
-          resolvedContent === "icon" ? /* @__PURE__ */ jsx12("span", { className: "aviala-avatar__icon", "aria-hidden": true, children: renderAvatarIcon(icon, resolvedLevel) }) : null,
-          resolvedContent === "text" ? /* @__PURE__ */ jsx12(
+          resolvedContent === "icon" ? /* @__PURE__ */ jsx13("span", { className: "aviala-avatar__icon", "aria-hidden": true, children: renderAvatarIcon(icon, resolvedLevel) }) : null,
+          resolvedContent === "text" ? /* @__PURE__ */ jsx13(
             Typography,
             {
               level: AVATAR_TEXT_LEVEL[resolvedLevel],
@@ -2463,7 +2423,7 @@ import {
   forwardRef as forwardRef12,
   isValidElement as isValidElement9
 } from "react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var tagVariants = cva7("aviala-tag", {
   variants: {
     level: {
@@ -2511,17 +2471,17 @@ function renderTagIcon(node, level) {
       )
     }
   ) : node;
-  return /* @__PURE__ */ jsx13("span", { className: "aviala-tag__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx14("span", { className: "aviala-tag__icon", "aria-hidden": true, children: content });
 }
 var TagClose = forwardRef12(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx13(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx14(
     "button",
     {
       ref,
       type: "button",
       className: cn("aviala-tag__close aviala-focus-ring", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx13(SymbolWrong, { "aria-hidden": true, width: 14, height: 14 })
+      children: children ?? /* @__PURE__ */ jsx14(SymbolWrong, { "aria-hidden": true, width: 14, height: 14 })
     }
   )
 );
@@ -2548,7 +2508,7 @@ var Tag = forwardRef12(
     const resolvedContent = content ?? "text";
     const resolvedLhf = resolveLineHeightFix2(resolvedLevel, lineHeightFix);
     const typographyLevel = resolvedLevel;
-    const peopleAvatar = avatar ?? (avatarSrc ? /* @__PURE__ */ jsx13(Avatar, { level: "text", content: "picture", src: avatarSrc, lineHeightFix: false }) : /* @__PURE__ */ jsx13(Avatar, { level: "text", content: "text", lineHeightFix: false, children: avatarText ?? (typeof children === "string" ? children.charAt(0) : "?") }));
+    const peopleAvatar = avatar ?? (avatarSrc ? /* @__PURE__ */ jsx14(Avatar, { level: "text", content: "picture", src: avatarSrc, lineHeightFix: false }) : /* @__PURE__ */ jsx14(Avatar, { level: "text", content: "text", lineHeightFix: false, children: avatarText ?? (typeof children === "string" ? children.charAt(0) : "?") }));
     return /* @__PURE__ */ jsxs9(
       "span",
       {
@@ -2568,8 +2528,8 @@ var Tag = forwardRef12(
         "aria-disabled": disabled || void 0,
         ...props,
         children: [
-          resolvedContent === "people" ? /* @__PURE__ */ jsx13("span", { className: "aviala-tag__avatar", children: peopleAvatar }) : renderTagIcon(leftIcon, resolvedLevel),
-          /* @__PURE__ */ jsx13(
+          resolvedContent === "people" ? /* @__PURE__ */ jsx14("span", { className: "aviala-tag__avatar", children: peopleAvatar }) : renderTagIcon(leftIcon, resolvedLevel),
+          /* @__PURE__ */ jsx14(
             Typography,
             {
               level: typographyLevel,
@@ -2579,7 +2539,7 @@ var Tag = forwardRef12(
             }
           ),
           resolvedContent === "text" ? renderTagIcon(rightIcon, resolvedLevel) : null,
-          closable ? /* @__PURE__ */ jsx13(
+          closable ? /* @__PURE__ */ jsx14(
             TagClose,
             {
               "aria-label": closeLabel,
@@ -2600,7 +2560,7 @@ Tag.displayName = "Tag";
 // src/components/progress.tsx
 import { cva as cva8 } from "class-variance-authority";
 import { forwardRef as forwardRef13 } from "react";
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var progressVariants = cva8("aviala-progress", {
   variants: {
     type: {
@@ -2649,7 +2609,7 @@ var Progress = forwardRef13(
     const normalizedRadius = radius - stroke;
     const circumference = normalizedRadius * 2 * Math.PI;
     const strokeDashoffset = circumference - percent / 100 * circumference;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         ref,
@@ -2671,14 +2631,14 @@ var Progress = forwardRef13(
         "data-shape": resolvedShape,
         ...props,
         children: resolvedShape === "bar" ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
-          /* @__PURE__ */ jsx14("div", { className: "aviala-progress__track", children: /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15("div", { className: "aviala-progress__track", children: /* @__PURE__ */ jsx15(
             "div",
             {
               className: "aviala-progress__fill",
               style: { width: `${percent}%` }
             }
           ) }),
-          showLabel ? /* @__PURE__ */ jsx14(
+          showLabel ? /* @__PURE__ */ jsx15(
             Typography,
             {
               level: "caption",
@@ -2697,7 +2657,7 @@ var Progress = forwardRef13(
             viewBox: `0 0 ${radius * 2} ${radius * 2}`,
             "aria-hidden": true,
             children: [
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "circle",
                 {
                   className: "aviala-progress__ring-track",
@@ -2708,7 +2668,7 @@ var Progress = forwardRef13(
                   strokeWidth: stroke
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "circle",
                 {
                   className: "aviala-progress__ring-fill",
@@ -2735,7 +2695,7 @@ Progress.displayName = "Progress";
 // src/components/scroll.tsx
 import { cva as cva9 } from "class-variance-authority";
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var scrollVariants = cva9("aviala-scroll", {
   variants: {
     size: {
@@ -2759,7 +2719,7 @@ var Scroll = forwardRef14(
     orientation = "vertical",
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsx15(
+  }, ref) => /* @__PURE__ */ jsx16(
     "div",
     {
       ref,
@@ -2787,7 +2747,7 @@ import {
 
 // src/components/typeface.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var typefaceLayouts = {
   allCustom: [
     { level: "text", children: null },
@@ -2831,11 +2791,11 @@ var Typeface = forwardRef15(
   }, ref) => {
     const layout = typefaceLayouts[content];
     const values = resolveTypefaceValues(content, primary, secondary, tertiary, children);
-    return /* @__PURE__ */ jsx16("div", { ref, className: cn("aviala-typeface", className), "data-content": content, ...props, children: layout.map((line, index) => {
+    return /* @__PURE__ */ jsx17("div", { ref, className: cn("aviala-typeface", className), "data-content": content, ...props, children: layout.map((line, index) => {
       const value = values[index];
       if (value === void 0 || value === null || value === false) return null;
       const lineContent = index === 0 ? primaryContent : index === 1 ? secondaryContent : tertiaryContent;
-      return /* @__PURE__ */ jsx16("span", { className: "aviala-typeface__line", children: /* @__PURE__ */ jsx16(Typography, { level: line.level, content: lineContent, tone, children: value }) }, `${line.level}-${index}`);
+      return /* @__PURE__ */ jsx17("span", { className: "aviala-typeface__line", children: /* @__PURE__ */ jsx17(Typography, { level: line.level, content: lineContent, tone, children: value }) }, `${line.level}-${index}`);
     }) });
   }
 );
@@ -2853,7 +2813,7 @@ function resolveTypefaceValues(content, primary, secondary, tertiary, children)
   return [children];
 }
 var TypefacePair = forwardRef15(
-  ({ title, description, ...props }, ref) => /* @__PURE__ */ jsx16(
+  ({ title, description, ...props }, ref) => /* @__PURE__ */ jsx17(
     Typeface,
     {
       ref,
@@ -2867,7 +2827,7 @@ var TypefacePair = forwardRef15(
 TypefacePair.displayName = "TypefacePair";
 
 // src/components/checkbox.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var Checkbox = forwardRef16(({ className, round = false, ...props }, ref) => /* @__PURE__ */ jsxs11(
   CheckboxPrimitive.Root,
   {
@@ -2876,9 +2836,9 @@ var Checkbox = forwardRef16(({ className, round = false, ...props }, ref) => /*
     "data-round": round ? "true" : void 0,
     ...props,
     children: [
-      /* @__PURE__ */ jsx17("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
+      /* @__PURE__ */ jsx18("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
       /* @__PURE__ */ jsxs11(CheckboxPrimitive.Indicator, { className: "aviala-checkbox__indicator", children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           SymbolRight2,
           {
             className: "aviala-checkbox__indicator-icon aviala-checkbox__indicator-icon--check",
@@ -2888,7 +2848,7 @@ var Checkbox = forwardRef16(({ className, round = false, ...props }, ref) => /*
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "span",
           {
             "aria-hidden": true,
@@ -2901,7 +2861,7 @@ var Checkbox = forwardRef16(({ className, round = false, ...props }, ref) => /*
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 var CheckboxGroup = forwardRef16(
-  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx17(
+  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx18(
     "div",
     {
       ref,
@@ -2923,7 +2883,7 @@ function renderIcon3(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx17("span", { className: "aviala-checkbox-input__icon", children: content });
+  return /* @__PURE__ */ jsx18("span", { className: "aviala-checkbox-input__icon", children: content });
 }
 var CheckboxInput = forwardRef16(
   ({
@@ -2941,9 +2901,9 @@ var CheckboxInput = forwardRef16(
       className: cn("aviala-checkbox-input", className),
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx17(Checkbox, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ jsx18(Checkbox, { ref, id, disabled, ...props }),
         renderIcon3(icon),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           TypefacePair,
           {
             className: "aviala-checkbox-input__content min-w-0 flex-1",
@@ -2964,8 +2924,8 @@ import {
   forwardRef as forwardRef17,
   isValidElement as isValidElement11
 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-var RadioGroup = forwardRef17(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx18(
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var RadioGroup = forwardRef17(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx19(
   RadioGroupPrimitive.Root,
   {
     className: cn("aviala-radio-group", className),
@@ -2982,8 +2942,8 @@ var RadioGroupItem = forwardRef17(({ className, ...props }, ref) => /* @__PURE__
     className: cn("aviala-radio aviala-focus-ring", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx18("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
-      /* @__PURE__ */ jsx18("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
+      /* @__PURE__ */ jsx19("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
+      /* @__PURE__ */ jsx19("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
     ]
   }
 ));
@@ -2999,7 +2959,7 @@ function renderIcon4(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx18("span", { className: "aviala-radio-input__icon", children: content });
+  return /* @__PURE__ */ jsx19("span", { className: "aviala-radio-input__icon", children: content });
 }
 var RadioInput = forwardRef17(
   ({
@@ -3019,9 +2979,9 @@ var RadioInput = forwardRef17(
       "data-style": variant,
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx18(RadioGroupItem, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ jsx19(RadioGroupItem, { ref, id, disabled, ...props }),
         renderIcon4(icon),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           TypefacePair,
           {
             className: "aviala-radio-input__content min-w-0 flex-1",
@@ -3038,7 +2998,7 @@ RadioInput.displayName = "RadioInput";
 // src/components/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var Switch = forwardRef18(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ jsxs13(
   SwitchPrimitive.Root,
   {
@@ -3050,8 +3010,8 @@ var Switch = forwardRef18(({ className, size = "regular", ...props }, ref) => /*
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx19("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
-      /* @__PURE__ */ jsx19(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
+      /* @__PURE__ */ jsx20("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
+      /* @__PURE__ */ jsx20(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
     ]
   }
 ));
@@ -3062,9 +3022,9 @@ import { Slot as Slot4 } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef19
 } from "react";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var Anchor2 = forwardRef19(
-  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ jsx20(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
+  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ jsx21(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
 );
 Anchor2.displayName = "Anchor";
 var AnchorItem = forwardRef19(
@@ -3086,8 +3046,8 @@ var AnchorItem = forwardRef19(
         "data-indent": String(indentLevel),
         ...props,
         children: [
-          /* @__PURE__ */ jsx20("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
-          /* @__PURE__ */ jsx20("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ jsx20(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
+          /* @__PURE__ */ jsx21("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
+          /* @__PURE__ */ jsx21("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ jsx21(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
         ]
       }
     );
@@ -3103,10 +3063,11 @@ import {
   useContext as useContext3,
   useEffect as useEffect3,
   useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo3,
   useRef as useRef4,
   useState as useState6
 } from "react";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var SegmentatorContext = createContext3(null);
 function useSegmentatorContext() {
   const ctx = useContext3(SegmentatorContext);
@@ -3121,7 +3082,7 @@ function renderIcon5(node, dimmed) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "span",
     {
       className: cn(
@@ -3136,10 +3097,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 +3148,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 +3379,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 +3387,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 +3449,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,24 +3526,25 @@ var SegmentatorGroup = forwardRef20(
         event.pointerId
       );
       writeThumbMetrics(metrics, false);
-      setDragPreviewValue(pressedValue);
+      applyDragPreview(group, pressedItem);
       setDragState({ pressing: true, active: false });
       group.setPointerCapture(event.pointerId);
     };
     const thumbStyle = thumb ? buildThumbStyle() : void 0;
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       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",
           {
@@ -3590,7 +3567,7 @@ var SegmentatorGroup = forwardRef20(
             onLostPointerCapture: finishPointerDrag,
             children: [
               children,
-              thumb && /* @__PURE__ */ jsx21(
+              thumb && /* @__PURE__ */ jsx22(
                 "span",
                 {
                   ref: onThumbRef,
@@ -3628,7 +3605,7 @@ var SegmentatorItem = forwardRef20(
     const isDisabled = disabled || ctx.disabled;
     const dimmed = isDisabled;
     const icon = iconOnly ? leftIcon ?? rightIcon : leftIcon;
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       "button",
       {
         ref,
@@ -3638,7 +3615,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),
@@ -3653,7 +3629,7 @@ var SegmentatorItem = forwardRef20(
         ...props,
         children: /* @__PURE__ */ jsxs15("span", { className: "aviala-segmentator-item__content", children: [
           renderIcon5(icon, dimmed && !!icon),
-          !iconOnly && /* @__PURE__ */ jsx21(
+          !iconOnly && /* @__PURE__ */ jsx22(
             "span",
             {
               className: cn(
@@ -3675,7 +3651,7 @@ SegmentatorItem.displayName = "SegmentatorItem";
 // src/components/form-field.tsx
 import { SymbolInformationCircle, SymbolWrongCircle } from "@aviala-design/icons";
 import { forwardRef as forwardRef21, useId as useId2 } from "react";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var FormField = forwardRef21(
   ({
     className,
@@ -3693,18 +3669,18 @@ var FormField = forwardRef21(
     const reactId = useId2();
     const labelId = `${reactId}-label`;
     const hasLabel = label != null && label !== "";
-    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ jsx22("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ jsx22(
+    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ jsx23("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ jsx23(
       Typeface,
       {
         id: labelId,
         content: "textCaption",
         primary: hasLabel ? /* @__PURE__ */ jsxs16(Fragment3, { children: [
           label,
-          required ? /* @__PURE__ */ jsx22("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+          required ? /* @__PURE__ */ jsx23("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
         ] }) : void 0,
         secondary: description
       }
-    ) }) : /* @__PURE__ */ jsx22(
+    ) }) : /* @__PURE__ */ jsx23(
       Typeface,
       {
         id: labelId,
@@ -3712,7 +3688,7 @@ var FormField = forwardRef21(
         content: "textCaption",
         primary: hasLabel ? /* @__PURE__ */ jsxs16(Fragment3, { children: [
           label,
-          required ? /* @__PURE__ */ jsx22("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+          required ? /* @__PURE__ */ jsx23("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
         ] }) : void 0,
         secondary: description
       }
@@ -3730,7 +3706,7 @@ var FormField = forwardRef21(
           /* @__PURE__ */ jsxs16("div", { className: "aviala-form__content", children: [
             children,
             error ? /* @__PURE__ */ jsxs16("div", { className: "aviala-form__message aviala-form__message--error", role: "alert", children: [
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 SymbolWrongCircle,
                 {
                   className: "aviala-form__message-icon",
@@ -3739,10 +3715,10 @@ var FormField = forwardRef21(
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsx22(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
+              /* @__PURE__ */ jsx23(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
             ] }) : null,
             info ? /* @__PURE__ */ jsxs16("div", { className: "aviala-form__message aviala-form__message--info", children: [
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 SymbolInformationCircle,
                 {
                   className: "aviala-form__message-icon",
@@ -3751,9 +3727,9 @@ var FormField = forwardRef21(
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsx22(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
+              /* @__PURE__ */ jsx23(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
             ] }) : null,
-            alert ? /* @__PURE__ */ jsx22("div", { className: "aviala-form__alert", children: alert }) : null
+            alert ? /* @__PURE__ */ jsx23("div", { className: "aviala-form__alert", children: alert }) : null
           ] })
         ]
       }
@@ -3764,9 +3740,9 @@ FormField.displayName = "FormField";
 
 // src/components/input-group.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var InputGroup = forwardRef22(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx23(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx24(
     "div",
     {
       ref,
@@ -3780,7 +3756,7 @@ var InputGroup = forwardRef22(
   )
 );
 InputGroup.displayName = "InputGroup";
-var InputGroupAddon = forwardRef22(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+var InputGroupAddon = forwardRef22(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   "div",
   {
     ref,
@@ -3796,7 +3772,7 @@ InputGroupAddon.displayName = "InputGroupAddon";
 
 // src/components/stack.tsx
 import { forwardRef as forwardRef23, useId as useId3 } from "react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 var gapMap = {
   inside: "var(--gap-inside, 4px)",
   component: "var(--gap-component, 8px)",
@@ -3805,7 +3781,7 @@ var gapMap = {
   page: "var(--gap-page-space, 24px)"
 };
 var Stack = forwardRef23(
-  ({ className, gap = "component", direction = "column", style, ...props }, ref) => /* @__PURE__ */ jsx24(
+  ({ className, gap = "component", direction = "column", style, ...props }, ref) => /* @__PURE__ */ jsx25(
     "div",
     {
       ref,
@@ -3841,7 +3817,7 @@ var Fieldset = forwardRef23(
         "aria-labelledby": hasHeading ? headingId : void 0,
         ...props,
         children: [
-          hasHeading || description ? /* @__PURE__ */ jsx24(
+          hasHeading || description ? /* @__PURE__ */ jsx25(
             Typeface,
             {
               id: headingId,
@@ -3851,11 +3827,11 @@ var Fieldset = forwardRef23(
               secondary: description
             }
           ) : null,
-          /* @__PURE__ */ jsx24("div", { className: "aviala-form-group__slot", children }),
+          /* @__PURE__ */ jsx25("div", { className: "aviala-form-group__slot", children }),
           hasAction ? /* @__PURE__ */ jsxs17("div", { className: "aviala-form-group__action", children: [
-            info ? /* @__PURE__ */ jsx24("div", { className: "aviala-form-group__info", children: info }) : null,
-            feedback ? /* @__PURE__ */ jsx24("div", { className: "aviala-form-group__feedback", children: feedback }) : null,
-            actions ? /* @__PURE__ */ jsx24("div", { className: "aviala-form-group__actions", children: actions }) : null
+            info ? /* @__PURE__ */ jsx25("div", { className: "aviala-form-group__info", children: info }) : null,
+            feedback ? /* @__PURE__ */ jsx25("div", { className: "aviala-form-group__feedback", children: feedback }) : null,
+            actions ? /* @__PURE__ */ jsx25("div", { className: "aviala-form-group__actions", children: actions }) : null
           ] }) : null
         ]
       }
@@ -3987,7 +3963,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 +3986,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);
@@ -4030,7 +4006,7 @@ function useColorPickerState({
 }
 
 // src/components/color-picker/color-picker-area.tsx
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function ColorPickerArea({
   className,
   disabled,
@@ -4062,7 +4038,7 @@ function ColorPickerArea({
   );
   const { handlePointerDown, handlePointerMove } = usePointerDrag(ref, handleMove, !isDisabled);
   const hueColor = pureHueHex(hsva.h);
-  return /* @__PURE__ */ jsx25("div", { className: cn("aviala-color-picker-area", className), ...spiralDebugId("color-picker.content.area"), children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx26("div", { className: cn("aviala-color-picker-area", className), ...spiralDebugId("color-picker.content.area"), children: /* @__PURE__ */ jsxs18(
     "div",
     {
       ref,
@@ -4077,9 +4053,9 @@ function ColorPickerArea({
       "aria-valuenow": Math.round(hsva.s),
       tabIndex: isDisabled ? -1 : 0,
       children: [
-        /* @__PURE__ */ jsx25("div", { className: "aviala-color-picker-area__white", "aria-hidden": true }),
-        /* @__PURE__ */ jsx25("div", { className: "aviala-color-picker-area__black", "aria-hidden": true }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26("div", { className: "aviala-color-picker-area__white", "aria-hidden": true }),
+        /* @__PURE__ */ jsx26("div", { className: "aviala-color-picker-area__black", "aria-hidden": true }),
+        /* @__PURE__ */ jsx26(
           "div",
           {
             className: "aviala-color-picker-area__thumb",
@@ -4098,7 +4074,7 @@ function ColorPickerArea({
 // src/components/color-picker/color-picker-inputs.tsx
 import { EditColorPicker } from "@aviala-design/icons";
 import { useCallback as useCallback8, useEffect as useEffect4, useState as useState8 } from "react";
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function ColorPickerInputs({
   className,
   disabled,
@@ -4159,7 +4135,7 @@ function ColorPickerInputs({
     }
   }, [eyeDropperSupported, isDisabled, setValue]);
   return /* @__PURE__ */ jsxs19("div", { className: cn("aviala-color-picker-inputs", className), ...spiralDebugId("color-picker.content.inputs"), children: [
-    showEyedropper ? /* @__PURE__ */ jsx26(
+    showEyedropper ? /* @__PURE__ */ jsx27(
       Button,
       {
         type: "button",
@@ -4171,12 +4147,12 @@ function ColorPickerInputs({
         ...spiralDebugId("color-picker.content.inputs.eyedropper"),
         title: eyeDropperSupported ? "Pick color from screen" : "EyeDropper not supported in this browser",
         onClick: handleEyedropper,
-        children: /* @__PURE__ */ jsx26(EditColorPicker, { "aria-hidden": true })
+        children: /* @__PURE__ */ jsx27(EditColorPicker, { "aria-hidden": true })
       }
     ) : null,
     format === "hex" ? /* @__PURE__ */ jsxs19("div", { className: "aviala-color-picker-field", children: [
-      /* @__PURE__ */ jsx26("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx26(Badge, { style: "normal", children: "#" }) }),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx27("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx27(Badge, { style: "normal", children: "#" }) }),
+      /* @__PURE__ */ jsx27(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4188,7 +4164,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitHex()
         }
       )
-    ] }) : /* @__PURE__ */ jsx26("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ jsx26(
+    ] }) : /* @__PURE__ */ jsx27("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ jsx27(
       "input",
       {
         className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4201,7 +4177,7 @@ function ColorPickerInputs({
       }
     ) }),
     /* @__PURE__ */ jsxs19("div", { className: "aviala-color-picker-field aviala-color-picker-field--alpha", children: [
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx27(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4214,7 +4190,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitAlpha()
         }
       ),
-      /* @__PURE__ */ jsx26("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx26(Badge, { style: "normal", children: "%" }) })
+      /* @__PURE__ */ jsx27("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx27(Badge, { style: "normal", children: "%" }) })
     ] }),
     /* @__PURE__ */ jsxs19(
       Select,
@@ -4223,11 +4199,11 @@ function ColorPickerInputs({
         onValueChange: (next) => setFormat(next),
         disabled: isDisabled,
         children: [
-          /* @__PURE__ */ jsx26(SelectTrigger, { className: "aviala-color-picker-format-select w-[76px] shrink-0", size: "regular", children: /* @__PURE__ */ jsx26(SelectValue, {}) }),
-          /* @__PURE__ */ jsx26(SelectContent, { onCloseAutoFocus: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs19(SelectItemGroup, { children: [
-            /* @__PURE__ */ jsx26(SelectItem, { value: "hex", itemFunction: "radio", children: "HEX" }),
-            /* @__PURE__ */ jsx26(SelectItem, { value: "rgb", itemFunction: "radio", children: "RGB" }),
-            /* @__PURE__ */ jsx26(SelectItem, { value: "hsl", itemFunction: "radio", children: "HSL" })
+          /* @__PURE__ */ jsx27(SelectTrigger, { className: "aviala-color-picker-format-select w-[76px] shrink-0", size: "regular", children: /* @__PURE__ */ jsx27(SelectValue, {}) }),
+          /* @__PURE__ */ jsx27(SelectContent, { onCloseAutoFocus: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs19(SelectItemGroup, { children: [
+            /* @__PURE__ */ jsx27(SelectItem, { value: "hex", itemFunction: "radio", children: "HEX" }),
+            /* @__PURE__ */ jsx27(SelectItem, { value: "rgb", itemFunction: "radio", children: "RGB" }),
+            /* @__PURE__ */ jsx27(SelectItem, { value: "hsl", itemFunction: "radio", children: "HSL" })
           ] }) })
         ]
       }
@@ -4251,11 +4227,11 @@ import { SymbolAdd } from "@aviala-design/icons";
 
 // src/components/color-picker/color-pick-button.tsx
 import { forwardRef as forwardRef24 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var ColorPickButton = forwardRef24(
   ({ className, color, selected = false, style, ...props }, ref) => {
     const swatch = parseColor(color).toHex();
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "button",
       {
         ref,
@@ -4264,7 +4240,7 @@ var ColorPickButton = forwardRef24(
         "data-selected": selected ? "true" : void 0,
         style,
         ...props,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx28(
           "span",
           {
             className: "aviala-color-pick-button__swatch",
@@ -4279,7 +4255,7 @@ var ColorPickButton = forwardRef24(
 ColorPickButton.displayName = "ColorPickButton";
 
 // src/components/color-picker/color-picker-presets.tsx
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function ColorPickerPresets({
   className,
   presets: presetsProp,
@@ -4302,7 +4278,7 @@ function ColorPickerPresets({
     onPresetsChange(next);
   };
   return /* @__PURE__ */ jsxs20("div", { className: cn("aviala-color-picker-presets", className), ...spiralDebugId("color-picker.content.presets"), children: [
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(
       Button,
       {
         type: "button",
@@ -4312,10 +4288,10 @@ function ColorPickerPresets({
         disabled: isDisabled || !onPresetsChange || presets.length >= maxPresets,
         "aria-label": "Add current color to presets",
         onClick: handleAdd,
-        children: /* @__PURE__ */ jsx28(SymbolAdd, { "aria-hidden": true })
+        children: /* @__PURE__ */ jsx29(SymbolAdd, { "aria-hidden": true })
       }
     ),
-    presets.map((color) => /* @__PURE__ */ jsx28(
+    presets.map((color) => /* @__PURE__ */ jsx29(
       ColorPickButton,
       {
         color,
@@ -4330,7 +4306,7 @@ function ColorPickerPresets({
 
 // src/components/color-picker/color-picker-slider.tsx
 import { useCallback as useCallback9, useRef as useRef6 } from "react";
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function ColorPickerSlider({
   kind,
   className,
@@ -4378,7 +4354,7 @@ function ColorPickerSlider({
     backgroundImage: `linear-gradient(90deg, transparent, ${solidHex(value)})`,
     backgroundColor: "var(--color-picker-checkerboard)"
   };
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       className: cn("aviala-color-picker-slider-row", className),
@@ -4397,8 +4373,8 @@ function ColorPickerSlider({
           "aria-valuenow": ariaValueNow,
           tabIndex: isDisabled ? -1 : 0,
           children: [
-            /* @__PURE__ */ jsx29("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx30("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
+            /* @__PURE__ */ jsx30(
               "div",
               {
                 className: "aviala-color-picker-slider__thumb",
@@ -4414,7 +4390,7 @@ function ColorPickerSlider({
 }
 
 // src/components/color-picker/color-picker.tsx
-import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 function ColorPicker({
   children,
   className,
@@ -4457,17 +4433,17 @@ function ColorPicker({
     onPresetsChange,
     maxPresets
   };
-  return /* @__PURE__ */ jsx30(ColorPickerContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx30(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx30("div", { className: cn("inline-flex", className), ...spiralDebugId("color-picker"), children }) }) });
+  return /* @__PURE__ */ jsx31(ColorPickerContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx31(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx31("div", { className: cn("inline-flex", className), ...spiralDebugId("color-picker"), children }) }) });
 }
 function ColorPickerContextProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx30(ColorPickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx31(ColorPickerContext.Provider, { value, children });
 }
 var ColorPickerTrigger = forwardRef25(({ className, size = "regular", allRound = false, placeholder = "Select color", ...props }, ref) => {
   const { value, open, disabled } = useColorPickerContext();
-  return /* @__PURE__ */ jsx30(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx31(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
     "button",
     {
       ref,
@@ -4481,7 +4457,7 @@ var ColorPickerTrigger = forwardRef25(({ className, size = "regular", allRound =
       disabled,
       ...props,
       children: [
-        /* @__PURE__ */ jsx30("span", { className: "aviala-color-picker-trigger__swatch", ...spiralDebugId("color-picker.trigger.swatch"), children: /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31("span", { className: "aviala-color-picker-trigger__swatch", ...spiralDebugId("color-picker.trigger.swatch"), children: /* @__PURE__ */ jsx31(
           "span",
           {
             className: "aviala-color-picker-trigger__swatch-inner",
@@ -4489,7 +4465,7 @@ var ColorPickerTrigger = forwardRef25(({ className, size = "regular", allRound =
             "aria-hidden": true
           }
         ) }),
-        /* @__PURE__ */ jsx30("span", { className: "aviala-color-picker-trigger__value", ...spiralDebugId("color-picker.trigger.value"), children: value ? value.replace(/^#/, "").slice(0, 6).toUpperCase() : /* @__PURE__ */ jsx30("span", { className: "aviala-color-picker-trigger__placeholder", children: placeholder }) })
+        /* @__PURE__ */ jsx31("span", { className: "aviala-color-picker-trigger__value", ...spiralDebugId("color-picker.trigger.value"), children: value ? value.replace(/^#/, "").slice(0, 6).toUpperCase() : /* @__PURE__ */ jsx31("span", { className: "aviala-color-picker-trigger__placeholder", children: placeholder }) })
       ]
     }
   ) });
@@ -4508,7 +4484,7 @@ var ColorPickerContent = forwardRef25(
     ...props
   }, ref) => {
     const { presets, onPresetsChange, maxPresets, disabled } = useColorPickerContext();
-    return /* @__PURE__ */ jsx30(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx31(
       PopoverPrimitive2.Content,
       {
         ref,
@@ -4525,11 +4501,11 @@ var ColorPickerContent = forwardRef25(
         onFocusOutside: (event) => event.preventDefault(),
         ...props,
         children: /* @__PURE__ */ jsxs22("div", { className: "aviala-color-picker-panel", children: [
-          /* @__PURE__ */ jsx30(ColorPickerArea, { disabled }),
-          /* @__PURE__ */ jsx30(ColorPickerSlider, { kind: "hue", disabled }),
-          /* @__PURE__ */ jsx30(ColorPickerSlider, { kind: "alpha", disabled }),
-          /* @__PURE__ */ jsx30(ColorPickerInputs, { disabled, showEyedropper }),
-          showPresets ? /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(ColorPickerArea, { disabled }),
+          /* @__PURE__ */ jsx31(ColorPickerSlider, { kind: "hue", disabled }),
+          /* @__PURE__ */ jsx31(ColorPickerSlider, { kind: "alpha", disabled }),
+          /* @__PURE__ */ jsx31(ColorPickerInputs, { disabled, showEyedropper }),
+          showPresets ? /* @__PURE__ */ jsx31(
             ColorPickerPresets,
             {
               disabled,
@@ -4546,7 +4522,7 @@ var ColorPickerContent = forwardRef25(
 ColorPickerContent.displayName = "ColorPickerContent";
 
 // src/components/color-picker/color-picker-panel.tsx
-import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 function ColorPickerPanel({
   className,
   disabled,
@@ -4578,12 +4554,12 @@ function ColorPickerPanel({
     onPresetsChange,
     maxPresets
   };
-  return /* @__PURE__ */ jsx31(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs23("div", { className: cn("aviala-color-picker-panel", className), children: [
-    /* @__PURE__ */ jsx31(ColorPickerArea, { disabled }),
-    /* @__PURE__ */ jsx31(ColorPickerSlider, { kind: "hue", disabled }),
-    /* @__PURE__ */ jsx31(ColorPickerSlider, { kind: "alpha", disabled }),
-    /* @__PURE__ */ jsx31(ColorPickerInputs, { disabled, showEyedropper }),
-    showPresets ? /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs23("div", { className: cn("aviala-color-picker-panel", className), children: [
+    /* @__PURE__ */ jsx32(ColorPickerArea, { disabled }),
+    /* @__PURE__ */ jsx32(ColorPickerSlider, { kind: "hue", disabled }),
+    /* @__PURE__ */ jsx32(ColorPickerSlider, { kind: "alpha", disabled }),
+    /* @__PURE__ */ jsx32(ColorPickerInputs, { disabled, showEyedropper }),
+    showPresets ? /* @__PURE__ */ jsx32(
       ColorPickerPresets,
       {
         disabled,
@@ -4610,11 +4586,11 @@ import {
   useContext as useContext5,
   useEffect as useEffect5,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo4,
+  useMemo as useMemo5,
   useRef as useRef7,
   useState as useState10
 } from "react";
-import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 var CascaderContext = createContext5(null);
 function useCascaderContext() {
   const context = useContext5(CascaderContext);
@@ -4623,29 +4599,13 @@ function useCascaderContext() {
   }
   return context;
 }
-function renderSlotIcon5(node, debugId) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ jsx32(
-    "span",
-    {
-      className: "aviala-cascader-trigger__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      ...debugId ? spiralDebugId(debugId) : void 0,
-      children: content
-    }
-  );
-}
 function renderItemIcon2(node, iconLevel = "text", debugId) {
   if (!node) return null;
   const content = cloneAvialaIconElement(node, {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "span",
     {
       className: cn(
@@ -4660,16 +4620,16 @@ function renderItemIcon2(node, iconLevel = "text", debugId) {
 }
 function renderBadgeSlot2(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-item__badge", children: isValidElement12(node) && node.type === Badge ? node : /* @__PURE__ */ jsx32(Badge, { children: node }) });
+  return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__badge", children: isValidElement12(node) && node.type === Badge ? node : /* @__PURE__ */ jsx33(Badge, { children: node }) });
 }
 function CascaderItemFormRadio() {
   return /* @__PURE__ */ jsxs24("span", { className: "aviala-cascader-item__form-radio", "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-item__form-radio-surface" }),
-    /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-item__form-radio-indicator" })
+    /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__form-radio-surface" }),
+    /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__form-radio-indicator" })
   ] });
 }
 function CascaderItemFormCheckbox() {
-  return /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx33(
     SymbolRight3,
     {
       className: "aviala-cascader-item__form-checkbox-icon",
@@ -4682,27 +4642,27 @@ function CascaderItemFormCheckbox() {
 }
 function CascaderItemTrailingRadio({ selected }) {
   if (!selected) return null;
-  return /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ jsx32(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ jsx33(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function CascaderItemTrailingCheckbox({ selected }) {
   if (!selected) return null;
-  return /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx32(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx33(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function renderFunctionSlot2(itemFunction, layout, showFunctionIcon, hasChildren, selected, icon) {
   if (!showFunctionIcon || layout === "title") return null;
   if (icon !== void 0) {
-    return /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-item__function", children: icon });
+    return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__function", children: icon });
   }
   switch (itemFunction) {
     case "radio":
-      return /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx32(CascaderItemTrailingRadio, { selected }) });
+      return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx33(CascaderItemTrailingRadio, { selected }) });
     case "checkbox":
-      return /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx32(CascaderItemTrailingCheckbox, { selected }) });
+      return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx33(CascaderItemTrailingCheckbox, { selected }) });
     case "simple":
     default:
       return /* @__PURE__ */ jsxs24("span", { className: "aviala-cascader-item__function", children: [
-        selected ? /* @__PURE__ */ jsx32(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) : null,
-        hasChildren ? /* @__PURE__ */ jsx32(DirectionArrowRightLight, { level: "text", biggerSize: true, "aria-hidden": true }) : null
+        selected ? /* @__PURE__ */ jsx33(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) : null,
+        hasChildren ? /* @__PURE__ */ jsx33(DirectionArrowRightLight, { level: "text", biggerSize: true, "aria-hidden": true }) : null
       ] });
   }
 }
@@ -4831,7 +4791,7 @@ function Cascader({
     },
     [changeOnSelect, commitValue, expandTo, handleOpenChange, options]
   );
-  const contextValue = useMemo4(
+  const contextValue = useMemo5(
     () => ({
       open,
       disabled,
@@ -4862,7 +4822,7 @@ function Cascader({
       size
     ]
   );
-  return /* @__PURE__ */ jsx32(CascaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx32(PopoverPrimitive3.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx32("div", { className: cn("inline-flex", className), ...spiralDebugId("cascader"), children }) }) });
+  return /* @__PURE__ */ jsx33(CascaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx33(PopoverPrimitive3.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx33("div", { className: cn("inline-flex", className), ...spiralDebugId("cascader"), children }) }) });
 }
 var CascaderTrigger = forwardRef26(
   ({
@@ -4888,7 +4848,7 @@ var CascaderTrigger = forwardRef26(
       label
     ] }, `${selectedPath[index]}-${index}`)) : null);
     const hasValue = resolvedDisplay != null && resolvedDisplay !== false;
-    return /* @__PURE__ */ jsx32(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsx33(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
       "button",
       {
         ref,
@@ -4904,8 +4864,8 @@ var CascaderTrigger = forwardRef26(
         ...spiralDebugId("cascader.trigger"),
         ...props,
         children: [
-          renderSlotIcon5(leftIcon, "cascader.trigger.icon-left"),
-          /* @__PURE__ */ jsx32("span", { className: "aviala-cascader-trigger__field", ...spiralDebugId("cascader.trigger.value"), children: /* @__PURE__ */ jsx32(
+          renderSlotIcon(leftIcon, "aviala-cascader-trigger__slot", "cascader.trigger.icon-left"),
+          /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-trigger__field", ...spiralDebugId("cascader.trigger.value"), children: /* @__PURE__ */ jsx33(
             "span",
             {
               className: cn("aviala-cascader-trigger__value", typographyVariants({ level: "text" })),
@@ -4913,15 +4873,15 @@ var CascaderTrigger = forwardRef26(
               children: hasValue ? resolvedDisplay : placeholder
             }
           ) }),
-          renderSlotIcon5(rightIcon, "cascader.trigger.icon-right"),
-          /* @__PURE__ */ jsx32(
+          renderSlotIcon(rightIcon, "aviala-cascader-trigger__slot", "cascader.trigger.icon-right"),
+          /* @__PURE__ */ jsx33(
             "span",
             {
               className: "aviala-cascader-trigger__expand",
               "aria-hidden": true,
               style: expandIcon ? iconSlotCssVarStyle(expandIcon, "--input-slot-icon-size", "text", true) : iconLevelCssVarStyle("text", true, "--input-slot-icon-size"),
               ...spiralDebugId("cascader.trigger.expand"),
-              children: expandIcon ?? /* @__PURE__ */ jsx32(DirectionArrowDownLight3, { level: "text", biggerSize: true, "aria-hidden": true })
+              children: expandIcon ?? /* @__PURE__ */ jsx33(DirectionArrowDownLight3, { level: "text", biggerSize: true, "aria-hidden": true })
             }
           )
         ]
@@ -4939,7 +4899,7 @@ var CascaderContent = forwardRef26(
     portalled = true,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx32(
+    const content = /* @__PURE__ */ jsx33(
       PopoverPrimitive3.Content,
       {
         ref,
@@ -4952,12 +4912,12 @@ var CascaderContent = forwardRef26(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx32(PopoverPrimitive3.Portal, { children: content });
+    return /* @__PURE__ */ jsx33(PopoverPrimitive3.Portal, { children: content });
   }
 );
 CascaderContent.displayName = "CascaderContent";
 var CascaderMenu = forwardRef26(
-  ({ children, className }, ref) => /* @__PURE__ */ jsx32("div", { ref, className: cn("aviala-cascader-menu", className), children })
+  ({ children, className }, ref) => /* @__PURE__ */ jsx33("div", { ref, className: cn("aviala-cascader-menu", className), children })
 );
 CascaderMenu.displayName = "CascaderMenu";
 var CascaderColumn = forwardRef26(
@@ -4971,14 +4931,14 @@ var CascaderColumn = forwardRef26(
       width: exitLayout.width,
       zIndex: 0
     } : void 0;
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx33(
       "div",
       {
         ref,
         className: cn("aviala-cascader-column", className),
         "data-animate": animate,
         style: exitStyle,
-        children: /* @__PURE__ */ jsx32("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
+        children: /* @__PURE__ */ jsx33("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
       }
     );
   }
@@ -4991,9 +4951,9 @@ function CascaderItemGroup({
   className
 }) {
   return /* @__PURE__ */ jsxs24("div", { className: cn("aviala-cascader-group", className), children: [
-    label ? /* @__PURE__ */ jsx32("div", { className: cn("aviala-cascader-label", typographyVariants({ level: "caption" })), children: label }) : null,
-    /* @__PURE__ */ jsx32("div", { className: "aviala-cascader-group__slot", children }),
-    showDivider ? /* @__PURE__ */ jsx32("div", { className: "aviala-cascader-separator", role: "separator" }) : null
+    label ? /* @__PURE__ */ jsx33("div", { className: cn("aviala-cascader-label", typographyVariants({ level: "caption" })), children: label }) : null,
+    /* @__PURE__ */ jsx33("div", { className: "aviala-cascader-group__slot", children }),
+    showDivider ? /* @__PURE__ */ jsx33("div", { className: "aviala-cascader-separator", role: "separator" }) : null
   ] });
 }
 var CascaderItem = forwardRef26(
@@ -5086,10 +5046,10 @@ var CascaderItem = forwardRef26(
           if (!isTitle) setHighlightedValue(value);
         },
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx32(CascaderItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx32(CascaderItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx33(CascaderItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx33(CascaderItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon2(leftIcon, leftIconLevel, "cascader.content.item.icon-left") : null,
-          /* @__PURE__ */ jsx32("span", { className: cn("aviala-cascader-item__text", typographyVariants({ level: isTitle ? "caption" : "text" })), children: children ?? option?.label }),
+          /* @__PURE__ */ jsx33("span", { className: cn("aviala-cascader-item__text", typographyVariants({ level: isTitle ? "caption" : "text" })), children: children ?? option?.label }),
           showBadge ? renderBadgeSlot2(badge ?? "Text") : null,
           showRightIcon && rightIcon ? renderItemIcon2(rightIcon, leftIconLevel) : null,
           renderFunctionSlot2(
@@ -5121,7 +5081,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) {
@@ -5214,7 +5174,7 @@ function CascaderOptionsMenu({ className }) {
     }, COLUMN_ANIMATION_MS);
     return () => window.clearTimeout(timeout);
   }, [columns, open]);
-  return /* @__PURE__ */ jsx32(CascaderMenu, { ref: menuRef, className, children: columns.map(({ pathPrefix, key, animateEnter, animateExit, exitLayout }) => /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(CascaderMenu, { ref: menuRef, className, children: columns.map(({ pathPrefix, key, animateEnter, animateExit, exitLayout }) => /* @__PURE__ */ jsx33(
     CascaderColumn,
     {
       ref: (element) => {
@@ -5227,7 +5187,7 @@ function CascaderOptionsMenu({ className }) {
       animateEnter,
       animateExit,
       exitLayout,
-      children: /* @__PURE__ */ jsx32(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx33(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ jsx33(
         CascaderItem,
         {
           value: option.value,
@@ -5280,7 +5240,7 @@ function CascaderField({
       changeOnSelect,
       className,
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           CascaderTrigger,
           {
             size,
@@ -5294,7 +5254,7 @@ function CascaderField({
             ...triggerProps
           }
         ),
-        /* @__PURE__ */ jsx32(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ jsx32(CascaderOptionsMenu, { className: menuClassName }) })
+        /* @__PURE__ */ jsx33(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ jsx33(CascaderOptionsMenu, { className: menuClassName }) })
       ]
     }
   );
@@ -5314,20 +5274,20 @@ import {
   useEffect as useEffect7,
   useId as useId4,
   useLayoutEffect as useLayoutEffect5,
-  useMemo as useMemo7,
+  useMemo as useMemo8,
   useRef as useRef9,
   useState as useState11
 } from "react";
 
 // src/components/date-picker/date-picker-context.tsx
 import { createContext as createContext6, useContext as useContext6 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var DatePickerContext = createContext6(null);
 function DatePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx33(DatePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx34(DatePickerContext.Provider, { value, children });
 }
 function useDatePickerContext() {
   const context = useContext6(DatePickerContext);
@@ -5522,14 +5482,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";
 
@@ -5554,7 +5514,7 @@ function stickyRoundIndex(fractionalIndex, stickiness = WHEEL_STICKY_AMOUNT) {
 }
 
 // src/components/date-picker/date-picker-time-wheel.tsx
-import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var LOOP_SECTIONS = 3;
 var MIDDLE_SECTION = 1;
 function formatWheelValue(value) {
@@ -5607,7 +5567,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]);
@@ -5795,22 +5755,22 @@ function DatePickerTimeWheelColumn({
   };
   const selectedOptionId = loop ? `${ariaLabel}-${value}-${values.length * MIDDLE_SECTION + getValueIndex(values, value)}` : `${ariaLabel}-${value}`;
   return /* @__PURE__ */ jsxs25("div", { className: cn("aviala-datepicker-time__wheel", className), children: [
-    /* @__PURE__ */ jsx34("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
+    /* @__PURE__ */ jsx35(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--top",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--bottom",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       "div",
       {
         ref: scrollRef,
@@ -5821,17 +5781,17 @@ function DatePickerTimeWheelColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsx34("ul", { className: "aviala-datepicker-time__wheel-list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ jsx35("ul", { className: "aviala-datepicker-time__wheel-list", children: repeatedValues.map((itemValue, index) => {
           const isSelected = itemValue === value;
           const optionId = loop ? `${ariaLabel}-${itemValue}-${index}` : `${ariaLabel}-${itemValue}`;
-          return /* @__PURE__ */ jsx34(
+          return /* @__PURE__ */ jsx35(
             "li",
             {
               id: optionId,
               className: "aviala-datepicker-time__wheel-item",
               role: "option",
               "aria-selected": isSelected,
-              children: /* @__PURE__ */ jsx34(
+              children: /* @__PURE__ */ jsx35(
                 "button",
                 {
                   type: "button",
@@ -5860,7 +5820,7 @@ function DatePickerTimeWheelColumn({
 }
 
 // src/components/date-picker/date-picker-month-wheels.tsx
-import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 var MONTH_VALUES = Array.from({ length: 12 }, (_, index) => index + 1);
 function formatYearValue(value) {
   return String(value);
@@ -5875,7 +5835,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;
@@ -5885,14 +5845,14 @@ function DatePickerMonthYearWheels({
   const setYearMonth = (nextYear, nextMonth) => {
     setViewMonth(new Date(nextYear, nextMonth - 1, 1));
   };
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       className: cn("aviala-datepicker-month", className),
       role: "group",
       "aria-label": "\u9009\u62E9\u5E74\u6708",
       children: /* @__PURE__ */ jsxs26("div", { className: "aviala-datepicker-month__columns", children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           DatePickerTimeWheelColumn,
           {
             "aria-label": "\u5E74",
@@ -5904,7 +5864,7 @@ function DatePickerMonthYearWheels({
             onChange: (nextYear) => setYearMonth(nextYear, month)
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           DatePickerTimeWheelColumn,
           {
             "aria-label": "\u6708",
@@ -5922,12 +5882,12 @@ function DatePickerMonthYearWheels({
 }
 
 // src/components/time-picker/time-picker-wheels.tsx
-import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 var TIME_PICKER_HOUR_VALUES = Array.from({ length: 24 }, (_, index) => index);
 var TIME_PICKER_MINUTE_VALUES = Array.from({ length: 12 }, (_, index) => index * 5);
 function TimePickerWheels({ value, onChange, className }) {
-  return /* @__PURE__ */ jsx36("div", { className: cn("aviala-datepicker-time", className), role: "group", "aria-label": "\u9009\u62E9\u65F6\u95F4", children: /* @__PURE__ */ jsxs27("div", { className: "aviala-datepicker-time__columns", children: [
-    /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37("div", { className: cn("aviala-datepicker-time", className), role: "group", "aria-label": "\u9009\u62E9\u65F6\u95F4", children: /* @__PURE__ */ jsxs27("div", { className: "aviala-datepicker-time__columns", children: [
+    /* @__PURE__ */ jsx37(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5C0F\u65F6",
@@ -5936,7 +5896,7 @@ function TimePickerWheels({ value, onChange, className }) {
         onChange: (hours) => onChange({ ...value, hours })
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5206\u949F",
@@ -5949,22 +5909,7 @@ function TimePickerWheels({ value, onChange, className }) {
 }
 
 // src/components/date-picker/date-picker.tsx
-import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
-function renderSlotIcon6(node) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ jsx37(
-    "span",
-    {
-      className: "aviala-datepicker-trigger__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      children: content
-    }
-  );
-}
+import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function getInitialViewMonth(mode, singleValue, rangeValue) {
   if (mode === "single" && singleValue) return startOfDay(singleValue);
   if (mode === "range") {
@@ -6244,7 +6189,7 @@ function DatePicker(props) {
       viewMonth
     ]
   );
-  const contextValue = useMemo7(
+  const contextValue = useMemo8(
     () => ({
       open,
       setOpen: handleOpenChange,
@@ -6288,7 +6233,7 @@ function DatePicker(props) {
       viewMonth
     ]
   );
-  return /* @__PURE__ */ jsx37(DatePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx37(PopoverPrimitive4.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx37("div", { className: cn("inline-flex", className), children }) }) });
+  return /* @__PURE__ */ jsx38(DatePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx38(PopoverPrimitive4.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx38("div", { className: cn("inline-flex", className), children }) }) });
 }
 function formatTriggerValue(mode, singleValue, rangeValue, enableTime, timeValue, rangeSeparator) {
   if (mode === "single") {
@@ -6380,7 +6325,7 @@ var DatePickerTrigger = forwardRef27(
     const showEditableInput = editable && displayValue == null;
     if (!showEditableInput) {
       const hasValue = formatted != null && formatted !== false;
-      return /* @__PURE__ */ jsx37(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs28(
+      return /* @__PURE__ */ jsx38(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs28(
         "button",
         {
           type: "button",
@@ -6393,10 +6338,11 @@ var DatePickerTrigger = forwardRef27(
           "aria-expanded": open,
           "aria-haspopup": "dialog",
           children: [
-            renderSlotIcon6(
-              leftIcon ?? /* @__PURE__ */ jsx37(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true })
+            renderSlotIcon(
+              leftIcon ?? /* @__PURE__ */ jsx38(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+              "aviala-datepicker-trigger__slot"
             ),
-            /* @__PURE__ */ jsx37("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx38("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx38(
               "span",
               {
                 className: cn(
@@ -6407,12 +6353,12 @@ var DatePickerTrigger = forwardRef27(
                 children: hasValue ? formatted : emptyPlaceholder
               }
             ) }),
-            renderSlotIcon6(rightIcon)
+            renderSlotIcon(rightIcon, "aviala-datepicker-trigger__slot")
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ jsx37(PopoverPrimitive4.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsx38(PopoverPrimitive4.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs28(
       "div",
       {
         className: cn("aviala-datepicker-trigger aviala-focus-ring", className),
@@ -6429,10 +6375,11 @@ var DatePickerTrigger = forwardRef27(
           openPicker();
         },
         children: [
-          renderSlotIcon6(
-            leftIcon ?? /* @__PURE__ */ jsx37(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true })
+          renderSlotIcon(
+            leftIcon ?? /* @__PURE__ */ jsx38(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+            "aviala-datepicker-trigger__slot"
           ),
-          /* @__PURE__ */ jsx37("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx38(
             "input",
             {
               ref: setInputRefs,
@@ -6452,93 +6399,10 @@ var DatePickerTrigger = forwardRef27(
               onFocus: (event) => {
                 editingRef.current = true;
                 openPicker();
-                {
-                  const inputEl = event.currentTarget;
-                  const logTriggerStyles = (phase) => {
-                    const trigger = inputEl.closest(
-                      ".aviala-datepicker-trigger"
-                    );
-                    const cs = trigger ? getComputedStyle(trigger) : null;
-                    fetch(
-                      "http://127.0.0.1:7374/ingest/ad1201c6-cfe5-466e-96ed-49d0c8840eda",
-                      {
-                        method: "POST",
-                        headers: {
-                          "Content-Type": "application/json",
-                          "X-Debug-Session-Id": "0f383b"
-                        },
-                        body: JSON.stringify({
-                          sessionId: "0f383b",
-                          runId: "pre-fix",
-                          hypothesisId: "A-E",
-                          location: "date-picker.tsx:DatePickerTrigger.onFocus",
-                          message: `trigger styles on input focus (${phase})`,
-                          data: {
-                            phase,
-                            openProp: open,
-                            dataState: trigger?.getAttribute("data-state"),
-                            matchesFocusWithin: trigger?.matches(":focus-within") ?? null,
-                            matchesFocusVisible: trigger?.matches(":focus-visible") ?? null,
-                            hasFocusRingClass: trigger?.classList.contains("aviala-focus-ring") ?? null,
-                            kbdAttr: document.documentElement.hasAttribute(
-                              "data-aviala-kbd"
-                            ),
-                            bg: cs?.backgroundColor ?? null,
-                            boxShadow: cs?.boxShadow ?? null,
-                            borderColor: cs?.borderColor ?? null,
-                            borderWidth: cs?.borderWidth ?? null,
-                            activeTag: document.activeElement?.tagName ?? null,
-                            activeClass: document.activeElement?.className ?? null
-                          },
-                          timestamp: Date.now()
-                        })
-                      }
-                    ).catch(() => {
-                    });
-                  };
-                  logTriggerStyles("sync");
-                  requestAnimationFrame(() => logTriggerStyles("raf"));
-                }
                 onFocus?.(event);
               },
               onBlur: (event) => {
                 editingRef.current = false;
-                {
-                  const trigger = event.currentTarget.closest(
-                    ".aviala-datepicker-trigger"
-                  );
-                  const cs = trigger ? getComputedStyle(trigger) : null;
-                  fetch(
-                    "http://127.0.0.1:7374/ingest/ad1201c6-cfe5-466e-96ed-49d0c8840eda",
-                    {
-                      method: "POST",
-                      headers: {
-                        "Content-Type": "application/json",
-                        "X-Debug-Session-Id": "0f383b"
-                      },
-                      body: JSON.stringify({
-                        sessionId: "0f383b",
-                        runId: "pre-fix",
-                        hypothesisId: "A-E",
-                        location: "date-picker.tsx:DatePickerTrigger.onBlur",
-                        message: "trigger styles on input blur",
-                        data: {
-                          openProp: open,
-                          dataState: trigger?.getAttribute("data-state"),
-                          matchesFocusWithin: trigger?.matches(":focus-within") ?? null,
-                          kbdAttr: document.documentElement.hasAttribute(
-                            "data-aviala-kbd"
-                          ),
-                          bg: cs?.backgroundColor ?? null,
-                          boxShadow: cs?.boxShadow ?? null,
-                          relatedTargetTag: event.relatedTarget?.tagName ?? null
-                        },
-                        timestamp: Date.now()
-                      })
-                    }
-                  ).catch(() => {
-                  });
-                }
                 window.setTimeout(() => {
                   const active = document.activeElement;
                   if (active?.closest(
@@ -6568,7 +6432,7 @@ var DatePickerTrigger = forwardRef27(
               ...props
             }
           ) }),
-          renderSlotIcon6(rightIcon)
+          renderSlotIcon(rightIcon, "aviala-datepicker-trigger__slot")
         ]
       }
     ) });
@@ -6584,7 +6448,7 @@ var DatePickerContent = forwardRef27(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx37(
+    const content = /* @__PURE__ */ jsx38(
       PopoverPrimitive4.Content,
       {
         ref,
@@ -6592,11 +6456,11 @@ var DatePickerContent = forwardRef27(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx37(DatePickerCalendar, {})
+        children: children ?? /* @__PURE__ */ jsx38(DatePickerCalendar, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx37(PopoverPrimitive4.Portal, { children: content });
+    return /* @__PURE__ */ jsx38(PopoverPrimitive4.Portal, { children: content });
   }
 );
 DatePickerContent.displayName = "DatePickerContent";
@@ -6614,7 +6478,7 @@ function getFooterDateLabel(mode, singleValue, rangeValue) {
 }
 function DatePickerTimePanel() {
   const { timeValue, setTimeValue } = useDatePickerContext();
-  return /* @__PURE__ */ jsx37(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
+  return /* @__PURE__ */ jsx38(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
 }
 function DatePickerPanelFooter() {
   const {
@@ -6629,7 +6493,7 @@ function DatePickerPanelFooter() {
   if (!enableTime) return null;
   const panelValue = activePanel === "time" ? "time" : "date";
   const isRangeMode = mode === "range";
-  return /* @__PURE__ */ jsx37("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsx38("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ jsxs28(
     SegmentatorGroup,
     {
       value: panelValue,
@@ -6640,20 +6504,20 @@ function DatePickerPanelFooter() {
       "data-active-panel": activePanel,
       "aria-label": "\u65E5\u671F\u4E0E\u65F6\u95F4\u5207\u6362",
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           SegmentatorItem,
           {
             value: "date",
-            leftIcon: /* @__PURE__ */ jsx37(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ jsx38(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && panelValue === "time",
             children: getFooterDateLabel(mode, singleValue, rangeValue)
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           SegmentatorItem,
           {
             value: "time",
-            leftIcon: /* @__PURE__ */ jsx37(TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ jsx38(TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && panelValue === "date",
             children: formatTimeValue(timeValue.hours, timeValue.minutes)
           }
@@ -6685,8 +6549,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 +6621,7 @@ function DatePickerCalendar({ className }) {
     pendingDayFocusRef.current = false;
     target.focus();
   }, [focusedDay, days, monthSlide]);
-  const outgoingDays = useMemo7(
+  const outgoingDays = useMemo8(
     () => monthSlide ? getCalendarDays(monthSlide.outgoingMonth) : null,
     [monthSlide]
   );
@@ -6822,7 +6686,7 @@ function DatePickerCalendar({ className }) {
   };
   const stepMonth = isMonthPanel ? 12 : 1;
   const renderDateContent = () => /* @__PURE__ */ jsxs28(Fragment4, { children: [
-    /* @__PURE__ */ jsx37("div", { className: "aviala-datepicker-calendar__weekdays", "aria-hidden": true, children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38("div", { className: "aviala-datepicker-calendar__weekdays", "aria-hidden": true, children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx38(
       "span",
       {
         className: cn(
@@ -6834,7 +6698,7 @@ function DatePickerCalendar({ className }) {
       label
     )) }),
     /* @__PURE__ */ jsxs28("div", { className: "aviala-datepicker-calendar__grid-viewport", children: [
-      monthSlide && outgoingDays ? /* @__PURE__ */ jsx37(
+      monthSlide && outgoingDays ? /* @__PURE__ */ jsx38(
         "div",
         {
           className: "aviala-datepicker-calendar__grid",
@@ -6843,12 +6707,12 @@ function DatePickerCalendar({ className }) {
           "aria-hidden": true,
           children: outgoingDays.map((day) => {
             const outside = !isSameMonth(day, monthSlide.outgoingMonth);
-            return /* @__PURE__ */ jsx37(
+            return /* @__PURE__ */ jsx38(
               "span",
               {
                 className: "aviala-datepicker-day",
                 "data-outside": outside ? "true" : void 0,
-                children: /* @__PURE__ */ jsx37(
+                children: /* @__PURE__ */ jsx38(
                   "span",
                   {
                     className: cn(
@@ -6865,7 +6729,7 @@ function DatePickerCalendar({ className }) {
         },
         `out-${monthSlide.outgoingMonth.getFullYear()}-${monthSlide.outgoingMonth.getMonth()}`
       ) : null,
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         "div",
         {
           ref: dayGridRef,
@@ -6911,7 +6775,7 @@ function DatePickerCalendar({ className }) {
                 onFocus: () => setFocusedDay(day),
                 onKeyDown: (event) => handleDayKeyDown(event, day),
                 children: [
-                  /* @__PURE__ */ jsx37(
+                  /* @__PURE__ */ jsx38(
                     "span",
                     {
                       className: cn(
@@ -6921,7 +6785,7 @@ function DatePickerCalendar({ className }) {
                       children: day.getDate()
                     }
                   ),
-                  isToday ? /* @__PURE__ */ jsx37("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
+                  isToday ? /* @__PURE__ */ jsx38("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
                 ]
               },
               dayKey
@@ -6932,20 +6796,20 @@ function DatePickerCalendar({ className }) {
       )
     ] })
   ] });
-  const renderContentView = (view) => view === "month" ? /* @__PURE__ */ jsx37(DatePickerMonthYearWheels, { layoutKey: monthWheelLayoutKey }) : renderDateContent();
+  const renderContentView = (view) => view === "month" ? /* @__PURE__ */ jsx38(DatePickerMonthYearWheels, { layoutKey: monthWheelLayoutKey }) : renderDateContent();
   const renderDatePanel = () => /* @__PURE__ */ jsxs28(Fragment4, { children: [
     /* @__PURE__ */ jsxs28("div", { className: "aviala-datepicker-calendar__header", children: [
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         "button",
         {
           type: "button",
           className: "aviala-datepicker-calendar__nav aviala-focus-ring",
           "aria-label": isMonthPanel ? "Previous year" : "Previous month",
           onClick: () => setViewMonth(addMonths(viewMonth, -stepMonth)),
-          children: /* @__PURE__ */ jsx37(DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ jsx38(DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         "button",
         {
           type: "button",
@@ -6958,7 +6822,7 @@ function DatePickerCalendar({ className }) {
           "aria-expanded": isMonthPanel,
           "aria-label": isMonthPanel ? "\u5173\u95ED\u5E74\u6708\u9009\u62E9" : "\u9009\u62E9\u5E74\u6708",
           onClick: () => setActivePanel(isMonthPanel ? "date" : "month"),
-          children: /* @__PURE__ */ jsx37(
+          children: /* @__PURE__ */ jsx38(
             "span",
             {
               className: "aviala-datepicker-calendar__title-text",
@@ -6969,19 +6833,19 @@ function DatePickerCalendar({ className }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         "button",
         {
           type: "button",
           className: "aviala-datepicker-calendar__nav aviala-focus-ring",
           "aria-label": isMonthPanel ? "Next year" : "Next month",
           onClick: () => setViewMonth(addMonths(viewMonth, stepMonth)),
-          children: /* @__PURE__ */ jsx37(DirectionArrowRight2, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ jsx38(DirectionArrowRight2, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       )
     ] }),
     /* @__PURE__ */ jsxs28("div", { className: "aviala-datepicker-calendar__view-viewport", children: [
-      viewCrossfade ? /* @__PURE__ */ jsx37(
+      viewCrossfade ? /* @__PURE__ */ jsx38(
         "div",
         {
           className: "aviala-datepicker-calendar__view",
@@ -6992,7 +6856,7 @@ function DatePickerCalendar({ className }) {
         },
         `exit-${viewCrossfade.outgoing}`
       ) : null,
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         "div",
         {
           className: "aviala-datepicker-calendar__view",
@@ -7013,7 +6877,7 @@ function DatePickerCalendar({ className }) {
       )
     ] })
   ] });
-  const renderPanel = (kind) => kind === "time" ? /* @__PURE__ */ jsx37(DatePickerTimePanel, {}) : renderDatePanel();
+  const renderPanel = (kind) => kind === "time" ? /* @__PURE__ */ jsx38(DatePickerTimePanel, {}) : renderDatePanel();
   return /* @__PURE__ */ jsxs28(
     "div",
     {
@@ -7022,7 +6886,7 @@ function DatePickerCalendar({ className }) {
       "aria-label": "Calendar",
       children: [
         /* @__PURE__ */ jsxs28("div", { className: "aviala-datepicker-calendar__panel-viewport", children: [
-          panelSlide ? /* @__PURE__ */ jsx37(
+          panelSlide ? /* @__PURE__ */ jsx38(
             "div",
             {
               className: "aviala-datepicker-calendar__panel aviala-datepicker-calendar__body",
@@ -7034,7 +6898,7 @@ function DatePickerCalendar({ className }) {
             },
             `panel-exit-${panelSlide.outgoing}`
           ) : null,
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "div",
             {
               className: "aviala-datepicker-calendar__panel aviala-datepicker-calendar__body",
@@ -7052,7 +6916,7 @@ function DatePickerCalendar({ className }) {
             `panel-enter-${panel}`
           )
         ] }),
-        /* @__PURE__ */ jsx37(DatePickerPanelFooter, {})
+        /* @__PURE__ */ jsx38(DatePickerPanelFooter, {})
       ]
     }
   );
@@ -7117,7 +6981,7 @@ function DatePickerField({
     onTimeChange
   };
   return /* @__PURE__ */ jsxs28(DatePicker, { ...pickerProps, size, className, children: [
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       DatePickerTrigger,
       {
         size,
@@ -7131,7 +6995,7 @@ function DatePickerField({
         editable
       }
     ),
-    /* @__PURE__ */ jsx37(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx37(DatePickerCalendar, { className: calendarClassName }) })
+    /* @__PURE__ */ jsx38(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx38(DatePickerCalendar, { className: calendarClassName }) })
   ] });
 }
 
@@ -7142,20 +7006,20 @@ import {
   forwardRef as forwardRef28,
   useCallback as useCallback13,
   useEffect as useEffect8,
-  useMemo as useMemo8,
+  useMemo as useMemo9,
   useRef as useRef10,
   useState as useState12
 } from "react";
 
 // src/components/time-picker/time-picker-context.tsx
 import { createContext as createContext7, useContext as useContext7 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var TimePickerContext = createContext7(null);
 function TimePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx38(TimePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx39(TimePickerContext.Provider, { value, children });
 }
 function useTimePickerContext() {
   const context = useContext7(TimePickerContext);
@@ -7166,22 +7030,7 @@ function useTimePickerContext() {
 }
 
 // src/components/time-picker/time-picker.tsx
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
-function renderSlotIcon7(node) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ jsx39(
-    "span",
-    {
-      className: "aviala-timepicker-trigger__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      children: content
-    }
-  );
-}
+import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 function TimePicker({
   children,
   value: valueProp,
@@ -7244,7 +7093,7 @@ function TimePicker({
     },
     [disabled, isOpenControlled, onOpenChange]
   );
-  const contextValue = useMemo8(
+  const contextValue = useMemo9(
     () => ({
       open,
       disabled,
@@ -7254,7 +7103,7 @@ function TimePicker({
     }),
     [disabled, open, size, value, setValue]
   );
-  return /* @__PURE__ */ jsx39(TimePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx39(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx39("div", { className: cn("inline-flex", className), children }) }) });
+  return /* @__PURE__ */ jsx40(TimePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx40(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx40("div", { className: cn("inline-flex", className), children }) }) });
 }
 var TimePickerTrigger = forwardRef28(
   ({
@@ -7274,7 +7123,7 @@ var TimePickerTrigger = forwardRef28(
     const disabled = disabledProp ?? disabledContext;
     const formatted = displayValue !== void 0 ? displayValue : formatTimeValue(value.hours, value.minutes);
     const hasValue = formatted != null && formatted !== "";
-    return /* @__PURE__ */ jsx39(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsx40(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs29(
       "button",
       {
         ref,
@@ -7289,10 +7138,11 @@ var TimePickerTrigger = forwardRef28(
         "aria-haspopup": "dialog",
         ...props,
         children: [
-          renderSlotIcon7(
-            leftIcon ?? /* @__PURE__ */ jsx39(TimeAndDateClock2, { level: "text", biggerSize: true, "aria-hidden": true })
+          renderSlotIcon(
+            leftIcon ?? /* @__PURE__ */ jsx40(TimeAndDateClock2, { level: "text", biggerSize: true, "aria-hidden": true }),
+            "aviala-timepicker-trigger__slot"
           ),
-          /* @__PURE__ */ jsx39("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ jsx40(
             "span",
             {
               className: cn(
@@ -7303,7 +7153,7 @@ var TimePickerTrigger = forwardRef28(
               children: hasValue ? formatted : placeholder
             }
           ) }),
-          renderSlotIcon7(rightIcon)
+          renderSlotIcon(rightIcon, "aviala-timepicker-trigger__slot")
         ]
       }
     ) });
@@ -7319,7 +7169,7 @@ var TimePickerContent = forwardRef28(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx39(
+    const content = /* @__PURE__ */ jsx40(
       PopoverPrimitive5.Content,
       {
         ref,
@@ -7327,17 +7177,17 @@ var TimePickerContent = forwardRef28(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx39(TimePickerPanel, {})
+        children: children ?? /* @__PURE__ */ jsx40(TimePickerPanel, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx39(PopoverPrimitive5.Portal, { children: content });
+    return /* @__PURE__ */ jsx40(PopoverPrimitive5.Portal, { children: content });
   }
 );
 TimePickerContent.displayName = "TimePickerContent";
 function TimePickerPanel({ className }) {
   const { value, setValue } = useTimePickerContext();
-  return /* @__PURE__ */ jsx39("div", { className: cn("aviala-timepicker-panel", className), role: "application", "aria-label": "Time picker", children: /* @__PURE__ */ jsx39(TimePickerWheels, { value, onChange: setValue }) });
+  return /* @__PURE__ */ jsx40("div", { className: cn("aviala-timepicker-panel", className), role: "application", "aria-label": "Time picker", children: /* @__PURE__ */ jsx40(TimePickerWheels, { value, onChange: setValue }) });
 }
 function TimePickerField({
   contentClassName,
@@ -7370,7 +7220,7 @@ function TimePickerField({
       size,
       className,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           TimePickerTrigger,
           {
             size,
@@ -7381,7 +7231,7 @@ function TimePickerField({
             error
           }
         ),
-        /* @__PURE__ */ jsx39(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx39(TimePickerPanel, { className: panelClassName }) })
+        /* @__PURE__ */ jsx40(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx40(TimePickerPanel, { className: panelClassName }) })
       ]
     }
   );
@@ -7392,13 +7242,11 @@ 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";
 
 // src/components/overlay-pointer.tsx
-import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 var TOOLTIP_POINTER = {
   width: 14,
   height: 5,
@@ -7419,7 +7267,7 @@ function OverlayPointerSvg({
   ...props
 }) {
   const isPopover = variant === "popover";
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "svg",
     {
       ...props,
@@ -7433,15 +7281,15 @@ function OverlayPointerSvg({
       className,
       style: { ...style, width, height },
       children: isPopover ? /* @__PURE__ */ jsxs30(Fragment5, { children: [
-        /* @__PURE__ */ jsx40("path", { d: path, className: "aviala-popover-content__arrow-outline" }),
-        /* @__PURE__ */ jsx40("path", { d: path, className: "aviala-popover-content__arrow-fill" })
-      ] }) : /* @__PURE__ */ jsx40("path", { d: path })
+        /* @__PURE__ */ jsx41("path", { d: path, className: "aviala-popover-content__arrow-outline" }),
+        /* @__PURE__ */ jsx41("path", { d: path, className: "aviala-popover-content__arrow-fill" })
+      ] }) : /* @__PURE__ */ jsx41("path", { d: path })
     }
   );
 }
 
 // src/components/popover.tsx
-import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 function Popover({
   open: openProp,
   defaultOpen = false,
@@ -7452,42 +7300,14 @@ 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]
   );
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     PopoverPrimitive6.Root,
     {
       open,
@@ -7508,8 +7328,13 @@ var PopoverContent = forwardRef29(
     collisionPadding = 8,
     portalled = true,
     showArrow = false,
+    flush = false,
+    appearance = "default",
     ...props
   }, ref) => {
+    const isDefaultAppearance = appearance === "default";
+    const surfaceLevel = appearance === "tooltip" ? "caption" : "text";
+    const pointer = isDefaultAppearance ? POPOVER_POINTER : TOOLTIP_POINTER;
     const content = /* @__PURE__ */ jsxs31(
       PopoverPrimitive6.Content,
       {
@@ -7517,24 +7342,35 @@ var PopoverContent = forwardRef29(
         align,
         sideOffset,
         collisionPadding,
+        "data-appearance": appearance,
         className: cn("aviala-popover-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx41("div", { className: cn("aviala-popover-content__surface", typographyVariants({ level: "text" })), children }),
-          showArrow ? /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(
+            "div",
+            {
+              className: cn(
+                "aviala-popover-content__surface",
+                typographyVariants({ level: surfaceLevel })
+              ),
+              "data-flush": flush ? "true" : void 0,
+              children
+            }
+          ),
+          showArrow ? /* @__PURE__ */ jsx42(
             PopoverPrimitive6.Arrow,
             {
               asChild: true,
-              width: POPOVER_POINTER.width,
-              height: POPOVER_POINTER.height,
-              children: /* @__PURE__ */ jsx41(
+              width: pointer.width,
+              height: pointer.height,
+              children: /* @__PURE__ */ jsx42(
                 OverlayPointerSvg,
                 {
-                  variant: "popover",
+                  variant: isDefaultAppearance ? "popover" : "default",
                   className: "aviala-popover-content__arrow",
-                  width: POPOVER_POINTER.width,
-                  height: POPOVER_POINTER.height,
-                  path: POPOVER_POINTER.path
+                  width: pointer.width,
+                  height: pointer.height,
+                  path: pointer.path
                 }
               )
             }
@@ -7543,11 +7379,140 @@ var PopoverContent = forwardRef29(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx41(PopoverPrimitive6.Portal, { children: content });
+    return /* @__PURE__ */ jsx42(PopoverPrimitive6.Portal, { children: content });
   }
 );
 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 jsx43, 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__ */ jsx43(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx43(
+        PopoverContent,
+        {
+          side,
+          align,
+          sideOffset,
+          collisionPadding,
+          showArrow,
+          className: contentClassName,
+          children: content
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs32(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx43(
+      PopoverTrigger,
+      {
+        asChild: true,
+        onMouseEnter: openNow,
+        onMouseLeave: closeSoon,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") keyboardOpenRef.current = true;
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx43(
+      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 +7522,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 jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
 var MODAL_ICON_SIZE = 16;
 var modalContentVariants = cva10("aviala-modal-content", {
   variants: {
@@ -7580,13 +7545,13 @@ function renderModalIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx42("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx44("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__ */ jsx44(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -7605,24 +7570,24 @@ var ModalContent = forwardRef30(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const overlay = showOverlay ? /* @__PURE__ */ jsx42(ModalOverlay, {}) : null;
-    const panel = /* @__PURE__ */ jsx42(
+    const overlay = showOverlay ? /* @__PURE__ */ jsx44(ModalOverlay, {}) : null;
+    const panel = /* @__PURE__ */ jsx44(
       DialogPrimitive.Content,
       {
         ref,
         className: cn(modalContentVariants({ size }), className),
         onOpenAutoFocus,
         ...props,
-        children: /* @__PURE__ */ jsx42("div", { className: "aviala-modal-content__surface", children })
+        children: /* @__PURE__ */ jsx44("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 +7603,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__ */ jsx44("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__ */ jsx44("div", { className: "aviala-modal__header-main", children }),
+    showClose ? /* @__PURE__ */ jsx44(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx44(
       Button,
       {
         type: "button",
@@ -7649,28 +7614,28 @@ var ModalHeader = forwardRef30(
         iconOnly: true,
         "aria-label": closeLabel,
         className: "aviala-modal__close",
-        leftIcon: /* @__PURE__ */ jsx42(SymbolWrong2, { "aria-hidden": true })
+        leftIcon: /* @__PURE__ */ jsx44(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__ */ jsx44(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx44(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__ */ jsx44(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx44(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__ */ jsx44(ModalHeader, { ...props, children: /* @__PURE__ */ jsxs33("div", { className: "aviala-modal__header-typeface", children: [
+    /* @__PURE__ */ jsx44(ModalTitle, { children: title }),
+    description ? /* @__PURE__ */ jsx44(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__ */ jsx44("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ jsx44(
     Typeface,
     {
       className: "aviala-modal__body-typeface",
@@ -7682,21 +7647,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__ */ jsx44("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 jsx45, 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__ */ jsx45(
     TooltipPrimitive.Provider,
     {
       delayDuration,
@@ -7715,7 +7680,7 @@ var TooltipContent = forwardRef31(
     collisionPadding = 8,
     showArrow = true,
     ...props
-  }, ref) => /* @__PURE__ */ jsx43(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs33(
+  }, ref) => /* @__PURE__ */ jsx45(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs34(
     TooltipPrimitive.Content,
     {
       ref,
@@ -7724,14 +7689,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__ */ jsx45("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
+        showArrow ? /* @__PURE__ */ jsx45(
           TooltipPrimitive.Arrow,
           {
             asChild: true,
             width: TOOLTIP_POINTER.width,
             height: TOOLTIP_POINTER.height,
-            children: /* @__PURE__ */ jsx43(
+            children: /* @__PURE__ */ jsx45(
               OverlayPointerSvg,
               {
                 className: "aviala-tooltip-content__arrow",
@@ -7748,6 +7713,67 @@ var TooltipContent = forwardRef31(
 );
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
+// src/components/responsive-tooltip.tsx
+import { jsx as jsx46, 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__ */ jsx46(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx46(
+        PopoverContent,
+        {
+          appearance: "tooltip",
+          side,
+          align,
+          sideOffset,
+          collisionPadding,
+          showArrow,
+          className: contentClassName,
+          children: content
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs35(
+    Tooltip,
+    {
+      delayDuration,
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx46(
+          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 +7789,7 @@ import {
   forwardRef as forwardRef32,
   isValidElement as isValidElement14
 } from "react";
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var FEEDBACK_ICON_SIZE = 22;
 var feedbackVariants = cva11("aviala-feedback", {
   variants: {
@@ -7799,22 +7825,22 @@ function renderFeedbackIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx44("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx47("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__ */ jsx47(SymbolInformationCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ jsx44(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx47(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "wrong":
-      return /* @__PURE__ */ jsx44(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx47(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ jsx44(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx47(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "normal":
-      return /* @__PURE__ */ jsx44(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
+      return /* @__PURE__ */ jsx47(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
   }
 }
 var Feedback = forwardRef32(
@@ -7839,7 +7865,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__ */ jsx47(
       "div",
       {
         ref,
@@ -7853,9 +7879,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__ */ jsx47(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx47(
             Typeface,
             {
               className: "aviala-feedback__typeface",
@@ -7865,7 +7891,7 @@ var Feedback = forwardRef32(
               tone
             }
           ),
-          action ? /* @__PURE__ */ jsx44(
+          action ? /* @__PURE__ */ jsx47(
             Link,
             {
               level: "text",
@@ -7881,7 +7907,7 @@ var Feedback = forwardRef32(
               children: action
             }
           ) : null,
-          showClose ? /* @__PURE__ */ jsx44(
+          showClose ? /* @__PURE__ */ jsx47(
             Link,
             {
               level: "text",
@@ -7890,7 +7916,7 @@ var Feedback = forwardRef32(
               href: onClose ? "#" : void 0,
               "aria-label": closeLabel,
               className: "aviala-feedback__close",
-              leftIcon: /* @__PURE__ */ jsx44(SymbolWrong3, { "aria-hidden": true }),
+              leftIcon: /* @__PURE__ */ jsx47(SymbolWrong3, { "aria-hidden": true }),
               onClick: (event) => {
                 if (onClose) {
                   event.preventDefault();
@@ -7920,7 +7946,7 @@ import {
   forwardRef as forwardRef33,
   isValidElement as isValidElement15
 } from "react";
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 var ALERT_ICON_SIZE = 16;
 var alertVariants = cva12("aviala-alert", {
   variants: {
@@ -7956,20 +7982,20 @@ function renderAlertIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx45("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx48("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__ */ jsx48(SymbolInformationCircle3, { ...iconProps });
     case "warning":
-      return /* @__PURE__ */ jsx45(SymbolWarningCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx48(SymbolWarningCircle2, { ...iconProps });
     case "error":
-      return /* @__PURE__ */ jsx45(SymbolWrongCircle3, { ...iconProps });
+      return /* @__PURE__ */ jsx48(SymbolWrongCircle3, { ...iconProps });
     case "success":
-      return /* @__PURE__ */ jsx45(SymbolRightCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx48(SymbolRightCircle2, { ...iconProps });
   }
 }
 var Alert = forwardRef33(
@@ -7998,7 +8024,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 +8036,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__ */ jsx48(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx48(
               Typeface,
               {
                 className: "aviala-alert__typeface",
@@ -8021,7 +8047,7 @@ var Alert = forwardRef33(
                 secondary: description
               }
             ),
-            quickAction ? /* @__PURE__ */ jsx45(
+            quickAction ? /* @__PURE__ */ jsx48(
               Link,
               {
                 level: "text",
@@ -8037,7 +8063,7 @@ var Alert = forwardRef33(
                 children: quickAction
               }
             ) : null,
-            dismissible ? /* @__PURE__ */ jsx45(
+            dismissible ? /* @__PURE__ */ jsx48(
               Link,
               {
                 level: "text",
@@ -8046,7 +8072,7 @@ var Alert = forwardRef33(
                 href: onDismiss ? "#" : void 0,
                 "aria-label": closeLabel,
                 className: "aviala-alert__close",
-                leftIcon: /* @__PURE__ */ jsx45(SymbolWrong4, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx48(SymbolWrong4, { "aria-hidden": true }),
                 onClick: (event) => {
                   if (onDismiss) {
                     event.preventDefault();
@@ -8056,8 +8082,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__ */ jsx48(
               Link,
               {
                 level: "caption",
@@ -8073,7 +8099,7 @@ var Alert = forwardRef33(
                 children: action
               }
             ) : null,
-            secondaryAction ? /* @__PURE__ */ jsx45(
+            secondaryAction ? /* @__PURE__ */ jsx48(
               Link,
               {
                 level: "caption",
@@ -8107,30 +8133,30 @@ import {
   forwardRef as forwardRef34,
   isValidElement as isValidElement16
 } from "react";
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx49, 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__ */ jsx49(ListTitle, { children: title }) : null,
+    /* @__PURE__ */ jsx49(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__ */ jsx49("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx49("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__ */ jsx49("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__ */ jsx49(ListTitle, { children: label }) : null,
+    /* @__PURE__ */ jsx49(ListGroup, { children })
   ] });
 }
 var ListDivider = forwardRef34(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
     "span",
     {
       ref,
@@ -8142,13 +8168,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__ */ jsx49("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__ */ jsx49(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx49(GeneralSetting, { "aria-hidden": true }));
   const rendered = isValidElement16(content) && typeof content.type !== "string" ? cloneElement11(content, {
     width: iconSize,
     height: iconSize,
@@ -8157,7 +8183,7 @@ function renderLeadingIcon(node, leading) {
       "shrink-0"
     )
   }) : content;
-  return /* @__PURE__ */ jsx46("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx49(
     "span",
     {
       className: cn(
@@ -8188,44 +8214,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__ */ jsx49(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx49(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__ */ jsx49(
                 Button,
                 {
                   mode: "default",
                   size: "regular",
                   iconOnly: true,
                   "aria-label": "More",
-                  leftIcon: /* @__PURE__ */ jsx46(GeneralSetting, { "aria-hidden": true })
+                  leftIcon: /* @__PURE__ */ jsx49(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__ */ jsx49(ListDivider, {}),
+            /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx49(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__ */ jsx49(ListDivider, {}),
+            /* @__PURE__ */ jsx49(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__ */ jsx49(ListDivider, {}),
+            /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__select", children: select })
           ] });
       }
     };
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs38(
       "div",
       {
         ref,
@@ -8240,8 +8266,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__ */ jsx49("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__content", children: [
+            /* @__PURE__ */ jsx49("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx49(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
             renderTrailing()
           ] }) })
         ]
@@ -8257,15 +8283,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 jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 function navigationItemButtonMode(active) {
   return active ? "second" : "noBackgroundCustom";
 }
@@ -8330,11 +8356,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 +8465,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 +8479,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 +8495,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 +8552,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 +8664,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 +8700,7 @@ var Navigation = forwardRef35(
     direction = "vertical",
     dividingLine = false,
     ...props
-  }, ref) => /* @__PURE__ */ jsx47(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx47(
+  }, ref) => /* @__PURE__ */ jsx50(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx50(
     Tag2,
     {
       ref,
@@ -8656,7 +8714,7 @@ var Navigation = forwardRef35(
 );
 Navigation.displayName = "Navigation";
 var NavigationBrand = forwardRef35(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
     "div",
     {
       ref,
@@ -8668,24 +8726,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__ */ jsx50(
     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__ */ jsx50(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__ */ jsx50(
   "div",
   {
     ref,
     className: cn("aviala-navigation-section", className),
     ...props,
-    children: /* @__PURE__ */ jsx47(Typography, { level: "caption", as: "p", children })
+    children: /* @__PURE__ */ jsx50(Typography, { level: "caption", as: "p", children })
   }
 ));
 NavigationSection.displayName = "NavigationSection";
@@ -8699,7 +8757,7 @@ var NavigationGroup = forwardRef35(
       direction,
       layoutKey
     );
-    const setRefs = useCallback15(
+    const setRefs = useCallback16(
       (node) => {
         groupRef.current = node;
         if (typeof ref === "function") {
@@ -8710,14 +8768,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__ */ jsx50(
             "span",
             {
               ref: onIndicatorRef,
@@ -8743,7 +8801,7 @@ var NavigationItemGroup = forwardRef35(({ className, expanded, children, ...prop
     if (isCollapsed) inner.setAttribute("inert", "");
     else inner.removeAttribute("inert");
   }, [isCollapsed]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       ref,
@@ -8751,7 +8809,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__ */ jsx50("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
     }
   );
 });
@@ -8762,7 +8820,7 @@ function renderItemIcon3(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx47("span", { className: "aviala-navigation-item__icon", children: content });
+  return /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-item__icon", children: content });
 }
 var NavigationItem = forwardRef35(
   ({
@@ -8779,9 +8837,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__ */ jsx50(
         Typography,
         {
           level: "text",
@@ -8790,15 +8848,15 @@ var NavigationItem = forwardRef35(
           children
         }
       ),
-      rightIcon ? /* @__PURE__ */ jsx47("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+      rightIcon ? /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
     ] });
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx50(
       "span",
       {
         className: cn("aviala-navigation-item", className),
         "data-item-type": itemType,
         "data-active": isActive ? "true" : "false",
-        children: /* @__PURE__ */ jsx47(
+        children: /* @__PURE__ */ jsx50(
           Comp,
           {
             ref,
@@ -8817,7 +8875,7 @@ var NavigationItem = forwardRef35(
   }
 );
 NavigationItem.displayName = "NavigationItem";
-var NavigationActions = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx47(
+var NavigationActions = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50(
   "div",
   {
     ref,
@@ -8827,7 +8885,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__ */ jsx50(
   "div",
   {
     ref,
@@ -8853,28 +8911,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 +8940,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 +8956,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 +8969,7 @@ function NavigationItemMenu({
     }),
     [cancelClose, openMenu, scheduleClose, select, value]
   );
-  const handleOpenChange = useCallback15(
+  const handleOpenChange = useCallback16(
     (nextOpen) => {
       if (nextOpen) openedByHoverRef.current = false;
       cancelClose();
@@ -8919,7 +8977,7 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  return /* @__PURE__ */ jsx47(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx47(Popover, { open, onOpenChange: handleOpenChange, children }) });
+  return /* @__PURE__ */ jsx50(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx50(Popover, { open, onOpenChange: handleOpenChange, children }) });
 }
 var NavigationItemMenuTrigger = forwardRef35(
   ({
@@ -8933,7 +8991,7 @@ var NavigationItemMenuTrigger = forwardRef35(
     const menu = useNavigationItemMenuContext("NavigationItemMenuTrigger");
     const isActive = active ?? menu.hasSelection;
     const mode = navigationItemButtonMode(isActive);
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx50(
       "span",
       {
         className: cn("aviala-navigation-item", className),
@@ -8941,7 +8999,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__ */ jsx50(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs39(
           "button",
           {
             ref,
@@ -8954,7 +9012,7 @@ var NavigationItemMenuTrigger = forwardRef35(
             ...props,
             children: [
               renderItemIcon3(leftIcon),
-              /* @__PURE__ */ jsx47(
+              /* @__PURE__ */ jsx50(
                 Typography,
                 {
                   level: "text",
@@ -8963,7 +9021,7 @@ var NavigationItemMenuTrigger = forwardRef35(
                   children
                 }
               ),
-              rightIcon ? /* @__PURE__ */ jsx47("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+              rightIcon ? /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
             ]
           }
         ) })
@@ -8984,7 +9042,7 @@ var NavigationItemMenuContent = forwardRef35(
   }, ref) => {
     const direction = useNavigationDirection();
     const menu = useNavigationItemMenuContext("NavigationItemMenuContent");
-    return /* @__PURE__ */ jsx47(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx50(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx50(
       PopoverPrimitive7.Content,
       {
         ref,
@@ -9019,7 +9077,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 +9097,7 @@ var NavigationItemMenuItem = forwardRef35(
         ...props,
         children: [
           renderItemIcon3(leftIcon),
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx50(
             Typography,
             {
               level: "text",
@@ -9048,7 +9106,7 @@ var NavigationItemMenuItem = forwardRef35(
               children
             }
           ),
-          rightIcon ? /* @__PURE__ */ jsx47("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
+          rightIcon ? /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
         ]
       }
     );
@@ -9060,7 +9118,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 jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var sliderVariants = cva13("aviala-slider", {
   variants: {
     size: {
@@ -9094,7 +9152,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 +9170,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__ */ jsx51(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ jsx51(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
+          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx51(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
         ]
       }
     );
@@ -9127,9 +9185,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 jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 var uploadVariants = cva14("aviala-upload aviala-focus-ring", {
   variants: {
     style: {
@@ -9160,7 +9218,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 +9237,7 @@ var Upload = forwardRef37(
         onChange?.(event.dataTransfer.files);
       }
     };
-    return /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs41(
       "div",
       {
         ref,
@@ -9210,7 +9268,7 @@ var Upload = forwardRef37(
         onDrop: handleDrop,
         ...props,
         children: [
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx52(
             "input",
             {
               ref: inputRef,
@@ -9225,8 +9283,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__ */ jsx52("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx52(GeneralUpload, { width: 16, height: 16 }) }),
+          resolvedStyle === "large" ? /* @__PURE__ */ jsx52(
             Typeface,
             {
               className: "aviala-upload__typeface",
@@ -9234,7 +9292,7 @@ var Upload = forwardRef37(
               primary: title,
               secondary: description
             }
-          ) : /* @__PURE__ */ jsx49(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
+          ) : /* @__PURE__ */ jsx52(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
         ]
       }
     );
@@ -9244,14 +9302,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 jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var LOOP_SECTIONS2 = 3;
 var MIDDLE_SECTION2 = 1;
 function normalizeIndex2(index, length) {
@@ -9279,7 +9337,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__ */ jsx53("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
 function ScrollPickerColumn({
   className,
@@ -9300,18 +9358,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 +9377,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 +9390,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 +9436,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 +9459,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 +9476,7 @@ function ScrollPickerColumn({
       }
     };
   }, [settleScroll]);
-  useEffect11(() => {
+  useEffect12(() => {
     const container = scrollRef.current;
     if (!container) return;
     const onWheel = (event) => {
@@ -9476,9 +9534,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__ */ jsx53("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ jsxs42("div", { className: "aviala-scroll-picker-column__viewport", children: [
+    /* @__PURE__ */ jsx53("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
+    /* @__PURE__ */ jsx53(
       "div",
       {
         ref: scrollRef,
@@ -9489,12 +9547,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__ */ jsx53("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__ */ jsx53("li", { className: "contents", children: /* @__PURE__ */ jsx53(
             ScrollPickerItem,
             {
               id: isSelected ? selectedOptionId : optionId,
@@ -9520,7 +9578,7 @@ function ScrollPickerItem({
   className,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx53(
     "button",
     {
       type: "button",
@@ -9546,11 +9604,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 jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 var BreadcrumbSizeContext = createContext9("default");
 function breadcrumbTypeLevel(size) {
   return size === "small" ? "caption" : "text";
@@ -9569,7 +9627,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__ */ jsx54(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx54(
       "nav",
       {
         ref,
@@ -9577,7 +9635,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__ */ jsx54("ol", { className: "aviala-breadcrumb__list", children })
       }
     ) });
   }
@@ -9586,9 +9644,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__ */ jsx54("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
+      children != null ? /* @__PURE__ */ jsx54(
         Typography,
         {
           level: breadcrumbTypeLevel(size),
@@ -9598,13 +9656,13 @@ var BreadcrumbItem = forwardRef38(
         }
       ) : null
     ] });
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx54(
       "li",
       {
         ref,
         className: cn("aviala-breadcrumb-item-wrap", className),
         ...props,
-        children: href != null ? /* @__PURE__ */ jsx51(
+        children: href != null ? /* @__PURE__ */ jsx54(
           "a",
           {
             href,
@@ -9613,7 +9671,7 @@ var BreadcrumbItem = forwardRef38(
             "aria-current": current ? "page" : void 0,
             children: label
           }
-        ) : onClick != null ? /* @__PURE__ */ jsx51(
+        ) : onClick != null ? /* @__PURE__ */ jsx54(
           "button",
           {
             type: "button",
@@ -9623,7 +9681,7 @@ var BreadcrumbItem = forwardRef38(
             onClick,
             children: label
           }
-        ) : /* @__PURE__ */ jsx51(
+        ) : /* @__PURE__ */ jsx54(
           "span",
           {
             className: "aviala-breadcrumb-item",
@@ -9640,7 +9698,7 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbSeparator = forwardRef38(
   ({ className, children = "/", ...props }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx54(
       "li",
       {
         ref,
@@ -9648,7 +9706,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__ */ jsx54(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
       }
     );
   }
@@ -9663,12 +9721,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__ */ jsx54(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
+      showChevron ? /* @__PURE__ */ jsx54("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx54(DirectionArrowRightLight3, { width: 14, height: 14, thickness: "Light" }) }) : null
     ] });
     if (href != null) {
-      return /* @__PURE__ */ jsx51(
+      return /* @__PURE__ */ jsx54(
         "a",
         {
           ref,
@@ -9680,7 +9738,7 @@ var BreadcrumbEllipsisItem = forwardRef38(
         }
       );
     }
-    return /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsx54(
       "button",
       {
         ref,
@@ -9707,10 +9765,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 +9776,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__ */ jsx54(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
+    const trigger = /* @__PURE__ */ jsx54(
       "button",
       {
         type: "button",
@@ -9738,9 +9796,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__ */ jsx54("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ jsxs43(Popover, { open: activated, onOpenChange: setActivated, children: [
+      /* @__PURE__ */ jsx54(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx54(
         PopoverContent,
         {
           className: "aviala-breadcrumb-ellipsis-menu",
@@ -9749,7 +9807,7 @@ var BreadcrumbEllipsis = forwardRef38(
           sideOffset: 7,
           showArrow: false,
           role: "menu",
-          children: /* @__PURE__ */ jsx51("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
+          children: /* @__PURE__ */ jsx54("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
         }
       )
     ] }) : trigger });
@@ -9761,7 +9819,7 @@ BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 import {
   forwardRef as forwardRef39
 } from "react";
-import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var Pagehead = forwardRef39(
   ({
     className,
@@ -9772,16 +9830,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__ */ jsx55("div", { className: "aviala-pagehead__back", children: back }) : null,
+      /* @__PURE__ */ jsxs44("div", { className: "aviala-pagehead__title-block", children: [
+        breadcrumb != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
+        title != null || description != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ jsx55(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
         children
       ] })
     ] }),
-    actions != null ? /* @__PURE__ */ jsx52("div", { className: "aviala-pagehead__actions", children: actions }) : null
+    actions != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-pagehead__actions", children: actions }) : null
   ] })
 );
 Pagehead.displayName = "Pagehead";
@@ -9796,7 +9854,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 jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 var stepsVariants = cva16("aviala-steps", {
   variants: {
     direction: {
@@ -9809,7 +9867,7 @@ var stepsVariants = cva16("aviala-steps", {
   }
 });
 var Steps = forwardRef40(
-  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx53(
+  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx56(
     "div",
     {
       ref,
@@ -9824,20 +9882,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__ */ jsx56(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__ */ jsx56(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__ */ jsx56(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__ */ jsx56(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__ */ jsx56(
     "span",
     {
       ref,
@@ -9859,7 +9917,7 @@ var StepsItem = forwardRef40(
     icon,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs43(
+  }, ref) => /* @__PURE__ */ jsxs45(
     "div",
     {
       ref,
@@ -9867,9 +9925,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__ */ jsx56(StepsIcon, { state, index }),
+        /* @__PURE__ */ jsxs45("div", { className: "aviala-steps-item__body", children: [
+          title != null ? /* @__PURE__ */ jsx56(
             Typography,
             {
               level: "subtitle",
@@ -9878,7 +9936,7 @@ var StepsItem = forwardRef40(
               children: title
             }
           ) : null,
-          description != null ? /* @__PURE__ */ jsx53(
+          description != null ? /* @__PURE__ */ jsx56(
             Typography,
             {
               level: "text",
@@ -9902,9 +9960,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 jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
 function buildPageList(page, pageCount) {
   if (pageCount <= 7) {
     return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -9927,6 +9985,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 +10013,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 +10037,7 @@ var Pagination = forwardRef41(
       setPage(parsed);
       setJumpValue("");
     };
-    return /* @__PURE__ */ jsxs44(
+    return /* @__PURE__ */ jsxs46(
       "div",
       {
         ref,
@@ -9977,8 +10046,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__ */ jsx57(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -9986,35 +10055,69 @@ var Pagination = forwardRef41(
                 iconOnly: true,
                 "aria-label": "Previous page",
                 disabled: currentPage <= 1,
-                leftIcon: /* @__PURE__ */ jsx54(DirectionArrowLeftLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx57(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__ */ jsx57("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__ */ jsx57(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+                      "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__ */ jsx57(Typography, { level: "text", as: "span", children: "\u2026" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx57(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ jsx57("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ jsx57(
+                      "button",
+                      {
+                        type: "button",
+                        "data-size": "regular",
+                        className: cn(
+                          buttonVariants({ mode: "noBackgroundCustom", compact: true }),
+                          "aviala-pagination__ellipsis-page"
+                        ),
+                        onClick: () => {
+                          setPage(p);
+                          setOpenEllipsis(null);
+                        },
+                        children: /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: p })
+                      },
+                      p
+                    )) }) })
+                  ]
                 },
                 `ellipsis-${index}`
-              ) : /* @__PURE__ */ jsx54(
+              ) : /* @__PURE__ */ jsx57(
                 "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__ */ jsx57(Typography, { level: "text", as: "span", children: item })
                 },
                 item
               )
             ) }),
-            /* @__PURE__ */ jsx54(
+            /* @__PURE__ */ jsx57(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10022,14 +10125,14 @@ var Pagination = forwardRef41(
                 iconOnly: true,
                 "aria-label": "Next page",
                 disabled: currentPage >= safePageCount,
-                leftIcon: /* @__PURE__ */ jsx54(DirectionArrowRightLight4, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx57(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__ */ jsx57(Typography, { level: "text", as: "span", children: jumpLabel }),
+            /* @__PURE__ */ jsx57(
               Input,
               {
                 className: "aviala-pagination__jump-input",
@@ -10049,15 +10152,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__ */ jsx57(Typography, { level: "text", as: "span", children: sizeLabel }),
+            /* @__PURE__ */ jsxs46(
               Select,
               {
                 value: String(pageSize),
                 onValueChange: (value) => setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx57(
                     SelectTrigger,
                     {
                       size: "regular",
@@ -10065,7 +10168,7 @@ var Pagination = forwardRef41(
                       "aria-label": "Page size"
                     }
                   ),
-                  /* @__PURE__ */ jsx54(SelectContent, { children: /* @__PURE__ */ jsx54(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx57(SelectContent, { children: /* @__PURE__ */ jsx57(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx57(
                     SelectItem,
                     {
                       value: String(option),
@@ -10095,9 +10198,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 jsx58, 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__ */ jsx58("div", { ref, className: cn("aviala-card", className), ...props, children })
 );
 Card.displayName = "Card";
 function renderCardIcon(node) {
@@ -10110,7 +10213,7 @@ function renderCardIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx55("span", { className: "aviala-card-head__icon", children: content });
+  return /* @__PURE__ */ jsx58("span", { className: "aviala-card-head__icon", children: content });
 }
 var CardHead = forwardRef42(
   ({
@@ -10128,38 +10231,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__ */ jsx58(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx58(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__ */ jsx58(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ jsx55(GeneralSetting2, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx58(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__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx58(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__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx58(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return select != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-card-head__trailing", children: select }) : null;
+          return select != null ? /* @__PURE__ */ jsx58("div", { className: "aviala-card-head__trailing", children: select }) : null;
       }
     };
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs47(
       "div",
       {
         ref,
@@ -10167,9 +10270,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__ */ jsx58(GeneralSetting2, { "aria-hidden": true })),
+            /* @__PURE__ */ jsx58("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ jsx58(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
           ] }),
           renderTrailing()
         ]
@@ -10179,7 +10282,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__ */ jsx58("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ jsx58("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children }) : children }) })
 );
 CardBody.displayName = "CardBody";
 var CardBottom = forwardRef42(
@@ -10195,46 +10298,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__ */ jsx58(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx58(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__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx58(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__ */ jsx58(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ jsx55(GeneralSetting2, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx58(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__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx58(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
           ] });
       }
     };
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx58(
       "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__ */ jsx58("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
       }
     );
   }
@@ -10247,9 +10350,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 jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
 var Table = forwardRef43(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx56(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx59(
     "div",
     {
       ref,
@@ -10262,7 +10365,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__ */ jsx59(
     "div",
     {
       ref,
@@ -10276,7 +10379,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__ */ jsx59(
     "div",
     {
       ref,
@@ -10284,7 +10387,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__ */ jsx59(Typography, { level: "caption", as: "span", children }) : children
     }
   )
 );
@@ -10299,7 +10402,7 @@ function renderCellIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx56("span", { className: "aviala-table-cell__icon", children: content });
+  return /* @__PURE__ */ jsx59("span", { className: "aviala-table-cell__icon", children: content });
 }
 var TableCell = forwardRef43(
   ({
@@ -10320,29 +10423,29 @@ var TableCell = forwardRef43(
       if (children != null) return children;
       switch (content) {
         case "checkbox":
-          return /* @__PURE__ */ jsx56(Checkbox, { ...checkboxProps });
+          return /* @__PURE__ */ jsx59(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__ */ jsx59("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx59(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__ */ jsx59(Avatar, { content: "text", level: "text", children: "A" }),
+            /* @__PURE__ */ jsx59("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx59(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "badge":
-          return badge ?? /* @__PURE__ */ jsx56(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
+          return badge ?? /* @__PURE__ */ jsx59(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
         case "switch":
-          return /* @__PURE__ */ jsx56(Switch, { ...switchProps });
+          return /* @__PURE__ */ jsx59(Switch, { ...switchProps });
         case "action":
-          return /* @__PURE__ */ jsx56("div", { className: "aviala-table-cell__actions", children: actions });
+          return /* @__PURE__ */ jsx59("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__ */ jsx59("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx59(Typography, { level: "text", as: "span", children: text }) });
       }
     };
-    return /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx59(
       "div",
       {
         ref,
@@ -10403,6 +10506,7 @@ export {
   Feedback,
   Fieldset,
   FormField,
+  HoverPopover,
   Input,
   InputGroup,
   InputGroupAddon,
@@ -10453,6 +10557,7 @@ export {
   RadioGroup,
   RadioGroupItem,
   RadioInput,
+  ResponsiveTooltip,
   Scroll,
   ScrollPicker,
   ScrollPickerColumn,