@keboola/design 5.0.0 → 6.0.0

package/dist/index.cjs

@@ -1470,11 +1470,12 @@ var variants = classVarianceAuthority.cva(
     "tw-items-center",
     "tw-justify-center",
     "tw-gap-2",
-    // text
+    // text — chrome weight/tracking are brand-overridable tokens
+    // (`--font-weight-medium` / `--letter-spacing-chrome`); casing stays `tw-uppercase`.
     "tw-text-xs",
     "tw-leading-5",
     "tw-font-medium",
-    "tw-tracking-[1px]",
+    "tw-tracking-chrome",
     "tw-uppercase",
     // border — legacy (non-argo) chrome uses a fixed radius, not the brand token.
     "tw-rounded",
@@ -9043,11 +9044,23 @@ var inputGroupVariants = classVarianceAuthority.cva(
         off: ["has-[:is(input,textarea):focus]:!tw-ring-0"]
       },
       variant: {
-        primary: ["tw-bg-white", "has-[:is(input,textarea):disabled]:tw-opacity-40"],
+        primary: [
+          "tw-bg-white",
+          "has-[:is(input,textarea):disabled]:tw-opacity-40",
+          // aria-invalid on the control surfaces the error chrome without a `state` prop — the
+          // accessible path (mirrors the `state="error"` legacy tokens). Higher specificity than
+          // the default focus selector, so it wins without `!important`.
+          "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-error-500",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-border-error-500",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-ring-error-200"
+        ],
         secondary: [
           "tw-bg-neutral-100",
           "tw-border-neutral-100",
-          "has-[:is(input,textarea):disabled]:tw-opacity-40"
+          "has-[:is(input,textarea):disabled]:tw-opacity-40",
+          "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-error-500",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-border-error-500",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-ring-error-200"
         ],
         argo: [
           // argo follows the brand radius token (overrides the static base)
@@ -9058,7 +9071,12 @@ var inputGroupVariants = classVarianceAuthority.cva(
           "tw-text-foreground",
           "has-[:is(input,textarea):disabled]:tw-opacity-50",
           // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
-          "has-[:is(input,textarea)[readonly]:focus]:tw-border-neutral-150"
+          "has-[:is(input,textarea)[readonly]:focus]:tw-border-neutral-150",
+          // aria-invalid on the control surfaces the error chrome without a `state` prop — the
+          // accessible path (uses the themeable `destructive` status token).
+          "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-destructive",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-border-destructive",
+          "has-[:is(input,textarea)[aria-invalid=true]:focus]:tw-ring-destructive/20"
         ]
       },
       sizing: {
@@ -10013,23 +10031,23 @@ var TimePicker = ({
     )
   ] });
 };
-var Optional = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-text-muted-foreground", className), children: "(optional)" });
-var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RLabel__namespace.Root,
-    {
-      ...rest,
-      id: id?.toString(),
-      htmlFor: htmlFor?.toString(),
-      className: cn(
-        "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
-        className
-      ),
-      children
-    }
-  );
-};
+var Optional = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-muted-foreground", className), children: "(optional)" });
+var Required = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-primary", className), children: "*" });
+var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  RLabel__namespace.Root,
+  {
+    ...rest,
+    id: id?.toString(),
+    htmlFor: htmlFor?.toString(),
+    className: cn(
+      "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
+      className
+    ),
+    children
+  }
+);
 Label2.Optional = Optional;
+Label2.Required = Required;
 var FieldBoxDescription = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
