@aviala-design/spiral 2.1.0 → 2.2.0

package/dist/index.cjs

@@ -827,11 +827,30 @@ Button.displayName = "Button";
 var import_class_variance_authority5 = require("class-variance-authority");
 var import_react8 = require("react");
 
+// src/lib/render-slot-icon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function renderSlotIcon(node, className, debugId) {
+  if (!node) return null;
+  const content = cloneAvialaIconElement(node, {
+    level: "text",
+    biggerSize: true
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      className,
+      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
+      ...debugId ? spiralDebugId(debugId) : void 0,
+      children: content
+    }
+  );
+}
+
 // src/components/badge.tsx
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_react7 = require("react");
 var import_icons3 = require("@aviala-design/icons");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority4.cva)("aviala-badge", {
   variants: {
     style: {
@@ -888,7 +907,7 @@ function renderBadgeIcon(node, level) {
       )
     }
   ) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "aviala-badge__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "aviala-badge__icon", "aria-hidden": true, children: content });
 }
 var Badge = (0, import_react7.forwardRef)(
   ({
@@ -907,7 +926,7 @@ var Badge = (0, import_react7.forwardRef)(
     const resolvedLhf = resolveLineHeightFix(resolvedLevel, lineHeightFix);
     const typographyLevel = resolvedLevel;
     const tone = primary ? "white" : "default";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "span",
       {
         ref,
@@ -927,7 +946,7 @@ var Badge = (0, import_react7.forwardRef)(
         ...props,
         children: [
           renderBadgeIcon(leftIcon, resolvedLevel),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Typography,
             {
               level: typographyLevel,
@@ -946,7 +965,7 @@ var Badge = (0, import_react7.forwardRef)(
 Badge.displayName = "Badge";
 
 // src/components/input.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function resolveInputState(value, defaultValue, focused) {
   const current = value ?? defaultValue ?? "";
   if (String(current).length === 0) return "empty";
@@ -963,25 +982,9 @@ var inputRootVariants = (0, import_class_variance_authority5.cva)("aviala-input
     fullWidth: true
   }
 });
-function renderSlotIcon(node, debugId) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "aviala-input__badge-area", children: (0, import_react8.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Badge, { children: node }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "aviala-input__badge-area", children: (0, import_react8.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { children: node }) });
 }
 var Input = (0, import_react8.forwardRef)(
   ({
@@ -1007,7 +1010,7 @@ var Input = (0, import_react8.forwardRef)(
     const [internalValue, setInternalValue] = (0, import_react8.useState)(() => String(defaultValue ?? ""));
     const resolvedValue = value !== void 0 ? String(value) : internalValue;
     const inputState = resolveInputState(resolvedValue, void 0, focused);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         className: cn(inputRootVariants({ fullWidth }), className),
@@ -1018,14 +1021,14 @@ var Input = (0, import_react8.forwardRef)(
         "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__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "div",
             {
               className: "aviala-input__field relative z-[1] flex min-w-0 flex-1 flex-col justify-center",
               ...spiralDebugId("input.field"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "input",
                 {
                   ref,
@@ -1059,7 +1062,7 @@ var Input = (0, import_react8.forwardRef)(
             }
           ),
           renderBadgeArea(rightBadge),
-          renderSlotIcon(rightIcon, "input.right-icon")
+          renderSlotIcon(rightIcon, "aviala-input__slot", "input.right-icon")
         ]
       }
     );
@@ -1070,7 +1073,7 @@ Input.displayName = "Input";
 // src/components/number-input.tsx
 var import_icons4 = require("@aviala-design/icons");
 var import_react9 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function assignRef(ref, value) {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -1112,25 +1115,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__ */ (0, import_jsx_runtime7.jsx)(
-    "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__ */ (0, import_jsx_runtime7.jsx)("span", { className: "aviala-input__badge-area", children: (0, import_react9.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { children: node }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "aviala-input__badge-area", children: (0, import_react9.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Badge, { children: node }) });
 }
 var numberInputRootVariants = inputRootVariants;
 var NumberInput = (0, import_react9.forwardRef)(
@@ -1183,7 +1170,7 @@ var NumberInput = (0, import_react9.forwardRef)(
       commitString(String(next));
       inputRef.current?.focus();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: cn(
@@ -1199,14 +1186,14 @@ var NumberInput = (0, import_react9.forwardRef)(
         "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__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: "aviala-input__field relative z-[1] flex min-w-0 flex-1 flex-col justify-center",
               ...spiralDebugId("number-input.field"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "input",
                 {
                   ref: (node) => {
@@ -1264,14 +1251,14 @@ var NumberInput = (0, import_react9.forwardRef)(
             }
           ),
           renderBadgeArea2(rightBadge),
-          renderSlotIcon2(rightIcon, "number-input.right-icon"),
-          showControls ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          renderSlotIcon(rightIcon, "aviala-input__slot", "number-input.right-icon"),
+          showControls ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
               className: "aviala-number-input__controls",
               ...spiralDebugId("number-input.controls"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1282,10 +1269,10 @@ var NumberInput = (0, import_react9.forwardRef)(
                     onMouseDown: (event) => event.preventDefault(),
                     onClick: () => applyStep(1),
                     ...spiralDebugId("number-input.step-up"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons4.DirectionArrowUpLight, { level: "text", biggerSize: true, "aria-hidden": true })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons4.DirectionArrowUpLight, { level: "text", biggerSize: true, "aria-hidden": true })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1296,7 +1283,7 @@ var NumberInput = (0, import_react9.forwardRef)(
                     onMouseDown: (event) => event.preventDefault(),
                     onClick: () => applyStep(-1),
                     ...spiralDebugId("number-input.step-down"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons4.DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons4.DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
                   }
                 )
               ]
@@ -1312,7 +1299,7 @@ NumberInput.displayName = "NumberInput";
 // src/components/textarea.tsx
 var import_icons5 = require("@aviala-design/icons");
 var import_react10 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function assignRef2(ref, value) {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -1326,22 +1313,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__ */ (0, import_jsx_runtime8.jsx)(
-    "span",
-    {
-      className: "aviala-textarea__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      ...debugId ? spiralDebugId(debugId) : void 0,
-      children: content
-    }
-  );
-}
 var Textarea = (0, import_react10.forwardRef)(
   ({
     className,
@@ -1438,7 +1409,7 @@ var Textarea = (0, import_react10.forwardRef)(
         document.body.style.userSelect = previousUserSelect;
       };
     }, [resizing]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         ref: rootRef,
@@ -1453,8 +1424,8 @@ var Textarea = (0, import_react10.forwardRef)(
         onMouseDown: handleShellMouseDown,
         ...spiralDebugId("textarea"),
         children: [
-          renderSlotIcon3(leftIcon, "textarea.left-icon"),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "aviala-textarea__field", ...spiralDebugId("textarea.field"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          renderSlotIcon(leftIcon, "aviala-textarea__slot", "textarea.left-icon"),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "aviala-textarea__field", ...spiralDebugId("textarea.field"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "textarea",
             {
               ref: setTextareaRef,
@@ -1481,9 +1452,9 @@ var Textarea = (0, import_react10.forwardRef)(
               ...props
             }
           ) }),
-          renderSlotIcon3(rightIcon, "textarea.right-icon"),
-          showController ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "aviala-textarea__controller", ...spiralDebugId("textarea.controller"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          renderSlotIcon(rightIcon, "aviala-textarea__slot", "textarea.right-icon"),
+          showController ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "aviala-textarea__controller", ...spiralDebugId("textarea.controller"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "span",
               {
                 className: cn("aviala-textarea__counter", typographyVariants({ level: "caption" })),
@@ -1494,7 +1465,7 @@ var Textarea = (0, import_react10.forwardRef)(
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 type: "button",
@@ -1504,7 +1475,7 @@ var Textarea = (0, import_react10.forwardRef)(
                 tabIndex: disabled ? -1 : 0,
                 onPointerDown: handleResizePointerDown,
                 ...spiralDebugId("textarea.resize"),
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons5.SymbolResize, { thickness: "Regular", mode: "default", "aria-hidden": true })
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons5.SymbolResize, { thickness: "Regular", mode: "default", "aria-hidden": true })
               }
             )
           ] }) : null
@@ -1524,7 +1495,7 @@ var import_react12 = require("react");
 // src/components/link.tsx
 var import_react_slot3 = require("@radix-ui/react-slot");
 var import_react11 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var levelStyles = {
   caption: {
     className: typographyVariants({ level: "caption" }),
@@ -1543,7 +1514,7 @@ function renderIcon2(node, level) {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "span",
     {
       className: cn(
@@ -1584,7 +1555,7 @@ var Link = (0, import_react11.forwardRef)(
       onClick?.(e);
     };
     if (asChild) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         Comp,
         {
           className: sharedClassName,
@@ -1600,7 +1571,7 @@ var Link = (0, import_react11.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       Comp,
       {
         className: sharedClassName,
@@ -1614,7 +1585,7 @@ var Link = (0, import_react11.forwardRef)(
         onClick: handleClick,
         children: [
           renderIcon2(leftIcon ?? (iconOnly ? rightIcon : void 0), resolvedLevel),
-          !iconOnly && children !== void 0 && children !== null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          !iconOnly && children !== void 0 && children !== null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "span",
             {
               className: cn(
@@ -1633,7 +1604,7 @@ var Link = (0, import_react11.forwardRef)(
 Link.displayName = "Link";
 
 // src/components/select.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var SELECT_SUB_MENU_CLOSE_DELAY_MS = 250;
 var SELECT_SUB_MENU_EXIT_ANIM_MS = 150;
 var SelectSubMenuContext = (0, import_react12.createContext)(null);
@@ -1867,29 +1838,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__ */ (0, import_jsx_runtime10.jsx)(
-    "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__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "span",
     {
       className: cn(
@@ -1904,16 +1859,16 @@ function renderItemIcon(node, iconLevel = "text", debugId) {
 }
 function renderBadgeSlot(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-item__badge", children: (0, import_react12.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Badge, { children: node }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-item__badge", children: (0, import_react12.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Badge, { children: node }) });
 }
 function SelectItemFormRadio() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "aviala-select-item__form-radio", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-item__form-radio-surface" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-item__form-radio-indicator" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "aviala-select-item__form-radio", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-item__form-radio-surface" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-item__form-radio-indicator" })
   ] });
 }
 function SelectItemFormCheckbox() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_icons6.SymbolRight,
     {
       className: "aviala-select-item__form-checkbox-icon",
@@ -1924,20 +1879,20 @@ function SelectItemFormCheckbox() {
   ) });
 }
 function SelectItemTrailingRadio() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons6.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function SelectItemTrailingCheckbox() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons6.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function SelectItemDefaultAvatar() {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-item__avatar", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons6.UsersUserCircle, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-item__avatar", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.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__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "span",
       {
         className: "aviala-select-item__function",
@@ -1949,19 +1904,19 @@ function renderFunctionSlot(itemFunction, layout, showFunctionIcon, icon) {
   }
   switch (itemFunction) {
     case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItemTrailingRadio, {}) });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectItemTrailingRadio, {}) });
     case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItemTrailingCheckbox, {}) });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectItemTrailingCheckbox, {}) });
     case "simple":
     case "action":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "span",
         {
           className: "aviala-select-item__function",
           style: iconLevelCssVarStyle("text", true, "--select-item-function-icon-size"),
           ...spiralDebugId("select.content.item.function"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons6.DirectionArrowRight, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.DirectionArrowRight, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       );
   }
@@ -2014,7 +1969,7 @@ function Select({
     },
     [isControlled, onOpenChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectDismissContext.Provider, { value: dismissContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectDismissContext.Provider, { value: dismissContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
 }
 var SelectValue = SelectPrimitive.Value;
 var SelectGroup = SelectPrimitive.Group;
@@ -2049,7 +2004,7 @@ function wrapUngroupedSelectItems(children) {
   const flushBareItems = () => {
     if (bareItems.length === 0) return;
     wrapped.push(
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectGroup, { className: "aviala-select-group", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aviala-select-group__slot", children: bareItems }) }, `__select-auto-group-${autoGroupIndex++}`)
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectGroup, { className: "aviala-select-group", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "aviala-select-group__slot", children: bareItems }) }, `__select-auto-group-${autoGroupIndex++}`)
     );
     bareItems = [];
   };
@@ -2080,7 +2035,7 @@ var SelectTrigger = (0, import_react12.forwardRef)(
     ...props
   }, ref) => {
     const dismissContext = (0, import_react12.useContext)(SelectDismissContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       SelectPrimitive.Trigger,
       {
         ref: (node) => {
@@ -2100,8 +2055,8 @@ var SelectTrigger = (0, import_react12.forwardRef)(
         ...spiralDebugId("select.trigger"),
         ...props,
         children: [
-          renderSlotIcon4(leftIcon, "select.trigger.icon-left"),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          renderSlotIcon(leftIcon, "aviala-select-trigger__slot", "select.trigger.icon-left"),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             SelectPrimitive.Value,
             {
               placeholder,
@@ -2109,15 +2064,15 @@ var SelectTrigger = (0, import_react12.forwardRef)(
               ...spiralDebugId("select.trigger.value")
             }
           ) }),
-          renderSlotIcon4(rightIcon, "select.trigger.icon-right"),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          renderSlotIcon(rightIcon, "aviala-select-trigger__slot", "select.trigger.icon-right"),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "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__ */ (0, import_jsx_runtime10.jsx)(
+              children: expandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 import_icons6.DirectionArrowDownLight,
                 {
                   className: "aviala-select-trigger__expand-icon",
@@ -2160,7 +2115,7 @@ var SelectContent = (0, import_react12.forwardRef)(
         dismissContext.pointerDownCloseRef.current = false;
       }
     };
-    const content = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectSubMenuContext.Provider, { value: subMenuLayer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectSubMenuContext.Provider, { value: subMenuLayer, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       SelectPrimitive.Content,
       {
         ref,
@@ -2170,7 +2125,7 @@ var SelectContent = (0, import_react12.forwardRef)(
         onCloseAutoFocus: handleCloseAutoFocus,
         ...spiralDebugId("select.content"),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           SelectPrimitive.Viewport,
           {
             className: "aviala-select-viewport",
@@ -2181,11 +2136,11 @@ var SelectContent = (0, import_react12.forwardRef)(
       }
     ) });
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectPrimitive.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectPrimitive.Portal, { children: content });
   }
 );
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var SelectLabel = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   SelectPrimitive.Label,
   {
     ref,
@@ -2220,23 +2175,23 @@ var SelectItem = (0, import_react12.forwardRef)(
     const leftIconLevel = isTitle ? "caption" : "text";
     const showTrailingFunction = showFunctionIcon && layout !== "checked" && itemFunction !== "form-radio" && itemFunction !== "form-checkbox";
     const textLevel = isTitle ? "caption" : "text";
-    const textContent = isPeople ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "aviala-select-item__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    const textContent = isPeople ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "aviala-select-item__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         SelectPrimitive.ItemText,
         {
           className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })),
           children
         }
       ),
-      subtitle != null && subtitle !== false ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      subtitle != null && subtitle !== false ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       SelectPrimitive.ItemText,
       {
         className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })),
         children
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       SelectPrimitive.Item,
       {
         ref,
@@ -2246,14 +2201,14 @@ var SelectItem = (0, import_react12.forwardRef)(
         ...spiralDebugId("select.content.item"),
         ...props,
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon(leftIcon, leftIconLevel, "select.content.item.icon-left") : null,
-          isPeople ? avatar ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItemDefaultAvatar, {}) : null,
+          isPeople ? avatar ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectItemDefaultAvatar, {}) : null,
           textContent,
           showBadge ? renderBadgeSlot(badge ?? "Text") : null,
           showRightIcon && rightIcon ? renderItemIcon(rightIcon, leftIconLevel, "select.content.item.icon-right") : null,
-          showMoreFunction ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
+          showMoreFunction ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
           renderFunctionSlot(itemFunction, layout, showTrailingFunction, icon)
         ]
       }
@@ -2329,10 +2284,10 @@ var SelectSubItem = (0, import_react12.forwardRef)(
     const leftIconLevel = isTitle ? "caption" : "text";
     const showTrailingFunction = showFunctionIcon && layout !== "checked" && itemFunction !== "form-radio" && itemFunction !== "form-checkbox";
     const textLevel = isTitle ? "caption" : "text";
-    const textContent = isPeople ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "aviala-select-item__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren }),
-      subtitle != null && subtitle !== false ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren });
+    const textContent = isPeople ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "aviala-select-item__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren }),
+      subtitle != null && subtitle !== false ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren });
     const handleTriggerBlur = (event) => {
       scheduleCloseSubItem(subItemId, event.relatedTarget);
     };
@@ -2350,7 +2305,7 @@ var SelectSubItem = (0, import_react12.forwardRef)(
         closeActiveSubItem();
       }
     };
-    const itemRow = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    const itemRow = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "button",
       {
         type: "button",
@@ -2368,19 +2323,19 @@ var SelectSubItem = (0, import_react12.forwardRef)(
         onBlur: handleTriggerBlur,
         onKeyDown: handleKeyDown,
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon(leftIcon, leftIconLevel) : null,
-          isPeople ? avatar ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItemDefaultAvatar, {}) : null,
+          isPeople ? avatar ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectItemDefaultAvatar, {}) : null,
           textContent,
           showBadge ? renderBadgeSlot(badge ?? "Text") : null,
           showRightIcon && rightIcon ? renderItemIcon(rightIcon, leftIconLevel) : null,
-          showMoreFunction ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
+          showMoreFunction ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
           renderFunctionSlot(itemFunction, layout, showTrailingFunction, icon)
         ]
       }
     );
-    const flyout = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    const flyout = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       PopoverPrimitive.Content,
       {
         ref: contentRef,
@@ -2398,10 +2353,10 @@ var SelectSubItem = (0, import_react12.forwardRef)(
         onPointerEnter: handleOpen,
         onPointerLeave: handlePointerLeave,
         onPointerDownOutside: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aviala-select-viewport aviala-select-sub-content__viewport", children: wrapUngroupedSelectItems(subMenu.children) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "aviala-select-viewport aviala-select-sub-content__viewport", children: wrapUngroupedSelectItems(subMenu.children) })
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverPrimitive.Root, { open, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverPrimitive.Root, { open, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         ref: (node) => {
@@ -2416,8 +2371,8 @@ var SelectSubItem = (0, import_react12.forwardRef)(
         onPointerEnter: handleOpen,
         onPointerLeave: handlePointerLeave,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverPrimitive.Anchor, { asChild: true, children: itemRow }),
-          portalled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverPrimitive.Portal, { children: flyout }) : flyout
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverPrimitive.Anchor, { asChild: true, children: itemRow }),
+          portalled ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverPrimitive.Portal, { children: flyout }) : flyout
         ]
       }
     ) });
@@ -2425,12 +2380,12 @@ var SelectSubItem = (0, import_react12.forwardRef)(
 );
 SelectSubItem.displayName = "SelectSubItem";
 var SelectSubItemPeople = (0, import_react12.forwardRef)(
-  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectSubItem, { ref, layout: "people", ...props })
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectSubItem, { ref, layout: "people", ...props })
 );
 SelectSubItemPeople.displayName = "SelectSubItemPeople";
-var SelectItemPeople = (0, import_react12.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectItem, { ref, layout: "people", ...props }));
+var SelectItemPeople = (0, import_react12.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectItem, { ref, layout: "people", ...props }));
 SelectItemPeople.displayName = "SelectItemPeople";
