@aviala-design/spiral 2.4.0 → 2.5.0

package/dist/index.cjs

@@ -2863,7 +2863,6 @@ Scroll.displayName = "Scroll";
 
 // src/components/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
-var import_icons8 = require("@aviala-design/icons");
 var import_react19 = require("react");
 
 // src/components/typeface.tsx
@@ -2947,42 +2946,71 @@ var TypefacePair = (0, import_react18.forwardRef)(
 );
 TypefacePair.displayName = "TypefacePair";
 
-// src/components/checkbox.tsx
+// src/components/checkbox-check-icon.tsx
 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,
-    className: cn("aviala-checkbox aviala-focus-ring", className),
-    "data-round": round ? "true" : void 0,
-    ...props,
-    children: [
-      /* @__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",
-            thickness: "Bold",
-            width: 12,
-            height: 12,
-            "aria-hidden": true
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "aviala-checkbox__indeterminate-mark aviala-checkbox__indicator-icon--indeterminate"
-          }
-        )
-      ] })
-    ]
-  }
-));
+function CheckboxCheckIcon({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "svg",
+    {
+      className: cn("aviala-checkbox__check-icon", className),
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      overflow: "visible",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "path",
+        {
+          className: "aviala-checkbox__check-path",
+          transform: "translate(1 1.6)",
+          d: "M0 3.9L3.4974 8.35503C3.83947 8.79075 4.51016 8.75534 4.80444 8.28602L10 0",
+          pathLength: 1,
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+// src/components/checkbox.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Checkbox = (0, import_react19.forwardRef)(({ className, round = false, size = "default", ...props }, ref) => {
+  const [motionReady, setMotionReady] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
+    const id = requestAnimationFrame(() => setMotionReady(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      className: cn("aviala-checkbox aviala-focus-ring", className),
+      "data-round": round ? "true" : void 0,
+      "data-size": size,
+      "data-motion": motionReady ? "ready" : "boot",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CheckboxPrimitive.Indicator, { forceMount: true, className: "aviala-checkbox__indicator", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckboxCheckIcon, { className: "aviala-checkbox__indicator-icon aviala-checkbox__indicator-icon--check" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "aviala-checkbox__indeterminate-mark aviala-checkbox__indicator-icon--indeterminate"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 var CheckboxGroup = (0, import_react19.forwardRef)(
-  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       ref,
@@ -3004,7 +3032,7 @@ function renderIcon3(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "aviala-checkbox-input__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "aviala-checkbox-input__icon", children: content });
 }
 var CheckboxInput = (0, import_react19.forwardRef)(
   ({
@@ -3015,16 +3043,16 @@ var CheckboxInput = (0, import_react19.forwardRef)(
     disabled,
     id,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "label",
     {
       htmlFor: id,
       className: cn("aviala-checkbox-input", className),
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Checkbox, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Checkbox, { ref, id, disabled, ...props }),
         renderIcon3(icon),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           TypefacePair,
           {
             className: "aviala-checkbox-input__content min-w-0 flex-1",
@@ -3041,8 +3069,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_runtime19 = require("react/jsx-runtime");
-var RadioGroup = (0, import_react20.forwardRef)(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react20.forwardRef)(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   RadioGroupPrimitive.Root,
   {
     className: cn("aviala-radio-group", className),
@@ -3052,15 +3080,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_runtime19.jsxs)(
+var RadioGroupItem = (0, import_react20.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
   RadioGroupPrimitive.Item,
   {
     ref,
     className: cn("aviala-radio aviala-focus-ring", className),
     ...props,
     children: [
-      /* @__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" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
     ]
   }
 ));
@@ -3076,7 +3104,7 @@ function renderIcon4(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "aviala-radio-input__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "aviala-radio-input__icon", children: content });
 }
 var RadioInput = (0, import_react20.forwardRef)(
   ({
@@ -3088,7 +3116,7 @@ var RadioInput = (0, import_react20.forwardRef)(
     disabled,
     id,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "label",
     {
       htmlFor: id,
@@ -3096,9 +3124,9 @@ var RadioInput = (0, import_react20.forwardRef)(
       "data-style": variant,
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RadioGroupItem, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadioGroupItem, { ref, id, disabled, ...props }),
         renderIcon4(icon),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           TypefacePair,
           {
             className: "aviala-radio-input__content min-w-0 flex-1",
@@ -3115,8 +3143,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_runtime20 = require("react/jsx-runtime");
-var Switch = (0, import_react21.forwardRef)(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Switch = (0, import_react21.forwardRef)(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
   SwitchPrimitive.Root,
   {
     className: cn(
@@ -3127,8 +3155,8 @@ var Switch = (0, import_react21.forwardRef)(({ className, size = "regular", ...p
     ref,
     ...props,
     children: [
-      /* @__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" })
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
     ]
   }
 ));
@@ -3137,9 +3165,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_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Anchor2 = (0, import_react22.forwardRef)(
-  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
+  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
 );
 Anchor2.displayName = "Anchor";
 var AnchorItem = (0, import_react22.forwardRef)(
@@ -3152,7 +3180,7 @@ var AnchorItem = (0, import_react22.forwardRef)(
     ...props
   }, ref) => {
     const Comp = asChild ? import_react_slot4.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       Comp,
       {
         ref,
@@ -3161,8 +3189,8 @@ var AnchorItem = (0, import_react22.forwardRef)(
         "data-indent": String(indentLevel),
         ...props,
         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 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
         ]
       }
     );
@@ -3172,7 +3200,7 @@ AnchorItem.displayName = "AnchorItem";
 
 // src/components/segmentator.tsx
 var import_react23 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var SegmentatorContext = (0, import_react23.createContext)(null);
 function useSegmentatorContext() {
   const ctx = (0, import_react23.useContext)(SegmentatorContext);
@@ -3187,7 +3215,7 @@ function renderIcon5(node, dimmed) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "span",
     {
       className: cn(
@@ -3267,12 +3295,24 @@ function measureItemThumbMetrics(item, group) {
   const groupRect = group.getBoundingClientRect();
   const itemRect = item.getBoundingClientRect();
   return {
-    x: itemRect.left - groupRect.left,
-    y: itemRect.top - groupRect.top,
+    x: itemRect.left - groupRect.left + group.scrollLeft,
+    y: itemRect.top - groupRect.top + group.scrollTop,
     width: itemRect.width,
     height: itemRect.height
   };
 }
+function syncSegmentatorOverflowing(group) {
+  const overflowing = group.scrollWidth > group.clientWidth + 1;
+  if (overflowing) {
+    group.setAttribute("data-overflowing", "true");
+  } else {
+    group.removeAttribute("data-overflowing");
+  }
+  return overflowing;
+}
+function isSegmentatorOverflowing(group) {
+  return group?.getAttribute("data-overflowing") === "true";
+}
 function findItemAtClientX(items, clientX) {
   for (const item of items) {
     const rect = item.getBoundingClientRect();
@@ -3361,14 +3401,7 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
       '.aviala-segmentator-item[data-selected="true"]'
     );
     if (!selected) return null;
-    const groupRect = group.getBoundingClientRect();
-    const itemRect = selected.getBoundingClientRect();
-    return {
-      x: itemRect.left - groupRect.left,
-      y: itemRect.top - groupRect.top,
-      width: itemRect.width,
-      height: itemRect.height
-    };
+    return measureItemThumbMetrics(selected, group);
   }, [groupRef]);
   const syncThumb = (0, import_react23.useCallback)(
     (metrics, instant = false) => {
@@ -3407,6 +3440,19 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
   }, []);
   (0, import_react23.useLayoutEffect)(() => {
     if (dragState.pressing || dragState.active) return;
+    const group = groupRef.current;
+    if (group) {
+      const selected = group.querySelector(
+        '.aviala-segmentator-item[data-selected="true"]'
+      );
+      if (selected && !isInitialMount.current) {
+        selected.scrollIntoView({
+          inline: "nearest",
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    }
     const next = measureThumb();
     if (!next) return;
     const el = thumbElRef.current;
@@ -3435,18 +3481,28 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
       return;
     }
     syncThumb(next, false);
-  }, [selectedValue, measureThumb, syncThumb, dragState.active, dragState.pressing]);
+  }, [selectedValue, measureThumb, syncThumb, dragState.active, dragState.pressing, groupRef]);
   (0, import_react23.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) return;
-    const observer = new ResizeObserver(() => {
+    const updateOverflowAndThumb = () => {
+      syncSegmentatorOverflowing(group);
       remeasureThumb();
+    };
+    updateOverflowAndThumb();
+    const observer = new ResizeObserver(() => {
+      updateOverflowAndThumb();
     });
     observer.observe(group);
     const items = group.querySelectorAll(".aviala-segmentator-item");
     items.forEach((item) => observer.observe(item));
+    const onScroll = () => {
+      syncSegmentatorOverflowing(group);
+      remeasureThumb();
+    };
+    group.addEventListener("scroll", onScroll, { passive: true });
     const layoutObserver = new MutationObserver(() => {
-      requestAnimationFrame(remeasureThumb);
+      requestAnimationFrame(updateOverflowAndThumb);
     });
     layoutObserver.observe(document.documentElement, {
       attributes: true,
@@ -3455,6 +3511,7 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
     return () => {
       observer.disconnect();
       layoutObserver.disconnect();
+      group.removeEventListener("scroll", onScroll);
     };
   }, [groupRef, remeasureThumb]);
   (0, import_react23.useEffect)(() => {
@@ -3611,6 +3668,7 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
     );
     const handlePointerDown = (event) => {
       if (disabled || !isSegmentatorDragPointer(event.pointerType)) return;
+      if (isSegmentatorOverflowing(groupRef.current)) return;
       const pressedItem = getPressedItemFromTarget(event.target);
       if (!pressedItem) return;
       const group = groupRef.current;
@@ -3636,7 +3694,7 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
       group.setPointerCapture(event.pointerId);
     };
     const thumbStyle = thumb ? buildThumbStyle() : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SegmentatorContext.Provider,
       {
         value: (0, import_react23.useMemo)(
@@ -3650,7 +3708,7 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
           }),
           [currentValue, setValue, mode, allRound, disabled]
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             ref: (node) => {
@@ -3672,7 +3730,7 @@ var SegmentatorGroup = (0, import_react23.forwardRef)(
             onLostPointerCapture: finishPointerDrag,
             children: [
               children,
-              thumb && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              thumb && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "span",
                 {
                   ref: onThumbRef,
@@ -3710,7 +3768,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_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "button",
       {
         ref,
@@ -3732,9 +3790,9 @@ var SegmentatorItem = (0, import_react23.forwardRef)(
           onClick?.(e);
         },
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "aviala-segmentator-item__content", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "aviala-segmentator-item__content", children: [
           renderIcon5(icon, dimmed && !!icon),
-          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "span",
             {
               className: cn(
@@ -3754,9 +3812,9 @@ var SegmentatorItem = (0, import_react23.forwardRef)(
 SegmentatorItem.displayName = "SegmentatorItem";
 
 // src/components/form-field.tsx
-var import_icons9 = require("@aviala-design/icons");
+var import_icons8 = require("@aviala-design/icons");
 var import_react24 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var FormField = (0, import_react24.forwardRef)(
   ({
     className,
@@ -3774,31 +3832,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_runtime23.jsx)("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Typeface,
       {
         id: labelId,
         content: "textCaption",
-        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
           label,
-          required ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+          required ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
         ] }) : void 0,
         secondary: description
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Typeface,
       {
         id: labelId,
         className: "aviala-form__label",
         content: "textCaption",
-        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
           label,
-          required ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+          required ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
         ] }) : void 0,
         secondary: description
       }
     ) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         ref,
@@ -3808,11 +3866,11 @@ var FormField = (0, import_react24.forwardRef)(
         ...props,
         children: [
           labelNode,
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "aviala-form__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "aviala-form__content", children: [
             children,
-            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,
+            error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "aviala-form__message aviala-form__message--error", role: "alert", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_icons8.SymbolWrongCircle,
                 {
                   className: "aviala-form__message-icon",
                   width: 14,
@@ -3820,11 +3878,11 @@ var FormField = (0, import_react24.forwardRef)(
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
             ] }) : null,
-            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,
+            info ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "aviala-form__message aviala-form__message--info", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_icons8.SymbolInformationCircle,
                 {
                   className: "aviala-form__message-icon",
                   width: 14,
@@ -3832,9 +3890,9 @@ var FormField = (0, import_react24.forwardRef)(
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
             ] }) : null,
-            alert ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "aviala-form__alert", children: alert }) : null
+            alert ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "aviala-form__alert", children: alert }) : null
           ] })
         ]
       }
@@ -3845,9 +3903,9 @@ FormField.displayName = "FormField";
 
 // src/components/input-group.tsx
 var import_react25 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var InputGroup = (0, import_react25.forwardRef)(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       ref,
@@ -3861,7 +3919,7 @@ var InputGroup = (0, import_react25.forwardRef)(
   )
 );
 InputGroup.displayName = "InputGroup";
-var InputGroupAddon = (0, import_react25.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var InputGroupAddon = (0, import_react25.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "div",
   {
     ref,
@@ -3877,7 +3935,7 @@ InputGroupAddon.displayName = "InputGroupAddon";
 
 // src/components/stack.tsx
 var import_react26 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var gapMap = {
   inside: "var(--gap-inside, 4px)",
   component: "var(--gap-component, 8px)",
@@ -3886,7 +3944,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_runtime25.jsx)(
+  ({ className, gap = "component", direction = "column", style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       ref,
@@ -3914,7 +3972,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_runtime25.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "fieldset",
       {
         ref,
@@ -3922,7 +3980,7 @@ var Fieldset = (0, import_react26.forwardRef)(
         "aria-labelledby": hasHeading ? headingId : void 0,
         ...props,
         children: [
-          hasHeading || description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          hasHeading || description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Typeface,
             {
               id: headingId,
@@ -3932,11 +3990,11 @@ var Fieldset = (0, import_react26.forwardRef)(
               secondary: description
             }
           ) : 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
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aviala-form-group__slot", children }),
+          hasAction ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "aviala-form-group__action", children: [
+            info ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aviala-form-group__info", children: info }) : null,
+            feedback ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aviala-form-group__feedback", children: feedback }) : null,
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aviala-form-group__actions", children: actions }) : null
           ] }) : null
         ]
       }
@@ -4108,7 +4166,7 @@ function useColorPickerState({
 }
 
 // src/components/color-picker/color-picker-area.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function ColorPickerArea({
   className,
   disabled,
@@ -4140,7 +4198,7 @@ function ColorPickerArea({
   );
   const { handlePointerDown, handlePointerMove } = usePointerDrag(ref, handleMove, !isDisabled);
   const hueColor = pureHueHex(hsva.h);
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("aviala-color-picker-area", className), ...spiralDebugId("color-picker.content.area"), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       ref,
@@ -4155,9 +4213,9 @@ function ColorPickerArea({
       "aria-valuenow": Math.round(hsva.s),
       tabIndex: isDisabled ? -1 : 0,
       children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aviala-color-picker-area__white", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aviala-color-picker-area__black", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "div",
           {
             className: "aviala-color-picker-area__thumb",
@@ -4174,9 +4232,9 @@ function ColorPickerArea({
 }
 
 // src/components/color-picker/color-picker-inputs.tsx
-var import_icons10 = require("@aviala-design/icons");
+var import_icons9 = require("@aviala-design/icons");
 var import_react31 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function ColorPickerInputs({
   className,
   disabled,
@@ -4236,8 +4294,8 @@ function ColorPickerInputs({
     } catch {
     }
   }, [eyeDropperSupported, isDisabled, setValue]);
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("aviala-color-picker-inputs", className), ...spiralDebugId("color-picker.content.inputs"), children: [
+    showEyedropper ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Button,
       {
         type: "button",
@@ -4249,12 +4307,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_runtime27.jsx)(import_icons10.EditColorPicker, { "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons9.EditColorPicker, { "aria-hidden": true })
       }
     ) : null,
-    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)(
+    format === "hex" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "aviala-color-picker-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Badge, { style: "normal", children: "#" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4266,7 +4324,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitHex()
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "input",
       {
         className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4278,8 +4336,8 @@ function ColorPickerInputs({
         onKeyDown: (e) => e.key === "Enter" && commitComponents()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "aviala-color-picker-field aviala-color-picker-field--alpha", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "aviala-color-picker-field aviala-color-picker-field--alpha", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4292,20 +4350,20 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitAlpha()
         }
       ),
-      /* @__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_runtime28.jsx)("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Badge, { style: "normal", children: "%" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       Select,
       {
         value: format,
         onValueChange: (next) => setFormat(next),
         disabled: isDisabled,
         children: [
-          /* @__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" })
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectTrigger, { className: "aviala-color-picker-format-select w-[76px] shrink-0", size: "regular", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectValue, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectContent, { onCloseAutoFocus: (event) => event.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(SelectItemGroup, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectItem, { value: "hex", itemFunction: "radio", children: "HEX" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectItem, { value: "rgb", itemFunction: "radio", children: "RGB" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectItem, { value: "hsl", itemFunction: "radio", children: "HSL" })
           ] }) })
         ]
       }
@@ -4325,15 +4383,15 @@ function buildComponentDraft(value, format) {
 }
 
 // src/components/color-picker/color-picker-presets.tsx
-var import_icons11 = require("@aviala-design/icons");
+var import_icons10 = require("@aviala-design/icons");
 
 // src/components/color-picker/color-pick-button.tsx
 var import_react32 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = 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_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "button",
       {
         ref,
@@ -4342,7 +4400,7 @@ var ColorPickButton = (0, import_react32.forwardRef)(
         "data-selected": selected ? "true" : void 0,
         style,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "span",
           {
             className: "aviala-color-pick-button__swatch",
@@ -4357,7 +4415,7 @@ var ColorPickButton = (0, import_react32.forwardRef)(
 ColorPickButton.displayName = "ColorPickButton";
 
 // src/components/color-picker/color-picker-presets.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ColorPickerPresets({
   className,
   presets: presetsProp,
@@ -4379,8 +4437,8 @@ function ColorPickerPresets({
     const next = [...presets, normalized].slice(-maxPresets);
     onPresetsChange(next);
   };
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("aviala-color-picker-presets", className), ...spiralDebugId("color-picker.content.presets"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Button,
       {
         type: "button",
@@ -4390,10 +4448,10 @@ function ColorPickerPresets({
         disabled: isDisabled || !onPresetsChange || presets.length >= maxPresets,
         "aria-label": "Add current color to presets",
         onClick: handleAdd,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons11.SymbolAdd, { "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons10.SymbolAdd, { "aria-hidden": true })
       }
     ),
-    presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       ColorPickButton,
       {
         color,
@@ -4408,7 +4466,7 @@ function ColorPickerPresets({
 
 // src/components/color-picker/color-picker-slider.tsx
 var import_react33 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ColorPickerSlider({
   kind,
   className,
@@ -4456,12 +4514,12 @@ function ColorPickerSlider({
     backgroundImage: `linear-gradient(90deg, transparent, ${solidHex(value)})`,
     backgroundColor: "var(--color-picker-checkerboard)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       className: cn("aviala-color-picker-slider-row", className),
       ...spiralDebugId(`color-picker.content.${kind}-slider`),
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "div",
         {
           ref,
@@ -4475,8 +4533,8 @@ function ColorPickerSlider({
           "aria-valuenow": ariaValueNow,
           tabIndex: isDisabled ? -1 : 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "div",
               {
                 className: "aviala-color-picker-slider__thumb",
@@ -4492,7 +4550,7 @@ function ColorPickerSlider({
 }
 
 // src/components/color-picker/color-picker.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ColorPicker({
   children,
   className,
@@ -4535,17 +4593,17 @@ function ColorPicker({
     onPresetsChange,
     maxPresets
   };
-  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 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorPickerContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("inline-flex", className), ...spiralDebugId("color-picker"), children }) }) });
 }
 function ColorPickerContextProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorPickerContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime31.jsx)(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "button",
     {
       ref,
@@ -4559,7 +4617,7 @@ var ColorPickerTrigger = (0, import_react34.forwardRef)(({ className, size = "re
       disabled,
       ...props,
       children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "aviala-color-picker-trigger__swatch", ...spiralDebugId("color-picker.trigger.swatch"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "span",
           {
             className: "aviala-color-picker-trigger__swatch-inner",
@@ -4567,7 +4625,7 @@ var ColorPickerTrigger = (0, import_react34.forwardRef)(({ className, size = "re
             "aria-hidden": true
           }
         ) }),
-        /* @__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 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)("span", { className: "aviala-color-picker-trigger__placeholder", children: placeholder }) })
       ]
     }
   ) });
@@ -4586,7 +4644,7 @@ var ColorPickerContent = (0, import_react34.forwardRef)(
     ...props
   }, ref) => {
     const { presets, onPresetsChange, maxPresets, disabled } = useColorPickerContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       PopoverPrimitive2.Content,
       {
         ref,
@@ -4602,12 +4660,12 @@ var ColorPickerContent = (0, import_react34.forwardRef)(
         },
         onFocusOutside: (event) => event.preventDefault(),
         ...props,
-        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)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "aviala-color-picker-panel", 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,
@@ -4624,7 +4682,7 @@ var ColorPickerContent = (0, import_react34.forwardRef)(
 ColorPickerContent.displayName = "ColorPickerContent";
 
 // src/components/color-picker/color-picker-panel.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function ColorPickerPanel({
   className,
   disabled,
@@ -4656,12 +4714,12 @@ function ColorPickerPanel({
     onPresetsChange,
     maxPresets
   };
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("aviala-color-picker-panel", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColorPickerArea, { disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColorPickerSlider, { kind: "hue", disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColorPickerSlider, { kind: "alpha", disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ColorPickerInputs, { disabled, showEyedropper }),
+    showPresets ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       ColorPickerPresets,
       {
         disabled,
@@ -4675,9 +4733,9 @@ function ColorPickerPanel({
 
 // src/components/cascader.tsx
 var PopoverPrimitive3 = __toESM(require("@radix-ui/react-popover"), 1);
-var import_icons12 = require("@aviala-design/icons");
+var import_icons11 = require("@aviala-design/icons");
 var import_react35 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var CascaderContext = (0, import_react35.createContext)(null);
 function useCascaderContext() {
   const context = (0, import_react35.useContext)(CascaderContext);
@@ -4692,7 +4750,7 @@ function renderItemIcon2(node, iconLevel = "text", debugId) {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "span",
     {
       className: cn(
@@ -4707,17 +4765,17 @@ function renderItemIcon2(node, iconLevel = "text", debugId) {
 }
 function renderBadgeSlot2(node) {
   if (node == null || node === false) return null;
-  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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-item__badge", children: (0, import_react35.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { children: node }) });
 }
 function CascaderItemFormRadio() {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "aviala-cascader-item__form-radio", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-item__form-radio-surface" }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-item__form-radio-indicator" })
   ] });
 }
 function CascaderItemFormCheckbox() {
-  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,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_icons11.SymbolRight,
     {
       className: "aviala-cascader-item__form-checkbox-icon",
       thickness: "Bold",
@@ -4729,27 +4787,27 @@ function CascaderItemFormCheckbox() {
 }
 function CascaderItemTrailingRadio({ selected }) {
   if (!selected) return null;
-  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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons11.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function CascaderItemTrailingCheckbox({ selected }) {
   if (!selected) return null;
-  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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons11.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_runtime33.jsx)("span", { className: "aviala-cascader-item__function", children: icon });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-item__function", children: icon });
   }
   switch (itemFunction) {
     case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemTrailingRadio, { selected }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CascaderItemTrailingRadio, { selected }) });
     case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemTrailingCheckbox, { selected }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CascaderItemTrailingCheckbox, { selected }) });
     case "simple":
     default:
-      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
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "aviala-cascader-item__function", children: [
+        selected ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons11.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) : null,
+        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons11.DirectionArrowRightLight, { level: "text", biggerSize: true, "aria-hidden": true }) : null
       ] });
   }
 }
@@ -4909,7 +4967,7 @@ function Cascader({
       size
     ]
   );
-  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 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CascaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverPrimitive3.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("inline-flex", className), ...spiralDebugId("cascader"), children }) }) });
 }
 var CascaderTrigger = (0, import_react35.forwardRef)(
   ({
@@ -4930,12 +4988,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_runtime33.jsxs)("span", { children: [
+    const resolvedDisplay = displayValue ?? (labels.length > 0 ? labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
       index > 0 ? separator : null,
       label
     ] }, `${selectedPath[index]}-${index}`)) : null);
     const hasValue = resolvedDisplay != null && resolvedDisplay !== false;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "button",
       {
         ref,
@@ -4952,7 +5010,7 @@ var CascaderTrigger = (0, import_react35.forwardRef)(
         ...props,
         children: [
           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)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "aviala-cascader-trigger__field", ...spiralDebugId("cascader.trigger.value"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "span",
             {
               className: cn("aviala-cascader-trigger__value", typographyVariants({ level: "text" })),
@@ -4961,14 +5019,14 @@ var CascaderTrigger = (0, import_react35.forwardRef)(
             }
           ) }),
           renderSlotIcon(rightIcon, "aviala-cascader-trigger__slot", "cascader.trigger.icon-right"),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime33.jsx)(import_icons12.DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
+              children: expandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons11.DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
             }
           )
         ]
@@ -4986,7 +5044,7 @@ var CascaderContent = (0, import_react35.forwardRef)(
     portalled = true,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       PopoverPrimitive3.Content,
       {
         ref,
@@ -4999,12 +5057,12 @@ var CascaderContent = (0, import_react35.forwardRef)(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverPrimitive3.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PopoverPrimitive3.Portal, { children: content });
   }
 );
 CascaderContent.displayName = "CascaderContent";
 var CascaderMenu = (0, import_react35.forwardRef)(
-  ({ children, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: cn("aviala-cascader-menu", className), children })
+  ({ children, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, className: cn("aviala-cascader-menu", className), children })
 );
 CascaderMenu.displayName = "CascaderMenu";
 var CascaderColumn = (0, import_react35.forwardRef)(
@@ -5018,14 +5076,14 @@ var CascaderColumn = (0, import_react35.forwardRef)(
       width: exitLayout.width,
       zIndex: 0
     } : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         ref,
         className: cn("aviala-cascader-column", className),
         "data-animate": animate,
         style: exitStyle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
       }
     );
   }
@@ -5037,10 +5095,10 @@ function CascaderItemGroup({
   children,
   className
 }) {
-  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
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("aviala-cascader-group", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("aviala-cascader-label", typographyVariants({ level: "caption" })), children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "aviala-cascader-group__slot", children }),
+    showDivider ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "aviala-cascader-separator", role: "separator" }) : null
   ] });
 }
 var CascaderItem = (0, import_react35.forwardRef)(
@@ -5101,7 +5159,7 @@ var CascaderItem = (0, import_react35.forwardRef)(
         expandTo(path);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "button",
       {
         ref,
@@ -5133,10 +5191,10 @@ var CascaderItem = (0, import_react35.forwardRef)(
           if (!isTitle) setHighlightedValue(value);
         },
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CascaderItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CascaderItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon2(leftIcon, leftIconLevel, "cascader.content.item.icon-left") : null,
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("aviala-cascader-item__text", typographyVariants({ level: isTitle ? "caption" : "text" })), children: children ?? option?.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.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(
@@ -5261,7 +5319,7 @@ function CascaderOptionsMenu({ className }) {
     }, COLUMN_ANIMATION_MS);
     return () => window.clearTimeout(timeout);
   }, [columns, open]);
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CascaderMenu, { ref: menuRef, className, children: columns.map(({ pathPrefix, key, animateEnter, animateExit, exitLayout }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     CascaderColumn,
     {
       ref: (element) => {
@@ -5274,7 +5332,7 @@ function CascaderOptionsMenu({ className }) {
       animateEnter,
       animateExit,
       exitLayout,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         CascaderItem,
         {
           value: option.value,
@@ -5312,7 +5370,7 @@ function CascaderField({
   separator,
   ...triggerProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     Cascader,
     {
       options,
@@ -5327,7 +5385,7 @@ function CascaderField({
       changeOnSelect,
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           CascaderTrigger,
           {
             size,
@@ -5341,7 +5399,7 @@ function CascaderField({
             ...triggerProps
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CascaderOptionsMenu, { className: menuClassName }) })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CascaderOptionsMenu, { className: menuClassName }) })
       ]
     }
   );
@@ -5349,18 +5407,18 @@ function CascaderField({
 
 // src/components/date-picker/date-picker.tsx
 var PopoverPrimitive4 = __toESM(require("@radix-ui/react-popover"), 1);
-var import_icons13 = require("@aviala-design/icons");
+var import_icons12 = require("@aviala-design/icons");
 var import_react39 = require("react");
 
 // src/components/date-picker/date-picker-context.tsx
 var import_react36 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var DatePickerContext = (0, import_react36.createContext)(null);
 function DatePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DatePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DatePickerContext.Provider, { value, children });
 }
 function useDatePickerContext() {
   const context = (0, import_react36.useContext)(DatePickerContext);
@@ -5581,7 +5639,7 @@ function stickyRoundIndex(fractionalIndex, stickiness = WHEEL_STICKY_AMOUNT) {
 }
 
 // src/components/date-picker/date-picker-time-wheel.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var LOOP_SECTIONS = 3;
 var MIDDLE_SECTION = 1;
 function formatWheelValue(value) {
@@ -5821,23 +5879,23 @@ function DatePickerTimeWheelColumn({
     }
   };
   const selectedOptionId = loop ? `${ariaLabel}-${value}-${values.length * MIDDLE_SECTION + getValueIndex(values, value)}` : `${ariaLabel}-${value}`;
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("aviala-datepicker-time__wheel", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--top",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--bottom",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
       {
         ref: scrollRef,
@@ -5848,17 +5906,17 @@ function DatePickerTimeWheelColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "aviala-datepicker-time__wheel-list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime35.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "li",
             {
               id: optionId,
               className: "aviala-datepicker-time__wheel-item",
               role: "option",
               "aria-selected": isSelected,
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5887,7 +5945,7 @@ function DatePickerTimeWheelColumn({
 }
 
 // src/components/date-picker/date-picker-month-wheels.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var MONTH_VALUES = Array.from({ length: 12 }, (_, index) => index + 1);
 function formatYearValue(value) {
   return String(value);
@@ -5912,14 +5970,14 @@ function DatePickerMonthYearWheels({
   const setYearMonth = (nextYear, nextMonth) => {
     setViewMonth(new Date(nextYear, nextMonth - 1, 1));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       className: cn("aviala-datepicker-month", className),
       role: "group",
       "aria-label": "\u9009\u62E9\u5E74\u6708",
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "aviala-datepicker-month__columns", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "aviala-datepicker-month__columns", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           DatePickerTimeWheelColumn,
           {
             "aria-label": "\u5E74",
@@ -5931,7 +5989,7 @@ function DatePickerMonthYearWheels({
             onChange: (nextYear) => setYearMonth(nextYear, month)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           DatePickerTimeWheelColumn,
           {
             "aria-label": "\u6708",
@@ -5949,12 +6007,12 @@ function DatePickerMonthYearWheels({
 }
 
 // src/components/time-picker/time-picker-wheels.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = 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_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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn("aviala-datepicker-time", className), role: "group", "aria-label": "\u9009\u62E9\u65F6\u95F4", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "aviala-datepicker-time__columns", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5C0F\u65F6",
@@ -5963,7 +6021,7 @@ function TimePickerWheels({ value, onChange, className }) {
         onChange: (hours) => onChange({ ...value, hours })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5206\u949F",
@@ -5976,7 +6034,7 @@ function TimePickerWheels({ value, onChange, className }) {
 }
 
 // src/components/date-picker/date-picker.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function getInitialViewMonth(mode, singleValue, rangeValue) {
   if (mode === "single" && singleValue) return startOfDay(singleValue);
   if (mode === "range") {
@@ -6300,7 +6358,7 @@ function DatePicker(props) {
       viewMonth
     ]
   );
-  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 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePickerProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopoverPrimitive4.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("inline-flex", className), children }) }) });
 }
 function formatTriggerValue(mode, singleValue, rangeValue, enableTime, timeValue, rangeSeparator) {
   if (mode === "single") {
@@ -6392,7 +6450,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_runtime38.jsx)(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         "button",
         {
           type: "button",
@@ -6406,10 +6464,10 @@ var DatePickerTrigger = (0, import_react39.forwardRef)(
           "aria-haspopup": "dialog",
           children: [
             renderSlotIcon(
-              leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+              leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons12.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
               "aviala-datepicker-trigger__slot"
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "span",
               {
                 className: cn(
@@ -6425,7 +6483,7 @@ var DatePickerTrigger = (0, import_react39.forwardRef)(
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverPrimitive4.Anchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopoverPrimitive4.Anchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "div",
       {
         className: cn("aviala-datepicker-trigger aviala-focus-ring", className),
@@ -6443,10 +6501,10 @@ var DatePickerTrigger = (0, import_react39.forwardRef)(
         },
         children: [
           renderSlotIcon(
-            leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons12.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
             "aviala-datepicker-trigger__slot"
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "input",
             {
               ref: setInputRefs,
@@ -6515,7 +6573,7 @@ var DatePickerContent = (0, import_react39.forwardRef)(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       PopoverPrimitive4.Content,
       {
         ref,
@@ -6523,11 +6581,11 @@ var DatePickerContent = (0, import_react39.forwardRef)(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerCalendar, {})
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePickerCalendar, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverPrimitive4.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopoverPrimitive4.Portal, { children: content });
   }
 );
 DatePickerContent.displayName = "DatePickerContent";
@@ -6545,7 +6603,7 @@ function getFooterDateLabel(mode, singleValue, rangeValue) {
 }
 function DatePickerTimePanel() {
   const { timeValue, setTimeValue } = useDatePickerContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
 }
 function DatePickerPanelFooter() {
   const {
@@ -6560,7 +6618,7 @@ function DatePickerPanelFooter() {
   if (!enableTime) return null;
   const panelValue = activePanel === "time" ? "time" : "date";
   const isRangeMode = mode === "range";
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     SegmentatorGroup,
     {
       value: panelValue,
@@ -6571,20 +6629,20 @@ function DatePickerPanelFooter() {
       "data-active-panel": activePanel,
       "aria-label": "\u65E5\u671F\u4E0E\u65F6\u95F4\u5207\u6362",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           SegmentatorItem,
           {
             value: "date",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons12.TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && panelValue === "time",
             children: getFooterDateLabel(mode, singleValue, rangeValue)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           SegmentatorItem,
           {
             value: "time",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons13.TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons12.TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && panelValue === "date",
             children: formatTimeValue(timeValue.hours, timeValue.minutes)
           }
@@ -6752,8 +6810,8 @@ function DatePickerCalendar({ className }) {
     }
   };
   const stepMonth = isMonthPanel ? 12 : 1;
-  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)(
+  const renderDateContent = () => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "aviala-datepicker-calendar__weekdays", "aria-hidden": true, children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "span",
       {
         className: cn(
@@ -6764,8 +6822,8 @@ function DatePickerCalendar({ className }) {
       },
       label
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "aviala-datepicker-calendar__grid-viewport", children: [
-      monthSlide && outgoingDays ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "aviala-datepicker-calendar__grid-viewport", children: [
+      monthSlide && outgoingDays ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "div",
         {
           className: "aviala-datepicker-calendar__grid",
@@ -6774,12 +6832,12 @@ function DatePickerCalendar({ className }) {
           "aria-hidden": true,
           children: outgoingDays.map((day) => {
             const outside = !isSameMonth(day, monthSlide.outgoingMonth);
-            return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "span",
               {
                 className: "aviala-datepicker-day",
                 "data-outside": outside ? "true" : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   "span",
                   {
                     className: cn(
@@ -6796,7 +6854,7 @@ function DatePickerCalendar({ className }) {
         },
         `out-${monthSlide.outgoingMonth.getFullYear()}-${monthSlide.outgoingMonth.getMonth()}`
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "div",
         {
           ref: dayGridRef,
@@ -6820,7 +6878,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_runtime38.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
               "button",
               {
                 type: "button",
@@ -6842,7 +6900,7 @@ function DatePickerCalendar({ className }) {
                 onFocus: () => setFocusedDay(day),
                 onKeyDown: (event) => handleDayKeyDown(event, day),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                     "span",
                     {
                       className: cn(
@@ -6852,7 +6910,7 @@ function DatePickerCalendar({ className }) {
                       children: day.getDate()
                     }
                   ),
-                  isToday ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
+                  isToday ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
                 ]
               },
               dayKey
@@ -6863,20 +6921,20 @@ function DatePickerCalendar({ className }) {
       )
     ] })
   ] });
-  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)(
+  const renderContentView = (view) => view === "month" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePickerMonthYearWheels, { layoutKey: monthWheelLayoutKey }) : renderDateContent();
+  const renderDatePanel = () => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "aviala-datepicker-calendar__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime38.jsx)(import_icons13.DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons12.DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "button",
         {
           type: "button",
@@ -6889,7 +6947,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_runtime38.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "span",
             {
               className: "aviala-datepicker-calendar__title-text",
@@ -6900,19 +6958,19 @@ function DatePickerCalendar({ className }) {
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime38.jsx)(import_icons13.DirectionArrowRight, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons12.DirectionArrowRight, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "aviala-datepicker-calendar__view-viewport", children: [
-      viewCrossfade ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "aviala-datepicker-calendar__view-viewport", children: [
+      viewCrossfade ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "div",
         {
           className: "aviala-datepicker-calendar__view",
@@ -6923,7 +6981,7 @@ function DatePickerCalendar({ className }) {
         },
         `exit-${viewCrossfade.outgoing}`
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "div",
         {
           className: "aviala-datepicker-calendar__view",
@@ -6944,16 +7002,16 @@ function DatePickerCalendar({ className }) {
       )
     ] })
   ] });
-  const renderPanel = (kind) => kind === "time" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerTimePanel, {}) : renderDatePanel();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  const renderPanel = (kind) => kind === "time" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePickerTimePanel, {}) : renderDatePanel();
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
     {
       className: cn("aviala-datepicker-calendar", className),
       role: "application",
       "aria-label": "Calendar",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "aviala-datepicker-calendar__panel-viewport", children: [
-          panelSlide ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "aviala-datepicker-calendar__panel-viewport", children: [
+          panelSlide ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "div",
             {
               className: "aviala-datepicker-calendar__panel aviala-datepicker-calendar__body",
@@ -6965,7 +7023,7 @@ function DatePickerCalendar({ className }) {
             },
             `panel-exit-${panelSlide.outgoing}`
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "div",
             {
               className: "aviala-datepicker-calendar__panel aviala-datepicker-calendar__body",
@@ -6983,7 +7041,7 @@ function DatePickerCalendar({ className }) {
             `panel-enter-${panel}`
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerPanelFooter, {})
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePickerPanelFooter, {})
       ]
     }
   );
@@ -7047,8 +7105,8 @@ function DatePickerField({
     defaultTimeValue,
     onTimeChange
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(DatePicker, { ...pickerProps, size, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(DatePicker, { ...pickerProps, size, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       DatePickerTrigger,
       {
         size,
@@ -7062,24 +7120,24 @@ function DatePickerField({
         editable
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DatePickerCalendar, { className: calendarClassName }) })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePickerCalendar, { className: calendarClassName }) })
   ] });
 }
 
 // src/components/time-picker/time-picker.tsx
 var PopoverPrimitive5 = __toESM(require("@radix-ui/react-popover"), 1);
-var import_icons14 = require("@aviala-design/icons");
+var import_icons13 = require("@aviala-design/icons");
 var import_react41 = require("react");
 
 // src/components/time-picker/time-picker-context.tsx
 var import_react40 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var TimePickerContext = (0, import_react40.createContext)(null);
 function TimePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimePickerContext.Provider, { value, children });
 }
 function useTimePickerContext() {
   const context = (0, import_react40.useContext)(TimePickerContext);
@@ -7090,7 +7148,7 @@ function useTimePickerContext() {
 }
 
 // src/components/time-picker/time-picker.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function TimePicker({
   children,
   value: valueProp,
@@ -7163,7 +7221,7 @@ function TimePicker({
     }),
     [disabled, open, size, value, setValue]
   );
-  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 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimePickerProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("inline-flex", className), children }) }) });
 }
 var TimePickerTrigger = (0, import_react41.forwardRef)(
   ({
@@ -7183,7 +7241,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_runtime40.jsx)(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "button",
       {
         ref,
@@ -7199,10 +7257,10 @@ var TimePickerTrigger = (0, import_react41.forwardRef)(
         ...props,
         children: [
           renderSlotIcon(
-            leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons14.TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons13.TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
             "aviala-timepicker-trigger__slot"
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "span",
             {
               className: cn(
@@ -7229,7 +7287,7 @@ var TimePickerContent = (0, import_react41.forwardRef)(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       PopoverPrimitive5.Content,
       {
         ref,
@@ -7237,17 +7295,17 @@ var TimePickerContent = (0, import_react41.forwardRef)(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimePickerPanel, {})
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimePickerPanel, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverPrimitive5.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PopoverPrimitive5.Portal, { children: content });
   }
 );
 TimePickerContent.displayName = "TimePickerContent";
 function TimePickerPanel({ className }) {
   const { value, setValue } = useTimePickerContext();
-  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 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("aviala-timepicker-panel", className), role: "application", "aria-label": "Time picker", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimePickerWheels, { value, onChange: setValue }) });
 }
 function TimePickerField({
   contentClassName,
@@ -7267,7 +7325,7 @@ function TimePickerField({
   onOpenChange,
   disabled
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     TimePicker,
     {
       value,
@@ -7280,7 +7338,7 @@ function TimePickerField({
       size,
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           TimePickerTrigger,
           {
             size,
@@ -7291,7 +7349,7 @@ function TimePickerField({
             error
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TimePickerPanel, { className: panelClassName }) })
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TimePickerPanel, { className: panelClassName }) })
       ]
     }
   );
@@ -7302,7 +7360,7 @@ var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"), 1);
 var import_react42 = require("react");
 
 // src/components/overlay-pointer.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var TOOLTIP_POINTER = {
   width: 14,
   height: 5,
@@ -7323,7 +7381,7 @@ function OverlayPointerSvg({
   ...props
 }) {
   const isPopover = variant === "popover";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "svg",
     {
       ...props,
@@ -7336,16 +7394,16 @@ function OverlayPointerSvg({
       "aria-hidden": true,
       className,
       style: { ...style, width, height },
-      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 })
+      children: isPopover ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: path, className: "aviala-popover-content__arrow-outline" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: path, className: "aviala-popover-content__arrow-fill" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: path })
     }
   );
 }
 
 // src/components/popover.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Popover({
   open: openProp,
   defaultOpen = false,
@@ -7363,7 +7421,7 @@ function Popover({
     },
     [isControlled, onOpenChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     PopoverPrimitive6.Root,
     {
       open,
@@ -7386,12 +7444,13 @@ var PopoverContent = (0, import_react42.forwardRef)(
     showArrow = false,
     flush = false,
     appearance = "default",
+    level,
     ...props
   }, ref) => {
     const isDefaultAppearance = appearance === "default";
-    const surfaceLevel = appearance === "tooltip" ? "caption" : "text";
+    const surfaceLevel = level ?? (appearance === "tooltip" ? "caption" : "text");
     const pointer = isDefaultAppearance ? POPOVER_POINTER : TOOLTIP_POINTER;
-    const content = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       PopoverPrimitive6.Content,
       {
         ref,
@@ -7402,7 +7461,7 @@ var PopoverContent = (0, import_react42.forwardRef)(
         className: cn("aviala-popover-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "div",
             {
               className: cn(
@@ -7413,13 +7472,13 @@ var PopoverContent = (0, import_react42.forwardRef)(
               children
             }
           ),
-          showArrow ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          showArrow ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             PopoverPrimitive6.Arrow,
             {
               asChild: true,
               width: pointer.width,
               height: pointer.height,
-              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 OverlayPointerSvg,
                 {
                   variant: isDefaultAppearance ? "popover" : "default",
@@ -7435,7 +7494,7 @@ var PopoverContent = (0, import_react42.forwardRef)(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverPrimitive6.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverPrimitive6.Portal, { children: content });
   }
 );
 PopoverContent.displayName = PopoverPrimitive6.Content.displayName;
@@ -7459,7 +7518,7 @@ function useCoarsePointer() {
 }
 
 // src/components/hover-popover.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function HoverPopover({
   content,
   children,
@@ -7505,9 +7564,9 @@ function HoverPopover({
     closeTimer.current = setTimeout(() => setOpen(false), closeDelay);
   }, [clearTimers, closeDelay, setOpen]);
   if (coarse) {
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         PopoverContent,
         {
           side,
@@ -7521,8 +7580,8 @@ function HoverPopover({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       PopoverTrigger,
       {
         asChild: true,
@@ -7534,7 +7593,7 @@ function HoverPopover({
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       PopoverContent,
       {
         ref: contentRef,
@@ -7566,10 +7625,10 @@ function HoverPopover({
 
 // src/components/modal.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_icons15 = require("@aviala-design/icons");
+var import_icons14 = require("@aviala-design/icons");
 var import_class_variance_authority10 = require("class-variance-authority");
 var import_react45 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var MODAL_ICON_SIZE = 16;
 var modalContentVariants = (0, import_class_variance_authority10.cva)("aviala-modal-content", {
   variants: {
@@ -7592,13 +7651,13 @@ function renderModalIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime44.jsx)(
+var ModalOverlay = (0, import_react45.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -7617,24 +7676,24 @@ var ModalContent = (0, import_react45.forwardRef)(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const overlay = showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalOverlay, {}) : null;
-    const panel = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    const overlay = showOverlay ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ModalOverlay, {}) : null;
+    const panel = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       DialogPrimitive.Content,
       {
         ref,
         className: cn(modalContentVariants({ size }), className),
         onOpenAutoFocus,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "aviala-modal-content__surface", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "aviala-modal-content__surface", children })
       }
     );
     if (!portalled) {
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
         overlay,
         panel
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DialogPrimitive.Portal, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DialogPrimitive.Portal, { children: [
       overlay,
       panel
     ] });
@@ -7650,10 +7709,10 @@ var ModalHeader = (0, import_react45.forwardRef)(
     showClose = true,
     closeLabel = "Close dialog",
     ...props
-  }, 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: [
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "aviala-modal__header-row", children: [
     showIcon ? renderModalIcon(icon) : null,
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "aviala-modal__header-main", children }),
+    showClose ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Button,
       {
         type: "button",
@@ -7661,28 +7720,28 @@ var ModalHeader = (0, import_react45.forwardRef)(
         iconOnly: true,
         "aria-label": closeLabel,
         className: "aviala-modal__close",
-        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons15.SymbolWrong, { "aria-hidden": true })
+        leftIcon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons14.SymbolWrong, { "aria-hidden": true })
       }
     ) }) : null
   ] }) })
 );
 ModalHeader.displayName = "ModalHeader";
-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 }) }));
+var ModalTitle = (0, import_react45.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime45.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_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 }) }));
+var ModalDescription = (0, import_react45.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime45.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_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
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ModalHeader, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "aviala-modal__header-typeface", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ModalTitle, { children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ModalDescription, { children: description }) : null
   ] }) });
 }
 var ModalBody = (0, import_react45.forwardRef)(
-  ({ 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)(
+  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     Typeface,
     {
       className: "aviala-modal__body-typeface",
@@ -7694,26 +7753,28 @@ var ModalBody = (0, import_react45.forwardRef)(
 );
 ModalBody.displayName = "ModalBody";
 var ModalFooter = (0, import_react45.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ref, className: cn("aviala-modal__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var TOOLTIP_DELAY_DURATION = 300;
 function TooltipProvider({
+  children,
   delayDuration = TOOLTIP_DELAY_DURATION,
   skipDelayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     TooltipPrimitive.Provider,
     {
       delayDuration,
       skipDelayDuration,
-      ...props
+      ...props,
+      children
     }
   );
 }
@@ -7726,8 +7787,9 @@ var TooltipContent = (0, import_react46.forwardRef)(
     sideOffset = 4,
     collisionPadding = 8,
     showArrow = true,
+    level = "caption",
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -7736,14 +7798,23 @@ var TooltipContent = (0, import_react46.forwardRef)(
       className: cn("aviala-tooltip-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
-        showArrow ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "div",
+          {
+            className: cn(
+              "aviala-tooltip-content__surface",
+              typographyVariants({ level })
+            ),
+            children
+          }
+        ),
+        showArrow ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           TooltipPrimitive.Arrow,
           {
             asChild: true,
             width: TOOLTIP_POINTER.width,
             height: TOOLTIP_POINTER.height,
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               OverlayPointerSvg,
               {
                 className: "aviala-tooltip-content__arrow",
@@ -7761,7 +7832,7 @@ var TooltipContent = (0, import_react46.forwardRef)(
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/responsive-tooltip.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function ResponsiveTooltip({
   content,
   children,
@@ -7770,6 +7841,7 @@ function ResponsiveTooltip({
   sideOffset = 4,
   collisionPadding = 8,
   showArrow = true,
+  level = "caption",
   delayDuration = TOOLTIP_DELAY_DURATION,
   open,
   defaultOpen,
@@ -7778,12 +7850,13 @@ function ResponsiveTooltip({
 }) {
   const coarse = useCoarsePointer();
   if (coarse) {
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Popover, { open, defaultOpen, onOpenChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         PopoverContent,
         {
           appearance: "tooltip",
+          level,
           side,
           align,
           sideOffset,
@@ -7795,7 +7868,7 @@ function ResponsiveTooltip({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     Tooltip,
     {
       delayDuration,
@@ -7803,8 +7876,8 @@ function ResponsiveTooltip({
       defaultOpen,
       onOpenChange,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           TooltipContent,
           {
             side,
@@ -7812,6 +7885,7 @@ function ResponsiveTooltip({
             sideOffset,
             collisionPadding,
             showArrow,
+            level,
             className: contentClassName,
             children: content
           }
@@ -7823,9 +7897,9 @@ function ResponsiveTooltip({
 
 // src/components/feedback.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_icons16 = require("@aviala-design/icons");
+var import_icons15 = require("@aviala-design/icons");
 var import_react47 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var FEEDBACK_ICON_SIZE = 22;
 var feedbackVariants = (0, import_class_variance_authority11.cva)("aviala-feedback", {
   variants: {
@@ -7861,22 +7935,22 @@ function renderFeedbackIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
 }
 function defaultStatusIcon(type, mode) {
   const iconMode = mode === "primary" ? "fill" : "default";
   const thickness = "Regular";
   switch (type) {
     case "information":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolInformationCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons15.SymbolInformationCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons15.SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "wrong":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolWrongCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons15.SymbolWrongCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons15.SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "normal":
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons15.GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
   }
 }
 var Feedback = (0, import_react47.forwardRef)(
@@ -7901,7 +7975,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_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "div",
       {
         ref,
@@ -7915,9 +7989,9 @@ var Feedback = (0, import_react47.forwardRef)(
         "data-size": resolvedSize,
         "data-mode": mode,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "aviala-feedback__body", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-feedback__body", children: [
           renderFeedbackIcon(icon ?? defaultStatusIcon(resolvedType, mode)),
-          isSmall ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          isSmall ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             Typeface,
             {
               className: "aviala-feedback__typeface",
@@ -7927,7 +8001,7 @@ var Feedback = (0, import_react47.forwardRef)(
               tone
             }
           ),
-          action ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          action ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             Link,
             {
               level: "text",
@@ -7943,7 +8017,7 @@ var Feedback = (0, import_react47.forwardRef)(
               children: action
             }
           ) : null,
-          showClose ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          showClose ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             Link,
             {
               level: "text",
@@ -7952,7 +8026,7 @@ var Feedback = (0, import_react47.forwardRef)(
               href: onClose ? "#" : void 0,
               "aria-label": closeLabel,
               className: "aviala-feedback__close",
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons16.SymbolWrong, { "aria-hidden": true }),
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons15.SymbolWrong, { "aria-hidden": true }),
               onClick: (event) => {
                 if (onClose) {
                   event.preventDefault();
@@ -7969,10 +8043,10 @@ var Feedback = (0, import_react47.forwardRef)(
 Feedback.displayName = "Feedback";
 
 // src/components/alert.tsx
-var import_icons17 = require("@aviala-design/icons");
+var import_icons16 = require("@aviala-design/icons");
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_react48 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var ALERT_ICON_SIZE = 16;
 var alertVariants = (0, import_class_variance_authority12.cva)("aviala-alert", {
   variants: {
@@ -8008,20 +8082,20 @@ function renderAlertIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime48.jsx)(import_icons17.SymbolInformationCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons16.SymbolInformationCircle, { ...iconProps });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons17.SymbolWarningCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons16.SymbolWarningCircle, { ...iconProps });
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons17.SymbolWrongCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons16.SymbolWrongCircle, { ...iconProps });
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons17.SymbolRightCircle, { ...iconProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons16.SymbolRightCircle, { ...iconProps });
   }
 }
 var Alert = (0, import_react48.forwardRef)(
@@ -8050,7 +8124,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_runtime48.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "div",
       {
         ref,
@@ -8062,9 +8136,9 @@ var Alert = (0, import_react48.forwardRef)(
         "data-appearance": appearance,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-alert__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-alert__body", children: [
             showIcon ? renderAlertIcon(icon ?? defaultStatusIcon2(resolvedType)) : null,
-            isSmall ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            isSmall ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Typeface,
               {
                 className: "aviala-alert__typeface",
@@ -8073,7 +8147,7 @@ var Alert = (0, import_react48.forwardRef)(
                 secondary: description
               }
             ),
-            quickAction ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            quickAction ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Link,
               {
                 level: "text",
@@ -8089,7 +8163,7 @@ var Alert = (0, import_react48.forwardRef)(
                 children: quickAction
               }
             ) : null,
-            dismissible ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            dismissible ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Link,
               {
                 level: "text",
@@ -8098,7 +8172,7 @@ var Alert = (0, import_react48.forwardRef)(
                 href: onDismiss ? "#" : void 0,
                 "aria-label": closeLabel,
                 className: "aviala-alert__close",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons17.SymbolWrong, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons16.SymbolWrong, { "aria-hidden": true }),
                 onClick: (event) => {
                   if (onDismiss) {
                     event.preventDefault();
@@ -8108,8 +8182,8 @@ var Alert = (0, import_react48.forwardRef)(
               }
             ) : null
           ] }),
-          hasActions ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "aviala-alert__actions", children: [
-            action ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          hasActions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-alert__actions", children: [
+            action ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Link,
               {
                 level: "caption",
@@ -8125,7 +8199,7 @@ var Alert = (0, import_react48.forwardRef)(
                 children: action
               }
             ) : null,
-            secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Link,
               {
                 level: "caption",
@@ -8150,32 +8224,32 @@ var Alert = (0, import_react48.forwardRef)(
 Alert.displayName = "Alert";
 
 // src/components/list.tsx
-var import_icons18 = require("@aviala-design/icons");
+var import_icons17 = require("@aviala-design/icons");
 var import_react49 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var List = (0, import_react49.forwardRef)(
-  ({ 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 })
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { ref, className: cn("aviala-list", className), ...props, children: [
+    title != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ListTitle, { children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ListGroup, { children })
   ] })
 );
 List.displayName = "List";
 var ListTitle = (0, import_react49.forwardRef)(
-  ({ 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 }) })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime49.jsx)("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.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_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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("aviala-list", className), children: [
+    label != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ListTitle, { children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ListGroup, { children })
   ] });
 }
 var ListDivider = (0, import_react49.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "span",
     {
       ref,
@@ -8187,13 +8261,13 @@ var ListDivider = (0, import_react49.forwardRef)(
 );
 ListDivider.displayName = "ListDivider";
 var ListSeparator = (0, import_react49.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("hr", { ref, className: cn("aviala-list-separator", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime49.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }));
+  const content = node ?? (leading === "shaped" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons17.GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons17.GeneralSetting, { "aria-hidden": true }));
   const rendered = (0, import_react49.isValidElement)(content) && typeof content.type !== "string" ? (0, import_react49.cloneElement)(content, {
     width: iconSize,
     height: iconSize,
@@ -8202,7 +8276,7 @@ function renderLeadingIcon(node, leading) {
       "shrink-0"
     )
   }) : content;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "span",
     {
       className: cn(
@@ -8240,45 +8314,45 @@ var ListItem = (0, import_react49.forwardRef)(
   }, ref) => {
     const isInteractive = interactive ?? (onClick != null || href != null);
     const chevronVisible = showChevron ?? itemType === "action";
-    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 chevron = chevronVisible ? /* @__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 }) }) : null;
+    const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons17.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const chevron = chevronVisible ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons17.DirectionArrowRightLight, { width: 18, height: 18 }) }) : null;
     const renderTrailing = () => {
       const hideActions = !showTrailing || trailing === null;
       if (hideActions) {
-        return chevron && itemType === "action" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "aviala-list-item__more", children: chevron }) : null;
+        return chevron && itemType === "action" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "aviala-list-item__more", children: chevron }) : null;
       }
       if (trailing !== void 0) return trailing;
       switch (itemType) {
         case "action":
-          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: [
+          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "aviala-list-item__more", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "aviala-list-item__trailing", children: [
               primaryAction,
-              secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                 Button,
                 {
                   mode: "default",
                   size: "regular",
                   iconOnly: true,
                   "aria-label": "More",
-                  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true })
+                  leftIcon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons17.GeneralSetting, { "aria-hidden": true })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListDivider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ListDivider, {}),
             chevron
           ] });
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Switch, { ...switchProps })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ListDivider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-list-item__select", children: select })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ListDivider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-list-item__select", children: select })
           ] });
       }
     };
@@ -8292,15 +8366,15 @@ var ListItem = (0, import_react49.forwardRef)(
       "data-top-divider": showTopDivider === void 0 ? void 0 : showTopDivider ? "true" : "false"
     };
     const trailingNode = renderTrailing();
-    const body = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    const body = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
       renderLeadingIcon(icon, leading),
-      /* @__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 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "aviala-list-item__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
         trailingNode
       ] }) })
     ] });
     if (href && !disabled) {
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "a",
         {
           ref,
@@ -8316,7 +8390,7 @@ var ListItem = (0, import_react49.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "div",
       {
         ref,
@@ -8336,7 +8410,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_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function navigationItemButtonMode(active) {
   return active ? "second" : "noBackgroundCustom";
 }
@@ -8345,7 +8419,7 @@ function useNavigationDirection() {
   return (0, import_react50.useContext)(NavigationDirectionContext);
 }
 var NAVIGATION_ANIMATION_MS_FALLBACK = 300;
-var NAVIGATION_ANIMATION_EASING_FALLBACK = "cubic-bezier(0.33, 1, 0.68, 1)";
+var NAVIGATION_ANIMATION_EASING_FALLBACK = "cubic-bezier(0.16, 1, 0.3, 1)";
 function parseDurationMs(value) {
   const trimmed = value.trim();
   if (!trimmed) return NAVIGATION_ANIMATION_MS_FALLBACK;
@@ -8452,8 +8526,8 @@ function measureIndicatorFromElement(indicatorEl, groupEl) {
     visible: indicatorEl.dataset.visible === "true"
   };
 }
-function easeOutCubic(t) {
-  return 1 - Math.pow(1 - t, 3);
+function easeOutQuint(t) {
+  return 1 - Math.pow(1 - t, 5);
 }
 function metricsApproxEqual2(a, b, epsilon = 0.5) {
   return Math.abs(a.x - b.x) < epsilon && Math.abs(a.y - b.y) < epsilon && Math.abs(a.width - b.width) < epsilon && Math.abs(a.height - b.height) < epsilon && a.visible === b.visible;
@@ -8577,7 +8651,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
         if (!startVisible || !target.visible) {
           syncIndicator(target, true);
         } else {
-          const eased = easeOutCubic(progress);
+          const eased = easeOutQuint(progress);
           const groupRect = group.getBoundingClientRect();
           const targetAbsX = groupRect.left + target.x;
           const targetAbsY = groupRect.top + target.y;
@@ -8745,7 +8819,7 @@ var Navigation = (0, import_react50.forwardRef)(
     direction = "vertical",
     dividingLine = false,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     Tag2,
     {
       ref,
@@ -8759,7 +8833,7 @@ var Navigation = (0, import_react50.forwardRef)(
 );
 Navigation.displayName = "Navigation";
 var NavigationBrand = (0, import_react50.forwardRef)(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       ref,
@@ -8771,24 +8845,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_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     Comp,
     {
       ref,
       className: cn("aviala-navigation-brand__title aviala-focus-ring", className),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Typography, { level: "text", as: "span", children })
+      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Typography, { level: "text", as: "span", children })
     }
   );
 });
 NavigationBrandTitle.displayName = "NavigationBrandTitle";
-var NavigationSection = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+var NavigationSection = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   "div",
   {
     ref,
     className: cn("aviala-navigation-section", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Typography, { level: "caption", as: "p", children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Typography, { level: "caption", as: "p", children })
   }
 ));
 NavigationSection.displayName = "NavigationSection";
@@ -8813,14 +8887,14 @@ var NavigationGroup = (0, import_react50.forwardRef)(
       },
       [ref]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
       "div",
       {
         ref: setRefs,
         className: cn("aviala-navigation-group", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "span",
             {
               ref: onIndicatorRef,
@@ -8846,7 +8920,7 @@ var NavigationItemGroup = (0, import_react50.forwardRef)(({ className, expanded,
     if (isCollapsed) inner.setAttribute("inert", "");
     else inner.removeAttribute("inert");
   }, [isCollapsed]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       ref,
@@ -8854,7 +8928,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_runtime50.jsx)("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
+      children: isCollapsible ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
     }
   );
 });
@@ -8865,7 +8939,7 @@ function renderItemIcon3(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-navigation-item__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "aviala-navigation-item__icon", children: content });
 }
 var NavigationItem = (0, import_react50.forwardRef)(
   ({
@@ -8882,9 +8956,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_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    const controlContent = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
       renderItemIcon3(leftIcon),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         Typography,
         {
           level: "text",
@@ -8893,15 +8967,15 @@ var NavigationItem = (0, import_react50.forwardRef)(
           children
         }
       ),
-      rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+      rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "span",
       {
         className: cn("aviala-navigation-item", className),
         "data-item-type": itemType,
         "data-active": isActive ? "true" : "false",
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           Comp,
           {
             ref,
@@ -8920,7 +8994,7 @@ var NavigationItem = (0, import_react50.forwardRef)(
   }
 );
 NavigationItem.displayName = "NavigationItem";
-var NavigationActions = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+var NavigationActions = (0, import_react50.forwardRef)(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   "div",
   {
     ref,
@@ -8930,7 +9004,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_runtime50.jsx)(
+var NavigationActionsSlot = (0, import_react50.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   "div",
   {
     ref,
@@ -9022,7 +9096,7 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover, { open, onOpenChange: handleOpenChange, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Popover, { open, onOpenChange: handleOpenChange, children }) });
 }
 var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
   ({
@@ -9036,7 +9110,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_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "span",
       {
         className: cn("aviala-navigation-item", className),
@@ -9044,7 +9118,7 @@ var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
         "data-active": isActive ? "true" : "false",
         onMouseEnter: () => menu.openMenu(true),
         onMouseLeave: menu.scheduleClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           "button",
           {
             ref,
@@ -9057,7 +9131,7 @@ var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
             ...props,
             children: [
               renderItemIcon3(leftIcon),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 Typography,
                 {
                   level: "text",
@@ -9066,7 +9140,7 @@ var NavigationItemMenuTrigger = (0, import_react50.forwardRef)(
                   children
                 }
               ),
-              rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+              rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
             ]
           }
         ) })
@@ -9087,7 +9161,7 @@ var NavigationItemMenuContent = (0, import_react50.forwardRef)(
   }, ref) => {
     const direction = useNavigationDirection();
     const menu = useNavigationItemMenuContext("NavigationItemMenuContent");
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       PopoverPrimitive7.Content,
       {
         ref,
@@ -9122,7 +9196,7 @@ var NavigationItemMenuItem = (0, import_react50.forwardRef)(
   }, ref) => {
     const menu = useNavigationItemMenuContext("NavigationItemMenuItem");
     const isSelected = selected ?? menu.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
       "button",
       {
         ref,
@@ -9142,7 +9216,7 @@ var NavigationItemMenuItem = (0, import_react50.forwardRef)(
         ...props,
         children: [
           renderItemIcon3(leftIcon),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Typography,
             {
               level: "text",
@@ -9151,7 +9225,7 @@ var NavigationItemMenuItem = (0, import_react50.forwardRef)(
               children
             }
           ),
-          rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
+          rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
         ]
       }
     );
@@ -9163,7 +9237,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_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var sliderVariants = (0, import_class_variance_authority13.cva)("aviala-slider", {
   variants: {
     size: {
@@ -9180,6 +9254,70 @@ var sliderVariants = (0, import_class_variance_authority13.cva)("aviala-slider",
     type: "default"
   }
 });
+function SliderValueTooltip({
+  open,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "span",
+    {
+      className: "aviala-slider__value-tooltip",
+      "data-state": open ? "instant-open" : "closed",
+      "aria-hidden": !open,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          "span",
+          {
+            className: cn(
+              "aviala-slider__value-tooltip__surface",
+              typographyVariants({ level: "caption" })
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "aviala-slider__value-tooltip__arrow", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          OverlayPointerSvg,
+          {
+            className: "aviala-tooltip-content__arrow",
+            width: TOOLTIP_POINTER.width,
+            height: TOOLTIP_POINTER.height,
+            path: TOOLTIP_POINTER.path
+          }
+        ) })
+      ]
+    }
+  );
+}
+function SliderThumb({
+  index,
+  value,
+  showValueTooltip,
+  formatValueTooltip,
+  forceTooltipOpen,
+  onThumbPointerDown
+}) {
+  const [hoverOpen, setHoverOpen] = (0, import_react51.useState)(false);
+  const tooltipOpen = Boolean(
+    showValueTooltip && (forceTooltipOpen || hoverOpen)
+  );
+  const label = formatValueTooltip ? formatValueTooltip(value, index) : String(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(SliderPrimitive.unstable_ThumbProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+      SliderPrimitive.unstable_ThumbTrigger,
+      {
+        className: "aviala-slider__thumb aviala-focus-ring",
+        onPointerDown: onThumbPointerDown,
+        onPointerEnter: showValueTooltip ? () => setHoverOpen(true) : void 0,
+        onPointerLeave: showValueTooltip ? () => setHoverOpen(false) : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "aviala-slider__thumb-face", "aria-hidden": true }),
+          showValueTooltip ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SliderValueTooltip, { open: tooltipOpen, children: label }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SliderPrimitive.unstable_BubbleInput, {})
+  ] });
+}
 var Slider = (0, import_react51.forwardRef)(
   ({
     className,
@@ -9190,6 +9328,14 @@ var Slider = (0, import_react51.forwardRef)(
     defaultValue,
     min = 0,
     max = 100,
+    onValueChange,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    onLostPointerCapture,
+    showValueTooltip = false,
+    formatValueTooltip,
     ...props
   }, ref) => {
     const resolvedType = type ?? "default";
@@ -9197,7 +9343,50 @@ 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_runtime51.jsxs)(
+    const [isDragging, setIsDragging] = (0, import_react51.useState)(false);
+    const [pointerDown, setPointerDown] = (0, import_react51.useState)(false);
+    const [activeThumbIndex, setActiveThumbIndex] = (0, import_react51.useState)(
+      null
+    );
+    const [uncontrolledValue, setUncontrolledValue] = (0, import_react51.useState)(
+      resolvedDefaultValue
+    );
+    const currentValues = value ?? uncontrolledValue;
+    const handleValueChange = (next) => {
+      if (value == null) setUncontrolledValue(next);
+      if (showValueTooltip) {
+        const prev = currentValues;
+        const changed = next.findIndex((v, i) => v !== prev[i]);
+        if (changed >= 0) setActiveThumbIndex(changed);
+      }
+      onValueChange?.(next);
+    };
+    const handlePointerDown = (event) => {
+      if (showValueTooltip && !disabled) setPointerDown(true);
+      onPointerDown?.(event);
+    };
+    const handlePointerMove = (event) => {
+      if (event.buttons !== 0) setIsDragging(true);
+      onPointerMove?.(event);
+    };
+    const endPointer = () => {
+      setIsDragging(false);
+      setPointerDown(false);
+      setActiveThumbIndex(null);
+    };
+    const handlePointerUp = (event) => {
+      endPointer();
+      onPointerUp?.(event);
+    };
+    const handlePointerCancel = (event) => {
+      endPointer();
+      onPointerCancel?.(event);
+    };
+    const handleLostPointerCapture = (event) => {
+      endPointer();
+      onLostPointerCapture?.(event);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       SliderPrimitive.Root,
       {
         ref,
@@ -9213,22 +9402,46 @@ var Slider = (0, import_react51.forwardRef)(
         "data-size": resolvedSize,
         "data-type": resolvedType,
         "data-disabled": disabled ? "true" : void 0,
+        "data-dragging": isDragging ? "true" : void 0,
+        "data-value-tooltip": showValueTooltip ? "true" : void 0,
+        onValueChange: handleValueChange,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
+        onLostPointerCapture: handleLostPointerCapture,
         ...props,
         children: [
-          /* @__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))
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
+          Array.from({ length: thumbCount }, (_, index) => {
+            const thumbValue = currentValues[index] ?? resolvedDefaultValue[index] ?? (isRange ? index === 0 ? min : max : min + (max - min) / 2);
+            const forceTooltipOpen = pointerDown && (activeThumbIndex === index || activeThumbIndex == null && thumbCount === 1 && index === 0);
+            return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              SliderThumb,
+              {
+                index,
+                value: thumbValue,
+                showValueTooltip: Boolean(showValueTooltip && !disabled),
+                formatValueTooltip,
+                forceTooltipOpen,
+                onThumbPointerDown: () => setActiveThumbIndex(index)
+              },
+              index
+            );
+          })
         ]
-      }
+      },
+      resolvedType
     );
   }
 );
 Slider.displayName = "Slider";
 
 // src/components/upload.tsx
-var import_icons19 = require("@aviala-design/icons");
+var import_icons18 = require("@aviala-design/icons");
 var import_class_variance_authority14 = require("class-variance-authority");
 var import_react52 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var uploadVariants = (0, import_class_variance_authority14.cva)("aviala-upload aviala-focus-ring", {
   variants: {
     style: {
@@ -9278,7 +9491,7 @@ var Upload = (0, import_react52.forwardRef)(
         onChange?.(event.dataTransfer.files);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
       "div",
       {
         ref,
@@ -9309,7 +9522,7 @@ var Upload = (0, import_react52.forwardRef)(
         onDrop: handleDrop,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             "input",
             {
               ref: inputRef,
@@ -9324,8 +9537,8 @@ var Upload = (0, import_react52.forwardRef)(
               ...inputProps
             }
           ),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons18.GeneralUpload, { width: 16, height: 16 }) }),
+          resolvedStyle === "large" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             Typeface,
             {
               className: "aviala-upload__typeface",
@@ -9333,7 +9546,7 @@ var Upload = (0, import_react52.forwardRef)(
               primary: title,
               secondary: description
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
         ]
       }
     );
@@ -9343,7 +9556,7 @@ Upload.displayName = "Upload";
 
 // src/components/scroll-picker.tsx
 var import_react53 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var LOOP_SECTIONS2 = 3;
 var MIDDLE_SECTION2 = 1;
 function normalizeIndex2(index, length) {
@@ -9371,7 +9584,7 @@ function fractionalIndexAtScrollTop(metrics, scrollTop) {
   return (scrollTop - metrics.originTop) / metrics.pitch;
 }
 function ScrollPicker({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: cn("aviala-scroll-picker", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
 function ScrollPickerColumn({
   className,
@@ -9568,9 +9781,9 @@ function ScrollPickerColumn({
     }
   };
   const selectedOptionId = `${reactId}-${getIndex(value)}`;
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "aviala-scroll-picker-column__viewport", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "div",
       {
         ref: scrollRef,
@@ -9581,12 +9794,12 @@ function ScrollPickerColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime53.jsx)("li", { className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("li", { className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             ScrollPickerItem,
             {
               id: isSelected ? selectedOptionId : optionId,
@@ -9612,7 +9825,7 @@ function ScrollPickerItem({
   className,
   onSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "button",
     {
       type: "button",
@@ -9633,10 +9846,10 @@ function ScrollPickerItem({
 }
 
 // src/components/breadcrumb.tsx
-var import_icons20 = require("@aviala-design/icons");
+var import_icons19 = require("@aviala-design/icons");
 var import_class_variance_authority15 = require("class-variance-authority");
 var import_react54 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var BreadcrumbSizeContext = (0, import_react54.createContext)("default");
 function breadcrumbTypeLevel(size) {
   return size === "small" ? "caption" : "text";
@@ -9655,7 +9868,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_runtime54.jsx)(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "nav",
       {
         ref,
@@ -9663,7 +9876,7 @@ var Breadcrumb = (0, import_react54.forwardRef)(
         className: cn(breadcrumbVariants({ size: resolvedSize }), className),
         "data-size": resolvedSize,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ol", { className: "aviala-breadcrumb__list", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("ol", { className: "aviala-breadcrumb__list", children })
       }
     ) });
   }
@@ -9672,9 +9885,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_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)(
+    const label = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
+      children != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         Typography,
         {
           level: breadcrumbTypeLevel(size),
@@ -9684,13 +9897,13 @@ var BreadcrumbItem = (0, import_react54.forwardRef)(
         }
       ) : null
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "li",
       {
         ref,
         className: cn("aviala-breadcrumb-item-wrap", className),
         ...props,
-        children: href != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        children: href != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "a",
           {
             href,
@@ -9699,7 +9912,7 @@ var BreadcrumbItem = (0, import_react54.forwardRef)(
             "aria-current": current ? "page" : void 0,
             children: label
           }
-        ) : onClick != null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        ) : onClick != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "button",
           {
             type: "button",
@@ -9709,7 +9922,7 @@ var BreadcrumbItem = (0, import_react54.forwardRef)(
             onClick,
             children: label
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "span",
           {
             className: "aviala-breadcrumb-item",
@@ -9726,7 +9939,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_runtime54.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "li",
       {
         ref,
@@ -9734,7 +9947,7 @@ var BreadcrumbSeparator = (0, import_react54.forwardRef)(
         "aria-hidden": true,
         className: cn("aviala-breadcrumb-separator", className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
       }
     );
   }
@@ -9749,12 +9962,12 @@ var BreadcrumbEllipsisItem = (0, import_react54.forwardRef)(
     children,
     ...props
   }, ref) => {
-    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
+    const content = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
+      showChevron ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons19.DirectionArrowRightLight, { width: 14, height: 14, thickness: "Light" }) }) : null
     ] });
     if (href != null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "a",
         {
           ref,
@@ -9766,7 +9979,7 @@ var BreadcrumbEllipsisItem = (0, import_react54.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "button",
       {
         ref,
@@ -9804,8 +10017,8 @@ var BreadcrumbEllipsis = (0, import_react54.forwardRef)(
       [isControlled, onActivatedChange]
     );
     const iconSize = 14;
-    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)(
+    const icon = children ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons19.SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
+    const trigger = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "button",
       {
         type: "button",
@@ -9824,9 +10037,9 @@ var BreadcrumbEllipsis = (0, import_react54.forwardRef)(
         children: icon
       }
     );
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Popover, { open: activated, onOpenChange: setActivated, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         PopoverContent,
         {
           className: "aviala-breadcrumb-ellipsis-menu",
@@ -9835,7 +10048,7 @@ var BreadcrumbEllipsis = (0, import_react54.forwardRef)(
           sideOffset: 7,
           showArrow: false,
           role: "menu",
-          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
+          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
         }
       )
     ] }) : trigger });
@@ -9845,7 +10058,7 @@ BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
 // src/components/pagehead.tsx
 var import_react55 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var Pagehead = (0, import_react55.forwardRef)(
   ({
     className,
@@ -9856,25 +10069,25 @@ var Pagehead = (0, import_react55.forwardRef)(
     actions,
     children,
     ...props
-  }, 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,
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "aviala-pagehead__main", children: [
+      back != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aviala-pagehead__back", children: back }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "aviala-pagehead__title-block", children: [
+        breadcrumb != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
+        title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
         children
       ] })
     ] }),
-    actions != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "aviala-pagehead__actions", children: actions }) : null
+    actions != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "aviala-pagehead__actions", children: actions }) : null
   ] })
 );
 Pagehead.displayName = "Pagehead";
 
 // src/components/steps.tsx
-var import_icons21 = require("@aviala-design/icons");
+var import_icons20 = require("@aviala-design/icons");
 var import_class_variance_authority16 = require("class-variance-authority");
 var import_react56 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var stepsVariants = (0, import_class_variance_authority16.cva)("aviala-steps", {
   variants: {
     direction: {
@@ -9887,7 +10100,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_runtime56.jsx)(
+  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       ref,
@@ -9902,20 +10115,20 @@ Steps.displayName = "Steps";
 function defaultStepsIconContent(state, index) {
   switch (state) {
     case "done":
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons21.SymbolRight, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons20.SymbolRight, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "fail":
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons21.SymbolWrong, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons20.SymbolWrong, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons21.SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons20.SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "waiting":
     case "inProgress":
     case "default":
     default:
-      return index != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
+      return index != null ? /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime56.jsx)(
+  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "span",
     {
       ref,
@@ -9937,7 +10150,7 @@ var StepsItem = (0, import_react56.forwardRef)(
     icon,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
       ref,
@@ -9945,9 +10158,9 @@ var StepsItem = (0, import_react56.forwardRef)(
       "data-state": state,
       ...props,
       children: [
-        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)(
+        icon ?? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StepsIcon, { state, index }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-steps-item__body", children: [
+          title != null ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Typography,
             {
               level: "subtitle",
@@ -9956,7 +10169,7 @@ var StepsItem = (0, import_react56.forwardRef)(
               children: title
             }
           ) : null,
-          description != null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          description != null ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Typography,
             {
               level: "text",
@@ -9974,9 +10187,9 @@ var StepsItem = (0, import_react56.forwardRef)(
 StepsItem.displayName = "StepsItem";
 
 // src/components/pagination.tsx
-var import_icons22 = require("@aviala-design/icons");
+var import_icons21 = require("@aviala-design/icons");
 var import_react57 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function buildPageList(page, pageCount) {
   if (pageCount <= 7) {
     return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -10051,7 +10264,7 @@ var Pagination = (0, import_react57.forwardRef)(
       setPage(parsed);
       setJumpValue("");
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
       "div",
       {
         ref,
@@ -10060,8 +10273,8 @@ var Pagination = (0, import_react57.forwardRef)(
         "aria-label": props["aria-label"] ?? "Pagination",
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "aviala-pagination__controls", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "aviala-pagination__controls", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10069,18 +10282,18 @@ var Pagination = (0, import_react57.forwardRef)(
                 iconOnly: true,
                 "aria-label": "Previous page",
                 disabled: currentPage <= 1,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons22.DirectionArrowLeftLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons21.DirectionArrowLeftLight, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage - 1)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-pagination__pages", children: pages.map(
-              (item, index) => item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-pagination__pages", children: pages.map(
+              (item, index) => item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
                 Popover,
                 {
                   open: openEllipsis === index,
                   onOpenChange: (open) => setOpenEllipsis(open ? index : null),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                       "button",
                       {
                         type: "button",
@@ -10091,10 +10304,10 @@ var Pagination = (0, import_react57.forwardRef)(
                         ),
                         "aria-label": "\u66F4\u591A\u9875\u7801",
                         "aria-haspopup": "menu",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typography, { level: "text", as: "span", children: "\u2026" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: "\u2026" })
                       }
                     ) }),
-                    /* @__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)(
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                       "button",
                       {
                         type: "button",
@@ -10107,14 +10320,14 @@ var Pagination = (0, import_react57.forwardRef)(
                           setPage(p);
                           setOpenEllipsis(null);
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Typography, { level: "text", as: "span", children: p })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: p })
                       },
                       p
                     )) }) })
                   ]
                 },
                 `ellipsis-${index}`
-              ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 "button",
                 {
                   type: "button",
@@ -10126,12 +10339,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_runtime57.jsx)(Typography, { level: "text", as: "span", children: item })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: item })
                 },
                 item
               )
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10139,14 +10352,14 @@ var Pagination = (0, import_react57.forwardRef)(
                 iconOnly: true,
                 "aria-label": "Next page",
                 disabled: currentPage >= safePageCount,
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons22.DirectionArrowRightLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons21.DirectionArrowRightLight, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage + 1)
               }
             )
           ] }),
-          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)(
+          showJump ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "aviala-pagination__jump", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: jumpLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               Input,
               {
                 className: "aviala-pagination__jump-input",
@@ -10166,15 +10379,15 @@ var Pagination = (0, import_react57.forwardRef)(
               }
             )
           ] }) : null,
-          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)(
+          showSizeChanger ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "aviala-pagination__size", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Typography, { level: "text", as: "span", children: sizeLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
               Select,
               {
                 value: String(pageSize),
                 onValueChange: (value) => setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                     SelectTrigger,
                     {
                       size: "regular",
@@ -10182,7 +10395,7 @@ var Pagination = (0, import_react57.forwardRef)(
                       "aria-label": "Page size"
                     }
                   ),
-                  /* @__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)(
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                     SelectItem,
                     {
                       value: String(option),
@@ -10203,11 +10416,11 @@ var Pagination = (0, import_react57.forwardRef)(
 Pagination.displayName = "Pagination";
 
 // src/components/card.tsx
-var import_icons23 = require("@aviala-design/icons");
+var import_icons22 = require("@aviala-design/icons");
 var import_react58 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Card = (0, import_react58.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref, className: cn("aviala-card", className), ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ref, className: cn("aviala-card", className), ...props, children })
 );
 Card.displayName = "Card";
 function renderCardIcon(node) {
@@ -10220,7 +10433,7 @@ function renderCardIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-card-head__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-card-head__icon", children: content });
 }
 var CardHead = (0, import_react58.forwardRef)(
   ({
@@ -10238,38 +10451,38 @@ var CardHead = (0, import_react58.forwardRef)(
     children,
     ...props
   }, ref) => {
-    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 primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons22.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (slotType) {
         case "action":
-          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons22.GeneralSetting, { "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 })
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons22.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
           ] });
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Switch, { ...switchProps })
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return select != null ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-card-head__trailing", children: select }) : null;
+          return select != null ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "aviala-card-head__trailing", children: select }) : null;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
       "div",
       {
         ref,
@@ -10277,9 +10490,9 @@ var CardHead = (0, import_react58.forwardRef)(
         "data-type": slotType,
         ...props,
         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 })
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "aviala-card-head__main", children: [
+            renderCardIcon(icon ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons22.GeneralSetting, { "aria-hidden": true })),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
           ] }),
           renderTrailing()
         ]
@@ -10289,7 +10502,7 @@ var CardHead = (0, import_react58.forwardRef)(
 );
 CardHead.displayName = "CardHead";
 var CardBody = (0, import_react58.forwardRef)(
-  ({ 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 }) })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Typography, { level: "text", as: "span", children }) : children }) })
 );
 CardBody.displayName = "CardBody";
 var CardBottom = (0, import_react58.forwardRef)(
@@ -10305,46 +10518,46 @@ var CardBottom = (0, import_react58.forwardRef)(
     children,
     ...props
   }, ref) => {
-    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 primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons22.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_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
             primaryAction,
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Switch, { ...switchProps })
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Switch, { ...switchProps })
           ] });
         case "select":
           return select;
         case "action":
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            secondaryAction ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons23.GeneralSetting, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons22.GeneralSetting, { "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 })
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons22.DirectionArrowRightLight, { width: 14, height: 14, "aria-hidden": true })
           ] });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "div",
       {
         ref,
         className: cn("aviala-card-bottom", className),
         "data-type": slotType,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
       }
     );
   }
@@ -10353,9 +10566,9 @@ CardBottom.displayName = "CardBottom";
 
 // src/components/table.tsx
 var import_react59 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var Table = (0, import_react59.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
       ref,
@@ -10368,7 +10581,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_runtime59.jsx)(
+  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
       ref,
@@ -10382,7 +10595,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_runtime59.jsx)(
+  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
       ref,
@@ -10390,7 +10603,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_runtime59.jsx)(Typography, { level: "caption", as: "span", children }) : children
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Typography, { level: "caption", as: "span", children }) : children
     }
   )
 );
@@ -10405,7 +10618,7 @@ function renderCellIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "aviala-table-cell__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "aviala-table-cell__icon", children: content });
 }
 var TableCell = (0, import_react59.forwardRef)(
   ({
@@ -10426,29 +10639,29 @@ var TableCell = (0, import_react59.forwardRef)(
       if (children != null) return children;
       switch (content) {
         case "checkbox":
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Checkbox, { ...checkboxProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Checkbox, { ...checkboxProps });
         case "icon+text":
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
             renderCellIcon(icon),
-            /* @__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 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "people":
-          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 }) })
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+            people ?? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Avatar, { content: "text", level: "text", children: "A" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "badge":
-          return badge ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
+          return badge ?? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
         case "switch":
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Switch, { ...switchProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Switch, { ...switchProps });
         case "action":
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "aviala-table-cell__actions", children: actions });
+          return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "aviala-table-cell__actions", children: actions });
         case "text":
         default:
-          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_runtime60.jsx)("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Typography, { level: "text", as: "span", children: text }) });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "div",
       {
         ref,