@@ -11217,12 +11235,29 @@ var variants4 = classVarianceAuthority.cva(
     ],
     variants: {
       variant: {
-        primary: ["tw-bg-white", "disabled:tw-opacity-40", "aria-disabled:tw-opacity-40"],
+        primary: [
+          "tw-bg-white",
+          "disabled:tw-opacity-40",
+          "aria-disabled:tw-opacity-40",
+          // aria-invalid on the trigger surfaces the error chrome without a `state` prop — the
+          // accessible path (mirrors the `state="error"` legacy tokens). The extra attribute
+          // selector outranks the default focus/open state, so it wins without `!important`.
+          "aria-[invalid=true]:tw-border-error-500",
+          "aria-[invalid=true]:focus:tw-border-error-500",
+          "aria-[invalid=true]:focus:tw-ring-error-200",
+          "aria-[invalid=true]:data-[state=open]:tw-border-error-500",
+          "aria-[invalid=true]:data-[state=open]:tw-ring-error-200"
+        ],
         secondary: [
           "tw-bg-neutral-100",
           "tw-border-neutral-100",
           "disabled:tw-opacity-40",
-          "aria-disabled:tw-opacity-40"
+          "aria-disabled:tw-opacity-40",
+          "aria-[invalid=true]:tw-border-error-500",
+          "aria-[invalid=true]:focus:tw-border-error-500",
+          "aria-[invalid=true]:focus:tw-ring-error-200",
+          "aria-[invalid=true]:data-[state=open]:tw-border-error-500",
+          "aria-[invalid=true]:data-[state=open]:tw-ring-error-200"
         ],
         argo: [
           // muted filled input surface — gray, distinct from white containers; not the app-background token
@@ -11232,7 +11267,14 @@ var variants4 = classVarianceAuthority.cva(
           "tw-rounded-[var(--radius-lg,0.25rem)]",
           "tw-text-foreground",
           "disabled:tw-opacity-50",
-          "aria-disabled:tw-opacity-50"
+          "aria-disabled:tw-opacity-50",
+          // aria-invalid on the trigger surfaces the error chrome without a `state` prop — the
+          // accessible path (uses the themeable `destructive` status token).
+          "aria-[invalid=true]:tw-border-destructive",
+          "aria-[invalid=true]:focus:tw-border-destructive",
+          "aria-[invalid=true]:focus:tw-ring-destructive/20",
+          "aria-[invalid=true]:data-[state=open]:tw-border-destructive",
+          "aria-[invalid=true]:data-[state=open]:tw-ring-destructive/20"
         ]
       },
       sizing: {
@@ -11284,7 +11326,7 @@ var SelectTrigger = ({
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder }),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-5 tw-text-muted-foreground" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-4 tw-text-muted-foreground" }) })
       ]
     }
   );
@@ -11609,12 +11651,14 @@ var badgeRootVariants = classVarianceAuthority.cva(
     "tw-h-fit",
     "tw-shrink-0",
     "tw-overflow-hidden",
-    // text
+    // text — chrome weight/tracking are brand-overridable tokens
+    // (`--font-weight-medium` / `--letter-spacing-chrome`); casing lives on the
+    // `default` variant below via `tw-uppercase`.
     "tw-whitespace-pre-wrap",
     "tw-break-normal",
     "tw-text-xs",
     "tw-font-medium",
-    "tw-tracking-[1px]",
+    "tw-tracking-chrome",
     "tw-text-center",
     "tw-underline",
     // content
@@ -13061,18 +13105,12 @@ var TimeInput = ({
     }
   );
 };