-var SelectSeparator = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var SelectSeparator = (0, import_react12.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2445,18 +2400,18 @@ function SelectItemGroup({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SelectGroup, { className: cn("aviala-select-group", className), children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectLabel, { children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aviala-select-group__slot", children }),
-    showDivider ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SelectSeparator, {}) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SelectGroup, { className: cn("aviala-select-group", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectLabel, { children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "aviala-select-group__slot", children }),
+    showDivider ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectSeparator, {}) : null
   ] });
 }
 
 // src/components/label.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
 var import_react13 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Label2 = (0, import_react13.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Label2 = (0, import_react13.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   LabelPrimitive.Root,
   {
     ref,
@@ -2473,7 +2428,7 @@ Label2.displayName = LabelPrimitive.Root.displayName;
 // src/components/avatar.tsx
 var import_class_variance_authority6 = require("class-variance-authority");
 var import_react14 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var avatarVariants = (0, import_class_variance_authority6.cva)("aviala-avatar", {
   variants: {
     level: {
@@ -2546,7 +2501,7 @@ var Avatar = (0, import_react14.forwardRef)(
   }, ref) => {
     const resolvedLevel = level ?? "text";
     const resolvedContent = content ?? "text";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "span",
       {
         ref,
@@ -2562,8 +2517,8 @@ var Avatar = (0, import_react14.forwardRef)(
         "data-content": resolvedContent,
         "data-line-height-fix": lineHeightFix ? "true" : "false",
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "aviala-avatar__surface", children: [
-          resolvedContent === "picture" && src ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "aviala-avatar__surface", children: [
+          resolvedContent === "picture" && src ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "img",
             {
               className: "aviala-avatar__image",
@@ -2572,8 +2527,8 @@ var Avatar = (0, import_react14.forwardRef)(
               ...imgProps
             }
           ) : null,
-          resolvedContent === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "aviala-avatar__icon", "aria-hidden": true, children: renderAvatarIcon(icon, resolvedLevel) }) : null,
-          resolvedContent === "text" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          resolvedContent === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-avatar__icon", "aria-hidden": true, children: renderAvatarIcon(icon, resolvedLevel) }) : null,
+          resolvedContent === "text" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Typography,
             {
               level: AVATAR_TEXT_LEVEL[resolvedLevel],
@@ -2593,7 +2548,7 @@ Avatar.displayName = "Avatar";
 var import_icons7 = require("@aviala-design/icons");
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_react15 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var tagVariants = (0, import_class_variance_authority7.cva)("aviala-tag", {
   variants: {
     level: {
@@ -2641,17 +2596,17 @@ function renderTagIcon(node, level) {
       )
     }
   ) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-tag__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "aviala-tag__icon", "aria-hidden": true, children: content });
 }
 var TagClose = (0, import_react15.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "button",
     {
       ref,
       type: "button",
       className: cn("aviala-tag__close aviala-focus-ring", className),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SymbolWrong, { "aria-hidden": true, width: 14, height: 14 })
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons7.SymbolWrong, { "aria-hidden": true, width: 14, height: 14 })
     }
   )
 );
@@ -2678,8 +2633,8 @@ var Tag = (0, import_react15.forwardRef)(
     const resolvedContent = content ?? "text";
     const resolvedLhf = resolveLineHeightFix2(resolvedLevel, lineHeightFix);
     const typographyLevel = resolvedLevel;
-    const peopleAvatar = avatar ?? (avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Avatar, { level: "text", content: "picture", src: avatarSrc, lineHeightFix: false }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Avatar, { level: "text", content: "text", lineHeightFix: false, children: avatarText ?? (typeof children === "string" ? children.charAt(0) : "?") }));
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    const peopleAvatar = avatar ?? (avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Avatar, { level: "text", content: "picture", src: avatarSrc, lineHeightFix: false }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Avatar, { level: "text", content: "text", lineHeightFix: false, children: avatarText ?? (typeof children === "string" ? children.charAt(0) : "?") }));
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "span",
       {
         ref,
@@ -2698,8 +2653,8 @@ var Tag = (0, import_react15.forwardRef)(
         "aria-disabled": disabled || void 0,
         ...props,
         children: [
-          resolvedContent === "people" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-tag__avatar", children: peopleAvatar }) : renderTagIcon(leftIcon, resolvedLevel),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          resolvedContent === "people" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "aviala-tag__avatar", children: peopleAvatar }) : renderTagIcon(leftIcon, resolvedLevel),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             Typography,
             {
               level: typographyLevel,
@@ -2709,7 +2664,7 @@ var Tag = (0, import_react15.forwardRef)(
             }
           ),
           resolvedContent === "text" ? renderTagIcon(rightIcon, resolvedLevel) : null,
-          closable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          closable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             TagClose,
             {
               "aria-label": closeLabel,
@@ -2730,7 +2685,7 @@ Tag.displayName = "Tag";
 // src/components/progress.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
 var import_react16 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var progressVariants = (0, import_class_variance_authority8.cva)("aviala-progress", {
   variants: {
     type: {
@@ -2779,7 +2734,7 @@ var Progress = (0, import_react16.forwardRef)(
     const normalizedRadius = radius - stroke;
     const circumference = normalizedRadius * 2 * Math.PI;
     const strokeDashoffset = circumference - percent / 100 * circumference;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         ref,
@@ -2800,15 +2755,15 @@ var Progress = (0, import_react16.forwardRef)(
         "data-size": resolvedSize,
         "data-shape": resolvedShape,
         ...props,
-        children: resolvedShape === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "aviala-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        children: resolvedShape === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aviala-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               className: "aviala-progress__fill",
               style: { width: `${percent}%` }
             }
           ) }),
-          showLabel ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          showLabel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Typography,
             {
               level: "caption",
@@ -2818,7 +2773,7 @@ var Progress = (0, import_react16.forwardRef)(
               children: displayLabel
             }
           ) : null
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "svg",
           {
             className: "aviala-progress__ring",
@@ -2827,7 +2782,7 @@ var Progress = (0, import_react16.forwardRef)(
             viewBox: `0 0 ${radius * 2} ${radius * 2}`,
             "aria-hidden": true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "circle",
                 {
                   className: "aviala-progress__ring-track",
@@ -2838,7 +2793,7 @@ var Progress = (0, import_react16.forwardRef)(
                   strokeWidth: stroke
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "circle",
                 {
                   className: "aviala-progress__ring-fill",
@@ -2865,7 +2820,7 @@ Progress.displayName = "Progress";
 // src/components/scroll.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
 var import_react17 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var scrollVariants = (0, import_class_variance_authority9.cva)("aviala-scroll", {
   variants: {
     size: {
@@ -2889,7 +2844,7 @@ var Scroll = (0, import_react17.forwardRef)(
     orientation = "vertical",
     children,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       ref,
@@ -2913,7 +2868,7 @@ var import_react19 = require("react");
 
 // src/components/typeface.tsx
 var import_react18 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var typefaceLayouts = {
   allCustom: [
     { level: "text", children: null },
@@ -2957,11 +2912,11 @@ var Typeface = (0, import_react18.forwardRef)(
   }, ref) => {
     const layout = typefaceLayouts[content];
     const values = resolveTypefaceValues(content, primary, secondary, tertiary, children);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className: cn("aviala-typeface", className), "data-content": content, ...props, children: layout.map((line, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("span", { className: "aviala-typeface__line", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typography, { level: line.level, content: lineContent, tone, children: value }) }, `${line.level}-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "aviala-typeface__line", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Typography, { level: line.level, content: lineContent, tone, children: value }) }, `${line.level}-${index}`);
     }) });
   }
 );
@@ -2979,7 +2934,7 @@ function resolveTypefaceValues(content, primary, secondary, tertiary, children)
   return [children];
 }
 var TypefacePair = (0, import_react18.forwardRef)(
-  ({ title, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  ({ title, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Typeface,
     {
       ref,
@@ -2993,8 +2948,8 @@ var TypefacePair = (0, import_react18.forwardRef)(
 TypefacePair.displayName = "TypefacePair";
 
 // src/components/checkbox.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Checkbox = (0, import_react19.forwardRef)(({ className, round = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Checkbox = (0, import_react19.forwardRef)(({ className, round = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -3002,9 +2957,9 @@ var Checkbox = (0, import_react19.forwardRef)(({ className, round = false, ...pr
     "data-round": round ? "true" : void 0,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(CheckboxPrimitive.Indicator, { className: "aviala-checkbox__indicator", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CheckboxPrimitive.Indicator, { className: "aviala-checkbox__indicator", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_icons8.SymbolRight,
           {
             className: "aviala-checkbox__indicator-icon aviala-checkbox__indicator-icon--check",
@@ -3014,7 +2969,7 @@ var Checkbox = (0, import_react19.forwardRef)(({ className, round = false, ...pr
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -3027,7 +2982,7 @@ var Checkbox = (0, import_react19.forwardRef)(({ className, round = false, ...pr
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 var CheckboxGroup = (0, import_react19.forwardRef)(
-  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       ref,
@@ -3049,7 +3004,7 @@ function renderIcon3(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "aviala-checkbox-input__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "aviala-checkbox-input__icon", children: content });
 }
 var CheckboxInput = (0, import_react19.forwardRef)(
   ({
@@ -3060,16 +3015,16 @@ var CheckboxInput = (0, import_react19.forwardRef)(
     disabled,
     id,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "label",
     {
       htmlFor: id,
       className: cn("aviala-checkbox-input", className),
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Checkbox, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Checkbox, { ref, id, disabled, ...props }),
         renderIcon3(icon),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           TypefacePair,
           {
             className: "aviala-checkbox-input__content min-w-0 flex-1",
@@ -3086,8 +3041,8 @@ CheckboxInput.displayName = "CheckboxInput";
 // src/components/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
 var import_react20 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var RadioGroup = (0, import_react20.forwardRef)(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react20.forwardRef)(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   RadioGroupPrimitive.Root,
   {
     className: cn("aviala-radio-group", className),
@@ -3097,15 +3052,15 @@ var RadioGroup = (0, import_react20.forwardRef)(({ className, direction = "verti
   }
 ));
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = (0, import_react20.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+var RadioGroupItem = (0, import_react20.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
   RadioGroupPrimitive.Item,
   {
     ref,
     className: cn("aviala-radio aviala-focus-ring", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
     ]
   }
 ));
@@ -3121,7 +3076,7 @@ function renderIcon4(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "aviala-radio-input__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "aviala-radio-input__icon", children: content });
 }
 var RadioInput = (0, import_react20.forwardRef)(
   ({
@@ -3133,7 +3088,7 @@ var RadioInput = (0, import_react20.forwardRef)(
     disabled,
     id,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "label",
     {
       htmlFor: id,
@@ -3141,9 +3096,9 @@ var RadioInput = (0, import_react20.forwardRef)(
       "data-style": variant,
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadioGroupItem, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RadioGroupItem, { ref, id, disabled, ...props }),
         renderIcon4(icon),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           TypefacePair,
           {
             className: "aviala-radio-input__content min-w-0 flex-1",
@@ -3160,8 +3115,8 @@ RadioInput.displayName = "RadioInput";
 // src/components/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
 var import_react21 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Switch = (0, import_react21.forwardRef)(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Switch = (0, import_react21.forwardRef)(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
   SwitchPrimitive.Root,
   {
     className: cn(
@@ -3172,8 +3127,8 @@ var Switch = (0, import_react21.forwardRef)(({ className, size = "regular", ...p
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
     ]
   }
 ));
@@ -3182,9 +3137,9 @@ Switch.displayName = SwitchPrimitive.Root.displayName;
 // src/components/anchor.tsx
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_react22 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Anchor2 = (0, import_react22.forwardRef)(
-  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
+  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
 );
 Anchor2.displayName = "Anchor";
 var AnchorItem = (0, import_react22.forwardRef)(
@@ -3197,7 +3152,7 @@ var AnchorItem = (0, import_react22.forwardRef)(
     ...props
   }, ref) => {
     const Comp = asChild ? import_react_slot4.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       Comp,
       {
         ref,
@@ -3206,8 +3161,8 @@ var AnchorItem = (0, import_react22.forwardRef)(
         "data-indent": String(indentLevel),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
         ]
       }
     );
@@ -3217,7 +3172,7 @@ AnchorItem.displayName = "AnchorItem";
 
 // src/components/segmentator.tsx
 var import_react23 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var SegmentatorContext = (0, import_react23.createContext)(null);
 function useSegmentatorContext() {
   const ctx = (0, import_react23.useContext)(SegmentatorContext);
@@ -3232,7 +3187,7 @@ function renderIcon5(node, dimmed) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "span",
     {
       className: cn(
@@ -3681,7 +3636,7 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
       group.setPointerCapture(event.pointerId);
     };
     const thumbStyle = thumb ? buildThumbStyle() : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       SegmentatorContext.Provider,
       {
         value: (0, import_react23.useMemo)(
@@ -3695,7 +3650,7 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
           }),
           [currentValue, setValue, mode, allRound, disabled]
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             ref: (node) => {
@@ -3717,7 +3672,7 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
             onLostPointerCapture: finishPointerDrag,
             children: [
               children,
-              thumb && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              thumb && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "span",
                 {
                   ref: onThumbRef,
@@ -3755,7 +3710,7 @@ var SegmentatorItem = (0, import_react23.forwardRef)(
     const isDisabled = disabled || ctx.disabled;
     const dimmed = isDisabled;
     const icon = iconOnly ? leftIcon ?? rightIcon : leftIcon;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "button",
       {
         ref,
@@ -3777,9 +3732,9 @@ var SegmentatorItem = (0, import_react23.forwardRef)(
           onClick?.(e);
         },
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "aviala-segmentator-item__content", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "aviala-segmentator-item__content", children: [
           renderIcon5(icon, dimmed && !!icon),
-          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "span",
             {
               className: cn(
@@ -3801,7 +3756,7 @@ SegmentatorItem.displayName = "SegmentatorItem";
 // src/components/form-field.tsx
 var import_icons9 = require("@aviala-design/icons");
 var import_react24 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var FormField = (0, import_react24.forwardRef)(
   ({
     className,
@@ -3819,31 +3774,31 @@ var FormField = (0, import_react24.forwardRef)(
     const reactId = (0, import_react24.useId)();
     const labelId = `${reactId}-label`;
     const hasLabel = label != null && label !== "";
-    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Typeface,
       {
         id: labelId,
         content: "textCaption",
-        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
           label,
-          required ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+          required ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
         ] }) : void 0,
         secondary: description
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Typeface,
       {
         id: labelId,
         className: "aviala-form__label",
         content: "textCaption",
-        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
           label,
-          required ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+          required ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
         ] }) : void 0,
         secondary: description
       }
     ) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         ref,
@@ -3853,10 +3808,10 @@ var FormField = (0, import_react24.forwardRef)(
         ...props,
         children: [
           labelNode,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "aviala-form__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "aviala-form__content", children: [
             children,
-            error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "aviala-form__message aviala-form__message--error", role: "alert", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "aviala-form__message aviala-form__message--error", role: "alert", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 import_icons9.SymbolWrongCircle,
                 {
                   className: "aviala-form__message-icon",
@@ -3865,10 +3820,10 @@ var FormField = (0, import_react24.forwardRef)(
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
             ] }) : null,
-            info ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "aviala-form__message aviala-form__message--info", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            info ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "aviala-form__message aviala-form__message--info", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 import_icons9.SymbolInformationCircle,
                 {
                   className: "aviala-form__message-icon",
@@ -3877,9 +3832,9 @@ var FormField = (0, import_react24.forwardRef)(
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
             ] }) : null,
-            alert ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "aviala-form__alert", children: alert }) : null
+            alert ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "aviala-form__alert", children: alert }) : null
           ] })
         ]
       }
@@ -3890,9 +3845,9 @@ FormField.displayName = "FormField";
 
 // src/components/input-group.tsx
 var import_react25 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var InputGroup = (0, import_react25.forwardRef)(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       ref,
@@ -3906,7 +3861,7 @@ var InputGroup = (0, import_react25.forwardRef)(
   )
 );
 InputGroup.displayName = "InputGroup";
-var InputGroupAddon = (0, import_react25.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var InputGroupAddon = (0, import_react25.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   "div",
   {
     ref,
@@ -3922,7 +3877,7 @@ InputGroupAddon.displayName = "InputGroupAddon";
 
 // src/components/stack.tsx
 var import_react26 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var gapMap = {
   inside: "var(--gap-inside, 4px)",
   component: "var(--gap-component, 8px)",
@@ -3931,7 +3886,7 @@ var gapMap = {
   page: "var(--gap-page-space, 24px)"
 };
 var Stack = (0, import_react26.forwardRef)(
-  ({ className, gap = "component", direction = "column", style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  ({ className, gap = "component", direction = "column", style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       ref,
@@ -3959,7 +3914,7 @@ var Fieldset = (0, import_react26.forwardRef)(
     const heading = title ?? legend;
     const hasHeading = heading != null && heading !== "";
     const hasAction = info != null || feedback != null || actions != null;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "fieldset",
       {
         ref,
@@ -3967,7 +3922,7 @@ var Fieldset = (0, import_react26.forwardRef)(
         "aria-labelledby": hasHeading ? headingId : void 0,
         ...props,
         children: [
-          hasHeading || description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          hasHeading || description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             Typeface,
             {
               id: headingId,
@@ -3977,11 +3932,11 @@ var Fieldset = (0, import_react26.forwardRef)(
               secondary: description
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aviala-form-group__slot", children }),
-          hasAction ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "aviala-form-group__action", children: [
-            info ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aviala-form-group__info", children: info }) : null,
-            feedback ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aviala-form-group__feedback", children: feedback }) : null,
-            actions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aviala-form-group__actions", children: actions }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aviala-form-group__slot", children }),
+          hasAction ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "aviala-form-group__action", children: [
+            info ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aviala-form-group__info", children: info }) : null,
+            feedback ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aviala-form-group__feedback", children: feedback }) : null,
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aviala-form-group__actions", children: actions }) : null
           ] }) : null
         ]
       }
@@ -4153,7 +4108,7 @@ function useColorPickerState({
 }
 
 // src/components/color-picker/color-picker-area.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ColorPickerArea({
   className,
   disabled,
@@ -4185,7 +4140,7 @@ function ColorPickerArea({
   );
   const { handlePointerDown, handlePointerMove } = usePointerDrag(ref, handleMove, !isDisabled);
   const hueColor = pureHueHex(hsva.h);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("aviala-color-picker-area", className), ...spiralDebugId("color-picker.content.area"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("aviala-color-picker-area", className), ...spiralDebugId("color-picker.content.area"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       ref,
@@ -4200,9 +4155,9 @@ function ColorPickerArea({
       "aria-valuenow": Math.round(hsva.s),
       tabIndex: isDisabled ? -1 : 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aviala-color-picker-area__white", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "aviala-color-picker-area__black", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aviala-color-picker-area__white", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aviala-color-picker-area__black", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "div",
           {
             className: "aviala-color-picker-area__thumb",
@@ -4221,7 +4176,7 @@ function ColorPickerArea({
 // src/components/color-picker/color-picker-inputs.tsx
 var import_icons10 = require("@aviala-design/icons");
 var import_react31 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function ColorPickerInputs({
   className,
   disabled,
@@ -4281,8 +4236,8 @@ function ColorPickerInputs({
     } catch {
     }
   }, [eyeDropperSupported, isDisabled, setValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("aviala-color-picker-inputs", className), ...spiralDebugId("color-picker.content.inputs"), children: [
-    showEyedropper ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("aviala-color-picker-inputs", className), ...spiralDebugId("color-picker.content.inputs"), children: [
+    showEyedropper ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Button,
       {
         type: "button",
@@ -4294,12 +4249,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__ */ (0, import_jsx_runtime26.jsx)(import_icons10.EditColorPicker, { "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons10.EditColorPicker, { "aria-hidden": true })
       }
     ) : null,
-    format === "hex" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "aviala-color-picker-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { style: "normal", children: "#" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    format === "hex" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "aviala-color-picker-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { style: "normal", children: "#" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4311,7 +4266,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitHex()
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "input",
       {
         className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4323,8 +4278,8 @@ function ColorPickerInputs({
         onKeyDown: (e) => e.key === "Enter" && commitComponents()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "aviala-color-picker-field aviala-color-picker-field--alpha", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "aviala-color-picker-field aviala-color-picker-field--alpha", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4337,20 +4292,20 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitAlpha()
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { style: "normal", children: "%" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { style: "normal", children: "%" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       Select,
       {
         value: format,
         onValueChange: (next) => setFormat(next),
         disabled: isDisabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectTrigger, { className: "aviala-color-picker-format-select w-[76px] shrink-0", size: "regular", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectContent, { onCloseAutoFocus: (event) => event.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(SelectItemGroup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectItem, { value: "hex", itemFunction: "radio", children: "HEX" }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectItem, { value: "rgb", itemFunction: "radio", children: "RGB" }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectItem, { value: "hsl", itemFunction: "radio", children: "HSL" })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectTrigger, { className: "aviala-color-picker-format-select w-[76px] shrink-0", size: "regular", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectValue, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectContent, { onCloseAutoFocus: (event) => event.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(SelectItemGroup, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectItem, { value: "hex", itemFunction: "radio", children: "HEX" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectItem, { value: "rgb", itemFunction: "radio", children: "RGB" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectItem, { value: "hsl", itemFunction: "radio", children: "HSL" })
           ] }) })
         ]
       }
@@ -4374,11 +4329,11 @@ var import_icons11 = require("@aviala-design/icons");
 
 // src/components/color-picker/color-pick-button.tsx
 var import_react32 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var ColorPickButton = (0, import_react32.forwardRef)(
   ({ className, color, selected = false, style, ...props }, ref) => {
     const swatch = parseColor(color).toHex();
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "button",
       {
         ref,
@@ -4387,7 +4342,7 @@ var ColorPickButton = (0, import_react32.forwardRef)(
         "data-selected": selected ? "true" : void 0,
         style,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "span",
           {
             className: "aviala-color-pick-button__swatch",
@@ -4402,7 +4357,7 @@ var ColorPickButton = (0, import_react32.forwardRef)(
 ColorPickButton.displayName = "ColorPickButton";
 
 // src/components/color-picker/color-picker-presets.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function ColorPickerPresets({
   className,
   presets: presetsProp,
@@ -4424,8 +4379,8 @@ function ColorPickerPresets({
     const next = [...presets, normalized].slice(-maxPresets);
     onPresetsChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("aviala-color-picker-presets", className), ...spiralDebugId("color-picker.content.presets"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("aviala-color-picker-presets", className), ...spiralDebugId("color-picker.content.presets"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Button,
       {
         type: "button",
@@ -4435,10 +4390,10 @@ function ColorPickerPresets({
         disabled: isDisabled || !onPresetsChange || presets.length >= maxPresets,
         "aria-label": "Add current color to presets",
         onClick: handleAdd,
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons11.SymbolAdd, { "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons11.SymbolAdd, { "aria-hidden": true })
       }
     ),
-    presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       ColorPickButton,
       {
         color,
@@ -4453,7 +4408,7 @@ function ColorPickerPresets({
 
 // src/components/color-picker/color-picker-slider.tsx
 var import_react33 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ColorPickerSlider({
   kind,
   className,
@@ -4501,12 +4456,12 @@ function ColorPickerSlider({
     backgroundImage: `linear-gradient(90deg, transparent, ${solidHex(value)})`,
     backgroundColor: "var(--color-picker-checkerboard)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: cn("aviala-color-picker-slider-row", className),
       ...spiralDebugId(`color-picker.content.${kind}-slider`),
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "div",
         {
           ref,
@@ -4520,8 +4475,8 @@ function ColorPickerSlider({
           "aria-valuenow": ariaValueNow,
           tabIndex: isDisabled ? -1 : 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "div",
               {
                 className: "aviala-color-picker-slider__thumb",
@@ -4537,7 +4492,7 @@ function ColorPickerSlider({
 }
 
 // src/components/color-picker/color-picker.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ColorPicker({
   children,
   className,
@@ -4580,17 +4535,17 @@ function ColorPicker({
     onPresetsChange,
     maxPresets
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColorPickerContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("inline-flex", className), ...spiralDebugId("color-picker"), children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("inline-flex", className), ...spiralDebugId("color-picker"), children }) }) });
 }
 function ColorPickerContextProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColorPickerContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerContext.Provider, { value, children });
 }
 var ColorPickerTrigger = (0, import_react34.forwardRef)(({ className, size = "regular", allRound = false, placeholder = "Select color", ...props }, ref) => {
   const { value, open, disabled } = useColorPickerContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "button",
     {
       ref,
@@ -4604,7 +4559,7 @@ var ColorPickerTrigger = (0, import_react34.forwardRef)(({ className, size = "re
       disabled,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "aviala-color-picker-trigger__swatch", ...spiralDebugId("color-picker.trigger.swatch"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "aviala-color-picker-trigger__swatch", ...spiralDebugId("color-picker.trigger.swatch"), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "span",
           {
             className: "aviala-color-picker-trigger__swatch-inner",
@@ -4612,7 +4567,7 @@ var ColorPickerTrigger = (0, import_react34.forwardRef)(({ className, size = "re
             "aria-hidden": true
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "aviala-color-picker-trigger__value", ...spiralDebugId("color-picker.trigger.value"), children: value ? value.replace(/^#/, "").slice(0, 6).toUpperCase() : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "aviala-color-picker-trigger__placeholder", children: placeholder }) })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "aviala-color-picker-trigger__value", ...spiralDebugId("color-picker.trigger.value"), children: value ? value.replace(/^#/, "").slice(0, 6).toUpperCase() : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "aviala-color-picker-trigger__placeholder", children: placeholder }) })
       ]
     }
   ) });
@@ -4631,7 +4586,7 @@ var ColorPickerContent = (0, import_react34.forwardRef)(
     ...props
   }, ref) => {
     const { presets, onPresetsChange, maxPresets, disabled } = useColorPickerContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       PopoverPrimitive2.Content,
       {
         ref,
@@ -4647,12 +4602,12 @@ var ColorPickerContent = (0, import_react34.forwardRef)(
         },
         onFocusOutside: (event) => event.preventDefault(),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "aviala-color-picker-panel", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColorPickerArea, { disabled }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColorPickerSlider, { kind: "hue", disabled }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColorPickerSlider, { kind: "alpha", disabled }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ColorPickerInputs, { disabled, showEyedropper }),
-          showPresets ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "aviala-color-picker-panel", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerArea, { disabled }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerSlider, { kind: "hue", disabled }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerSlider, { kind: "alpha", disabled }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerInputs, { disabled, showEyedropper }),
+          showPresets ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             ColorPickerPresets,
             {
               disabled,
@@ -4669,7 +4624,7 @@ var ColorPickerContent = (0, import_react34.forwardRef)(
 ColorPickerContent.displayName = "ColorPickerContent";
 
 // src/components/color-picker/color-picker-panel.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ColorPickerPanel({
   className,
   disabled,
@@ -4701,12 +4656,12 @@ function ColorPickerPanel({
     onPresetsChange,
     maxPresets
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("aviala-color-picker-panel", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerArea, { disabled }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerSlider, { kind: "hue", disabled }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerSlider, { kind: "alpha", disabled }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerInputs, { disabled, showEyedropper }),
-    showPresets ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("aviala-color-picker-panel", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorPickerArea, { disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorPickerSlider, { kind: "hue", disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorPickerSlider, { kind: "alpha", disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorPickerInputs, { disabled, showEyedropper }),
+    showPresets ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ColorPickerPresets,
       {
         disabled,
@@ -4722,7 +4677,7 @@ function ColorPickerPanel({
 var PopoverPrimitive3 = __toESM(require("@radix-ui/react-popover"), 1);
 var import_icons12 = require("@aviala-design/icons");
 var import_react35 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var CascaderContext = (0, import_react35.createContext)(null);
 function useCascaderContext() {
   const context = (0, import_react35.useContext)(CascaderContext);
@@ -4731,29 +4686,13 @@ function useCascaderContext() {
   }
   return context;
 }
-function renderSlotIcon5(node, debugId) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    "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__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "span",
     {
       className: cn(
@@ -4768,16 +4707,16 @@ function renderItemIcon2(node, iconLevel = "text", debugId) {
 }
 function renderBadgeSlot2(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-item__badge", children: (0, import_react35.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { children: node }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__badge", children: (0, import_react35.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, { children: node }) });
 }
 function CascaderItemFormRadio() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "aviala-cascader-item__form-radio", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-item__form-radio-surface" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-item__form-radio-indicator" })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "aviala-cascader-item__form-radio", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__form-radio-surface" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__form-radio-indicator" })
   ] });
 }
 function CascaderItemFormCheckbox() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_icons12.SymbolRight,
     {
       className: "aviala-cascader-item__form-checkbox-icon",
@@ -4790,27 +4729,27 @@ function CascaderItemFormCheckbox() {
 }
 function CascaderItemTrailingRadio({ selected }) {
   if (!selected) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons12.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons12.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function CascaderItemTrailingCheckbox({ selected }) {
   if (!selected) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons12.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons12.SymbolRight, { 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__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-item__function", children: icon });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__function", children: icon });
   }
   switch (itemFunction) {
     case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CascaderItemTrailingRadio, { selected }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemTrailingRadio, { selected }) });
     case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CascaderItemTrailingCheckbox, { selected }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemTrailingCheckbox, { selected }) });
     case "simple":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "aviala-cascader-item__function", children: [
-        selected ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons12.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) : null,
-        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons12.DirectionArrowRightLight, { level: "text", biggerSize: true, "aria-hidden": true }) : null
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "aviala-cascader-item__function", children: [
+        selected ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons12.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) : null,
+        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons12.DirectionArrowRightLight, { level: "text", biggerSize: true, "aria-hidden": true }) : null
       ] });
   }
 }
@@ -4970,7 +4909,7 @@ function Cascader({
       size
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CascaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverPrimitive3.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("inline-flex", className), ...spiralDebugId("cascader"), children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverPrimitive3.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("inline-flex", className), ...spiralDebugId("cascader"), children }) }) });
 }
 var CascaderTrigger = (0, import_react35.forwardRef)(
   ({
@@ -4991,12 +4930,12 @@ var CascaderTrigger = (0, import_react35.forwardRef)(
     const size = sizeProp ?? sizeContext;
     const disabled = disabledProp ?? disabledContext;
     const labels = selectedPath.map((_, index) => getOptionAtPath(selectedPath.slice(0, index + 1))?.label).filter((label) => label != null && label !== false);
-    const resolvedDisplay = displayValue ?? (labels.length > 0 ? labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+    const resolvedDisplay = displayValue ?? (labels.length > 0 ? labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
       index > 0 ? separator : null,
       label
     ] }, `${selectedPath[index]}-${index}`)) : null);
     const hasValue = resolvedDisplay != null && resolvedDisplay !== false;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
         ref,
@@ -5012,8 +4951,8 @@ var CascaderTrigger = (0, import_react35.forwardRef)(
         ...spiralDebugId("cascader.trigger"),
         ...props,
         children: [
-          renderSlotIcon5(leftIcon, "cascader.trigger.icon-left"),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-cascader-trigger__field", ...spiralDebugId("cascader.trigger.value"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          renderSlotIcon(leftIcon, "aviala-cascader-trigger__slot", "cascader.trigger.icon-left"),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-trigger__field", ...spiralDebugId("cascader.trigger.value"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "span",
             {
               className: cn("aviala-cascader-trigger__value", typographyVariants({ level: "text" })),
@@ -5021,15 +4960,15 @@ var CascaderTrigger = (0, import_react35.forwardRef)(
               children: hasValue ? resolvedDisplay : placeholder
             }
           ) }),
-          renderSlotIcon5(rightIcon, "cascader.trigger.icon-right"),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          renderSlotIcon(rightIcon, "aviala-cascader-trigger__slot", "cascader.trigger.icon-right"),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "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__ */ (0, import_jsx_runtime32.jsx)(import_icons12.DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
+              children: expandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons12.DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
             }
           )
         ]
@@ -5047,7 +4986,7 @@ var CascaderContent = (0, import_react35.forwardRef)(
     portalled = true,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       PopoverPrimitive3.Content,
       {
         ref,
@@ -5060,12 +4999,12 @@ var CascaderContent = (0, import_react35.forwardRef)(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverPrimitive3.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverPrimitive3.Portal, { children: content });
   }
 );
 CascaderContent.displayName = "CascaderContent";
 var CascaderMenu = (0, import_react35.forwardRef)(
-  ({ children, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cn("aviala-cascader-menu", className), children })
+  ({ children, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: cn("aviala-cascader-menu", className), children })
 );
 CascaderMenu.displayName = "CascaderMenu";
 var CascaderColumn = (0, import_react35.forwardRef)(
@@ -5079,14 +5018,14 @@ var CascaderColumn = (0, import_react35.forwardRef)(
       width: exitLayout.width,
       zIndex: 0
     } : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         ref,
         className: cn("aviala-cascader-column", className),
         "data-animate": animate,
         style: exitStyle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
       }
     );
   }
@@ -5098,10 +5037,10 @@ function CascaderItemGroup({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("aviala-cascader-group", className), children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("aviala-cascader-label", typographyVariants({ level: "caption" })), children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "aviala-cascader-group__slot", children }),
-    showDivider ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "aviala-cascader-separator", role: "separator" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("aviala-cascader-group", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("aviala-cascader-label", typographyVariants({ level: "caption" })), children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aviala-cascader-group__slot", children }),
+    showDivider ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aviala-cascader-separator", role: "separator" }) : null
   ] });
 }
 var CascaderItem = (0, import_react35.forwardRef)(
@@ -5162,7 +5101,7 @@ var CascaderItem = (0, import_react35.forwardRef)(
         expandTo(path);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
         ref,
@@ -5194,10 +5133,10 @@ var CascaderItem = (0, import_react35.forwardRef)(
           if (!isTitle) setHighlightedValue(value);
         },
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CascaderItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CascaderItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon2(leftIcon, leftIconLevel, "cascader.content.item.icon-left") : null,
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("aviala-cascader-item__text", typographyVariants({ level: isTitle ? "caption" : "text" })), children: children ?? option?.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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(
@@ -5322,7 +5261,7 @@ function CascaderOptionsMenu({ className }) {
     }, COLUMN_ANIMATION_MS);
     return () => window.clearTimeout(timeout);
   }, [columns, open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CascaderMenu, { ref: menuRef, className, children: columns.map(({ pathPrefix, key, animateEnter, animateExit, exitLayout }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderMenu, { ref: menuRef, className, children: columns.map(({ pathPrefix, key, animateEnter, animateExit, exitLayout }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     CascaderColumn,
     {
       ref: (element) => {
@@ -5335,7 +5274,7 @@ function CascaderOptionsMenu({ className }) {
       animateEnter,
       animateExit,
       exitLayout,
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         CascaderItem,
         {
           value: option.value,
@@ -5373,7 +5312,7 @@ function CascaderField({
   separator,
   ...triggerProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     Cascader,
     {
       options,
@@ -5388,7 +5327,7 @@ function CascaderField({
       changeOnSelect,
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           CascaderTrigger,
           {
             size,
@@ -5402,7 +5341,7 @@ function CascaderField({
             ...triggerProps
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CascaderOptionsMenu, { className: menuClassName }) })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderOptionsMenu, { className: menuClassName }) })
       ]
     }
   );
@@ -5415,13 +5354,13 @@ var import_react39 = require("react");
 
 // src/components/date-picker/date-picker-context.tsx
 var import_react36 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var DatePickerContext = (0, import_react36.createContext)(null);
 function DatePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DatePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DatePickerContext.Provider, { value, children });
 }
 function useDatePickerContext() {
   const context = (0, import_react36.useContext)(DatePickerContext);
@@ -5642,7 +5581,7 @@ function stickyRoundIndex(fractionalIndex, stickiness = WHEEL_STICKY_AMOUNT) {
 }
 
 // src/components/date-picker/date-picker-time-wheel.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var LOOP_SECTIONS = 3;
 var MIDDLE_SECTION = 1;
 function formatWheelValue(value) {
@@ -5882,23 +5821,23 @@ function DatePickerTimeWheelColumn({
     }
   };
   const selectedOptionId = loop ? `${ariaLabel}-${value}-${values.length * MIDDLE_SECTION + getValueIndex(values, value)}` : `${ariaLabel}-${value}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("aviala-datepicker-time__wheel", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("aviala-datepicker-time__wheel", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--top",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--bottom",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         ref: scrollRef,
@@ -5909,17 +5848,17 @@ function DatePickerTimeWheelColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: "aviala-datepicker-time__wheel-list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime34.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "li",
             {
               id: optionId,
               className: "aviala-datepicker-time__wheel-item",
               role: "option",
               "aria-selected": isSelected,
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5948,7 +5887,7 @@ function DatePickerTimeWheelColumn({
 }
 
 // src/components/date-picker/date-picker-month-wheels.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var MONTH_VALUES = Array.from({ length: 12 }, (_, index) => index + 1);
 function formatYearValue(value) {
   return String(value);
@@ -5973,14 +5912,14 @@ function DatePickerMonthYearWheels({
   const setYearMonth = (nextYear, nextMonth) => {
     setViewMonth(new Date(nextYear, nextMonth - 1, 1));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       className: cn("aviala-datepicker-month", className),
       role: "group",
       "aria-label": "\u9009\u62E9\u5E74\u6708",
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "aviala-datepicker-month__columns", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "aviala-datepicker-month__columns", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           DatePickerTimeWheelColumn,
           {
             "aria-label": "\u5E74",
@@ -5992,7 +5931,7 @@ function DatePickerMonthYearWheels({
             onChange: (nextYear) => setYearMonth(nextYear, month)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           DatePickerTimeWheelColumn,
           {
             "aria-label": "\u6708",
@@ -6010,12 +5949,12 @@ function DatePickerMonthYearWheels({
 }
 
 // src/components/time-picker/time-picker-wheels.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("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__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("aviala-datepicker-time", className), role: "group", "aria-label": "\u9009\u62E9\u65F6\u95F4", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "aviala-datepicker-time__columns", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("aviala-datepicker-time", className), role: "group", "aria-label": "\u9009\u62E9\u65F6\u95F4", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "aviala-datepicker-time__columns", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5C0F\u65F6",
@@ -6024,7 +5963,7 @@ function TimePickerWheels({ value, onChange, className }) {
         onChange: (hours) => onChange({ ...value, hours })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5206\u949F",
@@ -6037,22 +5976,7 @@ function TimePickerWheels({ value, onChange, className }) {
 }
 
 // src/components/date-picker/date-picker.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-function renderSlotIcon6(node) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    "span",
-    {
-      className: "aviala-datepicker-trigger__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      children: content
-    }
-  );
-}
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function getInitialViewMonth(mode, singleValue, rangeValue) {
   if (mode === "single" && singleValue) return startOfDay(singleValue);
   if (mode === "range") {
@@ -6376,7 +6300,7 @@ function DatePicker(props) {
       viewMonth
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverPrimitive4.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("inline-flex", className), children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverPrimitive4.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn("inline-flex", className), children }) }) });
 }
 function formatTriggerValue(mode, singleValue, rangeValue, enableTime, timeValue, rangeSeparator) {
   if (mode === "single") {
@@ -6468,7 +6392,7 @@ var DatePickerTrigger = (0, import_react39.forwardRef)(
     const showEditableInput = editable && displayValue == null;
     if (!showEditableInput) {
       const hasValue = formatted != null && formatted !== false;
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         "button",
         {
           type: "button",
@@ -6481,10 +6405,11 @@ var DatePickerTrigger = (0, import_react39.forwardRef)(
           "aria-expanded": open,
           "aria-haspopup": "dialog",
           children: [
-            renderSlotIcon6(
-              leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true })
+            renderSlotIcon(
+              leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+              "aviala-datepicker-trigger__slot"
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "span",
               {
                 className: cn(
@@ -6495,12 +6420,12 @@ var DatePickerTrigger = (0, import_react39.forwardRef)(
                 children: hasValue ? formatted : emptyPlaceholder
               }
             ) }),
-            renderSlotIcon6(rightIcon)
+            renderSlotIcon(rightIcon, "aviala-datepicker-trigger__slot")
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverPrimitive4.Anchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverPrimitive4.Anchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "div",
       {
         className: cn("aviala-datepicker-trigger aviala-focus-ring", className),
@@ -6517,10 +6442,11 @@ var DatePickerTrigger = (0, import_react39.forwardRef)(
           openPicker();
         },
         children: [
-          renderSlotIcon6(
-            leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true })
+          renderSlotIcon(
+            leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+            "aviala-datepicker-trigger__slot"
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "input",
             {
               ref: setInputRefs,
@@ -6540,93 +6466,10 @@ var DatePickerTrigger = (0, import_react39.forwardRef)(
               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(
@@ -6656,7 +6499,7 @@ var DatePickerTrigger = (0, import_react39.forwardRef)(
               ...props
             }
           ) }),
-          renderSlotIcon6(rightIcon)
+          renderSlotIcon(rightIcon, "aviala-datepicker-trigger__slot")
         ]
       }
     ) });
@@ -6672,7 +6515,7 @@ var DatePickerContent = (0, import_react39.forwardRef)(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       PopoverPrimitive4.Content,
       {
         ref,
@@ -6680,11 +6523,11 @@ var DatePickerContent = (0, import_react39.forwardRef)(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerCalendar, {})
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerCalendar, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverPrimitive4.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverPrimitive4.Portal, { children: content });
   }
 );
 DatePickerContent.displayName = "DatePickerContent";
@@ -6702,7 +6545,7 @@ function getFooterDateLabel(mode, singleValue, rangeValue) {
 }
 function DatePickerTimePanel() {
   const { timeValue, setTimeValue } = useDatePickerContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
 }
 function DatePickerPanelFooter() {
   const {
@@ -6717,7 +6560,7 @@ function DatePickerPanelFooter() {
   if (!enableTime) return null;
   const panelValue = activePanel === "time" ? "time" : "date";
   const isRangeMode = mode === "range";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     SegmentatorGroup,
     {
       value: panelValue,
@@ -6728,20 +6571,20 @@ function DatePickerPanelFooter() {
       "data-active-panel": activePanel,
       "aria-label": "\u65E5\u671F\u4E0E\u65F6\u95F4\u5207\u6362",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           SegmentatorItem,
           {
             value: "date",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && panelValue === "time",
             children: getFooterDateLabel(mode, singleValue, rangeValue)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           SegmentatorItem,
           {
             value: "time",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && panelValue === "date",
             children: formatTimeValue(timeValue.hours, timeValue.minutes)
           }
@@ -6909,8 +6752,8 @@ function DatePickerCalendar({ className }) {
     }
   };
   const stepMonth = isMonthPanel ? 12 : 1;
-  const renderDateContent = () => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "aviala-datepicker-calendar__weekdays", "aria-hidden": true, children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const renderDateContent = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "aviala-datepicker-calendar__weekdays", "aria-hidden": true, children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "span",
       {
         className: cn(
@@ -6921,8 +6764,8 @@ function DatePickerCalendar({ className }) {
       },
       label
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "aviala-datepicker-calendar__grid-viewport", children: [
-      monthSlide && outgoingDays ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "aviala-datepicker-calendar__grid-viewport", children: [
+      monthSlide && outgoingDays ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           className: "aviala-datepicker-calendar__grid",
@@ -6931,12 +6774,12 @@ function DatePickerCalendar({ className }) {
           "aria-hidden": true,
           children: outgoingDays.map((day) => {
             const outside = !isSameMonth(day, monthSlide.outgoingMonth);
-            return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "span",
               {
                 className: "aviala-datepicker-day",
                 "data-outside": outside ? "true" : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                   "span",
                   {
                     className: cn(
@@ -6953,7 +6796,7 @@ function DatePickerCalendar({ className }) {
         },
         `out-${monthSlide.outgoingMonth.getFullYear()}-${monthSlide.outgoingMonth.getMonth()}`
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           ref: dayGridRef,
@@ -6977,7 +6820,7 @@ function DatePickerCalendar({ className }) {
             const dayDisabled = isDateDisabled(day, minDate, maxDate);
             const focused = focusedDay ? isSameDay(day, focusedDay) : false;
             const dayKey = formatIsoDate(day);
-            return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
               "button",
               {
                 type: "button",
@@ -6999,7 +6842,7 @@ function DatePickerCalendar({ className }) {
                 onFocus: () => setFocusedDay(day),
                 onKeyDown: (event) => handleDayKeyDown(event, day),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                     "span",
                     {
                       className: cn(
@@ -7009,7 +6852,7 @@ function DatePickerCalendar({ className }) {
                       children: day.getDate()
                     }
                   ),
-                  isToday ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
+                  isToday ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
                 ]
               },
               dayKey
@@ -7020,20 +6863,20 @@ function DatePickerCalendar({ className }) {
       )
     ] })
   ] });
-  const renderContentView = (view) => view === "month" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerMonthYearWheels, { layoutKey: monthWheelLayoutKey }) : renderDateContent();
-  const renderDatePanel = () => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "aviala-datepicker-calendar__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const renderContentView = (view) => view === "month" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerMonthYearWheels, { layoutKey: monthWheelLayoutKey }) : renderDateContent();
+  const renderDatePanel = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "aviala-datepicker-calendar__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "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__ */ (0, import_jsx_runtime37.jsx)(import_icons13.DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
         {
           type: "button",
@@ -7046,7 +6889,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__ */ (0, import_jsx_runtime37.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "span",
             {
               className: "aviala-datepicker-calendar__title-text",
@@ -7057,19 +6900,19 @@ function DatePickerCalendar({ className }) {
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "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__ */ (0, import_jsx_runtime37.jsx)(import_icons13.DirectionArrowRight, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.DirectionArrowRight, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "aviala-datepicker-calendar__view-viewport", children: [
-      viewCrossfade ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "aviala-datepicker-calendar__view-viewport", children: [
+      viewCrossfade ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           className: "aviala-datepicker-calendar__view",
@@ -7080,7 +6923,7 @@ function DatePickerCalendar({ className }) {
         },
         `exit-${viewCrossfade.outgoing}`
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           className: "aviala-datepicker-calendar__view",
@@ -7101,16 +6944,16 @@ function DatePickerCalendar({ className }) {
       )
     ] })
   ] });
-  const renderPanel = (kind) => kind === "time" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerTimePanel, {}) : renderDatePanel();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  const renderPanel = (kind) => kind === "time" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerTimePanel, {}) : renderDatePanel();
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       className: cn("aviala-datepicker-calendar", className),
       role: "application",
       "aria-label": "Calendar",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "aviala-datepicker-calendar__panel-viewport", children: [
-          panelSlide ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "aviala-datepicker-calendar__panel-viewport", children: [
+          panelSlide ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "div",
             {
               className: "aviala-datepicker-calendar__panel aviala-datepicker-calendar__body",
@@ -7122,7 +6965,7 @@ function DatePickerCalendar({ className }) {
             },
             `panel-exit-${panelSlide.outgoing}`
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "div",
             {
               className: "aviala-datepicker-calendar__panel aviala-datepicker-calendar__body",
@@ -7140,7 +6983,7 @@ function DatePickerCalendar({ className }) {
             `panel-enter-${panel}`
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerPanelFooter, {})
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerPanelFooter, {})
       ]
     }
   );
@@ -7204,8 +7047,8 @@ function DatePickerField({
     defaultTimeValue,
     onTimeChange
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(DatePicker, { ...pickerProps, size, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(DatePicker, { ...pickerProps, size, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       DatePickerTrigger,
       {
         size,
@@ -7219,7 +7062,7 @@ function DatePickerField({
         editable
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DatePickerCalendar, { className: calendarClassName }) })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerCalendar, { className: calendarClassName }) })
   ] });
 }
 
@@ -7230,13 +7073,13 @@ var import_react41 = require("react");
 
 // src/components/time-picker/time-picker-context.tsx
 var import_react40 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var TimePickerContext = (0, import_react40.createContext)(null);
 function TimePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TimePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePickerContext.Provider, { value, children });
 }
 function useTimePickerContext() {
   const context = (0, import_react40.useContext)(TimePickerContext);
@@ -7247,22 +7090,7 @@ function useTimePickerContext() {
 }
 
 // src/components/time-picker/time-picker.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-function renderSlotIcon7(node) {
-  if (!node) return null;
-  const content = cloneAvialaIconElement(node, {
-    level: "text",
-    biggerSize: true
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    "span",
-    {
-      className: "aviala-timepicker-trigger__slot",
-      style: iconSlotCssVarStyle(node, "--input-slot-icon-size", "text", true),
-      children: content
-    }
-  );
-}
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function TimePicker({
   children,
   value: valueProp,
@@ -7335,7 +7163,7 @@ function TimePicker({
     }),
     [disabled, open, size, value, setValue]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePickerProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("inline-flex", className), children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimePickerProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("inline-flex", className), children }) }) });
 }
 var TimePickerTrigger = (0, import_react41.forwardRef)(
   ({
@@ -7355,7 +7183,7 @@ var TimePickerTrigger = (0, import_react41.forwardRef)(
     const disabled = disabledProp ?? disabledContext;
     const formatted = displayValue !== void 0 ? displayValue : formatTimeValue(value.hours, value.minutes);
     const hasValue = formatted != null && formatted !== "";
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "button",
       {
         ref,
@@ -7370,10 +7198,11 @@ var TimePickerTrigger = (0, import_react41.forwardRef)(
         "aria-haspopup": "dialog",
         ...props,
         children: [
-          renderSlotIcon7(
-            leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons14.TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true })
+          renderSlotIcon(
+            leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons14.TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
+            "aviala-timepicker-trigger__slot"
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "span",
             {
               className: cn(
@@ -7384,7 +7213,7 @@ var TimePickerTrigger = (0, import_react41.forwardRef)(
               children: hasValue ? formatted : placeholder
             }
           ) }),
-          renderSlotIcon7(rightIcon)
+          renderSlotIcon(rightIcon, "aviala-timepicker-trigger__slot")
         ]
       }
     ) });
@@ -7400,7 +7229,7 @@ var TimePickerContent = (0, import_react41.forwardRef)(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       PopoverPrimitive5.Content,
       {
         ref,
@@ -7408,17 +7237,17 @@ var TimePickerContent = (0, import_react41.forwardRef)(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePickerPanel, {})
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimePickerPanel, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopoverPrimitive5.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverPrimitive5.Portal, { children: content });
   }
 );
 TimePickerContent.displayName = "TimePickerContent";
 function TimePickerPanel({ className }) {
   const { value, setValue } = useTimePickerContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("aviala-timepicker-panel", className), role: "application", "aria-label": "Time picker", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePickerWheels, { value, onChange: setValue }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("aviala-timepicker-panel", className), role: "application", "aria-label": "Time picker", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimePickerWheels, { value, onChange: setValue }) });
 }
 function TimePickerField({
   contentClassName,
@@ -7438,7 +7267,7 @@ function TimePickerField({
   onOpenChange,
   disabled
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     TimePicker,
     {
       value,
@@ -7451,7 +7280,7 @@ function TimePickerField({
       size,
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           TimePickerTrigger,
           {
             size,
@@ -7462,7 +7291,7 @@ function TimePickerField({
             error
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePickerPanel, { className: panelClassName }) })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimePickerPanel, { className: panelClassName }) })
       ]
     }
   );
@@ -7473,7 +7302,7 @@ var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"), 1);
 var import_react42 = require("react");
 
 // src/components/overlay-pointer.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var TOOLTIP_POINTER = {
   width: 14,
   height: 5,
@@ -7494,7 +7323,7 @@ function OverlayPointerSvg({
   ...props
 }) {
   const isPopover = variant === "popover";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "svg",
     {
       ...props,
@@ -7507,16 +7336,16 @@ function OverlayPointerSvg({
       "aria-hidden": true,
       className,
       style: { ...style, width, height },
-      children: isPopover ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: path, className: "aviala-popover-content__arrow-outline" }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: path, className: "aviala-popover-content__arrow-fill" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: path })
+      children: isPopover ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: path, className: "aviala-popover-content__arrow-outline" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: path, className: "aviala-popover-content__arrow-fill" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: path })
     }
   );
 }
 
 // src/components/popover.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Popover({
   open: openProp,
   defaultOpen = false,
@@ -7534,7 +7363,7 @@ function Popover({
     },
     [isControlled, onOpenChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     PopoverPrimitive6.Root,
     {
       open,
@@ -7556,40 +7385,48 @@ var PopoverContent = (0, import_react42.forwardRef)(
     portalled = true,
     showArrow = false,
     flush = false,
+    appearance = "default",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    const isDefaultAppearance = appearance === "default";
+    const surfaceLevel = appearance === "tooltip" ? "caption" : "text";
+    const pointer = isDefaultAppearance ? POPOVER_POINTER : TOOLTIP_POINTER;
+    const content = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       PopoverPrimitive6.Content,
       {
         ref,
         align,
         sideOffset,
         collisionPadding,
+        "data-appearance": appearance,
         className: cn("aviala-popover-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "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__ */ (0, import_jsx_runtime41.jsx)(
+          showArrow ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             PopoverPrimitive6.Arrow,
             {
               asChild: true,
-              width: POPOVER_POINTER.width,
-              height: POPOVER_POINTER.height,
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              width: pointer.width,
+              height: pointer.height,
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 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
                 }
               )
             }
@@ -7598,7 +7435,7 @@ var PopoverContent = (0, import_react42.forwardRef)(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverPrimitive6.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverPrimitive6.Portal, { children: content });
   }
 );
 PopoverContent.displayName = PopoverPrimitive6.Content.displayName;
@@ -7622,7 +7459,7 @@ function useCoarsePointer() {
 }
 
 // src/components/hover-popover.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function HoverPopover({
   content,
   children,
@@ -7668,9 +7505,9 @@ function HoverPopover({
     closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
   }, [clearTimers, closeDelay, setOpen]);
   if (coarse) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverTrigger, { asChild: true, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         PopoverContent,
         {
           side,
@@ -7684,8 +7521,8 @@ function HoverPopover({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       PopoverTrigger,
       {
         asChild: true,
@@ -7697,7 +7534,7 @@ function HoverPopover({
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       PopoverContent,
       {
         ref: contentRef,
@@ -7732,7 +7569,7 @@ var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_icons15 = require("@aviala-design/icons");
 var import_class_variance_authority10 = require("class-variance-authority");
 var import_react45 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var MODAL_ICON_SIZE = 16;
 var modalContentVariants = (0, import_class_variance_authority10.cva)("aviala-modal-content", {
   variants: {
@@ -7755,13 +7592,13 @@ function renderModalIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
 }
 var Modal = DialogPrimitive.Root;
 var ModalTrigger = DialogPrimitive.Trigger;
 var ModalPortal = DialogPrimitive.Portal;
 var ModalClose = DialogPrimitive.Close;
-var ModalOverlay = (0, import_react45.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var ModalOverlay = (0, import_react45.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -7780,24 +7617,24 @@ var ModalContent = (0, import_react45.forwardRef)(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const overlay = showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalOverlay, {}) : null;
-    const panel = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    const overlay = showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalOverlay, {}) : null;
+    const panel = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       DialogPrimitive.Content,
       {
         ref,
         className: cn(modalContentVariants({ size }), className),
         onOpenAutoFocus,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "aviala-modal-content__surface", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "aviala-modal-content__surface", children })
       }
     );
     if (!portalled) {
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
         overlay,
         panel
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(DialogPrimitive.Portal, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DialogPrimitive.Portal, { children: [
       overlay,
       panel
     ] });
@@ -7813,10 +7650,10 @@ var ModalHeader = (0, import_react45.forwardRef)(
     showClose = true,
     closeLabel = "Close dialog",
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "aviala-modal__header-row", children: [
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "aviala-modal__header-row", children: [
     showIcon ? renderModalIcon(icon) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "aviala-modal__header-main", children }),
-    showClose ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "aviala-modal__header-main", children }),
+    showClose ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Button,
       {
         type: "button",
@@ -7824,28 +7661,28 @@ var ModalHeader = (0, import_react45.forwardRef)(
         iconOnly: true,
         "aria-label": closeLabel,
         className: "aviala-modal__close",
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons15.SymbolWrong, { "aria-hidden": true })
+        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons15.SymbolWrong, { "aria-hidden": true })
       }
     ) }) : null
   ] }) })
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = (0, import_react45.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
+var ModalTitle = (0, import_react45.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
 ModalTitle.displayName = DialogPrimitive.Title.displayName;
-var ModalDescription = (0, import_react45.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
+var ModalDescription = (0, import_react45.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
 ModalDescription.displayName = DialogPrimitive.Description.displayName;
 function ModalHeaderText({
   title,
   description,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalHeader, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "aviala-modal__header-typeface", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalTitle, { children: title }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ModalDescription, { children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalHeader, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "aviala-modal__header-typeface", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalTitle, { children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalDescription, { children: description }) : null
   ] }) });
 }
 var ModalBody = (0, import_react45.forwardRef)(
-  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     Typeface,
     {
       className: "aviala-modal__body-typeface",
@@ -7857,21 +7694,21 @@ var ModalBody = (0, import_react45.forwardRef)(
 );
 ModalBody.displayName = "ModalBody";
 var ModalFooter = (0, import_react45.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ref, className: cn("aviala-modal__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ref, className: cn("aviala-modal__footer", className), ...props })
 );
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_react46 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var TOOLTIP_DELAY_DURATION = 300;
 function TooltipProvider({
   delayDuration = TOOLTIP_DELAY_DURATION,
   skipDelayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     TooltipPrimitive.Provider,
     {
       delayDuration,
@@ -7890,7 +7727,7 @@ var TooltipContent = (0, import_react46.forwardRef)(
     collisionPadding = 8,
     showArrow = true,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -7899,14 +7736,14 @@ var TooltipContent = (0, import_react46.forwardRef)(
       className: cn("aviala-tooltip-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
-        showArrow ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
+        showArrow ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           TooltipPrimitive.Arrow,
           {
             asChild: true,
             width: TOOLTIP_POINTER.width,
             height: TOOLTIP_POINTER.height,
-            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               OverlayPointerSvg,
               {
                 className: "aviala-tooltip-content__arrow",
@@ -7924,7 +7761,7 @@ var TooltipContent = (0, import_react46.forwardRef)(
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/responsive-tooltip.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function ResponsiveTooltip({
   content,
   children,
@@ -7941,11 +7778,12 @@ function ResponsiveTooltip({
 }) {
   const coarse = useCoarsePointer();
   if (coarse) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Popover, { open, defaultOpen, onOpenChange, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverTrigger, { asChild: true, children }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Popover, { open, defaultOpen, onOpenChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         PopoverContent,
         {
+          appearance: "tooltip",
           side,
           align,
           sideOffset,
@@ -7957,7 +7795,7 @@ function ResponsiveTooltip({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     Tooltip,
     {
       delayDuration,
@@ -7965,8 +7803,8 @@ function ResponsiveTooltip({
       defaultOpen,
       onOpenChange,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           TooltipContent,
           {
             side,
@@ -7987,7 +7825,7 @@ function ResponsiveTooltip({
 var import_class_variance_authority11 = require("class-variance-authority");
 var import_icons16 = require("@aviala-design/icons");
 var import_react47 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var FEEDBACK_ICON_SIZE = 22;
 var feedbackVariants = (0, import_class_variance_authority11.cva)("aviala-feedback", {
   variants: {
@@ -8023,22 +7861,22 @@ function renderFeedbackIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
 }
 function defaultStatusIcon(type, mode) {
   const iconMode = mode === "primary" ? "fill" : "fill";
   const thickness = "Regular";
   switch (type) {
     case "information":
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolInformationCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolInformationCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "wrong":
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolWrongCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolWrongCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "normal":
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
   }
 }
 var Feedback = (0, import_react47.forwardRef)(
@@ -8063,7 +7901,7 @@ var Feedback = (0, import_react47.forwardRef)(
     const tone = mode === "primary" ? "white" : "default";
     const isSmall = resolvedSize === "small";
     const resolvedRole = resolvedType === "wrong" ? "alert" : "status";
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "div",
       {
         ref,
@@ -8077,9 +7915,9 @@ var Feedback = (0, import_react47.forwardRef)(
         "data-size": resolvedSize,
         "data-mode": mode,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "aviala-feedback__body", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "aviala-feedback__body", children: [
           renderFeedbackIcon(icon ?? defaultStatusIcon(resolvedType, mode)),
-          isSmall ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          isSmall ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Typeface,
             {
               className: "aviala-feedback__typeface",
@@ -8089,7 +7927,7 @@ var Feedback = (0, import_react47.forwardRef)(
               tone
             }
           ),
-          action ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          action ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Link,
             {
               level: "text",
@@ -8105,7 +7943,7 @@ var Feedback = (0, import_react47.forwardRef)(
               children: action
             }
           ) : null,
-          showClose ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          showClose ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Link,
             {
               level: "text",
@@ -8114,7 +7952,7 @@ var Feedback = (0, import_react47.forwardRef)(
               href: onClose ? "#" : void 0,
               "aria-label": closeLabel,
               className: "aviala-feedback__close",
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons16.SymbolWrong, { "aria-hidden": true }),
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolWrong, { "aria-hidden": true }),
               onClick: (event) => {
                 if (onClose) {
                   event.preventDefault();
@@ -8134,7 +7972,7 @@ Feedback.displayName = "Feedback";
 var import_icons17 = require("@aviala-design/icons");
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_react48 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var ALERT_ICON_SIZE = 16;
 var alertVariants = (0, import_class_variance_authority12.cva)("aviala-alert", {
   variants: {
@@ -8170,20 +8008,20 @@ function renderAlertIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
 }
 function defaultStatusIcon2(type) {
   const iconProps = { thickness: "Regular", mode: "fill", "aria-hidden": true };
   switch (type) {
     case "info":
     case "neutral":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolInformationCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons17.SymbolInformationCircle, { ...iconProps });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolWarningCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons17.SymbolWarningCircle, { ...iconProps });
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolWrongCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons17.SymbolWrongCircle, { ...iconProps });
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolRightCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons17.SymbolRightCircle, { ...iconProps });
   }
 }
 var Alert = (0, import_react48.forwardRef)(
@@ -8212,7 +8050,7 @@ var Alert = (0, import_react48.forwardRef)(
     const resolvedType = type ?? "info";
     const resolvedRole = resolvedType === "error" ? "alert" : "status";
     const hasActions = showActions && (action || secondaryAction);
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
         ref,
@@ -8224,9 +8062,9 @@ var Alert = (0, import_react48.forwardRef)(
         "data-appearance": appearance,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "aviala-alert__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-alert__body", children: [
             showIcon ? renderAlertIcon(icon ?? defaultStatusIcon2(resolvedType)) : null,
-            isSmall ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            isSmall ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               Typeface,
               {
                 className: "aviala-alert__typeface",
@@ -8235,7 +8073,7 @@ var Alert = (0, import_react48.forwardRef)(
                 secondary: description
               }
             ),
-            quickAction ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            quickAction ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               Link,
               {
                 level: "text",
@@ -8251,7 +8089,7 @@ var Alert = (0, import_react48.forwardRef)(
                 children: quickAction
               }
             ) : null,
-            dismissible ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            dismissible ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               Link,
               {
                 level: "text",
@@ -8260,7 +8098,7 @@ var Alert = (0, import_react48.forwardRef)(
                 href: onDismiss ? "#" : void 0,
                 "aria-label": closeLabel,
                 className: "aviala-alert__close",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons17.SymbolWrong, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons17.SymbolWrong, { "aria-hidden": true }),
                 onClick: (event) => {
                   if (onDismiss) {
                     event.preventDefault();
@@ -8270,8 +8108,8 @@ var Alert = (0, import_react48.forwardRef)(
               }
             ) : null
           ] }),
-          hasActions ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "aviala-alert__actions", children: [
-            action ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          hasActions ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-alert__actions", children: [
+            action ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               Link,
               {
                 level: "caption",
@@ -8287,7 +8125,7 @@ var Alert = (0, import_react48.forwardRef)(
                 children: action
               }
             ) : null,
-            secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               Link,
               {
                 level: "caption",
@@ -8314,30 +8152,30 @@ Alert.displayName = "Alert";
 // src/components/list.tsx
 var import_icons18 = require("@aviala-design/icons");
 var import_react49 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var List = (0, import_react49.forwardRef)(
-  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref, className: cn("aviala-list", className), ...props, children: [
-    title != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListTitle, { children: title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListGroup, { children })
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref, className: cn("aviala-list", className), ...props, children: [
+    title != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListTitle, { children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListGroup, { children })
   ] })
 );
 List.displayName = "List";
 var ListTitle = (0, import_react49.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: cn(typographyVariants({ level: "text" })), children }) })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: cn(typographyVariants({ level: "text" })), children }) })
 );
 ListTitle.displayName = "ListTitle";
 var ListGroup = (0, import_react49.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
 );
 ListGroup.displayName = "ListGroup";
 function ListItemGroup({ label, children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("aviala-list", className), children: [
-    label != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListTitle, { children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListGroup, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("aviala-list", className), children: [
+    label != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListTitle, { children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListGroup, { children })
   ] });
 }
 var ListDivider = (0, import_react49.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "span",
     {
       ref,
@@ -8349,13 +8187,13 @@ var ListDivider = (0, import_react49.forwardRef)(
 );
 ListDivider.displayName = "ListDivider";
 var ListSeparator = (0, import_react49.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("hr", { ref, className: cn("aviala-list-separator", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("hr", { ref, className: cn("aviala-list-separator", className), ...props })
 );
 ListSeparator.displayName = "ListSeparator";
 function renderLeadingIcon(node, leading) {
   if (leading === "none") return null;
   const iconSize = leading === "shaped" ? 20 : 22;
-  const content = node ?? (leading === "shaped" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }));
+  const content = node ?? (leading === "shaped" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }));
   const rendered = (0, import_react49.isValidElement)(content) && typeof content.type !== "string" ? (0, import_react49.cloneElement)(content, {
     width: iconSize,
     height: iconSize,
@@ -8364,7 +8202,7 @@ function renderLeadingIcon(node, leading) {
       "shrink-0"
     )
   }) : content;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "span",
     {
       className: cn(
@@ -8395,44 +8233,44 @@ var ListItem = (0, import_react49.forwardRef)(
     ...props
   }, ref) => {
     const isInteractive = interactive ?? onClick != null;
-    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (itemType) {
         case "action":
-          return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__more", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__more", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__trailing", children: [
               primaryAction,
-              secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 Button,
                 {
                   mode: "default",
                   size: "regular",
                   iconOnly: true,
                   "aria-label": "More",
-                  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true })
+                  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons18.DirectionArrowRightLight, { width: 18, height: 18 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListDivider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.DirectionArrowRightLight, { width: 18, height: 18 }) })
           ] });
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Switch, { ...switchProps })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListDivider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "aviala-list-item__select", children: select })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListDivider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-list-item__select", children: select })
           ] });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "div",
       {
         ref,
@@ -8447,8 +8285,8 @@ var ListItem = (0, import_react49.forwardRef)(
         ...props,
         children: [
           renderLeadingIcon(icon, leading),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-list-item__content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
             renderTrailing()
           ] }) })
         ]
@@ -8462,7 +8300,7 @@ ListItem.displayName = "ListItem";
 var PopoverPrimitive7 = __toESM(require("@radix-ui/react-popover"), 1);
 var import_react_slot5 = require("@radix-ui/react-slot");
 var import_react50 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function navigationItemButtonMode(active) {
   return active ? "second" : "noBackgroundCustom";
 }
@@ -8871,7 +8709,7 @@ var Navigation = (0, import_react50.forwardRef)(
     direction = "vertical",
     dividingLine = false,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     Tag2,
     {
       ref,
@@ -8885,7 +8723,7 @@ var Navigation = (0, import_react50.forwardRef)(
 );
 Navigation.displayName = "Navigation";
 var NavigationBrand = (0, import_react50.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       ref,
@@ -8897,24 +8735,24 @@ var NavigationBrand = (0, import_react50.forwardRef)(
 NavigationBrand.displayName = "NavigationBrand";
 var NavigationBrandTitle = (0, import_react50.forwardRef)(({ className, asChild = false, children, ...props }, ref) => {
   const Comp = asChild ? import_react_slot5.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     Comp,
     {
       ref,
       className: cn("aviala-navigation-brand__title aviala-focus-ring", className),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typography, { level: "text", as: "span", children })
+      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Typography, { level: "text", as: "span", children })
     }
   );
 });
 NavigationBrandTitle.displayName = "NavigationBrandTitle";
-var NavigationSection = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var NavigationSection = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
   "div",
   {
     ref,
     className: cn("aviala-navigation-section", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typography, { level: "caption", as: "p", children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Typography, { level: "caption", as: "p", children })
   }
 ));
 NavigationSection.displayName = "NavigationSection";
@@ -8939,14 +8777,14 @@ var NavigationGroup = (0, import_react50.forwardRef)(
       },
       [ref]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       "div",
       {
         ref: setRefs,
         className: cn("aviala-navigation-group", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "span",
             {
               ref: onIndicatorRef,
@@ -8972,7 +8810,7 @@ var NavigationItemGroup = (0, import_react50.forwardRef)(({ className, expanded,
     if (isCollapsed) inner.setAttribute("inert", "");
     else inner.removeAttribute("inert");
   }, [isCollapsed]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       ref,
@@ -8980,7 +8818,7 @@ var NavigationItemGroup = (0, import_react50.forwardRef)(({ className, expanded,
       "data-expanded": isCollapsible ? expanded ? "true" : "false" : void 0,
       "aria-hidden": isCollapsed ? true : void 0,
       ...props,
-      children: isCollapsible ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
+      children: isCollapsible ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
     }
   );
 });
@@ -8991,7 +8829,7 @@ function renderItemIcon3(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-navigation-item__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-navigation-item__icon", children: content });
 }
 var NavigationItem = (0, import_react50.forwardRef)(
   ({
@@ -9008,9 +8846,9 @@ var NavigationItem = (0, import_react50.forwardRef)(
     const Comp = asChild ? import_react_slot5.Slot : "a";
     const isActive = active ?? ariaCurrent === "page";
     const mode = navigationItemButtonMode(isActive);
-    const controlContent = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    const controlContent = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
       renderItemIcon3(leftIcon),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         Typography,
         {
           level: "text",
@@ -9019,15 +8857,15 @@ var NavigationItem = (0, import_react50.forwardRef)(
           children
         }
       ),
-      rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+      rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "span",
       {
         className: cn("aviala-navigation-item", className),
         "data-item-type": itemType,
         "data-active": isActive ? "true" : "false",
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           Comp,
           {
             ref,
@@ -9046,7 +8884,7 @@ var NavigationItem = (0, import_react50.forwardRef)(
   }
 );
 NavigationItem.displayName = "NavigationItem";
-var NavigationActions = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var NavigationActions = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
   "div",
   {
     ref,
@@ -9056,7 +8894,7 @@ var NavigationActions = (0, import_react50.forwardRef)(({ className, children, .
   }
 ));
 NavigationActions.displayName = "NavigationActions";
-var NavigationActionsSlot = (0, import_react50.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var NavigationActionsSlot = (0, import_react50.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
   "div",
   {
     ref,
@@ -9148,7 +8986,7 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Popover, { open, onOpenChange: handleOpenChange, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover, { open, onOpenChange: handleOpenChange, children }) });
 }
 var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
   ({
@@ -9162,7 +9000,7 @@ var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
     const menu = useNavigationItemMenuContext("NavigationItemMenuTrigger");
     const isActive = active ?? menu.hasSelection;
     const mode = navigationItemButtonMode(isActive);
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "span",
       {
         className: cn("aviala-navigation-item", className),
@@ -9170,7 +9008,7 @@ var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
         "data-active": isActive ? "true" : "false",
         onMouseEnter: () => menu.openMenu(true),
         onMouseLeave: menu.scheduleClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
           "button",
           {
             ref,
@@ -9183,7 +9021,7 @@ var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
             ...props,
             children: [
               renderItemIcon3(leftIcon),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 Typography,
                 {
                   level: "text",
@@ -9192,7 +9030,7 @@ var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
                   children
                 }
               ),
-              rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+              rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
             ]
           }
         ) })
@@ -9213,7 +9051,7 @@ var NavigationItemMenuContent = (0, import_react50.forwardRef)(
   }, ref) => {
     const direction = useNavigationDirection();
     const menu = useNavigationItemMenuContext("NavigationItemMenuContent");
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       PopoverPrimitive7.Content,
       {
         ref,
@@ -9248,7 +9086,7 @@ var NavigationItemMenuItem = (0, import_react50.forwardRef)(
   }, ref) => {
     const menu = useNavigationItemMenuContext("NavigationItemMenuItem");
     const isSelected = selected ?? menu.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       "button",
       {
         ref,
@@ -9268,7 +9106,7 @@ var NavigationItemMenuItem = (0, import_react50.forwardRef)(
         ...props,
         children: [
           renderItemIcon3(leftIcon),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             Typography,
             {
               level: "text",
@@ -9277,7 +9115,7 @@ var NavigationItemMenuItem = (0, import_react50.forwardRef)(
               children
             }
           ),
-          rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
+          rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
         ]
       }
     );
@@ -9289,7 +9127,7 @@ NavigationItemMenuItem.displayName = "NavigationItemMenuItem";
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
 var import_class_variance_authority13 = require("class-variance-authority");
 var import_react51 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var sliderVariants = (0, import_class_variance_authority13.cva)("aviala-slider", {
   variants: {
     size: {
@@ -9323,7 +9161,7 @@ var Slider = (0, import_react51.forwardRef)(
     const isRange = resolvedType === "range";
     const resolvedDefaultValue = defaultValue ?? (isRange ? [25, 75] : [50]);
     const thumbCount = isRange ? Math.max(2, value?.length ?? defaultValue?.length ?? 2) : 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
       SliderPrimitive.Root,
       {
         ref,
@@ -9341,8 +9179,8 @@ var Slider = (0, import_react51.forwardRef)(
         "data-disabled": disabled ? "true" : void 0,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
-          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
+          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
         ]
       }
     );
@@ -9354,7 +9192,7 @@ Slider.displayName = "Slider";
 var import_icons19 = require("@aviala-design/icons");
 var import_class_variance_authority14 = require("class-variance-authority");
 var import_react52 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var uploadVariants = (0, import_class_variance_authority14.cva)("aviala-upload aviala-focus-ring", {
   variants: {
     style: {
@@ -9404,7 +9242,7 @@ var Upload = (0, import_react52.forwardRef)(
         onChange?.(event.dataTransfer.files);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       "div",
       {
         ref,
@@ -9435,7 +9273,7 @@ var Upload = (0, import_react52.forwardRef)(
         onDrop: handleDrop,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "input",
             {
               ref: inputRef,
@@ -9450,8 +9288,8 @@ var Upload = (0, import_react52.forwardRef)(
               ...inputProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons19.GeneralUpload, { width: 16, height: 16 }) }),
-          resolvedStyle === "large" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons19.GeneralUpload, { width: 16, height: 16 }) }),
+          resolvedStyle === "large" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             Typeface,
             {
               className: "aviala-upload__typeface",
@@ -9459,7 +9297,7 @@ var Upload = (0, import_react52.forwardRef)(
               primary: title,
               secondary: description
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
         ]
       }
     );
@@ -9469,7 +9307,7 @@ Upload.displayName = "Upload";
 
 // src/components/scroll-picker.tsx
 var import_react53 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var LOOP_SECTIONS2 = 3;
 var MIDDLE_SECTION2 = 1;
 function normalizeIndex2(index, length) {
@@ -9497,7 +9335,7 @@ function fractionalIndexAtScrollTop(metrics, scrollTop) {
   return (scrollTop - metrics.originTop) / metrics.pitch;
 }
 function ScrollPicker({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: cn("aviala-scroll-picker", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
 function ScrollPickerColumn({
   className,
@@ -9694,9 +9532,9 @@ function ScrollPickerColumn({
     }
   };
   const selectedOptionId = `${reactId}-${getIndex(value)}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "aviala-scroll-picker-column__viewport", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "aviala-scroll-picker-column__viewport", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "div",
       {
         ref: scrollRef,
@@ -9707,12 +9545,12 @@ function ScrollPickerColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
           const isSelected = Object.is(itemValue, value);
           const valueIndex = loop ? normalizeIndex2(index, values.length) : index;
           const optionId = `${reactId}-${loop ? index : valueIndex}`;
           const key = getValueKey?.(itemValue, index) ?? `${String(itemValue)}-${index}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("li", { className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("li", { className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             ScrollPickerItem,
             {
               id: isSelected ? selectedOptionId : optionId,
@@ -9738,7 +9576,7 @@ function ScrollPickerItem({
   className,
   onSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "button",
     {
       type: "button",
@@ -9762,7 +9600,7 @@ function ScrollPickerItem({
 var import_icons20 = require("@aviala-design/icons");
 var import_class_variance_authority15 = require("class-variance-authority");
 var import_react54 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var BreadcrumbSizeContext = (0, import_react54.createContext)("default");
 function breadcrumbTypeLevel(size) {
   return size === "small" ? "caption" : "text";
@@ -9781,7 +9619,7 @@ var breadcrumbVariants = (0, import_class_variance_authority15.cva)("aviala-brea
 var Breadcrumb = (0, import_react54.forwardRef)(
   ({ className, size = "default", children, ...props }, ref) => {
     const resolvedSize = size ?? "default";
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "nav",
       {
         ref,
@@ -9789,7 +9627,7 @@ var Breadcrumb = (0, import_react54.forwardRef)(
         className: cn(breadcrumbVariants({ size: resolvedSize }), className),
         "data-size": resolvedSize,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ol", { className: "aviala-breadcrumb__list", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ol", { className: "aviala-breadcrumb__list", children })
       }
     ) });
   }
@@ -9798,9 +9636,9 @@ Breadcrumb.displayName = "Breadcrumb";
 var BreadcrumbItem = (0, import_react54.forwardRef)(
   ({ className, href, current = false, icon, onClick, children, ...props }, ref) => {
     const size = (0, import_react54.useContext)(BreadcrumbSizeContext);
-    const label = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
-      children != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    const label = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
+      children != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         Typography,
         {
           level: breadcrumbTypeLevel(size),
@@ -9810,13 +9648,13 @@ var BreadcrumbItem = (0, import_react54.forwardRef)(
         }
       ) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "li",
       {
         ref,
         className: cn("aviala-breadcrumb-item-wrap", className),
         ...props,
-        children: href != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        children: href != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "a",
           {
             href,
@@ -9825,7 +9663,7 @@ var BreadcrumbItem = (0, import_react54.forwardRef)(
             "aria-current": current ? "page" : void 0,
             children: label
           }
-        ) : onClick != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        ) : onClick != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "button",
           {
             type: "button",
@@ -9835,7 +9673,7 @@ var BreadcrumbItem = (0, import_react54.forwardRef)(
             onClick,
             children: label
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "span",
           {
             className: "aviala-breadcrumb-item",
@@ -9852,7 +9690,7 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbSeparator = (0, import_react54.forwardRef)(
   ({ className, children = "/", ...props }, ref) => {
     const size = (0, import_react54.useContext)(BreadcrumbSizeContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "li",
       {
         ref,
@@ -9860,7 +9698,7 @@ var BreadcrumbSeparator = (0, import_react54.forwardRef)(
         "aria-hidden": true,
         className: cn("aviala-breadcrumb-separator", className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
       }
     );
   }
@@ -9875,12 +9713,12 @@ var BreadcrumbEllipsisItem = (0, import_react54.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
-      showChevron ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons20.DirectionArrowRightLight, { width: 14, height: 14, thickness: "Light" }) }) : null
+    const content = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
+      showChevron ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons20.DirectionArrowRightLight, { width: 14, height: 14, thickness: "Light" }) }) : null
     ] });
     if (href != null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "a",
         {
           ref,
@@ -9892,7 +9730,7 @@ var BreadcrumbEllipsisItem = (0, import_react54.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "button",
       {
         ref,
@@ -9930,8 +9768,8 @@ var BreadcrumbEllipsis = (0, import_react54.forwardRef)(
       [isControlled, onActivatedChange]
     );
     const iconSize = 14;
-    const icon = children ?? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons20.SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
-    const trigger = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    const icon = children ?? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons20.SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
+    const trigger = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "button",
       {
         type: "button",
@@ -9950,9 +9788,9 @@ var BreadcrumbEllipsis = (0, import_react54.forwardRef)(
         children: icon
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Popover, { open: activated, onOpenChange: setActivated, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverTrigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Popover, { open: activated, onOpenChange: setActivated, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         PopoverContent,
         {
           className: "aviala-breadcrumb-ellipsis-menu",
@@ -9961,7 +9799,7 @@ var BreadcrumbEllipsis = (0, import_react54.forwardRef)(
           sideOffset: 7,
           showArrow: false,
           role: "menu",
-          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
         }
       )
     ] }) : trigger });
@@ -9971,7 +9809,7 @@ BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
 // src/components/pagehead.tsx
 var import_react55 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var Pagehead = (0, import_react55.forwardRef)(
   ({
     className,
@@ -9982,16 +9820,16 @@ var Pagehead = (0, import_react55.forwardRef)(
     actions,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "aviala-pagehead__main", children: [
-      back != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-pagehead__back", children: back }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "aviala-pagehead__title-block", children: [
-        breadcrumb != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
-        title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "aviala-pagehead__main", children: [
+      back != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-pagehead__back", children: back }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "aviala-pagehead__title-block", children: [
+        breadcrumb != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
+        title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
         children
       ] })
     ] }),
-    actions != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-pagehead__actions", children: actions }) : null
+    actions != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-pagehead__actions", children: actions }) : null
   ] })
 );
 Pagehead.displayName = "Pagehead";
@@ -10000,7 +9838,7 @@ Pagehead.displayName = "Pagehead";
 var import_icons21 = require("@aviala-design/icons");
 var import_class_variance_authority16 = require("class-variance-authority");
 var import_react56 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var stepsVariants = (0, import_class_variance_authority16.cva)("aviala-steps", {
   variants: {
     direction: {
@@ -10013,7 +9851,7 @@ var stepsVariants = (0, import_class_variance_authority16.cva)("aviala-steps", {
   }
 });
 var Steps = (0, import_react56.forwardRef)(
-  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       ref,
@@ -10028,20 +9866,20 @@ Steps.displayName = "Steps";
 function defaultStepsIconContent(state, index) {
   switch (state) {
     case "done":
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons21.SymbolRight, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons21.SymbolRight, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "fail":
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons21.SymbolWrong, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons21.SymbolWrong, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons21.SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons21.SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "waiting":
     case "inProgress":
     case "default":
     default:
-      return index != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
+      return index != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
   }
 }
 var StepsIcon = (0, import_react56.forwardRef)(
-  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "span",
     {
       ref,
@@ -10063,7 +9901,7 @@ var StepsItem = (0, import_react56.forwardRef)(
     icon,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       ref,
@@ -10071,9 +9909,9 @@ var StepsItem = (0, import_react56.forwardRef)(
       "data-state": state,
       ...props,
       children: [
-        icon ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StepsIcon, { state, index }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "aviala-steps-item__body", children: [
-          title != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        icon ?? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StepsIcon, { state, index }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "aviala-steps-item__body", children: [
+          title != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Typography,
             {
               level: "subtitle",
@@ -10082,7 +9920,7 @@ var StepsItem = (0, import_react56.forwardRef)(
               children: title
             }
           ) : null,
-          description != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          description != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Typography,
             {
               level: "text",
@@ -10102,7 +9940,7 @@ StepsItem.displayName = "StepsItem";
 // src/components/pagination.tsx
 var import_icons22 = require("@aviala-design/icons");
 var import_react57 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function buildPageList(page, pageCount) {
   if (pageCount <= 7) {
     return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -10177,7 +10015,7 @@ var Pagination = (0, import_react57.forwardRef)(
       setPage(parsed);
       setJumpValue("");
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "div",
       {
         ref,
@@ -10186,8 +10024,8 @@ var Pagination = (0, import_react57.forwardRef)(
         "aria-label": props["aria-label"] ?? "Pagination",
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "aviala-pagination__controls", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-pagination__controls", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10195,18 +10033,18 @@ var Pagination = (0, import_react57.forwardRef)(
                 iconOnly: true,
                 "aria-label": "Previous page",
                 disabled: currentPage <= 1,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons22.DirectionArrowLeftLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons22.DirectionArrowLeftLight, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage - 1)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aviala-pagination__pages", children: pages.map(
-              (item, index) => item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-pagination__pages", children: pages.map(
+              (item, index) => item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
                 Popover,
                 {
                   open: openEllipsis === index,
                   onOpenChange: (open) => setOpenEllipsis(open ? index : null),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                       "button",
                       {
                         type: "button",
@@ -10217,10 +10055,10 @@ var Pagination = (0, import_react57.forwardRef)(
                         ),
                         "aria-label": "\u66F4\u591A\u9875\u7801",
                         "aria-haspopup": "menu",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: "\u2026" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typography, { level: "text", as: "span", children: "\u2026" })
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                       "button",
                       {
                         type: "button",
@@ -10233,14 +10071,14 @@ var Pagination = (0, import_react57.forwardRef)(
                           setPage(p);
                           setOpenEllipsis(null);
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: p })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typography, { level: "text", as: "span", children: p })
                       },
                       p
                     )) }) })
                   ]
                 },
                 `ellipsis-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 "button",
                 {
                   type: "button",
@@ -10252,12 +10090,12 @@ var Pagination = (0, import_react57.forwardRef)(
                   "data-active": item === currentPage ? "true" : void 0,
                   "aria-current": item === currentPage ? "page" : void 0,
                   onClick: () => setPage(item),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: item })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typography, { level: "text", as: "span", children: item })
                 },
                 item
               )
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10265,14 +10103,14 @@ var Pagination = (0, import_react57.forwardRef)(
                 iconOnly: true,
                 "aria-label": "Next page",
                 disabled: currentPage >= safePageCount,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons22.DirectionArrowRightLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons22.DirectionArrowRightLight, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage + 1)
               }
             )
           ] }),
-          showJump ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "aviala-pagination__jump", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: jumpLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          showJump ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-pagination__jump", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typography, { level: "text", as: "span", children: jumpLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               Input,
               {
                 className: "aviala-pagination__jump-input",
@@ -10292,15 +10130,15 @@ var Pagination = (0, import_react57.forwardRef)(
               }
             )
           ] }) : null,
-          showSizeChanger ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "aviala-pagination__size", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "text", as: "span", children: sizeLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+          showSizeChanger ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-pagination__size", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typography, { level: "text", as: "span", children: sizeLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
               Select,
               {
                 value: String(pageSize),
                 onValueChange: (value) => setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     SelectTrigger,
                     {
                       size: "regular",
@@ -10308,7 +10146,7 @@ var Pagination = (0, import_react57.forwardRef)(
                       "aria-label": "Page size"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                     SelectItem,
                     {
                       value: String(option),
@@ -10331,9 +10169,9 @@ Pagination.displayName = "Pagination";
 // src/components/card.tsx
 var import_icons23 = require("@aviala-design/icons");
 var import_react58 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var Card = (0, import_react58.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { ref, className: cn("aviala-card", className), ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref, className: cn("aviala-card", className), ...props, children })
 );
 Card.displayName = "Card";
 function renderCardIcon(node) {
@@ -10346,7 +10184,7 @@ function renderCardIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card-head__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-card-head__icon", children: content });
 }
 var CardHead = (0, import_react58.forwardRef)(
   ({
@@ -10364,38 +10202,38 @@ var CardHead = (0, import_react58.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (slotType) {
         case "action":
-          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons23.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
           ] });
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Switch, { ...switchProps })
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return select != null ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-card-head__trailing", children: select }) : null;
+          return select != null ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-card-head__trailing", children: select }) : null;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
       "div",
       {
         ref,
@@ -10403,9 +10241,9 @@ var CardHead = (0, import_react58.forwardRef)(
         "data-type": slotType,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-card-head__main", children: [
-            renderCardIcon(icon ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "aviala-card-head__main", children: [
+            renderCardIcon(icon ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
           ] }),
           renderTrailing()
         ]
@@ -10415,7 +10253,7 @@ var CardHead = (0, import_react58.forwardRef)(
 );
 CardHead.displayName = "CardHead";
 var CardBody = (0, import_react58.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typography, { level: "text", as: "span", children }) : children }) })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children }) : children }) })
 );
 CardBody.displayName = "CardBody";
 var CardBottom = (0, import_react58.forwardRef)(
@@ -10431,46 +10269,46 @@ var CardBottom = (0, import_react58.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       if (children != null) return children;
       switch (slotType) {
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Switch, { ...switchProps })
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Switch, { ...switchProps })
           ] });
         case "select":
           return select;
         case "action":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons23.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons23.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
           ] });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "div",
       {
         ref,
         className: cn("aviala-card-bottom", className),
         "data-type": slotType,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
+        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
       }
     );
   }
@@ -10479,9 +10317,9 @@ CardBottom.displayName = "CardBottom";
 
 // src/components/table.tsx
 var import_react59 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Table = (0, import_react59.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       ref,
@@ -10494,7 +10332,7 @@ var Table = (0, import_react59.forwardRef)(
 );
 Table.displayName = "Table";
 var TableRow = (0, import_react59.forwardRef)(
-  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       ref,
@@ -10508,7 +10346,7 @@ var TableRow = (0, import_react59.forwardRef)(
 );
 TableRow.displayName = "TableRow";
 var TableHead = (0, import_react59.forwardRef)(
-  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       ref,
@@ -10516,7 +10354,7 @@ var TableHead = (0, import_react59.forwardRef)(
       className: cn("aviala-table-head", className),
       "data-content": content,
       ...props,
-      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "caption", as: "span", children }) : children
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { level: "caption", as: "span", children }) : children
     }
   )
 );
@@ -10531,7 +10369,7 @@ function renderCellIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-table-cell__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-table-cell__icon", children: content });
 }
 var TableCell = (0, import_react59.forwardRef)(
   ({
@@ -10552,29 +10390,29 @@ var TableCell = (0, import_react59.forwardRef)(
       if (children != null) return children;
       switch (content) {
         case "checkbox":
-          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Checkbox, { ...checkboxProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Checkbox, { ...checkboxProps });
         case "icon+text":
-          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
             renderCellIcon(icon),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "people":
-          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-            people ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Avatar, { content: "text", level: "text", children: "A" }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: text }) })
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+            people ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Avatar, { content: "text", level: "text", children: "A" }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "badge":
-          return badge ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
+          return badge ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Switch, { ...switchProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Switch, { ...switchProps });
         case "action":
-          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-table-cell__actions", children: actions });
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "aviala-table-cell__actions", children: actions });
         case "text":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: text }) });
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { level: "text", as: "span", children: text }) });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "div",
       {
         ref,