@aviala-design/spiral 2.7.1 → 2.7.2

package/dist/index.cjs

@@ -208,6 +208,7 @@ __export(index_exports, {
   useDirection: () => useDirection,
   useLocale: () => useLocale,
   useLocaleMessages: () => useLocaleMessages,
+  useResolvedControlError: () => useResolvedControlError,
   useRtl: () => useRtl,
   useTheme: () => useTheme,
   useThemeLayoutKey: () => useThemeLayoutKey,
@@ -1144,7 +1145,7 @@ Button.displayName = "Button";
 
 // src/components/input.tsx
 var import_class_variance_authority5 = require("class-variance-authority");
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // src/lib/render-slot-icon.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -1283,8 +1284,227 @@ var Badge = (0, import_react12.forwardRef)(
 );
 Badge.displayName = "Badge";
 
-// src/components/input.tsx
+// src/components/form-field.tsx
+var import_icons4 = require("@aviala-design/icons");
+var import_react14 = require("react");
+var import_react_hook_form = require("react-hook-form");
+
+// src/components/typeface.tsx
+var import_react13 = require("react");
 var import_jsx_runtime9 = require("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 = (0, import_react13.forwardRef)(
+  ({
+    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__ */ (0, import_jsx_runtime9.jsx)("div", { ref, className: cn("aviala-typeface", className), "data-content": content, ...props, children: layout.map((line, index) => {
+      const value = values[index];
+      if (value === void 0 || value === null || value === false) return null;
+      const lineContent = index === 0 ? primaryContent : index === 1 ? secondaryContent : tertiaryContent;
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "aviala-typeface__line", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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 = (0, import_react13.forwardRef)(
+  ({ title, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Typeface,
+    {
+      ref,
+      content: "textCaption",
+      primary: title,
+      secondary: description,
+      ...props
+    }
+  )
+);
+TypefacePair.displayName = "TypefacePair";
+
+// src/components/form-field.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var FormFieldControlContext = (0, import_react14.createContext)(null);
+function useResolvedControlError(errorProp) {
+  const ctx = (0, import_react14.useContext)(FormFieldControlContext);
+  return errorProp ?? ctx?.invalid ?? false;
+}
+var FormFieldLayout = (0, import_react14.forwardRef)(
+  ({
+    className,
+    label,
+    htmlFor,
+    description,
+    error,
+    info,
+    alert,
+    required,
+    direction = "vertical",
+    children,
+    ...props
+  }, ref) => {
+    const reactId = (0, import_react14.useId)();
+    const labelId = `${reactId}-label`;
+    const hasLabel = label != null && label !== "";
+    const invalid = Boolean(error);
+    const controlContext = (0, import_react14.useMemo)(() => ({ invalid }), [invalid]);
+    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Typeface,
+      {
+        id: labelId,
+        content: "textCaption",
+        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          label,
+          required ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+        ] }) : void 0,
+        secondary: description
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Typeface,
+      {
+        id: labelId,
+        className: "aviala-form__label",
+        content: "textCaption",
+        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          label,
+          required ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
+        ] }) : void 0,
+        secondary: description
+      }
+    ) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn("aviala-form", className),
+        "data-direction": direction,
+        "aria-labelledby": hasLabel ? labelId : void 0,
+        ...props,
+        children: [
+          labelNode,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "aviala-form__content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormFieldControlContext.Provider, { value: controlContext, children }),
+            error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "aviala-form__message aviala-form__message--error", role: "alert", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_icons4.SymbolWrongCircle,
+                {
+                  className: "aviala-form__message-icon",
+                  width: 14,
+                  height: 14,
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
+            ] }) : null,
+            info ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "aviala-form__message aviala-form__message--info", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_icons4.SymbolInformationCircle,
+                {
+                  className: "aviala-form__message-icon",
+                  width: 14,
+                  height: 14,
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
+            ] }) : null,
+            alert ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "aviala-form__alert", children: alert }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+FormFieldLayout.displayName = "FormFieldLayout";
+var FormFieldControlled = (0, import_react14.forwardRef)(
+  ({
+    control,
+    name,
+    rules,
+    defaultValue,
+    shouldUnregister,
+    disabled,
+    render,
+    error,
+    ...layoutProps
+  }, ref) => {
+    const id = (0, import_react14.useId)();
+    const { field, fieldState, formState } = (0, import_react_hook_form.useController)({
+      name,
+      control,
+      rules,
+      defaultValue,
+      shouldUnregister,
+      disabled
+    });
+    const message = error !== void 0 ? error : fieldState.error?.message ?? null;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormFieldLayout, { ref, ...layoutProps, htmlFor: id, error: message, children: render({ field, fieldState, formState, id }) });
+  }
+);
+FormFieldControlled.displayName = "FormFieldControlled";
+function isControlledProps(props) {
+  return "render" in props && typeof props.render === "function" && "name" in props;
+}
+var FormFieldRoot = (0, import_react14.forwardRef)((props, ref) => {
+  if (isControlledProps(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormFieldControlled, { ref, ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormFieldLayout, { ref, ...props });
+});
+var FormField = FormFieldRoot;
+FormField.displayName = "FormField";
+var Form = import_react_hook_form.FormProvider;
+
+// src/components/input.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function resolveInputState(value, defaultValue, focused) {
   const current = value ?? defaultValue ?? "";
   if (String(current).length === 0) return "empty";
@@ -1303,9 +1523,9 @@ var inputRootVariants = (0, import_class_variance_authority5.cva)("aviala-input
 });
 function renderBadgeArea(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "aviala-input__badge-area", children: (0, import_react13.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Badge, { children: node }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aviala-input__badge-area", children: (0, import_react15.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Badge, { children: node }) });
 }
-var Input = (0, import_react13.forwardRef)(
+var Input = (0, import_react15.forwardRef)(
   ({
     className,
     size = "regular",
@@ -1315,7 +1535,7 @@ var Input = (0, import_react13.forwardRef)(
     leftBadge,
     rightBadge,
     fullWidth = true,
-    error = false,
+    error,
     disabled,
     type = "text",
     value,
@@ -1325,29 +1545,30 @@ var Input = (0, import_react13.forwardRef)(
     onBlur,
     ...props
   }, ref) => {
-    const [focused, setFocused] = (0, import_react13.useState)(false);
-    const [internalValue, setInternalValue] = (0, import_react13.useState)(() => String(defaultValue ?? ""));
+    const [focused, setFocused] = (0, import_react15.useState)(false);
+    const [internalValue, setInternalValue] = (0, import_react15.useState)(() => String(defaultValue ?? ""));
     const resolvedValue = value !== void 0 ? String(value) : internalValue;
     const inputState = resolveInputState(resolvedValue, void 0, focused);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    const resolvedError = useResolvedControlError(error);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         className: cn(inputRootVariants({ fullWidth }), className),
         "data-size": size,
         "data-all-round": allRound ? "true" : void 0,
         "data-input-state": inputState,
-        "data-error": error ? "true" : void 0,
+        "data-error": resolvedError ? "true" : void 0,
         "data-disabled": disabled ? "true" : void 0,
         ...spiralDebugId("input"),
         children: [
           renderSlotIcon(leftIcon, "aviala-input__slot", "input.left-icon"),
           renderBadgeArea(leftBadge),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "div",
             {
               className: "aviala-input__field relative z-[1] flex min-w-0 flex-1 flex-col justify-center",
               ...spiralDebugId("input.field"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "input",
                 {
                   ref,
@@ -1355,7 +1576,7 @@ var Input = (0, import_react13.forwardRef)(
                   disabled,
                   value,
                   defaultValue,
-                  "aria-invalid": error || void 0,
+                  "aria-invalid": resolvedError || void 0,
                   className: cn(
                     typographyVariants({ level: "text" }),
                     "w-full min-w-0 border-0 bg-transparent p-0 text-[var(--input-fg,#343333)] outline-none",
@@ -1390,9 +1611,9 @@ var Input = (0, import_react13.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/number-input.tsx
-var import_icons4 = require("@aviala-design/icons");
-var import_react14 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_icons5 = require("@aviala-design/icons");
+var import_react16 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function assignRef(ref, value) {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -1436,10 +1657,10 @@ function decimalPlaces(n) {
 }
 function renderBadgeArea2(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "aviala-input__badge-area", children: (0, import_react14.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Badge, { children: node }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "aviala-input__badge-area", children: (0, import_react16.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { children: node }) });
 }
 var numberInputRootVariants = inputRootVariants;
-var NumberInput = (0, import_react14.forwardRef)(
+var NumberInput = (0, import_react16.forwardRef)(
   ({
     className,
     size = "regular",
@@ -1451,7 +1672,7 @@ var NumberInput = (0, import_react14.forwardRef)(
     rightBadge,
     showControls = true,
     fullWidth = true,
-    error = false,
+    error,
     disabled,
     value,
     defaultValue,
@@ -1466,14 +1687,15 @@ var NumberInput = (0, import_react14.forwardRef)(
     ...props
   }, ref) => {
     const locale = useLocaleMessages("NumberInput");
-    const inputRef = (0, import_react14.useRef)(null);
-    const [focused, setFocused] = (0, import_react14.useState)(false);
-    const [internalValue, setInternalValue] = (0, import_react14.useState)(
+    const inputRef = (0, import_react16.useRef)(null);
+    const [focused, setFocused] = (0, import_react16.useState)(false);
+    const [internalValue, setInternalValue] = (0, import_react16.useState)(
       () => defaultValue === void 0 || defaultValue === null ? "" : String(defaultValue)
     );
     const isControlled = value !== void 0;
     const resolvedValue = isControlled ? value === "" || value === null || value === void 0 ? "" : String(value) : internalValue;
     const inputState = resolveInputState2(resolvedValue, void 0, focused);
+    const resolvedError = useResolvedControlError(error);
     const numeric = parseNumeric(resolvedValue);
     const stepAmount = Number.isFinite(step) && step !== 0 ? Math.abs(step) : 1;
     const commitString = (next) => {
@@ -1490,7 +1712,7 @@ var NumberInput = (0, import_react14.forwardRef)(
       commitString(String(next));
       inputRef.current?.focus();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
         className: cn(
@@ -1502,18 +1724,18 @@ var NumberInput = (0, import_react14.forwardRef)(
         "data-all-round": allRound ? "true" : void 0,
         "data-input-state": inputState,
         "data-input-style": inputStyle,
-        "data-error": error ? "true" : void 0,
+        "data-error": resolvedError ? "true" : void 0,
         "data-disabled": disabled ? "true" : void 0,
         ...spiralDebugId("number-input"),
         children: [
           renderSlotIcon(leftIcon, "aviala-input__slot", "number-input.left-icon"),
           renderBadgeArea2(leftBadge),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "div",
             {
               className: "aviala-input__field relative z-[1] flex min-w-0 flex-1 flex-col justify-center",
               ...spiralDebugId("number-input.field"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "input",
                 {
                   ref: (node) => {
@@ -1527,7 +1749,7 @@ var NumberInput = (0, import_react14.forwardRef)(
                   step: stepAmount,
                   min,
                   max,
-                  "aria-invalid": error || void 0,
+                  "aria-invalid": resolvedError || void 0,
                   className: cn(
                     typographyVariants({ level: "text" }),
                     "aviala-number-input__input w-full min-w-0 border-0 bg-transparent p-0 text-[var(--input-fg,#343333)] outline-none",
@@ -1572,13 +1794,13 @@ var NumberInput = (0, import_react14.forwardRef)(
           ),
           renderBadgeArea2(rightBadge),
           renderSlotIcon(rightIcon, "aviala-input__slot", "number-input.right-icon"),
-          showControls ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          showControls ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "div",
             {
               className: "aviala-number-input__controls",
               ...spiralDebugId("number-input.controls"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1589,10 +1811,10 @@ var NumberInput = (0, import_react14.forwardRef)(
                     onMouseDown: (event) => event.preventDefault(),
                     onClick: () => applyStep(1),
                     ...spiralDebugId("number-input.step-up"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons4.DirectionArrowUpLight, { level: "text", biggerSize: true, "aria-hidden": true })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons5.DirectionArrowUpLight, { level: "text", biggerSize: true, "aria-hidden": true })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1603,7 +1825,7 @@ var NumberInput = (0, import_react14.forwardRef)(
                     onMouseDown: (event) => event.preventDefault(),
                     onClick: () => applyStep(-1),
                     ...spiralDebugId("number-input.step-down"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons4.DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons5.DirectionArrowDownLight, { level: "text", biggerSize: true, "aria-hidden": true })
                   }
                 )
               ]
@@ -1617,9 +1839,9 @@ var NumberInput = (0, import_react14.forwardRef)(
 NumberInput.displayName = "NumberInput";
 
 // src/components/textarea.tsx
-var import_icons5 = require("@aviala-design/icons");
-var import_react15 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_icons6 = require("@aviala-design/icons");
+var import_react17 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function assignRef2(ref, value) {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -1633,7 +1855,7 @@ function resolveTextareaState(value, defaultValue, focused) {
   if (String(current).length === 0) return "empty";
   return focused ? "typing" : "fill";
 }
-var Textarea = (0, import_react15.forwardRef)(
+var Textarea = (0, import_react17.forwardRef)(
   ({
     className,
     size = "regular",
@@ -1641,7 +1863,7 @@ var Textarea = (0, import_react15.forwardRef)(
     rightIcon,
     showController: showControllerProp,
     maxLength,
-    error = false,
+    error,
     disabled,
     value,
     defaultValue,
@@ -1652,24 +1874,25 @@ var Textarea = (0, import_react15.forwardRef)(
     ...props
   }, ref) => {
     const locale = useLocaleMessages("Textarea");
-    const rootRef = (0, import_react15.useRef)(null);
-    const textareaRef = (0, import_react15.useRef)(null);
-    const [focused, setFocused] = (0, import_react15.useState)(false);
-    const [internalValue, setInternalValue] = (0, import_react15.useState)(() => String(defaultValue ?? ""));
-    const [resizing, setResizing] = (0, import_react15.useState)(false);
+    const rootRef = (0, import_react17.useRef)(null);
+    const textareaRef = (0, import_react17.useRef)(null);
+    const [focused, setFocused] = (0, import_react17.useState)(false);
+    const [internalValue, setInternalValue] = (0, import_react17.useState)(() => String(defaultValue ?? ""));
+    const [resizing, setResizing] = (0, import_react17.useState)(false);
     const showController = showControllerProp ?? maxLength !== void 0;
     const resolvedSize = size ?? "regular";
     const resolvedValue = value !== void 0 ? String(value) : internalValue;
     const displayLength = resolvedValue.length;
     const inputState = resolveTextareaState(resolvedValue, void 0, focused);
-    const setTextareaRef = (0, import_react15.useCallback)(
+    const resolvedError = useResolvedControlError(error);
+    const setTextareaRef = (0, import_react17.useCallback)(
       (node) => {
         textareaRef.current = node;
         assignRef2(ref, node);
       },
       [ref]
     );
-    const handleShellMouseDown = (0, import_react15.useCallback)(
+    const handleShellMouseDown = (0, import_react17.useCallback)(
       (event) => {
         if (disabled) return;
         const target = event.target;
@@ -1681,7 +1904,7 @@ var Textarea = (0, import_react15.forwardRef)(
       },
       [disabled]
     );
-    const handleResizePointerDown = (0, import_react15.useCallback)(
+    const handleResizePointerDown = (0, import_react17.useCallback)(
       (event) => {
         if (disabled || event.button !== 0) return;
         const root = rootRef.current;
@@ -1719,7 +1942,7 @@ var Textarea = (0, import_react15.forwardRef)(
       },
       [disabled]
     );
-    (0, import_react15.useEffect)(() => {
+    (0, import_react17.useEffect)(() => {
       if (!resizing) return;
       const previous = document.body.style.cursor;
       const previousUserSelect = document.body.style.userSelect;
@@ -1730,14 +1953,14 @@ var Textarea = (0, import_react15.forwardRef)(
         document.body.style.userSelect = previousUserSelect;
       };
     }, [resizing]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         ref: rootRef,
         className: cn("aviala-textarea", className),
         "data-size": resolvedSize,
         "data-input-state": inputState,
-        "data-error": error ? "true" : void 0,
+        "data-error": resolvedError ? "true" : void 0,
         "data-has-controller": showController ? "true" : void 0,
         "data-disabled": disabled ? "true" : void 0,
         "data-resizing": resizing ? "true" : void 0,
@@ -1746,7 +1969,7 @@ var Textarea = (0, import_react15.forwardRef)(
         ...spiralDebugId("textarea"),
         children: [
           renderSlotIcon(leftIcon, "aviala-textarea__slot", "textarea.left-icon"),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "aviala-textarea__field", ...spiralDebugId("textarea.field"), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "aviala-textarea__field", ...spiralDebugId("textarea.field"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "textarea",
             {
               ref: setTextareaRef,
@@ -1754,7 +1977,7 @@ var Textarea = (0, import_react15.forwardRef)(
               maxLength,
               value,
               defaultValue,
-              "aria-invalid": error || void 0,
+              "aria-invalid": resolvedError || void 0,
               className: cn("aviala-textarea__input", typographyVariants({ level: "text" })),
               onChange: (event) => {
                 if (value === void 0) {
@@ -1774,8 +1997,8 @@ var Textarea = (0, import_react15.forwardRef)(
             }
           ) }),
           renderSlotIcon(rightIcon, "aviala-textarea__slot", "textarea.right-icon"),
-          showController ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "aviala-textarea__controller", ...spiralDebugId("textarea.controller"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          showController ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "aviala-textarea__controller", ...spiralDebugId("textarea.controller"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "span",
               {
                 className: cn("aviala-textarea__counter", typographyVariants({ level: "caption" })),
@@ -1786,7 +2009,7 @@ var Textarea = (0, import_react15.forwardRef)(
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "button",
               {
                 type: "button",
@@ -1796,7 +2019,7 @@ var Textarea = (0, import_react15.forwardRef)(
                 tabIndex: disabled ? -1 : 0,
                 onPointerDown: handleResizePointerDown,
                 ...spiralDebugId("textarea.resize"),
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SymbolResize, { thickness: "Regular", mode: "default", "aria-hidden": true })
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.SymbolResize, { thickness: "Regular", mode: "default", "aria-hidden": true })
               }
             )
           ] }) : null
@@ -1810,13 +2033,13 @@ Textarea.displayName = "Textarea";
 // src/components/select.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_icons6 = require("@aviala-design/icons");
-var import_react17 = require("react");
+var import_icons7 = require("@aviala-design/icons");
+var import_react19 = require("react");
 
 // src/components/link.tsx
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_react16 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var levelStyles = {
   caption: {
     className: typographyVariants({ level: "caption" }),
@@ -1835,7 +2058,7 @@ function renderIcon2(node, level) {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "span",
     {
       className: cn(
@@ -1846,7 +2069,7 @@ function renderIcon2(node, level) {
     }
   );
 }
-var Link = (0, import_react16.forwardRef)(
+var Link = (0, import_react18.forwardRef)(
   ({
     className,
     level = "caption",
@@ -1876,7 +2099,7 @@ var Link = (0, import_react16.forwardRef)(
       onClick?.(e);
     };
     if (asChild) {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Comp,
         {
           className: sharedClassName,
@@ -1892,7 +2115,7 @@ var Link = (0, import_react16.forwardRef)(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       Comp,
       {
         className: sharedClassName,
@@ -1906,7 +2129,7 @@ var Link = (0, import_react16.forwardRef)(
         onClick: handleClick,
         children: [
           renderIcon2(leftIcon ?? (iconOnly ? rightIcon : void 0), resolvedLevel),
-          !iconOnly && children !== void 0 && children !== null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          !iconOnly && children !== void 0 && children !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "span",
             {
               className: cn(
@@ -1925,39 +2148,39 @@ var Link = (0, import_react16.forwardRef)(
 Link.displayName = "Link";
 
 // src/components/select.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var SELECT_SUB_MENU_CLOSE_DELAY_MS = 250;
 var SELECT_SUB_MENU_EXIT_ANIM_MS = 150;
-var SelectSubMenuContext = (0, import_react17.createContext)(null);
-var SelectDismissContext = (0, import_react17.createContext)(null);
+var SelectSubMenuContext = (0, import_react19.createContext)(null);
+var SelectDismissContext = (0, import_react19.createContext)(null);
 function useSelectSubMenuContext() {
-  const context = (0, import_react17.useContext)(SelectSubMenuContext);
+  const context = (0, import_react19.useContext)(SelectSubMenuContext);
   if (!context) {
     throw new Error("Select sub-menu components must be used within SelectContent.");
   }
   return context;
 }
 function useSelectSubMenuLayer() {
-  const contentId = (0, import_react17.useId)();
-  const [activeSubItemId, setActiveSubItemId] = (0, import_react17.useState)(null);
-  const [exitingSubItemId, setExitingSubItemId] = (0, import_react17.useState)(null);
-  const itemsRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const closeTimerRef = (0, import_react17.useRef)(void 0);
-  const exitTimerRef = (0, import_react17.useRef)(void 0);
-  const pointerRef = (0, import_react17.useRef)({ x: 0, y: 0 });
-  const cancelScheduledClose = (0, import_react17.useCallback)(() => {
+  const contentId = (0, import_react19.useId)();
+  const [activeSubItemId, setActiveSubItemId] = (0, import_react19.useState)(null);
+  const [exitingSubItemId, setExitingSubItemId] = (0, import_react19.useState)(null);
+  const itemsRef = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
+  const closeTimerRef = (0, import_react19.useRef)(void 0);
+  const exitTimerRef = (0, import_react19.useRef)(void 0);
+  const pointerRef = (0, import_react19.useRef)({ x: 0, y: 0 });
+  const cancelScheduledClose = (0, import_react19.useCallback)(() => {
     if (closeTimerRef.current !== void 0) {
       clearTimeout(closeTimerRef.current);
       closeTimerRef.current = void 0;
     }
   }, []);
-  const clearExitTimer = (0, import_react17.useCallback)(() => {
+  const clearExitTimer = (0, import_react19.useCallback)(() => {
     if (exitTimerRef.current !== void 0) {
       clearTimeout(exitTimerRef.current);
       exitTimerRef.current = void 0;
     }
   }, []);
-  const isTargetInSubItemTree = (0, import_react17.useCallback)((id, target) => {
+  const isTargetInSubItemTree = (0, import_react19.useCallback)((id, target) => {
     if (!(target instanceof Node)) return false;
     const registration = itemsRef.current.get(id);
     if (!registration) return false;
@@ -1965,7 +2188,7 @@ function useSelectSubMenuLayer() {
     const content = registration.getContent();
     return (root?.contains(target) ?? false) || (content?.contains(target) ?? false);
   }, []);
-  const findSubItemIdForTarget = (0, import_react17.useCallback)((target, excludeId) => {
+  const findSubItemIdForTarget = (0, import_react19.useCallback)((target, excludeId) => {
     if (!(target instanceof Node)) return null;
     for (const [id, registration] of itemsRef.current) {
       if (id === excludeId) continue;
@@ -1975,7 +2198,7 @@ function useSelectSubMenuLayer() {
     }
     return null;
   }, []);
-  const isPointerOverSubItem = (0, import_react17.useCallback)((id) => {
+  const isPointerOverSubItem = (0, import_react19.useCallback)((id) => {
     const hovered = document.elementFromPoint(pointerRef.current.x, pointerRef.current.y);
     if (!(hovered instanceof Element)) return false;
     const registration = itemsRef.current.get(id);
@@ -1984,7 +2207,7 @@ function useSelectSubMenuLayer() {
     const content = registration.getContent();
     return (root?.contains(hovered) ?? false) || (content?.contains(hovered) ?? false);
   }, []);
-  const findSubItemIdAtPointer = (0, import_react17.useCallback)((excludeId) => {
+  const findSubItemIdAtPointer = (0, import_react19.useCallback)((excludeId) => {
     const hovered = document.elementFromPoint(pointerRef.current.x, pointerRef.current.y);
     if (!(hovered instanceof Element)) return null;
     for (const [id, registration] of itemsRef.current) {
@@ -1995,7 +2218,7 @@ function useSelectSubMenuLayer() {
     }
     return null;
   }, []);
-  const beginExit = (0, import_react17.useCallback)(
+  const beginExit = (0, import_react19.useCallback)(
     (id) => {
       cancelScheduledClose();
       clearExitTimer();
@@ -2008,7 +2231,7 @@ function useSelectSubMenuLayer() {
     },
     [cancelScheduledClose, clearExitTimer]
   );
-  const openSubItem = (0, import_react17.useCallback)(
+  const openSubItem = (0, import_react19.useCallback)(
     (id) => {
       cancelScheduledClose();
       clearExitTimer();
@@ -2017,14 +2240,14 @@ function useSelectSubMenuLayer() {
     },
     [cancelScheduledClose, clearExitTimer]
   );
-  const closeActiveSubItem = (0, import_react17.useCallback)(() => {
+  const closeActiveSubItem = (0, import_react19.useCallback)(() => {
     if (activeSubItemId) {
       beginExit(activeSubItemId);
       return;
     }
     cancelScheduledClose();
   }, [activeSubItemId, beginExit, cancelScheduledClose]);
-  const scheduleCloseSubItem = (0, import_react17.useCallback)(
+  const scheduleCloseSubItem = (0, import_react19.useCallback)(
     (id, relatedTarget) => {
       if (exitingSubItemId === id) return;
       if (isTargetInSubItemTree(id, relatedTarget)) return;
@@ -2055,29 +2278,29 @@ function useSelectSubMenuLayer() {
       openSubItem
     ]
   );
-  const registerSubItem = (0, import_react17.useCallback)((id, registration) => {
+  const registerSubItem = (0, import_react19.useCallback)((id, registration) => {
     itemsRef.current.set(id, registration);
   }, []);
-  const unregisterSubItem = (0, import_react17.useCallback)((id) => {
+  const unregisterSubItem = (0, import_react19.useCallback)((id) => {
     itemsRef.current.delete(id);
     setActiveSubItemId((current) => current === id ? null : current);
     setExitingSubItemId((current) => current === id ? null : current);
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const trackPointer = (event) => {
       pointerRef.current = { x: event.clientX, y: event.clientY };
     };
     document.addEventListener("pointermove", trackPointer, { passive: true });
     return () => document.removeEventListener("pointermove", trackPointer);
   }, []);
-  (0, import_react17.useEffect)(
+  (0, import_react19.useEffect)(
     () => () => {
       cancelScheduledClose();
       clearExitTimer();
     },
     [cancelScheduledClose, clearExitTimer]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const visibleSubItemId = activeSubItemId ?? exitingSubItemId;
     if (!visibleSubItemId) return;
     const keepSelectOpen = (event) => {
@@ -2105,7 +2328,7 @@ function useSelectSubMenuLayer() {
       document.removeEventListener("keydown", handleEscape, true);
     };
   }, [activeSubItemId, beginExit, clearExitTimer, exitingSubItemId]);
-  return (0, import_react17.useMemo)(
+  return (0, import_react19.useMemo)(
     () => ({
       contentId,
       registerSubItem,
@@ -2133,12 +2356,12 @@ function SelectSubMenu(_props) {
 }
 SelectSubMenu.displayName = "SelectSubMenu";
 function isSelectSubMenuElement(child) {
-  return (0, import_react17.isValidElement)(child) && child.type === SelectSubMenu;
+  return (0, import_react19.isValidElement)(child) && child.type === SelectSubMenu;
 }
 function parseSelectSubItemChildren(children) {
   const itemNodes = [];
   let subMenu = null;
-  import_react17.Children.forEach(children, (child) => {
+  import_react19.Children.forEach(children, (child) => {
     if (isSelectSubMenuElement(child)) {
       subMenu = {
         children: child.props.children,
@@ -2165,7 +2388,7 @@ function renderItemIcon(node, iconLevel = "text", debugId) {
     level: iconLevel,
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "span",
     {
       className: cn(
@@ -2180,17 +2403,17 @@ function renderItemIcon(node, iconLevel = "text", debugId) {
 }
 function renderBadgeSlot(node) {
   if (node == null || node === false) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-item__badge", children: (0, import_react17.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { children: node }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-item__badge", children: (0, import_react19.isValidElement)(node) && node.type === Badge ? node : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Badge, { children: node }) });
 }
 function SelectItemFormRadio() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "aviala-select-item__form-radio", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-item__form-radio-surface" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-item__form-radio-indicator" })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "aviala-select-item__form-radio", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-item__form-radio-surface" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-item__form-radio-indicator" })
   ] });
 }
 function SelectItemFormCheckbox() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_icons6.SymbolRight,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-item__form-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_icons7.SymbolRight,
     {
       className: "aviala-select-item__form-checkbox-icon",
       width: 12,
@@ -2200,25 +2423,25 @@ function SelectItemFormCheckbox() {
   ) });
 }
 function SelectItemTrailingRadio() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-radio", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function SelectItemTrailingCheckbox() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectPrimitive.ItemIndicator, { className: "aviala-select-item__trailing-checkbox", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.SymbolRight, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function SelectItemDefaultAvatar() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-item__avatar", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.UsersUserCircle, { level: "text", biggerSize: true, "aria-hidden": true }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-item__avatar", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.UsersUserCircle, { level: "text", biggerSize: true, "aria-hidden": true }) });
 }
 function SelectExpandChevron() {
   const rtl = useRtl();
-  const Icon2 = rtl ? import_icons6.DirectionArrowLeft : import_icons6.DirectionArrowRight;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon2, { level: "text", biggerSize: true, "aria-hidden": true });
+  const Icon2 = rtl ? import_icons7.DirectionArrowLeft : import_icons7.DirectionArrowRight;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon2, { level: "text", biggerSize: true, "aria-hidden": true });
 }
 function renderFunctionSlot(itemFunction, layout, showFunctionIcon, icon) {
   if (!showFunctionIcon) return null;
   if (layout === "checked") return null;
   const functionStyle = icon ? iconSlotCssVarStyle(icon, "--select-item-function-icon-size", "text", true) : void 0;
   if (icon !== void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "span",
       {
         className: "aviala-select-item__function",
@@ -2230,19 +2453,19 @@ function renderFunctionSlot(itemFunction, layout, showFunctionIcon, icon) {
   }
   switch (itemFunction) {
     case "radio":
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItemTrailingRadio, {}) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItemTrailingRadio, {}) });
     case "checkbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItemTrailingCheckbox, {}) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-item__function", ...spiralDebugId("select.content.item.function"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItemTrailingCheckbox, {}) });
     case "simple":
     case "action":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "span",
         {
           className: "aviala-select-item__function",
           style: iconLevelCssVarStyle("text", true, "--select-item-function-icon-size"),
           ...spiralDebugId("select.content.item.function"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectExpandChevron, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectExpandChevron, {})
         }
       );
   }
@@ -2253,24 +2476,24 @@ function Select({
   onOpenChange,
   ...props
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react17.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react19.useState)(defaultOpen);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : internalOpen;
-  const windowBlurCloseRef = (0, import_react17.useRef)(false);
-  const pointerDownCloseRef = (0, import_react17.useRef)(false);
-  const triggerRef = (0, import_react17.useRef)(null);
-  const dismissContextValue = (0, import_react17.useMemo)(
+  const windowBlurCloseRef = (0, import_react19.useRef)(false);
+  const pointerDownCloseRef = (0, import_react19.useRef)(false);
+  const triggerRef = (0, import_react19.useRef)(null);
+  const dismissContextValue = (0, import_react19.useMemo)(
     () => ({ pointerDownCloseRef, triggerRef }),
     []
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const markWindowBlur = () => {
       windowBlurCloseRef.current = true;
     };
     window.addEventListener("blur", markWindowBlur, true);
     return () => window.removeEventListener("blur", markWindowBlur, true);
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!open) return;
     const markPointerDown = () => {
       pointerDownCloseRef.current = true;
@@ -2278,7 +2501,7 @@ function Select({
     document.addEventListener("pointerdown", markPointerDown, true);
     return () => document.removeEventListener("pointerdown", markPointerDown, true);
   }, [open]);
-  const handleOpenChange = (0, import_react17.useCallback)(
+  const handleOpenChange = (0, import_react19.useCallback)(
     (nextOpen) => {
       if (!nextOpen && windowBlurCloseRef.current && !pointerDownCloseRef.current) {
         windowBlurCloseRef.current = false;
@@ -2295,7 +2518,7 @@ function Select({
     },
     [isControlled, onOpenChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectDismissContext.Provider, { value: dismissContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectDismissContext.Provider, { value: dismissContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectPrimitive.Root, { open, onOpenChange: handleOpenChange, ...props }) });
 }
 var SelectValue = SelectPrimitive.Value;
 var SelectGroup = SelectPrimitive.Group;
@@ -2312,17 +2535,17 @@ function getComponentDisplayName(type) {
   return void 0;
 }
 function isSelectGroupElement(child) {
-  if (!(0, import_react17.isValidElement)(child)) return false;
+  if (!(0, import_react19.isValidElement)(child)) return false;
   if (child.type === SelectGroup) return true;
   return getComponentDisplayName(child.type) === "SelectItemGroup";
 }
 function isSelectMenuItemElement(child) {
-  if (!(0, import_react17.isValidElement)(child)) return false;
+  if (!(0, import_react19.isValidElement)(child)) return false;
   const displayName = getComponentDisplayName(child.type);
   return displayName !== void 0 && SELECT_MENU_ITEM_DISPLAY_NAMES.has(displayName);
 }
 function wrapUngroupedSelectItems(children) {
-  const nodes = import_react17.Children.toArray(children);
+  const nodes = import_react19.Children.toArray(children);
   if (nodes.length === 0) return children;
   const wrapped = [];
   let bareItems = [];
@@ -2330,7 +2553,7 @@ function wrapUngroupedSelectItems(children) {
   const flushBareItems = () => {
     if (bareItems.length === 0) return;
     wrapped.push(
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectGroup, { className: "aviala-select-group", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "aviala-select-group__slot", children: bareItems }) }, `__select-auto-group-${autoGroupIndex++}`)
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectGroup, { className: "aviala-select-group", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aviala-select-group__slot", children: bareItems }) }, `__select-auto-group-${autoGroupIndex++}`)
     );
     bareItems = [];
   };
@@ -2348,7 +2571,7 @@ function wrapUngroupedSelectItems(children) {
   flushBareItems();
   return wrapped.length === 1 ? wrapped[0] : wrapped;
 }
-var SelectTrigger = (0, import_react17.forwardRef)(
+var SelectTrigger = (0, import_react19.forwardRef)(
   ({
     className,
     size = "regular",
@@ -2357,11 +2580,12 @@ var SelectTrigger = (0, import_react17.forwardRef)(
     rightIcon,
     expandIcon,
     placeholder,
-    error = false,
+    error,
     ...props
   }, ref) => {
-    const dismissContext = (0, import_react17.useContext)(SelectDismissContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    const dismissContext = (0, import_react19.useContext)(SelectDismissContext);
+    const resolvedError = useResolvedControlError(error);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       SelectPrimitive.Trigger,
       {
         ref: (node) => {
@@ -2377,12 +2601,13 @@ var SelectTrigger = (0, import_react17.forwardRef)(
         className: cn("aviala-select-trigger aviala-focus-ring", className),
         "data-size": size,
         "data-all-round": allRound ? "true" : "false",
-        "data-error": error ? "true" : void 0,
+        "data-error": resolvedError ? "true" : void 0,
+        "aria-invalid": resolvedError || void 0,
         ...spiralDebugId("select.trigger"),
         ...props,
         children: [
           renderSlotIcon(leftIcon, "aviala-select-trigger__slot", "select.trigger.icon-left"),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-trigger__field", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             SelectPrimitive.Value,
             {
               placeholder,
@@ -2391,15 +2616,15 @@ var SelectTrigger = (0, import_react17.forwardRef)(
             }
           ) }),
           renderSlotIcon(rightIcon, "aviala-select-trigger__slot", "select.trigger.icon-right"),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "span",
             {
               className: "aviala-select-trigger__expand",
               "aria-hidden": true,
               style: expandIcon ? iconSlotCssVarStyle(expandIcon, "--input-slot-icon-size", "text", true) : iconLevelCssVarStyle("text", true, "--input-slot-icon-size"),
               ...spiralDebugId("select.trigger.expand"),
-              children: expandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                import_icons6.DirectionArrowDownLight,
+              children: expandIcon ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_icons7.DirectionArrowDownLight,
                 {
                   className: "aviala-select-trigger__expand-icon",
                   level: "text",
@@ -2415,7 +2640,7 @@ var SelectTrigger = (0, import_react17.forwardRef)(
   }
 );
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = (0, import_react17.forwardRef)(
+var SelectContent = (0, import_react19.forwardRef)(
   ({
     className,
     children,
@@ -2426,7 +2651,7 @@ var SelectContent = (0, import_react17.forwardRef)(
     ...props
   }, ref) => {
     const subMenuLayer = useSelectSubMenuLayer();
-    const dismissContext = (0, import_react17.useContext)(SelectDismissContext);
+    const dismissContext = (0, import_react19.useContext)(SelectDismissContext);
     const handleCloseAutoFocus = (event) => {
       onCloseAutoFocus?.(event);
       if (event.defaultPrevented) {
@@ -2441,7 +2666,7 @@ var SelectContent = (0, import_react17.forwardRef)(
         dismissContext.pointerDownCloseRef.current = false;
       }
     };
-    const content = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectSubMenuContext.Provider, { value: subMenuLayer, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectSubMenuContext.Provider, { value: subMenuLayer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       SelectPrimitive.Content,
       {
         ref,
@@ -2451,7 +2676,7 @@ var SelectContent = (0, import_react17.forwardRef)(
         onCloseAutoFocus: handleCloseAutoFocus,
         ...spiralDebugId("select.content"),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           SelectPrimitive.Viewport,
           {
             className: "aviala-select-viewport",
@@ -2462,11 +2687,11 @@ var SelectContent = (0, import_react17.forwardRef)(
       }
     ) });
     if (!portalled) return content;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectPrimitive.Portal, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectPrimitive.Portal, { children: content });
   }
 );
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = (0, import_react17.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var SelectLabel = (0, import_react19.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   SelectPrimitive.Label,
   {
     ref,
@@ -2475,7 +2700,7 @@ var SelectLabel = (0, import_react17.forwardRef)(({ className, ...props }, ref)
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = (0, import_react17.forwardRef)(
+var SelectItem = (0, import_react19.forwardRef)(
   ({
     className,
     children,
@@ -2501,23 +2726,23 @@ var SelectItem = (0, import_react17.forwardRef)(
     const leftIconLevel = isTitle ? "caption" : "text";
     const showTrailingFunction = showFunctionIcon && layout !== "checked" && itemFunction !== "form-radio" && itemFunction !== "form-checkbox";
     const textLevel = isTitle ? "caption" : "text";
-    const textContent = isPeople ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "aviala-select-item__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    const textContent = isPeople ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "aviala-select-item__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         SelectPrimitive.ItemText,
         {
           className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })),
           children
         }
       ),
-      subtitle != null && subtitle !== false ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      subtitle != null && subtitle !== false ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       SelectPrimitive.ItemText,
       {
         className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })),
         children
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       SelectPrimitive.Item,
       {
         ref,
@@ -2527,14 +2752,14 @@ var SelectItem = (0, import_react17.forwardRef)(
         ...spiralDebugId("select.content.item"),
         ...props,
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon(leftIcon, leftIconLevel, "select.content.item.icon-left") : null,
-          isPeople ? avatar ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItemDefaultAvatar, {}) : null,
+          isPeople ? avatar ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItemDefaultAvatar, {}) : null,
           textContent,
           showBadge ? renderBadgeSlot(badge ?? "Text") : null,
           showRightIcon && rightIcon ? renderItemIcon(rightIcon, leftIconLevel, "select.content.item.icon-right") : null,
-          showMoreFunction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
+          showMoreFunction ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
           renderFunctionSlot(itemFunction, layout, showTrailingFunction, icon)
         ]
       }
@@ -2542,7 +2767,7 @@ var SelectItem = (0, import_react17.forwardRef)(
   }
 );
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSubItem = (0, import_react17.forwardRef)(
+var SelectSubItem = (0, import_react19.forwardRef)(
   ({
     className,
     children,
@@ -2578,10 +2803,10 @@ var SelectSubItem = (0, import_react17.forwardRef)(
     if (!subMenu) {
       throw new Error("SelectSubItem requires a SelectSubMenu child.");
     }
-    const subItemId = (0, import_react17.useId)();
-    const subMenuId = (0, import_react17.useId)();
-    const rootRef = (0, import_react17.useRef)(null);
-    const contentRef = (0, import_react17.useRef)(null);
+    const subItemId = (0, import_react19.useId)();
+    const subMenuId = (0, import_react19.useId)();
+    const rootRef = (0, import_react19.useRef)(null);
+    const contentRef = (0, import_react19.useRef)(null);
     const rtl = useRtl();
     const direction = useDirection();
     const expandKey = rtl ? "ArrowLeft" : "ArrowRight";
@@ -2591,18 +2816,18 @@ var SelectSubItem = (0, import_react17.forwardRef)(
     const portalled = portalledProp ?? subMenu.portalled;
     const open = isSubItemOpen(subItemId);
     const exiting = isSubItemExiting(subItemId);
-    (0, import_react17.useEffect)(() => {
+    (0, import_react19.useEffect)(() => {
       registerSubItem(subItemId, {
         getRoot: () => rootRef.current,
         getContent: () => contentRef.current
       });
       return () => unregisterSubItem(subItemId);
     }, [registerSubItem, subItemId, unregisterSubItem]);
-    const handleOpen = (0, import_react17.useCallback)(() => {
+    const handleOpen = (0, import_react19.useCallback)(() => {
       if (disabled) return;
       openSubItem(subItemId);
     }, [disabled, openSubItem, subItemId]);
-    const handlePointerLeave = (0, import_react17.useCallback)(
+    const handlePointerLeave = (0, import_react19.useCallback)(
       (event) => {
         scheduleCloseSubItem(subItemId, event.relatedTarget);
       },
@@ -2614,10 +2839,10 @@ var SelectSubItem = (0, import_react17.forwardRef)(
     const leftIconLevel = isTitle ? "caption" : "text";
     const showTrailingFunction = showFunctionIcon && layout !== "checked" && itemFunction !== "form-radio" && itemFunction !== "form-checkbox";
     const textLevel = isTitle ? "caption" : "text";
-    const textContent = isPeople ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "aviala-select-item__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren }),
-      subtitle != null && subtitle !== false ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren });
+    const textContent = isPeople ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "aviala-select-item__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren }),
+      subtitle != null && subtitle !== false ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("aviala-select-item__subtitle", typographyVariants({ level: "caption" })), children: subtitle }) : null
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("aviala-select-item__text", typographyVariants({ level: textLevel })), children: itemChildren });
     const handleTriggerBlur = (event) => {
       scheduleCloseSubItem(subItemId, event.relatedTarget);
     };
@@ -2635,7 +2860,7 @@ var SelectSubItem = (0, import_react17.forwardRef)(
         closeActiveSubItem();
       }
     };
-    const itemRow = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    const itemRow = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "button",
       {
         type: "button",
@@ -2653,19 +2878,19 @@ var SelectSubItem = (0, import_react17.forwardRef)(
         onBlur: handleTriggerBlur,
         onKeyDown: handleKeyDown,
         children: [
-          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItemFormRadio, {}) : null,
-          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItemFormCheckbox, {}) : null,
+          isFormLeading && itemFunction === "form-radio" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItemFormRadio, {}) : null,
+          isFormLeading && itemFunction === "form-checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItemFormCheckbox, {}) : null,
           showLeftIcon && leftIcon ? renderItemIcon(leftIcon, leftIconLevel) : null,
-          isPeople ? avatar ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItemDefaultAvatar, {}) : null,
+          isPeople ? avatar ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItemDefaultAvatar, {}) : null,
           textContent,
           showBadge ? renderBadgeSlot(badge ?? "Text") : null,
           showRightIcon && rightIcon ? renderItemIcon(rightIcon, leftIconLevel) : null,
-          showMoreFunction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
+          showMoreFunction ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-select-item__more", children: moreAction ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Link, { level: "text", href: "#", onClick: (event) => event.preventDefault(), children: "Text" }) }) : null,
           renderFunctionSlot(itemFunction, layout, showTrailingFunction, icon)
         ]
       }
     );
-    const flyout = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    const flyout = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       PopoverPrimitive.Content,
       {
         ref: contentRef,
@@ -2683,10 +2908,10 @@ var SelectSubItem = (0, import_react17.forwardRef)(
         onPointerEnter: handleOpen,
         onPointerLeave: handlePointerLeave,
         onPointerDownOutside: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "aviala-select-viewport aviala-select-sub-content__viewport", children: wrapUngroupedSelectItems(subMenu.children) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aviala-select-viewport aviala-select-sub-content__viewport", children: wrapUngroupedSelectItems(subMenu.children) })
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverPrimitive.Root, { open, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Root, { open, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         ref: (node) => {
@@ -2701,21 +2926,21 @@ var SelectSubItem = (0, import_react17.forwardRef)(
         onPointerEnter: handleOpen,
         onPointerLeave: handlePointerLeave,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverPrimitive.Anchor, { asChild: true, children: itemRow }),
-          portalled ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverPrimitive.Portal, { children: flyout }) : flyout
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Anchor, { asChild: true, children: itemRow }),
+          portalled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Portal, { children: flyout }) : flyout
         ]
       }
     ) });
   }
 );
 SelectSubItem.displayName = "SelectSubItem";
-var SelectSubItemPeople = (0, import_react17.forwardRef)(
-  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectSubItem, { ref, layout: "people", ...props })
+var SelectSubItemPeople = (0, import_react19.forwardRef)(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectSubItem, { ref, layout: "people", ...props })
 );
 SelectSubItemPeople.displayName = "SelectSubItemPeople";
-var SelectItemPeople = (0, import_react17.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { ref, layout: "people", ...props }));
+var SelectItemPeople = (0, import_react19.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItem, { ref, layout: "people", ...props }));
 SelectItemPeople.displayName = "SelectItemPeople";
-var SelectSeparator = (0, import_react17.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var SelectSeparator = (0, import_react19.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2730,18 +2955,18 @@ function SelectItemGroup({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SelectGroup, { className: cn("aviala-select-group", className), children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectLabel, { children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "aviala-select-group__slot", children }),
-    showDivider ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectSeparator, {}) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(SelectGroup, { className: cn("aviala-select-group", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectLabel, { children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aviala-select-group__slot", children }),
+    showDivider ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectSeparator, {}) : null
   ] });
 }
 
 // src/components/label.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
-var import_react18 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Label2 = (0, import_react18.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var import_react20 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Label2 = (0, import_react20.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   LabelPrimitive.Root,
   {
     ref,
@@ -2757,8 +2982,8 @@ Label2.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/avatar.tsx
 var import_class_variance_authority6 = require("class-variance-authority");
-var import_react19 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var avatarVariants = (0, import_class_variance_authority6.cva)("aviala-avatar", {
   variants: {
     level: {
@@ -2804,8 +3029,8 @@ var AVATAR_ICON_SIZE = {
 function renderAvatarIcon(node, level) {
   if (!node) return null;
   const size = AVATAR_ICON_SIZE[level];
-  if ((0, import_react19.isValidElement)(node) && typeof node.type !== "string") {
-    return (0, import_react19.cloneElement)(
+  if ((0, import_react21.isValidElement)(node) && typeof node.type !== "string") {
+    return (0, import_react21.cloneElement)(
       node,
       {
         width: size,
@@ -2816,7 +3041,7 @@ function renderAvatarIcon(node, level) {
   }
   return node;
 }
-var Avatar = (0, import_react19.forwardRef)(
+var Avatar = (0, import_react21.forwardRef)(
   ({
     className,
     level = "text",
@@ -2831,7 +3056,7 @@ var Avatar = (0, import_react19.forwardRef)(
   }, ref) => {
     const resolvedLevel = level ?? "text";
     const resolvedContent = content ?? "text";
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "span",
       {
         ref,
@@ -2847,8 +3072,8 @@ var Avatar = (0, import_react19.forwardRef)(
         "data-content": resolvedContent,
         "data-line-height-fix": lineHeightFix ? "true" : "false",
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "aviala-avatar__surface", children: [
-          resolvedContent === "picture" && src ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "aviala-avatar__surface", children: [
+          resolvedContent === "picture" && src ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "img",
             {
               className: "aviala-avatar__image",
@@ -2857,8 +3082,8 @@ var Avatar = (0, import_react19.forwardRef)(
               ...imgProps
             }
           ) : null,
-          resolvedContent === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aviala-avatar__icon", "aria-hidden": true, children: renderAvatarIcon(icon, resolvedLevel) }) : null,
-          resolvedContent === "text" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          resolvedContent === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "aviala-avatar__icon", "aria-hidden": true, children: renderAvatarIcon(icon, resolvedLevel) }) : null,
+          resolvedContent === "text" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Typography,
             {
               level: AVATAR_TEXT_LEVEL[resolvedLevel],
@@ -2875,10 +3100,10 @@ var Avatar = (0, import_react19.forwardRef)(
 Avatar.displayName = "Avatar";
 
 // src/components/tag.tsx
-var import_icons7 = require("@aviala-design/icons");
+var import_icons8 = require("@aviala-design/icons");
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_react20 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var tagVariants = (0, import_class_variance_authority7.cva)("aviala-tag", {
   variants: {
     level: {
@@ -2910,12 +3135,12 @@ function resolveLineHeightFix2(level, lineHeightFix) {
   return level === "text" ? "subtitle" : "text";
 }
 function iconSizeForLevel2(level) {
-  return level === "caption" ? (0, import_icons7.resolveIconSizeToken)("text") : (0, import_icons7.resolveIconSizeToken)("text", true);
+  return level === "caption" ? (0, import_icons8.resolveIconSizeToken)("text") : (0, import_icons8.resolveIconSizeToken)("text", true);
 }
 function renderTagIcon(node, level) {
   if (!node) return null;
   const size = iconSizeForLevel2(level);
-  const content = (0, import_react20.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react20.cloneElement)(
+  const content = (0, import_react22.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react22.cloneElement)(
     node,
     {
       width: size,
@@ -2926,22 +3151,22 @@ function renderTagIcon(node, level) {
       )
     }
   ) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "aviala-tag__icon", "aria-hidden": true, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "aviala-tag__icon", "aria-hidden": true, children: content });
 }
-var TagClose = (0, import_react20.forwardRef)(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var TagClose = (0, import_react22.forwardRef)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       ref,
       type: "button",
       className: cn("aviala-tag__close aviala-focus-ring", className),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons7.SymbolWrong, { "aria-hidden": true, width: 14, height: 14 })
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons8.SymbolWrong, { "aria-hidden": true, width: 14, height: 14 })
     }
   )
 );
 TagClose.displayName = "TagClose";
-var Tag = (0, import_react20.forwardRef)(
+var Tag = (0, import_react22.forwardRef)(
   ({
     className,
     children,
@@ -2965,8 +3190,8 @@ var Tag = (0, import_react20.forwardRef)(
     const resolvedContent = content ?? "text";
     const resolvedLhf = resolveLineHeightFix2(resolvedLevel, lineHeightFix);
     const typographyLevel = resolvedLevel;
-    const peopleAvatar = avatar ?? (avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Avatar, { level: "text", content: "picture", src: avatarSrc, lineHeightFix: false }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Avatar, { level: "text", content: "text", lineHeightFix: false, children: avatarText ?? (typeof children === "string" ? children.charAt(0) : "?") }));
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    const peopleAvatar = avatar ?? (avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { level: "text", content: "picture", src: avatarSrc, lineHeightFix: false }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Avatar, { level: "text", content: "text", lineHeightFix: false, children: avatarText ?? (typeof children === "string" ? children.charAt(0) : "?") }));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "span",
       {
         ref,
@@ -2985,8 +3210,8 @@ var Tag = (0, import_react20.forwardRef)(
         "aria-disabled": disabled || void 0,
         ...props,
         children: [
-          resolvedContent === "people" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "aviala-tag__avatar", children: peopleAvatar }) : renderTagIcon(leftIcon, resolvedLevel),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          resolvedContent === "people" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "aviala-tag__avatar", children: peopleAvatar }) : renderTagIcon(leftIcon, resolvedLevel),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Typography,
             {
               level: typographyLevel,
@@ -2996,7 +3221,7 @@ var Tag = (0, import_react20.forwardRef)(
             }
           ),
           resolvedContent === "text" ? renderTagIcon(rightIcon, resolvedLevel) : null,
-          closable ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          closable ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             TagClose,
             {
               "aria-label": resolvedCloseLabel,
@@ -3016,8 +3241,8 @@ Tag.displayName = "Tag";
 
 // src/components/progress.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_react21 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var progressVariants = (0, import_class_variance_authority8.cva)("aviala-progress", {
   variants: {
     type: {
@@ -3044,7 +3269,7 @@ function clampPercent(value) {
   if (!Number.isFinite(value)) return 0;
   return Math.min(100, Math.max(0, value));
 }
-var Progress = (0, import_react21.forwardRef)(
+var Progress = (0, import_react23.forwardRef)(
   ({
     className,
     type = "default",
@@ -3066,7 +3291,7 @@ var Progress = (0, import_react21.forwardRef)(
     const normalizedRadius = center - stroke / 2;
     const circumference = normalizedRadius * 2 * Math.PI;
     const strokeDashoffset = circumference - percent / 100 * circumference;
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         ref,
@@ -3087,15 +3312,15 @@ var Progress = (0, import_react21.forwardRef)(
         "data-size": resolvedSize,
         "data-shape": resolvedShape,
         ...props,
-        children: resolvedShape === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "aviala-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children: resolvedShape === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "aviala-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             "div",
             {
               className: "aviala-progress__fill",
               style: { width: `${percent}%` }
             }
           ) }),
-          showLabel ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          showLabel ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Typography,
             {
               level: "caption",
@@ -3105,7 +3330,7 @@ var Progress = (0, import_react21.forwardRef)(
               children: displayLabel
             }
           ) : null
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "svg",
           {
             className: "aviala-progress__ring",
@@ -3114,7 +3339,7 @@ var Progress = (0, import_react21.forwardRef)(
             viewBox: `0 0 ${diameter} ${diameter}`,
             "aria-hidden": true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "circle",
                 {
                   className: "aviala-progress__ring-track",
@@ -3125,7 +3350,7 @@ var Progress = (0, import_react21.forwardRef)(
                   strokeWidth: stroke
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "circle",
                 {
                   className: "aviala-progress__ring-fill",
@@ -3151,8 +3376,8 @@ Progress.displayName = "Progress";
 
 // src/components/scroll.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_react22 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var scrollVariants = (0, import_class_variance_authority9.cva)("aviala-scroll", {
   variants: {
     size: {
@@ -3169,14 +3394,14 @@ var scrollVariants = (0, import_class_variance_authority9.cva)("aviala-scroll",
     orientation: "vertical"
   }
 });
-var Scroll = (0, import_react22.forwardRef)(
+var Scroll = (0, import_react24.forwardRef)(
   ({
     className,
     size = "default",
     orientation = "vertical",
     children,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       ref,
@@ -3195,93 +3420,12 @@ Scroll.displayName = "Scroll";
 
 // src/components/checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
-var import_react24 = require("react");
-
-// src/components/typeface.tsx
-var import_react23 = require("react");
-var import_jsx_runtime19 = require("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 = (0, import_react23.forwardRef)(
-  ({
-    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__ */ (0, import_jsx_runtime19.jsx)("div", { ref, className: cn("aviala-typeface", className), "data-content": content, ...props, children: layout.map((line, index) => {
-      const value = values[index];
-      if (value === void 0 || value === null || value === false) return null;
-      const lineContent = index === 0 ? primaryContent : index === 1 ? secondaryContent : tertiaryContent;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "aviala-typeface__line", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(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 = (0, import_react23.forwardRef)(
-  ({ title, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    Typeface,
-    {
-      ref,
-      content: "textCaption",
-      primary: title,
-      secondary: description,
-      ...props
-    }
-  )
-);
-TypefacePair.displayName = "TypefacePair";
+var import_react25 = require("react");
 
 // src/components/checkbox-check-icon.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function CheckboxCheckIcon({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "svg",
     {
       className: cn("aviala-checkbox__check-icon", className),
@@ -3291,7 +3435,7 @@ function CheckboxCheckIcon({ className, ...props }) {
       "aria-hidden": true,
       overflow: "visible",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "path",
         {
           className: "aviala-checkbox__check-path",
@@ -3308,14 +3452,14 @@ function CheckboxCheckIcon({ className, ...props }) {
 }
 
 // src/components/checkbox.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Checkbox = (0, import_react24.forwardRef)(({ className, round = false, size = "default", ...props }, ref) => {
-  const [motionReady, setMotionReady] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(() => {
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Checkbox = (0, import_react25.forwardRef)(({ className, round = false, size = "default", ...props }, ref) => {
+  const [motionReady, setMotionReady] = (0, import_react25.useState)(false);
+  (0, import_react25.useEffect)(() => {
     const id = requestAnimationFrame(() => setMotionReady(true));
     return () => cancelAnimationFrame(id);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     CheckboxPrimitive.Root,
     {
       ref,
@@ -3325,10 +3469,10 @@ var Checkbox = (0, import_react24.forwardRef)(({ className, round = false, size
       "data-motion": motionReady ? "ready" : "boot",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CheckboxPrimitive.Indicator, { forceMount: true, className: "aviala-checkbox__indicator", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckboxCheckIcon, { className: "aviala-checkbox__indicator-icon aviala-checkbox__indicator-icon--check" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": true, className: "aviala-checkbox__surface" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CheckboxPrimitive.Indicator, { forceMount: true, className: "aviala-checkbox__indicator", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CheckboxCheckIcon, { className: "aviala-checkbox__indicator-icon aviala-checkbox__indicator-icon--check" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "span",
             {
               "aria-hidden": true,
@@ -3341,8 +3485,8 @@ var Checkbox = (0, import_react24.forwardRef)(({ className, round = false, size
   );
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-var CheckboxGroup = (0, import_react24.forwardRef)(
-  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var CheckboxGroup = (0, import_react25.forwardRef)(
+  ({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       ref,
@@ -3356,7 +3500,7 @@ CheckboxGroup.displayName = "CheckboxGroup";
 function renderIcon3(node) {
   if (!node) return null;
   const icon = 18;
-  const content = (0, import_react24.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react24.cloneElement)(node, {
+  const content = (0, import_react25.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react25.cloneElement)(node, {
     width: icon,
     height: icon,
     className: cn(
@@ -3364,9 +3508,9 @@ function renderIcon3(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "aviala-checkbox-input__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "aviala-checkbox-input__icon", children: content });
 }
-var CheckboxInput = (0, import_react24.forwardRef)(
+var CheckboxInput = (0, import_react25.forwardRef)(
   ({
     className,
     title,
@@ -3375,16 +3519,16 @@ var CheckboxInput = (0, import_react24.forwardRef)(
     disabled,
     id,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "label",
     {
       htmlFor: id,
       className: cn("aviala-checkbox-input", className),
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Checkbox, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, { ref, id, disabled, ...props }),
         renderIcon3(icon),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           TypefacePair,
           {
             className: "aviala-checkbox-input__content min-w-0 flex-1",
@@ -3400,9 +3544,9 @@ CheckboxInput.displayName = "CheckboxInput";
 
 // src/components/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
-var import_react25 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var RadioGroup = (0, import_react25.forwardRef)(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var import_react26 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react26.forwardRef)(({ className, direction = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   RadioGroupPrimitive.Root,
   {
     className: cn("aviala-radio-group", className),
@@ -3412,15 +3556,15 @@ var RadioGroup = (0, import_react25.forwardRef)(({ className, direction = "verti
   }
 ));
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = (0, import_react25.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+var RadioGroupItem = (0, import_react26.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
   RadioGroupPrimitive.Item,
   {
     ref,
     className: cn("aviala-radio aviala-focus-ring", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: "aviala-radio__surface" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: "aviala-radio__indicator" })
     ]
   }
 ));
@@ -3428,7 +3572,7 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 function renderIcon4(node) {
   if (!node) return null;
   const icon = 18;
-  const content = (0, import_react25.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react25.cloneElement)(node, {
+  const content = (0, import_react26.isValidElement)(node) && typeof node.type !== "string" ? (0, import_react26.cloneElement)(node, {
     width: icon,
     height: icon,
     className: cn(
@@ -3436,9 +3580,9 @@ function renderIcon4(node) {
       "shrink-0"
     )
   }) : node;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "aviala-radio-input__icon", children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "aviala-radio-input__icon", children: content });
 }
-var RadioInput = (0, import_react25.forwardRef)(
+var RadioInput = (0, import_react26.forwardRef)(
   ({
     className,
     title,
@@ -3448,7 +3592,7 @@ var RadioInput = (0, import_react25.forwardRef)(
     disabled,
     id,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "label",
     {
       htmlFor: id,
@@ -3456,9 +3600,9 @@ var RadioInput = (0, import_react25.forwardRef)(
       "data-style": variant,
       "data-disabled": disabled ? "true" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RadioGroupItem, { ref, id, disabled, ...props }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadioGroupItem, { ref, id, disabled, ...props }),
         renderIcon4(icon),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           TypefacePair,
           {
             className: "aviala-radio-input__content min-w-0 flex-1",
@@ -3474,9 +3618,9 @@ RadioInput.displayName = "RadioInput";
 
 // src/components/switch.tsx
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
-var import_react26 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Switch = (0, import_react26.forwardRef)(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+var import_react27 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Switch = (0, import_react27.forwardRef)(({ className, size = "regular", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
   SwitchPrimitive.Root,
   {
     className: cn(
@@ -3487,8 +3631,8 @@ var Switch = (0, import_react26.forwardRef)(({ className, size = "regular", ...p
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": true, className: "aviala-switch__surface" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SwitchPrimitive.Thumb, { className: "aviala-switch__thumb" })
     ]
   }
 ));
@@ -3496,13 +3640,13 @@ Switch.displayName = SwitchPrimitive.Root.displayName;
 
 // src/components/anchor.tsx
 var import_react_slot4 = require("@radix-ui/react-slot");
-var import_react27 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Anchor2 = (0, import_react27.forwardRef)(
-  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
+var import_react28 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Anchor2 = (0, import_react28.forwardRef)(
+  ({ className, as: Tag2 = "nav", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Tag2, { ref, className: cn("aviala-anchor", className), ...props })
 );
 Anchor2.displayName = "Anchor";
-var AnchorItem = (0, import_react27.forwardRef)(
+var AnchorItem = (0, import_react28.forwardRef)(
   ({
     className,
     activated = false,
@@ -3512,7 +3656,7 @@ var AnchorItem = (0, import_react27.forwardRef)(
     ...props
   }, ref) => {
     const Comp = asChild ? import_react_slot4.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       Comp,
       {
         ref,
@@ -3521,8 +3665,8 @@ var AnchorItem = (0, import_react27.forwardRef)(
         "data-indent": String(indentLevel),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "aviala-anchor-item__rail", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "aviala-anchor-item__content", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typography, { level: "text", as: "span", className: "aviala-anchor-item__label", children }) })
         ]
       }
     );
@@ -3531,11 +3675,11 @@ var AnchorItem = (0, import_react27.forwardRef)(
 AnchorItem.displayName = "AnchorItem";
 
 // src/components/segmentator.tsx
-var import_react28 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var SegmentatorContext = (0, import_react28.createContext)(null);
+var import_react29 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var SegmentatorContext = (0, import_react29.createContext)(null);
 function useSegmentatorContext() {
-  const ctx = (0, import_react28.useContext)(SegmentatorContext);
+  const ctx = (0, import_react29.useContext)(SegmentatorContext);
   if (!ctx) {
     throw new Error("SegmentatorItem must be used within SegmentatorGroup");
   }
@@ -3547,7 +3691,7 @@ function renderIcon5(node, dimmed) {
     level: "text",
     biggerSize: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "span",
     {
       className: cn(
@@ -3559,10 +3703,10 @@ function renderIcon5(node, dimmed) {
   );
 }
 function useSegmentatorState(value, defaultValue, onValueChange) {
-  const [internal, setInternal] = (0, import_react28.useState)(defaultValue ?? "");
+  const [internal, setInternal] = (0, import_react29.useState)(defaultValue ?? "");
   const isControlled = value !== void 0;
   const current = isControlled ? value : internal;
-  const setValue = (0, import_react28.useCallback)(
+  const setValue = (0, import_react29.useCallback)(
     (next) => {
       if (!isControlled) setInternal(next);
       onValueChange?.(next);
@@ -3755,13 +3899,13 @@ function metricsApproxEqual(a, b, epsilon = 0.5) {
   return Math.abs(a.x - b.x) < epsilon && Math.abs(a.y - b.y) < epsilon && Math.abs(a.width - b.width) < epsilon && Math.abs(a.height - b.height) < epsilon;
 }
 function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
-  const thumbElRef = (0, import_react28.useRef)(null);
-  const metricsRef = (0, import_react28.useRef)(null);
-  const dragStateRef = (0, import_react28.useRef)(dragState);
-  const [thumb, setThumb] = (0, import_react28.useState)(null);
-  const isInitialMount = (0, import_react28.useRef)(true);
+  const thumbElRef = (0, import_react29.useRef)(null);
+  const metricsRef = (0, import_react29.useRef)(null);
+  const dragStateRef = (0, import_react29.useRef)(dragState);
+  const [thumb, setThumb] = (0, import_react29.useState)(null);
+  const isInitialMount = (0, import_react29.useRef)(true);
   dragStateRef.current = dragState;
-  const measureThumb = (0, import_react28.useCallback)(() => {
+  const measureThumb = (0, import_react29.useCallback)(() => {
     const group = groupRef.current;
     if (!group) return null;
     const selected = group.querySelector(
@@ -3770,7 +3914,7 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
     if (!selected) return null;
     return measureItemThumbMetrics(selected, group);
   }, [groupRef]);
-  const syncThumb = (0, import_react28.useCallback)(
+  const syncThumb = (0, import_react29.useCallback)(
     (metrics, instant = false) => {
       metricsRef.current = metrics;
       setThumb(metrics);
@@ -3779,7 +3923,7 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
     },
     []
   );
-  const writeThumbMetrics = (0, import_react28.useCallback)(
+  const writeThumbMetrics = (0, import_react29.useCallback)(
     (metrics, instant = false) => {
       metricsRef.current = metrics;
       const el = thumbElRef.current;
@@ -3787,25 +3931,25 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
     },
     []
   );
-  const writeThumbMetricsLive = (0, import_react28.useCallback)((metrics) => {
+  const writeThumbMetricsLive = (0, import_react29.useCallback)((metrics) => {
     metricsRef.current = metrics;
     const el = thumbElRef.current;
     if (el) applyThumbMetricsLive(el, metrics);
   }, []);
-  const remeasureThumb = (0, import_react28.useCallback)(() => {
+  const remeasureThumb = (0, import_react29.useCallback)(() => {
     if (dragStateRef.current.pressing || dragStateRef.current.active) return;
     const metrics = measureThumb();
     if (!metrics) return;
     syncThumb(metrics, true);
   }, [measureThumb, syncThumb]);
-  const onThumbRef = (0, import_react28.useCallback)((node) => {
+  const onThumbRef = (0, import_react29.useCallback)((node) => {
     thumbElRef.current = node;
     if (node && metricsRef.current && isInitialMount.current) {
       applyThumbMetrics(node, metricsRef.current, true);
       isInitialMount.current = false;
     }
   }, []);
-  (0, import_react28.useLayoutEffect)(() => {
+  (0, import_react29.useLayoutEffect)(() => {
     if (dragState.pressing || dragState.active) return;
     const group = groupRef.current;
     if (group) {
@@ -3849,7 +3993,7 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
     }
     syncThumb(next, false);
   }, [selectedValue, measureThumb, syncThumb, dragState.active, dragState.pressing, groupRef]);
-  (0, import_react28.useLayoutEffect)(() => {
+  (0, import_react29.useLayoutEffect)(() => {
     const group = groupRef.current;
     if (!group) return;
     const updateOverflowAndThumb = () => {
@@ -3881,7 +4025,7 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
       group.removeEventListener("scroll", onScroll);
     };
   }, [groupRef, remeasureThumb]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!layoutKey) return;
     const frame = requestAnimationFrame(() => {
       remeasureThumb();
@@ -3890,7 +4034,7 @@ function useSegmentatorThumb(groupRef, selectedValue, layoutKey, dragState) {
   }, [layoutKey, remeasureThumb]);
   return { thumb, onThumbRef, writeThumbMetrics, writeThumbMetricsLive };
 }
-var SegmentatorGroup = (0, import_react28.forwardRef)(
+var SegmentatorGroup = (0, import_react29.forwardRef)(
   ({
     className,
     value,
@@ -3905,16 +4049,16 @@ var SegmentatorGroup = (0, import_react28.forwardRef)(
     ...props
   }, ref) => {
     const [currentValue, setValue] = useSegmentatorState(value, defaultValue, onValueChange);
-    const groupRef = (0, import_react28.useRef)(null);
+    const groupRef = (0, import_react29.useRef)(null);
     const layoutKey = useThemeLayoutKey();
-    const consumeClickRef = (0, import_react28.useRef)(false);
-    const pointerDragRef = (0, import_react28.useRef)(null);
-    const [dragState, setDragState] = (0, import_react28.useState)({
+    const consumeClickRef = (0, import_react29.useRef)(false);
+    const pointerDragRef = (0, import_react29.useRef)(null);
+    const [dragState, setDragState] = (0, import_react29.useState)({
       pressing: false,
       active: false
     });
     const { thumb, onThumbRef, writeThumbMetrics, writeThumbMetricsLive } = useSegmentatorThumb(groupRef, currentValue, layoutKey, dragState);
-    const resetPointerInteraction = (0, import_react28.useCallback)(() => {
+    const resetPointerInteraction = (0, import_react29.useCallback)(() => {
       pointerDragRef.current?.cleanupWindowListeners?.();
       pointerDragRef.current = null;
       setDragState({ pressing: false, active: false });
@@ -3930,7 +4074,7 @@ var SegmentatorGroup = (0, import_react28.forwardRef)(
         thumbEl.removeAttribute("data-instant");
       }
     }, []);
-    const finishPointerInteraction = (0, import_react28.useCallback)(
+    const finishPointerInteraction = (0, import_react29.useCallback)(
       (pointerId) => {
         const drag = pointerDragRef.current;
         const group = groupRef.current;
@@ -3954,7 +4098,7 @@ var SegmentatorGroup = (0, import_react28.forwardRef)(
       },
       [currentValue, resetPointerInteraction, setValue]
     );
-    const updateDragThumb = (0, import_react28.useCallback)(
+    const updateDragThumb = (0, import_react29.useCallback)(
       (clientX, clientY) => {
         const group = groupRef.current;
         const drag = pointerDragRef.current;
@@ -4000,7 +4144,7 @@ var SegmentatorGroup = (0, import_react28.forwardRef)(
       },
       [direction, writeThumbMetrics, writeThumbMetricsLive]
     );
-    const attachWindowDragListeners = (0, import_react28.useCallback)(
+    const attachWindowDragListeners = (0, import_react29.useCallback)(
       (pointerId) => {
         const onPointerMove = (event) => {
           const drag = pointerDragRef.current;
@@ -4031,7 +4175,7 @@ var SegmentatorGroup = (0, import_react28.forwardRef)(
       },
       [direction, finishPointerInteraction, updateDragThumb]
     );
-    const finishPointerDrag = (0, import_react28.useCallback)(
+    const finishPointerDrag = (0, import_react29.useCallback)(
       (event) => {
         finishPointerInteraction(event.pointerId);
       },
@@ -4066,10 +4210,10 @@ var SegmentatorGroup = (0, import_react28.forwardRef)(
       group.setPointerCapture(event.pointerId);
     };
     const thumbStyle = thumb ? buildThumbStyle() : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       SegmentatorContext.Provider,
       {
-        value: (0, import_react28.useMemo)(
+        value: (0, import_react29.useMemo)(
           () => ({
             value: currentValue,
             onValueChange: setValue,
@@ -4081,7 +4225,7 @@ var SegmentatorGroup = (0, import_react28.forwardRef)(
           }),
           [currentValue, setValue, mode, direction, allRound, disabled]
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "div",
           {
             ref: (node) => {
@@ -4104,7 +4248,7 @@ var SegmentatorGroup = (0, import_react28.forwardRef)(
             onLostPointerCapture: finishPointerDrag,
             children: [
               children,
-              thumb && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              thumb && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "span",
                 {
                   ref: onThumbRef,
@@ -4124,7 +4268,7 @@ var SegmentatorGroup = (0, import_react28.forwardRef)(
   }
 );
 SegmentatorGroup.displayName = "SegmentatorGroup";
-var SegmentatorItem = (0, import_react28.forwardRef)(
+var SegmentatorItem = (0, import_react29.forwardRef)(
   ({
     className,
     value,
@@ -4142,7 +4286,7 @@ var SegmentatorItem = (0, import_react28.forwardRef)(
     const isDisabled = disabled || ctx.disabled;
     const dimmed = isDisabled;
     const icon = iconOnly ? leftIcon ?? rightIcon : leftIcon;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "button",
       {
         ref,
@@ -4164,9 +4308,9 @@ var SegmentatorItem = (0, import_react28.forwardRef)(
           onClick?.(e);
         },
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "aviala-segmentator-item__content", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "aviala-segmentator-item__content", children: [
           renderIcon5(icon, dimmed && !!icon),
-          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "span",
             {
               className: cn(
@@ -4185,135 +4329,6 @@ var SegmentatorItem = (0, import_react28.forwardRef)(
 );
 SegmentatorItem.displayName = "SegmentatorItem";
 
-// src/components/form-field.tsx
-var import_icons8 = require("@aviala-design/icons");
-var import_react29 = require("react");
-var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var FormFieldLayout = (0, import_react29.forwardRef)(
-  ({
-    className,
-    label,
-    htmlFor,
-    description,
-    error,
-    info,
-    alert,
-    required,
-    direction = "vertical",
-    children,
-    ...props
-  }, ref) => {
-    const reactId = (0, import_react29.useId)();
-    const labelId = `${reactId}-label`;
-    const hasLabel = label != null && label !== "";
-    const labelNode = hasLabel || description ? htmlFor ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { htmlFor, className: "aviala-form__label aviala-form__label--control", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      Typeface,
-      {
-        id: labelId,
-        content: "textCaption",
-        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-          label,
-          required ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
-        ] }) : void 0,
-        secondary: description
-      }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      Typeface,
-      {
-        id: labelId,
-        className: "aviala-form__label",
-        content: "textCaption",
-        primary: hasLabel ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-          label,
-          required ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "aviala-form__required", "aria-hidden": true, children: "*" }) : null
-        ] }) : void 0,
-        secondary: description
-      }
-    ) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      "div",
-      {
-        ref,
-        className: cn("aviala-form", className),
-        "data-direction": direction,
-        "aria-labelledby": hasLabel ? labelId : void 0,
-        ...props,
-        children: [
-          labelNode,
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "aviala-form__content", children: [
-            children,
-            error ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "aviala-form__message aviala-form__message--error", role: "alert", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                import_icons8.SymbolWrongCircle,
-                {
-                  className: "aviala-form__message-icon",
-                  width: 14,
-                  height: 14,
-                  "aria-hidden": true
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: error })
-            ] }) : null,
-            info ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "aviala-form__message aviala-form__message--info", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                import_icons8.SymbolInformationCircle,
-                {
-                  className: "aviala-form__message-icon",
-                  width: 14,
-                  height: 14,
-                  "aria-hidden": true
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typography, { level: "caption", as: "p", className: "aviala-form__message-text", children: info })
-            ] }) : null,
-            alert ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "aviala-form__alert", children: alert }) : null
-          ] })
-        ]
-      }
-    );
-  }
-);
-FormFieldLayout.displayName = "FormFieldLayout";
-var FormFieldControlled = (0, import_react29.forwardRef)(
-  ({
-    control,
-    name,
-    rules,
-    defaultValue,
-    shouldUnregister,
-    disabled,
-    render,
-    error,
-    ...layoutProps
-  }, ref) => {
-    const id = (0, import_react29.useId)();
-    const { field, fieldState, formState } = (0, import_react_hook_form.useController)({
-      name,
-      control,
-      rules,
-      defaultValue,
-      shouldUnregister,
-      disabled
-    });
-    const message = error !== void 0 ? error : fieldState.error?.message ?? null;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormFieldLayout, { ref, ...layoutProps, htmlFor: id, error: message, children: render({ field, fieldState, formState, id }) });
-  }
-);
-FormFieldControlled.displayName = "FormFieldControlled";
-function isControlledProps(props) {
-  return "render" in props && typeof props.render === "function" && "name" in props;
-}
-var FormFieldRoot = (0, import_react29.forwardRef)((props, ref) => {
-  if (isControlledProps(props)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormFieldControlled, { ref, ...props });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormFieldLayout, { ref, ...props });
-});
-var FormField = FormFieldRoot;
-FormField.displayName = "FormField";
-var Form = import_react_hook_form.FormProvider;
-
 // src/components/input-group.tsx
 var import_react30 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -5658,7 +5673,7 @@ var CascaderTrigger = (0, import_react41.forwardRef)(
     rightIcon,
     expandIcon,
     placeholder,
-    error = false,
+    error,
     displayValue,
     separator = "/",
     disabled: disabledProp,
@@ -5669,6 +5684,7 @@ var CascaderTrigger = (0, import_react41.forwardRef)(
     const { open, disabled: disabledContext, size: sizeContext, selectedPath, getOptionAtPath } = useCascaderContext();
     const size = sizeProp ?? sizeContext;
     const disabled = disabledProp ?? disabledContext;
+    const resolvedError = useResolvedControlError(error);
     const labels = selectedPath.map((_, index) => getOptionAtPath(selectedPath.slice(0, index + 1))?.label).filter((label) => label != null && label !== false);
     const resolvedDisplay = displayValue ?? (labels.length > 0 ? labels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { children: [
       index > 0 ? separator : null,
@@ -5684,7 +5700,7 @@ var CascaderTrigger = (0, import_react41.forwardRef)(
         "data-size": size,
         "data-all-round": allRound ? "true" : "false",
         "data-state": open ? "open" : "closed",
-        "data-error": error ? "true" : void 0,
+        "data-error": resolvedError ? "true" : void 0,
         disabled,
         "aria-expanded": open,
         "aria-haspopup": "listbox",
@@ -7206,7 +7222,7 @@ var DatePickerTrigger = (0, import_react45.forwardRef)(
     rightIcon,
     placeholder,
     rangePlaceholder,
-    error = false,
+    error,
     displayValue,
     rangeSeparator = " - ",
     disabled: disabledProp,
@@ -7231,6 +7247,7 @@ var DatePickerTrigger = (0, import_react45.forwardRef)(
     } = useDatePickerContext();
     const size = sizeProp ?? sizeContext;
     const disabled = disabledProp ?? disabledContext;
+    const resolvedError = useResolvedControlError(error);
     const resolvedPlaceholder = placeholder ?? locale.placeholder;
     const resolvedRangePlaceholder = rangePlaceholder ?? locale.rangePlaceholder;
     const inputRef = (0, import_react45.useRef)(null);
@@ -7285,7 +7302,7 @@ var DatePickerTrigger = (0, import_react45.forwardRef)(
           "data-size": size,
           "data-all-round": allRound ? "true" : "false",
           "data-state": open ? "open" : "closed",
-          "data-error": error ? "true" : void 0,
+          "data-error": resolvedError ? "true" : void 0,
           disabled,
           "aria-expanded": open,
           "aria-haspopup": "dialog",
@@ -7317,7 +7334,7 @@ var DatePickerTrigger = (0, import_react45.forwardRef)(
         "data-size": size,
         "data-all-round": allRound ? "true" : "false",
         "data-state": open ? "open" : "closed",
-        "data-error": error ? "true" : void 0,
+        "data-error": resolvedError ? "true" : void 0,
         "data-disabled": disabled ? "true" : void 0,
         onMouseDown: (event) => {
           if (disabled) return;
@@ -8098,7 +8115,7 @@ var TimePickerTrigger = (0, import_react47.forwardRef)(
     leftIcon,
     rightIcon,
     placeholder,
-    error = false,
+    error,
     displayValue,
     disabled: disabledProp,
     ...props
@@ -8107,6 +8124,7 @@ var TimePickerTrigger = (0, import_react47.forwardRef)(
     const { open, disabled: disabledContext, size: sizeContext, value } = useTimePickerContext();
     const size = sizeProp ?? sizeContext;
     const disabled = disabledProp ?? disabledContext;
+    const resolvedError = useResolvedControlError(error);
     const resolvedPlaceholder = placeholder ?? locale.placeholder;
     const formatted = displayValue !== void 0 ? displayValue : formatTimeValue(value.hours, value.minutes);
     const hasValue = formatted != null && formatted !== "";
@@ -8119,7 +8137,7 @@ var TimePickerTrigger = (0, import_react47.forwardRef)(
         "data-size": size,
         "data-all-round": allRound ? "true" : "false",
         "data-state": open ? "open" : "closed",
-        "data-error": error ? "true" : void 0,
+        "data-error": resolvedError ? "true" : void 0,
         disabled,
         "aria-expanded": open,
         "aria-haspopup": "dialog",
@@ -12073,6 +12091,7 @@ TableCell.displayName = "TableCell";
   useDirection,
   useLocale,
   useLocaleMessages,
+  useResolvedControlError,
   useRtl,
   useTheme,
   useThemeLayoutKey,