@aviala-design/spiral 2.4.0 → 2.5.0

package/dist/index.js

@@ -2738,11 +2738,12 @@ Scroll.displayName = "Scroll";
 
 // src/components/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { SymbolRight as SymbolRight2 } from "@aviala-design/icons";
 import {
   cloneElement as cloneElement5,
   forwardRef as forwardRef16,
-  isValidElement as isValidElement10
+  isValidElement as isValidElement10,
+  useEffect as useEffect3,
+  useState as useState6
 } from "react";
 
 // src/components/typeface.tsx
@@ -2826,42 +2827,71 @@ var TypefacePair = forwardRef15(
 );
 TypefacePair.displayName = "TypefacePair";
 
+// src/components/checkbox-check-icon.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function CheckboxCheckIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx18(
+    "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__ */ jsx18(
+        "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
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var Checkbox = forwardRef16(({ className, round = false, ...props }, ref) => /* @__PURE__ */ jsxs11(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    className: cn("aviala-checkbox aviala-focus-ring", className),
-    "data-round": round ? "true" : void 0,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx18("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
-      /* @__PURE__ */ jsxs11(CheckboxPrimitive.Indicator, { className: "aviala-checkbox__indicator", children: [
-        /* @__PURE__ */ jsx18(
-          SymbolRight2,
-          {
-            className: "aviala-checkbox__indicator-icon aviala-checkbox__indicator-icon--check",
-            thickness: "Bold",
-            width: 12,
-            height: 12,
-            "aria-hidden": true
-          }
-        ),
-        /* @__PURE__ */ jsx18(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "aviala-checkbox__indeterminate-mark aviala-checkbox__indicator-icon--indeterminate"
-          }
-        )
-      ] })
-    ]
-  }
-));
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var Checkbox = forwardRef16(({ className, round = false, size = "default", ...props }, ref) => {
+  const [motionReady, setMotionReady] = useState6(false);
+  useEffect3(() => {
+    const id = requestAnimationFrame(() => setMotionReady(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  return /* @__PURE__ */ jsxs11(
+    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__ */ jsx19("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
+        /* @__PURE__ */ jsxs11(CheckboxPrimitive.Indicator, { forceMount: true, className: "aviala-checkbox__indicator", children: [
+          /* @__PURE__ */ jsx19(CheckboxCheckIcon, { className: "aviala-checkbox__indicator-icon aviala-checkbox__indicator-icon--check" }),
+          /* @__PURE__ */ jsx19(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "aviala-checkbox__indeterminate-mark aviala-checkbox__indicator-icon--indeterminate"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 var CheckboxGroup = forwardRef16(
-  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx18(
+  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx19(
     "div",
     {
       ref,
@@ -2883,7 +2913,7 @@ function renderIcon3(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx18("span", { className: "aviala-checkbox-input__icon", children: content });
+  return /* @__PURE__ */ jsx19("span", { className: "aviala-checkbox-input__icon", children: content });
 }
 var CheckboxInput = forwardRef16(
   ({
@@ -2901,9 +2931,9 @@ var CheckboxInput = forwardRef16(
       className: cn("aviala-checkbox-input", className),
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx18(Checkbox, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ jsx19(Checkbox, { ref, id, disabled, ...props }),
         renderIcon3(icon),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           TypefacePair,
           {
             className: "aviala-checkbox-input__content min-w-0 flex-1",
@@ -2924,8 +2954,8 @@ import {
   forwardRef as forwardRef17,
   isValidElement as isValidElement11
 } from "react";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
-var RadioGroup = forwardRef17(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx19(
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var RadioGroup = forwardRef17(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx20(
   RadioGroupPrimitive.Root,
   {
     className: cn("aviala-radio-group", className),
@@ -2942,8 +2972,8 @@ var RadioGroupItem = forwardRef17(({ className, ...props }, ref) => /* @__PURE__
     className: cn("aviala-radio aviala-focus-ring", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx19("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
-      /* @__PURE__ */ jsx19("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
+      /* @__PURE__ */ jsx20("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
+      /* @__PURE__ */ jsx20("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
     ]
   }
 ));
@@ -2959,7 +2989,7 @@ function renderIcon4(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx19("span", { className: "aviala-radio-input__icon", children: content });
+  return /* @__PURE__ */ jsx20("span", { className: "aviala-radio-input__icon", children: content });
 }
 var RadioInput = forwardRef17(
   ({
@@ -2979,9 +3009,9 @@ var RadioInput = forwardRef17(
       "data-style": variant,
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx19(RadioGroupItem, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ jsx20(RadioGroupItem, { ref, id, disabled, ...props }),
         renderIcon4(icon),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           TypefacePair,
           {
             className: "aviala-radio-input__content min-w-0 flex-1",
@@ -2998,7 +3028,7 @@ RadioInput.displayName = "RadioInput";
 // src/components/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var Switch = forwardRef18(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ jsxs13(
   SwitchPrimitive.Root,
   {
@@ -3010,8 +3040,8 @@ var Switch = forwardRef18(({ className, size = "regular", ...props }, ref) => /*
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx20("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
-      /* @__PURE__ */ jsx20(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
+      /* @__PURE__ */ jsx21("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
+      /* @__PURE__ */ jsx21(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
     ]
   }
 ));
@@ -3022,9 +3052,9 @@ import { Slot as Slot4 } from "@radix-ui/react-slot";
 import {
   forwardRef as forwardRef19
 } from "react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var Anchor2 = forwardRef19(
-  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ jsx21(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
+  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ jsx22(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
 );
 Anchor2.displayName = "Anchor";
 var AnchorItem = forwardRef19(
@@ -3046,8 +3076,8 @@ var AnchorItem = forwardRef19(
         "data-indent": String(indentLevel),
         ...props,
         children: [
-          /* @__PURE__ */ jsx21("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
-          /* @__PURE__ */ jsx21("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ jsx21(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
+          /* @__PURE__ */ jsx22("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
+          /* @__PURE__ */ jsx22("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ jsx22(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
         ]
       }
     );
@@ -3061,13 +3091,13 @@ import {
   forwardRef as forwardRef20,
   useCallback as useCallback4,
   useContext as useContext3,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo3,
   useRef as useRef4,
-  useState as useState6
+  useState as useState7
 } from "react";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var SegmentatorContext = createContext3(null);
 function useSegmentatorContext() {
   const ctx = useContext3(SegmentatorContext);
@@ -3082,7 +3112,7 @@ function renderIcon5(node, dimmed) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "span",
     {
       className: cn(
@@ -3094,7 +3124,7 @@ function renderIcon5(node, dimmed) {
   );
 }
 function useSegmentatorState(value, defaultValue, onValueChange) {
-  const [internal, setInternal] = useState6(defaultValue ?? "");
+  const [internal, setInternal] = useState7(defaultValue ?? "");
   const isControlled = value !== void 0;
   const current = isControlled ? value : internal;
   const setValue = useCallback4(
@@ -3162,12 +3192,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();
@@ -3246,7 +3288,7 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
   const thumbElRef = useRef4(null);
   const metricsRef = useRef4(null);
   const dragStateRef = useRef4(dragState);
-  const [thumb, setThumb] = useState6(null);
+  const [thumb, setThumb] = useState7(null);
   const isInitialMount = useRef4(true);
   dragStateRef.current = dragState;
   const measureThumb = useCallback4(() => {
@@ -3256,14 +3298,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 = useCallback4(
     (metrics, instant = false) => {
@@ -3302,6 +3337,19 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
   }, []);
   useLayoutEffect2(() => {
     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;
@@ -3330,18 +3378,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]);
   useLayoutEffect2(() => {
     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,
@@ -3350,9 +3408,10 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
     return () => {
       observer.disconnect();
       layoutObserver.disconnect();
+      group.removeEventListener("scroll", onScroll);
     };
   }, [groupRef, remeasureThumb]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!layoutKey) return;
     const frame = requestAnimationFrame(() => {
       remeasureThumb();
@@ -3379,7 +3438,7 @@ var SegmentatorGroup = forwardRef20(
     const layoutKey = useThemeLayoutKey();
     const consumeClickRef = useRef4(false);
     const pointerDragRef = useRef4(null);
-    const [dragState, setDragState] = useState6({
+    const [dragState, setDragState] = useState7({
       pressing: false,
       active: false
     });
@@ -3506,6 +3565,7 @@ var SegmentatorGroup = forwardRef20(
     );
     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;
@@ -3531,7 +3591,7 @@ var SegmentatorGroup = forwardRef20(
       group.setPointerCapture(event.pointerId);
     };
     const thumbStyle = thumb ? buildThumbStyle() : void 0;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       SegmentatorContext.Provider,
       {
         value: useMemo3(
@@ -3567,7 +3627,7 @@ var SegmentatorGroup = forwardRef20(
             onLostPointerCapture: finishPointerDrag,
             children: [
               children,
-              thumb && /* @__PURE__ */ jsx22(
+              thumb && /* @__PURE__ */ jsx23(
                 "span",
                 {
                   ref: onThumbRef,
@@ -3605,7 +3665,7 @@ var SegmentatorItem = forwardRef20(
     const isDisabled = disabled || ctx.disabled;
     const dimmed = isDisabled;
     const icon = iconOnly ? leftIcon ?? rightIcon : leftIcon;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       "button",
       {
         ref,
@@ -3629,7 +3689,7 @@ var SegmentatorItem = forwardRef20(
         ...props,
         children: /* @__PURE__ */ jsxs15("span", { className: "aviala-segmentator-item__content", children: [
           renderIcon5(icon, dimmed && !!icon),
-          !iconOnly && /* @__PURE__ */ jsx22(
+          !iconOnly && /* @__PURE__ */ jsx23(
             "span",
             {
               className: cn(
@@ -3651,7 +3711,7 @@ SegmentatorItem.displayName = "SegmentatorItem";
 // src/components/form-field.tsx
 import { SymbolInformationCircle, SymbolWrongCircle } from "@aviala-design/icons";
 import { forwardRef as forwardRef21, useId as useId2 } from "react";
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var FormField = forwardRef21(
   ({
     className,
@@ -3669,18 +3729,18 @@ var FormField = forwardRef21(
     const reactId = useId2();
     const labelId = `${reactId}-label`;
     const hasLabel = label != null && label !== "";
-    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ jsx23("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ jsx23(
+    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ jsx24("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ jsx24(
       Typeface,
       {
         id: labelId,
         content: "textCaption",
         primary: hasLabel ? /* @__PURE__ */ jsxs16(Fragment3, { children: [
           label,
-          required ? /* @__PURE__ */ jsx23("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+          required ? /* @__PURE__ */ jsx24("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
         ] }) : void 0,
         secondary: description
       }
-    ) }) : /* @__PURE__ */ jsx23(
+    ) }) : /* @__PURE__ */ jsx24(
       Typeface,
       {
         id: labelId,
@@ -3688,7 +3748,7 @@ var FormField = forwardRef21(
         content: "textCaption",
         primary: hasLabel ? /* @__PURE__ */ jsxs16(Fragment3, { children: [
           label,
-          required ? /* @__PURE__ */ jsx23("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+          required ? /* @__PURE__ */ jsx24("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
         ] }) : void 0,
         secondary: description
       }
@@ -3706,7 +3766,7 @@ var FormField = forwardRef21(
           /* @__PURE__ */ jsxs16("div", { className: "aviala-form__content", children: [
             children,
             error ? /* @__PURE__ */ jsxs16("div", { className: "aviala-form__message aviala-form__message--error", role: "alert", children: [
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 SymbolWrongCircle,
                 {
                   className: "aviala-form__message-icon",
@@ -3715,10 +3775,10 @@ var FormField = forwardRef21(
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsx23(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
+              /* @__PURE__ */ jsx24(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
             ] }) : null,
             info ? /* @__PURE__ */ jsxs16("div", { className: "aviala-form__message aviala-form__message--info", children: [
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 SymbolInformationCircle,
                 {
                   className: "aviala-form__message-icon",
@@ -3727,9 +3787,9 @@ var FormField = forwardRef21(
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsx23(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
+              /* @__PURE__ */ jsx24(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
             ] }) : null,
-            alert ? /* @__PURE__ */ jsx23("div", { className: "aviala-form__alert", children: alert }) : null
+            alert ? /* @__PURE__ */ jsx24("div", { className: "aviala-form__alert", children: alert }) : null
           ] })
         ]
       }
@@ -3740,9 +3800,9 @@ FormField.displayName = "FormField";
 
 // src/components/input-group.tsx
 import { forwardRef as forwardRef22 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var InputGroup = forwardRef22(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx24(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx25(
     "div",
     {
       ref,
@@ -3756,7 +3816,7 @@ var InputGroup = forwardRef22(
   )
 );
 InputGroup.displayName = "InputGroup";
-var InputGroupAddon = forwardRef22(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var InputGroupAddon = forwardRef22(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
   "div",
   {
     ref,
@@ -3772,7 +3832,7 @@ InputGroupAddon.displayName = "InputGroupAddon";
 
 // src/components/stack.tsx
 import { forwardRef as forwardRef23, useId as useId3 } from "react";
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var gapMap = {
   inside: "var(--gap-inside, 4px)",
   component: "var(--gap-component, 8px)",
@@ -3781,7 +3841,7 @@ var gapMap = {
   page: "var(--gap-page-space, 24px)"
 };
 var Stack = forwardRef23(
-  ({ className, gap = "component", direction = "column", style, ...props }, ref) => /* @__PURE__ */ jsx25(
+  ({ className, gap = "component", direction = "column", style, ...props }, ref) => /* @__PURE__ */ jsx26(
     "div",
     {
       ref,
@@ -3817,7 +3877,7 @@ var Fieldset = forwardRef23(
         "aria-labelledby": hasHeading ? headingId : void 0,
         ...props,
         children: [
-          hasHeading || description ? /* @__PURE__ */ jsx25(
+          hasHeading || description ? /* @__PURE__ */ jsx26(
             Typeface,
             {
               id: headingId,
@@ -3827,11 +3887,11 @@ var Fieldset = forwardRef23(
               secondary: description
             }
           ) : null,
-          /* @__PURE__ */ jsx25("div", { className: "aviala-form-group__slot", children }),
+          /* @__PURE__ */ jsx26("div", { className: "aviala-form-group__slot", children }),
           hasAction ? /* @__PURE__ */ jsxs17("div", { className: "aviala-form-group__action", children: [
-            info ? /* @__PURE__ */ jsx25("div", { className: "aviala-form-group__info", children: info }) : null,
-            feedback ? /* @__PURE__ */ jsx25("div", { className: "aviala-form-group__feedback", children: feedback }) : null,
-            actions ? /* @__PURE__ */ jsx25("div", { className: "aviala-form-group__actions", children: actions }) : null
+            info ? /* @__PURE__ */ jsx26("div", { className: "aviala-form-group__info", children: info }) : null,
+            feedback ? /* @__PURE__ */ jsx26("div", { className: "aviala-form-group__feedback", children: feedback }) : null,
+            actions ? /* @__PURE__ */ jsx26("div", { className: "aviala-form-group__actions", children: actions }) : null
           ] }) : null
         ]
       }
@@ -3844,7 +3904,7 @@ Fieldset.displayName = "Fieldset";
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 import {
   forwardRef as forwardRef25,
-  useState as useState9
+  useState as useState10
 } from "react";
 
 // src/components/color-picker/color-picker-area.tsx
@@ -3963,7 +4023,7 @@ function usePointerDrag(ref, onMove, enabled = true) {
 }
 
 // src/components/color-picker/use-color-picker-state.ts
-import { useCallback as useCallback6, useMemo as useMemo4, useState as useState7 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo4, useState as useState8 } from "react";
 function useColorPickerState({
   value: controlledValue,
   defaultValue = DEFAULT_COLOR,
@@ -3972,8 +4032,8 @@ function useColorPickerState({
   defaultFormat = "hex",
   onFormatChange
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = useState7(defaultValue);
-  const [uncontrolledFormat, setUncontrolledFormat] = useState7(defaultFormat);
+  const [uncontrolledValue, setUncontrolledValue] = useState8(defaultValue);
+  const [uncontrolledFormat, setUncontrolledFormat] = useState8(defaultFormat);
   const value = controlledValue ?? uncontrolledValue;
   const format = controlledFormat ?? uncontrolledFormat;
   const setValue = useCallback6(
@@ -4006,7 +4066,7 @@ function useColorPickerState({
 }
 
 // src/components/color-picker/color-picker-area.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 function ColorPickerArea({
   className,
   disabled,
@@ -4038,7 +4098,7 @@ function ColorPickerArea({
   );
   const { handlePointerDown, handlePointerMove } = usePointerDrag(ref, handleMove, !isDisabled);
   const hueColor = pureHueHex(hsva.h);
-  return /* @__PURE__ */ jsx26("div", { className: cn("aviala-color-picker-area", className), ...spiralDebugId("color-picker.content.area"), children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx27("div", { className: cn("aviala-color-picker-area", className), ...spiralDebugId("color-picker.content.area"), children: /* @__PURE__ */ jsxs18(
     "div",
     {
       ref,
@@ -4053,9 +4113,9 @@ function ColorPickerArea({
       "aria-valuenow": Math.round(hsva.s),
       tabIndex: isDisabled ? -1 : 0,
       children: [
-        /* @__PURE__ */ jsx26("div", { className: "aviala-color-picker-area__white", "aria-hidden": true }),
-        /* @__PURE__ */ jsx26("div", { className: "aviala-color-picker-area__black", "aria-hidden": true }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27("div", { className: "aviala-color-picker-area__white", "aria-hidden": true }),
+        /* @__PURE__ */ jsx27("div", { className: "aviala-color-picker-area__black", "aria-hidden": true }),
+        /* @__PURE__ */ jsx27(
           "div",
           {
             className: "aviala-color-picker-area__thumb",
@@ -4073,8 +4133,8 @@ function ColorPickerArea({
 
 // src/components/color-picker/color-picker-inputs.tsx
 import { EditColorPicker } from "@aviala-design/icons";
-import { useCallback as useCallback8, useEffect as useEffect4, useState as useState8 } from "react";
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useEffect as useEffect5, useState as useState9 } from "react";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function ColorPickerInputs({
   className,
   disabled,
@@ -4096,10 +4156,10 @@ function ColorPickerInputs({
   const { value, setValue, format, setFormat, hsva } = ctx ?? local;
   const isDisabled = disabled ?? ctx?.disabled;
   const eyeDropperSupported = typeof window !== "undefined" && "EyeDropper" in window;
-  const [hexDraft, setHexDraft] = useState8(() => toHexInput(value));
-  const [alphaDraft, setAlphaDraft] = useState8(() => String(alphaPercent(value)));
-  const [componentDraft, setComponentDraft] = useState8(() => buildComponentDraft(value, format));
-  useEffect4(() => {
+  const [hexDraft, setHexDraft] = useState9(() => toHexInput(value));
+  const [alphaDraft, setAlphaDraft] = useState9(() => String(alphaPercent(value)));
+  const [componentDraft, setComponentDraft] = useState9(() => buildComponentDraft(value, format));
+  useEffect5(() => {
     setHexDraft(toHexInput(value));
     setAlphaDraft(String(alphaPercent(value)));
     setComponentDraft(buildComponentDraft(value, format));
@@ -4135,7 +4195,7 @@ function ColorPickerInputs({
     }
   }, [eyeDropperSupported, isDisabled, setValue]);
   return /* @__PURE__ */ jsxs19("div", { className: cn("aviala-color-picker-inputs", className), ...spiralDebugId("color-picker.content.inputs"), children: [
-    showEyedropper ? /* @__PURE__ */ jsx27(
+    showEyedropper ? /* @__PURE__ */ jsx28(
       Button,
       {
         type: "button",
@@ -4147,12 +4207,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__ */ jsx27(EditColorPicker, { "aria-hidden": true })
+        children: /* @__PURE__ */ jsx28(EditColorPicker, { "aria-hidden": true })
       }
     ) : null,
     format === "hex" ? /* @__PURE__ */ jsxs19("div", { className: "aviala-color-picker-field", children: [
-      /* @__PURE__ */ jsx27("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx27(Badge, { style: "normal", children: "#" }) }),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx28("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx28(Badge, { style: "normal", children: "#" }) }),
+      /* @__PURE__ */ jsx28(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4164,7 +4224,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitHex()
         }
       )
-    ] }) : /* @__PURE__ */ jsx27("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ jsx27(
+    ] }) : /* @__PURE__ */ jsx28("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ jsx28(
       "input",
       {
         className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4177,7 +4237,7 @@ function ColorPickerInputs({
       }
     ) }),
     /* @__PURE__ */ jsxs19("div", { className: "aviala-color-picker-field aviala-color-picker-field--alpha", children: [
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx28(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -4190,7 +4250,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitAlpha()
         }
       ),
-      /* @__PURE__ */ jsx27("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx27(Badge, { style: "normal", children: "%" }) })
+      /* @__PURE__ */ jsx28("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx28(Badge, { style: "normal", children: "%" }) })
     ] }),
     /* @__PURE__ */ jsxs19(
       Select,
@@ -4199,11 +4259,11 @@ function ColorPickerInputs({
         onValueChange: (next) => setFormat(next),
         disabled: isDisabled,
         children: [
-          /* @__PURE__ */ jsx27(SelectTrigger, { className: "aviala-color-picker-format-select w-[76px] shrink-0", size: "regular", children: /* @__PURE__ */ jsx27(SelectValue, {}) }),
-          /* @__PURE__ */ jsx27(SelectContent, { onCloseAutoFocus: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs19(SelectItemGroup, { children: [
-            /* @__PURE__ */ jsx27(SelectItem, { value: "hex", itemFunction: "radio", children: "HEX" }),
-            /* @__PURE__ */ jsx27(SelectItem, { value: "rgb", itemFunction: "radio", children: "RGB" }),
-            /* @__PURE__ */ jsx27(SelectItem, { value: "hsl", itemFunction: "radio", children: "HSL" })
+          /* @__PURE__ */ jsx28(SelectTrigger, { className: "aviala-color-picker-format-select w-[76px] shrink-0", size: "regular", children: /* @__PURE__ */ jsx28(SelectValue, {}) }),
+          /* @__PURE__ */ jsx28(SelectContent, { onCloseAutoFocus: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs19(SelectItemGroup, { children: [
+            /* @__PURE__ */ jsx28(SelectItem, { value: "hex", itemFunction: "radio", children: "HEX" }),
+            /* @__PURE__ */ jsx28(SelectItem, { value: "rgb", itemFunction: "radio", children: "RGB" }),
+            /* @__PURE__ */ jsx28(SelectItem, { value: "hsl", itemFunction: "radio", children: "HSL" })
           ] }) })
         ]
       }
@@ -4227,11 +4287,11 @@ import { SymbolAdd } from "@aviala-design/icons";
 
 // src/components/color-picker/color-pick-button.tsx
 import { forwardRef as forwardRef24 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var ColorPickButton = forwardRef24(
   ({ className, color, selected = false, style, ...props }, ref) => {
     const swatch = parseColor(color).toHex();
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       "button",
       {
         ref,
@@ -4240,7 +4300,7 @@ var ColorPickButton = forwardRef24(
         "data-selected": selected ? "true" : void 0,
         style,
         ...props,
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx29(
           "span",
           {
             className: "aviala-color-pick-button__swatch",
@@ -4255,7 +4315,7 @@ var ColorPickButton = forwardRef24(
 ColorPickButton.displayName = "ColorPickButton";
 
 // src/components/color-picker/color-picker-presets.tsx
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function ColorPickerPresets({
   className,
   presets: presetsProp,
@@ -4278,7 +4338,7 @@ function ColorPickerPresets({
     onPresetsChange(next);
   };
   return /* @__PURE__ */ jsxs20("div", { className: cn("aviala-color-picker-presets", className), ...spiralDebugId("color-picker.content.presets"), children: [
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       Button,
       {
         type: "button",
@@ -4288,10 +4348,10 @@ function ColorPickerPresets({
         disabled: isDisabled || !onPresetsChange || presets.length >= maxPresets,
         "aria-label": "Add current color to presets",
         onClick: handleAdd,
-        children: /* @__PURE__ */ jsx29(SymbolAdd, { "aria-hidden": true })
+        children: /* @__PURE__ */ jsx30(SymbolAdd, { "aria-hidden": true })
       }
     ),
-    presets.map((color) => /* @__PURE__ */ jsx29(
+    presets.map((color) => /* @__PURE__ */ jsx30(
       ColorPickButton,
       {
         color,
@@ -4306,7 +4366,7 @@ function ColorPickerPresets({
 
 // src/components/color-picker/color-picker-slider.tsx
 import { useCallback as useCallback9, useRef as useRef6 } from "react";
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 function ColorPickerSlider({
   kind,
   className,
@@ -4354,7 +4414,7 @@ function ColorPickerSlider({
     backgroundImage: `linear-gradient(90deg, transparent, ${solidHex(value)})`,
     backgroundColor: "var(--color-picker-checkerboard)"
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       className: cn("aviala-color-picker-slider-row", className),
@@ -4373,8 +4433,8 @@ function ColorPickerSlider({
           "aria-valuenow": ariaValueNow,
           tabIndex: isDisabled ? -1 : 0,
           children: [
-            /* @__PURE__ */ jsx30("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx31("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
+            /* @__PURE__ */ jsx31(
               "div",
               {
                 className: "aviala-color-picker-slider__thumb",
@@ -4390,7 +4450,7 @@ function ColorPickerSlider({
 }
 
 // src/components/color-picker/color-picker.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function ColorPicker({
   children,
   className,
@@ -4408,7 +4468,7 @@ function ColorPicker({
   defaultOpen = false,
   onOpenChange
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState9(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState10(defaultOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const handleOpenChange = (next) => {
     if (disabled && next) return;
@@ -4433,17 +4493,17 @@ function ColorPicker({
     onPresetsChange,
     maxPresets
   };
-  return /* @__PURE__ */ jsx31(ColorPickerContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx31(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx31("div", { className: cn("inline-flex", className), ...spiralDebugId("color-picker"), children }) }) });
+  return /* @__PURE__ */ jsx32(ColorPickerContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx32(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx32("div", { className: cn("inline-flex", className), ...spiralDebugId("color-picker"), children }) }) });
 }
 function ColorPickerContextProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx31(ColorPickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx32(ColorPickerContext.Provider, { value, children });
 }
 var ColorPickerTrigger = forwardRef25(({ className, size = "regular", allRound = false, placeholder = "Select color", ...props }, ref) => {
   const { value, open, disabled } = useColorPickerContext();
-  return /* @__PURE__ */ jsx31(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx32(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
     "button",
     {
       ref,
@@ -4457,7 +4517,7 @@ var ColorPickerTrigger = forwardRef25(({ className, size = "regular", allRound =
       disabled,
       ...props,
       children: [
-        /* @__PURE__ */ jsx31("span", { className: "aviala-color-picker-trigger__swatch", ...spiralDebugId("color-picker.trigger.swatch"), children: /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32("span", { className: "aviala-color-picker-trigger__swatch", ...spiralDebugId("color-picker.trigger.swatch"), children: /* @__PURE__ */ jsx32(
           "span",
           {
             className: "aviala-color-picker-trigger__swatch-inner",
@@ -4465,7 +4525,7 @@ var ColorPickerTrigger = forwardRef25(({ className, size = "regular", allRound =
             "aria-hidden": true
           }
         ) }),
-        /* @__PURE__ */ jsx31("span", { className: "aviala-color-picker-trigger__value", ...spiralDebugId("color-picker.trigger.value"), children: value ? value.replace(/^#/, "").slice(0, 6).toUpperCase() : /* @__PURE__ */ jsx31("span", { className: "aviala-color-picker-trigger__placeholder", children: placeholder }) })
+        /* @__PURE__ */ jsx32("span", { className: "aviala-color-picker-trigger__value", ...spiralDebugId("color-picker.trigger.value"), children: value ? value.replace(/^#/, "").slice(0, 6).toUpperCase() : /* @__PURE__ */ jsx32("span", { className: "aviala-color-picker-trigger__placeholder", children: placeholder }) })
       ]
     }
   ) });
@@ -4484,7 +4544,7 @@ var ColorPickerContent = forwardRef25(
     ...props
   }, ref) => {
     const { presets, onPresetsChange, maxPresets, disabled } = useColorPickerContext();
-    return /* @__PURE__ */ jsx31(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx32(
       PopoverPrimitive2.Content,
       {
         ref,
@@ -4501,11 +4561,11 @@ var ColorPickerContent = forwardRef25(
         onFocusOutside: (event) => event.preventDefault(),
         ...props,
         children: /* @__PURE__ */ jsxs22("div", { className: "aviala-color-picker-panel", children: [
-          /* @__PURE__ */ jsx31(ColorPickerArea, { disabled }),
-          /* @__PURE__ */ jsx31(ColorPickerSlider, { kind: "hue", disabled }),
-          /* @__PURE__ */ jsx31(ColorPickerSlider, { kind: "alpha", disabled }),
-          /* @__PURE__ */ jsx31(ColorPickerInputs, { disabled, showEyedropper }),
-          showPresets ? /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(ColorPickerArea, { disabled }),
+          /* @__PURE__ */ jsx32(ColorPickerSlider, { kind: "hue", disabled }),
+          /* @__PURE__ */ jsx32(ColorPickerSlider, { kind: "alpha", disabled }),
+          /* @__PURE__ */ jsx32(ColorPickerInputs, { disabled, showEyedropper }),
+          showPresets ? /* @__PURE__ */ jsx32(
             ColorPickerPresets,
             {
               disabled,
@@ -4522,7 +4582,7 @@ var ColorPickerContent = forwardRef25(
 ColorPickerContent.displayName = "ColorPickerContent";
 
 // src/components/color-picker/color-picker-panel.tsx
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function ColorPickerPanel({
   className,
   disabled,
@@ -4554,12 +4614,12 @@ function ColorPickerPanel({
     onPresetsChange,
     maxPresets
   };
-  return /* @__PURE__ */ jsx32(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs23("div", { className: cn("aviala-color-picker-panel", className), children: [
-    /* @__PURE__ */ jsx32(ColorPickerArea, { disabled }),
-    /* @__PURE__ */ jsx32(ColorPickerSlider, { kind: "hue", disabled }),
-    /* @__PURE__ */ jsx32(ColorPickerSlider, { kind: "alpha", disabled }),
-    /* @__PURE__ */ jsx32(ColorPickerInputs, { disabled, showEyedropper }),
-    showPresets ? /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs23("div", { className: cn("aviala-color-picker-panel", className), children: [
+    /* @__PURE__ */ jsx33(ColorPickerArea, { disabled }),
+    /* @__PURE__ */ jsx33(ColorPickerSlider, { kind: "hue", disabled }),
+    /* @__PURE__ */ jsx33(ColorPickerSlider, { kind: "alpha", disabled }),
+    /* @__PURE__ */ jsx33(ColorPickerInputs, { disabled, showEyedropper }),
+    showPresets ? /* @__PURE__ */ jsx33(
       ColorPickerPresets,
       {
         disabled,
@@ -4576,7 +4636,7 @@ import * as PopoverPrimitive3 from "@radix-ui/react-popover";
 import {
   DirectionArrowDownLight as DirectionArrowDownLight3,
   DirectionArrowRightLight,
-  SymbolRight as SymbolRight3
+  SymbolRight as SymbolRight2
 } from "@aviala-design/icons";
 import {
   createContext as createContext5,
@@ -4584,13 +4644,13 @@ import {
   isValidElement as isValidElement12,
   useCallback as useCallback10,
   useContext as useContext5,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo5,
   useRef as useRef7,
-  useState as useState10
+  useState as useState11
 } from "react";
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var CascaderContext = createContext5(null);
 function useCascaderContext() {
   const context = useContext5(CascaderContext);
@@ -4605,7 +4665,7 @@ function renderItemIcon2(node, iconLevel = "text", debugId) {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "span",
     {
       className: cn(
@@ -4620,17 +4680,17 @@ function renderItemIcon2(node, iconLevel = "text", debugId) {
 }
 function renderBadgeSlot2(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__badge", children: isValidElement12(node) && node.type === Badge ? node : /* @__PURE__ */ jsx33(Badge, { children: node }) });
+  return /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-item__badge", children: isValidElement12(node) && node.type === Badge ? node : /* @__PURE__ */ jsx34(Badge, { children: node }) });
 }
 function CascaderItemFormRadio() {
   return /* @__PURE__ */ jsxs24("span", { className: "aviala-cascader-item__form-radio", "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__form-radio-surface" }),
-    /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__form-radio-indicator" })
+    /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-item__form-radio-surface" }),
+    /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-item__form-radio-indicator" })
   ] });
 }
 function CascaderItemFormCheckbox() {
-  return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx33(
-    SymbolRight3,
+  return /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx34(
+    SymbolRight2,
     {
       className: "aviala-cascader-item__form-checkbox-icon",
       thickness: "Bold",
@@ -4642,27 +4702,27 @@ function CascaderItemFormCheckbox() {
 }
 function CascaderItemTrailingRadio({ selected }) {
   if (!selected) return null;
-  return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ jsx33(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ jsx34(SymbolRight2, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function CascaderItemTrailingCheckbox({ selected }) {
   if (!selected) return null;
-  return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx33(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx34(SymbolRight2, { 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__ */ jsx33("span", { className: "aviala-cascader-item__function", children: icon });
+    return /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-item__function", children: icon });
   }
   switch (itemFunction) {
     case "radio":
-      return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx33(CascaderItemTrailingRadio, { selected }) });
+      return /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx34(CascaderItemTrailingRadio, { selected }) });
     case "checkbox":
-      return /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx33(CascaderItemTrailingCheckbox, { selected }) });
+      return /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx34(CascaderItemTrailingCheckbox, { selected }) });
     case "simple":
     default:
       return /* @__PURE__ */ jsxs24("span", { className: "aviala-cascader-item__function", children: [
-        selected ? /* @__PURE__ */ jsx33(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) : null,
-        hasChildren ? /* @__PURE__ */ jsx33(DirectionArrowRightLight, { level: "text", biggerSize: true, "aria-hidden": true }) : null
+        selected ? /* @__PURE__ */ jsx34(SymbolRight2, { level: "text", biggerSize: true, "aria-hidden": true }) : null,
+        hasChildren ? /* @__PURE__ */ jsx34(DirectionArrowRightLight, { level: "text", biggerSize: true, "aria-hidden": true }) : null
       ] });
   }
 }
@@ -4699,10 +4759,10 @@ function Cascader({
   changeOnSelect = true,
   className
 }) {
-  const [internalOpen, setInternalOpen] = useState10(defaultOpen);
-  const [internalValue, setInternalValue] = useState10(defaultValue ?? []);
-  const [activePath, setActivePath] = useState10(defaultValue ?? []);
-  const [highlightedValue, setHighlightedValue] = useState10(null);
+  const [internalOpen, setInternalOpen] = useState11(defaultOpen);
+  const [internalValue, setInternalValue] = useState11(defaultValue ?? []);
+  const [activePath, setActivePath] = useState11(defaultValue ?? []);
+  const [highlightedValue, setHighlightedValue] = useState11(null);
   const windowBlurCloseRef = useRef7(false);
   const pointerDownCloseRef = useRef7(false);
   const isOpenControlled = openProp !== void 0;
@@ -4710,14 +4770,14 @@ function Cascader({
   const open = isOpenControlled ? openProp : internalOpen;
   const selectedPath = isValueControlled ? valueProp ?? [] : internalValue;
   const wasOpenRef = useRef7(open);
-  useEffect5(() => {
+  useEffect6(() => {
     const markWindowBlur = () => {
       windowBlurCloseRef.current = true;
     };
     window.addEventListener("blur", markWindowBlur, true);
     return () => window.removeEventListener("blur", markWindowBlur, true);
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     const justOpened = open && !wasOpenRef.current;
     wasOpenRef.current = open;
     if (!justOpened) return;
@@ -4732,7 +4792,7 @@ function Cascader({
     }
     setActivePath(selectedPath.slice(0, -1));
   }, [open, options, selectedPath]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open) {
       pointerDownCloseRef.current = false;
       return;
@@ -4822,7 +4882,7 @@ function Cascader({
       size
     ]
   );
-  return /* @__PURE__ */ jsx33(CascaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx33(PopoverPrimitive3.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx33("div", { className: cn("inline-flex", className), ...spiralDebugId("cascader"), children }) }) });
+  return /* @__PURE__ */ jsx34(CascaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx34(PopoverPrimitive3.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx34("div", { className: cn("inline-flex", className), ...spiralDebugId("cascader"), children }) }) });
 }
 var CascaderTrigger = forwardRef26(
   ({
@@ -4848,7 +4908,7 @@ var CascaderTrigger = forwardRef26(
       label
     ] }, `${selectedPath[index]}-${index}`)) : null);
     const hasValue = resolvedDisplay != null && resolvedDisplay !== false;
-    return /* @__PURE__ */ jsx33(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsx34(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
       "button",
       {
         ref,
@@ -4865,7 +4925,7 @@ var CascaderTrigger = forwardRef26(
         ...props,
         children: [
           renderSlotIcon(leftIcon, "aviala-cascader-trigger__slot", "cascader.trigger.icon-left"),
-          /* @__PURE__ */ jsx33("span", { className: "aviala-cascader-trigger__field", ...spiralDebugId("cascader.trigger.value"), children: /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34("span", { className: "aviala-cascader-trigger__field", ...spiralDebugId("cascader.trigger.value"), children: /* @__PURE__ */ jsx34(
             "span",
             {
               className: cn("aviala-cascader-trigger__value", typographyVariants({ level: "text" })),
@@ -4874,14 +4934,14 @@ var CascaderTrigger = forwardRef26(
             }
           ) }),
           renderSlotIcon(rightIcon, "aviala-cascader-trigger__slot", "cascader.trigger.icon-right"),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "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__ */ jsx33(DirectionArrowDownLight3, { level: "text", biggerSize: true, "aria-hidden": true })
+              children: expandIcon ?? /* @__PURE__ */ jsx34(DirectionArrowDownLight3, { level: "text", biggerSize: true, "aria-hidden": true })
             }
           )
         ]
@@ -4899,7 +4959,7 @@ var CascaderContent = forwardRef26(
     portalled = true,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx33(
+    const content = /* @__PURE__ */ jsx34(
       PopoverPrimitive3.Content,
       {
         ref,
@@ -4912,12 +4972,12 @@ var CascaderContent = forwardRef26(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx33(PopoverPrimitive3.Portal, { children: content });
+    return /* @__PURE__ */ jsx34(PopoverPrimitive3.Portal, { children: content });
   }
 );
 CascaderContent.displayName = "CascaderContent";
 var CascaderMenu = forwardRef26(
-  ({ children, className }, ref) => /* @__PURE__ */ jsx33("div", { ref, className: cn("aviala-cascader-menu", className), children })
+  ({ children, className }, ref) => /* @__PURE__ */ jsx34("div", { ref, className: cn("aviala-cascader-menu", className), children })
 );
 CascaderMenu.displayName = "CascaderMenu";
 var CascaderColumn = forwardRef26(
@@ -4931,14 +4991,14 @@ var CascaderColumn = forwardRef26(
       width: exitLayout.width,
       zIndex: 0
     } : void 0;
-    return /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx34(
       "div",
       {
         ref,
         className: cn("aviala-cascader-column", className),
         "data-animate": animate,
         style: exitStyle,
-        children: /* @__PURE__ */ jsx33("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
+        children: /* @__PURE__ */ jsx34("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
       }
     );
   }
@@ -4951,9 +5011,9 @@ function CascaderItemGroup({
   className
 }) {
   return /* @__PURE__ */ jsxs24("div", { className: cn("aviala-cascader-group", className), children: [
-    label ? /* @__PURE__ */ jsx33("div", { className: cn("aviala-cascader-label", typographyVariants({ level: "caption" })), children: label }) : null,
-    /* @__PURE__ */ jsx33("div", { className: "aviala-cascader-group__slot", children }),
-    showDivider ? /* @__PURE__ */ jsx33("div", { className: "aviala-cascader-separator", role: "separator" }) : null
+    label ? /* @__PURE__ */ jsx34("div", { className: cn("aviala-cascader-label", typographyVariants({ level: "caption" })), children: label }) : null,
+    /* @__PURE__ */ jsx34("div", { className: "aviala-cascader-group__slot", children }),
+    showDivider ? /* @__PURE__ */ jsx34("div", { className: "aviala-cascader-separator", role: "separator" }) : null
   ] });
 }
 var CascaderItem = forwardRef26(
@@ -5046,10 +5106,10 @@ var CascaderItem = forwardRef26(
           if (!isTitle) setHighlightedValue(value);
         },
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx33(CascaderItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx33(CascaderItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx34(CascaderItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx34(CascaderItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon2(leftIcon, leftIconLevel, "cascader.content.item.icon-left") : null,
-          /* @__PURE__ */ jsx33("span", { className: cn("aviala-cascader-item__text", typographyVariants({ level: isTitle ? "caption" : "text" })), children: children ?? option?.label }),
+          /* @__PURE__ */ jsx34("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(
@@ -5080,7 +5140,7 @@ function CascaderOptionsMenu({ className }) {
   const lastPathChangeAtRef = useRef7(0);
   const menuRef = useRef7(null);
   const columnElRefs = useRef7(/* @__PURE__ */ new Map());
-  const [columns, setColumns] = useState10([]);
+  const [columns, setColumns] = useState11([]);
   const columnPaths = useMemo5(() => {
     const paths = [[]];
     const expansion = activePath.length > 0 ? activePath : selectedPath.slice(0, -1);
@@ -5165,7 +5225,7 @@ function CascaderOptionsMenu({ className }) {
     prevColumnCountRef.current = columnPaths.length;
     prevColumnPathsRef.current = columnPaths;
   }, [columnPaths, open]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open || !columns.some((column) => column.animateExit)) {
       return void 0;
     }
@@ -5174,7 +5234,7 @@ function CascaderOptionsMenu({ className }) {
     }, COLUMN_ANIMATION_MS);
     return () => window.clearTimeout(timeout);
   }, [columns, open]);
-  return /* @__PURE__ */ jsx33(CascaderMenu, { ref: menuRef, className, children: columns.map(({ pathPrefix, key, animateEnter, animateExit, exitLayout }) => /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(CascaderMenu, { ref: menuRef, className, children: columns.map(({ pathPrefix, key, animateEnter, animateExit, exitLayout }) => /* @__PURE__ */ jsx34(
     CascaderColumn,
     {
       ref: (element) => {
@@ -5187,7 +5247,7 @@ function CascaderOptionsMenu({ className }) {
       animateEnter,
       animateExit,
       exitLayout,
-      children: /* @__PURE__ */ jsx33(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx34(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ jsx34(
         CascaderItem,
         {
           value: option.value,
@@ -5240,7 +5300,7 @@ function CascaderField({
       changeOnSelect,
       className,
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           CascaderTrigger,
           {
             size,
@@ -5254,7 +5314,7 @@ function CascaderField({
             ...triggerProps
           }
         ),
-        /* @__PURE__ */ jsx33(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ jsx33(CascaderOptionsMenu, { className: menuClassName }) })
+        /* @__PURE__ */ jsx34(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ jsx34(CascaderOptionsMenu, { className: menuClassName }) })
       ]
     }
   );
@@ -5271,23 +5331,23 @@ import {
 import {
   forwardRef as forwardRef27,
   useCallback as useCallback12,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useId as useId4,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo8,
   useRef as useRef9,
-  useState as useState11
+  useState as useState12
 } from "react";
 
 // src/components/date-picker/date-picker-context.tsx
 import { createContext as createContext6, useContext as useContext6 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var DatePickerContext = createContext6(null);
 function DatePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx34(DatePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx35(DatePickerContext.Provider, { value, children });
 }
 function useDatePickerContext() {
   const context = useContext6(DatePickerContext);
@@ -5487,7 +5547,7 @@ import { useMemo as useMemo7 } from "react";
 // src/components/date-picker/date-picker-time-wheel.tsx
 import {
   useCallback as useCallback11,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo6,
   useRef as useRef8
@@ -5514,7 +5574,7 @@ function stickyRoundIndex(fractionalIndex, stickiness = WHEEL_STICKY_AMOUNT) {
 }
 
 // src/components/date-picker/date-picker-time-wheel.tsx
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 var LOOP_SECTIONS = 3;
 var MIDDLE_SECTION = 1;
 function formatWheelValue(value) {
@@ -5674,7 +5734,7 @@ function DatePickerTimeWheelColumn({
     });
     return () => cancelAnimationFrame(raf);
   }, [layoutKey, syncScrollToValue, value]);
-  useEffect6(() => {
+  useEffect7(() => {
     const container = scrollRef.current;
     if (!container) return;
     const onScrollEnd = () => {
@@ -5696,7 +5756,7 @@ function DatePickerTimeWheelColumn({
       }
     };
   }, [settleScroll, syncScrollToValue]);
-  useEffect6(() => {
+  useEffect7(() => {
     const container = scrollRef.current;
     if (!container) return;
     const onWheel = (event) => {
@@ -5755,22 +5815,22 @@ function DatePickerTimeWheelColumn({
   };
   const selectedOptionId = loop ? `${ariaLabel}-${value}-${values.length * MIDDLE_SECTION + getValueIndex(values, value)}` : `${ariaLabel}-${value}`;
   return /* @__PURE__ */ jsxs25("div", { className: cn("aviala-datepicker-time__wheel", className), children: [
-    /* @__PURE__ */ jsx35("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
+    /* @__PURE__ */ jsx36(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--top",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--bottom",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       "div",
       {
         ref: scrollRef,
@@ -5781,17 +5841,17 @@ function DatePickerTimeWheelColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsx35("ul", { className: "aviala-datepicker-time__wheel-list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ jsx36("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__ */ jsx35(
+          return /* @__PURE__ */ jsx36(
             "li",
             {
               id: optionId,
               className: "aviala-datepicker-time__wheel-item",
               role: "option",
               "aria-selected": isSelected,
-              children: /* @__PURE__ */ jsx35(
+              children: /* @__PURE__ */ jsx36(
                 "button",
                 {
                   type: "button",
@@ -5820,7 +5880,7 @@ function DatePickerTimeWheelColumn({
 }
 
 // src/components/date-picker/date-picker-month-wheels.tsx
-import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 var MONTH_VALUES = Array.from({ length: 12 }, (_, index) => index + 1);
 function formatYearValue(value) {
   return String(value);
@@ -5845,14 +5905,14 @@ function DatePickerMonthYearWheels({
   const setYearMonth = (nextYear, nextMonth) => {
     setViewMonth(new Date(nextYear, nextMonth - 1, 1));
   };
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       className: cn("aviala-datepicker-month", className),
       role: "group",
       "aria-label": "\u9009\u62E9\u5E74\u6708",
       children: /* @__PURE__ */ jsxs26("div", { className: "aviala-datepicker-month__columns", children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           DatePickerTimeWheelColumn,
           {
             "aria-label": "\u5E74",
@@ -5864,7 +5924,7 @@ function DatePickerMonthYearWheels({
             onChange: (nextYear) => setYearMonth(nextYear, month)
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           DatePickerTimeWheelColumn,
           {
             "aria-label": "\u6708",
@@ -5882,12 +5942,12 @@ function DatePickerMonthYearWheels({
 }
 
 // src/components/time-picker/time-picker-wheels.tsx
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 var TIME_PICKER_HOUR_VALUES = Array.from({ length: 24 }, (_, index) => index);
 var TIME_PICKER_MINUTE_VALUES = Array.from({ length: 12 }, (_, index) => index * 5);
 function TimePickerWheels({ value, onChange, className }) {
-  return /* @__PURE__ */ jsx37("div", { className: cn("aviala-datepicker-time", className), role: "group", "aria-label": "\u9009\u62E9\u65F6\u95F4", children: /* @__PURE__ */ jsxs27("div", { className: "aviala-datepicker-time__columns", children: [
-    /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38("div", { className: cn("aviala-datepicker-time", className), role: "group", "aria-label": "\u9009\u62E9\u65F6\u95F4", children: /* @__PURE__ */ jsxs27("div", { className: "aviala-datepicker-time__columns", children: [
+    /* @__PURE__ */ jsx38(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5C0F\u65F6",
@@ -5896,7 +5956,7 @@ function TimePickerWheels({ value, onChange, className }) {
         onChange: (hours) => onChange({ ...value, hours })
       }
     ),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5206\u949F",
@@ -5909,7 +5969,7 @@ function TimePickerWheels({ value, onChange, className }) {
 }
 
 // src/components/date-picker/date-picker.tsx
-import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 function getInitialViewMonth(mode, singleValue, rangeValue) {
   if (mode === "single" && singleValue) return startOfDay(singleValue);
   if (mode === "range") {
@@ -5935,16 +5995,16 @@ function DatePicker(props) {
     defaultTimeValue = { hours: 17, minutes: 0 },
     onTimeChange
   } = props;
-  const [internalOpen, setInternalOpen] = useState11(defaultOpen);
-  const [internalSingle, setInternalSingle] = useState11(
+  const [internalOpen, setInternalOpen] = useState12(defaultOpen);
+  const [internalSingle, setInternalSingle] = useState12(
     () => mode === "single" ? props.defaultValue : void 0
   );
-  const [internalRange, setInternalRange] = useState11(
+  const [internalRange, setInternalRange] = useState12(
     () => mode === "range" ? props.defaultValue ?? {} : {}
   );
-  const [rangeDraftFrom, setRangeDraftFrom] = useState11(void 0);
-  const [activePanel, setActivePanel] = useState11("date");
-  const [internalTime, setInternalTime] = useState11(defaultTimeValue);
+  const [rangeDraftFrom, setRangeDraftFrom] = useState12(void 0);
+  const [activePanel, setActivePanel] = useState12("date");
+  const [internalTime, setInternalTime] = useState12(defaultTimeValue);
   const isOpenControlled = openProp !== void 0;
   const open = isOpenControlled ? openProp : internalOpen;
   const timeValue = timeValueProp !== void 0 ? timeValueProp : internalTime;
@@ -5990,20 +6050,20 @@ function DatePicker(props) {
   );
   const singleValue = mode === "single" ? props.value !== void 0 ? props.value : internalSingle : void 0;
   const rangeValue = mode === "range" ? props.value !== void 0 ? props.value ?? {} : internalRange : { from: rangeDraftFrom };
-  const [viewMonth, setViewMonth] = useState11(
+  const [viewMonth, setViewMonth] = useState12(
     () => getInitialViewMonth(mode, singleValue, mode === "range" ? rangeValue : void 0)
   );
-  const [focusedDay, setFocusedDay] = useState11(null);
+  const [focusedDay, setFocusedDay] = useState12(null);
   const windowBlurCloseRef = useRef9(false);
   const pointerDownCloseRef = useRef9(false);
-  useEffect7(() => {
+  useEffect8(() => {
     const markWindowBlur = () => {
       windowBlurCloseRef.current = true;
     };
     window.addEventListener("blur", markWindowBlur, true);
     return () => window.removeEventListener("blur", markWindowBlur, true);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!open) {
       pointerDownCloseRef.current = false;
       setRangeDraftFrom(void 0);
@@ -6233,7 +6293,7 @@ function DatePicker(props) {
       viewMonth
     ]
   );
-  return /* @__PURE__ */ jsx38(DatePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx38(PopoverPrimitive4.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx38("div", { className: cn("inline-flex", className), children }) }) });
+  return /* @__PURE__ */ jsx39(DatePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx39(PopoverPrimitive4.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx39("div", { className: cn("inline-flex", className), children }) }) });
 }
 function formatTriggerValue(mode, singleValue, rangeValue, enableTime, timeValue, rangeSeparator) {
   if (mode === "single") {
@@ -6305,8 +6365,8 @@ var DatePickerTrigger = forwardRef27(
     const defaultPlaceholder = enableTime ? "YYYY-MM-DD HH:mm" : placeholder;
     const emptyPlaceholder = mode === "range" ? rangePlaceholder : defaultPlaceholder;
     const formattedText = typeof formatted === "string" ? formatted : null;
-    const [draft, setDraft] = useState11(formattedText ?? "");
-    useEffect7(() => {
+    const [draft, setDraft] = useState12(formattedText ?? "");
+    useEffect8(() => {
       if (editingRef.current) return;
       setDraft(formattedText ?? "");
     }, [formattedText]);
@@ -6325,7 +6385,7 @@ var DatePickerTrigger = forwardRef27(
     const showEditableInput = editable && displayValue == null;
     if (!showEditableInput) {
       const hasValue = formatted != null && formatted !== false;
-      return /* @__PURE__ */ jsx38(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs28(
+      return /* @__PURE__ */ jsx39(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs28(
         "button",
         {
           type: "button",
@@ -6339,10 +6399,10 @@ var DatePickerTrigger = forwardRef27(
           "aria-haspopup": "dialog",
           children: [
             renderSlotIcon(
-              leftIcon ?? /* @__PURE__ */ jsx38(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+              leftIcon ?? /* @__PURE__ */ jsx39(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
               "aviala-datepicker-trigger__slot"
             ),
-            /* @__PURE__ */ jsx38("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx39(
               "span",
               {
                 className: cn(
@@ -6358,7 +6418,7 @@ var DatePickerTrigger = forwardRef27(
         }
       ) });
     }
-    return /* @__PURE__ */ jsx38(PopoverPrimitive4.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsx39(PopoverPrimitive4.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs28(
       "div",
       {
         className: cn("aviala-datepicker-trigger aviala-focus-ring", className),
@@ -6376,10 +6436,10 @@ var DatePickerTrigger = forwardRef27(
         },
         children: [
           renderSlotIcon(
-            leftIcon ?? /* @__PURE__ */ jsx38(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon ?? /* @__PURE__ */ jsx39(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
             "aviala-datepicker-trigger__slot"
           ),
-          /* @__PURE__ */ jsx38("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx39(
             "input",
             {
               ref: setInputRefs,
@@ -6448,7 +6508,7 @@ var DatePickerContent = forwardRef27(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx38(
+    const content = /* @__PURE__ */ jsx39(
       PopoverPrimitive4.Content,
       {
         ref,
@@ -6456,11 +6516,11 @@ var DatePickerContent = forwardRef27(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx38(DatePickerCalendar, {})
+        children: children ?? /* @__PURE__ */ jsx39(DatePickerCalendar, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx38(PopoverPrimitive4.Portal, { children: content });
+    return /* @__PURE__ */ jsx39(PopoverPrimitive4.Portal, { children: content });
   }
 );
 DatePickerContent.displayName = "DatePickerContent";
@@ -6478,7 +6538,7 @@ function getFooterDateLabel(mode, singleValue, rangeValue) {
 }
 function DatePickerTimePanel() {
   const { timeValue, setTimeValue } = useDatePickerContext();
-  return /* @__PURE__ */ jsx38(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
+  return /* @__PURE__ */ jsx39(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
 }
 function DatePickerPanelFooter() {
   const {
@@ -6493,7 +6553,7 @@ function DatePickerPanelFooter() {
   if (!enableTime) return null;
   const panelValue = activePanel === "time" ? "time" : "date";
   const isRangeMode = mode === "range";
-  return /* @__PURE__ */ jsx38("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsx39("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ jsxs28(
     SegmentatorGroup,
     {
       value: panelValue,
@@ -6504,20 +6564,20 @@ function DatePickerPanelFooter() {
       "data-active-panel": activePanel,
       "aria-label": "\u65E5\u671F\u4E0E\u65F6\u95F4\u5207\u6362",
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           SegmentatorItem,
           {
             value: "date",
-            leftIcon: /* @__PURE__ */ jsx38(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ jsx39(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && panelValue === "time",
             children: getFooterDateLabel(mode, singleValue, rangeValue)
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           SegmentatorItem,
           {
             value: "time",
-            leftIcon: /* @__PURE__ */ jsx38(TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ jsx39(TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && panelValue === "date",
             children: formatTimeValue(timeValue.hours, timeValue.minutes)
           }
@@ -6554,18 +6614,18 @@ function DatePickerCalendar({ className }) {
   const prevViewMonthRef = useRef9(viewMonth);
   const dayGridRef = useRef9(null);
   const pendingDayFocusRef = useRef9(false);
-  const [monthSlide, setMonthSlide] = useState11(null);
+  const [monthSlide, setMonthSlide] = useState12(null);
   const isMonthPanel = activePanel === "month";
   const isTimePanel = activePanel === "time" && enableTime;
   const targetContentView = isMonthPanel ? "month" : "date";
-  const [contentView, setContentView] = useState11(targetContentView);
-  const [viewCrossfade, setViewCrossfade] = useState11(null);
-  const [monthWheelLayoutKey, setMonthWheelLayoutKey] = useState11(0);
+  const [contentView, setContentView] = useState12(targetContentView);
+  const [viewCrossfade, setViewCrossfade] = useState12(null);
+  const [monthWheelLayoutKey, setMonthWheelLayoutKey] = useState12(0);
   const contentViewRef = useRef9(contentView);
   contentViewRef.current = contentView;
   const targetPanel = isTimePanel ? "time" : "date";
-  const [panel, setPanel] = useState11(targetPanel);
-  const [panelSlide, setPanelSlide] = useState11(null);
+  const [panel, setPanel] = useState12(targetPanel);
+  const [panelSlide, setPanelSlide] = useState12(null);
   const panelRef = useRef9(panel);
   panelRef.current = panel;
   useLayoutEffect5(() => {
@@ -6686,7 +6746,7 @@ function DatePickerCalendar({ className }) {
   };
   const stepMonth = isMonthPanel ? 12 : 1;
   const renderDateContent = () => /* @__PURE__ */ jsxs28(Fragment4, { children: [
-    /* @__PURE__ */ jsx38("div", { className: "aviala-datepicker-calendar__weekdays", "aria-hidden": true, children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39("div", { className: "aviala-datepicker-calendar__weekdays", "aria-hidden": true, children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx39(
       "span",
       {
         className: cn(
@@ -6698,7 +6758,7 @@ function DatePickerCalendar({ className }) {
       label
     )) }),
     /* @__PURE__ */ jsxs28("div", { className: "aviala-datepicker-calendar__grid-viewport", children: [
-      monthSlide && outgoingDays ? /* @__PURE__ */ jsx38(
+      monthSlide && outgoingDays ? /* @__PURE__ */ jsx39(
         "div",
         {
           className: "aviala-datepicker-calendar__grid",
@@ -6707,12 +6767,12 @@ function DatePickerCalendar({ className }) {
           "aria-hidden": true,
           children: outgoingDays.map((day) => {
             const outside = !isSameMonth(day, monthSlide.outgoingMonth);
-            return /* @__PURE__ */ jsx38(
+            return /* @__PURE__ */ jsx39(
               "span",
               {
                 className: "aviala-datepicker-day",
                 "data-outside": outside ? "true" : void 0,
-                children: /* @__PURE__ */ jsx38(
+                children: /* @__PURE__ */ jsx39(
                   "span",
                   {
                     className: cn(
@@ -6729,7 +6789,7 @@ function DatePickerCalendar({ className }) {
         },
         `out-${monthSlide.outgoingMonth.getFullYear()}-${monthSlide.outgoingMonth.getMonth()}`
       ) : null,
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         "div",
         {
           ref: dayGridRef,
@@ -6775,7 +6835,7 @@ function DatePickerCalendar({ className }) {
                 onFocus: () => setFocusedDay(day),
                 onKeyDown: (event) => handleDayKeyDown(event, day),
                 children: [
-                  /* @__PURE__ */ jsx38(
+                  /* @__PURE__ */ jsx39(
                     "span",
                     {
                       className: cn(
@@ -6785,7 +6845,7 @@ function DatePickerCalendar({ className }) {
                       children: day.getDate()
                     }
                   ),
-                  isToday ? /* @__PURE__ */ jsx38("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
+                  isToday ? /* @__PURE__ */ jsx39("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
                 ]
               },
               dayKey
@@ -6796,20 +6856,20 @@ function DatePickerCalendar({ className }) {
       )
     ] })
   ] });
-  const renderContentView = (view) => view === "month" ? /* @__PURE__ */ jsx38(DatePickerMonthYearWheels, { layoutKey: monthWheelLayoutKey }) : renderDateContent();
+  const renderContentView = (view) => view === "month" ? /* @__PURE__ */ jsx39(DatePickerMonthYearWheels, { layoutKey: monthWheelLayoutKey }) : renderDateContent();
   const renderDatePanel = () => /* @__PURE__ */ jsxs28(Fragment4, { children: [
     /* @__PURE__ */ jsxs28("div", { className: "aviala-datepicker-calendar__header", children: [
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         "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__ */ jsx38(DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ jsx39(DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       ),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         "button",
         {
           type: "button",
@@ -6822,7 +6882,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__ */ jsx38(
+          children: /* @__PURE__ */ jsx39(
             "span",
             {
               className: "aviala-datepicker-calendar__title-text",
@@ -6833,19 +6893,19 @@ function DatePickerCalendar({ className }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         "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__ */ jsx38(DirectionArrowRight2, { level: "text", biggerSize: true, "aria-hidden": true })
+          children: /* @__PURE__ */ jsx39(DirectionArrowRight2, { level: "text", biggerSize: true, "aria-hidden": true })
         }
       )
     ] }),
     /* @__PURE__ */ jsxs28("div", { className: "aviala-datepicker-calendar__view-viewport", children: [
-      viewCrossfade ? /* @__PURE__ */ jsx38(
+      viewCrossfade ? /* @__PURE__ */ jsx39(
         "div",
         {
           className: "aviala-datepicker-calendar__view",
@@ -6856,7 +6916,7 @@ function DatePickerCalendar({ className }) {
         },
         `exit-${viewCrossfade.outgoing}`
       ) : null,
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         "div",
         {
           className: "aviala-datepicker-calendar__view",
@@ -6877,7 +6937,7 @@ function DatePickerCalendar({ className }) {
       )
     ] })
   ] });
-  const renderPanel = (kind) => kind === "time" ? /* @__PURE__ */ jsx38(DatePickerTimePanel, {}) : renderDatePanel();
+  const renderPanel = (kind) => kind === "time" ? /* @__PURE__ */ jsx39(DatePickerTimePanel, {}) : renderDatePanel();
   return /* @__PURE__ */ jsxs28(
     "div",
     {
@@ -6886,7 +6946,7 @@ function DatePickerCalendar({ className }) {
       "aria-label": "Calendar",
       children: [
         /* @__PURE__ */ jsxs28("div", { className: "aviala-datepicker-calendar__panel-viewport", children: [
-          panelSlide ? /* @__PURE__ */ jsx38(
+          panelSlide ? /* @__PURE__ */ jsx39(
             "div",
             {
               className: "aviala-datepicker-calendar__panel aviala-datepicker-calendar__body",
@@ -6898,7 +6958,7 @@ function DatePickerCalendar({ className }) {
             },
             `panel-exit-${panelSlide.outgoing}`
           ) : null,
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "div",
             {
               className: "aviala-datepicker-calendar__panel aviala-datepicker-calendar__body",
@@ -6916,7 +6976,7 @@ function DatePickerCalendar({ className }) {
             `panel-enter-${panel}`
           )
         ] }),
-        /* @__PURE__ */ jsx38(DatePickerPanelFooter, {})
+        /* @__PURE__ */ jsx39(DatePickerPanelFooter, {})
       ]
     }
   );
@@ -6981,7 +7041,7 @@ function DatePickerField({
     onTimeChange
   };
   return /* @__PURE__ */ jsxs28(DatePicker, { ...pickerProps, size, className, children: [
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       DatePickerTrigger,
       {
         size,
@@ -6995,7 +7055,7 @@ function DatePickerField({
         editable
       }
     ),
-    /* @__PURE__ */ jsx38(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx38(DatePickerCalendar, { className: calendarClassName }) })
+    /* @__PURE__ */ jsx39(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx39(DatePickerCalendar, { className: calendarClassName }) })
   ] });
 }
 
@@ -7005,21 +7065,21 @@ import { TimeAndDateClock as TimeAndDateClock2 } from "@aviala-design/icons";
 import {
   forwardRef as forwardRef28,
   useCallback as useCallback13,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useMemo as useMemo9,
   useRef as useRef10,
-  useState as useState12
+  useState as useState13
 } from "react";
 
 // src/components/time-picker/time-picker-context.tsx
 import { createContext as createContext7, useContext as useContext7 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var TimePickerContext = createContext7(null);
 function TimePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx39(TimePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx40(TimePickerContext.Provider, { value, children });
 }
 function useTimePickerContext() {
   const context = useContext7(TimePickerContext);
@@ -7030,7 +7090,7 @@ function useTimePickerContext() {
 }
 
 // src/components/time-picker/time-picker.tsx
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
 function TimePicker({
   children,
   value: valueProp,
@@ -7043,8 +7103,8 @@ function TimePicker({
   size = "regular",
   className
 }) {
-  const [internalOpen, setInternalOpen] = useState12(defaultOpen);
-  const [internalValue, setInternalValue] = useState12(defaultValue);
+  const [internalOpen, setInternalOpen] = useState13(defaultOpen);
+  const [internalValue, setInternalValue] = useState13(defaultValue);
   const windowBlurCloseRef = useRef10(false);
   const pointerDownCloseRef = useRef10(false);
   const isOpenControlled = openProp !== void 0;
@@ -7059,14 +7119,14 @@ function TimePicker({
     },
     [onValueChange, valueProp]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     const markWindowBlur = () => {
       windowBlurCloseRef.current = true;
     };
     window.addEventListener("blur", markWindowBlur, true);
     return () => window.removeEventListener("blur", markWindowBlur, true);
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!open) {
       pointerDownCloseRef.current = false;
       return;
@@ -7103,7 +7163,7 @@ function TimePicker({
     }),
     [disabled, open, size, value, setValue]
   );
-  return /* @__PURE__ */ jsx40(TimePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx40(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx40("div", { className: cn("inline-flex", className), children }) }) });
+  return /* @__PURE__ */ jsx41(TimePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx41(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx41("div", { className: cn("inline-flex", className), children }) }) });
 }
 var TimePickerTrigger = forwardRef28(
   ({
@@ -7123,7 +7183,7 @@ var TimePickerTrigger = forwardRef28(
     const disabled = disabledProp ?? disabledContext;
     const formatted = displayValue !== void 0 ? displayValue : formatTimeValue(value.hours, value.minutes);
     const hasValue = formatted != null && formatted !== "";
-    return /* @__PURE__ */ jsx40(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsx41(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs29(
       "button",
       {
         ref,
@@ -7139,10 +7199,10 @@ var TimePickerTrigger = forwardRef28(
         ...props,
         children: [
           renderSlotIcon(
-            leftIcon ?? /* @__PURE__ */ jsx40(TimeAndDateClock2, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon ?? /* @__PURE__ */ jsx41(TimeAndDateClock2, { level: "text", biggerSize: true, "aria-hidden": true }),
             "aviala-timepicker-trigger__slot"
           ),
-          /* @__PURE__ */ jsx40("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ jsx41(
             "span",
             {
               className: cn(
@@ -7169,7 +7229,7 @@ var TimePickerContent = forwardRef28(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx40(
+    const content = /* @__PURE__ */ jsx41(
       PopoverPrimitive5.Content,
       {
         ref,
@@ -7177,17 +7237,17 @@ var TimePickerContent = forwardRef28(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx40(TimePickerPanel, {})
+        children: children ?? /* @__PURE__ */ jsx41(TimePickerPanel, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx40(PopoverPrimitive5.Portal, { children: content });
+    return /* @__PURE__ */ jsx41(PopoverPrimitive5.Portal, { children: content });
   }
 );
 TimePickerContent.displayName = "TimePickerContent";
 function TimePickerPanel({ className }) {
   const { value, setValue } = useTimePickerContext();
-  return /* @__PURE__ */ jsx40("div", { className: cn("aviala-timepicker-panel", className), role: "application", "aria-label": "Time picker", children: /* @__PURE__ */ jsx40(TimePickerWheels, { value, onChange: setValue }) });
+  return /* @__PURE__ */ jsx41("div", { className: cn("aviala-timepicker-panel", className), role: "application", "aria-label": "Time picker", children: /* @__PURE__ */ jsx41(TimePickerWheels, { value, onChange: setValue }) });
 }
 function TimePickerField({
   contentClassName,
@@ -7220,7 +7280,7 @@ function TimePickerField({
       size,
       className,
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           TimePickerTrigger,
           {
             size,
@@ -7231,7 +7291,7 @@ function TimePickerField({
             error
           }
         ),
-        /* @__PURE__ */ jsx40(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx40(TimePickerPanel, { className: panelClassName }) })
+        /* @__PURE__ */ jsx41(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx41(TimePickerPanel, { className: panelClassName }) })
       ]
     }
   );
@@ -7242,11 +7302,11 @@ import * as PopoverPrimitive6 from "@radix-ui/react-popover";
 import {
   forwardRef as forwardRef29,
   useCallback as useCallback14,
-  useState as useState13
+  useState as useState14
 } from "react";
 
 // src/components/overlay-pointer.tsx
-import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 var TOOLTIP_POINTER = {
   width: 14,
   height: 5,
@@ -7267,7 +7327,7 @@ function OverlayPointerSvg({
   ...props
 }) {
   const isPopover = variant === "popover";
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "svg",
     {
       ...props,
@@ -7281,15 +7341,15 @@ function OverlayPointerSvg({
       className,
       style: { ...style, width, height },
       children: isPopover ? /* @__PURE__ */ jsxs30(Fragment5, { children: [
-        /* @__PURE__ */ jsx41("path", { d: path, className: "aviala-popover-content__arrow-outline" }),
-        /* @__PURE__ */ jsx41("path", { d: path, className: "aviala-popover-content__arrow-fill" })
-      ] }) : /* @__PURE__ */ jsx41("path", { d: path })
+        /* @__PURE__ */ jsx42("path", { d: path, className: "aviala-popover-content__arrow-outline" }),
+        /* @__PURE__ */ jsx42("path", { d: path, className: "aviala-popover-content__arrow-fill" })
+      ] }) : /* @__PURE__ */ jsx42("path", { d: path })
     }
   );
 }
 
 // src/components/popover.tsx
-import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 function Popover({
   open: openProp,
   defaultOpen = false,
@@ -7297,7 +7357,7 @@ function Popover({
   modal = false,
   ...props
 }) {
-  const [internalOpen, setInternalOpen] = useState13(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState14(defaultOpen);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : internalOpen;
   const handleOpenChange = useCallback14(
@@ -7307,7 +7367,7 @@ function Popover({
     },
     [isControlled, onOpenChange]
   );
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     PopoverPrimitive6.Root,
     {
       open,
@@ -7330,10 +7390,11 @@ var PopoverContent = forwardRef29(
     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__ */ jsxs31(
       PopoverPrimitive6.Content,
@@ -7346,7 +7407,7 @@ var PopoverContent = forwardRef29(
         className: cn("aviala-popover-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx43(
             "div",
             {
               className: cn(
@@ -7357,13 +7418,13 @@ var PopoverContent = forwardRef29(
               children
             }
           ),
-          showArrow ? /* @__PURE__ */ jsx42(
+          showArrow ? /* @__PURE__ */ jsx43(
             PopoverPrimitive6.Arrow,
             {
               asChild: true,
               width: pointer.width,
               height: pointer.height,
-              children: /* @__PURE__ */ jsx42(
+              children: /* @__PURE__ */ jsx43(
                 OverlayPointerSvg,
                 {
                   variant: isDefaultAppearance ? "popover" : "default",
@@ -7379,7 +7440,7 @@ var PopoverContent = forwardRef29(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx42(PopoverPrimitive6.Portal, { children: content });
+    return /* @__PURE__ */ jsx43(PopoverPrimitive6.Portal, { children: content });
   }
 );
 PopoverContent.displayName = PopoverPrimitive6.Content.displayName;
@@ -7387,16 +7448,16 @@ PopoverContent.displayName = PopoverPrimitive6.Content.displayName;
 // src/components/hover-popover.tsx
 import {
   useCallback as useCallback15,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useRef as useRef11,
-  useState as useState15
+  useState as useState16
 } from "react";
 
 // src/components/use-coarse-pointer.ts
-import { useEffect as useEffect9, useState as useState14 } from "react";
+import { useEffect as useEffect10, useState as useState15 } from "react";
 function useCoarsePointer() {
-  const [coarse, setCoarse] = useState14(false);
-  useEffect9(() => {
+  const [coarse, setCoarse] = useState15(false);
+  useEffect10(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
     const mq = window.matchMedia("(pointer: coarse)");
     const update = () => setCoarse(mq.matches);
@@ -7408,7 +7469,7 @@ function useCoarsePointer() {
 }
 
 // src/components/hover-popover.tsx
-import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
 function HoverPopover({
   content,
   children,
@@ -7426,7 +7487,7 @@ function HoverPopover({
 }) {
   const coarse = useCoarsePointer();
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = useState15(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState16(defaultOpen);
   const open = isControlled ? openProp : internalOpen;
   const openTimer = useRef11(void 0);
   const closeTimer = useRef11(void 0);
@@ -7441,7 +7502,7 @@ function HoverPopover({
     },
     [isControlled, onOpenChange]
   );
-  useEffect10(() => () => clearTimers(), [clearTimers]);
+  useEffect11(() => () => clearTimers(), [clearTimers]);
   const keyboardOpenRef = useRef11(false);
   const contentRef = useRef11(null);
   const openNow = useCallback15(() => {
@@ -7455,8 +7516,8 @@ function HoverPopover({
   }, [clearTimers, closeDelay, setOpen]);
   if (coarse) {
     return /* @__PURE__ */ jsxs32(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx43(PopoverTrigger, { asChild: true, children }),
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx44(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx44(
         PopoverContent,
         {
           side,
@@ -7471,7 +7532,7 @@ function HoverPopover({
     ] });
   }
   return /* @__PURE__ */ jsxs32(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44(
       PopoverTrigger,
       {
         asChild: true,
@@ -7483,7 +7544,7 @@ function HoverPopover({
         children
       }
     ),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44(
       PopoverContent,
       {
         ref: contentRef,
@@ -7522,7 +7583,7 @@ import {
   forwardRef as forwardRef30,
   isValidElement as isValidElement13
 } from "react";
-import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
 var MODAL_ICON_SIZE = 16;
 var modalContentVariants = cva10("aviala-modal-content", {
   variants: {
@@ -7545,13 +7606,13 @@ function renderModalIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx44("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx45("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
 }
 var Modal = DialogPrimitive.Root;
 var ModalTrigger = DialogPrimitive.Trigger;
 var ModalPortal = DialogPrimitive.Portal;
 var ModalClose = DialogPrimitive.Close;
-var ModalOverlay = forwardRef30(({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
+var ModalOverlay = forwardRef30(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -7570,15 +7631,15 @@ var ModalContent = forwardRef30(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const overlay = showOverlay ? /* @__PURE__ */ jsx44(ModalOverlay, {}) : null;
-    const panel = /* @__PURE__ */ jsx44(
+    const overlay = showOverlay ? /* @__PURE__ */ jsx45(ModalOverlay, {}) : null;
+    const panel = /* @__PURE__ */ jsx45(
       DialogPrimitive.Content,
       {
         ref,
         className: cn(modalContentVariants({ size }), className),
         onOpenAutoFocus,
         ...props,
-        children: /* @__PURE__ */ jsx44("div", { className: "aviala-modal-content__surface", children })
+        children: /* @__PURE__ */ jsx45("div", { className: "aviala-modal-content__surface", children })
       }
     );
     if (!portalled) {
@@ -7603,10 +7664,10 @@ var ModalHeader = forwardRef30(
     showClose = true,
     closeLabel = "Close dialog",
     ...props
-  }, ref) => /* @__PURE__ */ jsx44("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ jsxs33("div", { className: "aviala-modal__header-row", children: [
+  }, ref) => /* @__PURE__ */ jsx45("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ jsxs33("div", { className: "aviala-modal__header-row", children: [
     showIcon ? renderModalIcon(icon) : null,
-    /* @__PURE__ */ jsx44("div", { className: "aviala-modal__header-main", children }),
-    showClose ? /* @__PURE__ */ jsx44(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45("div", { className: "aviala-modal__header-main", children }),
+    showClose ? /* @__PURE__ */ jsx45(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx45(
       Button,
       {
         type: "button",
@@ -7614,28 +7675,28 @@ var ModalHeader = forwardRef30(
         iconOnly: true,
         "aria-label": closeLabel,
         className: "aviala-modal__close",
-        leftIcon: /* @__PURE__ */ jsx44(SymbolWrong2, { "aria-hidden": true })
+        leftIcon: /* @__PURE__ */ jsx45(SymbolWrong2, { "aria-hidden": true })
       }
     ) }) : null
   ] }) })
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx44(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx44(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
+var ModalTitle = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx45(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx45(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
 ModalTitle.displayName = DialogPrimitive.Title.displayName;
-var ModalDescription = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx44(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx44(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
+var ModalDescription = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx45(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx45(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
 ModalDescription.displayName = DialogPrimitive.Description.displayName;
 function ModalHeaderText({
   title,
   description,
   ...props
 }) {
-  return /* @__PURE__ */ jsx44(ModalHeader, { ...props, children: /* @__PURE__ */ jsxs33("div", { className: "aviala-modal__header-typeface", children: [
-    /* @__PURE__ */ jsx44(ModalTitle, { children: title }),
-    description ? /* @__PURE__ */ jsx44(ModalDescription, { children: description }) : null
+  return /* @__PURE__ */ jsx45(ModalHeader, { ...props, children: /* @__PURE__ */ jsxs33("div", { className: "aviala-modal__header-typeface", children: [
+    /* @__PURE__ */ jsx45(ModalTitle, { children: title }),
+    description ? /* @__PURE__ */ jsx45(ModalDescription, { children: description }) : null
   ] }) });
 }
 var ModalBody = forwardRef30(
-  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ jsx44("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ jsx44(
+  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ jsx45("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ jsx45(
     Typeface,
     {
       className: "aviala-modal__body-typeface",
@@ -7647,26 +7708,28 @@ var ModalBody = forwardRef30(
 );
 ModalBody.displayName = "ModalBody";
 var ModalFooter = forwardRef30(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx44("div", { ref, className: cn("aviala-modal__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45("div", { ref, className: cn("aviala-modal__footer", className), ...props })
 );
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
 var TOOLTIP_DELAY_DURATION = 300;
 function TooltipProvider({
+  children,
   delayDuration = TOOLTIP_DELAY_DURATION,
   skipDelayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     TooltipPrimitive.Provider,
     {
       delayDuration,
       skipDelayDuration,
-      ...props
+      ...props,
+      children
     }
   );
 }
@@ -7679,8 +7742,9 @@ var TooltipContent = forwardRef31(
     sideOffset = 4,
     collisionPadding = 8,
     showArrow = true,
+    level = "caption",
     ...props
-  }, ref) => /* @__PURE__ */ jsx45(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs34(
+  }, ref) => /* @__PURE__ */ jsx46(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs34(
     TooltipPrimitive.Content,
     {
       ref,
@@ -7689,14 +7753,23 @@ var TooltipContent = forwardRef31(
       className: cn("aviala-tooltip-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx45("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
-        showArrow ? /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
+          "div",
+          {
+            className: cn(
+              "aviala-tooltip-content__surface",
+              typographyVariants({ level })
+            ),
+            children
+          }
+        ),
+        showArrow ? /* @__PURE__ */ jsx46(
           TooltipPrimitive.Arrow,
           {
             asChild: true,
             width: TOOLTIP_POINTER.width,
             height: TOOLTIP_POINTER.height,
-            children: /* @__PURE__ */ jsx45(
+            children: /* @__PURE__ */ jsx46(
               OverlayPointerSvg,
               {
                 className: "aviala-tooltip-content__arrow",
@@ -7714,7 +7787,7 @@ var TooltipContent = forwardRef31(
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/responsive-tooltip.tsx
-import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 function ResponsiveTooltip({
   content,
   children,
@@ -7723,6 +7796,7 @@ function ResponsiveTooltip({
   sideOffset = 4,
   collisionPadding = 8,
   showArrow = true,
+  level = "caption",
   delayDuration = TOOLTIP_DELAY_DURATION,
   open,
   defaultOpen,
@@ -7732,11 +7806,12 @@ function ResponsiveTooltip({
   const coarse = useCoarsePointer();
   if (coarse) {
     return /* @__PURE__ */ jsxs35(Popover, { open, defaultOpen, onOpenChange, children: [
-      /* @__PURE__ */ jsx46(PopoverTrigger, { asChild: true, children }),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx47(
         PopoverContent,
         {
           appearance: "tooltip",
+          level,
           side,
           align,
           sideOffset,
@@ -7756,8 +7831,8 @@ function ResponsiveTooltip({
       defaultOpen,
       onOpenChange,
       children: [
-        /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx47(
           TooltipContent,
           {
             side,
@@ -7765,6 +7840,7 @@ function ResponsiveTooltip({
             sideOffset,
             collisionPadding,
             showArrow,
+            level,
             className: contentClassName,
             children: content
           }
@@ -7789,7 +7865,7 @@ import {
   forwardRef as forwardRef32,
   isValidElement as isValidElement14
 } from "react";
-import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
 var FEEDBACK_ICON_SIZE = 22;
 var feedbackVariants = cva11("aviala-feedback", {
   variants: {
@@ -7825,22 +7901,22 @@ function renderFeedbackIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx47("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx48("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__ */ jsx47(SymbolInformationCircle2, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx48(SymbolInformationCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ jsx47(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx48(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "wrong":
-      return /* @__PURE__ */ jsx47(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx48(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ jsx47(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx48(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "normal":
-      return /* @__PURE__ */ jsx47(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
+      return /* @__PURE__ */ jsx48(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
   }
 }
 var Feedback = forwardRef32(
@@ -7865,7 +7941,7 @@ var Feedback = forwardRef32(
     const tone = mode === "primary" ? "white" : "default";
     const isSmall = resolvedSize === "small";
     const resolvedRole = resolvedType === "wrong" ? "alert" : "status";
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         ref,
@@ -7881,7 +7957,7 @@ var Feedback = forwardRef32(
         ...props,
         children: /* @__PURE__ */ jsxs36("div", { className: "aviala-feedback__body", children: [
           renderFeedbackIcon(icon ?? defaultStatusIcon(resolvedType, mode)),
-          isSmall ? /* @__PURE__ */ jsx47(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx47(
+          isSmall ? /* @__PURE__ */ jsx48(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx48(
             Typeface,
             {
               className: "aviala-feedback__typeface",
@@ -7891,7 +7967,7 @@ var Feedback = forwardRef32(
               tone
             }
           ),
-          action ? /* @__PURE__ */ jsx47(
+          action ? /* @__PURE__ */ jsx48(
             Link,
             {
               level: "text",
@@ -7907,7 +7983,7 @@ var Feedback = forwardRef32(
               children: action
             }
           ) : null,
-          showClose ? /* @__PURE__ */ jsx47(
+          showClose ? /* @__PURE__ */ jsx48(
             Link,
             {
               level: "text",
@@ -7916,7 +7992,7 @@ var Feedback = forwardRef32(
               href: onClose ? "#" : void 0,
               "aria-label": closeLabel,
               className: "aviala-feedback__close",
-              leftIcon: /* @__PURE__ */ jsx47(SymbolWrong3, { "aria-hidden": true }),
+              leftIcon: /* @__PURE__ */ jsx48(SymbolWrong3, { "aria-hidden": true }),
               onClick: (event) => {
                 if (onClose) {
                   event.preventDefault();
@@ -7946,7 +8022,7 @@ import {
   forwardRef as forwardRef33,
   isValidElement as isValidElement15
 } from "react";
-import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
 var ALERT_ICON_SIZE = 16;
 var alertVariants = cva12("aviala-alert", {
   variants: {
@@ -7982,20 +8058,20 @@ function renderAlertIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx48("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx49("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__ */ jsx48(SymbolInformationCircle3, { ...iconProps });
+      return /* @__PURE__ */ jsx49(SymbolInformationCircle3, { ...iconProps });
     case "warning":
-      return /* @__PURE__ */ jsx48(SymbolWarningCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx49(SymbolWarningCircle2, { ...iconProps });
     case "error":
-      return /* @__PURE__ */ jsx48(SymbolWrongCircle3, { ...iconProps });
+      return /* @__PURE__ */ jsx49(SymbolWrongCircle3, { ...iconProps });
     case "success":
-      return /* @__PURE__ */ jsx48(SymbolRightCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx49(SymbolRightCircle2, { ...iconProps });
   }
 }
 var Alert = forwardRef33(
@@ -8038,7 +8114,7 @@ var Alert = forwardRef33(
         children: [
           /* @__PURE__ */ jsxs37("div", { className: "aviala-alert__body", children: [
             showIcon ? renderAlertIcon(icon ?? defaultStatusIcon2(resolvedType)) : null,
-            isSmall ? /* @__PURE__ */ jsx48(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx48(
+            isSmall ? /* @__PURE__ */ jsx49(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx49(
               Typeface,
               {
                 className: "aviala-alert__typeface",
@@ -8047,7 +8123,7 @@ var Alert = forwardRef33(
                 secondary: description
               }
             ),
-            quickAction ? /* @__PURE__ */ jsx48(
+            quickAction ? /* @__PURE__ */ jsx49(
               Link,
               {
                 level: "text",
@@ -8063,7 +8139,7 @@ var Alert = forwardRef33(
                 children: quickAction
               }
             ) : null,
-            dismissible ? /* @__PURE__ */ jsx48(
+            dismissible ? /* @__PURE__ */ jsx49(
               Link,
               {
                 level: "text",
@@ -8072,7 +8148,7 @@ var Alert = forwardRef33(
                 href: onDismiss ? "#" : void 0,
                 "aria-label": closeLabel,
                 className: "aviala-alert__close",
-                leftIcon: /* @__PURE__ */ jsx48(SymbolWrong4, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx49(SymbolWrong4, { "aria-hidden": true }),
                 onClick: (event) => {
                   if (onDismiss) {
                     event.preventDefault();
@@ -8083,7 +8159,7 @@ var Alert = forwardRef33(
             ) : null
           ] }),
           hasActions ? /* @__PURE__ */ jsxs37("div", { className: "aviala-alert__actions", children: [
-            action ? /* @__PURE__ */ jsx48(
+            action ? /* @__PURE__ */ jsx49(
               Link,
               {
                 level: "caption",
@@ -8099,7 +8175,7 @@ var Alert = forwardRef33(
                 children: action
               }
             ) : null,
-            secondaryAction ? /* @__PURE__ */ jsx48(
+            secondaryAction ? /* @__PURE__ */ jsx49(
               Link,
               {
                 level: "caption",
@@ -8133,30 +8209,30 @@ import {
   forwardRef as forwardRef34,
   isValidElement as isValidElement16
 } from "react";
-import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
 var List = forwardRef34(
   ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs38("div", { ref, className: cn("aviala-list", className), ...props, children: [
-    title != null ? /* @__PURE__ */ jsx49(ListTitle, { children: title }) : null,
-    /* @__PURE__ */ jsx49(ListGroup, { children })
+    title != null ? /* @__PURE__ */ jsx50(ListTitle, { children: title }) : null,
+    /* @__PURE__ */ jsx50(ListGroup, { children })
   ] })
 );
 List.displayName = "List";
 var ListTitle = forwardRef34(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx49("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx49("span", { className: cn(typographyVariants({ level: "text" })), children }) })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx50("span", { className: cn(typographyVariants({ level: "text" })), children }) })
 );
 ListTitle.displayName = "ListTitle";
 var ListGroup = forwardRef34(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx49("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
 );
 ListGroup.displayName = "ListGroup";
 function ListItemGroup({ label, children, className }) {
   return /* @__PURE__ */ jsxs38("div", { className: cn("aviala-list", className), children: [
-    label != null ? /* @__PURE__ */ jsx49(ListTitle, { children: label }) : null,
-    /* @__PURE__ */ jsx49(ListGroup, { children })
+    label != null ? /* @__PURE__ */ jsx50(ListTitle, { children: label }) : null,
+    /* @__PURE__ */ jsx50(ListGroup, { children })
   ] });
 }
 var ListDivider = forwardRef34(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
     "span",
     {
       ref,
@@ -8168,13 +8244,13 @@ var ListDivider = forwardRef34(
 );
 ListDivider.displayName = "ListDivider";
 var ListSeparator = forwardRef34(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx49("hr", { ref, className: cn("aviala-list-separator", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50("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__ */ jsx49(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx49(GeneralSetting, { "aria-hidden": true }));
+  const content = node ?? (leading === "shaped" ? /* @__PURE__ */ jsx50(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx50(GeneralSetting, { "aria-hidden": true }));
   const rendered = isValidElement16(content) && typeof content.type !== "string" ? cloneElement11(content, {
     width: iconSize,
     height: iconSize,
@@ -8183,7 +8259,7 @@ function renderLeadingIcon(node, leading) {
       "shrink-0"
     )
   }) : content;
-  return /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx50(
     "span",
     {
       className: cn(
@@ -8221,12 +8297,12 @@ var ListItem = forwardRef34(
   }, ref) => {
     const isInteractive = interactive ?? (onClick != null || href != null);
     const chevronVisible = showChevron ?? itemType === "action";
-    const primaryAction = action ?? /* @__PURE__ */ jsx49(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx49(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
-    const chevron = chevronVisible ? /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx49(DirectionArrowRightLight2, { width: 18, height: 18 }) }) : null;
+    const primaryAction = action ?? /* @__PURE__ */ jsx50(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx50(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const chevron = chevronVisible ? /* @__PURE__ */ jsx50("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx50(DirectionArrowRightLight2, { width: 18, height: 18 }) }) : null;
     const renderTrailing = () => {
       const hideActions = !showTrailing || trailing === null;
       if (hideActions) {
-        return chevron && itemType === "action" ? /* @__PURE__ */ jsx49("div", { className: "aviala-list-item__more", children: chevron }) : null;
+        return chevron && itemType === "action" ? /* @__PURE__ */ jsx50("div", { className: "aviala-list-item__more", children: chevron }) : null;
       }
       if (trailing !== void 0) return trailing;
       switch (itemType) {
@@ -8234,32 +8310,32 @@ var ListItem = forwardRef34(
           return /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__more", children: [
             /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
               primaryAction,
-              secondaryAction ?? /* @__PURE__ */ jsx49(
+              secondaryAction ?? /* @__PURE__ */ jsx50(
                 Button,
                 {
                   mode: "default",
                   size: "regular",
                   iconOnly: true,
                   "aria-label": "More",
-                  leftIcon: /* @__PURE__ */ jsx49(GeneralSetting, { "aria-hidden": true })
+                  leftIcon: /* @__PURE__ */ jsx50(GeneralSetting, { "aria-hidden": true })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx49(ListDivider, {}),
+            /* @__PURE__ */ jsx50(ListDivider, {}),
             chevron
           ] });
         case "switch":
           return /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx49(ListDivider, {}),
-            /* @__PURE__ */ jsx49(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx50(ListDivider, {}),
+            /* @__PURE__ */ jsx50(Switch, { ...switchProps })
           ] });
         case "select":
         default:
           return /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx49(ListDivider, {}),
-            /* @__PURE__ */ jsx49("span", { className: "aviala-list-item__select", children: select })
+            /* @__PURE__ */ jsx50(ListDivider, {}),
+            /* @__PURE__ */ jsx50("span", { className: "aviala-list-item__select", children: select })
           ] });
       }
     };
@@ -8275,13 +8351,13 @@ var ListItem = forwardRef34(
     const trailingNode = renderTrailing();
     const body = /* @__PURE__ */ jsxs38(Fragment7, { children: [
       renderLeadingIcon(icon, leading),
-      /* @__PURE__ */ jsx49("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__content", children: [
-        /* @__PURE__ */ jsx49("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx49(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
+      /* @__PURE__ */ jsx50("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs38("div", { className: "aviala-list-item__content", children: [
+        /* @__PURE__ */ jsx50("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx50(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
         trailingNode
       ] }) })
     ] });
     if (href && !disabled) {
-      return /* @__PURE__ */ jsx49(
+      return /* @__PURE__ */ jsx50(
         "a",
         {
           ref,
@@ -8297,7 +8373,7 @@ var ListItem = forwardRef34(
         }
       );
     }
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       "div",
       {
         ref,
@@ -8321,13 +8397,13 @@ import {
   forwardRef as forwardRef35,
   useCallback as useCallback16,
   useContext as useContext8,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo10,
   useRef as useRef12,
-  useState as useState16
+  useState as useState17
 } from "react";
-import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 function navigationItemButtonMode(active) {
   return active ? "second" : "noBackgroundCustom";
 }
@@ -8336,7 +8412,7 @@ function useNavigationDirection() {
   return useContext8(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;
@@ -8443,8 +8519,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;
@@ -8501,7 +8577,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
   const layoutTrackingFrameRef = useRef12(null);
   const isLayoutTrackingRef = useRef12(false);
   const isInitialMount = useRef12(true);
-  const [activeRevision, setActiveRevision] = useState16(0);
+  const [activeRevision, setActiveRevision] = useState17(0);
   const measureIndicator = useCallback16(() => {
     const group = groupRef.current;
     if (!group) return null;
@@ -8568,7 +8644,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;
@@ -8700,7 +8776,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     startExpandCollapseTracking,
     syncIndicator
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (direction !== "vertical") return;
     const group = groupRef.current;
     if (!group) return;
@@ -8736,7 +8812,7 @@ var Navigation = forwardRef35(
     direction = "vertical",
     dividingLine = false,
     ...props
-  }, ref) => /* @__PURE__ */ jsx50(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx50(
+  }, ref) => /* @__PURE__ */ jsx51(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx51(
     Tag2,
     {
       ref,
@@ -8750,7 +8826,7 @@ var Navigation = forwardRef35(
 );
 Navigation.displayName = "Navigation";
 var NavigationBrand = forwardRef35(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
     "div",
     {
       ref,
@@ -8762,24 +8838,24 @@ var NavigationBrand = forwardRef35(
 NavigationBrand.displayName = "NavigationBrand";
 var NavigationBrandTitle = forwardRef35(({ className, asChild = false, children, ...props }, ref) => {
   const Comp = asChild ? Slot5 : "a";
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     Comp,
     {
       ref,
       className: cn("aviala-navigation-brand__title aviala-focus-ring", className),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx50(Typography, { level: "text", as: "span", children })
+      children: asChild ? children : /* @__PURE__ */ jsx51(Typography, { level: "text", as: "span", children })
     }
   );
 });
 NavigationBrandTitle.displayName = "NavigationBrandTitle";
-var NavigationSection = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50(
+var NavigationSection = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx51(
   "div",
   {
     ref,
     className: cn("aviala-navigation-section", className),
     ...props,
-    children: /* @__PURE__ */ jsx50(Typography, { level: "caption", as: "p", children })
+    children: /* @__PURE__ */ jsx51(Typography, { level: "caption", as: "p", children })
   }
 ));
 NavigationSection.displayName = "NavigationSection";
@@ -8811,7 +8887,7 @@ var NavigationGroup = forwardRef35(
         className: cn("aviala-navigation-group", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx51(
             "span",
             {
               ref: onIndicatorRef,
@@ -8837,7 +8913,7 @@ var NavigationItemGroup = forwardRef35(({ className, expanded, children, ...prop
     if (isCollapsed) inner.setAttribute("inert", "");
     else inner.removeAttribute("inert");
   }, [isCollapsed]);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       ref,
@@ -8845,7 +8921,7 @@ var NavigationItemGroup = forwardRef35(({ className, expanded, children, ...prop
       "data-expanded": isCollapsible ? expanded ? "true" : "false" : void 0,
       "aria-hidden": isCollapsed ? true : void 0,
       ...props,
-      children: isCollapsible ? /* @__PURE__ */ jsx50("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
+      children: isCollapsible ? /* @__PURE__ */ jsx51("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
     }
   );
 });
@@ -8856,7 +8932,7 @@ function renderItemIcon3(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-item__icon", children: content });
+  return /* @__PURE__ */ jsx51("span", { className: "aviala-navigation-item__icon", children: content });
 }
 var NavigationItem = forwardRef35(
   ({
@@ -8875,7 +8951,7 @@ var NavigationItem = forwardRef35(
     const mode = navigationItemButtonMode(isActive);
     const controlContent = /* @__PURE__ */ jsxs39(Fragment8, { children: [
       renderItemIcon3(leftIcon),
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51(
         Typography,
         {
           level: "text",
@@ -8884,15 +8960,15 @@ var NavigationItem = forwardRef35(
           children
         }
       ),
-      rightIcon ? /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+      rightIcon ? /* @__PURE__ */ jsx51("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
     ] });
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx51(
       "span",
       {
         className: cn("aviala-navigation-item", className),
         "data-item-type": itemType,
         "data-active": isActive ? "true" : "false",
-        children: /* @__PURE__ */ jsx50(
+        children: /* @__PURE__ */ jsx51(
           Comp,
           {
             ref,
@@ -8911,7 +8987,7 @@ var NavigationItem = forwardRef35(
   }
 );
 NavigationItem.displayName = "NavigationItem";
-var NavigationActions = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50(
+var NavigationActions = forwardRef35(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx51(
   "div",
   {
     ref,
@@ -8921,7 +8997,7 @@ var NavigationActions = forwardRef35(({ className, children, ...props }, ref) =>
   }
 ));
 NavigationActions.displayName = "NavigationActions";
-var NavigationActionsSlot = forwardRef35(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+var NavigationActionsSlot = forwardRef35(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
   "div",
   {
     ref,
@@ -8947,10 +9023,10 @@ function NavigationItemMenu({
   onOpenChange,
   children
 }) {
-  const [internalValue, setInternalValue] = useState16(defaultValue);
+  const [internalValue, setInternalValue] = useState17(defaultValue);
   const isValueControlled = valueProp !== void 0;
   const value = isValueControlled ? valueProp : internalValue;
-  const [internalOpen, setInternalOpen] = useState16(false);
+  const [internalOpen, setInternalOpen] = useState17(false);
   const isOpenControlled = openProp !== void 0;
   const open = isOpenControlled ? openProp : internalOpen;
   const closeTimerRef = useRef12(null);
@@ -8992,7 +9068,7 @@ function NavigationItemMenu({
     },
     [cancelClose, isValueControlled, onValueChange, setOpen]
   );
-  useEffect11(() => cancelClose, [cancelClose]);
+  useEffect12(() => cancelClose, [cancelClose]);
   const contextValue = useMemo10(
     () => ({
       value,
@@ -9013,7 +9089,7 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  return /* @__PURE__ */ jsx50(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx50(Popover, { open, onOpenChange: handleOpenChange, children }) });
+  return /* @__PURE__ */ jsx51(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx51(Popover, { open, onOpenChange: handleOpenChange, children }) });
 }
 var NavigationItemMenuTrigger = forwardRef35(
   ({
@@ -9027,7 +9103,7 @@ var NavigationItemMenuTrigger = forwardRef35(
     const menu = useNavigationItemMenuContext("NavigationItemMenuTrigger");
     const isActive = active ?? menu.hasSelection;
     const mode = navigationItemButtonMode(isActive);
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx51(
       "span",
       {
         className: cn("aviala-navigation-item", className),
@@ -9035,7 +9111,7 @@ var NavigationItemMenuTrigger = forwardRef35(
         "data-active": isActive ? "true" : "false",
         onMouseEnter: () => menu.openMenu(true),
         onMouseLeave: menu.scheduleClose,
-        children: /* @__PURE__ */ jsx50(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs39(
+        children: /* @__PURE__ */ jsx51(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs39(
           "button",
           {
             ref,
@@ -9048,7 +9124,7 @@ var NavigationItemMenuTrigger = forwardRef35(
             ...props,
             children: [
               renderItemIcon3(leftIcon),
-              /* @__PURE__ */ jsx50(
+              /* @__PURE__ */ jsx51(
                 Typography,
                 {
                   level: "text",
@@ -9057,7 +9133,7 @@ var NavigationItemMenuTrigger = forwardRef35(
                   children
                 }
               ),
-              rightIcon ? /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+              rightIcon ? /* @__PURE__ */ jsx51("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
             ]
           }
         ) })
@@ -9078,7 +9154,7 @@ var NavigationItemMenuContent = forwardRef35(
   }, ref) => {
     const direction = useNavigationDirection();
     const menu = useNavigationItemMenuContext("NavigationItemMenuContent");
-    return /* @__PURE__ */ jsx50(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx51(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx51(
       PopoverPrimitive7.Content,
       {
         ref,
@@ -9133,7 +9209,7 @@ var NavigationItemMenuItem = forwardRef35(
         ...props,
         children: [
           renderItemIcon3(leftIcon),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx51(
             Typography,
             {
               level: "text",
@@ -9142,7 +9218,7 @@ var NavigationItemMenuItem = forwardRef35(
               children
             }
           ),
-          rightIcon ? /* @__PURE__ */ jsx50("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
+          rightIcon ? /* @__PURE__ */ jsx51("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
         ]
       }
     );
@@ -9153,8 +9229,11 @@ NavigationItemMenuItem.displayName = "NavigationItemMenuItem";
 // src/components/slider.tsx
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cva as cva13 } from "class-variance-authority";
-import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
+import {
+  forwardRef as forwardRef36,
+  useState as useState18
+} from "react";
+import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
 var sliderVariants = cva13("aviala-slider", {
   variants: {
     size: {
@@ -9171,6 +9250,70 @@ var sliderVariants = cva13("aviala-slider", {
     type: "default"
   }
 });
+function SliderValueTooltip({
+  open,
+  children
+}) {
+  return /* @__PURE__ */ jsxs40(
+    "span",
+    {
+      className: "aviala-slider__value-tooltip",
+      "data-state": open ? "instant-open" : "closed",
+      "aria-hidden": !open,
+      children: [
+        /* @__PURE__ */ jsx52(
+          "span",
+          {
+            className: cn(
+              "aviala-slider__value-tooltip__surface",
+              typographyVariants({ level: "caption" })
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx52("span", { className: "aviala-slider__value-tooltip__arrow", "aria-hidden": true, children: /* @__PURE__ */ jsx52(
+          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] = useState18(false);
+  const tooltipOpen = Boolean(
+    showValueTooltip && (forceTooltipOpen || hoverOpen)
+  );
+  const label = formatValueTooltip ? formatValueTooltip(value, index) : String(value);
+  return /* @__PURE__ */ jsxs40(SliderPrimitive.unstable_ThumbProvider, { children: [
+    /* @__PURE__ */ jsxs40(
+      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__ */ jsx52("span", { className: "aviala-slider__thumb-face", "aria-hidden": true }),
+          showValueTooltip ? /* @__PURE__ */ jsx52(SliderValueTooltip, { open: tooltipOpen, children: label }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx52(SliderPrimitive.unstable_BubbleInput, {})
+  ] });
+}
 var Slider = forwardRef36(
   ({
     className,
@@ -9181,6 +9324,14 @@ var Slider = forwardRef36(
     defaultValue,
     min = 0,
     max = 100,
+    onValueChange,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    onLostPointerCapture,
+    showValueTooltip = false,
+    formatValueTooltip,
     ...props
   }, ref) => {
     const resolvedType = type ?? "default";
@@ -9188,6 +9339,49 @@ var Slider = forwardRef36(
     const isRange = resolvedType === "range";
     const resolvedDefaultValue = defaultValue ?? (isRange ? [25, 75] : [50]);
     const thumbCount = isRange ? Math.max(2, value?.length ?? defaultValue?.length ?? 2) : 1;
+    const [isDragging, setIsDragging] = useState18(false);
+    const [pointerDown, setPointerDown] = useState18(false);
+    const [activeThumbIndex, setActiveThumbIndex] = useState18(
+      null
+    );
+    const [uncontrolledValue, setUncontrolledValue] = useState18(
+      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__ */ jsxs40(
       SliderPrimitive.Root,
       {
@@ -9204,12 +9398,36 @@ var Slider = forwardRef36(
         "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__ */ jsx51(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ jsx51(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
-          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx51(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
+          /* @__PURE__ */ jsx52(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ jsx52(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__ */ jsx52(
+              SliderThumb,
+              {
+                index,
+                value: thumbValue,
+                showValueTooltip: Boolean(showValueTooltip && !disabled),
+                formatValueTooltip,
+                forceTooltipOpen,
+                onThumbPointerDown: () => setActiveThumbIndex(index)
+              },
+              index
+            );
+          })
         ]
-      }
+      },
+      resolvedType
     );
   }
 );
@@ -9221,9 +9439,9 @@ import { cva as cva14 } from "class-variance-authority";
 import {
   forwardRef as forwardRef37,
   useRef as useRef13,
-  useState as useState17
+  useState as useState19
 } from "react";
-import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
 var uploadVariants = cva14("aviala-upload aviala-focus-ring", {
   variants: {
     style: {
@@ -9254,7 +9472,7 @@ var Upload = forwardRef37(
     ...props
   }, ref) => {
     const inputRef = useRef13(null);
-    const [dragging, setDragging] = useState17(false);
+    const [dragging, setDragging] = useState19(false);
     const resolvedStyle = style ?? "default";
     const allowDrag = dragAndDrop ?? resolvedStyle === "large";
     const openPicker = () => {
@@ -9304,7 +9522,7 @@ var Upload = forwardRef37(
         onDrop: handleDrop,
         ...props,
         children: [
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53(
             "input",
             {
               ref: inputRef,
@@ -9319,8 +9537,8 @@ var Upload = forwardRef37(
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsx52("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx52(GeneralUpload, { width: 16, height: 16 }) }),
-          resolvedStyle === "large" ? /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx53(GeneralUpload, { width: 16, height: 16 }) }),
+          resolvedStyle === "large" ? /* @__PURE__ */ jsx53(
             Typeface,
             {
               className: "aviala-upload__typeface",
@@ -9328,7 +9546,7 @@ var Upload = forwardRef37(
               primary: title,
               secondary: description
             }
-          ) : /* @__PURE__ */ jsx52(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
+          ) : /* @__PURE__ */ jsx53(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
         ]
       }
     );
@@ -9339,13 +9557,13 @@ Upload.displayName = "Upload";
 // src/components/scroll-picker.tsx
 import {
   useCallback as useCallback17,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useId as useId5,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo11,
   useRef as useRef14
 } from "react";
-import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
 var LOOP_SECTIONS2 = 3;
 var MIDDLE_SECTION2 = 1;
 function normalizeIndex2(index, length) {
@@ -9373,7 +9591,7 @@ function fractionalIndexAtScrollTop(metrics, scrollTop) {
   return (scrollTop - metrics.originTop) / metrics.pitch;
 }
 function ScrollPicker({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx53("div", { className: cn("aviala-scroll-picker", className), ...props, children });
+  return /* @__PURE__ */ jsx54("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
 function ScrollPickerColumn({
   className,
@@ -9495,7 +9713,7 @@ function ScrollPickerColumn({
     if (Math.abs(container.scrollTop - targetTop) <= 1) return;
     scrollToIndex(targetIndex, "auto");
   }, [getIndex, loop, scrollToIndex, value, values.length]);
-  useEffect12(() => {
+  useEffect13(() => {
     const container = scrollRef.current;
     if (!container) return;
     const onScrollEnd = () => {
@@ -9512,7 +9730,7 @@ function ScrollPickerColumn({
       }
     };
   }, [settleScroll]);
-  useEffect12(() => {
+  useEffect13(() => {
     const container = scrollRef.current;
     if (!container) return;
     const onWheel = (event) => {
@@ -9570,9 +9788,9 @@ function ScrollPickerColumn({
     }
   };
   const selectedOptionId = `${reactId}-${getIndex(value)}`;
-  return /* @__PURE__ */ jsx53("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ jsxs42("div", { className: "aviala-scroll-picker-column__viewport", children: [
-    /* @__PURE__ */ jsx53("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
-    /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ jsxs42("div", { className: "aviala-scroll-picker-column__viewport", children: [
+    /* @__PURE__ */ jsx54("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
+    /* @__PURE__ */ jsx54(
       "div",
       {
         ref: scrollRef,
@@ -9583,12 +9801,12 @@ function ScrollPickerColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsx53("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ jsx54("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__ */ jsx53("li", { className: "contents", children: /* @__PURE__ */ jsx53(
+          return /* @__PURE__ */ jsx54("li", { className: "contents", children: /* @__PURE__ */ jsx54(
             ScrollPickerItem,
             {
               id: isSelected ? selectedOptionId : optionId,
@@ -9614,7 +9832,7 @@ function ScrollPickerItem({
   className,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "button",
     {
       type: "button",
@@ -9642,9 +9860,9 @@ import {
   forwardRef as forwardRef38,
   useCallback as useCallback18,
   useContext as useContext9,
-  useState as useState18
+  useState as useState20
 } from "react";
-import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
 var BreadcrumbSizeContext = createContext9("default");
 function breadcrumbTypeLevel(size) {
   return size === "small" ? "caption" : "text";
@@ -9663,7 +9881,7 @@ var breadcrumbVariants = cva15("aviala-breadcrumb", {
 var Breadcrumb = forwardRef38(
   ({ className, size = "default", children, ...props }, ref) => {
     const resolvedSize = size ?? "default";
-    return /* @__PURE__ */ jsx54(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx55(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx55(
       "nav",
       {
         ref,
@@ -9671,7 +9889,7 @@ var Breadcrumb = forwardRef38(
         className: cn(breadcrumbVariants({ size: resolvedSize }), className),
         "data-size": resolvedSize,
         ...props,
-        children: /* @__PURE__ */ jsx54("ol", { className: "aviala-breadcrumb__list", children })
+        children: /* @__PURE__ */ jsx55("ol", { className: "aviala-breadcrumb__list", children })
       }
     ) });
   }
@@ -9681,8 +9899,8 @@ var BreadcrumbItem = forwardRef38(
   ({ className, href, current = false, icon, onClick, children, ...props }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
     const label = /* @__PURE__ */ jsxs43(Fragment9, { children: [
-      icon ? /* @__PURE__ */ jsx54("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
-      children != null ? /* @__PURE__ */ jsx54(
+      icon ? /* @__PURE__ */ jsx55("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
+      children != null ? /* @__PURE__ */ jsx55(
         Typography,
         {
           level: breadcrumbTypeLevel(size),
@@ -9692,13 +9910,13 @@ var BreadcrumbItem = forwardRef38(
         }
       ) : null
     ] });
-    return /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx55(
       "li",
       {
         ref,
         className: cn("aviala-breadcrumb-item-wrap", className),
         ...props,
-        children: href != null ? /* @__PURE__ */ jsx54(
+        children: href != null ? /* @__PURE__ */ jsx55(
           "a",
           {
             href,
@@ -9707,7 +9925,7 @@ var BreadcrumbItem = forwardRef38(
             "aria-current": current ? "page" : void 0,
             children: label
           }
-        ) : onClick != null ? /* @__PURE__ */ jsx54(
+        ) : onClick != null ? /* @__PURE__ */ jsx55(
           "button",
           {
             type: "button",
@@ -9717,7 +9935,7 @@ var BreadcrumbItem = forwardRef38(
             onClick,
             children: label
           }
-        ) : /* @__PURE__ */ jsx54(
+        ) : /* @__PURE__ */ jsx55(
           "span",
           {
             className: "aviala-breadcrumb-item",
@@ -9734,7 +9952,7 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbSeparator = forwardRef38(
   ({ className, children = "/", ...props }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
-    return /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx55(
       "li",
       {
         ref,
@@ -9742,7 +9960,7 @@ var BreadcrumbSeparator = forwardRef38(
         "aria-hidden": true,
         className: cn("aviala-breadcrumb-separator", className),
         ...props,
-        children: /* @__PURE__ */ jsx54(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
+        children: /* @__PURE__ */ jsx55(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
       }
     );
   }
@@ -9758,11 +9976,11 @@ var BreadcrumbEllipsisItem = forwardRef38(
     ...props
   }, ref) => {
     const content = /* @__PURE__ */ jsxs43(Fragment9, { children: [
-      /* @__PURE__ */ jsx54(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
-      showChevron ? /* @__PURE__ */ jsx54("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx54(DirectionArrowRightLight3, { width: 14, height: 14, thickness: "Light" }) }) : null
+      /* @__PURE__ */ jsx55(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
+      showChevron ? /* @__PURE__ */ jsx55("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx55(DirectionArrowRightLight3, { width: 14, height: 14, thickness: "Light" }) }) : null
     ] });
     if (href != null) {
-      return /* @__PURE__ */ jsx54(
+      return /* @__PURE__ */ jsx55(
         "a",
         {
           ref,
@@ -9774,7 +9992,7 @@ var BreadcrumbEllipsisItem = forwardRef38(
         }
       );
     }
-    return /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx55(
       "button",
       {
         ref,
@@ -9801,7 +10019,7 @@ var BreadcrumbEllipsis = forwardRef38(
     ...props
   }, ref) => {
     const size = useContext9(BreadcrumbSizeContext);
-    const [uncontrolledActivated, setUncontrolledActivated] = useState18(defaultActivated);
+    const [uncontrolledActivated, setUncontrolledActivated] = useState20(defaultActivated);
     const isControlled = activatedProp !== void 0;
     const activated = isControlled ? Boolean(activatedProp) : uncontrolledActivated;
     const setActivated = useCallback18(
@@ -9812,8 +10030,8 @@ var BreadcrumbEllipsis = forwardRef38(
       [isControlled, onActivatedChange]
     );
     const iconSize = 14;
-    const icon = children ?? /* @__PURE__ */ jsx54(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
-    const trigger = /* @__PURE__ */ jsx54(
+    const icon = children ?? /* @__PURE__ */ jsx55(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
+    const trigger = /* @__PURE__ */ jsx55(
       "button",
       {
         type: "button",
@@ -9832,9 +10050,9 @@ var BreadcrumbEllipsis = forwardRef38(
         children: icon
       }
     );
-    return /* @__PURE__ */ jsx54("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ jsxs43(Popover, { open: activated, onOpenChange: setActivated, children: [
-      /* @__PURE__ */ jsx54(PopoverTrigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx55("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ jsxs43(Popover, { open: activated, onOpenChange: setActivated, children: [
+      /* @__PURE__ */ jsx55(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx55(
         PopoverContent,
         {
           className: "aviala-breadcrumb-ellipsis-menu",
@@ -9843,7 +10061,7 @@ var BreadcrumbEllipsis = forwardRef38(
           sideOffset: 7,
           showArrow: false,
           role: "menu",
-          children: /* @__PURE__ */ jsx54("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
+          children: /* @__PURE__ */ jsx55("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
         }
       )
     ] }) : trigger });
@@ -9855,7 +10073,7 @@ BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 import {
   forwardRef as forwardRef39
 } from "react";
-import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
 var Pagehead = forwardRef39(
   ({
     className,
@@ -9868,21 +10086,21 @@ var Pagehead = forwardRef39(
     ...props
   }, ref) => /* @__PURE__ */ jsxs44("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
     /* @__PURE__ */ jsxs44("div", { className: "aviala-pagehead__main", children: [
-      back != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-pagehead__back", children: back }) : null,
+      back != null ? /* @__PURE__ */ jsx56("div", { className: "aviala-pagehead__back", children: back }) : null,
       /* @__PURE__ */ jsxs44("div", { className: "aviala-pagehead__title-block", children: [
-        breadcrumb != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
-        title != null || description != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ jsx55(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
+        breadcrumb != null ? /* @__PURE__ */ jsx56("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
+        title != null || description != null ? /* @__PURE__ */ jsx56("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ jsx56(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
         children
       ] })
     ] }),
-    actions != null ? /* @__PURE__ */ jsx55("div", { className: "aviala-pagehead__actions", children: actions }) : null
+    actions != null ? /* @__PURE__ */ jsx56("div", { className: "aviala-pagehead__actions", children: actions }) : null
   ] })
 );
 Pagehead.displayName = "Pagehead";
 
 // src/components/steps.tsx
 import {
-  SymbolRight as SymbolRight4,
+  SymbolRight as SymbolRight3,
   SymbolWarning,
   SymbolWrong as SymbolWrong5
 } from "@aviala-design/icons";
@@ -9890,7 +10108,7 @@ import { cva as cva16 } from "class-variance-authority";
 import {
   forwardRef as forwardRef40
 } from "react";
-import { jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
 var stepsVariants = cva16("aviala-steps", {
   variants: {
     direction: {
@@ -9903,7 +10121,7 @@ var stepsVariants = cva16("aviala-steps", {
   }
 });
 var Steps = forwardRef40(
-  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx56(
+  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx57(
     "div",
     {
       ref,
@@ -9918,20 +10136,20 @@ Steps.displayName = "Steps";
 function defaultStepsIconContent(state, index) {
   switch (state) {
     case "done":
-      return /* @__PURE__ */ jsx56(SymbolRight4, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ jsx57(SymbolRight3, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "fail":
-      return /* @__PURE__ */ jsx56(SymbolWrong5, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ jsx57(SymbolWrong5, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ jsx56(SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ jsx57(SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "waiting":
     case "inProgress":
     case "default":
     default:
-      return index != null ? /* @__PURE__ */ jsx56(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
+      return index != null ? /* @__PURE__ */ jsx57(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
   }
 }
 var StepsIcon = forwardRef40(
-  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ jsx56(
+  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ jsx57(
     "span",
     {
       ref,
@@ -9961,9 +10179,9 @@ var StepsItem = forwardRef40(
       "data-state": state,
       ...props,
       children: [
-        icon ?? /* @__PURE__ */ jsx56(StepsIcon, { state, index }),
+        icon ?? /* @__PURE__ */ jsx57(StepsIcon, { state, index }),
         /* @__PURE__ */ jsxs45("div", { className: "aviala-steps-item__body", children: [
-          title != null ? /* @__PURE__ */ jsx56(
+          title != null ? /* @__PURE__ */ jsx57(
             Typography,
             {
               level: "subtitle",
@@ -9972,7 +10190,7 @@ var StepsItem = forwardRef40(
               children: title
             }
           ) : null,
-          description != null ? /* @__PURE__ */ jsx56(
+          description != null ? /* @__PURE__ */ jsx57(
             Typography,
             {
               level: "text",
@@ -9996,9 +10214,9 @@ import {
 } from "@aviala-design/icons";
 import {
   forwardRef as forwardRef41,
-  useState as useState19
+  useState as useState21
 } from "react";
-import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
 function buildPageList(page, pageCount) {
   if (pageCount <= 7) {
     return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -10049,10 +10267,10 @@ var Pagination = forwardRef41(
     sizeOptionLabel = (size) => `${size} \u9879`,
     ...props
   }, ref) => {
-    const [uncontrolledPage, setUncontrolledPage] = useState19(defaultPage);
-    const [uncontrolledPageSize, setUncontrolledPageSize] = useState19(defaultPageSize);
-    const [jumpValue, setJumpValue] = useState19("");
-    const [openEllipsis, setOpenEllipsis] = useState19(null);
+    const [uncontrolledPage, setUncontrolledPage] = useState21(defaultPage);
+    const [uncontrolledPageSize, setUncontrolledPageSize] = useState21(defaultPageSize);
+    const [jumpValue, setJumpValue] = useState21("");
+    const [openEllipsis, setOpenEllipsis] = useState21(null);
     const page = pageProp ?? uncontrolledPage;
     const pageSize = pageSizeProp ?? uncontrolledPageSize;
     const safePageCount = Math.max(1, pageCount);
@@ -10083,7 +10301,7 @@ var Pagination = forwardRef41(
         ...props,
         children: [
           /* @__PURE__ */ jsxs46("div", { className: "aviala-pagination__controls", children: [
-            /* @__PURE__ */ jsx57(
+            /* @__PURE__ */ jsx58(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10091,18 +10309,18 @@ var Pagination = forwardRef41(
                 iconOnly: true,
                 "aria-label": "Previous page",
                 disabled: currentPage <= 1,
-                leftIcon: /* @__PURE__ */ jsx57(DirectionArrowLeftLight, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx58(DirectionArrowLeftLight, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage - 1)
               }
             ),
-            /* @__PURE__ */ jsx57("div", { className: "aviala-pagination__pages", children: pages.map(
+            /* @__PURE__ */ jsx58("div", { className: "aviala-pagination__pages", children: pages.map(
               (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsxs46(
                 Popover,
                 {
                   open: openEllipsis === index,
                   onOpenChange: (open) => setOpenEllipsis(open ? index : null),
                   children: [
-                    /* @__PURE__ */ jsx57(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+                    /* @__PURE__ */ jsx58(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx58(
                       "button",
                       {
                         type: "button",
@@ -10113,10 +10331,10 @@ var Pagination = forwardRef41(
                         ),
                         "aria-label": "\u66F4\u591A\u9875\u7801",
                         "aria-haspopup": "menu",
-                        children: /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: "\u2026" })
+                        children: /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children: "\u2026" })
                       }
                     ) }),
-                    /* @__PURE__ */ jsx57(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ jsx57("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ jsx57(
+                    /* @__PURE__ */ jsx58(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ jsx58("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ jsx58(
                       "button",
                       {
                         type: "button",
@@ -10129,14 +10347,14 @@ var Pagination = forwardRef41(
                           setPage(p);
                           setOpenEllipsis(null);
                         },
-                        children: /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: p })
+                        children: /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children: p })
                       },
                       p
                     )) }) })
                   ]
                 },
                 `ellipsis-${index}`
-              ) : /* @__PURE__ */ jsx57(
+              ) : /* @__PURE__ */ jsx58(
                 "button",
                 {
                   type: "button",
@@ -10148,12 +10366,12 @@ var Pagination = forwardRef41(
                   "data-active": item === currentPage ? "true" : void 0,
                   "aria-current": item === currentPage ? "page" : void 0,
                   onClick: () => setPage(item),
-                  children: /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: item })
+                  children: /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children: item })
                 },
                 item
               )
             ) }),
-            /* @__PURE__ */ jsx57(
+            /* @__PURE__ */ jsx58(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -10161,14 +10379,14 @@ var Pagination = forwardRef41(
                 iconOnly: true,
                 "aria-label": "Next page",
                 disabled: currentPage >= safePageCount,
-                leftIcon: /* @__PURE__ */ jsx57(DirectionArrowRightLight4, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx58(DirectionArrowRightLight4, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage + 1)
               }
             )
           ] }),
           showJump ? /* @__PURE__ */ jsxs46("div", { className: "aviala-pagination__jump", children: [
-            /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: jumpLabel }),
-            /* @__PURE__ */ jsx57(
+            /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children: jumpLabel }),
+            /* @__PURE__ */ jsx58(
               Input,
               {
                 className: "aviala-pagination__jump-input",
@@ -10189,14 +10407,14 @@ var Pagination = forwardRef41(
             )
           ] }) : null,
           showSizeChanger ? /* @__PURE__ */ jsxs46("div", { className: "aviala-pagination__size", children: [
-            /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", children: sizeLabel }),
+            /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children: sizeLabel }),
             /* @__PURE__ */ jsxs46(
               Select,
               {
                 value: String(pageSize),
                 onValueChange: (value) => setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ jsx57(
+                  /* @__PURE__ */ jsx58(
                     SelectTrigger,
                     {
                       size: "regular",
@@ -10204,7 +10422,7 @@ var Pagination = forwardRef41(
                       "aria-label": "Page size"
                     }
                   ),
-                  /* @__PURE__ */ jsx57(SelectContent, { children: /* @__PURE__ */ jsx57(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx57(
+                  /* @__PURE__ */ jsx58(SelectContent, { children: /* @__PURE__ */ jsx58(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx58(
                     SelectItem,
                     {
                       value: String(option),
@@ -10234,9 +10452,9 @@ import {
   forwardRef as forwardRef42,
   isValidElement as isValidElement17
 } from "react";
-import { Fragment as Fragment10, jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
 var Card = forwardRef42(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx58("div", { ref, className: cn("aviala-card", className), ...props, children })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx59("div", { ref, className: cn("aviala-card", className), ...props, children })
 );
 Card.displayName = "Card";
 function renderCardIcon(node) {
@@ -10249,7 +10467,7 @@ function renderCardIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx58("span", { className: "aviala-card-head__icon", children: content });
+  return /* @__PURE__ */ jsx59("span", { className: "aviala-card-head__icon", children: content });
 }
 var CardHead = forwardRef42(
   ({
@@ -10267,35 +10485,35 @@ var CardHead = forwardRef42(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ jsx58(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx58(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ jsx59(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx59(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (slotType) {
         case "action":
           return /* @__PURE__ */ jsxs47("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ jsx58(
+            secondaryAction ?? /* @__PURE__ */ jsx59(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ jsx58(GeneralSetting2, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx59(GeneralSetting2, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx58(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ jsx59("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx59(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
           ] });
         case "switch":
           return /* @__PURE__ */ jsxs47("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx58(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx59("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx59(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return select != null ? /* @__PURE__ */ jsx58("div", { className: "aviala-card-head__trailing", children: select }) : null;
+          return select != null ? /* @__PURE__ */ jsx59("div", { className: "aviala-card-head__trailing", children: select }) : null;
       }
     };
     return /* @__PURE__ */ jsxs47(
@@ -10307,8 +10525,8 @@ var CardHead = forwardRef42(
         ...props,
         children: [
           /* @__PURE__ */ jsxs47("div", { className: "aviala-card-head__main", children: [
-            renderCardIcon(icon ?? /* @__PURE__ */ jsx58(GeneralSetting2, { "aria-hidden": true })),
-            /* @__PURE__ */ jsx58("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ jsx58(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
+            renderCardIcon(icon ?? /* @__PURE__ */ jsx59(GeneralSetting2, { "aria-hidden": true })),
+            /* @__PURE__ */ jsx59("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ jsx59(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
           ] }),
           renderTrailing()
         ]
@@ -10318,7 +10536,7 @@ var CardHead = forwardRef42(
 );
 CardHead.displayName = "CardHead";
 var CardBody = forwardRef42(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx58("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ jsx58("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", children }) : children }) })
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx59("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ jsx59("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx59(Typography, { level: "text", as: "span", children }) : children }) })
 );
 CardBody.displayName = "CardBody";
 var CardBottom = forwardRef42(
@@ -10334,7 +10552,7 @@ var CardBottom = forwardRef42(
     children,
     ...props
   }, ref) => {
-    const primaryAction = action ?? /* @__PURE__ */ jsx58(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx58(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ jsx59(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx59(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       if (children != null) return children;
@@ -10342,8 +10560,8 @@ var CardBottom = forwardRef42(
         case "switch":
           return /* @__PURE__ */ jsxs47(Fragment10, { children: [
             primaryAction,
-            /* @__PURE__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx58(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx59("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx59(Switch, { ...switchProps })
           ] });
         case "select":
           return select;
@@ -10351,29 +10569,29 @@ var CardBottom = forwardRef42(
         default:
           return /* @__PURE__ */ jsxs47(Fragment10, { children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ jsx58(
+            secondaryAction ?? /* @__PURE__ */ jsx59(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": "More",
-                leftIcon: /* @__PURE__ */ jsx58(GeneralSetting2, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx59(GeneralSetting2, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsx58("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx58(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ jsx59("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx59(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
           ] });
       }
     };
-    return /* @__PURE__ */ jsx58(
+    return /* @__PURE__ */ jsx59(
       "div",
       {
         ref,
         className: cn("aviala-card-bottom", className),
         "data-type": slotType,
         ...props,
-        children: /* @__PURE__ */ jsx58("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
+        children: /* @__PURE__ */ jsx59("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
       }
     );
   }
@@ -10386,9 +10604,9 @@ import {
   forwardRef as forwardRef43,
   isValidElement as isValidElement18
 } from "react";
-import { Fragment as Fragment11, jsx as jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx60, jsxs as jsxs48 } from "react/jsx-runtime";
 var Table = forwardRef43(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx59(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx60(
     "div",
     {
       ref,
@@ -10401,7 +10619,7 @@ var Table = forwardRef43(
 );
 Table.displayName = "Table";
 var TableRow = forwardRef43(
-  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ jsx59(
+  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ jsx60(
     "div",
     {
       ref,
@@ -10415,7 +10633,7 @@ var TableRow = forwardRef43(
 );
 TableRow.displayName = "TableRow";
 var TableHead = forwardRef43(
-  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ jsx59(
+  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ jsx60(
     "div",
     {
       ref,
@@ -10423,7 +10641,7 @@ var TableHead = forwardRef43(
       className: cn("aviala-table-head", className),
       "data-content": content,
       ...props,
-      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx59(Typography, { level: "caption", as: "span", children }) : children
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx60(Typography, { level: "caption", as: "span", children }) : children
     }
   )
 );
@@ -10438,7 +10656,7 @@ function renderCellIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx59("span", { className: "aviala-table-cell__icon", children: content });
+  return /* @__PURE__ */ jsx60("span", { className: "aviala-table-cell__icon", children: content });
 }
 var TableCell = forwardRef43(
   ({
@@ -10459,29 +10677,29 @@ var TableCell = forwardRef43(
       if (children != null) return children;
       switch (content) {
         case "checkbox":
-          return /* @__PURE__ */ jsx59(Checkbox, { ...checkboxProps });
+          return /* @__PURE__ */ jsx60(Checkbox, { ...checkboxProps });
         case "icon+text":
           return /* @__PURE__ */ jsxs48(Fragment11, { children: [
             renderCellIcon(icon),
-            /* @__PURE__ */ jsx59("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx59(Typography, { level: "text", as: "span", children: text }) })
+            /* @__PURE__ */ jsx60("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx60(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "people":
           return /* @__PURE__ */ jsxs48(Fragment11, { children: [
-            people ?? /* @__PURE__ */ jsx59(Avatar, { content: "text", level: "text", children: "A" }),
-            /* @__PURE__ */ jsx59("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx59(Typography, { level: "text", as: "span", children: text }) })
+            people ?? /* @__PURE__ */ jsx60(Avatar, { content: "text", level: "text", children: "A" }),
+            /* @__PURE__ */ jsx60("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx60(Typography, { level: "text", as: "span", children: text }) })
           ] });
         case "badge":
-          return badge ?? /* @__PURE__ */ jsx59(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
+          return badge ?? /* @__PURE__ */ jsx60(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
         case "switch":
-          return /* @__PURE__ */ jsx59(Switch, { ...switchProps });
+          return /* @__PURE__ */ jsx60(Switch, { ...switchProps });
         case "action":
-          return /* @__PURE__ */ jsx59("div", { className: "aviala-table-cell__actions", children: actions });
+          return /* @__PURE__ */ jsx60("div", { className: "aviala-table-cell__actions", children: actions });
         case "text":
         default:
-          return /* @__PURE__ */ jsx59("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx59(Typography, { level: "text", as: "span", children: text }) });
+          return /* @__PURE__ */ jsx60("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx60(Typography, { level: "text", as: "span", children: text }) });
       }
     };
-    return /* @__PURE__ */ jsx59(
+    return /* @__PURE__ */ jsx60(
       "div",
       {
         ref,