@aviala-design/spiral 2.1.0 → 2.2.0

package/dist/index.js

@@ -657,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 {
@@ -665,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: {
@@ -722,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(
   ({
@@ -761,7 +780,7 @@ var Badge = forwardRef4(
         ...props,
         children: [
           renderBadgeIcon(leftIcon, resolvedLevel),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             Typography,
             {
               level: typographyLevel,
@@ -780,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";
@@ -797,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(
   ({
@@ -852,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,
@@ -893,7 +896,7 @@ var Input = forwardRef5(
             }
           ),
           renderBadgeArea(rightBadge),
-          renderSlotIcon(rightIcon, "input.right-icon")
+          renderSlotIcon(rightIcon, "aviala-input__slot", "input.right-icon")
         ]
       }
     );
@@ -912,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") {
@@ -954,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(
@@ -1041,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) => {
@@ -1106,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",
@@ -1124,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",
@@ -1138,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 })
                   }
                 )
               ]
@@ -1160,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") {
@@ -1174,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,
@@ -1301,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,
@@ -1329,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",
@@ -1342,7 +1313,7 @@ var Textarea = forwardRef7(
                 ]
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1352,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
@@ -1391,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" }),
@@ -1410,7 +1381,7 @@ function renderIcon2(node, level) {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       className: cn(
@@ -1451,7 +1422,7 @@ var Link = forwardRef8(
       onClick?.(e);
     };
     if (asChild) {
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         Comp,
         {
           className: sharedClassName,
@@ -1481,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(
@@ -1500,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);
@@ -1734,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(
@@ -1771,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",
@@ -1791,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",
@@ -1816,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 })
         }
       );
   }
@@ -1881,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;
@@ -1916,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 = [];
   };
@@ -1967,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,
@@ -1976,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",
@@ -2027,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,
@@ -2037,7 +1992,7 @@ var SelectContent = forwardRef9(
         onCloseAutoFocus: handleCloseAutoFocus,
         ...spiralDebugId("select.content"),
         ...props,
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx11(
           SelectPrimitive.Viewport,
           {
             className: "aviala-select-viewport",
@@ -2048,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,
@@ -2088,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 })),
@@ -2113,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)
         ]
       }
@@ -2197,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);
     };
@@ -2235,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,
@@ -2265,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) => {
@@ -2283,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
         ]
       }
     ) });
@@ -2292,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,
@@ -2313,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,
@@ -2344,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: {
@@ -2417,7 +2372,7 @@ var Avatar = forwardRef11(
   }, ref) => {
     const resolvedLevel = level ?? "text";
     const resolvedContent = content ?? "text";
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "span",
       {
         ref,
@@ -2434,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",
@@ -2443,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],
@@ -2468,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: {
@@ -2516,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 })
     }
   )
 );
@@ -2553,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",
       {
@@ -2573,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,
@@ -2584,7 +2539,7 @@ var Tag = forwardRef12(
             }
           ),
           resolvedContent === "text" ? renderTagIcon(rightIcon, resolvedLevel) : null,
