@aviala-design/spiral 2.8.1 → 2.9.0

package/dist/index.js

@@ -323,6 +323,9 @@ var zhCN = {
   Modal: {
     close: "\u5173\u95ED\u5BF9\u8BDD\u6846"
   },
+  Drawer: {
+    close: "\u5173\u95ED\u62BD\u5C49"
+  },
   Feedback: {
     close: "\u5173\u95ED"
   },
@@ -457,6 +460,9 @@ var enUS = {
   Modal: {
     close: "Close dialog"
   },
+  Drawer: {
+    close: "Close drawer"
+  },
   Feedback: {
     close: "Dismiss"
   },
@@ -4948,6 +4954,7 @@ import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cva as cva10 } from "class-variance-authority";
 import {
   forwardRef as forwardRef25,
+  useLayoutEffect as useLayoutEffect4,
   useState as useState11
 } from "react";
 
@@ -5094,6 +5101,7 @@ var Slider = forwardRef25(
     onLostPointerCapture,
     showValueTooltip = false,
     formatValueTooltip,
+    orientation,
     ...props
   }, ref) => {
     const resolvedType = type ?? "default";
@@ -5106,10 +5114,31 @@ var Slider = forwardRef25(
     const [activeThumbIndex, setActiveThumbIndex] = useState11(
       null
     );
+    const valueTransitionAxisKey = `${resolvedType}:${orientation ?? "horizontal"}`;
+    const [valueTransitionGate, setValueTransitionGate] = useState11({
+      axisKey: valueTransitionAxisKey,
+      ready: false
+    });
+    const valueTransitionReady = valueTransitionGate.axisKey === valueTransitionAxisKey && valueTransitionGate.ready;
     const [uncontrolledValue, setUncontrolledValue] = useState11(
       resolvedDefaultValue
     );
     const currentValues = value ?? uncontrolledValue;
+    useLayoutEffect4(() => {
+      let frame2 = 0;
+      const frame1 = requestAnimationFrame(() => {
+        frame2 = requestAnimationFrame(() => {
+          setValueTransitionGate({
+            axisKey: valueTransitionAxisKey,
+            ready: true
+          });
+        });
+      });
+      return () => {
+        cancelAnimationFrame(frame1);
+        cancelAnimationFrame(frame2);
+      };
+    }, [valueTransitionAxisKey]);
     const handleValueChange = (next) => {
       if (value == null) setUncontrolledValue(next);
       if (showValueTooltip) {
@@ -5161,7 +5190,9 @@ var Slider = forwardRef25(
         "data-type": resolvedType,
         "data-disabled": disabled ? "true" : void 0,
         "data-dragging": isDragging ? "true" : void 0,
+        "data-value-transition": valueTransitionReady ? "true" : void 0,
         "data-value-tooltip": showValueTooltip ? "true" : void 0,
+        orientation,
         onValueChange: handleValueChange,
         onPointerDown: handlePointerDown,
         onPointerMove: handlePointerMove,
@@ -5458,7 +5489,7 @@ import {
   useCallback as useCallback10,
   useContext as useContext10,
   useEffect as useEffect8,
-  useLayoutEffect as useLayoutEffect4,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo6,
   useRef as useRef7,
   useState as useState13
@@ -5977,7 +6008,7 @@ function CascaderOptionsMenu({ className }) {
     }
     return paths;
   }, [activePath, getOptionsAtPath2, selectedPath]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!open) {
       prevColumnCountRef.current = null;
       prevColumnPathsRef.current = [];
@@ -6157,7 +6188,7 @@ import {
   useCallback as useCallback12,
   useEffect as useEffect10,
   useId as useId5,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo9,
   useRef as useRef9,
   useState as useState14
@@ -6371,7 +6402,7 @@ import { useMemo as useMemo8 } from "react";
 import {
   useCallback as useCallback11,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect5,
+  useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo7,
   useRef as useRef8
 } from "react";
@@ -6627,7 +6658,7 @@ function DatePickerTimeWheelColumn({
     }
     scrollEndTimerRef.current = setTimeout(settleScroll, WHEEL_SCROLL_END_MS);
   }, [settleScroll, syncClipTrack]);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     syncScrollToValue("auto");
     syncClipTrack();
     const raf = requestAnimationFrame(() => {
@@ -7607,7 +7638,7 @@ function DatePickerCalendar({ className }) {
   const [panelSlide, setPanelSlide] = useState14(null);
   const panelRef = useRef9(panel);
   panelRef.current = panel;
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     const previous = panelRef.current;
     if (targetPanel === previous) return;
     if (prefersReducedMotion2()) {
@@ -7623,7 +7654,7 @@ function DatePickerCalendar({ className }) {
     setPanel(targetPanel);
     panelRef.current = targetPanel;
   }, [targetPanel]);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     const previous = contentViewRef.current;
     if (targetContentView === previous) return;
     if (prefersReducedMotion2()) {
@@ -7636,7 +7667,7 @@ function DatePickerCalendar({ className }) {
     setContentView(targetContentView);
     contentViewRef.current = targetContentView;
   }, [targetContentView]);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     const previous = prevViewMonthRef.current;
     const diff = monthDiff(previous, viewMonth);
     prevViewMonthRef.current = viewMonth;
@@ -7649,7 +7680,7 @@ function DatePickerCalendar({ className }) {
       outgoingMonth: previous
     });
   }, [contentView, panel, viewMonth]);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     if (!pendingDayFocusRef.current || !focusedDay) return;
     const grid = dayGridRef.current;
     if (!grid) return;
@@ -8707,10 +8738,168 @@ var ModalFooter = forwardRef31(
 );
 ModalFooter.displayName = "ModalFooter";
 
+// src/components/drawer.tsx
+import * as DialogPrimitive2 from "@radix-ui/react-dialog";
+import { SymbolWrong as SymbolWrong3 } from "@aviala-design/icons";
+import { cva as cva12 } from "class-variance-authority";
+import {
+  cloneElement as cloneElement9,
+  forwardRef as forwardRef32,
+  isValidElement as isValidElement14,
+  useState as useState20
+} from "react";
+import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
+var DRAWER_ICON_SIZE = 22;
+var drawerContentVariants = cva12("aviala-drawer-content", {
+  variants: {
+    position: {
+      left: "aviala-drawer-content--position-left",
+      right: "aviala-drawer-content--position-right",
+      top: "aviala-drawer-content--position-top",
+      bottom: "aviala-drawer-content--position-bottom"
+    }
+  },
+  defaultVariants: {
+    position: "right"
+  }
+});
+function assignRef4(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+function renderDrawerIcon(node) {
+  if (!node) return null;
+  const content = isValidElement14(node) && typeof node.type !== "string" ? cloneElement9(node, {
+    width: DRAWER_ICON_SIZE,
+    height: DRAWER_ICON_SIZE,
+    className: cn(
+      node.props.className,
+      "shrink-0"
+    )
+  }) : node;
+  return /* @__PURE__ */ jsx50("span", { className: "aviala-drawer__icon", "aria-hidden": true, children: content });
+}
+var Drawer = DialogPrimitive2.Root;
+var DrawerTrigger = DialogPrimitive2.Trigger;
+var DrawerPortal = DialogPrimitive2.Portal;
+var DrawerClose = DialogPrimitive2.Close;
+var DrawerOverlay = forwardRef32(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+  DialogPrimitive2.Overlay,
+  {
+    ref,
+    className: cn("aviala-drawer-overlay", className),
+    ...props
+  }
+));
+DrawerOverlay.displayName = DialogPrimitive2.Overlay.displayName;
+var DrawerContent = forwardRef32(
+  ({
+    className,
+    children,
+    position = "right",
+    portalled = true,
+    showOverlay = true,
+    onOpenAutoFocus,
+    ...props
+  }, ref) => {
+    const [overlayContainer, setOverlayContainer] = useState20(null);
+    const overlay = showOverlay ? /* @__PURE__ */ jsx50(DrawerOverlay, {}) : null;
+    const panel = /* @__PURE__ */ jsx50(
+      DialogPrimitive2.Content,
+      {
+        ref: (node) => {
+          assignRef4(ref, node);
+          setOverlayContainer(node);
+        },
+        className: cn(drawerContentVariants({ position }), className),
+        "data-position": position ?? "right",
+        onOpenAutoFocus,
+        ...props,
+        children: /* @__PURE__ */ jsx50(OverlayContainerProvider, { container: overlayContainer, children: /* @__PURE__ */ jsx50("div", { className: "aviala-drawer-content__surface", children }) })
+      }
+    );
+    if (!portalled) {
+      return /* @__PURE__ */ jsxs35(Fragment7, { children: [
+        overlay,
+        panel
+      ] });
+    }
+    return /* @__PURE__ */ jsxs35(DialogPrimitive2.Portal, { children: [
+      overlay,
+      panel
+    ] });
+  }
+);
+DrawerContent.displayName = DialogPrimitive2.Content.displayName;
+var DrawerHeader = forwardRef32(
+  ({
+    className,
+    children,
+    icon,
+    showIcon = false,
+    showClose = true,
+    closeLabel,
+    ...props
+  }, ref) => {
+    const locale = useLocaleMessages("Drawer");
+    const resolvedCloseLabel = closeLabel ?? locale.close;
+    return /* @__PURE__ */ jsx50("div", { ref, className: cn("aviala-drawer__header", className), ...props, children: /* @__PURE__ */ jsxs35("div", { className: "aviala-drawer__header-row", children: [
+      showIcon ? renderDrawerIcon(icon) : null,
+      /* @__PURE__ */ jsx50("div", { className: "aviala-drawer__header-main", children }),
+      showClose ? /* @__PURE__ */ jsx50(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx50(
+        Button,
+        {
+          type: "button",
+          mode: "noBackgroundCustom",
+          iconOnly: true,
+          "aria-label": resolvedCloseLabel,
+          className: "aviala-drawer__close",
+          leftIcon: /* @__PURE__ */ jsx50(SymbolWrong3, { "aria-hidden": true })
+        }
+      ) }) : null
+    ] }) });
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerTitle = forwardRef32(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50(DialogPrimitive2.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx50(Typography, { level: "text", className: cn("aviala-drawer__title", className), children }) }));
+DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
+var DrawerDescription = forwardRef32(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50(DialogPrimitive2.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx50(Typography, { level: "caption", className: cn("aviala-drawer__description", className), children }) }));
+DrawerDescription.displayName = DialogPrimitive2.Description.displayName;
+function DrawerHeaderText({
+  title,
+  description,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx50(DrawerHeader, { ...props, children: /* @__PURE__ */ jsxs35("div", { className: "aviala-drawer__header-typeface", children: [
+    /* @__PURE__ */ jsx50(DrawerTitle, { children: title }),
+    description ? /* @__PURE__ */ jsx50(DrawerDescription, { children: description }) : null
+  ] }) });
+}
+var DrawerBody = forwardRef32(
+  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, className: cn("aviala-drawer__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ jsx50(
+    Typeface,
+    {
+      className: "aviala-drawer__body-typeface",
+      content: "textTitle",
+      primary: title,
+      secondary: description ?? children
+    }
+  ) : children })
+);
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = forwardRef32(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, className: cn("aviala-drawer__footer", className), ...props })
+);
+DrawerFooter.displayName = "DrawerFooter";
+
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
+import { forwardRef as forwardRef33 } from "react";
+import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
 var TOOLTIP_DELAY_DURATION = 300;
 function TooltipProvider({
   children,
@@ -8718,7 +8907,7 @@ function TooltipProvider({
   skipDelayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     TooltipPrimitive.Provider,
     {
       delayDuration,
@@ -8730,7 +8919,7 @@ function TooltipProvider({
 }
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = forwardRef32(
+var TooltipContent = forwardRef33(
   ({
     className,
     children,
@@ -8741,7 +8930,7 @@ var TooltipContent = forwardRef32(
     ...props
   }, ref) => {
     const overlayContainer = useOverlayPortalContainer();
-    return /* @__PURE__ */ jsx50(TooltipPrimitive.Portal, { container: overlayContainer, children: /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsx51(TooltipPrimitive.Portal, { container: overlayContainer, children: /* @__PURE__ */ jsxs36(
       TooltipPrimitive.Content,
       {
         ref,
@@ -8750,7 +8939,7 @@ var TooltipContent = forwardRef32(
         className: cn("aviala-tooltip-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx51(
             "div",
             {
               className: cn(
@@ -8760,13 +8949,13 @@ var TooltipContent = forwardRef32(
               children
             }
           ),
-          showArrow ? /* @__PURE__ */ jsx50(
+          showArrow ? /* @__PURE__ */ jsx51(
             TooltipPrimitive.Arrow,
             {
               asChild: true,
               width: TOOLTIP_POINTER.width,
               height: TOOLTIP_POINTER.height,
-              children: /* @__PURE__ */ jsx50(
+              children: /* @__PURE__ */ jsx51(
                 OverlayPointerSvg,
                 {
                   className: "aviala-tooltip-content__arrow",
@@ -8789,9 +8978,9 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect14,
   useRef as useRef12,
-  useState as useState20
+  useState as useState21
 } from "react";
-import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs37 } from "react/jsx-runtime";
 var RESPONSIVE_TOOLTIP_LONG_PRESS_MS = 500;
 var LONG_PRESS_MOVE_THRESHOLD_PX = 10;
 function ResponsiveTooltip({
@@ -8812,7 +9001,7 @@ function ResponsiveTooltip({
 }) {
   const coarse = useCoarsePointer();
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = useState20(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState21(defaultOpen);
   const open = isControlled ? openProp : internalOpen;
   const setOpen = useCallback16(
     (next) => {
@@ -8863,8 +9052,8 @@ function ResponsiveTooltip({
     pressOriginRef.current = null;
   }, [clearLongPressTimer]);
   if (coarse) {
-    return /* @__PURE__ */ jsxs36(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsxs37(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx52(
         PopoverTrigger,
         {
           asChild: true,
@@ -8887,7 +9076,7 @@ function ResponsiveTooltip({
           children
         }
       ),
-      /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52(
         PopoverContent,
         {
           appearance: "tooltip",
@@ -8903,7 +9092,7 @@ function ResponsiveTooltip({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     Tooltip,
     {
       delayDuration,
@@ -8911,8 +9100,8 @@ function ResponsiveTooltip({
       defaultOpen,
       onOpenChange,
       children: [
-        /* @__PURE__ */ jsx51(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx52(
           TooltipContent,
           {
             side,
@@ -8931,23 +9120,23 @@ function ResponsiveTooltip({
 }
 
 // src/components/feedback.tsx
-import { cva as cva12 } from "class-variance-authority";
+import { cva as cva13 } from "class-variance-authority";
 import {
   GeneralNotification,
   SymbolInformationCircle as SymbolInformationCircle2,
   SymbolRightCircle,
   SymbolWarningCircle,
-  SymbolWrong as SymbolWrong3,
+  SymbolWrong as SymbolWrong4,
   SymbolWrongCircle as SymbolWrongCircle2
 } from "@aviala-design/icons";
 import {
-  cloneElement as cloneElement9,
-  forwardRef as forwardRef33,
-  isValidElement as isValidElement14
+  cloneElement as cloneElement10,
+  forwardRef as forwardRef34,
+  isValidElement as isValidElement15
 } from "react";
-import { jsx as jsx52, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
 var FEEDBACK_ICON_SIZE = 22;
-var feedbackVariants = cva12("aviala-feedback", {
+var feedbackVariants = cva13("aviala-feedback", {
   variants: {
     type: {
       information: "aviala-feedback--type-information",
@@ -8973,7 +9162,7 @@ var feedbackVariants = cva12("aviala-feedback", {
 });
 function renderFeedbackIcon(node) {
   if (!node) return null;
-  const content = isValidElement14(node) && typeof node.type !== "string" ? cloneElement9(node, {
+  const content = isValidElement15(node) && typeof node.type !== "string" ? cloneElement10(node, {
     width: FEEDBACK_ICON_SIZE,
     height: FEEDBACK_ICON_SIZE,
     className: cn(
@@ -8981,25 +9170,25 @@ function renderFeedbackIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx52("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx53("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__ */ jsx52(SymbolInformationCircle2, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx53(SymbolInformationCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ jsx52(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx53(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "wrong":
-      return /* @__PURE__ */ jsx52(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx53(SymbolWrongCircle2, { thickness, mode: iconMode, "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ jsx52(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx53(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "normal":
-      return /* @__PURE__ */ jsx52(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
+      return /* @__PURE__ */ jsx53(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
   }
 }
-var Feedback = forwardRef33(
+var Feedback = forwardRef34(
   ({
     className,
     type = "information",
@@ -9023,7 +9212,7 @@ var Feedback = forwardRef33(
     const tone = mode === "primary" ? "white" : "default";
     const isSmall = resolvedSize === "small";
     const resolvedRole = resolvedType === "wrong" ? "alert" : "status";
-    return /* @__PURE__ */ jsx52(
+    return /* @__PURE__ */ jsx53(
       "div",
       {
         ref,
@@ -9037,9 +9226,9 @@ var Feedback = forwardRef33(
         "data-size": resolvedSize,
         "data-mode": mode,
         ...props,
-        children: /* @__PURE__ */ jsxs37("div", { className: "aviala-feedback__body", children: [
+        children: /* @__PURE__ */ jsxs38("div", { className: "aviala-feedback__body", children: [
           renderFeedbackIcon(icon ?? defaultStatusIcon(resolvedType, mode)),
-          isSmall ? /* @__PURE__ */ jsx52(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx52(
+          isSmall ? /* @__PURE__ */ jsx53(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx53(
             Typeface,
             {
               className: "aviala-feedback__typeface",
@@ -9049,7 +9238,7 @@ var Feedback = forwardRef33(
               tone
             }
           ),
-          action ? /* @__PURE__ */ jsx52(
+          action ? /* @__PURE__ */ jsx53(
             Link,
             {
               level: "text",
@@ -9065,7 +9254,7 @@ var Feedback = forwardRef33(
               children: action
             }
           ) : null,
-          showClose ? /* @__PURE__ */ jsx52(
+          showClose ? /* @__PURE__ */ jsx53(
             Link,
             {
               level: "text",
@@ -9074,7 +9263,7 @@ var Feedback = forwardRef33(
               href: onClose ? "#" : void 0,
               "aria-label": resolvedCloseLabel,
               className: "aviala-feedback__close",
-              leftIcon: /* @__PURE__ */ jsx52(SymbolWrong3, { "aria-hidden": true }),
+              leftIcon: /* @__PURE__ */ jsx53(SymbolWrong4, { "aria-hidden": true }),
               onClick: (event) => {
                 if (onClose) {
                   event.preventDefault();
@@ -9095,18 +9284,18 @@ import {
   SymbolInformationCircle as SymbolInformationCircle3,
   SymbolRightCircle as SymbolRightCircle2,
   SymbolWarningCircle as SymbolWarningCircle2,
-  SymbolWrong as SymbolWrong4,
+  SymbolWrong as SymbolWrong5,
   SymbolWrongCircle as SymbolWrongCircle3
 } from "@aviala-design/icons";
-import { cva as cva13 } from "class-variance-authority";
+import { cva as cva14 } from "class-variance-authority";
 import {
-  cloneElement as cloneElement10,
-  forwardRef as forwardRef34,
-  isValidElement as isValidElement15
+  cloneElement as cloneElement11,
+  forwardRef as forwardRef35,
+  isValidElement as isValidElement16
 } from "react";
-import { jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
 var ALERT_ICON_SIZE = 16;
-var alertVariants = cva13("aviala-alert", {
+var alertVariants = cva14("aviala-alert", {
   variants: {
     type: {
       info: "aviala-alert--type-info",
@@ -9132,7 +9321,7 @@ var alertVariants = cva13("aviala-alert", {
 });
 function renderAlertIcon(node) {
   if (!node) return null;
-  const content = isValidElement15(node) && typeof node.type !== "string" ? cloneElement10(node, {
+  const content = isValidElement16(node) && typeof node.type !== "string" ? cloneElement11(node, {
     width: ALERT_ICON_SIZE,
     height: ALERT_ICON_SIZE,
     className: cn(
@@ -9140,23 +9329,23 @@ function renderAlertIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx53("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx54("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__ */ jsx53(SymbolInformationCircle3, { ...iconProps });
+      return /* @__PURE__ */ jsx54(SymbolInformationCircle3, { ...iconProps });
     case "warning":
-      return /* @__PURE__ */ jsx53(SymbolWarningCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx54(SymbolWarningCircle2, { ...iconProps });
     case "error":
-      return /* @__PURE__ */ jsx53(SymbolWrongCircle3, { ...iconProps });
+      return /* @__PURE__ */ jsx54(SymbolWrongCircle3, { ...iconProps });
     case "success":
-      return /* @__PURE__ */ jsx53(SymbolRightCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx54(SymbolRightCircle2, { ...iconProps });
   }
 }
-var Alert = forwardRef34(
+var Alert = forwardRef35(
   ({
     className,
     type = "info",
@@ -9184,7 +9373,7 @@ var Alert = forwardRef34(
     const resolvedType = type ?? "info";
     const resolvedRole = resolvedType === "error" ? "alert" : "status";
     const hasActions = showActions && (action || secondaryAction);
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs39(
       "div",
       {
         ref,
@@ -9196,9 +9385,9 @@ var Alert = forwardRef34(
         "data-appearance": appearance,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs38("div", { className: "aviala-alert__body", children: [
+          /* @__PURE__ */ jsxs39("div", { className: "aviala-alert__body", children: [
             showIcon ? renderAlertIcon(icon ?? defaultStatusIcon2(resolvedType)) : null,
-            isSmall ? /* @__PURE__ */ jsx53(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx53(
+            isSmall ? /* @__PURE__ */ jsx54(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx54(
               Typeface,
               {
                 className: "aviala-alert__typeface",
@@ -9207,7 +9396,7 @@ var Alert = forwardRef34(
                 secondary: description
               }
             ),
-            quickAction ? /* @__PURE__ */ jsx53(
+            quickAction ? /* @__PURE__ */ jsx54(
               Link,
               {
                 level: "text",
@@ -9223,7 +9412,7 @@ var Alert = forwardRef34(
                 children: quickAction
               }
             ) : null,
-            dismissible ? /* @__PURE__ */ jsx53(
+            dismissible ? /* @__PURE__ */ jsx54(
               Link,
               {
                 level: "text",
@@ -9232,7 +9421,7 @@ var Alert = forwardRef34(
                 href: onDismiss ? "#" : void 0,
                 "aria-label": resolvedCloseLabel,
                 className: "aviala-alert__close",
-                leftIcon: /* @__PURE__ */ jsx53(SymbolWrong4, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx54(SymbolWrong5, { "aria-hidden": true }),
                 onClick: (event) => {
                   if (onDismiss) {
                     event.preventDefault();
@@ -9242,8 +9431,8 @@ var Alert = forwardRef34(
               }
             ) : null
           ] }),
-          hasActions ? /* @__PURE__ */ jsxs38("div", { className: "aviala-alert__actions", children: [
-            action ? /* @__PURE__ */ jsx53(
+          hasActions ? /* @__PURE__ */ jsxs39("div", { className: "aviala-alert__actions", children: [
+            action ? /* @__PURE__ */ jsx54(
               Link,
               {
                 level: "caption",
@@ -9259,7 +9448,7 @@ var Alert = forwardRef34(
                 children: action
               }
             ) : null,
-            secondaryAction ? /* @__PURE__ */ jsx53(
+            secondaryAction ? /* @__PURE__ */ jsx54(
               Link,
               {
                 level: "caption",
@@ -9290,34 +9479,34 @@ import {
   GeneralSetting
 } from "@aviala-design/icons";
 import {
-  cloneElement as cloneElement11,
-  forwardRef as forwardRef35,
-  isValidElement as isValidElement16
+  cloneElement as cloneElement12,
+  forwardRef as forwardRef36,
+  isValidElement as isValidElement17
 } from "react";
-import { Fragment as Fragment7, jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
-var List = forwardRef35(
-  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs39("div", { ref, className: cn("aviala-list", className), ...props, children: [
-    title != null ? /* @__PURE__ */ jsx54(ListTitle, { children: title }) : null,
-    /* @__PURE__ */ jsx54(ListGroup, { children })
+import { Fragment as Fragment8, jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
+var List = forwardRef36(
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs40("div", { ref, className: cn("aviala-list", className), ...props, children: [
+    title != null ? /* @__PURE__ */ jsx55(ListTitle, { children: title }) : null,
+    /* @__PURE__ */ jsx55(ListGroup, { children })
   ] })
 );
 List.displayName = "List";
-var ListTitle = forwardRef35(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx54("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx54("span", { className: cn(typographyVariants({ level: "text" })), children }) })
+var ListTitle = forwardRef36(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx55("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx55("span", { className: cn(typographyVariants({ level: "text" })), children }) })
 );
 ListTitle.displayName = "ListTitle";
-var ListGroup = forwardRef35(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx54("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
+var ListGroup = forwardRef36(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx55("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
 );
 ListGroup.displayName = "ListGroup";
 function ListItemGroup({ label, children, className }) {
-  return /* @__PURE__ */ jsxs39("div", { className: cn("aviala-list", className), children: [
-    label != null ? /* @__PURE__ */ jsx54(ListTitle, { children: label }) : null,
-    /* @__PURE__ */ jsx54(ListGroup, { children })
+  return /* @__PURE__ */ jsxs40("div", { className: cn("aviala-list", className), children: [
+    label != null ? /* @__PURE__ */ jsx55(ListTitle, { children: label }) : null,
+    /* @__PURE__ */ jsx55(ListGroup, { children })
   ] });
 }
-var ListDivider = forwardRef35(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx54(
+var ListDivider = forwardRef36(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
     "span",
     {
       ref,
@@ -9328,15 +9517,15 @@ var ListDivider = forwardRef35(
   )
 );
 ListDivider.displayName = "ListDivider";
-var ListSeparator = forwardRef35(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx54("hr", { ref, className: cn("aviala-list-separator", className), ...props })
+var ListSeparator = forwardRef36(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx55("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__ */ jsx54(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx54(GeneralSetting, { "aria-hidden": true }));
-  const rendered = isValidElement16(content) && typeof content.type !== "string" ? cloneElement11(content, {
+  const content = node ?? (leading === "shaped" ? /* @__PURE__ */ jsx55(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx55(GeneralSetting, { "aria-hidden": true }));
+  const rendered = isValidElement17(content) && typeof content.type !== "string" ? cloneElement12(content, {
     width: iconSize,
     height: iconSize,
     className: cn(
@@ -9344,7 +9533,7 @@ function renderLeadingIcon(node, leading) {
       "shrink-0"
     )
   }) : content;
-  return /* @__PURE__ */ jsx54("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx55(
     "span",
     {
       className: cn(
@@ -9354,7 +9543,7 @@ function renderLeadingIcon(node, leading) {
     }
   ) });
 }
-var ListItem = forwardRef35(
+var ListItem = forwardRef36(
   ({
     className,
     itemType = "select",
@@ -9385,45 +9574,45 @@ var ListItem = forwardRef35(
     const ChevronIcon = rtl ? DirectionArrowLeftLight3 : DirectionArrowRightLight3;
     const isInteractive = interactive ?? (onClick != null || href != null);
     const chevronVisible = showChevron ?? itemType === "action";
-    const primaryAction = action ?? /* @__PURE__ */ jsx54(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx54(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
-    const chevron = chevronVisible ? /* @__PURE__ */ jsx54("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx54(ChevronIcon, { width: 18, height: 18 }) }) : null;
+    const primaryAction = action ?? /* @__PURE__ */ jsx55(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx55(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const chevron = chevronVisible ? /* @__PURE__ */ jsx55("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx55(ChevronIcon, { width: 18, height: 18 }) }) : null;
     const renderTrailing = () => {
       const hideActions = !showTrailing || trailing === null;
       if (hideActions) {
-        return chevron && itemType === "action" ? /* @__PURE__ */ jsx54("div", { className: "aviala-list-item__more", children: chevron }) : null;
+        return chevron && itemType === "action" ? /* @__PURE__ */ jsx55("div", { className: "aviala-list-item__more", children: chevron }) : null;
       }
       if (trailing !== void 0) return trailing;
       switch (itemType) {
         case "action":
-          return /* @__PURE__ */ jsxs39("div", { className: "aviala-list-item__more", children: [
-            /* @__PURE__ */ jsxs39("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ jsxs40("div", { className: "aviala-list-item__more", children: [
+            /* @__PURE__ */ jsxs40("div", { className: "aviala-list-item__trailing", children: [
               primaryAction,
-              secondaryAction ?? /* @__PURE__ */ jsx54(
+              secondaryAction ?? /* @__PURE__ */ jsx55(
                 Button,
                 {
                   mode: "default",
                   size: "regular",
                   iconOnly: true,
                   "aria-label": locale.more,
-                  leftIcon: /* @__PURE__ */ jsx54(GeneralSetting, { "aria-hidden": true })
+                  leftIcon: /* @__PURE__ */ jsx55(GeneralSetting, { "aria-hidden": true })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx54(ListDivider, {}),
+            /* @__PURE__ */ jsx55(ListDivider, {}),
             chevron
           ] });
         case "switch":
-          return /* @__PURE__ */ jsxs39("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ jsxs40("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx54(ListDivider, {}),
-            /* @__PURE__ */ jsx54(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx55(ListDivider, {}),
+            /* @__PURE__ */ jsx55(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return /* @__PURE__ */ jsxs39("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ jsxs40("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx54(ListDivider, {}),
-            /* @__PURE__ */ jsx54("span", { className: "aviala-list-item__select", children: select })
+            /* @__PURE__ */ jsx55(ListDivider, {}),
+            /* @__PURE__ */ jsx55("span", { className: "aviala-list-item__select", children: select })
           ] });
       }
     };
@@ -9437,15 +9626,15 @@ var ListItem = forwardRef35(
       "data-top-divider": showTopDivider === void 0 ? void 0 : showTopDivider ? "true" : "false"
     };
     const trailingNode = renderTrailing();
-    const body = /* @__PURE__ */ jsxs39(Fragment7, { children: [
+    const body = /* @__PURE__ */ jsxs40(Fragment8, { children: [
       renderLeadingIcon(icon, leading),
-      /* @__PURE__ */ jsx54("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs39("div", { className: "aviala-list-item__content", children: [
-        /* @__PURE__ */ jsx54("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx54(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
+      /* @__PURE__ */ jsx55("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs40("div", { className: "aviala-list-item__content", children: [
+        /* @__PURE__ */ jsx55("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx55(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
         trailingNode
       ] }) })
     ] });
     if (href && !disabled) {
-      return /* @__PURE__ */ jsx54(
+      return /* @__PURE__ */ jsx55(
         "a",
         {
           ref,
@@ -9461,7 +9650,7 @@ var ListItem = forwardRef35(
         }
       );
     }
-    return /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx55(
       "div",
       {
         ref,
@@ -9482,16 +9671,16 @@ import * as PopoverPrimitive7 from "@radix-ui/react-popover";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import {
   createContext as createContext12,
-  forwardRef as forwardRef36,
+  forwardRef as forwardRef37,
   useCallback as useCallback17,
   useContext as useContext13,
   useEffect as useEffect15,
-  useLayoutEffect as useLayoutEffect7,
+  useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo11,
   useRef as useRef13,
-  useState as useState21
+  useState as useState22
 } from "react";
-import { Fragment as Fragment8, jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs41 } from "react/jsx-runtime";
 function navigationItemButtonMode(active) {
   return active ? "second" : "noBackgroundCustom";
 }
@@ -9667,7 +9856,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
   const layoutTrackingFrameRef = useRef13(null);
   const isLayoutTrackingRef = useRef13(false);
   const isInitialMount = useRef13(true);
-  const [activeRevision, setActiveRevision] = useState21(0);
+  const [activeRevision, setActiveRevision] = useState22(0);
   const measureIndicator = useCallback17(() => {
     const group = groupRef.current;
     if (!group) return null;
@@ -9761,7 +9950,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
       isInitialMount.current = false;
     }
   }, []);
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const group = groupRef.current;
     const next = measureIndicator();
     if (!next) return;
@@ -9809,7 +9998,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
     syncIndicator,
     groupRef
   ]);
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const group = groupRef.current;
     if (!group) return;
     const observer = new MutationObserver((mutations) => {
@@ -9894,7 +10083,7 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
   }, [direction, groupRef, measureIndicator, syncIndicator]);
   return onIndicatorRef;
 }
-var Navigation = forwardRef36(
+var Navigation = forwardRef37(
   ({
     className,
     as: Tag2 = "nav",
@@ -9902,7 +10091,7 @@ var Navigation = forwardRef36(
     direction = "vertical",
     dividingLine = false,
     ...props
-  }, ref) => /* @__PURE__ */ jsx55(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx55(
+  }, ref) => /* @__PURE__ */ jsx56(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx56(
     Tag2,
     {
       ref,
@@ -9915,8 +10104,8 @@ var Navigation = forwardRef36(
   ) })
 );
 Navigation.displayName = "Navigation";
-var NavigationBrand = forwardRef36(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
+var NavigationBrand = forwardRef37(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx56(
     "div",
     {
       ref,
@@ -9926,30 +10115,30 @@ var NavigationBrand = forwardRef36(
   )
 );
 NavigationBrand.displayName = "NavigationBrand";
-var NavigationBrandTitle = forwardRef36(({ className, asChild = false, children, ...props }, ref) => {
+var NavigationBrandTitle = forwardRef37(({ className, asChild = false, children, ...props }, ref) => {
   const Comp = asChild ? Slot5 : "a";
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     Comp,
     {
       ref,
       className: cn("aviala-navigation-brand__title aviala-focus-ring", className),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx55(Typography, { level: "text", as: "span", children })
+      children: asChild ? children : /* @__PURE__ */ jsx56(Typography, { level: "text", as: "span", children })
     }
   );
 });
 NavigationBrandTitle.displayName = "NavigationBrandTitle";
-var NavigationSection = forwardRef36(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx55(
+var NavigationSection = forwardRef37(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx56(
   "div",
   {
     ref,
     className: cn("aviala-navigation-section", className),
     ...props,
-    children: /* @__PURE__ */ jsx55(Typography, { level: "caption", as: "p", children })
+    children: /* @__PURE__ */ jsx56(Typography, { level: "caption", as: "p", children })
   }
 ));
 NavigationSection.displayName = "NavigationSection";
-var NavigationGroup = forwardRef36(
+var NavigationGroup = forwardRef37(
   ({ className, children, ...props }, ref) => {
     const direction = useNavigationDirection();
     const layoutKey = useThemeLayoutKey();
@@ -9970,14 +10159,14 @@ var NavigationGroup = forwardRef36(
       },
       [ref]
     );
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs41(
       "div",
       {
         ref: setRefs,
         className: cn("aviala-navigation-group", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx56(
             "span",
             {
               ref: onIndicatorRef,
@@ -9993,17 +10182,17 @@ var NavigationGroup = forwardRef36(
   }
 );
 NavigationGroup.displayName = "NavigationGroup";
-var NavigationItemGroup = forwardRef36(({ className, expanded, children, ...props }, ref) => {
+var NavigationItemGroup = forwardRef37(({ className, expanded, children, ...props }, ref) => {
   const isCollapsible = expanded !== void 0;
   const isCollapsed = isCollapsible && !expanded;
   const innerRef = useRef13(null);
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const inner = innerRef.current;
     if (!inner) return;
     if (isCollapsed) inner.setAttribute("inert", "");
     else inner.removeAttribute("inert");
   }, [isCollapsed]);
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     "div",
     {
       ref,
@@ -10011,7 +10200,7 @@ var NavigationItemGroup = forwardRef36(({ className, expanded, children, ...prop
       "data-expanded": isCollapsible ? expanded ? "true" : "false" : void 0,
       "aria-hidden": isCollapsed ? true : void 0,
       ...props,
-      children: isCollapsible ? /* @__PURE__ */ jsx55("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
+      children: isCollapsible ? /* @__PURE__ */ jsx56("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
     }
   );
 });
@@ -10022,9 +10211,9 @@ function renderItemIcon3(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx55("span", { className: "aviala-navigation-item__icon", children: content });
+  return /* @__PURE__ */ jsx56("span", { className: "aviala-navigation-item__icon", children: content });
 }
-var NavigationItem = forwardRef36(
+var NavigationItem = forwardRef37(
   ({
     className,
     active,
@@ -10039,9 +10228,9 @@ var NavigationItem = forwardRef36(
     const Comp = asChild ? Slot5 : "a";
     const isActive = active ?? ariaCurrent === "page";
     const mode = navigationItemButtonMode(isActive);
-    const controlContent = /* @__PURE__ */ jsxs40(Fragment8, { children: [
+    const controlContent = /* @__PURE__ */ jsxs41(Fragment9, { children: [
       renderItemIcon3(leftIcon),
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx56(
         Typography,
         {
           level: "text",
@@ -10050,15 +10239,15 @@ var NavigationItem = forwardRef36(
           children
         }
       ),
-      rightIcon ? /* @__PURE__ */ jsx55("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+      rightIcon ? /* @__PURE__ */ jsx56("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
     ] });
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       "span",
       {
         className: cn("aviala-navigation-item", className),
         "data-item-type": itemType,
         "data-active": isActive ? "true" : "false",
-        children: /* @__PURE__ */ jsx55(
+        children: /* @__PURE__ */ jsx56(
           Comp,
           {
             ref,
@@ -10077,7 +10266,7 @@ var NavigationItem = forwardRef36(
   }
 );
 NavigationItem.displayName = "NavigationItem";
-var NavigationActions = forwardRef36(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx55(
+var NavigationActions = forwardRef37(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx56(
   "div",
   {
     ref,
@@ -10087,7 +10276,7 @@ var NavigationActions = forwardRef36(({ className, children, ...props }, ref) =>
   }
 ));
 NavigationActions.displayName = "NavigationActions";
-var NavigationActionsSlot = forwardRef36(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
+var NavigationActionsSlot = forwardRef37(({ className, ...props }, ref) => /* @__PURE__ */ jsx56(
   "div",
   {
     ref,
@@ -10113,10 +10302,10 @@ function NavigationItemMenu({
   onOpenChange,
   children
 }) {
-  const [internalValue, setInternalValue] = useState21(defaultValue);
+  const [internalValue, setInternalValue] = useState22(defaultValue);
   const isValueControlled = valueProp !== void 0;
   const value = isValueControlled ? valueProp : internalValue;
-  const [internalOpen, setInternalOpen] = useState21(false);
+  const [internalOpen, setInternalOpen] = useState22(false);
   const isOpenControlled = openProp !== void 0;
   const open = isOpenControlled ? openProp : internalOpen;
   const closeTimerRef = useRef13(null);
@@ -10179,9 +10368,9 @@ function NavigationItemMenu({
     },
     [cancelClose, setOpen]
   );
-  return /* @__PURE__ */ jsx55(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx55(Popover, { open, onOpenChange: handleOpenChange, children }) });
+  return /* @__PURE__ */ jsx56(NavigationItemMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx56(Popover, { open, onOpenChange: handleOpenChange, children }) });
 }
-var NavigationItemMenuTrigger = forwardRef36(
+var NavigationItemMenuTrigger = forwardRef37(
   ({
     className,
     active,
@@ -10193,7 +10382,7 @@ var NavigationItemMenuTrigger = forwardRef36(
     const menu = useNavigationItemMenuContext("NavigationItemMenuTrigger");
     const isActive = active ?? menu.hasSelection;
     const mode = navigationItemButtonMode(isActive);
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       "span",
       {
         className: cn("aviala-navigation-item", className),
@@ -10201,7 +10390,7 @@ var NavigationItemMenuTrigger = forwardRef36(
         "data-active": isActive ? "true" : "false",
         onMouseEnter: () => menu.openMenu(true),
         onMouseLeave: menu.scheduleClose,
-        children: /* @__PURE__ */ jsx55(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs40(
+        children: /* @__PURE__ */ jsx56(PopoverPrimitive7.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs41(
           "button",
           {
             ref,
@@ -10214,7 +10403,7 @@ var NavigationItemMenuTrigger = forwardRef36(
             ...props,
             children: [
               renderItemIcon3(leftIcon),
-              /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx56(
                 Typography,
                 {
                   level: "text",
@@ -10223,7 +10412,7 @@ var NavigationItemMenuTrigger = forwardRef36(
                   children
                 }
               ),
-              rightIcon ? /* @__PURE__ */ jsx55("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+              rightIcon ? /* @__PURE__ */ jsx56("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
             ]
           }
         ) })
@@ -10232,7 +10421,7 @@ var NavigationItemMenuTrigger = forwardRef36(
   }
 );
 NavigationItemMenuTrigger.displayName = "NavigationItemMenuTrigger";
-var NavigationItemMenuContent = forwardRef36(
+var NavigationItemMenuContent = forwardRef37(
   ({
     className,
     side,
@@ -10246,7 +10435,7 @@ var NavigationItemMenuContent = forwardRef36(
     const direction = useNavigationDirection();
     const writingDirection = useDirection();
     const menu = useNavigationItemMenuContext("NavigationItemMenuContent");
-    return /* @__PURE__ */ jsx55(PopoverPrimitive7.Portal, { container: overlayContainer, children: /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(PopoverPrimitive7.Portal, { container: overlayContainer, children: /* @__PURE__ */ jsx56(
       PopoverPrimitive7.Content,
       {
         ref,
@@ -10267,7 +10456,7 @@ var NavigationItemMenuContent = forwardRef36(
   }
 );
 NavigationItemMenuContent.displayName = "NavigationItemMenuContent";
-var NavigationItemMenuItem = forwardRef36(
+var NavigationItemMenuItem = forwardRef37(
   ({
     className,
     value,
@@ -10281,7 +10470,7 @@ var NavigationItemMenuItem = forwardRef36(
   }, ref) => {
     const menu = useNavigationItemMenuContext("NavigationItemMenuItem");
     const isSelected = selected ?? menu.value === value;
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs41(
       "button",
       {
         ref,
@@ -10301,7 +10490,7 @@ var NavigationItemMenuItem = forwardRef36(
         ...props,
         children: [
           renderItemIcon3(leftIcon),
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx56(
             Typography,
             {
               level: "text",
@@ -10310,7 +10499,7 @@ var NavigationItemMenuItem = forwardRef36(
               children
             }
           ),
-          rightIcon ? /* @__PURE__ */ jsx55("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
+          rightIcon ? /* @__PURE__ */ jsx56("span", { className: "aviala-navigation-menu-item__trailing", children: renderItemIcon3(rightIcon) }) : null
         ]
       }
     );
@@ -10321,16 +10510,16 @@ NavigationItemMenuItem.displayName = "NavigationItemMenuItem";
 // src/components/tab.tsx
 import {
   createContext as createContext13,
-  forwardRef as forwardRef37,
+  forwardRef as forwardRef38,
   useCallback as useCallback18,
   useContext as useContext14,
   useEffect as useEffect16,
-  useLayoutEffect as useLayoutEffect8,
+  useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo12,
   useRef as useRef14,
-  useState as useState22
+  useState as useState23
 } from "react";
-import { jsx as jsx56, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
 var TabContext = createContext13(null);
 function useTabContext() {
   const ctx = useContext14(TabContext);
@@ -10345,7 +10534,7 @@ function tabItemButtonMode(style, active) {
   return active ? "noBackground" : "noBackgroundCustom";
 }
 function useTabState(value, defaultValue, onValueChange) {
-  const [internal, setInternal] = useState22(defaultValue ?? "");
+  const [internal, setInternal] = useState23(defaultValue ?? "");
   const isControlled = value !== void 0;
   const current = isControlled ? value : internal;
   const setValue = useCallback18(
@@ -10406,7 +10595,7 @@ function useTabIndicator(listRef, enabled, layoutKey, value) {
     },
     [enabled, listRef]
   );
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (!enabled) {
       if (indicatorRef.current) indicatorRef.current.dataset.visible = "false";
       return;
@@ -10437,11 +10626,11 @@ function renderTabIcon(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx56("span", { className: "aviala-tab-item__icon", children: content });
+  return /* @__PURE__ */ jsx57("span", { className: "aviala-tab-item__icon", children: content });
 }
 function TabCardEar({ side }) {
   const d = side === "start" ? "M8 8L0 8C4 8 8 5.5 8 0L8 8Z" : "M0 8L8 8C4 8 0 5.5 0 0L0 8Z";
-  return /* @__PURE__ */ jsx56("span", { className: "aviala-tab-item__ear", "data-side": side, "aria-hidden": true, children: /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57("span", { className: "aviala-tab-item__ear", "data-side": side, "aria-hidden": true, children: /* @__PURE__ */ jsx57(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -10449,11 +10638,11 @@ function TabCardEar({ side }) {
       height: "8",
       viewBox: "0 0 8 8",
       fill: "none",
-      children: /* @__PURE__ */ jsx56("path", { d, fill: "currentColor" })
+      children: /* @__PURE__ */ jsx57("path", { d, fill: "currentColor" })
     }
   ) });
 }
-var Tab = forwardRef37(
+var Tab = forwardRef38(
   ({
     className,
     style: tabStyle = "default",
@@ -10539,7 +10728,7 @@ var Tab = forwardRef37(
         }
       }
     };
-    return /* @__PURE__ */ jsx56(TabContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs41(
+    return /* @__PURE__ */ jsx57(TabContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs42(
       "div",
       {
         ref,
@@ -10549,8 +10738,8 @@ var Tab = forwardRef37(
         ...spiralDebugId("tab"),
         ...props,
         children: [
-          startSlot != null && startSlot !== false ? /* @__PURE__ */ jsx56("div", { className: "aviala-tab__slot", "data-slot": "start", children: startSlot }) : null,
-          /* @__PURE__ */ jsxs41(
+          startSlot != null && startSlot !== false ? /* @__PURE__ */ jsx57("div", { className: "aviala-tab__slot", "data-slot": "start", children: startSlot }) : null,
+          /* @__PURE__ */ jsxs42(
             "div",
             {
               ref: listRef,
@@ -10560,7 +10749,7 @@ var Tab = forwardRef37(
               onKeyDown: handleListKeyDown,
               ...spiralDebugId("tab.list"),
               children: [
-                showIndicator ? /* @__PURE__ */ jsx56(
+                showIndicator ? /* @__PURE__ */ jsx57(
                   "span",
                   {
                     ref: indicatorRef,
@@ -10573,14 +10762,14 @@ var Tab = forwardRef37(
               ]
             }
           ),
-          endSlot != null && endSlot !== false ? /* @__PURE__ */ jsx56("div", { className: "aviala-tab__slot", "data-slot": "end", children: endSlot }) : null
+          endSlot != null && endSlot !== false ? /* @__PURE__ */ jsx57("div", { className: "aviala-tab__slot", "data-slot": "end", children: endSlot }) : null
         ]
       }
     ) });
   }
 );
 Tab.displayName = "Tab";
-var TabItem = forwardRef37(
+var TabItem = forwardRef38(
   ({
     className,
     value,
@@ -10603,7 +10792,7 @@ var TabItem = forwardRef37(
       [ctx, ref, value]
     );
     const showCardEars = ctx.style === "card" && active;
-    return /* @__PURE__ */ jsxs41(
+    return /* @__PURE__ */ jsxs42(
       "span",
       {
         className: cn("aviala-tab-item", className),
@@ -10612,8 +10801,8 @@ var TabItem = forwardRef37(
         "data-disabled": disabled ? "true" : void 0,
         ...spiralDebugId("tab.item"),
         children: [
-          showCardEars ? /* @__PURE__ */ jsx56(TabCardEar, { side: "start" }) : null,
-          /* @__PURE__ */ jsxs41(
+          showCardEars ? /* @__PURE__ */ jsx57(TabCardEar, { side: "start" }) : null,
+          /* @__PURE__ */ jsxs42(
             "button",
             {
               ref: setRefs,
@@ -10636,7 +10825,7 @@ var TabItem = forwardRef37(
               ...props,
               children: [
                 renderTabIcon(leftIcon),
-                children != null && children !== false ? /* @__PURE__ */ jsx56(
+                children != null && children !== false ? /* @__PURE__ */ jsx57(
                   Typography,
                   {
                     level: "text",
@@ -10648,7 +10837,7 @@ var TabItem = forwardRef37(
               ]
             }
           ),
-          showCardEars ? /* @__PURE__ */ jsx56(TabCardEar, { side: "end" }) : null
+          showCardEars ? /* @__PURE__ */ jsx57(TabCardEar, { side: "end" }) : null
         ]
       }
     );
@@ -10658,14 +10847,14 @@ TabItem.displayName = "TabItem";
 
 // src/components/upload.tsx
 import { GeneralUpload } from "@aviala-design/icons";
-import { cva as cva14 } from "class-variance-authority";
+import { cva as cva15 } from "class-variance-authority";
 import {
-  forwardRef as forwardRef38,
+  forwardRef as forwardRef39,
   useRef as useRef15,
-  useState as useState23
+  useState as useState24
 } from "react";
-import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
-var uploadVariants = cva14("aviala-upload aviala-focus-ring", {
+import { jsx as jsx58, jsxs as jsxs43 } from "react/jsx-runtime";
+var uploadVariants = cva15("aviala-upload aviala-focus-ring", {
   variants: {
     style: {
       default: "aviala-upload--style-default",
@@ -10676,7 +10865,7 @@ var uploadVariants = cva14("aviala-upload aviala-focus-ring", {
     style: "default"
   }
 });
-var Upload = forwardRef38(
+var Upload = forwardRef39(
   ({
     className,
     style = "default",
@@ -10699,7 +10888,7 @@ var Upload = forwardRef38(
     const resolvedDescription = description ?? locale.description;
     const resolvedLabel = label ?? locale.label;
     const inputRef = useRef15(null);
-    const [dragging, setDragging] = useState23(false);
+    const [dragging, setDragging] = useState24(false);
     const resolvedStyle = style ?? "default";
     const allowDrag = dragAndDrop ?? resolvedStyle === "large";
     const openPicker = () => {
@@ -10718,7 +10907,7 @@ var Upload = forwardRef38(
         onChange?.(event.dataTransfer.files);
       }
     };
-    return /* @__PURE__ */ jsxs42(
+    return /* @__PURE__ */ jsxs43(
       "div",
       {
         ref,
@@ -10749,7 +10938,7 @@ var Upload = forwardRef38(
         onDrop: handleDrop,
         ...props,
         children: [
-          /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx58(
             "input",
             {
               ref: inputRef,
@@ -10764,8 +10953,8 @@ var Upload = forwardRef38(
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsx57("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx57(GeneralUpload, { width: 16, height: 16 }) }),
-          resolvedStyle === "large" ? /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx58("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx58(GeneralUpload, { width: 16, height: 16 }) }),
+          resolvedStyle === "large" ? /* @__PURE__ */ jsx58(
             Typeface,
             {
               className: "aviala-upload__typeface",
@@ -10773,7 +10962,7 @@ var Upload = forwardRef38(
               primary: resolvedTitle,
               secondary: resolvedDescription
             }
-          ) : /* @__PURE__ */ jsx57(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: resolvedLabel })
+          ) : /* @__PURE__ */ jsx58(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: resolvedLabel })
         ]
       }
     );
@@ -10783,7 +10972,7 @@ Upload.displayName = "Upload";
 
 // src/components/video/video.tsx
 import {
-  forwardRef as forwardRef39,
+  forwardRef as forwardRef40,
   useImperativeHandle,
   useRef as useRef20
 } from "react";
@@ -10797,14 +10986,14 @@ import {
   GeneralVolumeMin,
   GeneralVolumeSlash
 } from "@aviala-design/icons";
-import { memo as memo2, useEffect as useEffect18, useRef as useRef18, useState as useState26 } from "react";
+import { memo as memo2, useEffect as useEffect18, useRef as useRef18, useState as useState27 } from "react";
 
 // src/components/video/use-video-state.ts
 import {
   useCallback as useCallback19,
   useEffect as useEffect17,
   useRef as useRef16,
-  useState as useState24
+  useState as useState25
 } from "react";
 function videoObjectFitToCss(fit) {
   switch (fit) {
@@ -10869,20 +11058,20 @@ function useVideoState({
   onPrevious,
   onNext
 }) {
-  const [playing, setPlaying] = useState24(false);
-  const [currentTime, setCurrentTime] = useState24(0);
-  const [duration, setDuration] = useState24(0);
-  const [seeking, setSeeking] = useState24(false);
-  const [fullscreen, setFullscreen] = useState24(false);
-  const [internalMuted, setInternalMuted] = useState24(defaultMuted);
+  const [playing, setPlaying] = useState25(false);
+  const [currentTime, setCurrentTime] = useState25(0);
+  const [duration, setDuration] = useState25(0);
+  const [seeking, setSeeking] = useState25(false);
+  const [fullscreen, setFullscreen] = useState25(false);
+  const [internalMuted, setInternalMuted] = useState25(defaultMuted);
   const muted = mutedProp ?? internalMuted;
-  const [internalRate, setInternalRate] = useState24(defaultPlaybackRate);
+  const [internalRate, setInternalRate] = useState25(defaultPlaybackRate);
   const playbackRate = rateProp ?? internalRate;
-  const [internalObjectFit, setInternalObjectFit] = useState24(defaultObjectFit);
+  const [internalObjectFit, setInternalObjectFit] = useState25(defaultObjectFit);
   const objectFit = objectFitProp ?? internalObjectFit;
-  const [internalVolumeBalance, setInternalVolumeBalance] = useState24(defaultVolumeBalance);
+  const [internalVolumeBalance, setInternalVolumeBalance] = useState25(defaultVolumeBalance);
   const volumeBalance = volumeBalanceProp ?? internalVolumeBalance;
-  const [internalVolume, setInternalVolume] = useState24(
+  const [internalVolume, setInternalVolume] = useState25(
     () => Math.min(1, Math.max(0, defaultVolume))
   );
   const volume = volumeProp ?? internalVolume;
@@ -11176,7 +11365,7 @@ function useVideoState({
 }
 
 // src/components/video/video-animated-icon.tsx
-import { memo, useId as useId6, useLayoutEffect as useLayoutEffect9, useRef as useRef17 } from "react";
+import { memo, useId as useId6, useLayoutEffect as useLayoutEffect10, useRef as useRef17 } from "react";
 
 // src/components/video/video-animated-icon-markup.ts
 var VIDEO_ANIMATED_ICON_MARKUP = {
@@ -11187,7 +11376,7 @@ var VIDEO_ANIMATED_ICON_MARKUP = {
 };
 
 // src/components/video/video-animated-icon.tsx
-import { jsx as jsx58, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs44 } from "react/jsx-runtime";
 var VIDEO_TRANSPORT_ANIMATION_MS = 550;
 function prefersReducedMotion3() {
   return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -11261,7 +11450,7 @@ var VideoAnimatedIcon = memo(function VideoAnimatedIcon2({
   const nameRef = useRef17(name);
   nameRef.current = name;
   const isPlayPause = name === "play" || name === "pause";
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (isPlayPause) {
       const playLayer = playLayerRef.current;
       const pauseLayer = pauseLayerRef.current;
@@ -11285,7 +11474,7 @@ var VideoAnimatedIcon = memo(function VideoAnimatedIcon2({
     setLayerRest(layer, true);
     shownRef.current = name;
   }, []);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (playToken === 0) return;
     if (prefersReducedMotion3()) {
       const target2 = nameRef.current;
@@ -11337,7 +11526,7 @@ var VideoAnimatedIcon = memo(function VideoAnimatedIcon2({
     }, VIDEO_TRANSPORT_ANIMATION_MS);
     return () => window.clearTimeout(timer);
   }, [playToken]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (lockRef.current) return;
     if (shownRef.current === name) return;
     if (name !== "play" && name !== "pause") return;
@@ -11350,8 +11539,8 @@ var VideoAnimatedIcon = memo(function VideoAnimatedIcon2({
     shownRef.current = name;
   }, [name]);
   if (isPlayPause) {
-    return /* @__PURE__ */ jsxs43("span", { ref: hostRef, className: "aviala-video__animated-icon", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx58(
+    return /* @__PURE__ */ jsxs44("span", { ref: hostRef, className: "aviala-video__animated-icon", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx59(
         "span",
         {
           ref: playLayerRef,
@@ -11359,7 +11548,7 @@ var VideoAnimatedIcon = memo(function VideoAnimatedIcon2({
           "data-active": "true"
         }
       ),
-      /* @__PURE__ */ jsx58(
+      /* @__PURE__ */ jsx59(
         "span",
         {
           ref: pauseLayerRef,
@@ -11369,7 +11558,7 @@ var VideoAnimatedIcon = memo(function VideoAnimatedIcon2({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     "span",
     {
       ref: hostRef,
@@ -11377,7 +11566,7 @@ var VideoAnimatedIcon = memo(function VideoAnimatedIcon2({
       "data-flip": name === "next" ? "true" : void 0,
       "data-mirror-motion": name === "previous" ? "true" : void 0,
       "aria-hidden": true,
-      children: /* @__PURE__ */ jsx58(
+      children: /* @__PURE__ */ jsx59(
         "span",
         {
           ref: singleLayerRef,
@@ -11391,7 +11580,7 @@ var VideoAnimatedIcon = memo(function VideoAnimatedIcon2({
 });
 
 // src/components/video/video-settings.tsx
-import { jsx as jsx59, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs45 } from "react/jsx-runtime";
 function VideoSettings({
   locale,
   objectFit,
@@ -11400,29 +11589,29 @@ function VideoSettings({
   onVolumeBalanceChange,
   trigger
 }) {
-  return /* @__PURE__ */ jsxs44(Popover, { children: [
-    /* @__PURE__ */ jsx59(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx59(PopoverContent, { side: "top", align: "end", showArrow: true, flush: true, sideOffset: 8, children: /* @__PURE__ */ jsxs44("div", { className: "aviala-video__settings-body", children: [
-      /* @__PURE__ */ jsx59(Typography, { level: "subtitle", children: locale.settingsTitle }),
-      /* @__PURE__ */ jsxs44("div", { className: "aviala-video__settings-section", children: [
-        /* @__PURE__ */ jsx59(Typography, { level: "text", children: locale.aspectRatio }),
-        /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(Popover, { children: [
+    /* @__PURE__ */ jsx60(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx60(PopoverContent, { side: "top", align: "end", showArrow: true, flush: true, sideOffset: 8, children: /* @__PURE__ */ jsxs45("div", { className: "aviala-video__settings-body", children: [
+      /* @__PURE__ */ jsx60(Typography, { level: "subtitle", children: locale.settingsTitle }),
+      /* @__PURE__ */ jsxs45("div", { className: "aviala-video__settings-section", children: [
+        /* @__PURE__ */ jsx60(Typography, { level: "text", children: locale.aspectRatio }),
+        /* @__PURE__ */ jsxs45(
           SegmentatorGroup,
           {
             equalWidth: true,
             value: objectFit,
             onValueChange: (value) => onObjectFitChange(value),
             children: [
-              /* @__PURE__ */ jsx59(SegmentatorItem, { value: "original", children: locale.aspectOriginal }),
-              /* @__PURE__ */ jsx59(SegmentatorItem, { value: "stretch", children: locale.aspectStretch }),
-              /* @__PURE__ */ jsx59(SegmentatorItem, { value: "fill", children: locale.aspectFill })
+              /* @__PURE__ */ jsx60(SegmentatorItem, { value: "original", children: locale.aspectOriginal }),
+              /* @__PURE__ */ jsx60(SegmentatorItem, { value: "stretch", children: locale.aspectStretch }),
+              /* @__PURE__ */ jsx60(SegmentatorItem, { value: "fill", children: locale.aspectFill })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs44("div", { className: "aviala-video__settings-row", children: [
-        /* @__PURE__ */ jsx59(Typography, { level: "text", children: locale.volumeBalance }),
-        /* @__PURE__ */ jsx59(
+      /* @__PURE__ */ jsxs45("div", { className: "aviala-video__settings-row", children: [
+        /* @__PURE__ */ jsx60(Typography, { level: "text", children: locale.volumeBalance }),
+        /* @__PURE__ */ jsx60(
           Switch,
           {
             size: "small",
@@ -11438,8 +11627,8 @@ function VideoSettings({
 
 // src/components/video/video-speed.tsx
 import { SymbolRight as SymbolRight3 } from "@aviala-design/icons";
-import { useState as useState25 } from "react";
-import { jsx as jsx60, jsxs as jsxs45 } from "react/jsx-runtime";
+import { useState as useState26 } from "react";
+import { jsx as jsx61, jsxs as jsxs46 } from "react/jsx-runtime";
 function formatSpeedRate(template, rate) {
   return interpolate(template, { rate });
 }
@@ -11452,11 +11641,11 @@ function VideoSpeed({
   onPlaybackRateChange,
   trigger
 }) {
-  const [open, setOpen] = useState25(false);
-  return /* @__PURE__ */ jsxs45(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx60(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx60(PopoverContent, { side: "top", align: "center", showArrow: true, flush: true, sideOffset: 8, children: /* @__PURE__ */ jsx60("div", { className: "aviala-video__speed-menu", children: /* @__PURE__ */ jsxs45("div", { className: "aviala-select-group", role: "none", children: [
-      /* @__PURE__ */ jsx60(
+  const [open, setOpen] = useState26(false);
+  return /* @__PURE__ */ jsxs46(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx61(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx61(PopoverContent, { side: "top", align: "center", showArrow: true, flush: true, sideOffset: 8, children: /* @__PURE__ */ jsx61("div", { className: "aviala-video__speed-menu", children: /* @__PURE__ */ jsxs46("div", { className: "aviala-select-group", role: "none", children: [
+      /* @__PURE__ */ jsx61(
         "div",
         {
           className: cn(
@@ -11466,7 +11655,7 @@ function VideoSpeed({
           children: title
         }
       ),
-      /* @__PURE__ */ jsx60(
+      /* @__PURE__ */ jsx61(
         "div",
         {
           className: "aviala-select-group__slot",
@@ -11474,7 +11663,7 @@ function VideoSpeed({
           "aria-label": label,
           children: playbackRates.map((rate) => {
             const selected = rate === playbackRate;
-            return /* @__PURE__ */ jsxs45(
+            return /* @__PURE__ */ jsxs46(
               "button",
               {
                 type: "button",
@@ -11488,7 +11677,7 @@ function VideoSpeed({
                   setOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx60(
+                  /* @__PURE__ */ jsx61(
                     "span",
                     {
                       className: cn(
@@ -11498,12 +11687,12 @@ function VideoSpeed({
                       children: formatSpeedRate(rateTemplate, rate)
                     }
                   ),
-                  selected ? /* @__PURE__ */ jsx60(
+                  selected ? /* @__PURE__ */ jsx61(
                     "span",
                     {
                       className: "aviala-select-item__trailing-radio",
                       "aria-hidden": true,
-                      children: /* @__PURE__ */ jsx60(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true })
+                      children: /* @__PURE__ */ jsx61(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true })
                     }
                   ) : null
                 ]
@@ -11518,17 +11707,17 @@ function VideoSpeed({
 }
 
 // src/components/video/video-volume.tsx
-import { jsx as jsx61, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
 function VideoVolume({
   label,
   percent,
   onPercentChange,
   trigger
 }) {
-  return /* @__PURE__ */ jsxs46(Popover, { children: [
-    /* @__PURE__ */ jsx61(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx61(PopoverContent, { side: "top", align: "center", showArrow: true, flush: true, sideOffset: 8, children: /* @__PURE__ */ jsxs46("div", { className: "aviala-video__volume-body", children: [
-      /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsxs47(Popover, { children: [
+    /* @__PURE__ */ jsx62(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx62(PopoverContent, { side: "top", align: "center", showArrow: true, flush: true, sideOffset: 8, children: /* @__PURE__ */ jsxs47("div", { className: "aviala-video__volume-body", children: [
+      /* @__PURE__ */ jsx62(
         Slider,
         {
           className: "aviala-video__volume-slider",
@@ -11542,13 +11731,13 @@ function VideoVolume({
           onValueChange: (values) => onPercentChange(values[0] ?? 0)
         }
       ),
-      /* @__PURE__ */ jsx61(Typography, { level: "text", children: `${percent}%` })
+      /* @__PURE__ */ jsx62(Typography, { level: "text", children: `${percent}%` })
     ] }) })
   ] });
 }
 
 // src/components/video/video-controls.tsx
-import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs48 } from "react/jsx-runtime";
 function volumePercent(volume, muted) {
   if (muted) return 0;
   return Math.round(Math.min(1, Math.max(0, volume)) * 100);
@@ -11556,17 +11745,17 @@ function volumePercent(volume, muted) {
 function VolumeTriggerIcon({
   percent
 }) {
-  if (percent <= 0) return /* @__PURE__ */ jsx62(GeneralVolumeSlash, { mode: "fill", "aria-hidden": true });
-  if (percent < 34) return /* @__PURE__ */ jsx62(GeneralVolumeMin, { mode: "fill", "aria-hidden": true });
-  if (percent < 67) return /* @__PURE__ */ jsx62(GeneralVolumeMiddle, { mode: "fill", "aria-hidden": true });
-  return /* @__PURE__ */ jsx62(GeneralVolumeMax, { mode: "fill", "aria-hidden": true });
+  if (percent <= 0) return /* @__PURE__ */ jsx63(GeneralVolumeSlash, { mode: "fill", "aria-hidden": true });
+  if (percent < 34) return /* @__PURE__ */ jsx63(GeneralVolumeMin, { mode: "fill", "aria-hidden": true });
+  if (percent < 67) return /* @__PURE__ */ jsx63(GeneralVolumeMiddle, { mode: "fill", "aria-hidden": true });
+  return /* @__PURE__ */ jsx63(GeneralVolumeMax, { mode: "fill", "aria-hidden": true });
 }
 function ControlIconButton({
   label,
   icon,
   onClick
 }) {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     Button,
     {
       type: "button",
@@ -11587,27 +11776,27 @@ var VideoTransportButtons = memo2(function VideoTransportButtons2({
   onPrevious,
   onNext
 }) {
-  const [prevToken, setPrevToken] = useState26(0);
-  const [nextToken, setNextToken] = useState26(0);
-  const [playToken, setPlayToken] = useState26(0);
+  const [prevToken, setPrevToken] = useState27(0);
+  const [nextToken, setNextToken] = useState27(0);
+  const [playToken, setPlayToken] = useState27(0);
   const playLockRef = useRef18(false);
-  return /* @__PURE__ */ jsxs47("div", { className: "aviala-video__group", children: [
-    /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs48("div", { className: "aviala-video__group", children: [
+    /* @__PURE__ */ jsx63(
       ControlIconButton,
       {
         label: locale.previous,
-        icon: /* @__PURE__ */ jsx62(VideoAnimatedIcon, { name: "previous", playToken: prevToken }),
+        icon: /* @__PURE__ */ jsx63(VideoAnimatedIcon, { name: "previous", playToken: prevToken }),
         onClick: () => {
           setPrevToken((token) => token + 1);
           onPrevious();
         }
       }
     ),
-    /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsx63(
       ControlIconButton,
       {
         label: playing ? locale.pause : locale.play,
-        icon: /* @__PURE__ */ jsx62(
+        icon: /* @__PURE__ */ jsx63(
           VideoAnimatedIcon,
           {
             name: playing ? "pause" : "play",
@@ -11625,11 +11814,11 @@ var VideoTransportButtons = memo2(function VideoTransportButtons2({
         }
       }
     ),
-    /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsx63(
       ControlIconButton,
       {
         label: locale.next,
-        icon: /* @__PURE__ */ jsx62(VideoAnimatedIcon, { name: "next", playToken: nextToken }),
+        icon: /* @__PURE__ */ jsx63(VideoAnimatedIcon, { name: "next", playToken: nextToken }),
         onClick: () => {
           setNextToken((token) => token + 1);
           onNext();
@@ -11645,8 +11834,8 @@ function VideoTimeInput({
 }) {
   const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
   const timeLabel = `${formatVideoTime(currentTime)} / ${formatVideoTime(safeDuration)}`;
-  const [editing, setEditing] = useState26(false);
-  const [draft, setDraft] = useState26(timeLabel);
+  const [editing, setEditing] = useState27(false);
+  const [draft, setDraft] = useState27(timeLabel);
   useEffect18(() => {
     if (!editing) setDraft(timeLabel);
   }, [editing, timeLabel]);
@@ -11658,7 +11847,7 @@ function VideoTimeInput({
     }
     setEditing(false);
   };
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     Input,
     {
       className: "aviala-video__time",
@@ -11720,9 +11909,9 @@ function VideoControls({
   const sliderMax = safeDuration > 0 ? safeDuration : 1;
   const sliderValue = Math.min(Math.max(0, currentTime), sliderMax);
   const percent = volumePercent(volume, muted);
-  return /* @__PURE__ */ jsx62("div", { className: "aviala-video__controls", children: /* @__PURE__ */ jsxs47("div", { className: "aviala-video__bar", children: [
-    /* @__PURE__ */ jsx62("div", { className: "aviala-video__bar-bg", "aria-hidden": true }),
-    /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63("div", { className: "aviala-video__controls", children: /* @__PURE__ */ jsxs48("div", { className: "aviala-video__bar", children: [
+    /* @__PURE__ */ jsx63("div", { className: "aviala-video__bar-bg", "aria-hidden": true }),
+    /* @__PURE__ */ jsx63(
       VideoTransportButtons,
       {
         playing,
@@ -11732,8 +11921,8 @@ function VideoControls({
         onNext
       }
     ),
-    /* @__PURE__ */ jsxs47("div", { className: "aviala-video__progress", children: [
-      /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsxs48("div", { className: "aviala-video__progress", children: [
+      /* @__PURE__ */ jsx63(
         VideoTimeInput,
         {
           currentTime,
@@ -11746,7 +11935,7 @@ function VideoControls({
           }
         }
       ),
-      /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx63(
         Slider,
         {
           className: "aviala-video__seek",
@@ -11770,8 +11959,8 @@ function VideoControls({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs47("div", { className: "aviala-video__group", children: [
-      /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsxs48("div", { className: "aviala-video__group", children: [
+      /* @__PURE__ */ jsx63(
         VideoSpeed,
         {
           label: locale.speed,
@@ -11780,7 +11969,7 @@ function VideoControls({
           playbackRate,
           playbackRates,
           onPlaybackRateChange,
-          trigger: /* @__PURE__ */ jsx62(
+          trigger: /* @__PURE__ */ jsx63(
             Button,
             {
               type: "button",
@@ -11794,13 +11983,13 @@ function VideoControls({
           )
         }
       ),
-      /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx63(
         VideoVolume,
         {
           label: locale.volume,
           percent,
           onPercentChange: (next) => onVolumeChange(next / 100),
-          trigger: /* @__PURE__ */ jsx62(
+          trigger: /* @__PURE__ */ jsx63(
             Button,
             {
               type: "button",
@@ -11809,12 +11998,12 @@ function VideoControls({
               iconOnly: true,
               allRound: true,
               "aria-label": locale.volume,
-              leftIcon: /* @__PURE__ */ jsx62(VolumeTriggerIcon, { percent })
+              leftIcon: /* @__PURE__ */ jsx63(VolumeTriggerIcon, { percent })
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx63(
         VideoSettings,
         {
           locale,
@@ -11822,7 +12011,7 @@ function VideoControls({
           volumeBalance,
           onObjectFitChange,
           onVolumeBalanceChange,
-          trigger: /* @__PURE__ */ jsx62(
+          trigger: /* @__PURE__ */ jsx63(
             Button,
             {
               type: "button",
@@ -11831,16 +12020,16 @@ function VideoControls({
               iconOnly: true,
               allRound: true,
               "aria-label": locale.settings,
-              leftIcon: /* @__PURE__ */ jsx62(GeneralSetting2, { mode: "fill", "aria-hidden": true })
+              leftIcon: /* @__PURE__ */ jsx63(GeneralSetting2, { mode: "fill", "aria-hidden": true })
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx63(
         ControlIconButton,
         {
           label: fullscreen ? locale.exitFullscreen : locale.fullscreen,
-          icon: /* @__PURE__ */ jsx62(GeneralFullScreen, { mode: "fill", "aria-hidden": true }),
+          icon: /* @__PURE__ */ jsx63(GeneralFullScreen, { mode: "fill", "aria-hidden": true }),
           onClick: onToggleFullscreen
         }
       )
@@ -11853,7 +12042,7 @@ import {
   useCallback as useCallback20,
   useEffect as useEffect19,
   useRef as useRef19,
-  useState as useState27
+  useState as useState28
 } from "react";
 var DEFAULT_AUTO_HIDE_DELAY_MS = 2500;
 function isOverlayOpen() {
@@ -11876,7 +12065,7 @@ function useVideoControlsAutoHide({
   seeking,
   rootRef
 }) {
-  const [hidden, setHidden] = useState27(false);
+  const [hidden, setHidden] = useState28(false);
   const timerRef = useRef19(null);
   const enabledRef = useRef19(enabled);
   const playingRef = useRef19(playing);
@@ -11943,8 +12132,8 @@ function useVideoControlsAutoHide({
 }
 
 // src/components/video/video.tsx
-import { jsx as jsx63, jsxs as jsxs48 } from "react/jsx-runtime";
-var Video = forwardRef39(
+import { jsx as jsx64, jsxs as jsxs49 } from "react/jsx-runtime";
+var Video = forwardRef40(
   ({
     appearance = "default",
     skipSeconds = 10,
@@ -12017,7 +12206,7 @@ var Video = forwardRef39(
       }),
       []
     );
-    return /* @__PURE__ */ jsxs48(
+    return /* @__PURE__ */ jsxs49(
       "div",
       {
         ref: rootRef,
@@ -12038,7 +12227,7 @@ var Video = forwardRef39(
         "data-fullscreen": state.fullscreen ? "true" : void 0,
         ...spiralDebugId("video"),
         children: [
-          /* @__PURE__ */ jsx63("div", { className: "aviala-video__stage", children: /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx64("div", { className: "aviala-video__stage", children: /* @__PURE__ */ jsx64(
             "video",
             {
               ref: videoRef,
@@ -12057,7 +12246,7 @@ var Video = forwardRef39(
               children
             }
           ) }),
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx64(
             VideoControls,
             {
               locale,
@@ -12097,11 +12286,11 @@ import {
   useCallback as useCallback21,
   useEffect as useEffect20,
   useId as useId7,
-  useLayoutEffect as useLayoutEffect10,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo13,
   useRef as useRef21
 } from "react";
-import { jsx as jsx64, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs50 } from "react/jsx-runtime";
 var LOOP_SECTIONS2 = WHEEL_LOOP_SECTIONS;
 var MIDDLE_SECTION2 = WHEEL_LOOP_MIDDLE_SECTION;
 function readMetrics(container) {
@@ -12129,7 +12318,7 @@ function readRawIndex(container, metrics) {
   return Math.round(fractionalIndexAtScrollTop(metrics, container.scrollTop));
 }
 function ScrollPicker({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx64("div", { className: cn("aviala-scroll-picker", className), ...props, children });
+  return /* @__PURE__ */ jsx65("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
 function ScrollPickerColumn({
   className,
@@ -12256,7 +12445,7 @@ function ScrollPickerColumn({
     }
     scrollEndTimerRef.current = setTimeout(settleScroll, WHEEL_SCROLL_END_MS);
   }, [settleScroll, syncClipTrack]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (isUserScrollingRef.current) return;
     if (smoothTargetValueRef.current != null && Object.is(smoothTargetValueRef.current, value)) {
       return;
@@ -12393,9 +12582,9 @@ function ScrollPickerColumn({
     }
   };
   const selectedOptionId = `${reactId}-${getIndex(value)}`;
-  return /* @__PURE__ */ jsx64("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ jsxs49("div", { className: "aviala-scroll-picker-column__viewport", children: [
-    /* @__PURE__ */ jsx64("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
-    /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ jsxs50("div", { className: "aviala-scroll-picker-column__viewport", children: [
+    /* @__PURE__ */ jsx65("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
+    /* @__PURE__ */ jsx65(
       "div",
       {
         ref: scrollRef,
@@ -12406,13 +12595,13 @@ function ScrollPickerColumn({
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsx64("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ jsx65("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
           const isCommitted = Object.is(itemValue, value);
           const valueIndex = loop ? normalizeWheelIndex(index, values.length) : index;
           const optionId = `${reactId}-${loop ? index : valueIndex}`;
           const key = getValueKey?.(itemValue, index) ?? `${String(itemValue)}-${index}`;
           const useSelectedId = isCommitted && (!loop || Math.floor(index / values.length) === MIDDLE_SECTION2);
-          return /* @__PURE__ */ jsx64("li", { className: "contents", children: /* @__PURE__ */ jsx64(
+          return /* @__PURE__ */ jsx65("li", { className: "contents", children: /* @__PURE__ */ jsx65(
             ScrollPickerItem,
             {
               id: useSelectedId ? selectedOptionId : optionId,
@@ -12431,9 +12620,9 @@ function ScrollPickerColumn({
         }) })
       }
     ),
-    /* @__PURE__ */ jsx64("div", { className: "aviala-scroll-picker-column__clip", "aria-hidden": true, children: /* @__PURE__ */ jsx64("div", { ref: clipTrackRef, className: "aviala-scroll-picker-column__clip-track", children: /* @__PURE__ */ jsx64("div", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+    /* @__PURE__ */ jsx65("div", { className: "aviala-scroll-picker-column__clip", "aria-hidden": true, children: /* @__PURE__ */ jsx65("div", { ref: clipTrackRef, className: "aviala-scroll-picker-column__clip-track", children: /* @__PURE__ */ jsx65("div", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
       const key = getValueKey?.(itemValue, index) ?? `clip-${String(itemValue)}-${index}`;
-      return /* @__PURE__ */ jsx64(
+      return /* @__PURE__ */ jsx65(
         "div",
         {
           className: cn(
@@ -12454,7 +12643,7 @@ function ScrollPickerItem({
   className,
   onSelect
 }) {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     "button",
     {
       type: "button",
@@ -12480,20 +12669,20 @@ import {
   DirectionArrowRightLight as DirectionArrowRightLight4,
   SymbolMore
 } from "@aviala-design/icons";
-import { cva as cva15 } from "class-variance-authority";
+import { cva as cva16 } from "class-variance-authority";
 import {
   createContext as createContext14,
-  forwardRef as forwardRef40,
+  forwardRef as forwardRef41,
   useCallback as useCallback22,
   useContext as useContext15,
-  useState as useState28
+  useState as useState29
 } from "react";
-import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
 var BreadcrumbSizeContext = createContext14("default");
 function breadcrumbTypeLevel(size) {
   return size === "small" ? "caption" : "text";
 }
-var breadcrumbVariants = cva15("aviala-breadcrumb", {
+var breadcrumbVariants = cva16("aviala-breadcrumb", {
   variants: {
     size: {
       default: "aviala-breadcrumb--size-default",
@@ -12504,11 +12693,11 @@ var breadcrumbVariants = cva15("aviala-breadcrumb", {
     size: "default"
   }
 });
-var Breadcrumb = forwardRef40(
+var Breadcrumb = forwardRef41(
   ({ className, size = "default", children, ...props }, ref) => {
     const locale = useLocaleMessages("Breadcrumb");
     const resolvedSize = size ?? "default";
-    return /* @__PURE__ */ jsx65(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx66(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx66(
       "nav",
       {
         ref,
@@ -12516,18 +12705,18 @@ var Breadcrumb = forwardRef40(
         className: cn(breadcrumbVariants({ size: resolvedSize }), className),
         "data-size": resolvedSize,
         ...props,
-        children: /* @__PURE__ */ jsx65("ol", { className: "aviala-breadcrumb__list", children })
+        children: /* @__PURE__ */ jsx66("ol", { className: "aviala-breadcrumb__list", children })
       }
     ) });
   }
 );
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbItem = forwardRef40(
+var BreadcrumbItem = forwardRef41(
   ({ className, href, current = false, icon, onClick, children, ...props }, ref) => {
     const size = useContext15(BreadcrumbSizeContext);
-    const label = /* @__PURE__ */ jsxs50(Fragment9, { children: [
-      icon ? /* @__PURE__ */ jsx65("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
-      children != null ? /* @__PURE__ */ jsx65(
+    const label = /* @__PURE__ */ jsxs51(Fragment10, { children: [
+      icon ? /* @__PURE__ */ jsx66("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
+      children != null ? /* @__PURE__ */ jsx66(
         Typography,
         {
           level: breadcrumbTypeLevel(size),
@@ -12537,13 +12726,13 @@ var BreadcrumbItem = forwardRef40(
         }
       ) : null
     ] });
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx66(
       "li",
       {
         ref,
         className: cn("aviala-breadcrumb-item-wrap", className),
         ...props,
-        children: href != null ? /* @__PURE__ */ jsx65(
+        children: href != null ? /* @__PURE__ */ jsx66(
           "a",
           {
             href,
@@ -12552,7 +12741,7 @@ var BreadcrumbItem = forwardRef40(
             "aria-current": current ? "page" : void 0,
             children: label
           }
-        ) : onClick != null ? /* @__PURE__ */ jsx65(
+        ) : onClick != null ? /* @__PURE__ */ jsx66(
           "button",
           {
             type: "button",
@@ -12562,7 +12751,7 @@ var BreadcrumbItem = forwardRef40(
             onClick,
             children: label
           }
-        ) : /* @__PURE__ */ jsx65(
+        ) : /* @__PURE__ */ jsx66(
           "span",
           {
             className: "aviala-breadcrumb-item",
@@ -12576,10 +12765,10 @@ var BreadcrumbItem = forwardRef40(
   }
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbSeparator = forwardRef40(
+var BreadcrumbSeparator = forwardRef41(
   ({ className, children = "/", ...props }, ref) => {
     const size = useContext15(BreadcrumbSizeContext);
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx66(
       "li",
       {
         ref,
@@ -12587,13 +12776,13 @@ var BreadcrumbSeparator = forwardRef40(
         "aria-hidden": true,
         className: cn("aviala-breadcrumb-separator", className),
         ...props,
-        children: /* @__PURE__ */ jsx65(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
+        children: /* @__PURE__ */ jsx66(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
       }
     );
   }
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-var BreadcrumbEllipsisItem = forwardRef40(
+var BreadcrumbEllipsisItem = forwardRef41(
   ({
     className,
     href,
@@ -12604,12 +12793,12 @@ var BreadcrumbEllipsisItem = forwardRef40(
   }, ref) => {
     const rtl = useRtl();
     const ChevronIcon = rtl ? DirectionArrowLeftLight4 : DirectionArrowRightLight4;
-    const content = /* @__PURE__ */ jsxs50(Fragment9, { children: [
-      /* @__PURE__ */ jsx65(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
-      showChevron ? /* @__PURE__ */ jsx65("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx65(ChevronIcon, { width: 14, height: 14, thickness: "Light" }) }) : null
+    const content = /* @__PURE__ */ jsxs51(Fragment10, { children: [
+      /* @__PURE__ */ jsx66(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
+      showChevron ? /* @__PURE__ */ jsx66("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx66(ChevronIcon, { width: 14, height: 14, thickness: "Light" }) }) : null
     ] });
     if (href != null) {
-      return /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsx66(
         "a",
         {
           ref,
@@ -12621,7 +12810,7 @@ var BreadcrumbEllipsisItem = forwardRef40(
         }
       );
     }
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx66(
       "button",
       {
         ref,
@@ -12635,7 +12824,7 @@ var BreadcrumbEllipsisItem = forwardRef40(
   }
 );
 BreadcrumbEllipsisItem.displayName = "BreadcrumbEllipsisItem";
-var BreadcrumbEllipsis = forwardRef40(
+var BreadcrumbEllipsis = forwardRef41(
   ({
     className,
     children,
@@ -12649,7 +12838,7 @@ var BreadcrumbEllipsis = forwardRef40(
   }, ref) => {
     const locale = useLocaleMessages("Breadcrumb");
     const size = useContext15(BreadcrumbSizeContext);
-    const [uncontrolledActivated, setUncontrolledActivated] = useState28(defaultActivated);
+    const [uncontrolledActivated, setUncontrolledActivated] = useState29(defaultActivated);
     const isControlled = activatedProp !== void 0;
     const activated = isControlled ? Boolean(activatedProp) : uncontrolledActivated;
     const setActivated = useCallback22(
@@ -12660,8 +12849,8 @@ var BreadcrumbEllipsis = forwardRef40(
       [isControlled, onActivatedChange]
     );
     const iconSize = 14;
-    const icon = children ?? /* @__PURE__ */ jsx65(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
-    const trigger = /* @__PURE__ */ jsx65(
+    const icon = children ?? /* @__PURE__ */ jsx66(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
+    const trigger = /* @__PURE__ */ jsx66(
       "button",
       {
         type: "button",
@@ -12680,9 +12869,9 @@ var BreadcrumbEllipsis = forwardRef40(
         children: icon
       }
     );
-    return /* @__PURE__ */ jsx65("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ jsxs50(Popover, { open: activated, onOpenChange: setActivated, children: [
-      /* @__PURE__ */ jsx65(PopoverTrigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx66("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ jsxs51(Popover, { open: activated, onOpenChange: setActivated, children: [
+      /* @__PURE__ */ jsx66(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx66(
         PopoverContent,
         {
           className: "aviala-breadcrumb-ellipsis-menu",
@@ -12691,7 +12880,7 @@ var BreadcrumbEllipsis = forwardRef40(
           sideOffset: 7,
           showArrow: false,
           role: "menu",
-          children: /* @__PURE__ */ jsx65("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
+          children: /* @__PURE__ */ jsx66("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
         }
       )
     ] }) : trigger });
@@ -12701,10 +12890,10 @@ BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
 // src/components/pagehead.tsx
 import {
-  forwardRef as forwardRef41
+  forwardRef as forwardRef42
 } from "react";
-import { jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
-var Pagehead = forwardRef41(
+import { jsx as jsx67, jsxs as jsxs52 } from "react/jsx-runtime";
+var Pagehead = forwardRef42(
   ({
     className,
     back,
@@ -12714,16 +12903,16 @@ var Pagehead = forwardRef41(
     actions,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs51("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
-    /* @__PURE__ */ jsxs51("div", { className: "aviala-pagehead__main", children: [
-      back != null ? /* @__PURE__ */ jsx66("div", { className: "aviala-pagehead__back", children: back }) : null,
-      /* @__PURE__ */ jsxs51("div", { className: "aviala-pagehead__title-block", children: [
-        breadcrumb != null ? /* @__PURE__ */ jsx66("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
-        title != null || description != null ? /* @__PURE__ */ jsx66("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ jsx66(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
+  }, ref) => /* @__PURE__ */ jsxs52("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
+    /* @__PURE__ */ jsxs52("div", { className: "aviala-pagehead__main", children: [
+      back != null ? /* @__PURE__ */ jsx67("div", { className: "aviala-pagehead__back", children: back }) : null,
+      /* @__PURE__ */ jsxs52("div", { className: "aviala-pagehead__title-block", children: [
+        breadcrumb != null ? /* @__PURE__ */ jsx67("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
+        title != null || description != null ? /* @__PURE__ */ jsx67("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ jsx67(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
         children
       ] })
     ] }),
-    actions != null ? /* @__PURE__ */ jsx66("div", { className: "aviala-pagehead__actions", children: actions }) : null
+    actions != null ? /* @__PURE__ */ jsx67("div", { className: "aviala-pagehead__actions", children: actions }) : null
   ] })
 );
 Pagehead.displayName = "Pagehead";
@@ -12732,14 +12921,14 @@ Pagehead.displayName = "Pagehead";
 import {
   SymbolRight as SymbolRight4,
   SymbolWarning,
-  SymbolWrong as SymbolWrong5
+  SymbolWrong as SymbolWrong6
 } from "@aviala-design/icons";
-import { cva as cva16 } from "class-variance-authority";
+import { cva as cva17 } from "class-variance-authority";
 import {
-  forwardRef as forwardRef42
+  forwardRef as forwardRef43
 } from "react";
-import { jsx as jsx67, jsxs as jsxs52 } from "react/jsx-runtime";
-var stepsVariants = cva16("aviala-steps", {
+import { jsx as jsx68, jsxs as jsxs53 } from "react/jsx-runtime";
+var stepsVariants = cva17("aviala-steps", {
   variants: {
     direction: {
       horizontal: "aviala-steps--direction-horizontal",
@@ -12750,8 +12939,8 @@ var stepsVariants = cva16("aviala-steps", {
     direction: "horizontal"
   }
 });
-var Steps = forwardRef42(
-  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx67(
+var Steps = forwardRef43(
+  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx68(
     "div",
     {
       ref,
@@ -12766,20 +12955,20 @@ Steps.displayName = "Steps";
 function defaultStepsIconContent(state, index) {
   switch (state) {
     case "done":
-      return /* @__PURE__ */ jsx67(SymbolRight4, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ jsx68(SymbolRight4, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "fail":
-      return /* @__PURE__ */ jsx67(SymbolWrong5, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ jsx68(SymbolWrong6, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ jsx67(SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+      return /* @__PURE__ */ jsx68(SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
     case "waiting":
     case "inProgress":
     case "default":
     default:
-      return index != null ? /* @__PURE__ */ jsx67(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
+      return index != null ? /* @__PURE__ */ jsx68(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
   }
 }
-var StepsIcon = forwardRef42(
-  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ jsx67(
+var StepsIcon = forwardRef43(
+  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ jsx68(
     "span",
     {
       ref,
@@ -12791,7 +12980,7 @@ var StepsIcon = forwardRef42(
   )
 );
 StepsIcon.displayName = "StepsIcon";
-var StepsItem = forwardRef42(
+var StepsItem = forwardRef43(
   ({
     className,
     state = "default",
@@ -12801,7 +12990,7 @@ var StepsItem = forwardRef42(
     icon,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs52(
+  }, ref) => /* @__PURE__ */ jsxs53(
     "div",
     {
       ref,
@@ -12809,9 +12998,9 @@ var StepsItem = forwardRef42(
       "data-state": state,
       ...props,
       children: [
-        icon ?? /* @__PURE__ */ jsx67(StepsIcon, { state, index }),
-        /* @__PURE__ */ jsxs52("div", { className: "aviala-steps-item__body", children: [
-          title != null ? /* @__PURE__ */ jsx67(
+        icon ?? /* @__PURE__ */ jsx68(StepsIcon, { state, index }),
+        /* @__PURE__ */ jsxs53("div", { className: "aviala-steps-item__body", children: [
+          title != null ? /* @__PURE__ */ jsx68(
             Typography,
             {
               level: "subtitle",
@@ -12820,7 +13009,7 @@ var StepsItem = forwardRef42(
               children: title
             }
           ) : null,
-          description != null ? /* @__PURE__ */ jsx67(
+          description != null ? /* @__PURE__ */ jsx68(
             Typography,
             {
               level: "text",
@@ -12843,10 +13032,10 @@ import {
   DirectionArrowRightLight as DirectionArrowRightLight5
 } from "@aviala-design/icons";
 import {
-  forwardRef as forwardRef43,
-  useState as useState29
+  forwardRef as forwardRef44,
+  useState as useState30
 } from "react";
-import { jsx as jsx68, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
 function buildPageList(page, pageCount) {
   if (pageCount <= 7) {
     return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -12879,7 +13068,7 @@ function ellipsisRange(pages, index) {
   for (let p = start; p <= end; p += 1) range.push(p);
   return range;
 }
-var Pagination = forwardRef43(
+var Pagination = forwardRef44(
   ({
     className,
     page: pageProp,
@@ -12904,10 +13093,10 @@ var Pagination = forwardRef43(
     const resolvedJumpLabel = jumpLabel ?? locale.jumpTo;
     const resolvedSizeLabel = sizeLabel ?? locale.pageSize;
     const resolvedSizeOptionLabel = sizeOptionLabel ?? ((size) => interpolate(locale.items, { size }));
-    const [uncontrolledPage, setUncontrolledPage] = useState29(defaultPage);
-    const [uncontrolledPageSize, setUncontrolledPageSize] = useState29(defaultPageSize);
-    const [jumpValue, setJumpValue] = useState29("");
-    const [openEllipsis, setOpenEllipsis] = useState29(null);
+    const [uncontrolledPage, setUncontrolledPage] = useState30(defaultPage);
+    const [uncontrolledPageSize, setUncontrolledPageSize] = useState30(defaultPageSize);
+    const [jumpValue, setJumpValue] = useState30("");
+    const [openEllipsis, setOpenEllipsis] = useState30(null);
     const page = pageProp ?? uncontrolledPage;
     const pageSize = pageSizeProp ?? uncontrolledPageSize;
     const safePageCount = Math.max(1, pageCount);
@@ -12928,7 +13117,7 @@ var Pagination = forwardRef43(
       setPage(parsed);
       setJumpValue("");
     };
-    return /* @__PURE__ */ jsxs53(
+    return /* @__PURE__ */ jsxs54(
       "div",
       {
         ref,
@@ -12937,8 +13126,8 @@ var Pagination = forwardRef43(
         "aria-label": props["aria-label"] ?? locale.pagination,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs53("div", { className: "aviala-pagination__controls", children: [
-            /* @__PURE__ */ jsx68(
+          /* @__PURE__ */ jsxs54("div", { className: "aviala-pagination__controls", children: [
+            /* @__PURE__ */ jsx69(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -12946,18 +13135,18 @@ var Pagination = forwardRef43(
                 iconOnly: true,
                 "aria-label": locale.previous,
                 disabled: currentPage <= 1,
-                leftIcon: /* @__PURE__ */ jsx68(PrevIcon, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx69(PrevIcon, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage - 1)
               }
             ),
-            /* @__PURE__ */ jsx68("div", { className: "aviala-pagination__pages", children: pages.map(
-              (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsxs53(
+            /* @__PURE__ */ jsx69("div", { className: "aviala-pagination__pages", children: pages.map(
+              (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsxs54(
                 Popover,
                 {
                   open: openEllipsis === index,
                   onOpenChange: (open) => setOpenEllipsis(open ? index : null),
                   children: [
-                    /* @__PURE__ */ jsx68(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx68(
+                    /* @__PURE__ */ jsx69(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx69(
                       "button",
                       {
                         type: "button",
@@ -12968,10 +13157,10 @@ var Pagination = forwardRef43(
                         ),
                         "aria-label": locale.morePages,
                         "aria-haspopup": "menu",
-                        children: /* @__PURE__ */ jsx68(Typography, { level: "text", as: "span", children: "\u2026" })
+                        children: /* @__PURE__ */ jsx69(Typography, { level: "text", as: "span", children: "\u2026" })
                       }
                     ) }),
-                    /* @__PURE__ */ jsx68(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ jsx68("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ jsx68(
+                    /* @__PURE__ */ jsx69(PopoverContent, { className: "aviala-pagination__ellipsis-content", showArrow: true, flush: true, children: /* @__PURE__ */ jsx69("div", { className: "aviala-pagination__ellipsis-menu", children: ellipsisRange(pages, index).map((p) => /* @__PURE__ */ jsx69(
                       "button",
                       {
                         type: "button",
@@ -12984,14 +13173,14 @@ var Pagination = forwardRef43(
                           setPage(p);
                           setOpenEllipsis(null);
                         },
-                        children: /* @__PURE__ */ jsx68(Typography, { level: "text", as: "span", children: p })
+                        children: /* @__PURE__ */ jsx69(Typography, { level: "text", as: "span", children: p })
                       },
                       p
                     )) }) })
                   ]
                 },
                 `ellipsis-${index}`
-              ) : /* @__PURE__ */ jsx68(
+              ) : /* @__PURE__ */ jsx69(
                 "button",
                 {
                   type: "button",
@@ -13003,12 +13192,12 @@ var Pagination = forwardRef43(
                   "data-active": item === currentPage ? "true" : void 0,
                   "aria-current": item === currentPage ? "page" : void 0,
                   onClick: () => setPage(item),
-                  children: /* @__PURE__ */ jsx68(Typography, { level: "text", as: "span", children: item })
+                  children: /* @__PURE__ */ jsx69(Typography, { level: "text", as: "span", children: item })
                 },
                 item
               )
             ) }),
-            /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx69(
               Button,
               {
                 mode: "noBackgroundCustom",
@@ -13016,14 +13205,14 @@ var Pagination = forwardRef43(
                 iconOnly: true,
                 "aria-label": locale.next,
                 disabled: currentPage >= safePageCount,
-                leftIcon: /* @__PURE__ */ jsx68(NextIcon, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx69(NextIcon, { "aria-hidden": true }),
                 onClick: () => setPage(currentPage + 1)
               }
             )
           ] }),
-          showJump ? /* @__PURE__ */ jsxs53("div", { className: "aviala-pagination__jump", children: [
-            /* @__PURE__ */ jsx68(Typography, { level: "text", as: "span", children: resolvedJumpLabel }),
-            /* @__PURE__ */ jsx68(
+          showJump ? /* @__PURE__ */ jsxs54("div", { className: "aviala-pagination__jump", children: [
+            /* @__PURE__ */ jsx69(Typography, { level: "text", as: "span", children: resolvedJumpLabel }),
+            /* @__PURE__ */ jsx69(
               Input,
               {
                 className: "aviala-pagination__jump-input",
@@ -13043,15 +13232,15 @@ var Pagination = forwardRef43(
               }
             )
           ] }) : null,
-          showSizeChanger ? /* @__PURE__ */ jsxs53("div", { className: "aviala-pagination__size", children: [
-            /* @__PURE__ */ jsx68(Typography, { level: "text", as: "span", children: resolvedSizeLabel }),
-            /* @__PURE__ */ jsxs53(
+          showSizeChanger ? /* @__PURE__ */ jsxs54("div", { className: "aviala-pagination__size", children: [
+            /* @__PURE__ */ jsx69(Typography, { level: "text", as: "span", children: resolvedSizeLabel }),
+            /* @__PURE__ */ jsxs54(
               Select,
               {
                 value: String(pageSize),
                 onValueChange: (value) => setPageSize(Number(value)),
                 children: [
-                  /* @__PURE__ */ jsx68(
+                  /* @__PURE__ */ jsx69(
                     SelectTrigger,
                     {
                       size: "regular",
@@ -13059,7 +13248,7 @@ var Pagination = forwardRef43(
                       "aria-label": locale.pageSizeAria
                     }
                   ),
-                  /* @__PURE__ */ jsx68(SelectContent, { children: /* @__PURE__ */ jsx68(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx68(
+                  /* @__PURE__ */ jsx69(SelectContent, { children: /* @__PURE__ */ jsx69(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx69(
                     SelectItem,
                     {
                       value: String(option),
@@ -13086,18 +13275,18 @@ import {
   GeneralSetting as GeneralSetting3
 } from "@aviala-design/icons";
 import {
-  cloneElement as cloneElement12,
-  forwardRef as forwardRef44,
-  isValidElement as isValidElement17
+  cloneElement as cloneElement13,
+  forwardRef as forwardRef45,
+  isValidElement as isValidElement18
 } from "react";
-import { Fragment as Fragment10, jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
-var Card = forwardRef44(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx69("div", { ref, className: cn("aviala-card", className), ...props, children })
+import { Fragment as Fragment11, jsx as jsx70, jsxs as jsxs55 } from "react/jsx-runtime";
+var Card = forwardRef45(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx70("div", { ref, className: cn("aviala-card", className), ...props, children })
 );
 Card.displayName = "Card";
 function renderCardIcon(node) {
   if (!node) return null;
-  const content = isValidElement17(node) && typeof node.type !== "string" ? cloneElement12(node, {
+  const content = isValidElement18(node) && typeof node.type !== "string" ? cloneElement13(node, {
     width: 14,
     height: 14,
     className: cn(
@@ -13105,9 +13294,9 @@ function renderCardIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx69("span", { className: "aviala-card-head__icon", children: content });
+  return /* @__PURE__ */ jsx70("span", { className: "aviala-card-head__icon", children: content });
 }
-var CardHead = forwardRef44(
+var CardHead = forwardRef45(
   ({
     className,
     slotType = "select",
@@ -13126,38 +13315,38 @@ var CardHead = forwardRef44(
     const locale = useLocaleMessages("Card");
     const rtl = useRtl();
     const ChevronIcon = rtl ? DirectionArrowLeftLight6 : DirectionArrowRightLight6;
-    const primaryAction = action ?? /* @__PURE__ */ jsx69(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx69(GeneralSetting3, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ jsx70(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx70(GeneralSetting3, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (slotType) {
         case "action":
-          return /* @__PURE__ */ jsxs54("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ jsxs55("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ jsx69(
+            secondaryAction ?? /* @__PURE__ */ jsx70(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": locale.more,
-                leftIcon: /* @__PURE__ */ jsx69(GeneralSetting3, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx70(GeneralSetting3, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsx69("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx69(ChevronIcon, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ jsx70("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx70(ChevronIcon, { width: 14, height: 14, "aria-hidden": true })
           ] });
         case "switch":
-          return /* @__PURE__ */ jsxs54("div", { className: "aviala-card-head__trailing", children: [
+          return /* @__PURE__ */ jsxs55("div", { className: "aviala-card-head__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx69("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx69(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx70("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx70(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return select != null ? /* @__PURE__ */ jsx69("div", { className: "aviala-card-head__trailing", children: select }) : null;
+          return select != null ? /* @__PURE__ */ jsx70("div", { className: "aviala-card-head__trailing", children: select }) : null;
       }
     };
-    return /* @__PURE__ */ jsxs54(
+    return /* @__PURE__ */ jsxs55(
       "div",
       {
         ref,
@@ -13165,9 +13354,9 @@ var CardHead = forwardRef44(
         "data-type": slotType,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs54("div", { className: "aviala-card-head__main", children: [
-            renderCardIcon(icon ?? /* @__PURE__ */ jsx69(GeneralSetting3, { "aria-hidden": true })),
-            /* @__PURE__ */ jsx69("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ jsx69(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
+          /* @__PURE__ */ jsxs55("div", { className: "aviala-card-head__main", children: [
+            renderCardIcon(icon ?? /* @__PURE__ */ jsx70(GeneralSetting3, { "aria-hidden": true })),
+            /* @__PURE__ */ jsx70("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ jsx70(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
           ] }),
           renderTrailing()
         ]
@@ -13176,11 +13365,11 @@ var CardHead = forwardRef44(
   }
 );
 CardHead.displayName = "CardHead";
-var CardBody = forwardRef44(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx69("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ jsx69("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx69(Typography, { level: "text", as: "span", children }) : children }) })
+var CardBody = forwardRef45(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx70("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ jsx70("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx70(Typography, { level: "text", as: "span", children }) : children }) })
 );
 CardBody.displayName = "CardBody";
-var CardBottom = forwardRef44(
+var CardBottom = forwardRef45(
   ({
     className,
     slotType = "action",
@@ -13196,46 +13385,46 @@ var CardBottom = forwardRef44(
     const locale = useLocaleMessages("Card");
     const rtl = useRtl();
     const ChevronIcon = rtl ? DirectionArrowLeftLight6 : DirectionArrowRightLight6;
-    const primaryAction = action ?? /* @__PURE__ */ jsx69(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx69(GeneralSetting3, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ jsx70(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx70(GeneralSetting3, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       if (children != null) return children;
       switch (slotType) {
         case "switch":
-          return /* @__PURE__ */ jsxs54(Fragment10, { children: [
+          return /* @__PURE__ */ jsxs55(Fragment11, { children: [
             primaryAction,
-            /* @__PURE__ */ jsx69("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx69(Switch, { ...switchProps })
+            /* @__PURE__ */ jsx70("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx70(Switch, { ...switchProps })
           ] });
         case "select":
           return select;
         case "action":
         default:
-          return /* @__PURE__ */ jsxs54(Fragment10, { children: [
+          return /* @__PURE__ */ jsxs55(Fragment11, { children: [
             primaryAction,
-            secondaryAction ?? /* @__PURE__ */ jsx69(
+            secondaryAction ?? /* @__PURE__ */ jsx70(
               Button,
               {
                 mode: "default",
                 size: "regular",
                 iconOnly: true,
                 "aria-label": locale.more,
-                leftIcon: /* @__PURE__ */ jsx69(GeneralSetting3, { "aria-hidden": true })
+                leftIcon: /* @__PURE__ */ jsx70(GeneralSetting3, { "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsx69("span", { className: "aviala-card__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx69(ChevronIcon, { width: 14, height: 14, "aria-hidden": true })
+            /* @__PURE__ */ jsx70("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx70(ChevronIcon, { width: 14, height: 14, "aria-hidden": true })
           ] });
       }
     };
-    return /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx70(
       "div",
       {
         ref,
         className: cn("aviala-card-bottom", className),
         "data-type": slotType,
         ...props,
-        children: /* @__PURE__ */ jsx69("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
+        children: /* @__PURE__ */ jsx70("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
       }
     );
   }
@@ -13244,13 +13433,13 @@ CardBottom.displayName = "CardBottom";
 
 // src/components/table.tsx
 import {
-  cloneElement as cloneElement13,
-  forwardRef as forwardRef45,
-  isValidElement as isValidElement18
+  cloneElement as cloneElement14,
+  forwardRef as forwardRef46,
+  isValidElement as isValidElement19
 } from "react";
-import { Fragment as Fragment11, jsx as jsx70, jsxs as jsxs55 } from "react/jsx-runtime";
-var Table = forwardRef45(
-  ({ className, stickyHeader = false, children, ...props }, ref) => /* @__PURE__ */ jsx70(
+import { Fragment as Fragment12, jsx as jsx71, jsxs as jsxs56 } from "react/jsx-runtime";
+var Table = forwardRef46(
+  ({ className, stickyHeader = false, children, ...props }, ref) => /* @__PURE__ */ jsx71(
     "div",
     {
       ref,
@@ -13263,8 +13452,8 @@ var Table = forwardRef45(
   )
 );
 Table.displayName = "Table";
-var TableRow = forwardRef45(
-  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ jsx70(
+var TableRow = forwardRef46(
+  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ jsx71(
     "div",
     {
       ref,
@@ -13279,7 +13468,7 @@ var TableRow = forwardRef45(
 TableRow.displayName = "TableRow";
 function renderCellIcon(node, sized = true) {
   if (!node) return null;
-  const content = sized && isValidElement18(node) && typeof node.type !== "string" ? cloneElement13(node, {
+  const content = sized && isValidElement19(node) && typeof node.type !== "string" ? cloneElement14(node, {
     width: 16,
     height: 16,
     className: cn(
@@ -13287,39 +13476,39 @@ function renderCellIcon(node, sized = true) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx70("span", { className: "aviala-table-cell__icon", children: content });
+  return /* @__PURE__ */ jsx71("span", { className: "aviala-table-cell__icon", children: content });
 }
 function renderTextBlock(text, caption) {
-  return /* @__PURE__ */ jsxs55("span", { className: "aviala-table-cell__text", children: [
-    /* @__PURE__ */ jsx70(Typography, { level: "text", as: "span", children: text }),
-    caption != null && caption !== false ? /* @__PURE__ */ jsx70(Typography, { level: "caption", as: "span", className: "aviala-table-cell__caption", children: caption }) : null
+  return /* @__PURE__ */ jsxs56("span", { className: "aviala-table-cell__text", children: [
+    /* @__PURE__ */ jsx71(Typography, { level: "text", as: "span", children: text }),
+    caption != null && caption !== false ? /* @__PURE__ */ jsx71(Typography, { level: "caption", as: "span", className: "aviala-table-cell__caption", children: caption }) : null
   ] });
 }
 function renderActions(actions) {
   if (actions == null) return null;
-  return /* @__PURE__ */ jsx70("div", { className: "aviala-table-cell__actions", children: actions });
+  return /* @__PURE__ */ jsx71("div", { className: "aviala-table-cell__actions", children: actions });
 }
 function renderCellBody(main, actions) {
-  return /* @__PURE__ */ jsxs55("span", { className: "aviala-table-cell__body", children: [
-    /* @__PURE__ */ jsx70("span", { className: "aviala-table-cell__main", children: main }),
+  return /* @__PURE__ */ jsxs56("span", { className: "aviala-table-cell__body", children: [
+    /* @__PURE__ */ jsx71("span", { className: "aviala-table-cell__main", children: main }),
     renderActions(actions)
   ] });
 }
-var TableHead = forwardRef45(
+var TableHead = forwardRef46(
   ({ className, content = "text", actions, checkboxProps, children, ...props }, ref) => {
     const renderBody = () => {
       if (content === "checkbox") {
-        return children ?? /* @__PURE__ */ jsx70(Checkbox, { ...checkboxProps });
+        return children ?? /* @__PURE__ */ jsx71(Checkbox, { ...checkboxProps });
       }
       if (children != null) {
-        return /* @__PURE__ */ jsxs55(Fragment11, { children: [
-          /* @__PURE__ */ jsx70("span", { className: "aviala-table-cell__main", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx70(Typography, { level: "text", as: "span", children }) : children }),
+        return /* @__PURE__ */ jsxs56(Fragment12, { children: [
+          /* @__PURE__ */ jsx71("span", { className: "aviala-table-cell__main", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx71(Typography, { level: "text", as: "span", children }) : children }),
           renderActions(actions)
         ] });
       }
       return null;
     };
-    return /* @__PURE__ */ jsx70(
+    return /* @__PURE__ */ jsx71(
       "div",
       {
         ref,
@@ -13333,7 +13522,7 @@ var TableHead = forwardRef45(
   }
 );
 TableHead.displayName = "TableHead";
-var TableCell = forwardRef45(
+var TableCell = forwardRef46(
   ({
     className,
     content = "text",
@@ -13355,16 +13544,16 @@ var TableCell = forwardRef45(
       if (children != null) return children;
       switch (content) {
         case "checkbox":
-          return /* @__PURE__ */ jsx70(Checkbox, { ...checkboxProps });
+          return /* @__PURE__ */ jsx71(Checkbox, { ...checkboxProps });
         case "switch":
-          return /* @__PURE__ */ jsx70(Switch, { ...switchProps });
+          return /* @__PURE__ */ jsx71(Switch, { ...switchProps });
         case "action":
           return renderActions(actions);
         case "icon+text":
-          return /* @__PURE__ */ jsxs55(Fragment11, { children: [
+          return /* @__PURE__ */ jsxs56(Fragment12, { children: [
             grabber,
             renderCellBody(
-              /* @__PURE__ */ jsxs55(Fragment11, { children: [
+              /* @__PURE__ */ jsxs56(Fragment12, { children: [
                 renderCellIcon(icon),
                 renderTextBlock(text, caption)
               ] }),
@@ -13372,44 +13561,44 @@ var TableCell = forwardRef45(
             )
           ] });
         case "icon-place+text":
-          return /* @__PURE__ */ jsxs55(Fragment11, { children: [
+          return /* @__PURE__ */ jsxs56(Fragment12, { children: [
             grabber,
             renderCellBody(
-              /* @__PURE__ */ jsxs55(Fragment11, { children: [
-                /* @__PURE__ */ jsx70("span", { className: "aviala-table-cell__icon-place", children: iconPlace ?? renderCellIcon(icon, false) ?? /* @__PURE__ */ jsx70(Avatar, { content: "text", level: "text", lineHeightFix: false, children: "A" }) }),
+              /* @__PURE__ */ jsxs56(Fragment12, { children: [
+                /* @__PURE__ */ jsx71("span", { className: "aviala-table-cell__icon-place", children: iconPlace ?? renderCellIcon(icon, false) ?? /* @__PURE__ */ jsx71(Avatar, { content: "text", level: "text", lineHeightFix: false, children: "A" }) }),
                 renderTextBlock(text, caption)
               ] }),
               actions
             )
           ] });
         case "people":
-          return /* @__PURE__ */ jsxs55(Fragment11, { children: [
+          return /* @__PURE__ */ jsxs56(Fragment12, { children: [
             grabber,
             renderCellBody(
-              /* @__PURE__ */ jsxs55(Fragment11, { children: [
-                people ?? /* @__PURE__ */ jsx70(Avatar, { content: "text", level: "text", lineHeightFix: false, children: "A" }),
+              /* @__PURE__ */ jsxs56(Fragment12, { children: [
+                people ?? /* @__PURE__ */ jsx71(Avatar, { content: "text", level: "text", lineHeightFix: false, children: "A" }),
                 renderTextBlock(text, caption)
               ] }),
               actions
             )
           ] });
         case "badge":
-          return /* @__PURE__ */ jsxs55(Fragment11, { children: [
+          return /* @__PURE__ */ jsxs56(Fragment12, { children: [
             grabber,
             renderCellBody(
-              badge ?? /* @__PURE__ */ jsx70(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" }),
+              badge ?? /* @__PURE__ */ jsx71(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" }),
               actions
             )
           ] });
         case "text":
         default:
-          return /* @__PURE__ */ jsxs55(Fragment11, { children: [
+          return /* @__PURE__ */ jsxs56(Fragment12, { children: [
             grabber,
             renderCellBody(renderTextBlock(text, caption), actions)
           ] });
       }
     };
-    return /* @__PURE__ */ jsx70(
+    return /* @__PURE__ */ jsx71(
       "div",
       {
         ref,
@@ -13469,6 +13658,18 @@ export {
   DatePickerContent,
   DatePickerField,
   DatePickerTrigger,
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerHeaderText,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
   Feedback,
   Fieldset,
   Form,
@@ -13584,6 +13785,7 @@ export {
   backChevronSide,
   buttonVariants,
   cn,
+  drawerContentVariants,
   en_US_default as enUS,
   formatDisplayDate,
   formatMonthYear,