@aviala-design/spiral 0.0.2 → 0.1.0

package/dist/index.js

@@ -18,44 +18,6 @@ import {
   presetList,
   removeTheme
 } from "@aviala-design/tokens";
-
-// src/lib/keyboard-focus.ts
-var KEYBOARD_FOCUS_KEYS = /* @__PURE__ */ new Set([
-  "Tab",
-  "ArrowUp",
-  "ArrowDown",
-  "ArrowLeft",
-  "ArrowRight",
-  "Home",
-  "End",
-  "PageUp",
-  "PageDown"
-]);
-var initialized = false;
-function initKeyboardFocus() {
-  if (initialized || typeof window === "undefined") return;
-  initialized = true;
-  const root = document.documentElement;
-  const enable = () => {
-    root.dataset.avialaKeyboardFocus = "";
-  };
-  const disable = () => {
-    delete root.dataset.avialaKeyboardFocus;
-  };
-  window.addEventListener(
-    "keydown",
-    (event) => {
-      if (KEYBOARD_FOCUS_KEYS.has(event.key)) {
-        enable();
-      }
-    },
-    true
-  );
-  window.addEventListener("mousedown", disable, true);
-  window.addEventListener("pointerdown", disable, true);
-}
-
-// src/theme/theme-provider.tsx
 import { jsx } from "react/jsx-runtime";
 var ThemeContext = createContext(null);
 function ThemeProvider({
@@ -109,9 +71,6 @@ function ThemeProvider({
     }),
     [isStaticTheme, mode, primaryColor, presetId, paletteConfig]
   );
-  useLayoutEffect(() => {
-    initKeyboardFocus();
-  }, []);
   useLayoutEffect(() => {
     applyBaseNumbersDensity(document.documentElement, density);
     if (isStaticTheme) {
@@ -375,11 +334,11 @@ var Typography = forwardRef2(
     level = "text",
     content = "text",
     tone = "default",
-    as: Tag = "span",
+    as: Tag2 = "span",
     asChild = false,
     ...props
   }, ref) => {
-    const Comp = asChild ? Slot : Tag;
+    const Comp = asChild ? Slot : Tag2;
     return /* @__PURE__ */ jsx3(
       Comp,
       {
@@ -466,7 +425,7 @@ var sizeLabelLevels = {
   big: "text"
 };
 var buttonVariants = cva3(
-  "aviala-button relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden border-0 bg-transparent font-sans whitespace-nowrap focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--button-disabled-opacity,0.55)]",
+  "aviala-button aviala-focus-ring relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden border-0 bg-transparent font-sans whitespace-nowrap focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--button-disabled-opacity,0.55)]",
   {
     variants: {
       mode: {
@@ -655,7 +614,7 @@ var Button = forwardRef3(
 Button.displayName = "Button";
 
 // src/components/input.tsx
-import { cva as cva4 } from "class-variance-authority";
+import { cva as cva5 } from "class-variance-authority";
 import {
   forwardRef as forwardRef5,
   isValidElement as isValidElement5,
@@ -663,30 +622,124 @@ import {
 } from "react";
 
 // src/components/badge.tsx
+import { cva as cva4 } from "class-variance-authority";
 import {
   cloneElement as cloneElement2,
   forwardRef as forwardRef4,
   isValidElement as isValidElement4
 } from "react";
+import { resolveIconSizeToken as resolveIconSizeToken3 } from "@aviala-design/icons";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-function renderBadgeIcon(node) {
+var badgeVariants = cva4("aviala-badge", {
+  variants: {
+    style: {
+      theme: "aviala-badge--style-theme",
+      info: "aviala-badge--style-info",
+      fail: "aviala-badge--style-fail",
+      warning: "aviala-badge--style-warning",
+      success: "aviala-badge--style-success",
+      normal: "aviala-badge--style-normal"
+    },
+    level: {
+      caption: "aviala-badge--level-caption",
+      text: "aviala-badge--level-text"
+    },
+    primary: {
+      true: "aviala-badge--primary",
+      false: "aviala-badge--secondary"
+    },
+    lineHeightFix: {
+      text: "aviala-badge--lhf-text",
+      subtitle: "aviala-badge--lhf-subtitle",
+      off: "aviala-badge--lhf-off"
+    }
+  },
+  defaultVariants: {
+    style: "theme",
+    level: "caption",
+    primary: false,
+    lineHeightFix: "text"
+  }
+});
+function resolveLineHeightFix(level, lineHeightFix) {
+  if (lineHeightFix === false || lineHeightFix === "off") return "off";
+  if (lineHeightFix === "subtitle") return "subtitle";
+  if (lineHeightFix === "text" || lineHeightFix === true) {
+    return level === "text" ? "subtitle" : "text";
+  }
+  return level === "text" ? "subtitle" : "text";
+}
+function iconSizeForLevel(level) {
+  return resolveIconSizeToken3(level);
+}
+function renderBadgeIcon(node, level) {
   if (!node) return null;
-  const content = isValidElement4(node) && typeof node.type !== "string" ? cloneElement2(node, {
-    width: 18,
-    height: 18,
-    className: cn(
-      node.props.className,
-      "shrink-0"
-    )
-  }) : node;
+  const size = iconSizeForLevel(level);
+  const content = isValidElement4(node) && typeof node.type !== "string" ? cloneElement2(
+    node,
+    {
+      width: size,
+      height: size,
+      className: cn(
+        node.props.className,
+        "shrink-0"
+      )
+    }
+  ) : node;
   return /* @__PURE__ */ jsx5("span", { className: "aviala-badge__icon", "aria-hidden": true, children: content });
 }
 var Badge = forwardRef4(
-  ({ className, children, leftIcon, rightIcon, ...props }, ref) => /* @__PURE__ */ jsxs2("span", { ref, className: cn("aviala-badge", className), ...props, children: [
-    renderBadgeIcon(leftIcon),
-    /* @__PURE__ */ jsx5(Typography, { level: "text", as: "span", className: "aviala-badge__text whitespace-nowrap", children }),
-    renderBadgeIcon(rightIcon)
-  ] })
+  ({
+    className,
+    children,
+    leftIcon,
+    rightIcon,
+    style = "theme",
+    level = "caption",
+    primary = false,
+    lineHeightFix,
+    ...props
+  }, ref) => {
+    const resolvedLevel = level ?? "caption";
+    const resolvedStyle = style ?? "theme";
+    const resolvedLhf = resolveLineHeightFix(resolvedLevel, lineHeightFix);
+    const typographyLevel = resolvedLevel;
+    const tone = primary ? "white" : "default";
+    return /* @__PURE__ */ jsxs2(
+      "span",
+      {
+        ref,
+        className: cn(
+          badgeVariants({
+            style: resolvedStyle,
+            level: resolvedLevel,
+            primary,
+            lineHeightFix: resolvedLhf
+          }),
+          className
+        ),
+        "data-style": resolvedStyle,
+        "data-level": resolvedLevel,
+        "data-primary": primary ? "true" : "false",
+        "data-line-height-fix": resolvedLhf,
+        ...props,
+        children: [
+          renderBadgeIcon(leftIcon, resolvedLevel),
+          /* @__PURE__ */ jsx5(
+            Typography,
+            {
+              level: typographyLevel,
+              tone,
+              as: "span",
+              className: "aviala-badge__text whitespace-nowrap",
+              children
+            }
+          ),
+          renderBadgeIcon(rightIcon, resolvedLevel)
+        ]
+      }
+    );
+  }
 );
 Badge.displayName = "Badge";
 
@@ -697,7 +750,7 @@ function resolveInputState(value, defaultValue, focused) {
   if (String(current).length === 0) return "empty";
   return focused ? "typing" : "fill";
 }
-var inputRootVariants = cva4("aviala-input relative min-w-0 font-sans", {
+var inputRootVariants = cva5("aviala-input relative min-w-0 font-sans", {
   variants: {
     fullWidth: {
       true: "w-full",
@@ -998,14 +1051,18 @@ var Link = forwardRef7(
     const resolvedLevel = level ?? "caption";
     const Comp = asChild ? Slot3 : "a";
     const sharedClassName = cn(
-      "aviala-link",
+      "aviala-link aviala-focus-ring",
       iconOnly ? "aviala-link--icon-only" : void 0,
       className
     );
-    const disabledProps = disabled ? {
-      tabIndex: -1,
-      onClick: (e) => e.preventDefault()
-    } : {};
+    const { href, onClick, tabIndex, ...restProps } = props;
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      onClick?.(e);
+    };
     if (asChild) {
       return /* @__PURE__ */ jsx8(
         Comp,
@@ -1015,8 +1072,10 @@ var Link = forwardRef7(
           "data-disabled": disabled ? "true" : void 0,
           ref,
           "aria-disabled": disabled || void 0,
-          ...disabledProps,
-          ...props,
+          ...restProps,
+          href: disabled ? void 0 : href,
+          tabIndex: disabled ? -1 : tabIndex,
+          onClick: handleClick,
           children
         }
       );
@@ -1029,8 +1088,10 @@ var Link = forwardRef7(
         "data-disabled": disabled ? "true" : void 0,
         ref,
         "aria-disabled": disabled || void 0,
-        ...disabledProps,
-        ...props,
+        ...restProps,
+        href: disabled ? void 0 : href,
+        tabIndex: disabled ? -1 : tabIndex,
+        onClick: handleClick,
         children: [
           renderIcon2(leftIcon ?? (iconOnly ? rightIcon : void 0), resolvedLevel),
           !iconOnly && children !== void 0 && children !== null && /* @__PURE__ */ jsx8(
@@ -1512,7 +1573,7 @@ var SelectTrigger = forwardRef8(
             ref.current = node;
           }
         },
-        className: cn("aviala-select-trigger", className),
+        className: cn("aviala-select-trigger aviala-focus-ring", className),
         "data-size": size,
         "data-all-round": allRound ? "true" : "false",
         "data-error": error ? "true" : void 0,
@@ -1659,7 +1720,7 @@ var SelectItem = forwardRef8(
       SelectPrimitive.Item,
       {
         ref,
-        className: cn("aviala-select-item", className),
+        className: cn("aviala-select-item aviala-focus-ring", className),
         "data-layout": layout !== "default" ? layout : void 0,
         "data-function": itemFunction !== "action" ? itemFunction : void 0,
         ...spiralDebugId("select.content.item"),
@@ -1774,7 +1835,7 @@ var SelectSubItem = forwardRef8(
       {
         type: "button",
         disabled,
-        className: cn("aviala-select-item aviala-select-sub-item", className),
+        className: cn("aviala-select-item aviala-select-sub-item aviala-focus-ring", className),
         "data-layout": layout !== "default" ? layout : void 0,
         "data-function": itemFunction !== "action" ? itemFunction : void 0,
         "data-state": open ? "open" : void 0,
@@ -1889,174 +1950,618 @@ var Label2 = forwardRef9(({ className, ...props }, ref) => /* @__PURE__ */ jsx10
 ));
 Label2.displayName = LabelPrimitive.Root.displayName;
 
-// src/components/checkbox.tsx
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { SymbolRight as SymbolRight2 } from "@aviala-design/icons";
+// src/components/avatar.tsx
+import { cva as cva6 } from "class-variance-authority";
 import {
   cloneElement as cloneElement3,
-  forwardRef as forwardRef11,
+  forwardRef as forwardRef10,
   isValidElement as isValidElement7
 } from "react";
-
-// src/components/typeface.tsx
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var typefaceLayouts = {
-  allCustom: [
-    { level: "text", children: null },
-    { level: "caption", children: null }
-  ],
-  textCaption: [
-    { level: "text", children: null },
-    { level: "caption", children: null }
-  ],
-  textCaptionSubtitle: [
-    { level: "subtitle", children: null },
-    { level: "text", children: null },
-    { level: "caption", children: null }
-  ],
-  textTitle: [
-    { level: "title", children: null },
-    { level: "text", children: null }
-  ],
-  textHeadline2: [
-    { level: "headline2", children: null },
-    { level: "text", children: null }
-  ],
-  textHeadline1: [
-    { level: "headline1", children: null },
-    { level: "text", children: null }
-  ]
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var avatarVariants = cva6("aviala-avatar", {
+  variants: {
+    level: {
+      display: "aviala-avatar--level-display",
+      headline1: "aviala-avatar--level-headline1",
+      headline2: "aviala-avatar--level-headline2",
+      title: "aviala-avatar--level-title",
+      subtitle: "aviala-avatar--level-subtitle",
+      text: "aviala-avatar--level-text"
+    },
+    content: {
+      text: "aviala-avatar--content-text",
+      picture: "aviala-avatar--content-picture",
+      icon: "aviala-avatar--content-icon"
+    },
+    lineHeightFix: {
+      true: "aviala-avatar--line-height-fix",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    level: "text",
+    content: "text",
+    lineHeightFix: true
+  }
+});
+var AVATAR_TEXT_LEVEL = {
+  display: "subtitle",
+  headline1: "text",
+  headline2: "caption",
+  title: "caption",
+  subtitle: "caption",
+  text: "caption"
 };
-var Typeface = forwardRef10(
+var AVATAR_ICON_SIZE = {
+  display: "var(--size-middle, 1rem)",
+  headline1: "var(--size-regular, 0.875rem)",
+  headline2: "var(--size-small, 0.75rem)",
+  title: "var(--size-small, 0.75rem)",
+  subtitle: "var(--size-tiny, 0.625rem)",
+  text: "0.5rem"
+};
+function renderAvatarIcon(node, level) {
+  if (!node) return null;
+  const size = AVATAR_ICON_SIZE[level];
+  if (isValidElement7(node) && typeof node.type !== "string") {
+    return cloneElement3(
+      node,
+      {
+        width: size,
+        height: size,
+        className: cn(node.props.className, "shrink-0")
+      }
+    );
+  }
+  return node;
+}
+var Avatar = forwardRef10(
   ({
     className,
-    content = "allCustom",
-    primary,
-    secondary,
-    tertiary,
-    primaryContent = "text",
-    secondaryContent = "text",
-    tertiaryContent = "text",
-    tone = "default",
+    level = "text",
+    content = "text",
+    lineHeightFix = true,
     children,
+    src,
+    alt = "",
+    icon,
+    imgProps,
     ...props
   }, ref) => {
-    const layout = typefaceLayouts[content];
-    const values = resolveTypefaceValues(content, primary, secondary, tertiary, children);
-    return /* @__PURE__ */ jsx11("div", { ref, className: cn("aviala-typeface", className), "data-content": content, ...props, children: layout.map((line, index) => {
-      const value = values[index];
-      if (value === void 0 || value === null || value === false) return null;
-      const lineContent = index === 0 ? primaryContent : index === 1 ? secondaryContent : tertiaryContent;
-      return /* @__PURE__ */ jsx11("span", { className: "aviala-typeface__line", children: /* @__PURE__ */ jsx11(Typography, { level: line.level, content: lineContent, tone, children: value }) }, `${line.level}-${index}`);
-    }) });
+    const resolvedLevel = level ?? "text";
+    const resolvedContent = content ?? "text";
+    return /* @__PURE__ */ jsx11(
+      "span",
+      {
+        ref,
+        className: cn(
+          avatarVariants({
+            level: resolvedLevel,
+            content: resolvedContent,
+            lineHeightFix: lineHeightFix ?? true
+          }),
+          className
+        ),
+        "data-level": resolvedLevel,
+        "data-content": resolvedContent,
+        "data-line-height-fix": lineHeightFix ? "true" : "false",
+        ...props,
+        children: /* @__PURE__ */ jsxs7("span", { className: "aviala-avatar__surface", children: [
+          resolvedContent === "picture" && src ? /* @__PURE__ */ jsx11(
+            "img",
+            {
+              className: "aviala-avatar__image",
+              src,
+              alt,
+              ...imgProps
+            }
+          ) : null,
+          resolvedContent === "icon" ? /* @__PURE__ */ jsx11("span", { className: "aviala-avatar__icon", "aria-hidden": true, children: renderAvatarIcon(icon, resolvedLevel) }) : null,
+          resolvedContent === "text" ? /* @__PURE__ */ jsx11(
+            Typography,
+            {
+              level: AVATAR_TEXT_LEVEL[resolvedLevel],
+              as: "span",
+              className: "aviala-avatar__text",
+              children
+            }
+          ) : null
+        ] })
+      }
+    );
   }
 );
-Typeface.displayName = "Typeface";
-function resolveTypefaceValues(content, primary, secondary, tertiary, children) {
-  if (primary !== void 0 || secondary !== void 0 || tertiary !== void 0) {
-    return [primary, secondary, tertiary];
-  }
-  if (children == null || children === false) {
-    return typefaceLayouts[content].map(() => "Text");
+Avatar.displayName = "Avatar";
+
+// src/components/tag.tsx
+import { resolveIconSizeToken as resolveIconSizeToken4, SymbolWrong } from "@aviala-design/icons";
+import { cva as cva7 } from "class-variance-authority";
+import {
+  cloneElement as cloneElement4,
+  forwardRef as forwardRef11,
+  isValidElement as isValidElement8
+} from "react";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var tagVariants = cva7("aviala-tag", {
+  variants: {
+    level: {
+      caption: "aviala-tag--level-caption",
+      text: "aviala-tag--level-text"
+    },
+    content: {
+      text: "aviala-tag--content-text",
+      people: "aviala-tag--content-people"
+    },
+    lineHeightFix: {
+      text: "aviala-tag--lhf-text",
+      subtitle: "aviala-tag--lhf-subtitle",
+      off: "aviala-tag--lhf-off"
+    }
+  },
+  defaultVariants: {
+    level: "caption",
+    content: "text",
+    lineHeightFix: "text"
   }
-  if (Array.isArray(children)) {
-    return children;
+});
+function resolveLineHeightFix2(level, lineHeightFix) {
+  if (lineHeightFix === false || lineHeightFix === "off") return "off";
+  if (lineHeightFix === "subtitle") return "subtitle";
+  if (lineHeightFix === "text" || lineHeightFix === true) {
+    return level === "text" ? "subtitle" : "text";
   }
-  return [children];
+  return level === "text" ? "subtitle" : "text";
 }
-var TypefacePair = forwardRef10(
-  ({ title, description, ...props }, ref) => /* @__PURE__ */ jsx11(
-    Typeface,
+function iconSizeForLevel2(level) {
+  return level === "caption" ? resolveIconSizeToken4("text") : resolveIconSizeToken4("text", true);
+}
+function renderTagIcon(node, level) {
+  if (!node) return null;
+  const size = iconSizeForLevel2(level);
+  const content = isValidElement8(node) && typeof node.type !== "string" ? cloneElement4(
+    node,
     {
-      ref,
-      content: "textCaption",
-      primary: title,
-      secondary: description,
-      ...props
+      width: size,
+      height: size,
+      className: cn(
+        node.props.className,
+        "shrink-0"
+      )
     }
-  )
-);
-TypefacePair.displayName = "TypefacePair";
-
-// src/components/checkbox.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var Checkbox = forwardRef11(({ className, round = false, ...props }, ref) => /* @__PURE__ */ jsxs7(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    className: cn("aviala-checkbox", className),
-    "data-round": round ? "true" : void 0,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx12("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
-      /* @__PURE__ */ jsxs7(CheckboxPrimitive.Indicator, { className: "aviala-checkbox__indicator", children: [
-        /* @__PURE__ */ jsx12(
-          SymbolRight2,
-          {
-            className: "aviala-checkbox__indicator-icon aviala-checkbox__indicator-icon--check",
-            thickness: "Bold",
-            width: 12,
-            height: 12,
-            "aria-hidden": true
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "aviala-checkbox__indeterminate-mark aviala-checkbox__indicator-icon--indeterminate"
-          }
-        )
-      ] })
-    ]
-  }
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-var CheckboxGroup = forwardRef11(
-  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx12(
-    "div",
+  ) : node;
+  return /* @__PURE__ */ jsx12("span", { className: "aviala-tag__icon", "aria-hidden": true, children: content });
+}
+var TagClose = forwardRef11(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx12(
+    "button",
     {
       ref,
-      className: cn("aviala-checkbox-group", className),
-      "data-direction": direction,
-      ...props
+      type: "button",
+      className: cn("aviala-tag__close aviala-focus-ring", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx12(SymbolWrong, { "aria-hidden": true, width: 14, height: 14 })
     }
   )
 );
-CheckboxGroup.displayName = "CheckboxGroup";
-function renderIcon3(node) {
-  if (!node) return null;
-  const icon = 18;
-  const content = isValidElement7(node) && typeof node.type !== "string" ? cloneElement3(node, {
-    width: icon,
-    height: icon,
-    className: cn(
-      node.props.className,
-      "shrink-0"
-    )
-  }) : node;
-  return /* @__PURE__ */ jsx12("span", { className: "aviala-checkbox-input__icon", children: content });
-}
-var CheckboxInput = forwardRef11(
+TagClose.displayName = "TagClose";
+var Tag = forwardRef11(
   ({
     className,
-    title,
-    description,
-    icon,
-    disabled,
-    id,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxs7(
-    "label",
+    children,
+    leftIcon,
+    rightIcon,
+    level = "caption",
+    content = "text",
+    disabled = false,
+    avatar,
+    avatarSrc,
+    avatarText,
+    closable = false,
+    onClose,
+    closeLabel = "Remove",
+    lineHeightFix,
+    ...props
+  }, ref) => {
+    const resolvedLevel = level ?? "caption";
+    const resolvedContent = content ?? "text";
+    const resolvedLhf = resolveLineHeightFix2(resolvedLevel, lineHeightFix);
+    const typographyLevel = resolvedLevel;
+    const peopleAvatar = avatar ?? (avatarSrc ? /* @__PURE__ */ jsx12(Avatar, { level: "text", content: "picture", src: avatarSrc, lineHeightFix: false }) : /* @__PURE__ */ jsx12(Avatar, { level: "text", content: "text", lineHeightFix: false, children: avatarText ?? (typeof children === "string" ? children.charAt(0) : "?") }));
+    return /* @__PURE__ */ jsxs8(
+      "span",
+      {
+        ref,
+        className: cn(
+          tagVariants({
+            level: resolvedLevel,
+            content: resolvedContent,
+            lineHeightFix: resolvedLhf
+          }),
+          className
+        ),
+        "data-level": resolvedLevel,
+        "data-content": resolvedContent,
+        "data-disabled": disabled ? "true" : void 0,
+        "data-line-height-fix": resolvedLhf,
+        "aria-disabled": disabled || void 0,
+        ...props,
+        children: [
+          resolvedContent === "people" ? /* @__PURE__ */ jsx12("span", { className: "aviala-tag__avatar", children: peopleAvatar }) : renderTagIcon(leftIcon, resolvedLevel),
+          /* @__PURE__ */ jsx12(
+            Typography,
+            {
+              level: typographyLevel,
+              as: "span",
+              className: "aviala-tag__text whitespace-nowrap",
+              children
+            }
+          ),
+          resolvedContent === "text" ? renderTagIcon(rightIcon, resolvedLevel) : null,
+          closable ? /* @__PURE__ */ jsx12(
+            TagClose,
+            {
+              "aria-label": closeLabel,
+              disabled,
+              onClick: (event) => {
+                if (disabled) return;
+                onClose?.(event);
+              }
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+
+// src/components/progress.tsx
+import { cva as cva8 } from "class-variance-authority";
+import { forwardRef as forwardRef12 } from "react";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var progressVariants = cva8("aviala-progress", {
+  variants: {
+    type: {
+      default: "aviala-progress--type-default",
+      success: "aviala-progress--type-success",
+      fail: "aviala-progress--type-fail"
+    },
+    size: {
+      default: "aviala-progress--size-default",
+      big: "aviala-progress--size-big"
+    },
+    shape: {
+      bar: "aviala-progress--shape-bar",
+      ring: "aviala-progress--shape-ring"
+    }
+  },
+  defaultVariants: {
+    type: "default",
+    size: "default",
+    shape: "bar"
+  }
+});
+function clampPercent(value) {
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(100, Math.max(0, value));
+}
+var Progress = forwardRef12(
+  ({
+    className,
+    type = "default",
+    size = "default",
+    shape = "bar",
+    value = 0,
+    showLabel = true,
+    label,
+    ...props
+  }, ref) => {
+    const percent = clampPercent(value ?? 0);
+    const resolvedType = type ?? "default";
+    const resolvedSize = size ?? "default";
+    const resolvedShape = shape ?? "bar";
+    const displayLabel = label ?? `${Math.round(percent)}%`;
+    const diameter = resolvedSize === "big" ? 24 : 16;
+    const radius = diameter / 2;
+    const stroke = 2;
+    const normalizedRadius = radius - stroke;
+    const circumference = normalizedRadius * 2 * Math.PI;
+    const strokeDashoffset = circumference - percent / 100 * circumference;
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(percent),
+        "aria-label": props["aria-label"] ?? displayLabel,
+        className: cn(
+          progressVariants({
+            type: resolvedType,
+            size: resolvedSize,
+            shape: resolvedShape
+          }),
+          className
+        ),
+        "data-type": resolvedType,
+        "data-size": resolvedSize,
+        "data-shape": resolvedShape,
+        ...props,
+        children: resolvedShape === "bar" ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          /* @__PURE__ */ jsx13("div", { className: "aviala-progress__track", children: /* @__PURE__ */ jsx13(
+            "div",
+            {
+              className: "aviala-progress__fill",
+              style: { width: `${percent}%` }
+            }
+          ) }),
+          showLabel ? /* @__PURE__ */ jsx13(
+            Typography,
+            {
+              level: "caption",
+              content: "number",
+              as: "span",
+              className: "aviala-progress__label",
+              children: displayLabel
+            }
+          ) : null
+        ] }) : /* @__PURE__ */ jsxs9(
+          "svg",
+          {
+            className: "aviala-progress__ring",
+            width: radius * 2,
+            height: radius * 2,
+            viewBox: `0 0 ${radius * 2} ${radius * 2}`,
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsx13(
+                "circle",
+                {
+                  className: "aviala-progress__ring-track",
+                  cx: radius,
+                  cy: radius,
+                  r: normalizedRadius,
+                  fill: "none",
+                  strokeWidth: stroke
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                "circle",
+                {
+                  className: "aviala-progress__ring-fill",
+                  cx: radius,
+                  cy: radius,
+                  r: normalizedRadius,
+                  fill: "none",
+                  strokeWidth: stroke,
+                  strokeDasharray: `${circumference} ${circumference}`,
+                  strokeDashoffset,
+                  strokeLinecap: "round",
+                  transform: `rotate(-90 ${radius} ${radius})`
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+
+// src/components/scroll.tsx
+import { cva as cva9 } from "class-variance-authority";
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var scrollVariants = cva9("aviala-scroll", {
+  variants: {
+    size: {
+      default: "aviala-scroll--size-default",
+      small: "aviala-scroll--size-small"
+    },
+    orientation: {
+      vertical: "aviala-scroll--orientation-vertical",
+      horizontal: "aviala-scroll--orientation-horizontal"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    orientation: "vertical"
+  }
+});
+var Scroll = forwardRef13(
+  ({
+    className,
+    size = "default",
+    orientation = "vertical",
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx14(
+    "div",
+    {
+      ref,
+      className: cn(
+        scrollVariants({ size: size ?? "default", orientation: orientation ?? "vertical" }),
+        className
+      ),
+      "data-size": size ?? "default",
+      "data-orientation": orientation ?? "vertical",
+      ...props,
+      children
+    }
+  )
+);
+Scroll.displayName = "Scroll";
+
+// src/components/checkbox.tsx
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { SymbolRight as SymbolRight2 } from "@aviala-design/icons";
+import {
+  cloneElement as cloneElement5,
+  forwardRef as forwardRef15,
+  isValidElement as isValidElement9
+} from "react";
+
+// src/components/typeface.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var typefaceLayouts = {
+  allCustom: [
+    { level: "text", children: null },
+    { level: "caption", children: null }
+  ],
+  textCaption: [
+    { level: "text", children: null },
+    { level: "caption", children: null }
+  ],
+  textCaptionSubtitle: [
+    { level: "subtitle", children: null },
+    { level: "text", children: null },
+    { level: "caption", children: null }
+  ],
+  textTitle: [
+    { level: "title", children: null },
+    { level: "text", children: null }
+  ],
+  textHeadline2: [
+    { level: "headline2", children: null },
+    { level: "text", children: null }
+  ],
+  textHeadline1: [
+    { level: "headline1", children: null },
+    { level: "text", children: null }
+  ]
+};
+var Typeface = forwardRef14(
+  ({
+    className,
+    content = "allCustom",
+    primary,
+    secondary,
+    tertiary,
+    primaryContent = "text",
+    secondaryContent = "text",
+    tertiaryContent = "text",
+    tone = "default",
+    children,
+    ...props
+  }, ref) => {
+    const layout = typefaceLayouts[content];
+    const values = resolveTypefaceValues(content, primary, secondary, tertiary, children);
+    return /* @__PURE__ */ jsx15("div", { ref, className: cn("aviala-typeface", className), "data-content": content, ...props, children: layout.map((line, index) => {
+      const value = values[index];
+      if (value === void 0 || value === null || value === false) return null;
+      const lineContent = index === 0 ? primaryContent : index === 1 ? secondaryContent : tertiaryContent;
+      return /* @__PURE__ */ jsx15("span", { className: "aviala-typeface__line", children: /* @__PURE__ */ jsx15(Typography, { level: line.level, content: lineContent, tone, children: value }) }, `${line.level}-${index}`);
+    }) });
+  }
+);
+Typeface.displayName = "Typeface";
+function resolveTypefaceValues(content, primary, secondary, tertiary, children) {
+  if (primary !== void 0 || secondary !== void 0 || tertiary !== void 0) {
+    return [primary, secondary, tertiary];
+  }
+  if (children == null || children === false) {
+    return typefaceLayouts[content].map(() => "Text");
+  }
+  if (Array.isArray(children)) {
+    return children;
+  }
+  return [children];
+}
+var TypefacePair = forwardRef14(
+  ({ title, description, ...props }, ref) => /* @__PURE__ */ jsx15(
+    Typeface,
+    {
+      ref,
+      content: "textCaption",
+      primary: title,
+      secondary: description,
+      ...props
+    }
+  )
+);
+TypefacePair.displayName = "TypefacePair";
+
+// src/components/checkbox.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var Checkbox = forwardRef15(({ className, round = false, ...props }, ref) => /* @__PURE__ */ jsxs10(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn("aviala-checkbox aviala-focus-ring", className),
+    "data-round": round ? "true" : void 0,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx16("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
+      /* @__PURE__ */ jsxs10(CheckboxPrimitive.Indicator, { className: "aviala-checkbox__indicator", children: [
+        /* @__PURE__ */ jsx16(
+          SymbolRight2,
+          {
+            className: "aviala-checkbox__indicator-icon aviala-checkbox__indicator-icon--check",
+            thickness: "Bold",
+            width: 12,
+            height: 12,
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "aviala-checkbox__indeterminate-mark aviala-checkbox__indicator-icon--indeterminate"
+          }
+        )
+      ] })
+    ]
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+var CheckboxGroup = forwardRef15(
+  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ref,
+      className: cn("aviala-checkbox-group", className),
+      "data-direction": direction,
+      ...props
+    }
+  )
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+function renderIcon3(node) {
+  if (!node) return null;
+  const icon = 18;
+  const content = isValidElement9(node) && typeof node.type !== "string" ? cloneElement5(node, {
+    width: icon,
+    height: icon,
+    className: cn(
+      node.props.className,
+      "shrink-0"
+    )
+  }) : node;
+  return /* @__PURE__ */ jsx16("span", { className: "aviala-checkbox-input__icon", children: content });
+}
+var CheckboxInput = forwardRef15(
+  ({
+    className,
+    title,
+    description,
+    icon,
+    disabled,
+    id,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs10(
+    "label",
     {
       htmlFor: id,
       className: cn("aviala-checkbox-input", className),
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx12(Checkbox, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ jsx16(Checkbox, { ref, id, disabled, ...props }),
         renderIcon3(icon),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx16(
           TypefacePair,
           {
             className: "aviala-checkbox-input__content min-w-0 flex-1",
@@ -2073,12 +2578,12 @@ CheckboxInput.displayName = "CheckboxInput";
 // src/components/radio-group.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import {
-  cloneElement as cloneElement4,
-  forwardRef as forwardRef12,
-  isValidElement as isValidElement8
+  cloneElement as cloneElement6,
+  forwardRef as forwardRef16,
+  isValidElement as isValidElement10
 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var RadioGroup = forwardRef12(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx13(
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var RadioGroup = forwardRef16(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsx17(
   RadioGroupPrimitive.Root,
   {
     className: cn("aviala-radio-group", className),
@@ -2088,15 +2593,15 @@ var RadioGroup = forwardRef12(({ className, direction = "vertical", ...props },
   }
 ));
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsxs8(
+var RadioGroupItem = forwardRef16(({ className, ...props }, ref) => /* @__PURE__ */ jsxs11(
   RadioGroupPrimitive.Item,
   {
     ref,
-    className: cn("aviala-radio", className),
+    className: cn("aviala-radio aviala-focus-ring", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
-      /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
+      /* @__PURE__ */ jsx17("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
+      /* @__PURE__ */ jsx17("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
     ]
   }
 ));
@@ -2104,7 +2609,7 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 function renderIcon4(node) {
   if (!node) return null;
   const icon = 18;
-  const content = isValidElement8(node) && typeof node.type !== "string" ? cloneElement4(node, {
+  const content = isValidElement10(node) && typeof node.type !== "string" ? cloneElement6(node, {
     width: icon,
     height: icon,
     className: cn(
@@ -2112,9 +2617,9 @@ function renderIcon4(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx13("span", { className: "aviala-radio-input__icon", children: content });
+  return /* @__PURE__ */ jsx17("span", { className: "aviala-radio-input__icon", children: content });
 }
-var RadioInput = forwardRef12(
+var RadioInput = forwardRef16(
   ({
     className,
     title,
@@ -2124,7 +2629,7 @@ var RadioInput = forwardRef12(
     disabled,
     id,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs8(
+  }, ref) => /* @__PURE__ */ jsxs11(
     "label",
     {
       htmlFor: id,
@@ -2132,9 +2637,9 @@ var RadioInput = forwardRef12(
       "data-style": variant,
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsx13(RadioGroupItem, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ jsx17(RadioGroupItem, { ref, id, disabled, ...props }),
         renderIcon4(icon),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx17(
           TypefacePair,
           {
             className: "aviala-radio-input__content min-w-0 flex-1",
@@ -2150,21 +2655,21 @@ RadioInput.displayName = "RadioInput";
 
 // src/components/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-var Switch = forwardRef13(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ jsxs9(
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var Switch = forwardRef17(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ jsxs12(
   SwitchPrimitive.Root,
   {
     className: cn(
-      "aviala-switch",
+      "aviala-switch aviala-focus-ring",
       size === "small" && "aviala-switch--small",
       className
     ),
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx14("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
-      /* @__PURE__ */ jsx14(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
+      /* @__PURE__ */ jsx18("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
+      /* @__PURE__ */ jsx18(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
     ]
   }
 ));
@@ -2173,14 +2678,14 @@ Switch.displayName = SwitchPrimitive.Root.displayName;
 // src/components/anchor.tsx
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import {
-  forwardRef as forwardRef14
+  forwardRef as forwardRef18
 } from "react";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
-var Anchor2 = forwardRef14(
-  ({ className, as: Tag = "nav", ...props }, ref) => /* @__PURE__ */ jsx15(Tag, { ref, className: cn("aviala-anchor", className), ...props })
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var Anchor2 = forwardRef18(
+  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ jsx19(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
 );
 Anchor2.displayName = "Anchor";
-var AnchorItem = forwardRef14(
+var AnchorItem = forwardRef18(
   ({
     className,
     activated = false,
@@ -2190,17 +2695,17 @@ var AnchorItem = forwardRef14(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot4 : "a";
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs13(
       Comp,
       {
         ref,
-        className: cn("aviala-anchor-item", className),
+        className: cn("aviala-anchor-item aviala-focus-ring", className),
         "data-activated": activated ? "true" : "false",
         "data-indent": String(indentLevel),
         ...props,
         children: [
-          /* @__PURE__ */ jsx15("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
-          /* @__PURE__ */ jsx15("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ jsx15(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
+          /* @__PURE__ */ jsx19("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
+          /* @__PURE__ */ jsx19("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ jsx19(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
         ]
       }
     );
@@ -2211,7 +2716,7 @@ AnchorItem.displayName = "AnchorItem";
 // src/components/segmentator.tsx
 import {
   createContext as createContext3,
-  forwardRef as forwardRef15,
+  forwardRef as forwardRef19,
   useCallback as useCallback3,
   useContext as useContext3,
   useEffect as useEffect2,
@@ -2219,7 +2724,7 @@ import {
   useRef as useRef2,
   useState as useState5
 } from "react";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var SegmentatorContext = createContext3(null);
 function useSegmentatorContext() {
   const ctx = useContext3(SegmentatorContext);
@@ -2234,7 +2739,7 @@ function renderIcon5(node, dimmed) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx20(
     "span",
     {
       className: cn(
@@ -2510,7 +3015,7 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
   }, [layoutKey, remeasureThumb]);
   return { thumb, onThumbRef, measureThumb, applyThumbImmediate: syncThumb };
 }
-var SegmentatorGroup = forwardRef15(
+var SegmentatorGroup = forwardRef19(
   ({
     className,
     value,
@@ -2649,7 +3154,7 @@ var SegmentatorGroup = forwardRef15(
       group.setPointerCapture(event.pointerId);
     };
     const thumbStyle = thumb ? buildThumbStyle(thumb) : void 0;
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx20(
       SegmentatorContext.Provider,
       {
         value: {
@@ -2662,7 +3167,7 @@ var SegmentatorGroup = forwardRef15(
           dragPreviewValue,
           isPressing: dragState.pressing
         },
-        children: /* @__PURE__ */ jsxs11(
+        children: /* @__PURE__ */ jsxs14(
           "div",
           {
             ref: (node) => {
@@ -2670,7 +3175,7 @@ var SegmentatorGroup = forwardRef15(
               if (typeof ref === "function") ref(node);
               else if (ref) ref.current = node;
             },
-            role: "group",
+            role: "radiogroup",
             ...props,
             className: cn("aviala-segmentator-group", className),
             "data-all-round": allRound ? "true" : "false",
@@ -2682,7 +3187,7 @@ var SegmentatorGroup = forwardRef15(
             onPointerCancel: finishPointerDrag,
             children: [
               children,
-              thumb && /* @__PURE__ */ jsx16(
+              thumb && /* @__PURE__ */ jsx20(
                 "span",
                 {
                   ref: onThumbRef,
@@ -2702,7 +3207,7 @@ var SegmentatorGroup = forwardRef15(
   }
 );
 SegmentatorGroup.displayName = "SegmentatorGroup";
-var SegmentatorItem = forwardRef15(
+var SegmentatorItem = forwardRef19(
   ({
     className,
     value,
@@ -2720,7 +3225,7 @@ var SegmentatorItem = forwardRef15(
     const isDisabled = disabled || ctx.disabled;
     const dimmed = isDisabled;
     const icon = iconOnly ? leftIcon ?? rightIcon : leftIcon;
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs14(
       "button",
       {
         ref,
@@ -2733,7 +3238,7 @@ var SegmentatorItem = forwardRef15(
         "data-drag-preview": ctx.isPressing && ctx.dragPreviewValue === value ? "true" : void 0,
         "data-all-round": ctx.allRound ? "true" : "false",
         disabled: isDisabled,
-        className: cn("aviala-segmentator-item", iconOnly && "min-w-0", className),
+        className: cn("aviala-segmentator-item aviala-focus-ring", iconOnly && "min-w-0", className),
         onClick: (e) => {
           if (ctx.consumeClickRef.current) {
             ctx.consumeClickRef.current = false;
@@ -2745,7 +3250,7 @@ var SegmentatorItem = forwardRef15(
         ...props,
         children: [
           renderIcon5(icon, dimmed && !!icon),
-          !iconOnly && /* @__PURE__ */ jsx16(
+          !iconOnly && /* @__PURE__ */ jsx20(
             "span",
             {
               className: cn(
@@ -2765,26 +3270,26 @@ var SegmentatorItem = forwardRef15(
 SegmentatorItem.displayName = "SegmentatorItem";
 
 // src/components/form-field.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-var FormField = forwardRef16(
-  ({ className, label, htmlFor, description, error, required, children, ...props }, ref) => /* @__PURE__ */ jsxs12("div", { ref, className: cn("grid gap-[var(--gap-inside,4px)]", className), ...props, children: [
-    label ? /* @__PURE__ */ jsxs12(Label2, { htmlFor, children: [
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var FormField = forwardRef20(
+  ({ className, label, htmlFor, description, error, required, children, ...props }, ref) => /* @__PURE__ */ jsxs15("div", { ref, className: cn("grid gap-[var(--gap-inside,4px)]", className), ...props, children: [
+    label ? /* @__PURE__ */ jsxs15(Label2, { htmlFor, children: [
       label,
-      required ? /* @__PURE__ */ jsx17("span", { className: "text-destructive ml-0.5", children: "*" }) : null
+      required ? /* @__PURE__ */ jsx21("span", { className: "text-destructive ml-0.5", children: "*" }) : null
     ] }) : null,
     children,
-    description && !error ? /* @__PURE__ */ jsx17(Typography, { level: "caption", as: "p", children: description }) : null,
-    error ? /* @__PURE__ */ jsx17(Typography, { level: "caption", as: "p", className: "text-destructive", children: error }) : null
+    description && !error ? /* @__PURE__ */ jsx21(Typography, { level: "caption", as: "p", children: description }) : null,
+    error ? /* @__PURE__ */ jsx21(Typography, { level: "caption", as: "p", className: "text-destructive", children: error }) : null
   ] })
 );
 FormField.displayName = "FormField";
 
 // src/components/input-group.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var InputGroup = forwardRef17(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx18(
+import { forwardRef as forwardRef21 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var InputGroup = forwardRef21(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx22(
     "div",
     {
       ref,
@@ -2798,7 +3303,7 @@ var InputGroup = forwardRef17(
   )
 );
 InputGroup.displayName = "InputGroup";
-var InputGroupAddon = forwardRef17(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+var InputGroupAddon = forwardRef21(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   "div",
   {
     ref,
@@ -2813,8 +3318,8 @@ var InputGroupAddon = forwardRef17(({ className, ...props }, ref) => /* @__PURE_
 InputGroupAddon.displayName = "InputGroupAddon";
 
 // src/components/stack.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var gapMap = {
   inside: "var(--gap-inside, 4px)",
   component: "var(--gap-component, 8px)",
@@ -2822,8 +3327,8 @@ var gapMap = {
   block: "var(--gap-block, 14px)",
   page: "var(--gap-page-space, 24px)"
 };
-var Stack = forwardRef18(
-  ({ className, gap = "component", direction = "column", style, ...props }, ref) => /* @__PURE__ */ jsx19(
+var Stack = forwardRef22(
+  ({ className, gap = "component", direction = "column", style, ...props }, ref) => /* @__PURE__ */ jsx23(
     "div",
     {
       ref,
@@ -2834,7 +3339,7 @@ var Stack = forwardRef18(
   )
 );
 Stack.displayName = "Stack";
-var Fieldset = forwardRef18(({ className, legend, children, ...props }, ref) => /* @__PURE__ */ jsxs13(
+var Fieldset = forwardRef22(({ className, legend, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
   "fieldset",
   {
     ref,
@@ -2844,7 +3349,7 @@ var Fieldset = forwardRef18(({ className, legend, children, ...props }, ref) =>
     ),
     ...props,
     children: [
-      legend ? /* @__PURE__ */ jsx19("legend", { className: cn("px-1", typographyVariants({ level: "text" })), children: legend }) : null,
+      legend ? /* @__PURE__ */ jsx23("legend", { className: cn("px-1", typographyVariants({ level: "text" })), children: legend }) : null,
       children
     ]
   }
@@ -2854,7 +3359,7 @@ Fieldset.displayName = "Fieldset";
 // src/components/color-picker/color-picker.tsx
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 import {
-  forwardRef as forwardRef20,
+  forwardRef as forwardRef24,
   useState as useState8
 } from "react";
 
@@ -3017,7 +3522,7 @@ function useColorPickerState({
 }
 
 // src/components/color-picker/color-picker-area.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function ColorPickerArea({
   className,
   disabled,
@@ -3049,11 +3554,11 @@ function ColorPickerArea({
   );
   const { handlePointerDown, handlePointerMove } = usePointerDrag(ref, handleMove, !isDisabled);
   const hueColor = pureHueHex(hsva.h);
-  return /* @__PURE__ */ jsx20("div", { className: cn("aviala-color-picker-area", className), ...spiralDebugId("color-picker.content.area"), children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsx24("div", { className: cn("aviala-color-picker-area", className), ...spiralDebugId("color-picker.content.area"), children: /* @__PURE__ */ jsxs17(
     "div",
     {
       ref,
-      className: "aviala-color-picker-area__surface",
+      className: "aviala-color-picker-area__surface aviala-focus-ring",
       style: { backgroundColor: hueColor },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -3064,9 +3569,9 @@ function ColorPickerArea({
       "aria-valuenow": Math.round(hsva.s),
       tabIndex: isDisabled ? -1 : 0,
       children: [
-        /* @__PURE__ */ jsx20("div", { className: "aviala-color-picker-area__white", "aria-hidden": true }),
-        /* @__PURE__ */ jsx20("div", { className: "aviala-color-picker-area__black", "aria-hidden": true }),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx24("div", { className: "aviala-color-picker-area__white", "aria-hidden": true }),
+        /* @__PURE__ */ jsx24("div", { className: "aviala-color-picker-area__black", "aria-hidden": true }),
+        /* @__PURE__ */ jsx24(
           "div",
           {
             className: "aviala-color-picker-area__thumb",
@@ -3085,7 +3590,7 @@ function ColorPickerArea({
 // src/components/color-picker/color-picker-inputs.tsx
 import { EditColorPicker } from "@aviala-design/icons";
 import { useCallback as useCallback7, useEffect as useEffect3, useState as useState7 } from "react";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function ColorPickerInputs({
   className,
   disabled,
@@ -3145,8 +3650,8 @@ function ColorPickerInputs({
     } catch {
     }
   }, [eyeDropperSupported, isDisabled, setValue]);
-  return /* @__PURE__ */ jsxs15("div", { className: cn("aviala-color-picker-inputs", className), ...spiralDebugId("color-picker.content.inputs"), children: [
-    showEyedropper ? /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs18("div", { className: cn("aviala-color-picker-inputs", className), ...spiralDebugId("color-picker.content.inputs"), children: [
+    showEyedropper ? /* @__PURE__ */ jsx25(
       Button,
       {
         type: "button",
@@ -3158,12 +3663,12 @@ function ColorPickerInputs({
         ...spiralDebugId("color-picker.content.inputs.eyedropper"),
         title: eyeDropperSupported ? "Pick color from screen" : "EyeDropper not supported in this browser",
         onClick: handleEyedropper,
-        children: /* @__PURE__ */ jsx21(EditColorPicker, { "aria-hidden": true })
+        children: /* @__PURE__ */ jsx25(EditColorPicker, { "aria-hidden": true })
       }
     ) : null,
-    format === "hex" ? /* @__PURE__ */ jsxs15("div", { className: "aviala-color-picker-field", children: [
-      /* @__PURE__ */ jsx21("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx21(Badge, { children: "#" }) }),
-      /* @__PURE__ */ jsx21(
+    format === "hex" ? /* @__PURE__ */ jsxs18("div", { className: "aviala-color-picker-field", children: [
+      /* @__PURE__ */ jsx25("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx25(Badge, { children: "#" }) }),
+      /* @__PURE__ */ jsx25(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -3175,7 +3680,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitHex()
         }
       )
-    ] }) : /* @__PURE__ */ jsx21("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ jsx21(
+    ] }) : /* @__PURE__ */ jsx25("div", { className: "aviala-color-picker-field", children: /* @__PURE__ */ jsx25(
       "input",
       {
         className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -3187,8 +3692,8 @@ function ColorPickerInputs({
         onKeyDown: (e) => e.key === "Enter" && commitComponents()
       }
     ) }),
-    /* @__PURE__ */ jsxs15("div", { className: "aviala-color-picker-field aviala-color-picker-field--alpha", children: [
-      /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsxs18("div", { className: "aviala-color-picker-field aviala-color-picker-field--alpha", children: [
+      /* @__PURE__ */ jsx25(
         "input",
         {
           className: cn("aviala-color-picker-field__input", typographyVariants({ level: "text" })),
@@ -3201,20 +3706,20 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitAlpha()
         }
       ),
-      /* @__PURE__ */ jsx21("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx21(Badge, { children: "%" }) })
+      /* @__PURE__ */ jsx25("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx25(Badge, { children: "%" }) })
     ] }),
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs18(
       Select,
       {
         value: format,
         onValueChange: (next) => setFormat(next),
         disabled: isDisabled,
         children: [
-          /* @__PURE__ */ jsx21(SelectTrigger, { className: "aviala-color-picker-format-select w-[76px] shrink-0", size: "regular", children: /* @__PURE__ */ jsx21(SelectValue, {}) }),
-          /* @__PURE__ */ jsx21(SelectContent, { onCloseAutoFocus: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs15(SelectItemGroup, { children: [
-            /* @__PURE__ */ jsx21(SelectItem, { value: "hex", itemFunction: "radio", children: "HEX" }),
-            /* @__PURE__ */ jsx21(SelectItem, { value: "rgb", itemFunction: "radio", children: "RGB" }),
-            /* @__PURE__ */ jsx21(SelectItem, { value: "hsl", itemFunction: "radio", children: "HSL" })
+          /* @__PURE__ */ jsx25(SelectTrigger, { className: "aviala-color-picker-format-select w-[76px] shrink-0", size: "regular", children: /* @__PURE__ */ jsx25(SelectValue, {}) }),
+          /* @__PURE__ */ jsx25(SelectContent, { onCloseAutoFocus: (event) => event.preventDefault(), children: /* @__PURE__ */ jsxs18(SelectItemGroup, { children: [
+            /* @__PURE__ */ jsx25(SelectItem, { value: "hex", itemFunction: "radio", children: "HEX" }),
+            /* @__PURE__ */ jsx25(SelectItem, { value: "rgb", itemFunction: "radio", children: "RGB" }),
+            /* @__PURE__ */ jsx25(SelectItem, { value: "hsl", itemFunction: "radio", children: "HSL" })
           ] }) })
         ]
       }
@@ -3237,21 +3742,21 @@ function buildComponentDraft(value, format) {
 import { SymbolAdd } from "@aviala-design/icons";
 
 // src/components/color-picker/color-pick-button.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var ColorPickButton = forwardRef19(
+import { forwardRef as forwardRef23 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ColorPickButton = forwardRef23(
   ({ className, color, selected = false, style, ...props }, ref) => {
     const swatch = parseColor(color).toHex();
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "button",
       {
         ref,
         type: "button",
-        className: cn("aviala-color-pick-button", className),
+        className: cn("aviala-color-pick-button aviala-focus-ring", className),
         "data-selected": selected ? "true" : void 0,
         style,
         ...props,
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx26(
           "span",
           {
             className: "aviala-color-pick-button__swatch",
@@ -3266,7 +3771,7 @@ var ColorPickButton = forwardRef19(
 ColorPickButton.displayName = "ColorPickButton";
 
 // src/components/color-picker/color-picker-presets.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function ColorPickerPresets({
   className,
   presets: presetsProp,
@@ -3288,8 +3793,8 @@ function ColorPickerPresets({
     const next = [...presets, normalized].slice(-maxPresets);
     onPresetsChange(next);
   };
-  return /* @__PURE__ */ jsxs16("div", { className: cn("aviala-color-picker-presets", className), ...spiralDebugId("color-picker.content.presets"), children: [
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs19("div", { className: cn("aviala-color-picker-presets", className), ...spiralDebugId("color-picker.content.presets"), children: [
+    /* @__PURE__ */ jsx27(
       Button,
       {
         type: "button",
@@ -3299,10 +3804,10 @@ function ColorPickerPresets({
         disabled: isDisabled || !onPresetsChange || presets.length >= maxPresets,
         "aria-label": "Add current color to presets",
         onClick: handleAdd,
-        children: /* @__PURE__ */ jsx23(SymbolAdd, { "aria-hidden": true })
+        children: /* @__PURE__ */ jsx27(SymbolAdd, { "aria-hidden": true })
       }
     ),
-    presets.map((color) => /* @__PURE__ */ jsx23(
+    presets.map((color) => /* @__PURE__ */ jsx27(
       ColorPickButton,
       {
         color,
@@ -3317,7 +3822,7 @@ function ColorPickerPresets({
 
 // src/components/color-picker/color-picker-slider.tsx
 import { useCallback as useCallback8, useRef as useRef4 } from "react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function ColorPickerSlider({
   kind,
   className,
@@ -3365,16 +3870,16 @@ function ColorPickerSlider({
     backgroundImage: `linear-gradient(90deg, transparent, ${solidHex(value)})`,
     backgroundColor: "var(--color-picker-checkerboard)"
   };
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: cn("aviala-color-picker-slider-row", className),
       ...spiralDebugId(`color-picker.content.${kind}-slider`),
-      children: /* @__PURE__ */ jsxs17(
+      children: /* @__PURE__ */ jsxs20(
         "div",
         {
           ref,
-          className: "aviala-color-picker-slider",
+          className: "aviala-color-picker-slider aviala-focus-ring",
           onPointerDown: handlePointerDown,
           onPointerMove: handlePointerMove,
           role: "slider",
@@ -3384,8 +3889,8 @@ function ColorPickerSlider({
           "aria-valuenow": ariaValueNow,
           tabIndex: isDisabled ? -1 : 0,
           children: [
-            /* @__PURE__ */ jsx24("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx28("div", { className: "aviala-color-picker-slider__track", style: trackStyle }),
+            /* @__PURE__ */ jsx28(
               "div",
               {
                 className: "aviala-color-picker-slider__thumb",
@@ -3401,7 +3906,7 @@ function ColorPickerSlider({
 }
 
 // src/components/color-picker/color-picker.tsx
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 function ColorPicker({
   children,
   className,
@@ -3444,22 +3949,22 @@ function ColorPicker({
     onPresetsChange,
     maxPresets
   };
-  return /* @__PURE__ */ jsx25(ColorPickerContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx25(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx25("div", { className: cn("inline-flex", className), ...spiralDebugId("color-picker"), children }) }) });
+  return /* @__PURE__ */ jsx29(ColorPickerContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx29(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx29("div", { className: cn("inline-flex", className), ...spiralDebugId("color-picker"), children }) }) });
 }
 function ColorPickerContextProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx25(ColorPickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx29(ColorPickerContext.Provider, { value, children });
 }
-var ColorPickerTrigger = forwardRef20(({ className, size = "regular", allRound = false, placeholder = "Select color", ...props }, ref) => {
+var ColorPickerTrigger = forwardRef24(({ className, size = "regular", allRound = false, placeholder = "Select color", ...props }, ref) => {
   const { value, open, disabled } = useColorPickerContext();
-  return /* @__PURE__ */ jsx25(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx29(PopoverPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
     "button",
     {
       ref,
       type: "button",
-      className: cn("aviala-color-picker-trigger", className),
+      className: cn("aviala-color-picker-trigger aviala-focus-ring", className),
       ...spiralDebugId("color-picker.trigger"),
       "data-size": size,
       "data-all-round": allRound ? "true" : "false",
@@ -3468,7 +3973,7 @@ var ColorPickerTrigger = forwardRef20(({ className, size = "regular", allRound =
       disabled,
       ...props,
       children: [
-        /* @__PURE__ */ jsx25("span", { className: "aviala-color-picker-trigger__swatch", ...spiralDebugId("color-picker.trigger.swatch"), children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx29("span", { className: "aviala-color-picker-trigger__swatch", ...spiralDebugId("color-picker.trigger.swatch"), children: /* @__PURE__ */ jsx29(
           "span",
           {
             className: "aviala-color-picker-trigger__swatch-inner",
@@ -3476,7 +3981,7 @@ var ColorPickerTrigger = forwardRef20(({ className, size = "regular", allRound =
             "aria-hidden": true
           }
         ) }),
-        /* @__PURE__ */ jsx25("span", { className: "aviala-color-picker-trigger__value", ...spiralDebugId("color-picker.trigger.value"), children: value ? value.replace(/^#/, "").slice(0, 6).toUpperCase() : /* @__PURE__ */ jsx25("span", { className: "aviala-color-picker-trigger__placeholder", children: placeholder }) })
+        /* @__PURE__ */ jsx29("span", { className: "aviala-color-picker-trigger__value", ...spiralDebugId("color-picker.trigger.value"), children: value ? value.replace(/^#/, "").slice(0, 6).toUpperCase() : /* @__PURE__ */ jsx29("span", { className: "aviala-color-picker-trigger__placeholder", children: placeholder }) })
       ]
     }
   ) });
@@ -3485,7 +3990,7 @@ ColorPickerTrigger.displayName = "ColorPickerTrigger";
 function isWithinSelectLayer(target) {
   return target instanceof Element && (target.closest(".aviala-select-content") !== null || target.closest("[data-radix-select-viewport]") !== null);
 }
-var ColorPickerContent = forwardRef20(
+var ColorPickerContent = forwardRef24(
   ({
     className,
     align = "start",
@@ -3495,7 +4000,7 @@ var ColorPickerContent = forwardRef20(
     ...props
   }, ref) => {
     const { presets, onPresetsChange, maxPresets, disabled } = useColorPickerContext();
-    return /* @__PURE__ */ jsx25(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx29(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx29(
       PopoverPrimitive2.Content,
       {
         ref,
@@ -3511,12 +4016,12 @@ var ColorPickerContent = forwardRef20(
         },
         onFocusOutside: (event) => event.preventDefault(),
         ...props,
-        children: /* @__PURE__ */ jsxs18("div", { className: "aviala-color-picker-panel", children: [
-          /* @__PURE__ */ jsx25(ColorPickerArea, { disabled }),
-          /* @__PURE__ */ jsx25(ColorPickerSlider, { kind: "hue", disabled }),
-          /* @__PURE__ */ jsx25(ColorPickerSlider, { kind: "alpha", disabled }),
-          /* @__PURE__ */ jsx25(ColorPickerInputs, { disabled, showEyedropper }),
-          showPresets ? /* @__PURE__ */ jsx25(
+        children: /* @__PURE__ */ jsxs21("div", { className: "aviala-color-picker-panel", children: [
+          /* @__PURE__ */ jsx29(ColorPickerArea, { disabled }),
+          /* @__PURE__ */ jsx29(ColorPickerSlider, { kind: "hue", disabled }),
+          /* @__PURE__ */ jsx29(ColorPickerSlider, { kind: "alpha", disabled }),
+          /* @__PURE__ */ jsx29(ColorPickerInputs, { disabled, showEyedropper }),
+          showPresets ? /* @__PURE__ */ jsx29(
             ColorPickerPresets,
             {
               disabled,
@@ -3533,7 +4038,7 @@ var ColorPickerContent = forwardRef20(
 ColorPickerContent.displayName = "ColorPickerContent";
 
 // src/components/color-picker/color-picker-panel.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 function ColorPickerPanel({
   className,
   disabled,
@@ -3565,12 +4070,12 @@ function ColorPickerPanel({
     onPresetsChange,
     maxPresets
   };
-  return /* @__PURE__ */ jsx26(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs19("div", { className: cn("aviala-color-picker-panel", className), children: [
-    /* @__PURE__ */ jsx26(ColorPickerArea, { disabled }),
-    /* @__PURE__ */ jsx26(ColorPickerSlider, { kind: "hue", disabled }),
-    /* @__PURE__ */ jsx26(ColorPickerSlider, { kind: "alpha", disabled }),
-    /* @__PURE__ */ jsx26(ColorPickerInputs, { disabled, showEyedropper }),
-    showPresets ? /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx30(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs22("div", { className: cn("aviala-color-picker-panel", className), children: [
+    /* @__PURE__ */ jsx30(ColorPickerArea, { disabled }),
+    /* @__PURE__ */ jsx30(ColorPickerSlider, { kind: "hue", disabled }),
+    /* @__PURE__ */ jsx30(ColorPickerSlider, { kind: "alpha", disabled }),
+    /* @__PURE__ */ jsx30(ColorPickerInputs, { disabled, showEyedropper }),
+    showPresets ? /* @__PURE__ */ jsx30(
       ColorPickerPresets,
       {
         disabled,
@@ -3591,8 +4096,8 @@ import {
 } from "@aviala-design/icons";
 import {
   createContext as createContext5,
-  forwardRef as forwardRef21,
-  isValidElement as isValidElement9,
+  forwardRef as forwardRef25,
+  isValidElement as isValidElement11,
   useCallback as useCallback9,
   useContext as useContext5,
   useEffect as useEffect4,
@@ -3601,7 +4106,7 @@ import {
   useRef as useRef5,
   useState as useState9
 } from "react";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var CascaderContext = createContext5(null);
 function useCascaderContext() {
   const context = useContext5(CascaderContext);
@@ -3616,7 +4121,7 @@ function renderSlotIcon4(node, debugId) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx31(
     "span",
     {
       className: "aviala-cascader-trigger__slot",
@@ -3632,7 +4137,7 @@ function renderItemIcon2(node, iconLevel = "text", debugId) {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx31(
     "span",
     {
       className: cn(
@@ -3647,16 +4152,16 @@ function renderItemIcon2(node, iconLevel = "text", debugId) {
 }
 function renderBadgeSlot2(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-item__badge", children: isValidElement9(node) && node.type === Badge ? node : /* @__PURE__ */ jsx27(Badge, { children: node }) });
+  return /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-item__badge", children: isValidElement11(node) && node.type === Badge ? node : /* @__PURE__ */ jsx31(Badge, { children: node }) });
 }
 function CascaderItemFormRadio() {
-  return /* @__PURE__ */ jsxs20("span", { className: "aviala-cascader-item__form-radio", "aria-hidden": true, children: [
-    /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-item__form-radio-surface" }),
-    /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-item__form-radio-indicator" })
+  return /* @__PURE__ */ jsxs23("span", { className: "aviala-cascader-item__form-radio", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-item__form-radio-surface" }),
+    /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-item__form-radio-indicator" })
   ] });
 }
 function CascaderItemFormCheckbox() {
-  return /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx31(
     SymbolRight3,
     {
       className: "aviala-cascader-item__form-checkbox-icon",
@@ -3669,27 +4174,27 @@ function CascaderItemFormCheckbox() {
 }
 function CascaderItemTrailingRadio({ selected }) {
   if (!selected) return null;
-  return /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ jsx27(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ jsx31(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function CascaderItemTrailingCheckbox({ selected }) {
   if (!selected) return null;
-  return /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx27(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ jsx31(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function renderFunctionSlot2(itemFunction, layout, showFunctionIcon, hasChildren, selected, icon) {
   if (!showFunctionIcon || layout === "title") return null;
   if (icon !== void 0) {
-    return /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-item__function", children: icon });
+    return /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-item__function", children: icon });
   }
   switch (itemFunction) {
     case "radio":
-      return /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx27(CascaderItemTrailingRadio, { selected }) });
+      return /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx31(CascaderItemTrailingRadio, { selected }) });
     case "checkbox":
-      return /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx27(CascaderItemTrailingCheckbox, { selected }) });
+      return /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-item__function", children: /* @__PURE__ */ jsx31(CascaderItemTrailingCheckbox, { selected }) });
     case "simple":
     default:
-      return /* @__PURE__ */ jsxs20("span", { className: "aviala-cascader-item__function", children: [
-        selected ? /* @__PURE__ */ jsx27(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) : null,
-        hasChildren ? /* @__PURE__ */ jsx27(DirectionArrowRightLight, { level: "text", biggerSize: true, "aria-hidden": true }) : null
+      return /* @__PURE__ */ jsxs23("span", { className: "aviala-cascader-item__function", children: [
+        selected ? /* @__PURE__ */ jsx31(SymbolRight3, { level: "text", biggerSize: true, "aria-hidden": true }) : null,
+        hasChildren ? /* @__PURE__ */ jsx31(DirectionArrowRightLight, { level: "text", biggerSize: true, "aria-hidden": true }) : null
       ] });
   }
 }
@@ -3838,9 +4343,9 @@ function Cascader({
       size
     ]
   );
-  return /* @__PURE__ */ jsx27(CascaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx27(PopoverPrimitive3.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx27("div", { className: cn("inline-flex", className), ...spiralDebugId("cascader"), children }) }) });
+  return /* @__PURE__ */ jsx31(CascaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx31(PopoverPrimitive3.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx31("div", { className: cn("inline-flex", className), ...spiralDebugId("cascader"), children }) }) });
 }
-var CascaderTrigger = forwardRef21(
+var CascaderTrigger = forwardRef25(
   ({
     className,
     size: sizeProp,
@@ -3859,17 +4364,17 @@ var CascaderTrigger = forwardRef21(
     const size = sizeProp ?? sizeContext;
     const disabled = disabledProp ?? disabledContext;
     const labels = selectedPath.map((_, index) => getOptionAtPath(selectedPath.slice(0, index + 1))?.label).filter((label) => label != null && label !== false);
-    const resolvedDisplay = displayValue ?? (labels.length > 0 ? labels.map((label, index) => /* @__PURE__ */ jsxs20("span", { children: [
+    const resolvedDisplay = displayValue ?? (labels.length > 0 ? labels.map((label, index) => /* @__PURE__ */ jsxs23("span", { children: [
       index > 0 ? separator : null,
       label
     ] }, `${selectedPath[index]}-${index}`)) : null);
     const hasValue = resolvedDisplay != null && resolvedDisplay !== false;
-    return /* @__PURE__ */ jsx27(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsx31(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
       "button",
       {
         ref,
         type: "button",
-        className: cn("aviala-cascader-trigger", className),
+        className: cn("aviala-cascader-trigger aviala-focus-ring", className),
         "data-size": size,
         "data-all-round": allRound ? "true" : "false",
         "data-state": open ? "open" : "closed",
@@ -3881,7 +4386,7 @@ var CascaderTrigger = forwardRef21(
         ...props,
         children: [
           renderSlotIcon4(leftIcon, "cascader.trigger.icon-left"),
-          /* @__PURE__ */ jsx27("span", { className: "aviala-cascader-trigger__field", ...spiralDebugId("cascader.trigger.value"), children: /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx31("span", { className: "aviala-cascader-trigger__field", ...spiralDebugId("cascader.trigger.value"), children: /* @__PURE__ */ jsx31(
             "span",
             {
               className: cn("aviala-cascader-trigger__value", typographyVariants({ level: "text" })),
@@ -3890,14 +4395,14 @@ var CascaderTrigger = forwardRef21(
             }
           ) }),
           renderSlotIcon4(rightIcon, "cascader.trigger.icon-right"),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx31(
             "span",
             {
               className: "aviala-cascader-trigger__expand",
               "aria-hidden": true,
               style: expandIcon ? iconSlotCssVarStyle(expandIcon, "--input-slot-icon-size", "text", true) : iconLevelCssVarStyle("text", true, "--input-slot-icon-size"),
               ...spiralDebugId("cascader.trigger.expand"),
-              children: expandIcon ?? /* @__PURE__ */ jsx27(DirectionArrowDownLight2, { level: "text", biggerSize: true, "aria-hidden": true })
+              children: expandIcon ?? /* @__PURE__ */ jsx31(DirectionArrowDownLight2, { level: "text", biggerSize: true, "aria-hidden": true })
             }
           )
         ]
@@ -3906,7 +4411,7 @@ var CascaderTrigger = forwardRef21(
   }
 );
 CascaderTrigger.displayName = "CascaderTrigger";
-var CascaderContent = forwardRef21(
+var CascaderContent = forwardRef25(
   ({
     className,
     children,
@@ -3915,7 +4420,7 @@ var CascaderContent = forwardRef21(
     portalled = true,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx27(
+    const content = /* @__PURE__ */ jsx31(
       PopoverPrimitive3.Content,
       {
         ref,
@@ -3928,15 +4433,15 @@ var CascaderContent = forwardRef21(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx27(PopoverPrimitive3.Portal, { children: content });
+    return /* @__PURE__ */ jsx31(PopoverPrimitive3.Portal, { children: content });
   }
 );
 CascaderContent.displayName = "CascaderContent";
-var CascaderMenu = forwardRef21(
-  ({ children, className }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("aviala-cascader-menu", className), children })
+var CascaderMenu = forwardRef25(
+  ({ children, className }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: cn("aviala-cascader-menu", className), children })
 );
 CascaderMenu.displayName = "CascaderMenu";
-var CascaderColumn = forwardRef21(
+var CascaderColumn = forwardRef25(
   ({ children, className, animateEnter, animateExit, exitLayout }, ref) => {
     const animate = animateExit ? "exit" : animateEnter ? "enter" : void 0;
     const exitStyle = animateExit && exitLayout ? {
@@ -3947,14 +4452,14 @@ var CascaderColumn = forwardRef21(
       width: exitLayout.width,
       zIndex: 0
     } : void 0;
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx31(
       "div",
       {
         ref,
         className: cn("aviala-cascader-column", className),
         "data-animate": animate,
         style: exitStyle,
-        children: /* @__PURE__ */ jsx27("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
+        children: /* @__PURE__ */ jsx31("div", { className: "aviala-cascader-column__surface", "data-animate": animate, children })
       }
     );
   }
@@ -3966,13 +4471,13 @@ function CascaderItemGroup({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs20("div", { className: cn("aviala-cascader-group", className), children: [
-    label ? /* @__PURE__ */ jsx27("div", { className: cn("aviala-cascader-label", typographyVariants({ level: "caption" })), children: label }) : null,
-    /* @__PURE__ */ jsx27("div", { className: "aviala-cascader-group__slot", children }),
-    showDivider ? /* @__PURE__ */ jsx27("div", { className: "aviala-cascader-separator", role: "separator" }) : null
+  return /* @__PURE__ */ jsxs23("div", { className: cn("aviala-cascader-group", className), children: [
+    label ? /* @__PURE__ */ jsx31("div", { className: cn("aviala-cascader-label", typographyVariants({ level: "caption" })), children: label }) : null,
+    /* @__PURE__ */ jsx31("div", { className: "aviala-cascader-group__slot", children }),
+    showDivider ? /* @__PURE__ */ jsx31("div", { className: "aviala-cascader-separator", role: "separator" }) : null
   ] });
 }
-var CascaderItem = forwardRef21(
+var CascaderItem = forwardRef25(
   ({
     value,
     pathPrefix = [],
@@ -4030,7 +4535,7 @@ var CascaderItem = forwardRef21(
         expandTo(path);
       }
     };
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs23(
       "button",
       {
         ref,
@@ -4039,7 +4544,7 @@ var CascaderItem = forwardRef21(
         "aria-selected": isSelected,
         "aria-expanded": hasChildren ? isExpanded : void 0,
         disabled: isDisabled,
-        className: cn("aviala-cascader-item", className),
+        className: cn("aviala-cascader-item aviala-focus-ring", className),
         "data-layout": layout !== "default" ? layout : void 0,
         "data-function": itemFunction !== "simple" ? itemFunction : void 0,
         "data-selected": isSelected ? "true" : void 0,
@@ -4062,10 +4567,10 @@ var CascaderItem = forwardRef21(
           if (!isTitle) setHighlightedValue(value);
         },
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx27(CascaderItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx27(CascaderItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ jsx31(CascaderItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ jsx31(CascaderItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon2(leftIcon, leftIconLevel, "cascader.content.item.icon-left") : null,
-          /* @__PURE__ */ jsx27("span", { className: cn("aviala-cascader-item__text", typographyVariants({ level: isTitle ? "caption" : "text" })), children: children ?? option?.label }),
+          /* @__PURE__ */ jsx31("span", { className: cn("aviala-cascader-item__text", typographyVariants({ level: isTitle ? "caption" : "text" })), children: children ?? option?.label }),
           showBadge ? renderBadgeSlot2(badge ?? "Text") : null,
           showRightIcon && rightIcon ? renderItemIcon2(rightIcon, leftIconLevel) : null,
           renderFunctionSlot2(
@@ -4190,7 +4695,7 @@ function CascaderOptionsMenu({ className }) {
     }, COLUMN_ANIMATION_MS);
     return () => window.clearTimeout(timeout);
   }, [columns, open]);
-  return /* @__PURE__ */ jsx27(CascaderMenu, { ref: menuRef, className, children: columns.map(({ pathPrefix, key, animateEnter, animateExit, exitLayout }) => /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx31(CascaderMenu, { ref: menuRef, className, children: columns.map(({ pathPrefix, key, animateEnter, animateExit, exitLayout }) => /* @__PURE__ */ jsx31(
     CascaderColumn,
     {
       ref: (element) => {
@@ -4203,7 +4708,7 @@ function CascaderOptionsMenu({ className }) {
       animateEnter,
       animateExit,
       exitLayout,
-      children: /* @__PURE__ */ jsx27(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx31(CascaderItemGroup, { label: "Title", showDivider: true, children: getOptionsAtPath2(pathPrefix).map((option) => /* @__PURE__ */ jsx31(
         CascaderItem,
         {
           value: option.value,
@@ -4241,7 +4746,7 @@ function CascaderField({
   separator,
   ...triggerProps
 }) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs23(
     Cascader,
     {
       options,
@@ -4256,7 +4761,7 @@ function CascaderField({
       changeOnSelect,
       className,
       children: [
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx31(
           CascaderTrigger,
           {
             size,
@@ -4270,7 +4775,7 @@ function CascaderField({
             ...triggerProps
           }
         ),
-        /* @__PURE__ */ jsx27(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ jsx27(CascaderOptionsMenu, { className: menuClassName }) })
+        /* @__PURE__ */ jsx31(CascaderContent, { className: contentClassName, children: /* @__PURE__ */ jsx31(CascaderOptionsMenu, { className: menuClassName }) })
       ]
     }
   );
@@ -4285,7 +4790,7 @@ import {
   TimeAndDateDate
 } from "@aviala-design/icons";
 import {
-  forwardRef as forwardRef22,
+  forwardRef as forwardRef26,
   useCallback as useCallback11,
   useEffect as useEffect6,
   useId as useId2,
@@ -4296,13 +4801,13 @@ import {
 
 // src/components/date-picker/date-picker-context.tsx
 import { createContext as createContext6, useContext as useContext6 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var DatePickerContext = createContext6(null);
 function DatePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx28(DatePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx32(DatePickerContext.Provider, { value, children });
 }
 function useDatePickerContext() {
   const context = useContext6(DatePickerContext);
@@ -4319,6 +4824,11 @@ function startOfDay(date) {
   copy.setHours(0, 0, 0, 0);
   return copy;
 }
+function applyTimeToDate(date, hours, minutes) {
+  const next = startOfDay(date);
+  next.setHours(hours, minutes, 0, 0);
+  return next;
+}
 function isSameDay(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
@@ -4432,7 +4942,7 @@ import {
   useMemo as useMemo5,
   useRef as useRef6
 } from "react";
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 var LOOP_SECTIONS = 3;
 var MIDDLE_SECTION = 1;
 var SCROLL_END_DEBOUNCE_MS = 80;
@@ -4594,44 +5104,44 @@ function DatePickerTimeWheelColumn({
     }
   };
   const selectedOptionId = loop ? `${ariaLabel}-${value}-${values.length * MIDDLE_SECTION + getValueIndex(values, value)}` : `${ariaLabel}-${value}`;
-  return /* @__PURE__ */ jsxs21("div", { className: cn("aviala-datepicker-time__wheel", className), children: [
-    /* @__PURE__ */ jsx29("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs24("div", { className: cn("aviala-datepicker-time__wheel", className), children: [
+    /* @__PURE__ */ jsx33("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--top",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: "aviala-datepicker-time__wheel-fade aviala-datepicker-time__wheel-fade--bottom",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx33(
       "div",
       {
         ref: scrollRef,
-        className: "aviala-datepicker-time__wheel-scroll",
+        className: "aviala-datepicker-time__wheel-scroll aviala-focus-ring",
         onScroll: handleScroll,
         role: "listbox",
         "aria-label": ariaLabel,
         "aria-activedescendant": selectedOptionId,
         tabIndex: 0,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsx29("ul", { className: "aviala-datepicker-time__wheel-list", children: repeatedValues.map((itemValue, index) => {
+        children: /* @__PURE__ */ jsx33("ul", { className: "aviala-datepicker-time__wheel-list", children: repeatedValues.map((itemValue, index) => {
           const isSelected = itemValue === value;
           const optionId = loop ? `${ariaLabel}-${itemValue}-${index}` : `${ariaLabel}-${itemValue}`;
-          return /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsx33(
             "li",
             {
               id: optionId,
               className: "aviala-datepicker-time__wheel-item",
               role: "option",
               "aria-selected": isSelected,
-              children: /* @__PURE__ */ jsx29(
+              children: /* @__PURE__ */ jsx33(
                 "button",
                 {
                   type: "button",
@@ -4660,12 +5170,12 @@ function DatePickerTimeWheelColumn({
 }
 
 // src/components/time-picker/time-picker-wheels.tsx
-import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 var TIME_PICKER_HOUR_VALUES = Array.from({ length: 24 }, (_, index) => index);
 var TIME_PICKER_MINUTE_VALUES = Array.from({ length: 12 }, (_, index) => index * 5);
 function TimePickerWheels({ value, onChange, className }) {
-  return /* @__PURE__ */ jsx30("div", { className: cn("aviala-datepicker-time", className), role: "group", "aria-label": "\u9009\u62E9\u65F6\u95F4", children: /* @__PURE__ */ jsxs22("div", { className: "aviala-datepicker-time__columns", children: [
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx34("div", { className: cn("aviala-datepicker-time", className), role: "group", "aria-label": "\u9009\u62E9\u65F6\u95F4", children: /* @__PURE__ */ jsxs25("div", { className: "aviala-datepicker-time__columns", children: [
+    /* @__PURE__ */ jsx34(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5C0F\u65F6",
@@ -4674,7 +5184,7 @@ function TimePickerWheels({ value, onChange, className }) {
         onChange: (hours) => onChange({ ...value, hours })
       }
     ),
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx34(
       DatePickerTimeWheelColumn,
       {
         "aria-label": "\u5206\u949F",
@@ -4687,14 +5197,14 @@ function TimePickerWheels({ value, onChange, className }) {
 }
 
 // src/components/date-picker/date-picker.tsx
-import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 function renderSlotIcon5(node) {
   if (!node) return null;
   const content = cloneAvialaIconElement(node, {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx35(
     "span",
     {
       className: "aviala-datepicker-trigger__slot",
@@ -4747,8 +5257,39 @@ function DatePicker(props) {
         setInternalTime(next);
       }
       onTimeChange?.(next);
+      if (!enableTime) return;
+      if (mode === "single") {
+        const current = props.value !== void 0 ? props.value : internalSingle;
+        if (!current) return;
+        const controlled2 = props.value !== void 0;
+        const merged2 = applyTimeToDate(current, next.hours, next.minutes);
+        if (!controlled2) {
+          setInternalSingle(merged2);
+        }
+        props.onValueChange?.(merged2);
+        return;
+      }
+      const currentRange = props.value !== void 0 ? props.value ?? {} : internalRange;
+      if (!currentRange.from && !currentRange.to) return;
+      const controlled = props.value !== void 0;
+      const merged = {
+        from: currentRange.from ? applyTimeToDate(currentRange.from, next.hours, next.minutes) : void 0,
+        to: currentRange.to ? applyTimeToDate(currentRange.to, next.hours, next.minutes) : void 0
+      };
+      if (!controlled) {
+        setInternalRange(merged);
+      }
+      props.onValueChange?.(merged);
     },
-    [onTimeChange, timeValueProp]
+    [
+      enableTime,
+      internalRange,
+      internalSingle,
+      mode,
+      onTimeChange,
+      props,
+      timeValueProp
+    ]
   );
   const singleValue = mode === "single" ? props.value !== void 0 ? props.value : internalSingle : void 0;
   const rangeValue = mode === "range" ? props.value !== void 0 ? props.value ?? {} : internalRange : { from: rangeDraftFrom };
@@ -4825,32 +5366,50 @@ function DatePicker(props) {
         setViewMonth(new Date(day.getFullYear(), day.getMonth(), 1));
       }
       if (mode === "single") {
-        commitSingle(day);
-        handleOpenChange(false);
+        const next = enableTime ? applyTimeToDate(day, timeValue.hours, timeValue.minutes) : day;
+        commitSingle(next);
+        if (enableTime) {
+          setActivePanel("time");
+        } else {
+          handleOpenChange(false);
+        }
         return;
       }
       const currentFrom = rangeDraftFrom ?? rangeValue.from;
       const currentTo = rangeValue.to;
+      const withTime = (d) => enableTime ? applyTimeToDate(d, timeValue.hours, timeValue.minutes) : d;
       if (!currentFrom || currentFrom && currentTo) {
         setRangeDraftFrom(day);
-        commitRange({ from: day, to: void 0 });
+        commitRange({ from: withTime(day), to: void 0 });
         return;
       }
       if (isSameDay(day, currentFrom)) {
-        commitRange({ from: day, to: day });
+        commitRange({ from: withTime(day), to: withTime(day) });
         setRangeDraftFrom(void 0);
-        handleOpenChange(false);
+        if (enableTime) {
+          setActivePanel("time");
+        } else {
+          handleOpenChange(false);
+        }
         return;
       }
       const normalized = normalizeRange(currentFrom, day);
-      commitRange(normalized);
+      commitRange({
+        from: normalized.from ? withTime(normalized.from) : void 0,
+        to: normalized.to ? withTime(normalized.to) : void 0
+      });
       setRangeDraftFrom(void 0);
-      handleOpenChange(false);
+      if (enableTime) {
+        setActivePanel("time");
+      } else {
+        handleOpenChange(false);
+      }
     },
     [
       commitRange,
       commitSingle,
       disabled,
+      enableTime,
       handleOpenChange,
       maxDate,
       minDate,
@@ -4858,6 +5417,8 @@ function DatePicker(props) {
       rangeDraftFrom,
       rangeValue.from,
       rangeValue.to,
+      timeValue.hours,
+      timeValue.minutes,
       viewMonth
     ]
   );
@@ -4901,9 +5462,9 @@ function DatePicker(props) {
       viewMonth
     ]
   );
-  return /* @__PURE__ */ jsx31(DatePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx31(PopoverPrimitive4.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx31("div", { className: cn("inline-flex", className), children }) }) });
+  return /* @__PURE__ */ jsx35(DatePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx35(PopoverPrimitive4.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx35("div", { className: cn("inline-flex", className), children }) }) });
 }
-var DatePickerTrigger = forwardRef22(
+var DatePickerTrigger = forwardRef26(
   ({
     className,
     size: sizeProp,
@@ -4933,12 +5494,12 @@ var DatePickerTrigger = forwardRef22(
     const formatted = displayValue ?? (mode === "single" ? singleValue ? enableTime ? formatDisplayDateTime(singleValue, timeValue.hours, timeValue.minutes) : formatDisplayDate(singleValue) : null : rangeValue.from && rangeValue.to ? enableTime ? `${formatDisplayDateTime(rangeValue.from, timeValue.hours, timeValue.minutes)}${rangeSeparator}${formatDisplayDateTime(rangeValue.to, timeValue.hours, timeValue.minutes)}` : `${formatDisplayDate(rangeValue.from)}${rangeSeparator}${formatDisplayDate(rangeValue.to)}` : rangeValue.from ? enableTime ? `${formatDisplayDateTime(rangeValue.from, timeValue.hours, timeValue.minutes)}${rangeSeparator}\u2026` : `${formatDisplayDate(rangeValue.from)}${rangeSeparator}\u2026` : null);
     const defaultPlaceholder = enableTime ? "YYYY-MM-DD HH:mm" : placeholder;
     const hasValue = formatted != null && formatted !== false;
-    return /* @__PURE__ */ jsx31(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsx35(PopoverPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs26(
       "button",
       {
         ref,
         type: "button",
-        className: cn("aviala-datepicker-trigger", className),
+        className: cn("aviala-datepicker-trigger aviala-focus-ring", className),
         "data-size": size,
         "data-all-round": allRound ? "true" : "false",
         "data-state": open ? "open" : "closed",
@@ -4949,9 +5510,9 @@ var DatePickerTrigger = forwardRef22(
         ...props,
         children: [
           renderSlotIcon5(
-            leftIcon ?? /* @__PURE__ */ jsx31(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true })
+            leftIcon ?? /* @__PURE__ */ jsx35(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true })
           ),
-          /* @__PURE__ */ jsx31("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx35("span", { className: "aviala-datepicker-trigger__field", children: /* @__PURE__ */ jsx35(
             "span",
             {
               className: cn(
@@ -4969,7 +5530,7 @@ var DatePickerTrigger = forwardRef22(
   }
 );
 DatePickerTrigger.displayName = "DatePickerTrigger";
-var DatePickerContent = forwardRef22(
+var DatePickerContent = forwardRef26(
   ({
     className,
     children,
@@ -4978,7 +5539,7 @@ var DatePickerContent = forwardRef22(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx31(
+    const content = /* @__PURE__ */ jsx35(
       PopoverPrimitive4.Content,
       {
         ref,
@@ -4986,11 +5547,11 @@ var DatePickerContent = forwardRef22(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx31(DatePickerCalendar, {})
+        children: children ?? /* @__PURE__ */ jsx35(DatePickerCalendar, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx31(PopoverPrimitive4.Portal, { children: content });
+    return /* @__PURE__ */ jsx35(PopoverPrimitive4.Portal, { children: content });
   }
 );
 DatePickerContent.displayName = "DatePickerContent";
@@ -5008,7 +5569,7 @@ function getFooterDateLabel(mode, singleValue, rangeValue) {
 }
 function DatePickerTimePanel() {
   const { timeValue, setTimeValue } = useDatePickerContext();
-  return /* @__PURE__ */ jsx31(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
+  return /* @__PURE__ */ jsx35(TimePickerWheels, { value: timeValue, onChange: setTimeValue });
 }
 function DatePickerPanelFooter() {
   const {
@@ -5023,7 +5584,7 @@ function DatePickerPanelFooter() {
   if (!enableTime) return null;
   const panelValue = activePanel === "date" ? "date" : "time";
   const isRangeMode = mode === "range";
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs26(
     SegmentatorGroup,
     {
       value: panelValue,
@@ -5034,20 +5595,20 @@ function DatePickerPanelFooter() {
       "data-active-panel": activePanel,
       "aria-label": "\u65E5\u671F\u4E0E\u65F6\u95F4\u5207\u6362",
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx35(
           SegmentatorItem,
           {
             value: "date",
-            leftIcon: /* @__PURE__ */ jsx31(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ jsx35(TimeAndDateDate, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && activePanel === "time",
             children: getFooterDateLabel(mode, singleValue, rangeValue)
           }
         ),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx35(
           SegmentatorItem,
           {
             value: "time",
-            leftIcon: /* @__PURE__ */ jsx31(TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
+            leftIcon: /* @__PURE__ */ jsx35(TimeAndDateClock, { level: "text", biggerSize: true, "aria-hidden": true }),
             iconOnly: isRangeMode && activePanel === "date",
             children: formatTimeValue(timeValue.hours, timeValue.minutes)
           }
@@ -5121,26 +5682,26 @@ function DatePickerCalendar({ className }) {
       setViewMonth(new Date(normalized.getFullYear(), normalized.getMonth(), 1));
     }
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: cn("aviala-datepicker-calendar", className),
       role: "application",
       "aria-label": "Calendar",
       children: [
-        activePanel === "time" && enableTime ? /* @__PURE__ */ jsx31("div", { className: "aviala-datepicker-calendar__body", children: /* @__PURE__ */ jsx31(DatePickerTimePanel, {}) }) : /* @__PURE__ */ jsxs23("div", { className: "aviala-datepicker-calendar__body", children: [
-          /* @__PURE__ */ jsxs23("div", { className: "aviala-datepicker-calendar__header", children: [
-            /* @__PURE__ */ jsx31(
+        activePanel === "time" && enableTime ? /* @__PURE__ */ jsx35("div", { className: "aviala-datepicker-calendar__body", children: /* @__PURE__ */ jsx35(DatePickerTimePanel, {}) }) : /* @__PURE__ */ jsxs26("div", { className: "aviala-datepicker-calendar__body", children: [
+          /* @__PURE__ */ jsxs26("div", { className: "aviala-datepicker-calendar__header", children: [
+            /* @__PURE__ */ jsx35(
               "button",
               {
                 type: "button",
-                className: "aviala-datepicker-calendar__nav",
+                className: "aviala-datepicker-calendar__nav aviala-focus-ring",
                 "aria-label": "Previous month",
                 onClick: () => setViewMonth(addMonths(viewMonth, -1)),
-                children: /* @__PURE__ */ jsx31(DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
+                children: /* @__PURE__ */ jsx35(DirectionArrowLeft, { level: "text", biggerSize: true, "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsx35(
               "div",
               {
                 id: `${calendarId}-label`,
@@ -5151,18 +5712,18 @@ function DatePickerCalendar({ className }) {
                 children: formatMonthYear(viewMonth)
               }
             ),
-            /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsx35(
               "button",
               {
                 type: "button",
-                className: "aviala-datepicker-calendar__nav",
+                className: "aviala-datepicker-calendar__nav aviala-focus-ring",
                 "aria-label": "Next month",
                 onClick: () => setViewMonth(addMonths(viewMonth, 1)),
-                children: /* @__PURE__ */ jsx31(DirectionArrowRight2, { level: "text", biggerSize: true, "aria-hidden": true })
+                children: /* @__PURE__ */ jsx35(DirectionArrowRight2, { level: "text", biggerSize: true, "aria-hidden": true })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx31("div", { className: "aviala-datepicker-calendar__weekdays", "aria-hidden": true, children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx35("div", { className: "aviala-datepicker-calendar__weekdays", "aria-hidden": true, children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx35(
             "span",
             {
               className: cn(
@@ -5173,7 +5734,7 @@ function DatePickerCalendar({ className }) {
             },
             label
           )) }),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx35(
             "div",
             {
               className: "aviala-datepicker-calendar__grid",
@@ -5187,13 +5748,13 @@ function DatePickerCalendar({ className }) {
                 const isToday = isSameDay(day, today);
                 const disabled = isDateDisabled(day, minDate, maxDate);
                 const focused = focusedDay ? isSameDay(day, focusedDay) : false;
-                return /* @__PURE__ */ jsxs23(
+                return /* @__PURE__ */ jsxs26(
                   "button",
                   {
                     type: "button",
                     role: "gridcell",
                     tabIndex: focused || !focusedDay && isToday ? 0 : -1,
-                    className: "aviala-datepicker-day",
+                    className: "aviala-datepicker-day aviala-focus-ring",
                     "data-outside": outside ? "true" : void 0,
                     "data-selected": selected ? "true" : void 0,
                     "data-in-range": inRange && !selected ? "true" : void 0,
@@ -5208,7 +5769,7 @@ function DatePickerCalendar({ className }) {
                     onFocus: () => setFocusedDay(day),
                     onKeyDown: (event) => handleDayKeyDown(event, day),
                     children: [
-                      /* @__PURE__ */ jsx31(
+                      /* @__PURE__ */ jsx35(
                         "span",
                         {
                           className: cn(
@@ -5218,7 +5779,7 @@ function DatePickerCalendar({ className }) {
                           children: day.getDate()
                         }
                       ),
-                      isToday ? /* @__PURE__ */ jsx31("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
+                      isToday ? /* @__PURE__ */ jsx35("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
                     ]
                   },
                   day.toISOString()
@@ -5227,7 +5788,7 @@ function DatePickerCalendar({ className }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx31(DatePickerPanelFooter, {})
+        /* @__PURE__ */ jsx35(DatePickerPanelFooter, {})
       ]
     }
   );
@@ -5290,8 +5851,8 @@ function DatePickerField({
     defaultTimeValue,
     onTimeChange
   };
-  return /* @__PURE__ */ jsxs23(DatePicker, { ...pickerProps, size, className, children: [
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs26(DatePicker, { ...pickerProps, size, className, children: [
+    /* @__PURE__ */ jsx35(
       DatePickerTrigger,
       {
         size,
@@ -5304,7 +5865,7 @@ function DatePickerField({
         rangeSeparator
       }
     ),
-    /* @__PURE__ */ jsx31(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx31(DatePickerCalendar, { className: calendarClassName }) })
+    /* @__PURE__ */ jsx35(DatePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx35(DatePickerCalendar, { className: calendarClassName }) })
   ] });
 }
 
@@ -5312,7 +5873,7 @@ function DatePickerField({
 import * as PopoverPrimitive5 from "@radix-ui/react-popover";
 import { TimeAndDateClock as TimeAndDateClock2 } from "@aviala-design/icons";
 import {
-  forwardRef as forwardRef23,
+  forwardRef as forwardRef27,
   useCallback as useCallback12,
   useEffect as useEffect7,
   useMemo as useMemo7,
@@ -5322,13 +5883,13 @@ import {
 
 // src/components/time-picker/time-picker-context.tsx
 import { createContext as createContext7, useContext as useContext7 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var TimePickerContext = createContext7(null);
 function TimePickerProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx32(TimePickerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx36(TimePickerContext.Provider, { value, children });
 }
 function useTimePickerContext() {
   const context = useContext7(TimePickerContext);
@@ -5339,14 +5900,14 @@ function useTimePickerContext() {
 }
 
 // src/components/time-picker/time-picker.tsx
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 function renderSlotIcon6(node) {
   if (!node) return null;
   const content = cloneAvialaIconElement(node, {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx37(
     "span",
     {
       className: "aviala-timepicker-trigger__slot",
@@ -5427,9 +5988,9 @@ function TimePicker({
     }),
     [disabled, open, size, value, setValue]
   );
-  return /* @__PURE__ */ jsx33(TimePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx33(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx33("div", { className: cn("inline-flex", className), children }) }) });
+  return /* @__PURE__ */ jsx37(TimePickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx37(PopoverPrimitive5.Root, { open, onOpenChange: handleOpenChange, modal: false, children: /* @__PURE__ */ jsx37("div", { className: cn("inline-flex", className), children }) }) });
 }
-var TimePickerTrigger = forwardRef23(
+var TimePickerTrigger = forwardRef27(
   ({
     className,
     size: sizeProp,
@@ -5447,12 +6008,12 @@ var TimePickerTrigger = forwardRef23(
     const disabled = disabledProp ?? disabledContext;
     const formatted = displayValue !== void 0 ? displayValue : formatTimeValue(value.hours, value.minutes);
     const hasValue = formatted != null && formatted !== "";
-    return /* @__PURE__ */ jsx33(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsx37(PopoverPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs27(
       "button",
       {
         ref,
         type: "button",
-        className: cn("aviala-timepicker-trigger", className),
+        className: cn("aviala-timepicker-trigger aviala-focus-ring", className),
         "data-size": size,
         "data-all-round": allRound ? "true" : "false",
         "data-state": open ? "open" : "closed",
@@ -5463,9 +6024,9 @@ var TimePickerTrigger = forwardRef23(
         ...props,
         children: [
           renderSlotIcon6(
-            leftIcon ?? /* @__PURE__ */ jsx33(TimeAndDateClock2, { level: "text", biggerSize: true, "aria-hidden": true })
+            leftIcon ?? /* @__PURE__ */ jsx37(TimeAndDateClock2, { level: "text", biggerSize: true, "aria-hidden": true })
           ),
-          /* @__PURE__ */ jsx33("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx37("span", { className: "aviala-timepicker-trigger__field", children: /* @__PURE__ */ jsx37(
             "span",
             {
               className: cn(
@@ -5483,7 +6044,7 @@ var TimePickerTrigger = forwardRef23(
   }
 );
 TimePickerTrigger.displayName = "TimePickerTrigger";
-var TimePickerContent = forwardRef23(
+var TimePickerContent = forwardRef27(
   ({
     className,
     children,
@@ -5492,7 +6053,7 @@ var TimePickerContent = forwardRef23(
     align = "start",
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsx33(
+    const content = /* @__PURE__ */ jsx37(
       PopoverPrimitive5.Content,
       {
         ref,
@@ -5500,17 +6061,17 @@ var TimePickerContent = forwardRef23(
         sideOffset,
         align,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx33(TimePickerPanel, {})
+        children: children ?? /* @__PURE__ */ jsx37(TimePickerPanel, {})
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx33(PopoverPrimitive5.Portal, { children: content });
+    return /* @__PURE__ */ jsx37(PopoverPrimitive5.Portal, { children: content });
   }
 );
 TimePickerContent.displayName = "TimePickerContent";
 function TimePickerPanel({ className }) {
   const { value, setValue } = useTimePickerContext();
-  return /* @__PURE__ */ jsx33("div", { className: cn("aviala-timepicker-panel", className), role: "application", "aria-label": "Time picker", children: /* @__PURE__ */ jsx33(TimePickerWheels, { value, onChange: setValue }) });
+  return /* @__PURE__ */ jsx37("div", { className: cn("aviala-timepicker-panel", className), role: "application", "aria-label": "Time picker", children: /* @__PURE__ */ jsx37(TimePickerWheels, { value, onChange: setValue }) });
 }
 function TimePickerField({
   contentClassName,
@@ -5530,7 +6091,7 @@ function TimePickerField({
   onOpenChange,
   disabled
 }) {
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs27(
     TimePicker,
     {
       value,
@@ -5543,7 +6104,7 @@ function TimePickerField({
       size,
       className,
       children: [
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx37(
           TimePickerTrigger,
           {
             size,
@@ -5554,7 +6115,7 @@ function TimePickerField({
             error
           }
         ),
-        /* @__PURE__ */ jsx33(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx33(TimePickerPanel, { className: panelClassName }) })
+        /* @__PURE__ */ jsx37(TimePickerContent, { className: contentClassName, children: /* @__PURE__ */ jsx37(TimePickerPanel, { className: panelClassName }) })
       ]
     }
   );
@@ -5563,7 +6124,7 @@ function TimePickerField({
 // src/components/popover.tsx
 import * as PopoverPrimitive6 from "@radix-ui/react-popover";
 import {
-  forwardRef as forwardRef24,
+  forwardRef as forwardRef28,
   useCallback as useCallback13,
   useEffect as useEffect8,
   useRef as useRef9,
@@ -5571,7 +6132,7 @@ import {
 } from "react";
 
 // src/components/overlay-pointer.tsx
-import { Fragment as Fragment2, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var TOOLTIP_POINTER = {
   width: 14,
   height: 5,
@@ -5592,7 +6153,7 @@ function OverlayPointerSvg({
   ...props
 }) {
   const isPopover = variant === "popover";
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx38(
     "svg",
     {
       ...props,
@@ -5605,16 +6166,16 @@ function OverlayPointerSvg({
       "aria-hidden": true,
       className,
       style: { ...style, width, height },
-      children: isPopover ? /* @__PURE__ */ jsxs25(Fragment2, { children: [
-        /* @__PURE__ */ jsx34("path", { d: path, className: "aviala-popover-content__arrow-outline" }),
-        /* @__PURE__ */ jsx34("path", { d: path, className: "aviala-popover-content__arrow-fill" })
-      ] }) : /* @__PURE__ */ jsx34("path", { d: path })
+      children: isPopover ? /* @__PURE__ */ jsxs28(Fragment3, { children: [
+        /* @__PURE__ */ jsx38("path", { d: path, className: "aviala-popover-content__arrow-outline" }),
+        /* @__PURE__ */ jsx38("path", { d: path, className: "aviala-popover-content__arrow-fill" })
+      ] }) : /* @__PURE__ */ jsx38("path", { d: path })
     }
   );
 }
 
 // src/components/popover.tsx
-import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function Popover({
   open: openProp,
   defaultOpen = false,
@@ -5660,7 +6221,7 @@ function Popover({
     },
     [isControlled, onOpenChange]
   );
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx39(
     PopoverPrimitive6.Root,
     {
       open,
@@ -5672,7 +6233,7 @@ function Popover({
 }
 var PopoverTrigger = PopoverPrimitive6.Trigger;
 var PopoverAnchor = PopoverPrimitive6.Anchor;
-var PopoverContent = forwardRef24(
+var PopoverContent = forwardRef28(
   ({
     className,
     children,
@@ -5683,7 +6244,7 @@ var PopoverContent = forwardRef24(
     showArrow = false,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsxs26(
+    const content = /* @__PURE__ */ jsxs29(
       PopoverPrimitive6.Content,
       {
         ref,
@@ -5693,14 +6254,14 @@ var PopoverContent = forwardRef24(
         className: cn("aviala-popover-content", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx35("div", { className: cn("aviala-popover-content__surface", typographyVariants({ level: "text" })), children }),
-          showArrow ? /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx39("div", { className: cn("aviala-popover-content__surface", typographyVariants({ level: "text" })), children }),
+          showArrow ? /* @__PURE__ */ jsx39(
             PopoverPrimitive6.Arrow,
             {
               asChild: true,
               width: POPOVER_POINTER.width,
               height: POPOVER_POINTER.height,
-              children: /* @__PURE__ */ jsx35(
+              children: /* @__PURE__ */ jsx39(
                 OverlayPointerSvg,
                 {
                   variant: "popover",
@@ -5716,23 +6277,23 @@ var PopoverContent = forwardRef24(
       }
     );
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx35(PopoverPrimitive6.Portal, { children: content });
+    return /* @__PURE__ */ jsx39(PopoverPrimitive6.Portal, { children: content });
   }
 );
 PopoverContent.displayName = PopoverPrimitive6.Content.displayName;
 
 // src/components/modal.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { SymbolWrong } from "@aviala-design/icons";
-import { cva as cva5 } from "class-variance-authority";
+import { SymbolWrong as SymbolWrong2 } from "@aviala-design/icons";
+import { cva as cva10 } from "class-variance-authority";
 import {
-  cloneElement as cloneElement7,
-  forwardRef as forwardRef25,
-  isValidElement as isValidElement11
+  cloneElement as cloneElement9,
+  forwardRef as forwardRef29,
+  isValidElement as isValidElement13
 } from "react";
-import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var MODAL_ICON_SIZE = 16;
-var modalContentVariants = cva5("aviala-modal-content", {
+var modalContentVariants = cva10("aviala-modal-content", {
   variants: {
     size: {
       default: "aviala-modal-content--size-default",
@@ -5745,7 +6306,7 @@ var modalContentVariants = cva5("aviala-modal-content", {
 });
 function renderModalIcon(node) {
   if (!node) return null;
-  const content = isValidElement11(node) && typeof node.type !== "string" ? cloneElement7(node, {
+  const content = isValidElement13(node) && typeof node.type !== "string" ? cloneElement9(node, {
     width: MODAL_ICON_SIZE,
     height: MODAL_ICON_SIZE,
     className: cn(
@@ -5753,13 +6314,13 @@ function renderModalIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx36("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx40("span", { className: "aviala-modal__icon", "aria-hidden": true, children: content });
 }
 var Modal = DialogPrimitive.Root;
 var ModalTrigger = DialogPrimitive.Trigger;
 var ModalPortal = DialogPrimitive.Portal;
 var ModalClose = DialogPrimitive.Close;
-var ModalOverlay = forwardRef25(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
+var ModalOverlay = forwardRef29(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -5768,7 +6329,7 @@ var ModalOverlay = forwardRef25(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var ModalContent = forwardRef25(
+var ModalContent = forwardRef29(
   ({
     className,
     children,
@@ -5778,25 +6339,25 @@ var ModalContent = forwardRef25(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsxs27(Fragment3, { children: [
-      showOverlay ? /* @__PURE__ */ jsx36(ModalOverlay, {}) : null,
-      /* @__PURE__ */ jsx36(
+    const content = /* @__PURE__ */ jsxs30(Fragment4, { children: [
+      showOverlay ? /* @__PURE__ */ jsx40(ModalOverlay, {}) : null,
+      /* @__PURE__ */ jsx40(
         DialogPrimitive.Content,
         {
           ref,
           className: cn(modalContentVariants({ size }), className),
           onOpenAutoFocus,
           ...props,
-          children: /* @__PURE__ */ jsx36("div", { className: "aviala-modal-content__surface", children })
+          children: /* @__PURE__ */ jsx40("div", { className: "aviala-modal-content__surface", children })
         }
       )
     ] });
     if (!portalled) return content;
-    return /* @__PURE__ */ jsx36(DialogPrimitive.Portal, { children: content });
+    return /* @__PURE__ */ jsx40(DialogPrimitive.Portal, { children: content });
   }
 );
 ModalContent.displayName = DialogPrimitive.Content.displayName;
-var ModalHeader = forwardRef25(
+var ModalHeader = forwardRef29(
   ({
     className,
     children,
@@ -5805,10 +6366,10 @@ var ModalHeader = forwardRef25(
     showClose = true,
     closeLabel = "Close dialog",
     ...props
-  }, ref) => /* @__PURE__ */ jsx36("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ jsxs27("div", { className: "aviala-modal__header-row", children: [
+  }, ref) => /* @__PURE__ */ jsx40("div", { ref, className: cn("aviala-modal__header", className), ...props, children: /* @__PURE__ */ jsxs30("div", { className: "aviala-modal__header-row", children: [
     showIcon ? renderModalIcon(icon) : null,
-    /* @__PURE__ */ jsx36("div", { className: "aviala-modal__header-main", children }),
-    showClose ? /* @__PURE__ */ jsx36(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx40("div", { className: "aviala-modal__header-main", children }),
+    showClose ? /* @__PURE__ */ jsx40(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx40(
       Link,
       {
         level: "text",
@@ -5816,28 +6377,28 @@ var ModalHeader = forwardRef25(
         iconOnly: true,
         "aria-label": closeLabel,
         className: "aviala-modal__close",
-        leftIcon: /* @__PURE__ */ jsx36(SymbolWrong, { "aria-hidden": true })
+        leftIcon: /* @__PURE__ */ jsx40(SymbolWrong2, { "aria-hidden": true })
       }
     ) }) : null
   ] }) })
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = forwardRef25(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx36(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx36(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
+var ModalTitle = forwardRef29(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx40(DialogPrimitive.Title, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx40(Typography, { level: "text", className: cn("aviala-modal__title", className), children }) }));
 ModalTitle.displayName = DialogPrimitive.Title.displayName;
-var ModalDescription = forwardRef25(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx36(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx36(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
+var ModalDescription = forwardRef29(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx40(DialogPrimitive.Description, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx40(Typography, { level: "caption", className: cn("aviala-modal__description", className), children }) }));
 ModalDescription.displayName = DialogPrimitive.Description.displayName;
 function ModalHeaderText({
   title,
   description,
   ...props
 }) {
-  return /* @__PURE__ */ jsx36(ModalHeader, { ...props, children: /* @__PURE__ */ jsxs27("div", { className: "aviala-modal__header-typeface", children: [
-    /* @__PURE__ */ jsx36(ModalTitle, { children: title }),
-    description ? /* @__PURE__ */ jsx36(ModalDescription, { children: description }) : null
+  return /* @__PURE__ */ jsx40(ModalHeader, { ...props, children: /* @__PURE__ */ jsxs30("div", { className: "aviala-modal__header-typeface", children: [
+    /* @__PURE__ */ jsx40(ModalTitle, { children: title }),
+    description ? /* @__PURE__ */ jsx40(ModalDescription, { children: description }) : null
   ] }) });
 }
-var ModalBody = forwardRef25(
-  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ jsx36("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ jsx36(
+var ModalBody = forwardRef29(
+  ({ className, children, layout = "default", title, description, ...props }, ref) => /* @__PURE__ */ jsx40("div", { ref, className: cn("aviala-modal__body", className), ...props, children: layout === "text" ? /* @__PURE__ */ jsx40(
     Typeface,
     {
       className: "aviala-modal__body-typeface",
@@ -5848,22 +6409,22 @@ var ModalBody = forwardRef25(
   ) : children })
 );
 ModalBody.displayName = "ModalBody";
-var ModalFooter = forwardRef25(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx36("div", { ref, className: cn("aviala-modal__footer", className), ...props })
+var ModalFooter = forwardRef29(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx40("div", { ref, className: cn("aviala-modal__footer", className), ...props })
 );
 ModalFooter.displayName = "ModalFooter";
 
 // src/components/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var TOOLTIP_DELAY_DURATION = 300;
 function TooltipProvider({
   delayDuration = TOOLTIP_DELAY_DURATION,
   skipDelayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx41(
     TooltipPrimitive.Provider,
     {
       delayDuration,
@@ -5874,7 +6435,7 @@ function TooltipProvider({
 }
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = forwardRef26(
+var TooltipContent = forwardRef30(
   ({
     className,
     children,
@@ -5882,7 +6443,7 @@ var TooltipContent = forwardRef26(
     collisionPadding = 8,
     showArrow = true,
     ...props
-  }, ref) => /* @__PURE__ */ jsx37(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs28(
+  }, ref) => /* @__PURE__ */ jsx41(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs31(
     TooltipPrimitive.Content,
     {
       ref,
@@ -5891,14 +6452,14 @@ var TooltipContent = forwardRef26(
       className: cn("aviala-tooltip-content", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx37("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
-        showArrow ? /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx41("div", { className: cn("aviala-tooltip-content__surface", typographyVariants({ level: "caption" })), children }),
+        showArrow ? /* @__PURE__ */ jsx41(
           TooltipPrimitive.Arrow,
           {
             asChild: true,
             width: TOOLTIP_POINTER.width,
             height: TOOLTIP_POINTER.height,
-            children: /* @__PURE__ */ jsx37(
+            children: /* @__PURE__ */ jsx41(
               OverlayPointerSvg,
               {
                 className: "aviala-tooltip-content__arrow",
@@ -5916,23 +6477,23 @@ var TooltipContent = forwardRef26(
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/components/feedback.tsx
-import { cva as cva6 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import {
   GeneralNotification,
   SymbolInformationCircle,
   SymbolRightCircle,
   SymbolWarningCircle,
-  SymbolWrong as SymbolWrong2,
+  SymbolWrong as SymbolWrong3,
   SymbolWrongCircle
 } from "@aviala-design/icons";
 import {
-  cloneElement as cloneElement8,
-  forwardRef as forwardRef27,
-  isValidElement as isValidElement12
+  cloneElement as cloneElement10,
+  forwardRef as forwardRef31,
+  isValidElement as isValidElement14
 } from "react";
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 var FEEDBACK_ICON_SIZE = 22;
-var feedbackVariants = cva6("aviala-feedback", {
+var feedbackVariants = cva11("aviala-feedback", {
   variants: {
     type: {
       information: "aviala-feedback--type-information",
@@ -5958,7 +6519,7 @@ var feedbackVariants = cva6("aviala-feedback", {
 });
 function renderFeedbackIcon(node) {
   if (!node) return null;
-  const content = isValidElement12(node) && typeof node.type !== "string" ? cloneElement8(node, {
+  const content = isValidElement14(node) && typeof node.type !== "string" ? cloneElement10(node, {
     width: FEEDBACK_ICON_SIZE,
     height: FEEDBACK_ICON_SIZE,
     className: cn(
@@ -5966,25 +6527,25 @@ function renderFeedbackIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx38("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx42("span", { className: "aviala-feedback__icon", "aria-hidden": true, children: content });
 }
 function defaultStatusIcon(type, mode) {
   const iconMode = mode === "primary" ? "fill" : "fill";
   const thickness = "Regular";
   switch (type) {
     case "information":
-      return /* @__PURE__ */ jsx38(SymbolInformationCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx42(SymbolInformationCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "warning":
-      return /* @__PURE__ */ jsx38(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx42(SymbolWarningCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "wrong":
-      return /* @__PURE__ */ jsx38(SymbolWrongCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx42(SymbolWrongCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ jsx38(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
+      return /* @__PURE__ */ jsx42(SymbolRightCircle, { thickness, mode: iconMode, "aria-hidden": true });
     case "normal":
-      return /* @__PURE__ */ jsx38(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
+      return /* @__PURE__ */ jsx42(GeneralNotification, { thickness, mode: "default", "aria-hidden": true });
   }
 }
-var Feedback = forwardRef27(
+var Feedback = forwardRef31(
   ({
     className,
     type = "information",
@@ -6006,7 +6567,7 @@ var Feedback = forwardRef27(
     const tone = mode === "primary" ? "white" : "default";
     const isSmall = resolvedSize === "small";
     const resolvedRole = resolvedType === "wrong" ? "alert" : "status";
-    return /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsx42(
       "div",
       {
         ref,
@@ -6020,9 +6581,9 @@ var Feedback = forwardRef27(
         "data-size": resolvedSize,
         "data-mode": mode,
         ...props,
-        children: /* @__PURE__ */ jsxs29("div", { className: "aviala-feedback__body", children: [
+        children: /* @__PURE__ */ jsxs32("div", { className: "aviala-feedback__body", children: [
           renderFeedbackIcon(icon ?? defaultStatusIcon(resolvedType, mode)),
-          isSmall ? /* @__PURE__ */ jsx38(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx38(
+          isSmall ? /* @__PURE__ */ jsx42(Typography, { level: "text", tone, className: "aviala-feedback__title", children: title }) : /* @__PURE__ */ jsx42(
             Typeface,
             {
               className: "aviala-feedback__typeface",
@@ -6032,7 +6593,7 @@ var Feedback = forwardRef27(
               tone
             }
           ),
-          action ? /* @__PURE__ */ jsx38(
+          action ? /* @__PURE__ */ jsx42(
             Link,
             {
               level: "text",
@@ -6048,7 +6609,7 @@ var Feedback = forwardRef27(
               children: action
             }
           ) : null,
-          showClose ? /* @__PURE__ */ jsx38(
+          showClose ? /* @__PURE__ */ jsx42(
             Link,
             {
               level: "text",
@@ -6057,7 +6618,7 @@ var Feedback = forwardRef27(
               href: onClose ? "#" : void 0,
               "aria-label": closeLabel,
               className: "aviala-feedback__close",
-              leftIcon: /* @__PURE__ */ jsx38(SymbolWrong2, { "aria-hidden": true }),
+              leftIcon: /* @__PURE__ */ jsx42(SymbolWrong3, { "aria-hidden": true }),
               onClick: (event) => {
                 if (onClose) {
                   event.preventDefault();
@@ -6078,18 +6639,18 @@ import {
   SymbolInformationCircle as SymbolInformationCircle2,
   SymbolRightCircle as SymbolRightCircle2,
   SymbolWarningCircle as SymbolWarningCircle2,
-  SymbolWrong as SymbolWrong3,
+  SymbolWrong as SymbolWrong4,
   SymbolWrongCircle as SymbolWrongCircle2
 } from "@aviala-design/icons";
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva12 } from "class-variance-authority";
 import {
-  cloneElement as cloneElement9,
-  forwardRef as forwardRef28,
-  isValidElement as isValidElement13
+  cloneElement as cloneElement11,
+  forwardRef as forwardRef32,
+  isValidElement as isValidElement15
 } from "react";
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var ALERT_ICON_SIZE = 16;
-var alertVariants = cva7("aviala-alert", {
+var alertVariants = cva12("aviala-alert", {
   variants: {
     type: {
       info: "aviala-alert--type-info",
@@ -6115,7 +6676,7 @@ var alertVariants = cva7("aviala-alert", {
 });
 function renderAlertIcon(node) {
   if (!node) return null;
-  const content = isValidElement13(node) && typeof node.type !== "string" ? cloneElement9(node, {
+  const content = isValidElement15(node) && typeof node.type !== "string" ? cloneElement11(node, {
     width: ALERT_ICON_SIZE,
     height: ALERT_ICON_SIZE,
     className: cn(
@@ -6123,23 +6684,23 @@ function renderAlertIcon(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ jsx39("span", { className: "aviala-alert__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ jsx43("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__ */ jsx39(SymbolInformationCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx43(SymbolInformationCircle2, { ...iconProps });
     case "warning":
-      return /* @__PURE__ */ jsx39(SymbolWarningCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx43(SymbolWarningCircle2, { ...iconProps });
     case "error":
-      return /* @__PURE__ */ jsx39(SymbolWrongCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx43(SymbolWrongCircle2, { ...iconProps });
     case "success":
-      return /* @__PURE__ */ jsx39(SymbolRightCircle2, { ...iconProps });
+      return /* @__PURE__ */ jsx43(SymbolRightCircle2, { ...iconProps });
   }
 }
-var Alert = forwardRef28(
+var Alert = forwardRef32(
   ({
     className,
     type = "info",
@@ -6165,7 +6726,7 @@ var Alert = forwardRef28(
     const resolvedType = type ?? "info";
     const resolvedRole = resolvedType === "error" ? "alert" : "status";
     const hasActions = showActions && (action || secondaryAction);
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs33(
       "div",
       {
         ref,
@@ -6177,9 +6738,9 @@ var Alert = forwardRef28(
         "data-appearance": appearance,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs30("div", { className: "aviala-alert__body", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "aviala-alert__body", children: [
             showIcon ? renderAlertIcon(icon ?? defaultStatusIcon2(resolvedType)) : null,
-            isSmall ? /* @__PURE__ */ jsx39(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx39(
+            isSmall ? /* @__PURE__ */ jsx43(Typography, { level: "text", className: "aviala-alert__title", children: title }) : /* @__PURE__ */ jsx43(
               Typeface,
               {
                 className: "aviala-alert__typeface",
@@ -6188,7 +6749,7 @@ var Alert = forwardRef28(
                 secondary: description
               }
             ),
-            quickAction ? /* @__PURE__ */ jsx39(
+            quickAction ? /* @__PURE__ */ jsx43(
               Link,
               {
                 level: "text",
@@ -6204,7 +6765,7 @@ var Alert = forwardRef28(
                 children: quickAction
               }
             ) : null,
-            dismissible ? /* @__PURE__ */ jsx39(
+            dismissible ? /* @__PURE__ */ jsx43(
               Link,
               {
                 level: "text",
@@ -6213,7 +6774,7 @@ var Alert = forwardRef28(
                 href: onDismiss ? "#" : void 0,
                 "aria-label": closeLabel,
                 className: "aviala-alert__close",
-                leftIcon: /* @__PURE__ */ jsx39(SymbolWrong3, { "aria-hidden": true }),
+                leftIcon: /* @__PURE__ */ jsx43(SymbolWrong4, { "aria-hidden": true }),
                 onClick: (event) => {
                   if (onDismiss) {
                     event.preventDefault();
@@ -6223,8 +6784,8 @@ var Alert = forwardRef28(
               }
             ) : null
           ] }),
-          hasActions ? /* @__PURE__ */ jsxs30("div", { className: "aviala-alert__actions", children: [
-            action ? /* @__PURE__ */ jsx39(
+          hasActions ? /* @__PURE__ */ jsxs33("div", { className: "aviala-alert__actions", children: [
+            action ? /* @__PURE__ */ jsx43(
               Link,
               {
                 level: "caption",
@@ -6240,7 +6801,7 @@ var Alert = forwardRef28(
                 children: action
               }
             ) : null,
-            secondaryAction ? /* @__PURE__ */ jsx39(
+            secondaryAction ? /* @__PURE__ */ jsx43(
               Link,
               {
                 level: "caption",
@@ -6270,34 +6831,34 @@ import {
   GeneralSetting
 } from "@aviala-design/icons";
 import {
-  cloneElement as cloneElement10,
-  forwardRef as forwardRef29,
-  isValidElement as isValidElement14
+  cloneElement as cloneElement12,
+  forwardRef as forwardRef33,
+  isValidElement as isValidElement16
 } from "react";
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
-var List = forwardRef29(
-  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs31("div", { ref, className: cn("aviala-list", className), role: "list", ...props, children: [
-    title != null ? /* @__PURE__ */ jsx40(ListTitle, { children: title }) : null,
-    /* @__PURE__ */ jsx40(ListGroup, { children })
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+var List = forwardRef33(
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs34("div", { ref, className: cn("aviala-list", className), ...props, children: [
+    title != null ? /* @__PURE__ */ jsx44(ListTitle, { children: title }) : null,
+    /* @__PURE__ */ jsx44(ListGroup, { children })
   ] })
 );
 List.displayName = "List";
-var ListTitle = forwardRef29(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx40("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx40("span", { className: cn(typographyVariants({ level: "text" })), children }) })
+var ListTitle = forwardRef33(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx44("div", { ref, className: cn("aviala-list-title", className), ...props, children: /* @__PURE__ */ jsx44("span", { className: cn(typographyVariants({ level: "text" })), children }) })
 );
 ListTitle.displayName = "ListTitle";
-var ListGroup = forwardRef29(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx40("div", { ref, className: cn("aviala-list-group", className), ...props, children })
+var ListGroup = forwardRef33(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx44("div", { ref, className: cn("aviala-list-group", className), role: "list", ...props, children })
 );
 ListGroup.displayName = "ListGroup";
 function ListItemGroup({ label, children, className }) {
-  return /* @__PURE__ */ jsxs31("div", { className: cn("aviala-list", className), children: [
-    label != null ? /* @__PURE__ */ jsx40(ListTitle, { children: label }) : null,
-    /* @__PURE__ */ jsx40(ListGroup, { children })
+  return /* @__PURE__ */ jsxs34("div", { className: cn("aviala-list", className), children: [
+    label != null ? /* @__PURE__ */ jsx44(ListTitle, { children: label }) : null,
+    /* @__PURE__ */ jsx44(ListGroup, { children })
   ] });
 }
-var ListDivider = forwardRef29(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
+var ListDivider = forwardRef33(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
     "span",
     {
       ref,
@@ -6308,15 +6869,15 @@ var ListDivider = forwardRef29(
   )
 );
 ListDivider.displayName = "ListDivider";
-var ListSeparator = forwardRef29(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx40("hr", { ref, className: cn("aviala-list-separator", className), ...props })
+var ListSeparator = forwardRef33(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx44("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__ */ jsx40(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx40(GeneralSetting, { "aria-hidden": true }));
-  const rendered = isValidElement14(content) && typeof content.type !== "string" ? cloneElement10(content, {
+  const content = node ?? (leading === "shaped" ? /* @__PURE__ */ jsx44(GeneralSetting, { "aria-hidden": true }) : /* @__PURE__ */ jsx44(GeneralSetting, { "aria-hidden": true }));
+  const rendered = isValidElement16(content) && typeof content.type !== "string" ? cloneElement12(content, {
     width: iconSize,
     height: iconSize,
     className: cn(
@@ -6324,7 +6885,7 @@ function renderLeadingIcon(node, leading) {
       "shrink-0"
     )
   }) : content;
-  return /* @__PURE__ */ jsx40("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx44("span", { className: "aviala-list-item__icon", children: /* @__PURE__ */ jsx44(
     "span",
     {
       className: cn(
@@ -6334,7 +6895,7 @@ function renderLeadingIcon(node, leading) {
     }
   ) });
 }
-var ListItem = forwardRef29(
+var ListItem = forwardRef33(
   ({
     className,
     itemType = "select",
@@ -6355,44 +6916,44 @@ var ListItem = forwardRef29(
     ...props
   }, ref) => {
     const isInteractive = interactive ?? onClick != null;
-    const primaryAction = action ?? /* @__PURE__ */ jsx40(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx40(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const primaryAction = action ?? /* @__PURE__ */ jsx44(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx44(GeneralSetting, { "aria-hidden": true }), children: actionLabel });
     const renderTrailing = () => {
       if (trailing !== void 0) return trailing;
       switch (itemType) {
         case "action":
-          return /* @__PURE__ */ jsxs31("div", { className: "aviala-list-item__more", children: [
-            /* @__PURE__ */ jsxs31("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ jsxs34("div", { className: "aviala-list-item__more", children: [
+            /* @__PURE__ */ jsxs34("div", { className: "aviala-list-item__trailing", children: [
               primaryAction,
-              secondaryAction ?? /* @__PURE__ */ jsx40(
+              secondaryAction ?? /* @__PURE__ */ jsx44(
                 Button,
                 {
                   mode: "default",
                   size: "regular",
                   iconOnly: true,
                   "aria-label": "More",
-                  leftIcon: /* @__PURE__ */ jsx40(GeneralSetting, { "aria-hidden": true })
+                  leftIcon: /* @__PURE__ */ jsx44(GeneralSetting, { "aria-hidden": true })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx40(ListDivider, {}),
-            /* @__PURE__ */ jsx40("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx40(DirectionArrowRightLight2, { width: 18, height: 18 }) })
+            /* @__PURE__ */ jsx44(ListDivider, {}),
+            /* @__PURE__ */ jsx44("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx44(DirectionArrowRightLight2, { width: 18, height: 18 }) })
           ] });
         case "switch":
-          return /* @__PURE__ */ jsxs31("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ jsxs34("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx40(ListDivider, {}),
-            /* @__PURE__ */ jsx40(Switch, { defaultChecked: true, ...switchProps })
+            /* @__PURE__ */ jsx44(ListDivider, {}),
+            /* @__PURE__ */ jsx44(Switch, { ...switchProps })
           ] });
         case "select":
         default:
-          return /* @__PURE__ */ jsxs31("div", { className: "aviala-list-item__trailing", children: [
+          return /* @__PURE__ */ jsxs34("div", { className: "aviala-list-item__trailing", children: [
             primaryAction,
-            /* @__PURE__ */ jsx40(ListDivider, {}),
-            /* @__PURE__ */ jsx40("span", { className: "aviala-list-item__select", children: select })
+            /* @__PURE__ */ jsx44(ListDivider, {}),
+            /* @__PURE__ */ jsx44("span", { className: "aviala-list-item__select", children: select })
           ] });
       }
     };
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs34(
       "div",
       {
         ref,
@@ -6407,8 +6968,8 @@ var ListItem = forwardRef29(
         ...props,
         children: [
           renderLeadingIcon(icon, leading),
-          /* @__PURE__ */ jsx40("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs31("div", { className: "aviala-list-item__content", children: [
-            /* @__PURE__ */ jsx40("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx40(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
+          /* @__PURE__ */ jsx44("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ jsxs34("div", { className: "aviala-list-item__content", children: [
+            /* @__PURE__ */ jsx44("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ jsx44(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
             renderTrailing()
           ] }) })
         ]
@@ -6422,14 +6983,14 @@ ListItem.displayName = "ListItem";
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import {
   createContext as createContext8,
-  forwardRef as forwardRef30,
+  forwardRef as forwardRef34,
   useCallback as useCallback14,
   useContext as useContext8,
   useLayoutEffect as useLayoutEffect5,
   useRef as useRef10,
   useState as useState13
 } from "react";
-import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 function navigationItemButtonMode(active) {
   return active ? "second" : "noBackgroundCustom";
 }
@@ -6463,21 +7024,20 @@ function readIndicatorToken(el, name, fallback) {
   const parsed = parseFloat(value);
   return Number.isFinite(parsed) ? parsed : fallback;
 }
+function isInsideCollapsedGroup(item) {
+  return item.closest('.aviala-navigation-item-group[data-expanded="false"]') !== null;
+}
 function findActiveNavigationItem(group) {
-  const activeItems = group.querySelectorAll(
-    '.aviala-navigation-item[data-active="true"]'
-  );
+  const activeItems = Array.from(
+    group.querySelectorAll(
+      '.aviala-navigation-item[data-active="true"]'
+    )
+  ).filter((item) => !isInsideCollapsedGroup(item));
   if (activeItems.length === 0) return null;
-  for (const item of activeItems) {
-    if (item.getAttribute("data-item-type") === "child") {
-      const collapsedGroup = item.closest(
-        '.aviala-navigation-item-group[data-expanded="false"]'
-      );
-      if (collapsedGroup) continue;
-      return item;
-    }
-  }
-  return activeItems[0] ?? null;
+  const activeChild = activeItems.find(
+    (item) => item.getAttribute("data-item-type") === "child"
+  );
+  return activeChild ?? activeItems[0];
 }
 function measureNavigationIndicator(group, direction) {
   const item = findActiveNavigationItem(group);
@@ -6807,16 +7367,16 @@ function useNavigationIndicator(groupRef, direction, layoutKey) {
   ]);
   return onIndicatorRef;
 }
-var Navigation = forwardRef30(
+var Navigation = forwardRef34(
   ({
     className,
-    as: Tag = "nav",
+    as: Tag2 = "nav",
     background = "default",
     direction = "vertical",
     dividingLine = false,
     ...props
-  }, ref) => /* @__PURE__ */ jsx41(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx41(
-    Tag,
+  }, ref) => /* @__PURE__ */ jsx45(NavigationDirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx45(
+    Tag2,
     {
       ref,
       className: cn("aviala-navigation", className),
@@ -6828,8 +7388,8 @@ var Navigation = forwardRef30(
   ) })
 );
 Navigation.displayName = "Navigation";
-var NavigationBrand = forwardRef30(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+var NavigationBrand = forwardRef34(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
     "div",
     {
       ref,
@@ -6839,30 +7399,30 @@ var NavigationBrand = forwardRef30(
   )
 );
 NavigationBrand.displayName = "NavigationBrand";
-var NavigationBrandTitle = forwardRef30(({ className, asChild = false, children, ...props }, ref) => {
+var NavigationBrandTitle = forwardRef34(({ className, asChild = false, children, ...props }, ref) => {
   const Comp = asChild ? Slot5 : "a";
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx45(
     Comp,
     {
       ref,
-      className: cn("aviala-navigation-brand__title", className),
+      className: cn("aviala-navigation-brand__title aviala-focus-ring", className),
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx41(Typography, { level: "text", as: "span", children })
+      children: asChild ? children : /* @__PURE__ */ jsx45(Typography, { level: "text", as: "span", children })
     }
   );
 });
 NavigationBrandTitle.displayName = "NavigationBrandTitle";
-var NavigationSection = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx41(
+var NavigationSection = forwardRef34(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx45(
   "div",
   {
     ref,
     className: cn("aviala-navigation-section", className),
     ...props,
-    children: /* @__PURE__ */ jsx41(Typography, { level: "caption", as: "p", children })
+    children: /* @__PURE__ */ jsx45(Typography, { level: "caption", as: "p", children })
   }
 ));
 NavigationSection.displayName = "NavigationSection";
-var NavigationGroup = forwardRef30(
+var NavigationGroup = forwardRef34(
   ({ className, children, ...props }, ref) => {
     const direction = useNavigationDirection();
     const layoutKey = useThemeLayoutKey();
@@ -6883,14 +7443,14 @@ var NavigationGroup = forwardRef30(
       },
       [ref]
     );
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs35(
       "div",
       {
         ref: setRefs,
         className: cn("aviala-navigation-group", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx45(
             "span",
             {
               ref: onIndicatorRef,
@@ -6906,17 +7466,25 @@ var NavigationGroup = forwardRef30(
   }
 );
 NavigationGroup.displayName = "NavigationGroup";
-var NavigationItemGroup = forwardRef30(({ className, expanded, children, ...props }, ref) => {
+var NavigationItemGroup = forwardRef34(({ className, expanded, children, ...props }, ref) => {
   const isCollapsible = expanded !== void 0;
-  return /* @__PURE__ */ jsx41(
+  const isCollapsed = isCollapsible && !expanded;
+  const innerRef = useRef10(null);
+  useLayoutEffect5(() => {
+    const inner = innerRef.current;
+    if (!inner) return;
+    if (isCollapsed) inner.setAttribute("inert", "");
+    else inner.removeAttribute("inert");
+  }, [isCollapsed]);
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       ref,
       className: cn("aviala-navigation-item-group", className),
       "data-expanded": isCollapsible ? expanded ? "true" : "false" : void 0,
-      "aria-hidden": isCollapsible && !expanded ? true : void 0,
+      "aria-hidden": isCollapsed ? true : void 0,
       ...props,
-      children: isCollapsible ? /* @__PURE__ */ jsx41("div", { className: "aviala-navigation-item-group__inner", children }) : children
+      children: isCollapsible ? /* @__PURE__ */ jsx45("div", { ref: innerRef, className: "aviala-navigation-item-group__inner", children }) : children
     }
   );
 });
@@ -6927,9 +7495,9 @@ function renderItemIcon3(node) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ jsx41("span", { className: "aviala-navigation-item__icon", children: content });
+  return /* @__PURE__ */ jsx45("span", { className: "aviala-navigation-item__icon", children: content });
 }
-var NavigationItem = forwardRef30(
+var NavigationItem = forwardRef34(
   ({
     className,
     active,
@@ -6944,9 +7512,9 @@ var NavigationItem = forwardRef30(
     const Comp = asChild ? Slot5 : "a";
     const isActive = active ?? ariaCurrent === "page";
     const mode = navigationItemButtonMode(isActive);
-    const controlContent = /* @__PURE__ */ jsxs32(Fragment4, { children: [
+    const controlContent = /* @__PURE__ */ jsxs35(Fragment5, { children: [
       renderItemIcon3(leftIcon),
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx45(
         Typography,
         {
           level: "text",
@@ -6955,15 +7523,15 @@ var NavigationItem = forwardRef30(
           children
         }
       ),
-      rightIcon ? /* @__PURE__ */ jsx41("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
+      rightIcon ? /* @__PURE__ */ jsx45("span", { className: "aviala-navigation-item__chevron", children: renderItemIcon3(rightIcon) }) : null
     ] });
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx45(
       "span",
       {
         className: cn("aviala-navigation-item", className),
         "data-item-type": itemType,
         "data-active": isActive ? "true" : "false",
-        children: /* @__PURE__ */ jsx41(
+        children: /* @__PURE__ */ jsx45(
           Comp,
           {
             ref,
@@ -6982,7 +7550,7 @@ var NavigationItem = forwardRef30(
   }
 );
 NavigationItem.displayName = "NavigationItem";
-var NavigationActions = forwardRef30(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx41(
+var NavigationActions = forwardRef34(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx45(
   "div",
   {
     ref,
@@ -6992,7 +7560,7 @@ var NavigationActions = forwardRef30(({ className, children, ...props }, ref) =>
   }
 ));
 NavigationActions.displayName = "NavigationActions";
-var NavigationActionsSlot = forwardRef30(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+var NavigationActionsSlot = forwardRef34(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   "div",
   {
     ref,
@@ -7001,12 +7569,1249 @@ var NavigationActionsSlot = forwardRef30(({ className, ...props }, ref) => /* @_
   }
 ));
 NavigationActionsSlot.displayName = "NavigationActionsSlot";
+
+// src/components/slider.tsx
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cva as cva13 } from "class-variance-authority";
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+var sliderVariants = cva13("aviala-slider", {
+  variants: {
+    size: {
+      default: "aviala-slider--size-default",
+      big: "aviala-slider--size-big"
+    },
+    type: {
+      default: "aviala-slider--type-default",
+      range: "aviala-slider--type-range"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    type: "default"
+  }
+});
+var Slider = forwardRef35(
+  ({
+    className,
+    size = "default",
+    type = "default",
+    disabled,
+    value,
+    defaultValue,
+    min = 0,
+    max = 100,
+    ...props
+  }, ref) => {
+    const resolvedType = type ?? "default";
+    const resolvedSize = size ?? "default";
+    const isRange = resolvedType === "range";
+    const resolvedDefaultValue = defaultValue ?? (isRange ? [25, 75] : [50]);
+    const thumbCount = isRange ? Math.max(2, value?.length ?? defaultValue?.length ?? 2) : 1;
+    return /* @__PURE__ */ jsxs36(
+      SliderPrimitive.Root,
+      {
+        ref,
+        className: cn(
+          sliderVariants({ size: resolvedSize, type: resolvedType }),
+          className
+        ),
+        disabled,
+        value,
+        defaultValue: value == null ? resolvedDefaultValue : void 0,
+        min,
+        max,
+        "data-size": resolvedSize,
+        "data-type": resolvedType,
+        "data-disabled": disabled ? "true" : void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx46(SliderPrimitive.Track, { className: "aviala-slider__track", children: /* @__PURE__ */ jsx46(SliderPrimitive.Range, { className: "aviala-slider__range" }) }),
+          Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx46(SliderPrimitive.Thumb, { className: "aviala-slider__thumb aviala-focus-ring" }, index))
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+
+// src/components/upload.tsx
+import { GeneralUpload } from "@aviala-design/icons";
+import { cva as cva14 } from "class-variance-authority";
+import {
+  forwardRef as forwardRef36,
+  useRef as useRef11,
+  useState as useState14
+} from "react";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+var uploadVariants = cva14("aviala-upload aviala-focus-ring", {
+  variants: {
+    style: {
+      default: "aviala-upload--style-default",
+      large: "aviala-upload--style-large"
+    }
+  },
+  defaultVariants: {
+    style: "default"
+  }
+});
+var Upload = forwardRef36(
+  ({
+    className,
+    style = "default",
+    title = "Drag the file here to upload the file",
+    description = "Or click here to upload",
+    label = "Upload",
+    accept,
+    multiple,
+    disabled,
+    dragAndDrop,
+    onChange,
+    inputProps,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    ...props
+  }, ref) => {
+    const inputRef = useRef11(null);
+    const [dragging, setDragging] = useState14(false);
+    const resolvedStyle = style ?? "default";
+    const allowDrag = dragAndDrop ?? resolvedStyle === "large";
+    const openPicker = () => {
+      if (disabled) return;
+      inputRef.current?.click();
+    };
+    const handleChange = (event) => {
+      onChange?.(event.target.files);
+    };
+    const handleDrop = (event) => {
+      onDrop?.(event);
+      setDragging(false);
+      if (disabled || !allowDrag) return;
+      event.preventDefault();
+      if (event.dataTransfer.files?.length) {
+        onChange?.(event.dataTransfer.files);
+      }
+    };
+    return /* @__PURE__ */ jsxs37(
+      "div",
+      {
+        ref,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        className: cn(uploadVariants({ style: resolvedStyle }), className),
+        "data-style": resolvedStyle,
+        "data-disabled": disabled ? "true" : void 0,
+        "data-dragging": dragging ? "true" : void 0,
+        "aria-disabled": disabled || void 0,
+        onClick: openPicker,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openPicker();
+          }
+        },
+        onDragOver: (event) => {
+          onDragOver?.(event);
+          if (disabled || !allowDrag) return;
+          event.preventDefault();
+          setDragging(true);
+        },
+        onDragLeave: (event) => {
+          onDragLeave?.(event);
+          setDragging(false);
+        },
+        onDrop: handleDrop,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx47(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "aviala-upload__input",
+              accept,
+              multiple,
+              disabled,
+              onChange: handleChange,
+              tabIndex: -1,
+              "aria-hidden": true,
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ jsx47("span", { className: "aviala-upload__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx47(GeneralUpload, { width: 16, height: 16 }) }),
+          resolvedStyle === "large" ? /* @__PURE__ */ jsx47(
+            Typeface,
+            {
+              className: "aviala-upload__typeface",
+              content: "textCaption",
+              primary: title,
+              secondary: description
+            }
+          ) : /* @__PURE__ */ jsx47(Typography, { level: "text", as: "span", className: "aviala-upload__label", children: label })
+        ]
+      }
+    );
+  }
+);
+Upload.displayName = "Upload";
+
+// src/components/scroll-picker.tsx
+import {
+  useCallback as useCallback15,
+  useEffect as useEffect9,
+  useId as useId3,
+  useLayoutEffect as useLayoutEffect6,
+  useMemo as useMemo8,
+  useRef as useRef12
+} from "react";
+import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+var LOOP_SECTIONS2 = 3;
+var MIDDLE_SECTION2 = 1;
+var SCROLL_END_DEBOUNCE_MS2 = 80;
+function normalizeIndex2(index, length) {
+  return (index % length + length) % length;
+}
+function readItemHeight2(container) {
+  const item = container.querySelector(".aviala-scroll-picker-item");
+  if (item) {
+    return item.getBoundingClientRect().height;
+  }
+  const style = getComputedStyle(container);
+  const token = style.getPropertyValue("--scroll-picker-item-height").trim();
+  const parsed = parseFloat(token);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 26;
+}
+function ScrollPicker({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx48("div", { className: cn("aviala-scroll-picker", className), ...props, children });
+}
+function ScrollPickerColumn({
+  className,
+  values,
+  value,
+  onChange,
+  "aria-label": ariaLabel,
+  loop = true,
+  formatValue,
+  getValueKey
+}) {
+  const scrollRef = useRef12(null);
+  const isUserScrollingRef = useRef12(false);
+  const isProgrammaticScrollRef = useRef12(false);
+  const scrollEndTimerRef = useRef12(void 0);
+  const selectedValueRef = useRef12(value);
+  const reactId = useId3();
+  selectedValueRef.current = value;
+  const getIndex = useCallback15(
+    (candidate) => {
+      const index = values.findIndex((item) => Object.is(item, candidate));
+      return index >= 0 ? index : 0;
+    },
+    [values]
+  );
+  const repeatedValues = useMemo8(() => {
+    if (!loop) return [...values];
+    return Array.from({ length: LOOP_SECTIONS2 }, () => values).flat();
+  }, [loop, values]);
+  const scrollToIndex = useCallback15((index, behavior = "auto") => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const itemHeight = readItemHeight2(container);
+    isProgrammaticScrollRef.current = true;
+    container.scrollTo({ top: index * itemHeight, behavior });
+  }, []);
+  const scrollToValue = useCallback15(
+    (nextValue, behavior = "smooth") => {
+      const valueIndex = getIndex(nextValue);
+      const targetIndex = loop ? values.length * MIDDLE_SECTION2 + valueIndex : valueIndex;
+      scrollToIndex(targetIndex, behavior);
+    },
+    [getIndex, loop, scrollToIndex, values.length]
+  );
+  const settleScroll = useCallback15(() => {
+    const container = scrollRef.current;
+    if (!container || isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+    const itemHeight = readItemHeight2(container);
+    if (itemHeight <= 0 || values.length === 0) return;
+    const rawIndex = Math.round(container.scrollTop / itemHeight);
+    const valueIndex = loop ? normalizeIndex2(rawIndex, values.length) : Math.min(Math.max(rawIndex, 0), values.length - 1);
+    const nextValue = values[valueIndex];
+    if (loop) {
+      const section = Math.floor(rawIndex / values.length);
+      if (section !== MIDDLE_SECTION2) {
+        isProgrammaticScrollRef.current = true;
+        container.scrollTop = (values.length * MIDDLE_SECTION2 + valueIndex) * itemHeight;
+      }
+    } else if (rawIndex !== valueIndex) {
+      isProgrammaticScrollRef.current = true;
+      container.scrollTop = valueIndex * itemHeight;
+    }
+    if (!Object.is(nextValue, selectedValueRef.current)) {
+      onChange(nextValue);
+    }
+    isUserScrollingRef.current = false;
+  }, [loop, onChange, values]);
+  const handleScroll = useCallback15(() => {
+    if (isProgrammaticScrollRef.current) return;
+    isUserScrollingRef.current = true;
+    if (scrollEndTimerRef.current) {
+      clearTimeout(scrollEndTimerRef.current);
+    }
+    scrollEndTimerRef.current = setTimeout(settleScroll, SCROLL_END_DEBOUNCE_MS2);
+  }, [settleScroll]);
+  useLayoutEffect6(() => {
+    if (isUserScrollingRef.current) return;
+    const container = scrollRef.current;
+    if (!container || values.length === 0) return;
+    const itemHeight = readItemHeight2(container);
+    if (itemHeight <= 0) return;
+    const valueIndex = getIndex(value);
+    const targetIndex = loop ? values.length * MIDDLE_SECTION2 + valueIndex : valueIndex;
+    const currentIndex = Math.round(container.scrollTop / itemHeight);
+    const currentValueIndex = loop ? normalizeIndex2(currentIndex, values.length) : Math.min(Math.max(currentIndex, 0), values.length - 1);
+    const inMiddleSection = !loop || Math.floor(currentIndex / values.length) === MIDDLE_SECTION2;
+    if (currentValueIndex === valueIndex && inMiddleSection) return;
+    scrollToIndex(targetIndex, "auto");
+  }, [getIndex, loop, scrollToIndex, value, values.length]);
+  useEffect9(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const onScrollEnd = () => {
+      if (scrollEndTimerRef.current) {
+        clearTimeout(scrollEndTimerRef.current);
+      }
+      settleScroll();
+    };
+    container.addEventListener("scrollend", onScrollEnd);
+    return () => {
+      container.removeEventListener("scrollend", onScrollEnd);
+      if (scrollEndTimerRef.current) {
+        clearTimeout(scrollEndTimerRef.current);
+      }
+    };
+  }, [settleScroll]);
+  const handleKeyDown = (event) => {
+    const currentIndex = getIndex(selectedValueRef.current);
+    let nextIndex = null;
+    switch (event.key) {
+      case "ArrowUp":
+        nextIndex = loop ? normalizeIndex2(currentIndex - 1, values.length) : Math.max(currentIndex - 1, 0);
+        break;
+      case "ArrowDown":
+        nextIndex = loop ? normalizeIndex2(currentIndex + 1, values.length) : Math.min(currentIndex + 1, values.length - 1);
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = values.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const nextValue = values[nextIndex];
+    scrollToValue(nextValue, "smooth");
+    if (!Object.is(nextValue, selectedValueRef.current)) {
+      onChange(nextValue);
+    }
+  };
+  const selectedOptionId = `${reactId}-${getIndex(value)}`;
+  return /* @__PURE__ */ jsx48("div", { className: cn("aviala-scroll-picker-column", className), children: /* @__PURE__ */ jsxs38("div", { className: "aviala-scroll-picker-column__viewport", children: [
+    /* @__PURE__ */ jsx48("div", { className: "aviala-scroll-picker-column__highlight", "aria-hidden": true }),
+    /* @__PURE__ */ jsx48(
+      "div",
+      {
+        ref: scrollRef,
+        className: "aviala-scroll-picker-column__scroll",
+        onScroll: handleScroll,
+        role: "listbox",
+        "aria-label": ariaLabel,
+        "aria-activedescendant": selectedOptionId,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        children: /* @__PURE__ */ jsx48("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+          const isSelected = Object.is(itemValue, value);
+          const valueIndex = loop ? normalizeIndex2(index, values.length) : index;
+          const optionId = `${reactId}-${loop ? index : valueIndex}`;
+          const key = getValueKey?.(itemValue, index) ?? `${String(itemValue)}-${index}`;
+          return /* @__PURE__ */ jsx48("li", { className: "contents", children: /* @__PURE__ */ jsx48(
+            ScrollPickerItem,
+            {
+              id: isSelected ? selectedOptionId : optionId,
+              selected: isSelected,
+              onSelect: () => {
+                scrollToValue(itemValue, "smooth");
+                if (!Object.is(itemValue, selectedValueRef.current)) {
+                  onChange(itemValue);
+                }
+              },
+              children: formatValue ? formatValue(itemValue) : String(itemValue)
+            }
+          ) }, key);
+        }) })
+      }
+    )
+  ] }) });
+}
+function ScrollPickerItem({
+  id,
+  selected = false,
+  children,
+  className,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx48(
+    "button",
+    {
+      type: "button",
+      id,
+      role: "option",
+      "aria-selected": selected,
+      className: cn(
+        "aviala-scroll-picker-item",
+        typographyVariants({ level: "text" }),
+        className
+      ),
+      "data-selected": selected ? "true" : void 0,
+      tabIndex: -1,
+      onClick: onSelect,
+      children
+    }
+  );
+}
+
+// src/components/breadcrumb.tsx
+import { DirectionArrowRightLight as DirectionArrowRightLight3, SymbolMore } from "@aviala-design/icons";
+import { cva as cva15 } from "class-variance-authority";
+import {
+  createContext as createContext9,
+  forwardRef as forwardRef37,
+  useCallback as useCallback16,
+  useContext as useContext9,
+  useState as useState15
+} from "react";
+import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+var BreadcrumbSizeContext = createContext9("default");
+function breadcrumbTypeLevel(size) {
+  return size === "small" ? "caption" : "text";
+}
+var breadcrumbVariants = cva15("aviala-breadcrumb", {
+  variants: {
+    size: {
+      default: "aviala-breadcrumb--size-default",
+      small: "aviala-breadcrumb--size-small"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var Breadcrumb = forwardRef37(
+  ({ className, size = "default", children, ...props }, ref) => {
+    const resolvedSize = size ?? "default";
+    return /* @__PURE__ */ jsx49(BreadcrumbSizeContext.Provider, { value: resolvedSize, children: /* @__PURE__ */ jsx49(
+      "nav",
+      {
+        ref,
+        "aria-label": props["aria-label"] ?? "Breadcrumb",
+        className: cn(breadcrumbVariants({ size: resolvedSize }), className),
+        "data-size": resolvedSize,
+        ...props,
+        children: /* @__PURE__ */ jsx49("ol", { className: "aviala-breadcrumb__list", children })
+      }
+    ) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbItem = forwardRef37(
+  ({ className, href, current = false, icon, onClick, children, ...props }, ref) => {
+    const size = useContext9(BreadcrumbSizeContext);
+    const label = /* @__PURE__ */ jsxs39(Fragment6, { children: [
+      icon ? /* @__PURE__ */ jsx49("span", { className: "aviala-breadcrumb-item__icon", children: icon }) : null,
+      children != null ? /* @__PURE__ */ jsx49(
+        Typography,
+        {
+          level: breadcrumbTypeLevel(size),
+          as: "span",
+          className: "aviala-breadcrumb-item__label",
+          children
+        }
+      ) : null
+    ] });
+    return /* @__PURE__ */ jsx49(
+      "li",
+      {
+        ref,
+        className: cn("aviala-breadcrumb-item-wrap", className),
+        ...props,
+        children: href != null ? /* @__PURE__ */ jsx49(
+          "a",
+          {
+            href,
+            className: "aviala-breadcrumb-item aviala-focus-ring",
+            "data-current": current ? "true" : void 0,
+            "aria-current": current ? "page" : void 0,
+            children: label
+          }
+        ) : onClick != null ? /* @__PURE__ */ jsx49(
+          "button",
+          {
+            type: "button",
+            className: "aviala-breadcrumb-item aviala-focus-ring",
+            "data-current": current ? "true" : void 0,
+            "aria-current": current ? "page" : void 0,
+            onClick,
+            children: label
+          }
+        ) : /* @__PURE__ */ jsx49(
+          "span",
+          {
+            className: "aviala-breadcrumb-item",
+            "data-current": current ? "true" : void 0,
+            "aria-current": current ? "page" : void 0,
+            children: label
+          }
+        )
+      }
+    );
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbSeparator = forwardRef37(
+  ({ className, children = "/", ...props }, ref) => {
+    const size = useContext9(BreadcrumbSizeContext);
+    return /* @__PURE__ */ jsx49(
+      "li",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": true,
+        className: cn("aviala-breadcrumb-separator", className),
+        ...props,
+        children: /* @__PURE__ */ jsx49(Typography, { level: breadcrumbTypeLevel(size), as: "span", children })
+      }
+    );
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsisItem = forwardRef37(
+  ({
+    className,
+    href,
+    onClick,
+    showChevron = true,
+    children,
+    ...props
+  }, ref) => {
+    const content = /* @__PURE__ */ jsxs39(Fragment6, { children: [
+      /* @__PURE__ */ jsx49(Typography, { level: "text", as: "span", className: "aviala-breadcrumb-ellipsis-item__label", children }),
+      showChevron ? /* @__PURE__ */ jsx49("span", { className: "aviala-breadcrumb-ellipsis-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx49(DirectionArrowRightLight3, { width: 14, height: 14, thickness: "Light" }) }) : null
+    ] });
+    if (href != null) {
+      return /* @__PURE__ */ jsx49(
+        "a",
+        {
+          ref,
+          href,
+          className: cn("aviala-breadcrumb-ellipsis-item aviala-focus-ring", className),
+          onClick,
+          ...props,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx49(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn("aviala-breadcrumb-ellipsis-item aviala-focus-ring", className),
+        onClick,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+BreadcrumbEllipsisItem.displayName = "BreadcrumbEllipsisItem";
+var BreadcrumbEllipsis = forwardRef37(
+  ({
+    className,
+    children,
+    activated: activatedProp,
+    defaultActivated = false,
+    onActivatedChange,
+    menu,
+    onClick,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const size = useContext9(BreadcrumbSizeContext);
+    const [uncontrolledActivated, setUncontrolledActivated] = useState15(defaultActivated);
+    const isControlled = activatedProp !== void 0;
+    const activated = isControlled ? Boolean(activatedProp) : uncontrolledActivated;
+    const setActivated = useCallback16(
+      (next) => {
+        if (!isControlled) setUncontrolledActivated(next);
+        onActivatedChange?.(next);
+      },
+      [isControlled, onActivatedChange]
+    );
+    const iconSize = 14;
+    const icon = children ?? /* @__PURE__ */ jsx49(SymbolMore, { width: iconSize, height: iconSize, thickness: "Light", "aria-hidden": true });
+    const trigger = /* @__PURE__ */ jsx49(
+      "button",
+      {
+        type: "button",
+        className: "aviala-breadcrumb-ellipsis aviala-focus-ring",
+        "data-size": size,
+        "data-activated": activated ? "true" : void 0,
+        "aria-label": ariaLabel ?? "Show more breadcrumb items",
+        "aria-expanded": menu != null ? activated : void 0,
+        "aria-haspopup": menu != null ? "menu" : void 0,
+        onClick: (event) => {
+          onClick?.(event);
+          if (event.defaultPrevented) return;
+          if (menu == null) setActivated(!activated);
+        },
+        ...props,
+        children: icon
+      }
+    );
+    return /* @__PURE__ */ jsx49("li", { ref, className: cn("aviala-breadcrumb-ellipsis-wrap", className), children: menu != null ? /* @__PURE__ */ jsxs39(Popover, { open: activated, onOpenChange: setActivated, children: [
+      /* @__PURE__ */ jsx49(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx49(
+        PopoverContent,
+        {
+          className: "aviala-breadcrumb-ellipsis-menu",
+          align: "center",
+          side: "bottom",
+          sideOffset: 7,
+          showArrow: false,
+          role: "menu",
+          children: /* @__PURE__ */ jsx49("div", { className: "aviala-breadcrumb-ellipsis-menu__items", children: menu })
+        }
+      )
+    ] }) : trigger });
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+// src/components/pagehead.tsx
+import {
+  forwardRef as forwardRef38
+} from "react";
+import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+var Pagehead = forwardRef38(
+  ({
+    className,
+    back,
+    breadcrumb,
+    title,
+    description,
+    actions,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs40("header", { ref, className: cn("aviala-pagehead", className), ...props, children: [
+    /* @__PURE__ */ jsxs40("div", { className: "aviala-pagehead__main", children: [
+      back != null ? /* @__PURE__ */ jsx50("div", { className: "aviala-pagehead__back", children: back }) : null,
+      /* @__PURE__ */ jsxs40("div", { className: "aviala-pagehead__title-block", children: [
+        breadcrumb != null ? /* @__PURE__ */ jsx50("div", { className: "aviala-pagehead__breadcrumb", children: breadcrumb }) : null,
+        title != null || description != null ? /* @__PURE__ */ jsx50("div", { className: "aviala-pagehead__title", children: /* @__PURE__ */ jsx50(Typeface, { content: "textCaption", primary: title, secondary: description }) }) : null,
+        children
+      ] })
+    ] }),
+    actions != null ? /* @__PURE__ */ jsx50("div", { className: "aviala-pagehead__actions", children: actions }) : null
+  ] })
+);
+Pagehead.displayName = "Pagehead";
+
+// src/components/steps.tsx
+import {
+  SymbolRight as SymbolRight4,
+  SymbolWarning,
+  SymbolWrong as SymbolWrong5
+} from "@aviala-design/icons";
+import { cva as cva16 } from "class-variance-authority";
+import {
+  forwardRef as forwardRef39
+} from "react";
+import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+var stepsVariants = cva16("aviala-steps", {
+  variants: {
+    direction: {
+      horizontal: "aviala-steps--direction-horizontal",
+      vertical: "aviala-steps--direction-vertical"
+    }
+  },
+  defaultVariants: {
+    direction: "horizontal"
+  }
+});
+var Steps = forwardRef39(
+  ({ className, direction = "horizontal", children, ...props }, ref) => /* @__PURE__ */ jsx51(
+    "div",
+    {
+      ref,
+      className: cn(stepsVariants({ direction }), className),
+      "data-direction": direction,
+      ...props,
+      children
+    }
+  )
+);
+Steps.displayName = "Steps";
+function defaultStepsIconContent(state, index) {
+  switch (state) {
+    case "done":
+      return /* @__PURE__ */ jsx51(SymbolRight4, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+    case "fail":
+      return /* @__PURE__ */ jsx51(SymbolWrong5, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+    case "warning":
+      return /* @__PURE__ */ jsx51(SymbolWarning, { width: 12, height: 12, thickness: "Bold", "aria-hidden": true });
+    case "waiting":
+    case "inProgress":
+    case "default":
+    default:
+      return index != null ? /* @__PURE__ */ jsx51(Typography, { level: "caption", as: "span", className: "aviala-steps-icon__index", children: index }) : null;
+  }
+}
+var StepsIcon = forwardRef39(
+  ({ className, state = "default", index, children, ...props }, ref) => /* @__PURE__ */ jsx51(
+    "span",
+    {
+      ref,
+      className: cn("aviala-steps-icon", className),
+      "data-state": state,
+      ...props,
+      children: children ?? defaultStepsIconContent(state, index)
+    }
+  )
+);
+StepsIcon.displayName = "StepsIcon";
+var StepsItem = forwardRef39(
+  ({
+    className,
+    state = "default",
+    title,
+    description,
+    index,
+    icon,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs41(
+    "div",
+    {
+      ref,
+      className: cn("aviala-steps-item", className),
+      "data-state": state,
+      ...props,
+      children: [
+        icon ?? /* @__PURE__ */ jsx51(StepsIcon, { state, index }),
+        /* @__PURE__ */ jsxs41("div", { className: "aviala-steps-item__body", children: [
+          title != null ? /* @__PURE__ */ jsx51(
+            Typography,
+            {
+              level: "subtitle",
+              as: "div",
+              className: "aviala-steps-item__title",
+              children: title
+            }
+          ) : null,
+          description != null ? /* @__PURE__ */ jsx51(
+            Typography,
+            {
+              level: "text",
+              as: "div",
+              className: "aviala-steps-item__description",
+              children: description
+            }
+          ) : null,
+          children
+        ] })
+      ]
+    }
+  )
+);
+StepsItem.displayName = "StepsItem";
+
+// src/components/pagination.tsx
+import {
+  DirectionArrowLeftLight,
+  DirectionArrowRightLight as DirectionArrowRightLight4
+} from "@aviala-design/icons";
+import {
+  forwardRef as forwardRef40,
+  useState as useState16
+} from "react";
+import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+function buildPageList(page, pageCount) {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1);
+  }
+  const pages = /* @__PURE__ */ new Set();
+  pages.add(1);
+  pages.add(pageCount);
+  for (let i = page - 1; i <= page + 1; i += 1) {
+    if (i >= 1 && i <= pageCount) pages.add(i);
+  }
+  const sorted = [...pages].sort((a, b) => a - b);
+  const result = [];
+  for (let i = 0; i < sorted.length; i += 1) {
+    const current = sorted[i];
+    const prev = sorted[i - 1];
+    if (prev != null && current - prev > 1) {
+      result.push("ellipsis");
+    }
+    result.push(current);
+  }
+  return result;
+}
+var Pagination = forwardRef40(
+  ({
+    className,
+    page: pageProp,
+    defaultPage = 1,
+    pageCount,
+    onPageChange,
+    showJump = true,
+    showSizeChanger = true,
+    pageSize: pageSizeProp,
+    defaultPageSize = 10,
+    pageSizeOptions = [10, 20, 50],
+    onPageSizeChange,
+    jumpLabel = "\u8DF3\u8F6C\u81F3",
+    sizeLabel = "\u6BCF\u9875",
+    sizeOptionLabel = (size) => `${size} \u9879`,
+    ...props
+  }, ref) => {
+    const [uncontrolledPage, setUncontrolledPage] = useState16(defaultPage);
+    const [uncontrolledPageSize, setUncontrolledPageSize] = useState16(defaultPageSize);
+    const [jumpValue, setJumpValue] = useState16("");
+    const page = pageProp ?? uncontrolledPage;
+    const pageSize = pageSizeProp ?? uncontrolledPageSize;
+    const safePageCount = Math.max(1, pageCount);
+    const currentPage = Math.min(Math.max(page, 1), safePageCount);
+    const pages = buildPageList(currentPage, safePageCount);
+    const setPage = (next) => {
+      const clamped = Math.min(Math.max(next, 1), safePageCount);
+      if (pageProp == null) setUncontrolledPage(clamped);
+      onPageChange?.(clamped);
+    };
+    const setPageSize = (next) => {
+      if (pageSizeProp == null) setUncontrolledPageSize(next);
+      onPageSizeChange?.(next);
+    };
+    const commitJump = () => {
+      const parsed = Number.parseInt(jumpValue, 10);
+      if (!Number.isFinite(parsed)) return;
+      setPage(parsed);
+      setJumpValue("");
+    };
+    return /* @__PURE__ */ jsxs42(
+      "div",
+      {
+        ref,
+        className: cn("aviala-pagination", className),
+        role: "navigation",
+        "aria-label": props["aria-label"] ?? "Pagination",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs42("div", { className: "aviala-pagination__controls", children: [
+            /* @__PURE__ */ jsx52(
+              Button,
+              {
+                mode: "noBackgroundCustom",
+                size: "regular",
+                iconOnly: true,
+                "aria-label": "Previous page",
+                disabled: currentPage <= 1,
+                leftIcon: /* @__PURE__ */ jsx52(DirectionArrowLeftLight, { "aria-hidden": true }),
+                onClick: () => setPage(currentPage - 1)
+              }
+            ),
+            /* @__PURE__ */ jsx52("div", { className: "aviala-pagination__pages", children: pages.map(
+              (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx52(
+                Typography,
+                {
+                  level: "text",
+                  as: "span",
+                  className: "aviala-pagination__page",
+                  "aria-hidden": true,
+                  children: "\u2026"
+                },
+                `ellipsis-${index}`
+              ) : /* @__PURE__ */ jsx52(
+                "button",
+                {
+                  type: "button",
+                  className: "aviala-pagination__page aviala-focus-ring",
+                  "data-active": item === currentPage ? "true" : void 0,
+                  "aria-current": item === currentPage ? "page" : void 0,
+                  onClick: () => setPage(item),
+                  children: /* @__PURE__ */ jsx52(Typography, { level: "text", as: "span", children: item })
+                },
+                item
+              )
+            ) }),
+            /* @__PURE__ */ jsx52(
+              Button,
+              {
+                mode: "noBackgroundCustom",
+                size: "regular",
+                iconOnly: true,
+                "aria-label": "Next page",
+                disabled: currentPage >= safePageCount,
+                leftIcon: /* @__PURE__ */ jsx52(DirectionArrowRightLight4, { "aria-hidden": true }),
+                onClick: () => setPage(currentPage + 1)
+              }
+            )
+          ] }),
+          showJump ? /* @__PURE__ */ jsxs42("div", { className: "aviala-pagination__jump", children: [
+            /* @__PURE__ */ jsx52(Typography, { level: "text", as: "span", children: jumpLabel }),
+            /* @__PURE__ */ jsx52(
+              Input,
+              {
+                className: "aviala-pagination__jump-input",
+                size: "regular",
+                fullWidth: false,
+                value: jumpValue,
+                placeholder: "\u9875\u7801",
+                inputMode: "numeric",
+                onChange: (event) => setJumpValue(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    commitJump();
+                  }
+                },
+                onBlur: commitJump
+              }
+            )
+          ] }) : null,
+          showSizeChanger ? /* @__PURE__ */ jsxs42("div", { className: "aviala-pagination__size", children: [
+            /* @__PURE__ */ jsx52(Typography, { level: "text", as: "span", children: sizeLabel }),
+            /* @__PURE__ */ jsxs42(
+              Select,
+              {
+                value: String(pageSize),
+                onValueChange: (value) => setPageSize(Number(value)),
+                children: [
+                  /* @__PURE__ */ jsx52(
+                    SelectTrigger,
+                    {
+                      size: "regular",
+                      className: "aviala-pagination__size-select",
+                      "aria-label": "Page size"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx52(SelectContent, { children: /* @__PURE__ */ jsx52(SelectItemGroup, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx52(SelectItem, { value: String(option), children: sizeOptionLabel(option) }, option)) }) })
+                ]
+              }
+            )
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+
+// src/components/card.tsx
+import {
+  DirectionArrowRightLight as DirectionArrowRightLight5,
+  GeneralSetting as GeneralSetting2
+} from "@aviala-design/icons";
+import {
+  cloneElement as cloneElement13,
+  forwardRef as forwardRef41,
+  isValidElement as isValidElement17
+} from "react";
+import { Fragment as Fragment7, jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
+var Card = forwardRef41(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx53("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" ? cloneElement13(node, {
+    width: 14,
+    height: 14,
+    className: cn(
+      node.props.className,
+      "shrink-0"
+    )
+  }) : node;
+  return /* @__PURE__ */ jsx53("span", { className: "aviala-card-head__icon", children: content });
+}
+var CardHead = forwardRef41(
+  ({
+    className,
+    slotType = "select",
+    icon,
+    title,
+    description,
+    actionLabel = "Text",
+    action,
+    secondaryAction,
+    select,
+    switchProps,
+    trailing,
+    children,
+    ...props
+  }, ref) => {
+    const primaryAction = action ?? /* @__PURE__ */ jsx53(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx53(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
+    const renderTrailing = () => {
+      if (trailing !== void 0) return trailing;
+      switch (slotType) {
+        case "action":
+          return /* @__PURE__ */ jsxs43("div", { className: "aviala-card-head__trailing", children: [
+            primaryAction,
+            secondaryAction ?? /* @__PURE__ */ jsx53(
+              Button,
+              {
+                mode: "default",
+                size: "regular",
+                iconOnly: true,
+                "aria-label": "More",
+                leftIcon: /* @__PURE__ */ jsx53(GeneralSetting2, { "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsx53("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx53(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
+          ] });
+        case "switch":
+          return /* @__PURE__ */ jsxs43("div", { className: "aviala-card-head__trailing", children: [
+            primaryAction,
+            /* @__PURE__ */ jsx53("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx53(Switch, { ...switchProps })
+          ] });
+        case "select":
+        default:
+          return select != null ? /* @__PURE__ */ jsx53("div", { className: "aviala-card-head__trailing", children: select }) : null;
+      }
+    };
+    return /* @__PURE__ */ jsxs43(
+      "div",
+      {
+        ref,
+        className: cn("aviala-card-head", className),
+        "data-type": slotType,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs43("div", { className: "aviala-card-head__main", children: [
+            renderCardIcon(icon ?? /* @__PURE__ */ jsx53(GeneralSetting2, { "aria-hidden": true })),
+            /* @__PURE__ */ jsx53("div", { className: "aviala-card-head__title", children: title != null || description != null ? /* @__PURE__ */ jsx53(Typeface, { content: "textCaption", primary: title, secondary: description }) : children })
+          ] }),
+          renderTrailing()
+        ]
+      }
+    );
+  }
+);
+CardHead.displayName = "CardHead";
+var CardBody = forwardRef41(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx53("div", { ref, className: cn("aviala-card-body", className), ...props, children: /* @__PURE__ */ jsx53("div", { className: "aviala-card-body__content", children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx53(Typography, { level: "text", as: "span", children }) : children }) })
+);
+CardBody.displayName = "CardBody";
+var CardBottom = forwardRef41(
+  ({
+    className,
+    slotType = "action",
+    actionLabel = "Text",
+    action,
+    secondaryAction,
+    select,
+    switchProps,
+    trailing,
+    children,
+    ...props
+  }, ref) => {
+    const primaryAction = action ?? /* @__PURE__ */ jsx53(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ jsx53(GeneralSetting2, { "aria-hidden": true }), children: actionLabel });
+    const renderTrailing = () => {
+      if (trailing !== void 0) return trailing;
+      if (children != null) return children;
+      switch (slotType) {
+        case "switch":
+          return /* @__PURE__ */ jsxs43(Fragment7, { children: [
+            primaryAction,
+            /* @__PURE__ */ jsx53("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx53(Switch, { ...switchProps })
+          ] });
+        case "select":
+          return select;
+        case "action":
+        default:
+          return /* @__PURE__ */ jsxs43(Fragment7, { children: [
+            primaryAction,
+            secondaryAction ?? /* @__PURE__ */ jsx53(
+              Button,
+              {
+                mode: "default",
+                size: "regular",
+                iconOnly: true,
+                "aria-label": "More",
+                leftIcon: /* @__PURE__ */ jsx53(GeneralSetting2, { "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsx53("span", { className: "aviala-card__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx53(DirectionArrowRightLight5, { width: 14, height: 14, "aria-hidden": true })
+          ] });
+      }
+    };
+    return /* @__PURE__ */ jsx53(
+      "div",
+      {
+        ref,
+        className: cn("aviala-card-bottom", className),
+        "data-type": slotType,
+        ...props,
+        children: /* @__PURE__ */ jsx53("div", { className: "aviala-card-bottom__trailing", children: renderTrailing() })
+      }
+    );
+  }
+);
+CardBottom.displayName = "CardBottom";
+
+// src/components/table.tsx
+import {
+  cloneElement as cloneElement14,
+  forwardRef as forwardRef42,
+  isValidElement as isValidElement18
+} from "react";
+import { Fragment as Fragment8, jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
+var Table = forwardRef42(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx54(
+    "div",
+    {
+      ref,
+      role: "table",
+      className: cn("aviala-table", className),
+      ...props,
+      children
+    }
+  )
+);
+Table.displayName = "Table";
+var TableRow = forwardRef42(
+  ({ className, header = false, children, ...props }, ref) => /* @__PURE__ */ jsx54(
+    "div",
+    {
+      ref,
+      role: "row",
+      className: cn("aviala-table__row", className),
+      "data-header": header ? "true" : void 0,
+      ...props,
+      children
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef42(
+  ({ className, content = "text", children, ...props }, ref) => /* @__PURE__ */ jsx54(
+    "div",
+    {
+      ref,
+      role: "columnheader",
+      className: cn("aviala-table-head", className),
+      "data-content": content,
+      ...props,
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx54(Typography, { level: "caption", as: "span", children }) : children
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+function renderCellIcon(node) {
+  if (!node) return null;
+  const content = isValidElement18(node) && typeof node.type !== "string" ? cloneElement14(node, {
+    width: 16,
+    height: 16,
+    className: cn(
+      node.props.className,
+      "shrink-0"
+    )
+  }) : node;
+  return /* @__PURE__ */ jsx54("span", { className: "aviala-table-cell__icon", children: content });
+}
+var TableCell = forwardRef42(
+  ({
+    className,
+    content = "text",
+    icon,
+    text,
+    people,
+    badge,
+    badgeLabel,
+    switchProps,
+    actions,
+    checkboxProps,
+    children,
+    ...props
+  }, ref) => {
+    const renderContent = () => {
+      if (children != null) return children;
+      switch (content) {
+        case "checkbox":
+          return /* @__PURE__ */ jsx54(Checkbox, { ...checkboxProps });
+        case "icon+text":
+          return /* @__PURE__ */ jsxs44(Fragment8, { children: [
+            renderCellIcon(icon),
+            /* @__PURE__ */ jsx54("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx54(Typography, { level: "text", as: "span", children: text }) })
+          ] });
+        case "people":
+          return /* @__PURE__ */ jsxs44(Fragment8, { children: [
+            people ?? /* @__PURE__ */ jsx54(Avatar, { content: "text", level: "text", children: "A" }),
+            /* @__PURE__ */ jsx54("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx54(Typography, { level: "text", as: "span", children: text }) })
+          ] });
+        case "badge":
+          return badge ?? /* @__PURE__ */ jsx54(Badge, { style: "theme", level: "caption", children: badgeLabel ?? "Text" });
+        case "switch":
+          return /* @__PURE__ */ jsx54(Switch, { ...switchProps });
+        case "action":
+          return /* @__PURE__ */ jsx54("div", { className: "aviala-table-cell__actions", children: actions });
+        case "text":
+        default:
+          return /* @__PURE__ */ jsx54("span", { className: "aviala-table-cell__text", children: /* @__PURE__ */ jsx54(Typography, { level: "text", as: "span", children: text }) });
+      }
+    };
+    return /* @__PURE__ */ jsx54(
+      "div",
+      {
+        ref,
+        role: "cell",
+        className: cn("aviala-table-cell", className),
+        "data-content": content,
+        ...props,
+        children: renderContent()
+      }
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+
+// src/lib/keyboard-focus.ts
+function initKeyboardFocus() {
+}
 export {
   Alert,
   Anchor2 as Anchor,
   AnchorItem,
+  Avatar,
   Badge,
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbEllipsisItem,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
   Button,
+  Card,
+  CardBody,
+  CardBottom,
+  CardHead,
   Cascader,
   CascaderColumn,
   CascaderContent,
@@ -7073,13 +8878,20 @@ export {
   NavigationItemGroup,
   NavigationSection,
   PALETTE_HUE_FAMILIES,
+  Pagehead,
+  Pagination,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
+  Progress,
   RadioGroup,
   RadioGroupItem,
   RadioInput,
+  Scroll,
+  ScrollPicker,
+  ScrollPickerColumn,
+  ScrollPickerItem,
   SegmentatorGroup,
   SegmentatorItem,
   Select,
@@ -7095,9 +8907,19 @@ export {
   SelectSubMenu,
   SelectTrigger,
   SelectValue,
+  Slider,
   Stack,
+  Steps,
+  StepsIcon,
+  StepsItem,
   Switch,
   TOOLTIP_DELAY_DURATION,
+  Table,
+  TableCell,
+  TableHead,
+  TableRow,
+  Tag,
+  TagClose,
   Textarea,
   ThemeProvider,
   ThemeScript,
@@ -7114,6 +8936,7 @@ export {
   Typeface,
   TypefacePair,
   Typography,
+  Upload,
   alertVariants,
   buttonVariants,
   cn,