-          closable ? /* @__PURE__ */ jsx13(
+          closable ? /* @__PURE__ */ jsx14(
             TagClose,
             {
               "aria-label": closeLabel,
@@ -2605,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: {
@@ -2654,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,
@@ -2676,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",
@@ -2702,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",
@@ -2713,7 +2668,7 @@ var Progress = forwardRef13(
                   strokeWidth: stroke
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "circle",
                 {
                   className: "aviala-progress__ring-fill",
@@ -2740,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: {
@@ -2764,7 +2719,7 @@ var Scroll = forwardRef14(
     orientation = "vertical",
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsx15(
+  }, ref) => /* @__PURE__ */ jsx16(
     "div",
     {
       ref,
@@ -2792,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 },
@@ -2836,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}`);
     }) });
   }
 );
@@ -2858,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,
@@ -2872,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,
   {
@@ -2881,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",
@@ -2893,7 +2848,7 @@ var Checkbox = forwardRef16(({ className, round = false, ...props }, ref) => /*
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "span",
           {
             "aria-hidden": true,
@@ -2906,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,
@@ -2928,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(
   ({
@@ -2946,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",
@@ -2969,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),
@@ -2987,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" })
     ]
   }
 ));
@@ -3004,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(
   ({
@@ -3024,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",
@@ -3043,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,
   {
@@ -3055,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" })
     ]
   }
 ));
@@ -3067,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(
@@ -3091,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 }) })
         ]
       }
     );
@@ -3112,7 +3067,7 @@ import {
   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);
@@ -3127,7 +3082,7 @@ function renderIcon5(node, dimmed) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "span",
     {
       className: cn(
@@ -3576,7 +3531,7 @@ var SegmentatorGroup = forwardRef20(
       group.setPointerCapture(event.pointerId);
     };
     const thumbStyle = thumb ? buildThumbStyle() : void 0;
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       SegmentatorContext.Provider,
       {
         value: useMemo3(
@@ -3612,7 +3567,7 @@ var SegmentatorGroup = forwardRef20(
             onLostPointerCapture: finishPointerDrag,
             children: [
               children,
-              thumb && /* @__PURE__ */ jsx21(
+              thumb && /* @__PURE__ */ jsx22(
                 "span",
                 {
                   ref: onThumbRef,
@@ -3650,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,
@@ -3674,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(
@@ -3696,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,
@@ -3714,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,
@@ -3733,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
       }
@@ -3751,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",
@@ -3760,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",
@@ -3772,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
           ] })
         ]
       }
@@ -3785,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,
@@ -3801,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,
@@ -3817,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)",
@@ -3826,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,
@@ -3862,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,
@@ -3872,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
         ]
       }
@@ -4051,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,
@@ -4083,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,
@@ -4098,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",
@@ -4119,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,
@@ -4180,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",
@@ -4192,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" })),
@@ -4209,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" })),
@@ -4222,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" })),
@@ -4235,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,
@@ -4244,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" })
           ] }) })
         ]
       }
@@ -4272,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,
@@ -4285,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",
@@ -4300,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,
@@ -4323,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",
@@ -4333,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,
@@ -4351,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,
@@ -4399,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),
@@ -4418,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",
@@ -4435,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,
@@ -4478,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,
@@ -4502,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",
@@ -4510,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 }) })
       ]
     }
   ) });
@@ -4529,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,
@@ -4546,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,
@@ -4567,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,
@@ -4599,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,
@@ -4635,7 +4590,7 @@ import {
   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);
@@ -4644,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(
@@ -4681,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",
@@ -4703,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
       ] });
   }
 }
@@ -4883,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(
   ({
@@ -4909,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,
@@ -4925,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" })),
@@ -4934,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 })
             }
           )
         ]
@@ -4960,7 +4899,7 @@ var CascaderContent = forwardRef26(
     portalled = true,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx32(
+    const content = /* @__PURE__ */ jsx33(
       PopoverPrimitive3.Content,
       {
         ref,
@@ -4973,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(
@@ -4992,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 })
       }
     );
   }
@@ -5012,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(
@@ -5107,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(
@@ -5235,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) => {
@@ -5248,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,
@@ -5301,7 +5240,7 @@ function CascaderField({
       changeOnSelect,
       className,
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           CascaderTrigger,
           {
             size,
@@ -5315,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 }) })
       ]
     }
   );
@@ -5342,13 +5281,13 @@ import {
 
 // 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);
@@ -5575,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) {
@@ -5816,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,
@@ -5842,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",
@@ -5881,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);
@@ -5906,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",
@@ -5925,7 +5864,7 @@ function DatePickerMonthYearWheels({
             onChange: (nextYear) => setYearMonth(nextYear, month)
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           DatePickerTimeWheelColumn,
           {
             "aria-label": "\u6708",
@@ -5943,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",
@@ -5957,7 +5896,7 @@ function TimePickerWheels({ value, onChange, className }) {
         onChange: (hours) => onChange({ ...value, hours })
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5206\u949F",
@@ -5970,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") {
@@ -6309,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") {
@@ -6401,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",
@@ -6414,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(
@@ -6428,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),
@@ -6450,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,
@@ -6473,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(
@@ -6589,7 +6432,7 @@ var DatePickerTrigger = forwardRef27(
               ...props
             }
           ) }),
-          renderSlotIcon6(rightIcon)
+          renderSlotIcon(rightIcon, "aviala-datepicker-trigger__slot")
         ]
       }
     ) });
@@ -6605,7 +6448,7 @@ var DatePickerContent = forwardRef27(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx37(
+    const content = /* @__PURE__ */ jsx38(
       PopoverPrimitive4.Content,
       {
         ref,
@@ -6613,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";
@@ -6635,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 {
@@ -6650,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,
@@ -6661,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)
           }
@@ -6843,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(
@@ -6855,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",
@@ -6864,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(
@@ -6886,7 +6729,7 @@ function DatePickerCalendar({ className }) {
         },
         `out-${monthSlide.outgoingMonth.getFullYear()}-${monthSlide.outgoingMonth.getMonth()}`
       ) : null,
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         "div",
         {
           ref: dayGridRef,
@@ -6932,7 +6775,7 @@ function DatePickerCalendar({ className }) {
                 onFocus: () => setFocusedDay(day),
                 onKeyDown: (event) => handleDayKeyDown(event, day),
                 children: [
-                  /* @__PURE__ */ jsx37(
+                  /* @__PURE__ */ jsx38(
                     "span",
                     {
                       className: cn(
@@ -6942,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
@@ -6953,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",
@@ -6979,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",
@@ -6990,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",
@@ -7013,7 +6856,7 @@ function DatePickerCalendar({ className }) {
         },
         `exit-${viewCrossfade.outgoing}`
       ) : null,
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         "div",
         {
           className: "aviala-datepicker-calendar__view",
@@ -7034,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",
     {
@@ -7043,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",
@@ -7055,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",
@@ -7073,7 +6916,7 @@ function DatePickerCalendar({ className }) {
             `panel-enter-${panel}`
           )
         ] }),
-        /* @__PURE__ */ jsx37(DatePickerPanelFooter, {})
+        /* @__PURE__ */ jsx38(DatePickerPanelFooter, {})
       ]
     }
   );
@@ -7138,7 +6981,7 @@ function DatePickerField({
     onTimeChange
   };
   return /* @__PURE__ */ jsxs28(DatePicker, { ...pickerProps, size, className, children: [
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       DatePickerTrigger,
       {
         size,
@@ -7152,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 }) })
   ] });
 }
 
@@ -7170,13 +7013,13 @@ import {
 
 // 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);
@@ -7187,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,
@@ -7275,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(
   ({
@@ -7295,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,
@@ -7310,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(
@@ -7324,7 +7153,7 @@ var TimePickerTrigger = forwardRef28(
               children: hasValue ? formatted : placeholder
             }
           ) }),
-          renderSlotIcon7(rightIcon)
+          renderSlotIcon(rightIcon, "aviala-timepicker-trigger__slot")
         ]
       }
     ) });
@@ -7340,7 +7169,7 @@ var TimePickerContent = forwardRef28(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx39(
+    const content = /* @__PURE__ */ jsx40(
       PopoverPrimitive5.Content,
       {
         ref,
@@ -7348,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,
@@ -7391,7 +7220,7 @@ function TimePickerField({
       size,
       className,
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           TimePickerTrigger,
           {
             size,
@@ -7402,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 }) })
       ]
     }
   );
@@ -7417,7 +7246,7 @@ import {
 } 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,
@@ -7438,7 +7267,7 @@ function OverlayPointerSvg({
   ...props
 }) {
   const isPopover = variant === "popover";
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "svg",
     {
       ...props,
@@ -7452,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,
@@ -7478,7 +7307,7 @@ function Popover({
     },
     [isControlled, onOpenChange]
   );
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     PopoverPrimitive6.Root,
     {
       open,
@@ -7500,8 +7329,12 @@ var PopoverContent = forwardRef29(
     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,
       {
@@ -7509,31 +7342,35 @@ var PopoverContent = forwardRef29(
         align,
         sideOffset,
         collisionPadding,
+        "data-appearance": appearance,
         className: cn("aviala-popover-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx42(
             "div",
             {
-              className: cn("aviala-popover-content__surface", typographyVariants({ level: "text" })),
+              className: cn(
+                "aviala-popover-content__surface",
+                typographyVariants({ level: surfaceLevel })
+              ),
               "data-flush": flush ? "true" : void 0,
               children
             }
           ),
-          showArrow ? /* @__PURE__ */ jsx41(
+          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
                 }
               )
             }
@@ -7542,7 +7379,7 @@ 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;
@@ -7571,7 +7408,7 @@ function useCoarsePointer() {
 }
 
 // src/components/hover-popover.tsx
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
 function HoverPopover({
   content,
   children,
@@ -7618,8 +7455,8 @@ function HoverPopover({
   }, [clearTimers, closeDelay, setOpen]);
   if (coarse) {
     return /* @__PURE__ */ jsxs32(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx42(PopoverTrigger, { asChild: true, children }),
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx43(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx43(
         PopoverContent,
         {
           side,
@@ -7634,7 +7471,7 @@ function HoverPopover({
     ] });
   }
   return /* @__PURE__ */ jsxs32(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       PopoverTrigger,
       {
         asChild: true,
@@ -7646,7 +7483,7 @@ function HoverPopover({
         children
       }
     ),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       PopoverContent,
       {
         ref: contentRef,
@@ -7685,7 +7522,7 @@ import {
   forwardRef as forwardRef30,
   isValidElement as isValidElement13
 } from "react";
-import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs33 } 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: {
@@ -7708,13 +7545,13 @@ function renderModalIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx43("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__ */ jsx43(
+var ModalOverlay = forwardRef30(({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -7733,15 +7570,15 @@ var ModalContent = forwardRef30(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const overlay = showOverlay ? /* @__PURE__ */ jsx43(ModalOverlay, {}) : null;
-    const panel = /* @__PURE__ */ jsx43(
+    const overlay = showOverlay ? /* @__PURE__ */ jsx44(ModalOverlay, {}) : null;
+    const panel = /* @__PURE__ */ jsx44(
       DialogPrimitive.Content,
       {
         ref,
         className: cn(modalContentVariants({ size }), className),
         onOpenAutoFocus,
         ...props,
-        children: /* @__PURE__ */ jsx43("div", { className: "aviala-modal-content__surface", children })
+        children: /* @__PURE__ */ jsx44("div", { className: "aviala-modal-content__surface", children })
       }
     );
     if (!portalled) {
@@ -7766,10 +7603,10 @@ var ModalHeader = forwardRef30(
     showClose = true,
     closeLabel = "Close dialog",
     ...props
-  }, ref) => /* @__PURE__ */ jsx43("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ jsxs33("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__ */ jsx43("div", { className: "aviala-modal__header-main", children }),
-    showClose ? /* @__PURE__ */ jsx43(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44("div", { className: "aviala-modal__header-main", children }),
+    showClose ? /* @__PURE__ */ jsx44(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx44(
       Button,
       {
         type: "button",
@@ -7777,28 +7614,28 @@ var ModalHeader = forwardRef30(
         iconOnly: true,
         "aria-label": closeLabel,
         className: "aviala-modal__close",
-        leftIcon: /* @__PURE__ */ jsx43(SymbolWrong2, { "aria-hidden": true })
+        leftIcon: /* @__PURE__ */ jsx44(SymbolWrong2, { "aria-hidden": true })
       }
     ) }) : null
   ] }) })
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx43(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx43(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
+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__ */ jsx43(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx43(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__ */ jsx43(ModalHeader, { ...props, children: /* @__PURE__ */ jsxs33("div", { className: "aviala-modal__header-typeface", children: [
-    /* @__PURE__ */ jsx43(ModalTitle, { children: title }),
-    description ? /* @__PURE__ */ jsx43(ModalDescription, { children: description }) : null
+  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__ */ jsx43("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ jsx43(
+  ({ 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",
@@ -7810,21 +7647,21 @@ var ModalBody = forwardRef30(
 );
 ModalBody.displayName = "ModalBody";
 var ModalFooter = forwardRef30(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43("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 jsx44, jsxs as jsxs34 } 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__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     TooltipPrimitive.Provider,
     {
       delayDuration,
@@ -7843,7 +7680,7 @@ var TooltipContent = forwardRef31(
     collisionPadding = 8,
     showArrow = true,
     ...props
-  }, ref) => /* @__PURE__ */ jsx44(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs34(
+  }, ref) => /* @__PURE__ */ jsx45(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs34(
     TooltipPrimitive.Content,
     {
       ref,
@@ -7852,14 +7689,14 @@ var TooltipContent = forwardRef31(
       className: cn("aviala-tooltip-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx44("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
-        showArrow ? /* @__PURE__ */ jsx44(
+        /* @__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__ */ jsx44(
+            children: /* @__PURE__ */ jsx45(
               OverlayPointerSvg,
               {
                 className: "aviala-tooltip-content__arrow",
@@ -7877,7 +7714,7 @@ var TooltipContent = forwardRef31(
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/responsive-tooltip.tsx
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 function ResponsiveTooltip({
   content,
   children,
@@ -7895,10 +7732,11 @@ function ResponsiveTooltip({
   const coarse = useCoarsePointer();
   if (coarse) {
     return /* @__PURE__ */ jsxs35(Popover, { open, defaultOpen, onOpenChange, children: [
-      /* @__PURE__ */ jsx45(PopoverTrigger, { asChild: true, children }),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx46(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx46(
         PopoverContent,
         {
+          appearance: "tooltip",
           side,
           align,
           sideOffset,
@@ -7918,8 +7756,8 @@ function ResponsiveTooltip({
       defaultOpen,
       onOpenChange,
       children: [
-        /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx46(
           TooltipContent,
           {
             side,
@@ -7951,7 +7789,7 @@ import {
   forwardRef as forwardRef32,
   isValidElement as isValidElement14
 } from "react";
-import { jsx as jsx46, jsxs as jsxs36 } 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: {
@@ -7987,22 +7825,22 @@ function renderFeedbackIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx46("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__ */ jsx46(SymbolInformationCircle2, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx47(SymbolInformationCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ jsx46(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx47(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "wrong":
-      return /* @__PURE__ */ jsx46(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx47(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ jsx46(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx47(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "normal":
-      return /* @__PURE__ */ jsx46(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
+      return /* @__PURE__ */ jsx47(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
   }
 }
 var Feedback = forwardRef32(
@@ -8027,7 +7865,7 @@ var Feedback = forwardRef32(
     const tone = mode === "primary" ? "white" : "default";
     const isSmall = resolvedSize === "small";
     const resolvedRole = resolvedType === "wrong" ? "alert" : "status";
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         ref,
@@ -8043,7 +7881,7 @@ var Feedback = forwardRef32(
         ...props,
         children: /* @__PURE__ */ jsxs36("div", { className: "aviala-feedback__body", children: [
           renderFeedbackIcon(icon ?? defaultStatusIcon(resolvedType, mode)),
-          isSmall ? /* @__PURE__ */ jsx46(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx46(
+          isSmall ? /* @__PURE__ */ jsx47(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx47(
             Typeface,
             {
               className: "aviala-feedback__typeface",
@@ -8053,7 +7891,7 @@ var Feedback = forwardRef32(
               tone
             }
           ),
-          action ? /* @__PURE__ */ jsx46(
+          action ? /* @__PURE__ */ jsx47(
             Link,
             {
               level: "text",
@@ -8069,7 +7907,7 @@ var Feedback = forwardRef32(
               children: action
             }
           ) : null,
-          showClose ? /* @__PURE__ */ jsx46(
+          showClose ? /* @__PURE__ */ jsx47(
             Link,
             {
               level: "text",
@@ -8078,7 +7916,7 @@ var Feedback = forwardRef32(
               href: onClose ? "#" : void 0,
               "aria-label": closeLabel,
               className: "aviala-feedback__close",
-              leftIcon: /* @__PURE__ */ jsx46(SymbolWrong3, { "aria-hidden": true }),
+              leftIcon: /* @__PURE__ */ jsx47(SymbolWrong3, { "aria-hidden": true }),
               onClick: (event) => {
                 if (onClose) {
                   event.preventDefault();
@@ -8108,7 +7946,7 @@ import {
   forwardRef as forwardRef33,
   isValidElement as isValidElement15
 } from "react";
-import { jsx as jsx47, jsxs as jsxs37 } 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: {
@@ -8144,20 +7982,20 @@ function renderAlertIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx47("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__ */ jsx47(SymbolInformationCircle3, { ...iconProps });
+      return /* @__PURE__ */ jsx48(SymbolInformationCircle3, { ...iconProps });
     case "warning":
-      return /* @__PURE__ */ jsx47(SymbolWarningCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx48(SymbolWarningCircle2, { ...iconProps });
     case "error":
-      return /* @__PURE__ */ jsx47(SymbolWrongCircle3, { ...iconProps });
+      return /* @__PURE__ */ jsx48(SymbolWrongCircle3, { ...iconProps });
     case "success":
-      return /* @__PURE__ */ jsx47(SymbolRightCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx48(SymbolRightCircle2, { ...iconProps });
   }
 }
 var Alert = forwardRef33(
@@ -8200,7 +8038,7 @@ var Alert = forwardRef33(
         children: [
           /* @__PURE__ */ jsxs37("div", { className: "aviala-alert__body", children: [
             showIcon ? renderAlertIcon(icon ?? defaultStatusIcon2(resolvedType)) : null,
-            isSmall ? /* @__PURE__ */ jsx47(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx47(
+            isSmall ? /* @__PURE__ */ jsx48(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx48(
               Typeface,
               {
                 className: "aviala-alert__typeface",
@@ -8209,7 +8047,7 @@ var Alert = forwardRef33(
                 secondary: description
               }
             ),
-            quickAction ? /* @__PURE__ */ jsx47(
+            quickAction ? /* @__PURE__ */ jsx48(
               Link,
               {
                 level: "text",
@@ -8225,7 +8063,7 @@ var Alert = forwardRef33(
                 children: quickAction
               }
             ) : null,
-            dismissible ? /* @__PURE__ */ jsx47(
+            dismissible ? /* @__PURE__ */ jsx48(
               Link,
               {
                 level: "text",
@@ -8234,7 +8072,7 @@ var Alert = forwardRef33(
                 href: onDismiss ? "#" : void 0,
                 "aria-label": closeLabel,
                 className: "aviala-alert__close",
-                leftIcon: /* @__PURE__ */ jsx47(SymbolWrong4, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx48(SymbolWrong4, { "aria-hidden": true }),
                 onClick: (event) => {
                   if (onDismiss) {
                     event.preventDefault();
@@ -8245,7 +8083,7 @@ var Alert = forwardRef33(
             ) : null
           ] }),
           hasActions ? /* @__PURE__ */ jsxs37("div", { className: "aviala-alert__actions", children: [
-            action ? /* @__PURE__ */ jsx47(
+            action ? /* @__PURE__ */ jsx48(
               Link,
               {
                 level: "caption",
@@ -8261,7 +8099,7 @@ var Alert = forwardRef33(
                 children: action
               }
             ) : null,
-            secondaryAction ? /* @__PURE__ */ jsx47(
+            secondaryAction ? /* @__PURE__ */ jsx48(
               Link,
               {
                 level: "caption",
@@ -8295,30 +8133,30 @@ import {
   forwardRef as forwardRef34,
   isValidElement as isValidElement16
 } from "react";
-import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 var List = forwardRef34(
   ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs38("div", { ref, className: cn("aviala-list", className), ...props, children: [
-    title != null ? /* @__PURE__ */ jsx48(ListTitle, { children: title }) : null,
-    /* @__PURE__ */ jsx48(ListGroup, { children })
+    title != null ? /* @__PURE__ */ jsx49(ListTitle, { children: title }) : null,
+    /* @__PURE__ */ jsx49(ListGroup, { children })
   ] })
 );
 List.displayName = "List";
 var ListTitle = forwardRef34(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx48("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx48("span", { className: cn(typographyVariants({ level: "text" })), children }) })
+  ({ 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__ */ jsx48("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__ */ jsxs38("div", { className: cn("aviala-list", className), children: [
-    label != null ? /* @__PURE__ */ jsx48(ListTitle, { children: label }) : null,
-    /* @__PURE__ */ jsx48(ListGroup, { children })
+    label != null ? /* @__PURE__ */ jsx49(ListTitle, { children: label }) : null,
+    /* @__PURE__ */ jsx49(ListGroup, { children })
   ] });
 }
 var ListDivider = forwardRef34(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
     "span",
     {
       ref,
@@ -8330,13 +8168,13 @@ var ListDivider = forwardRef34(
 );
 ListDivider.displayName = "ListDivider";
 var ListSeparator = forwardRef34(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx48("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__ */ jsx48(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx48(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,
@@ -8345,7 +8183,7 @@ function renderLeadingIcon(node, leading) {
       "shrink-0"
     )
   }) : content;
-  return /* @__PURE__ */ jsx48("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx49(
     "span",
     {
       className: cn(
@@ -8376,7 +8214,7 @@ var ListItem = forwardRef34(
     ...props
   }, ref) => {
     const isInteractive = interactive ?? onClick != null;
-    const primaryAction = action ?? /* @__PURE__ */ jsx48(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx48(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) {
@@ -8384,32 +8222,32 @@ var ListItem = forwardRef34(
           return /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__more", children: [
             /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
               primaryAction,
-              secondaryAction ?? /* @__PURE__ */ jsx48(
+              secondaryAction ?? /* @__PURE__ */ jsx49(
                 Button,
                 {
                   mode: "default",
                   size: "regular",
                   iconOnly: true,
                   "aria-label": "More",
-                  leftIcon: /* @__PURE__ */ jsx48(GeneralSetting, { "aria-hidden": true })
+                  leftIcon: /* @__PURE__ */ jsx49(GeneralSetting, { "aria-hidden": true })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx48(ListDivider, {}),
-            /* @__PURE__ */ jsx48("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx48(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__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx48(ListDivider, {}),
-            /* @__PURE__ */ jsx48(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx49(ListDivider, {}),
+            /* @__PURE__ */ jsx49(Switch, { ...switchProps })
           ] });
         case "select":
         default:
           return /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx48(ListDivider, {}),
-            /* @__PURE__ */ jsx48("span", { className: "aviala-list-item__select", children: select })
+            /* @__PURE__ */ jsx49(ListDivider, {}),
+            /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__select", children: select })
           ] });
       }
     };
@@ -8428,8 +8266,8 @@ var ListItem = forwardRef34(
         ...props,
         children: [
           renderLeadingIcon(icon, leading),
-          /* @__PURE__ */ jsx48("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__content", children: [
-            /* @__PURE__ */ jsx48("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx48(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
+          /* @__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()
           ] }) })
         ]
@@ -8453,7 +8291,7 @@ import {
   useRef as useRef12,
   useState as useState16
 } from "react";
-import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs39 } 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";
 }
@@ -8862,7 +8700,7 @@ var Navigation = forwardRef35(
     direction = "vertical",
     dividingLine = false,
     ...props
-  }, ref) => /* @__PURE__ */ jsx49(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx49(
+  }, ref) => /* @__PURE__ */ jsx50(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx50(
     Tag2,
     {
       ref,
@@ -8876,7 +8714,7 @@ var Navigation = forwardRef35(
 );
 Navigation.displayName = "Navigation";
 var NavigationBrand = forwardRef35(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
     "div",
     {
       ref,
@@ -8888,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__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     Comp,
     {
       ref,
       className: cn("aviala-navigation-brand__title aviala-focus-ring", className),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx49(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__ */ jsx49(
+var NavigationSection = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50(
   "div",
   {
     ref,
     className: cn("aviala-navigation-section", className),
     ...props,
-    children: /* @__PURE__ */ jsx49(Typography, { level: "caption", as: "p", children })
+    children: /* @__PURE__ */ jsx50(Typography, { level: "caption", as: "p", children })
   }
 ));
 NavigationSection.displayName = "NavigationSection";
@@ -8937,7 +8775,7 @@ var NavigationGroup = forwardRef35(
         className: cn("aviala-navigation-group", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(
             "span",
             {
               ref: onIndicatorRef,
@@ -8963,7 +8801,7 @@ var NavigationItemGroup = forwardRef35(({ className, expanded, children, ...prop
     if (isCollapsed) inner.setAttribute("inert", "");
     else inner.removeAttribute("inert");
   }, [isCollapsed]);
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       ref,
@@ -8971,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__ */ jsx49("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
     }
   );
 });
@@ -8982,7 +8820,7 @@ function renderItemIcon3(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx49("span", { className: "aviala-navigation-item__icon", children: content });
+  return /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-item__icon", children: content });
 }
 var NavigationItem = forwardRef35(
   ({
@@ -9001,7 +8839,7 @@ var NavigationItem = forwardRef35(
     const mode = navigationItemButtonMode(isActive);
     const controlContent = /* @__PURE__ */ jsxs39(Fragment7, { children: [
       renderItemIcon3(leftIcon),
-      /* @__PURE__ */ jsx49(
+      /* @__PURE__ */ jsx50(
         Typography,
         {
           level: "text",
@@ -9010,15 +8848,15 @@ var NavigationItem = forwardRef35(
           children
         }
       ),
-      rightIcon ? /* @__PURE__ */ jsx49("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__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       "span",
       {
         className: cn("aviala-navigation-item", className),
         "data-item-type": itemType,
         "data-active": isActive ? "true" : "false",
-        children: /* @__PURE__ */ jsx49(
+        children: /* @__PURE__ */ jsx50(
           Comp,
           {
             ref,
@@ -9037,7 +8875,7 @@ var NavigationItem = forwardRef35(
   }
 );
 NavigationItem.displayName = "NavigationItem";
-var NavigationActions = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx49(
+var NavigationActions = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50(
   "div",
   {
     ref,
@@ -9047,7 +8885,7 @@ var NavigationActions = forwardRef35(({ className, children, ...props }, ref) =>
   }
 ));
 NavigationActions.displayName = "NavigationActions";
-var NavigationActionsSlot = forwardRef35(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var NavigationActionsSlot = forwardRef35(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   "div",
   {
     ref,
@@ -9139,7 +8977,7 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  return /* @__PURE__ */ jsx49(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx49(Popover, { open, onOpenChange: handleOpenChange, children }) });
+  return /* @__PURE__ */ jsx50(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx50(Popover, { open, onOpenChange: handleOpenChange, children }) });
 }
 var NavigationItemMenuTrigger = forwardRef35(
   ({
@@ -9153,7 +8991,7 @@ var NavigationItemMenuTrigger = forwardRef35(
     const menu = useNavigationItemMenuContext("NavigationItemMenuTrigger");
     const isActive = active ?? menu.hasSelection;
     const mode = navigationItemButtonMode(isActive);
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       "span",
       {
         className: cn("aviala-navigation-item", className),
@@ -9161,7 +8999,7 @@ var NavigationItemMenuTrigger = forwardRef35(
         "data-active": isActive ? "true" : "false",
         onMouseEnter: () => menu.openMenu(true),
         onMouseLeave: menu.scheduleClose,
-        children: /* @__PURE__ */ jsx49(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs39(
+        children: /* @__PURE__ */ jsx50(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs39(
           "button",
           {
             ref,
@@ -9174,7 +9012,7 @@ var NavigationItemMenuTrigger = forwardRef35(
             ...props,
             children: [
               renderItemIcon3(leftIcon),
-              /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsx50(
                 Typography,
                 {
                   level: "text",
@@ -9183,7 +9021,7 @@ var NavigationItemMenuTrigger = forwardRef35(
                   children
                 }
               ),
-              rightIcon ? /* @__PURE__ */ jsx49("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+              rightIcon ? /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
             ]
           }
         ) })
@@ -9204,7 +9042,7 @@ var NavigationItemMenuContent = forwardRef35(
   }, ref) => {
     const direction = useNavigationDirection();
     const menu = useNavigationItemMenuContext("NavigationItemMenuContent");
-    return /* @__PURE__ */ jsx49(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx50(
       PopoverPrimitive7.Content,
       {
         ref,
@@ -9259,7 +9097,7 @@ var NavigationItemMenuItem = forwardRef35(
         ...props,
         children: [
           renderItemIcon3(leftIcon),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(
             Typography,
             {
               level: "text",
@@ -9268,7 +9106,7 @@ var NavigationItemMenuItem = forwardRef35(
               children
             }
           ),
-          rightIcon ? /* @__PURE__ */ jsx49("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
         ]
       }
     );
@@ -9280,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 jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var sliderVariants = cva13("aviala-slider", {
   variants: {
     size: {
@@ -9332,8 +9170,8 @@ var Slider = forwardRef36(
         "data-disabled": disabled ? "true" : void 0,
         ...props,
         children: [
-          /* @__PURE__ */ jsx50(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ jsx50(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
-          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx50(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
+          /* @__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))
         ]
       }
     );
@@ -9349,7 +9187,7 @@ import {
   useRef as useRef13,
   useState as useState17
 } from "react";
-import { jsx as jsx51, jsxs as jsxs41 } 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: {
@@ -9430,7 +9268,7 @@ var Upload = forwardRef37(
         onDrop: handleDrop,
         ...props,
         children: [
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx52(
             "input",
             {
               ref: inputRef,
@@ -9445,8 +9283,8 @@ var Upload = forwardRef37(
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsx51("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx51(GeneralUpload, { width: 16, height: 16 }) }),
-          resolvedStyle === "large" ? /* @__PURE__ */ jsx51(
+          /* @__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",
@@ -9454,7 +9292,7 @@ var Upload = forwardRef37(
               primary: title,
               secondary: description
             }
-          ) : /* @__PURE__ */ jsx51(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
+          ) : /* @__PURE__ */ jsx52(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
         ]
       }
     );
@@ -9471,7 +9309,7 @@ import {
   useMemo as useMemo11,
   useRef as useRef14
 } from "react";
-import { jsx as jsx52, jsxs as jsxs42 } 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) {
@@ -9499,7 +9337,7 @@ function fractionalIndexAtScrollTop(metrics, scrollTop) {
   return (scrollTop - metrics.originTop) / metrics.pitch;
 }
 function ScrollPicker({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx52("div", { className: cn("aviala-scroll-picker", className), ...props, children });
+  return /* @__PURE__ */ jsx53("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
 function ScrollPickerColumn({
   className,
@@ -9696,9 +9534,9 @@ function ScrollPickerColumn({
     }
   };
   const selectedOptionId = `${reactId}-${getIndex(value)}`;
-  return /* @__PURE__ */ jsx52("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ jsxs42("div", { className: "aviala-scroll-picker-column__viewport", children: [
-    /* @__PURE__ */ jsx52("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
-    /* @__PURE__ */ jsx52(
+  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,
@@ -9709,12 +9547,12 @@ function ScrollPickerColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsx52("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__ */ jsx52("li", { className: "contents", children: /* @__PURE__ */ jsx52(
+          return /* @__PURE__ */ jsx53("li", { className: "contents", children: /* @__PURE__ */ jsx53(
             ScrollPickerItem,
             {
               id: isSelected ? selectedOptionId : optionId,
@@ -9740,7 +9578,7 @@ function ScrollPickerItem({
   className,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     "button",
     {
       type: "button",
@@ -9770,7 +9608,7 @@ import {
   useContext as useContext9,
   useState as useState18
 } from "react";
-import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs43 } 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";
@@ -9789,7 +9627,7 @@ var breadcrumbVariants = cva15("aviala-breadcrumb", {
 var Breadcrumb = forwardRef38(
   ({ className, size = "default", children, ...props }, ref) => {
     const resolvedSize = size ?? "default";
-    return /* @__PURE__ */ jsx53(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx54(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx54(
       "nav",
       {
         ref,
@@ -9797,7 +9635,7 @@ var Breadcrumb = forwardRef38(
         className: cn(breadcrumbVariants({ size: resolvedSize }), className),
         "data-size": resolvedSize,
         ...props,
-        children: /* @__PURE__ */ jsx53("ol", { className: "aviala-breadcrumb__list", children })
+        children: /* @__PURE__ */ jsx54("ol", { className: "aviala-breadcrumb__list", children })
       }
     ) });
   }
@@ -9807,8 +9645,8 @@ var BreadcrumbItem = forwardRef38(
   ({ className, href, current = false, icon, onClick, children, ...props }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
     const label = /* @__PURE__ */ jsxs43(Fragment8, { children: [
-      icon ? /* @__PURE__ */ jsx53("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
-      children != null ? /* @__PURE__ */ jsx53(
+      icon ? /* @__PURE__ */ jsx54("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
+      children != null ? /* @__PURE__ */ jsx54(
         Typography,
         {
           level: breadcrumbTypeLevel(size),
@@ -9818,13 +9656,13 @@ var BreadcrumbItem = forwardRef38(
         }
       ) : null
     ] });
-    return /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx54(
       "li",
       {
         ref,
         className: cn("aviala-breadcrumb-item-wrap", className),
         ...props,
-        children: href != null ? /* @__PURE__ */ jsx53(
+        children: href != null ? /* @__PURE__ */ jsx54(
           "a",
           {
             href,
@@ -9833,7 +9671,7 @@ var BreadcrumbItem = forwardRef38(
             "aria-current": current ? "page" : void 0,
             children: label
           }
-        ) : onClick != null ? /* @__PURE__ */ jsx53(
+        ) : onClick != null ? /* @__PURE__ */ jsx54(
           "button",
           {
             type: "button",
@@ -9843,7 +9681,7 @@ var BreadcrumbItem = forwardRef38(
             onClick,
             children: label
           }
-        ) : /* @__PURE__ */ jsx53(
+        ) : /* @__PURE__ */ jsx54(
           "span",
           {
             className: "aviala-breadcrumb-item",
@@ -9860,7 +9698,7 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbSeparator = forwardRef38(
   ({ className, children = "/", ...props }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
-    return /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx54(
       "li",
       {
         ref,
@@ -9868,7 +9706,7 @@ var BreadcrumbSeparator = forwardRef38(
         "aria-hidden": true,
         className: cn("aviala-breadcrumb-separator", className),
         ...props,
-        children: /* @__PURE__ */ jsx53(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
+        children: /* @__PURE__ */ jsx54(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
       }
     );
   }
@@ -9884,11 +9722,11 @@ var BreadcrumbEllipsisItem = forwardRef38(
     ...props
   }, ref) => {
     const content = /* @__PURE__ */ jsxs43(Fragment8, { children: [
-      /* @__PURE__ */ jsx53(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
-      showChevron ? /* @__PURE__ */ jsx53("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx53(DirectionArrowRightLight3, { width: 14, height: 14, thickness: "Light" }) }) : null
+      /* @__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__ */ jsx53(
+      return /* @__PURE__ */ jsx54(
         "a",
         {
           ref,
@@ -9900,7 +9738,7 @@ var BreadcrumbEllipsisItem = forwardRef38(
         }
       );
     }
-    return /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx54(
       "button",
       {
         ref,
@@ -9938,8 +9776,8 @@ var BreadcrumbEllipsis = forwardRef38(
       [isControlled, onActivatedChange]
     );
     const iconSize = 14;
-    const icon = children ?? /* @__PURE__ */ jsx53(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
-    const trigger = /* @__PURE__ */ jsx53(
+    const icon = children ?? /* @__PURE__ */ jsx54(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
+    const trigger = /* @__PURE__ */ jsx54(
       "button",
       {
         type: "button",
@@ -9958,9 +9796,9 @@ var BreadcrumbEllipsis = forwardRef38(
         children: icon
       }
     );
-    return /* @__PURE__ */ jsx53("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ jsxs43(Popover, { open: activated, onOpenChange: setActivated, children: [
-      /* @__PURE__ */ jsx53(PopoverTrigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ jsx53(
+    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",
@@ -9969,7 +9807,7 @@ var BreadcrumbEllipsis = forwardRef38(
           sideOffset: 7,
           showArrow: false,
           role: "menu",
-          children: /* @__PURE__ */ jsx53("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
+          children: /* @__PURE__ */ jsx54("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
         }
       )
     ] }) : trigger });
@@ -9981,7 +9819,7 @@ BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 import {
   forwardRef as forwardRef39
 } from "react";
-import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var Pagehead = forwardRef39(
   ({
     className,
@@ -9994,14 +9832,14 @@ var Pagehead = forwardRef39(
     ...props
   }, ref) => /* @__PURE__ */ jsxs44("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
     /* @__PURE__ */ jsxs44("div", { className: "aviala-pagehead__main", children: [
-      back != null ? /* @__PURE__ */ jsx54("div", { className: "aviala-pagehead__back", children: back }) : null,
+      back != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-pagehead__back", children: back }) : null,
       /* @__PURE__ */ jsxs44("div", { className: "aviala-pagehead__title-block", children: [
-        breadcrumb != null ? /* @__PURE__ */ jsx54("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
-        title != null || description != null ? /* @__PURE__ */ jsx54("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ jsx54(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
+        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__ */ jsx54("div", { className: "aviala-pagehead__actions", children: actions }) : null
+    actions != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-pagehead__actions", children: actions }) : null
   ] })
 );
 Pagehead.displayName = "Pagehead";
@@ -10016,7 +9854,7 @@ import { cva as cva16 } from "class-variance-authority";
 import {
   forwardRef as forwardRef40
 } from "react";
-import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 var stepsVariants = cva16("aviala-steps", {
   variants: {
     direction: {
@@ -10029,7 +9867,7 @@ var stepsVariants = cva16("aviala-steps", {
   }
 });
 var Steps = forwardRef40(
-  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx55(
+  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx56(
     "div",
     {
       ref,
@@ -10044,20 +9882,20 @@ Steps.displayName = "Steps";
 function defaultStepsIconContent(state, index) {
   switch (state) {
     case "done":
-      return /* @__PURE__ */ jsx55(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__ */ jsx55(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__ */ jsx55(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__ */ jsx55(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__ */ jsx55(
+  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ jsx56(
     "span",
     {
       ref,
@@ -10087,9 +9925,9 @@ var StepsItem = forwardRef40(
       "data-state": state,
       ...props,
       children: [
-        icon ?? /* @__PURE__ */ jsx55(StepsIcon, { state, index }),
+        icon ?? /* @__PURE__ */ jsx56(StepsIcon, { state, index }),
         /* @__PURE__ */ jsxs45("div", { className: "aviala-steps-item__body", children: [
-          title != null ? /* @__PURE__ */ jsx55(
+          title != null ? /* @__PURE__ */ jsx56(
             Typography,
             {
               level: "subtitle",
@@ -10098,7 +9936,7 @@ var StepsItem = forwardRef40(
               children: title
             }
           ) : null,
-          description != null ? /* @__PURE__ */ jsx55(
+          description != null ? /* @__PURE__ */ jsx56(
             Typography,
             {
               level: "text",
@@ -10124,7 +9962,7 @@ import {
   forwardRef as forwardRef41,
   useState as useState19
 } from "react";
-import { jsx as jsx56, jsxs as jsxs46 } 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);
@@ -10209,7 +10047,7 @@ var Pagination = forwardRef41(
         ...props,
         children: [
           /* @__PURE__ */ jsxs46("div", { className: "aviala-pagination__controls", children: [
-            /* @__PURE__ */ jsx56(
+            /* @__PURE__ */ jsx57(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10217,18 +10055,18 @@ var Pagination = forwardRef41(
                 iconOnly: true,
                 "aria-label": "Previous page",
                 disabled: currentPage <= 1,
-                leftIcon: /* @__PURE__ */ jsx56(DirectionArrowLeftLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx57(DirectionArrowLeftLight, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage - 1)
               }
             ),
-            /* @__PURE__ */ jsx56("div", { className: "aviala-pagination__pages", children: pages.map(
+            /* @__PURE__ */ jsx57("div", { className: "aviala-pagination__pages", children: pages.map(
               (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsxs46(
                 Popover,
                 {
                   open: openEllipsis === index,
                   onOpenChange: (open) => setOpenEllipsis(open ? index : null),
                   children: [
-                    /* @__PURE__ */ jsx56(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
+                    /* @__PURE__ */ jsx57(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
                       "button",
                       {
                         type: "button",
@@ -10239,10 +10077,10 @@ var Pagination = forwardRef41(
                         ),
                         "aria-label": "\u66F4\u591A\u9875\u7801",
                         "aria-haspopup": "menu",
-                        children: /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: "\u2026" })
+                        children: /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: "\u2026" })
                       }
                     ) }),
-                    /* @__PURE__ */ jsx56(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ jsx56("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ jsx56(
+                    /* @__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",
@@ -10255,14 +10093,14 @@ var Pagination = forwardRef41(
                           setPage(p);
                           setOpenEllipsis(null);
                         },
-                        children: /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: p })
+                        children: /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: p })
                       },
                       p
                     )) }) })
                   ]
                 },
                 `ellipsis-${index}`
-              ) : /* @__PURE__ */ jsx56(
+              ) : /* @__PURE__ */ jsx57(
                 "button",
                 {
                   type: "button",
@@ -10274,12 +10112,12 @@ var Pagination = forwardRef41(
                   "data-active": item === currentPage ? "true" : void 0,
                   "aria-current": item === currentPage ? "page" : void 0,
                   onClick: () => setPage(item),
-                  children: /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: item })
+                  children: /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: item })
                 },
                 item
               )
             ) }),
-            /* @__PURE__ */ jsx56(
+            /* @__PURE__ */ jsx57(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10287,14 +10125,14 @@ var Pagination = forwardRef41(
                 iconOnly: true,
                 "aria-label": "Next page",
                 disabled: currentPage >= safePageCount,
-                leftIcon: /* @__PURE__ */ jsx56(DirectionArrowRightLight4, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx57(DirectionArrowRightLight4, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage + 1)
               }
             )
           ] }),
           showJump ? /* @__PURE__ */ jsxs46("div", { className: "aviala-pagination__jump", children: [
-            /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: jumpLabel }),
-            /* @__PURE__ */ jsx56(
+            /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: jumpLabel }),
+            /* @__PURE__ */ jsx57(
               Input,
               {
                 className: "aviala-pagination__jump-input",
@@ -10315,14 +10153,14 @@ var Pagination = forwardRef41(
             )
           ] }) : null,
           showSizeChanger ? /* @__PURE__ */ jsxs46("div", { className: "aviala-pagination__size", children: [
-            /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children: sizeLabel }),
+            /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: sizeLabel }),
             /* @__PURE__ */ jsxs46(
               Select,
               {
                 value: String(pageSize),
                 onValueChange: (value) => setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ jsx56(
+                  /* @__PURE__ */ jsx57(
                     SelectTrigger,
                     {
                       size: "regular",
@@ -10330,7 +10168,7 @@ var Pagination = forwardRef41(
                       "aria-label": "Page size"
                     }
                   ),
-                  /* @__PURE__ */ jsx56(SelectContent, { children: /* @__PURE__ */ jsx56(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx56(
+                  /* @__PURE__ */ jsx57(SelectContent, { children: /* @__PURE__ */ jsx57(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx57(
                     SelectItem,
                     {
                       value: String(option),
@@ -10360,9 +10198,9 @@ import {
   forwardRef as forwardRef42,
   isValidElement as isValidElement17
 } from "react";
-import { Fragment as Fragment9, jsx as jsx57, jsxs as jsxs47 } 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__ */ jsx57("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) {
@@ -10375,7 +10213,7 @@ function renderCardIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx57("span", { className: "aviala-card-head__icon", children: content });
+  return /* @__PURE__ */ jsx58("span", { className: "aviala-card-head__icon", children: content });
 }
 var CardHead = forwardRef42(
   ({
@@ -10393,35 +10231,35 @@ var CardHead = forwardRef42(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ jsx57(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx57(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__ */ jsxs47("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ jsx57(
+            secondaryAction ?? /* @__PURE__ */ jsx58(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ jsx57(GeneralSetting2, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx58(GeneralSetting2, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsx57("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx57(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__ */ jsxs47("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx57("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx57(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx58(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return select != null ? /* @__PURE__ */ jsx57("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__ */ jsxs47(
@@ -10433,8 +10271,8 @@ var CardHead = forwardRef42(
         ...props,
         children: [
           /* @__PURE__ */ jsxs47("div", { className: "aviala-card-head__main", children: [
-            renderCardIcon(icon ?? /* @__PURE__ */ jsx57(GeneralSetting2, { "aria-hidden": true })),
-            /* @__PURE__ */ jsx57("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ jsx57(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
+            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()
         ]
@@ -10444,7 +10282,7 @@ var CardHead = forwardRef42(
 );
 CardHead.displayName = "CardHead";
 var CardBody = forwardRef42(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx57("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ jsx57("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children }) : children }) })
+  ({ 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(
@@ -10460,7 +10298,7 @@ var CardBottom = forwardRef42(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ jsx57(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx57(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;
@@ -10468,8 +10306,8 @@ var CardBottom = forwardRef42(
         case "switch":
           return /* @__PURE__ */ jsxs47(Fragment9, { children: [
             primaryAction,
-            /* @__PURE__ */ jsx57("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx57(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx58(Switch, { ...switchProps })
           ] });
         case "select":
           return select;
@@ -10477,29 +10315,29 @@ var CardBottom = forwardRef42(
         default:
           return /* @__PURE__ */ jsxs47(Fragment9, { children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ jsx57(
+            secondaryAction ?? /* @__PURE__ */ jsx58(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ jsx57(GeneralSetting2, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx58(GeneralSetting2, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsx57("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx57(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__ */ jsx57(
+    return /* @__PURE__ */ jsx58(
       "div",
       {
         ref,
         className: cn("aviala-card-bottom", className),
         "data-type": slotType,
         ...props,
-        children: /* @__PURE__ */ jsx57("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
+        children: /* @__PURE__ */ jsx58("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
       }
     );
   }
@@ -10512,9 +10350,9 @@ import {
   forwardRef as forwardRef43,
   isValidElement as isValidElement18
 } from "react";
-import { Fragment as Fragment10, jsx as jsx58, jsxs as jsxs48 } 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__ */ jsx58(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx59(
     "div",
     {
       ref,
@@ -10527,7 +10365,7 @@ var Table = forwardRef43(
 );
 Table.displayName = "Table";
 var TableRow = forwardRef43(
-  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ jsx58(
+  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ jsx59(
     "div",
     {
       ref,
@@ -10541,7 +10379,7 @@ var TableRow = forwardRef43(
 );
 TableRow.displayName = "TableRow";
 var TableHead = forwardRef43(
-  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ jsx58(
+  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ jsx59(
     "div",
     {
       ref,
@@ -10549,7 +10387,7 @@ var TableHead = forwardRef43(
       className: cn("aviala-table-head", className),
       "data-content": content,
       ...props,
-      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx58(Typography, { level: "caption", as: "span", children }) : children
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx59(Typography, { level: "caption", as: "span", children }) : children
     }
   )
 );
@@ -10564,7 +10402,7 @@ function renderCellIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx58("span", { className: "aviala-table-cell__icon", children: content });
+  return /* @__PURE__ */ jsx59("span", { className: "aviala-table-cell__icon", children: content });
 }
 var TableCell = forwardRef43(
   ({
@@ -10585,29 +10423,29 @@ var TableCell = forwardRef43(
       if (children != null) return children;
       switch (content) {
         case "checkbox":
-          return /* @__PURE__ */ jsx58(Checkbox, { ...checkboxProps });
+          return /* @__PURE__ */ jsx59(Checkbox, { ...checkboxProps });
         case "icon+text":
           return /* @__PURE__ */ jsxs48(Fragment10, { children: [
             renderCellIcon(icon),
-            /* @__PURE__ */ jsx58("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx58(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__ */ jsxs48(Fragment10, { children: [
-            people ?? /* @__PURE__ */ jsx58(Avatar, { content: "text", level: "text", children: "A" }),
-            /* @__PURE__ */ jsx58("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children: text }) })
+            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__ */ jsx58(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
+          return badge ?? /* @__PURE__ */ jsx59(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
         case "switch":
-          return /* @__PURE__ */ jsx58(Switch, { ...switchProps });
+          return /* @__PURE__ */ jsx59(Switch, { ...switchProps });
         case "action":
-          return /* @__PURE__ */ jsx58("div", { className: "aviala-table-cell__actions", children: actions });
+          return /* @__PURE__ */ jsx59("div", { className: "aviala-table-cell__actions", children: actions });
         case "text":
         default:
-          return /* @__PURE__ */ jsx58("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx58(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__ */ jsx58(
+    return /* @__PURE__ */ jsx59(
       "div",
       {
         ref,