-var InputOtpVariantContext = React26.createContext({
-  sizing: "md",
-  state: "default"
-});
-var useInputOtpVariant = () => React26.use(InputOtpVariantContext);
-var useInputOtpRenderContext = () => React26.use(inputOtp.OTPInputContext);
-var InputOtpGroup = ({
+var OtpInputGroup = ({
   ref,
   className,
   ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("tw-flex tw-items-center tw-gap-2", className), ...props });
-var InputOtpSeparator = ({
+var OtpInputSeparator = ({
   ref,
   children,
   className,
@@ -13088,61 +13126,46 @@ var InputOtpSeparator = ({
     children: children ?? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Minus, { className: "tw-size-4" })
   }
 );
-var slotVariants = classVarianceAuthority.cva(
-  [
-    "tw-relative",
-    "tw-flex",
-    "tw-items-center",
-    "tw-justify-center",
-    "tw-border",
-    "tw-border-input",
-    // muted filled input surface — gray, distinct from white containers; not the app-background token
-    "tw-bg-muted",
-    "tw-text-foreground",
-    "tw-font-medium",
-    "tw-tabular-nums",
-    "tw-rounded-lg",
-    "tw-transition",
-    "tw-outline-none",
-    // active slot sits above its neighbours so its ring isn't clipped
-    "data-[active=true]:tw-z-10",
-    "data-[active=true]:tw-border-primary",
-    "data-[active=true]:tw-ring-2",
-    "data-[active=true]:tw-ring-ring/50"
-  ],
-  {
-    defaultVariants: {
-      sizing: "md",
-      state: "default"
-    },
-    variants: {
-      sizing: {
-        sm: ["tw-h-8", "tw-w-8", "tw-text-sm"],
-        md: ["tw-h-9", "tw-w-9", "tw-text-base"],
-        lg: ["tw-h-10", "tw-w-10", "tw-text-lg"]
-      },
-      // `!` forces the border colour over the base `tw-border-input` once tailwind-merge dedupes.
-      // Matches the pattern InputGroup uses for its argo error state.
-      state: {
-        default: [],
-        error: [
-          "!tw-border-destructive",
-          "tw-bg-destructive/5",
-          "data-[active=true]:!tw-border-destructive",
-          "data-[active=true]:tw-ring-destructive/40"
-        ]
-      }
-    }
-  }
-);
-var InputOtpSlot = ({
+var slotClassName = [
+  // layout
+  "tw-relative",
+  "tw-flex",
+  "tw-items-center",
+  "tw-justify-center",
+  "tw-font-medium",
+  "tw-tabular-nums",
+  "tw-outline-none",
+  "tw-transition",
+  // resting chrome — always-visible input border on a muted fill (matches InputGroup)
+  "tw-border",
+  "tw-border-solid",
+  "tw-border-input",
+  "tw-bg-muted",
+  "tw-text-foreground",
+  "tw-rounded-[var(--radius-lg,0.25rem)]",
+  // focus — the active slot mirrors InputGroup's argo focus ring; z-10 so the ring isn't clipped
+  "data-[active=true]:tw-z-10",
+  "data-[active=true]:tw-border-primary",
+  "data-[active=true]:tw-ring-4",
+  "data-[active=true]:tw-ring-ring/50",
+  // size — from `data-size` on the group/otp container
+  "group-data-[size=sm]/otp:tw-h-8 group-data-[size=sm]/otp:tw-w-8 group-data-[size=sm]/otp:tw-text-sm",
+  "group-data-[size=md]/otp:tw-h-9 group-data-[size=md]/otp:tw-w-9 group-data-[size=md]/otp:tw-text-base",
+  "group-data-[size=lg]/otp:tw-h-10 group-data-[size=lg]/otp:tw-w-10 group-data-[size=lg]/otp:tw-text-lg",
+  // error — from `aria-invalid` on the OTP input (mirrors InputGroup argo error chrome). `!` beats
+  // the base/active border once tailwind-merge dedupes.
+  "group-has-[input[aria-invalid=true]]/otp:!tw-border-destructive",
+  "group-has-[input[aria-invalid=true]]/otp:data-[active=true]:!tw-border-destructive",
+  "group-has-[input[aria-invalid=true]]/otp:data-[active=true]:tw-ring-destructive/20"
+];
+var OtpInputSlot = ({
   ref,
   index,
   className,
   ...props
 }) => {
-  const { slots } = useInputOtpRenderContext();
-  const { sizing, state } = useInputOtpVariant();
+  const { slots } = React26.use(inputOtp.OTPInputContext);
+  if (!slots) throw new Error("<OtpInput.Slot> must be rendered inside <OtpInput>.");
   const slot = slots[index];
   const char = slot?.char ?? null;
   const isActive = slot?.isActive ?? false;
@@ -13153,7 +13176,7 @@ var InputOtpSlot = ({
       ref,
       "data-active": isActive || void 0,
       "data-slot-index": index,
-      className: cn(slotVariants({ sizing, state }), className),
+      className: cn(slotClassName, className),
       ...props,
       children: [
         char,
@@ -13172,19 +13195,19 @@ var InputOtpSlot = ({
 var Root23 = ({
   ref,
   sizing = "md",
-  state = "default",
   pattern = inputOtp.REGEXP_ONLY_DIGITS,
   containerClassName,
   className,
   children,
+  "aria-invalid": ariaInvalid,
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(InputOtpVariantContext, { value: { sizing, state }, children: /* @__PURE__ */ jsxRuntime.jsx(
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-group/otp tw-w-fit", "data-size": sizing, children: /* @__PURE__ */ jsxRuntime.jsx(
   inputOtp.OTPInput,
   {
     ...rest,
     ref,
     pattern,
-    "aria-invalid": state === "error" || void 0,
+    "aria-invalid": ariaInvalid,
     containerClassName: cn(
       "tw-flex tw-items-center tw-gap-2 has-[:disabled]:tw-opacity-50",
       containerClassName
@@ -13193,20 +13216,11 @@ var Root23 = ({
     children
   }
 ) });
-var InputOtp = Object.assign(Root23, {
-  Group: InputOtpGroup,
-  Slot: InputOtpSlot,
-  Separator: InputOtpSeparator
+var OtpInput = Object.assign(Root23, {
+  Group: OtpInputGroup,
+  Slot: OtpInputSlot,
+  Separator: OtpInputSeparator
 });
-
-// src/blocks/InputOtp/index.ts
-var useInputOtpContext = () => {
-  const ctx = React26.use(inputOtp.OTPInputContext);
-  if (!ctx.slots) {
-    throw new Error("useInputOtpContext must be used inside <InputOtp>.");
-  }
-  return ctx;
-};
 var SearchInput = ({
   ref,
   // group props
@@ -15180,6 +15194,18 @@ var FormGroupColorInput = ({
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(ColorInput, { state, ...props, ref });
 };
+var toMessage = (entry) => typeof entry === "string" ? entry : entry?.message;
+var FormGroupError = ({ children, className, errors, ...rest }) => {
+  const content = React26.useMemo(() => {
+    if (children) return children;
+    const messages = (errors ?? []).map(toMessage).filter((message2) => !!message2);
+    if (messages.length === 0) return null;
+    if (messages.length === 1) return messages[0];
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "tw-m-0 tw-flex tw-list-disc tw-flex-col tw-gap-0 tw-pl-4", children: messages.map((message2, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: message2 }, index)) });
+  }, [children, errors]);
+  if (!content) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, role: "alert", className: cn("tw-m-0 tw-text-xs tw-text-destructive", className), children: content });
+};
 var helpVariants = classVarianceAuthority.cva(["tw-m-0", "tw-text-xs"], {
   defaultVariants: {
     state: "default"
@@ -15187,18 +15213,17 @@ var helpVariants = classVarianceAuthority.cva(["tw-m-0", "tw-text-xs"], {
   variants: {
     state: {
       default: ["tw-text-muted-foreground"],
-      error: ["tw-text-destructive"],
       warning: ["tw-text-warning"]
     }
   }
 });
-var HelpBlock = ({ children, className, state = "default", testId }) => {
+var HelpBlock = ({ children, className, state = "default", ...rest }) => {
   if (!children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": testId, className: helpVariants({ state, className }), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...rest, className: helpVariants({ state, className }), children });
 };
 var FormGroupHelp = ({ children, ...rest }) => {
   const formGroupContext = useFormGroupContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(HelpBlock, { state: formGroupContext.state, ...rest, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(HelpBlock, { state: formGroupContext.state === "warning" ? "warning" : "default", ...rest, children });
 };
 var FormGroupNumberInput = ({
   ref,
@@ -15218,10 +15243,11 @@ var FormGroupTextInput = ({
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(TextInput, { state, ...props, ref });
 };
-var FormGroup = ({ className, children, state, testId }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": testId, className: cn("tw-flex tw-flex-col tw-gap-1", className), children }) });
+var FormGroup = ({ className, children, state, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: cn("tw-flex tw-flex-col tw-gap-1", className), children }) });
 };
 FormGroup.Help = FormGroupHelp;
+FormGroup.Error = FormGroupError;
 FormGroup.TextInput = FormGroupTextInput;
 FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
@@ -15450,7 +15476,7 @@ var ANIMATION_CLASS_NAME = cn(
   "tw-relative",
   "tw-overflow-hidden",
   "tw-pointer-events-none",
-  "tw-bg-muted",
+  "tw-bg-skeleton",
   // before
   'before:tw-content-[""]',
   "before:tw-opacity-100",
@@ -18444,6 +18470,11 @@ var tokensToCssVars = ({
   vars.set("--font-sans", typography?.fontFamily?.trim() || void 0);
   vars.set("--font-display", typography?.fontDisplay?.trim() || void 0);
   vars.set("--font-mono", typography?.fontMono?.trim() || void 0);
+  vars.set("--font-weight-normal", typography?.weight?.normal);
+  vars.set("--font-weight-medium", typography?.weight?.medium);
+  vars.set("--font-weight-semibold", typography?.weight?.semibold);
+  vars.set("--font-weight-bold", typography?.weight?.bold);
+  vars.set("--letter-spacing-chrome", typography?.letterSpacing?.chrome);
   vars.set("--radius-sm", radii?.sm);
   vars.set("--radius-md", radii?.md);
   vars.set("--radius-lg", radii?.lg);
@@ -20942,13 +20973,29 @@ var BreadcrumbDropdownGroup = ({
     [parent, labelMatched, registerChild]
   );
   const isExpanded = !collapsible || expanded || filtering;
+  const isEmpty = React26.Children.count(children) === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn("tw-flex tw-flex-col", className),
       style: visible ? void 0 : { display: "none" },
       children: [
-        collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(
+        collapsible && isEmpty ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            "aria-disabled": true,
+            className: cn(
+              headerClass,
+              "tw-text-muted-foreground",
+              // Fade just the leading chevron lighter than the label text.
+              "[&>svg:first-child]:tw-opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronRight, {}),
+              label
+            ]
+          }
+        ) : collapsible && !isEmpty ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -20961,7 +21008,31 @@ var BreadcrumbDropdownGroup = ({
             ]
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: headerClass, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbDropdownContext, { value: childContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbDropdownContext, { value: childContext, children: collapsible && !isEmpty ? (
+          // Animated expand / collapse via a CSS grid-rows transition (0fr ↔ 1fr). The children stay
+          // mounted while collapsed so the filter registry keeps receiving their visibility; `inert`
+          // + `aria-hidden` take the collapsed content out of the a11y tree and tab order. An active
+          // filter query force-expands (`isExpanded` includes `filtering`).
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "tw-grid tw-transition-[grid-template-rows] tw-duration-200 tw-ease-out",
+                "motion-reduce:tw-transition-none",
+                isExpanded ? "tw-grid-rows-[1fr]" : "tw-grid-rows-[0fr]"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "tw-overflow-hidden",
+                  inert: !isExpanded,
+                  "aria-hidden": isExpanded ? void 0 : true,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-pl-6", children })
+                }
+              )
+            }
+          )
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "tw-flex tw-flex-col tw-pl-6",
@@ -21087,11 +21158,12 @@ var chevronButtonClass = cn(
   "tw-flex",
   "tw-items-center",
   "tw-justify-center",
-  "tw-rounded-sm",
+  "tw-rounded-md",
   "tw-border-none",
   "tw-bg-transparent",
   "tw-cursor-pointer",
-  "tw-p-0.5",
+  // Generous 24px hit target (was ~18px) — colour-only hover, no background box.
+  "tw-size-6",
   "tw-text-muted-foreground",
   "tw-transition-colors",
   "hover:tw-text-foreground",
@@ -22944,84 +23016,179 @@ var SubmitButton = ({ children = "Submit", ...buttonProps }) => {
     }
   );
 };
-var errorMessage = (field) => {
-  const first = field.state.meta.errors[0];
-  if (!first) return void 0;
-  if (typeof first === "string") return first;
-  if (typeof first === "object" && first !== null && "message" in first) {
-    const message2 = first.message;
-    return typeof message2 === "string" ? message2 : void 0;
-  }
-  return void 0;
-};
-var FieldShell = ({ field, label, required, help, className, children }) => {
-  const error = errorMessage(field);
-  const showError = field.state.meta.isTouched && !!error;
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { className, state: showError ? "error" : void 0, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(Label2, { htmlFor: field.name, children: [
-      label,
-      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-ml-0.5 tw-text-primary", children: "*" })
+var FieldItem = ({
+  label,
+  required,
+  requiredMark = "required",
+  help,
+  tooltip,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  children
+}) => {
+  const field = useFieldContext();
+  const { errors, isTouched } = field.state.meta;
+  const isInvalid = isTouched && errors.length > 0;
+  const errorId = `${field.name}-error`;
+  const descriptionId = `${field.name}-description`;
+  const describedBy = [ariaDescribedBy, !!help && descriptionId, isInvalid && errorId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { className, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Label2, { htmlFor: field.name, children: [
+        label,
+        requiredMark === "required" && required && /* @__PURE__ */ jsxRuntime.jsx(Label2.Required, {}),
+        requiredMark === "optional" && !required && /* @__PURE__ */ jsxRuntime.jsx(Label2.Optional, {})
+      ] }),
+      tooltip && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { tooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": typeof label === "string" ? `More information about ${label}` : "More information",
+          className: "tailwindcss-preflight tw-text-muted-foreground focus:tw-outline-none focus-visible:tw-text-primary",
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Info, { className: "tw-size-3" })
+        }
+      ) })
     ] }),
-    children,
-    showError ? /* @__PURE__ */ jsxRuntime.jsx(FormGroup.Help, { children: error }) : help && /* @__PURE__ */ jsxRuntime.jsx(FormGroup.Help, { children: help })
+    children({
+      id: field.name,
+      name: field.name,
+      "aria-required": required || void 0,
+      "aria-invalid": isInvalid || void 0,
+      "aria-describedby": describedBy
+    }),
+    (help || isInvalid) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      help && /* @__PURE__ */ jsxRuntime.jsx(FormGroup.Help, { id: descriptionId, children: help }),
+      isInvalid && /* @__PURE__ */ jsxRuntime.jsx(FormGroup.Error, { id: errorId, errors })
+    ] })
   ] });
 };
-var CheckboxField = ({ label, help, className, children, ...checkboxProps }) => {
+var CheckboxField = ({ className, children, ...checkboxProps }) => {
   const field = useFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldItem, { className, children: (control) => /* @__PURE__ */ jsxRuntime.jsx(
     Checkbox,
     {
-      id: field.name,
-      name: field.name,
+      ...checkboxProps,
+      ...control,
       checked: field.state.value ?? false,
-      onCheckedChange: (checked) => {
-        field.handleChange(checked === true);
-      },
+      onCheckedChange: (checked) => field.handleChange(checked === true),
       onBlur: field.handleBlur,
-      ...checkboxProps,
-      children: children ?? label
+      children
     }
   ) });
 };
-var NumberField = ({ label, required, help, className, ...inputProps }) => {
+var NumberField = ({
+  label,
+  required,
+  requiredMark,
+  help,
+  tooltip,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  ...inputProps
+}) => {
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FieldItem,
+    {
+      label,
+      required,
+      requiredMark,
+      help,
+      tooltip,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: (control) => /* @__PURE__ */ jsxRuntime.jsx(
+        NumberInput,
+        {
+          ...inputProps,
+          ...control,
+          value: field.state.value ?? null,
+          onValueChange: field.handleChange,
+          onBlur: field.handleBlur
+        }
+      )
+    }
+  );
+};
+var OtpInputField = ({
+  label,
+  required,
+  requiredMark,
+  help,
+  tooltip,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  maxLength,
+  ...otpProps
+}) => {
   const field = useFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    FormGroup.NumberInput,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FieldItem,
     {
-      id: field.name,
-      name: field.name,
-      value: field.state.value ?? null,
-      onValueChange: (value) => {
-        field.handleChange(value);
-      },
-      onBlur: field.handleBlur,
-      ...inputProps
+      label,
+      required,
+      requiredMark,
+      help,
+      tooltip,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: (control) => /* @__PURE__ */ jsxRuntime.jsx(
+        OtpInput,
+        {
+          ...otpProps,
+          ...control,
+          maxLength,
+          value: field.state.value ?? "",
+          onChange: field.handleChange,
+          onBlur: field.handleBlur,
+          children: /* @__PURE__ */ jsxRuntime.jsx(OtpInput.Group, { children: Array.from({ length: maxLength }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(OtpInput.Slot, { index }, index)) })
+        }
+      )
     }
-  ) });
+  );
 };
-var PasswordField = ({ label, required, help, className, ...inputProps }) => {
+var PasswordField = ({
+  label,
+  required,
+  requiredMark,
+  help,
+  tooltip,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  ...inputProps
+}) => {
   const field = useFieldContext();
-  const showError = field.state.meta.isTouched && field.state.meta.errors.length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    PasswordInput,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FieldItem,
     {
-      id: field.name,
-      name: field.name,
-      value: field.state.value ?? "",
-      state: showError ? "error" : void 0,
-      onValueChange: (value) => {
-        field.handleChange(value);
-      },
-      onBlur: field.handleBlur,
-      ...inputProps
+      label,
+      required,
+      requiredMark,
+      help,
+      tooltip,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: (control) => /* @__PURE__ */ jsxRuntime.jsx(
+        PasswordInput,
+        {
+          ...inputProps,
+          ...control,
+          value: field.state.value ?? "",
+          onValueChange: field.handleChange,
+          onBlur: field.handleBlur
+        }
+      )
     }
-  ) });
+  );
 };
 var SelectField = ({
   label,
   required,
+  requiredMark,
   help,
+  tooltip,
   className,
+  "aria-describedby": ariaDescribedBy,
   items,
   options,
   placeholder,
@@ -23033,80 +23200,125 @@ var SelectField = ({
 }) => {
   const field = useFieldContext();
   const resolved = items ?? options ?? [];
-  return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    Select2.Root,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FieldItem,
     {
-      value: field.state.value ?? "",
-      onValueChange: (value) => {
-        field.handleChange(value);
-      },
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Select2.Trigger,
-          {
-            id: field.name,
-            className: triggerClassName ?? "tw-w-full",
-            placeholder,
-            variant,
-            state,
-            sizing,
-            onBlur: field.handleBlur
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(Select2.Content, { children: resolved.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select2.Item, { value: option.value, children: option.label }, option.value)) })
-      ]
+      label,
+      required,
+      requiredMark,
+      help,
+      tooltip,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: (control) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Select2.Root,
+        {
+          value: field.state.value ?? "",
+          onValueChange: (value) => {
+            field.handleChange(value);
+          },
+          ...rootProps,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Select2.Trigger,
+              {
+                ...control,
+                className: triggerClassName ?? "tw-w-full",
+                placeholder,
+                variant,
+                state,
+                sizing,
+                onBlur: field.handleBlur
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Select2.Content, { children: resolved.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select2.Item, { value: option.value, children: option.label }, option.value)) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
-var SwitchField = ({ label, help, className, children, ...switchProps }) => {
+var SwitchField = ({ className, children, ...switchProps }) => {
   const field = useFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldItem, { className, children: (control) => /* @__PURE__ */ jsxRuntime.jsx(
     Switch,
     {
-      id: field.name,
-      name: field.name,
+      ...switchProps,
+      ...control,
       checked: field.state.value ?? false,
-      onCheckedChange: (checked) => {
-        field.handleChange(checked);
-      },
+      onCheckedChange: field.handleChange,
       onBlur: field.handleBlur,
-      ...switchProps,
-      children: children ?? label
+      children
     }
   ) });
 };
-var TextAreaField = ({ label, required, help, className, ...inputProps }) => {
+var TextareaField = ({
+  label,
+  required,
+  requiredMark,
+  help,
+  tooltip,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  ...inputProps
+}) => {
   const field = useFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    FormGroup.Textarea,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FieldItem,
     {
-      id: field.name,
-      name: field.name,
-      value: field.state.value ?? "",
-      onValueChange: (value) => {
-        field.handleChange(value);
-      },
-      onBlur: field.handleBlur,
-      ...inputProps
+      label,
+      required,
+      requiredMark,
+      help,
+      tooltip,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: (control) => /* @__PURE__ */ jsxRuntime.jsx(
+        Textarea,
+        {
+          ...inputProps,
+          ...control,
+          value: field.state.value ?? "",
+          onValueChange: field.handleChange,
+          onBlur: field.handleBlur
+        }
+      )
     }
-  ) });
+  );
 };
-var TextField = ({ label, required, help, className, ...inputProps }) => {
+var TextField = ({
+  label,
+  required,
+  requiredMark,
+  help,
+  tooltip,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  ...inputProps
+}) => {
   const field = useFieldContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    FormGroup.TextInput,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FieldItem,
     {
-      id: field.name,
-      name: field.name,
-      value: field.state.value ?? "",
-      onChange: (e) => {
-        field.handleChange(e.target.value);
-      },
-      onBlur: field.handleBlur,
-      ...inputProps
+      label,
+      required,
+      requiredMark,
+      help,
+      tooltip,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: (control) => /* @__PURE__ */ jsxRuntime.jsx(
+        TextInput,
+        {
+          ...inputProps,
+          ...control,
+          value: field.state.value ?? "",
+          onValueChange: field.handleChange,
+          onBlur: field.handleBlur
+        }
+      )
     }
-  ) });
+  );
 };
 
 // src/blocks/Form/formHook.ts
@@ -23117,10 +23329,11 @@ var { useAppForm, withForm } = reactForm.createFormHook({
     TextField,
     NumberField,
     PasswordField,
-    TextAreaField,
+    TextareaField,
     SelectField,
     CheckboxField,
-    SwitchField
+    SwitchField,
+    OtpInputField
   },
   formComponents: {
     FormBody,
@@ -23344,7 +23557,6 @@ exports.HoverCard = HoverCard;
 exports.InlineStepDetail = InlineStepDetail;
 exports.InlineStepLabel = InlineStepLabel;
 exports.InputGroup = InputGroup;
-exports.InputOtp = InputOtp;
 exports.Kbd = Kbd;
 exports.Label = Label2;
 exports.Link = Link;
@@ -23356,6 +23568,7 @@ exports.MultiActionButtonGroup = MultiActionButtonGroup;
 exports.MultiCombobox = MultiCombobox;
 exports.Navbar = Navbar;
 exports.NumberInput = NumberInput;
+exports.OtpInput = OtpInput;
 exports.PageHeader = PageHeader;
 exports.PageLayout = PageLayout;
 exports.PageToolbar = PageToolbar;
@@ -23429,7 +23642,6 @@ exports.toast = toast;
 exports.useAppForm = useAppForm;
 exports.useArgoDesign = useArgoDesign;
 exports.useAutosizeInput = useAutosizeInput;
-exports.useInputOtpContext = useInputOtpContext;
 exports.useMergeDiff = useMergeDiff;
 exports.useNotification = useNotification;
 exports.useScrollbarPosition = useScrollbarPosition;