@keboola/design 5.0.0 → 6.0.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { Slot, Root as Root$1, Slottable } from '@radix-ui/react-slot';
 export { Slot } from '@radix-ui/react-slot';
 import * as lucide_react_star from 'lucide-react';
-import React26, { createContext, forwardRef, useMemo, useRef, useEffect, useImperativeHandle, Fragment, use, useState, useReducer, useCallback, useId, useLayoutEffect, Children, useContext, useInsertionEffect, isValidElement } from 'react';
+import React26, { createContext, forwardRef, useMemo, useRef, useEffect, use, useImperativeHandle, Fragment, useState, useReducer, useCallback, useId, useLayoutEffect, Children, useContext, useInsertionEffect, isValidElement } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { Root as Root$6, Trigger, Portal, Content, Provider } from '@radix-ui/react-tooltip';
@@ -1438,11 +1438,12 @@ var variants = 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",
@@ -9011,11 +9012,23 @@ var inputGroupVariants = 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)
@@ -9026,7 +9039,12 @@ var inputGroupVariants = 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: {
@@ -9981,23 +9999,23 @@ var TimePicker = ({
     )
   ] });
 };
-var Optional = ({ className }) => /* @__PURE__ */ jsx("span", { className: cn("tw-text-muted-foreground", className), children: "(optional)" });
-var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
-  return /* @__PURE__ */ jsx(
-    RLabel.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__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-muted-foreground", className), children: "(optional)" });
+var Required = ({ className, ...props }) => /* @__PURE__ */ 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__ */ jsx(
+  RLabel.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__ */ jsx(
   "span",
   {
@@ -11185,12 +11203,29 @@ var variants4 = 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
@@ -11200,7 +11235,14 @@ var variants4 = 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: {
@@ -11252,7 +11294,7 @@ var SelectTrigger = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
-        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(icons_exports.ChevronDown, { className: "tw-size-5 tw-text-muted-foreground" }) })
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(icons_exports.ChevronDown, { className: "tw-size-4 tw-text-muted-foreground" }) })
       ]
     }
   );
@@ -11577,12 +11619,14 @@ var badgeRootVariants = 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
@@ -13029,18 +13073,12 @@ var TimeInput = ({
     }
   );
 };
-var InputOtpVariantContext = createContext({
-  sizing: "md",
-  state: "default"
-});
-var useInputOtpVariant = () => use(InputOtpVariantContext);
-var useInputOtpRenderContext = () => use(OTPInputContext);
-var InputOtpGroup = ({
+var OtpInputGroup = ({
   ref,
   className,
   ...props
 }) => /* @__PURE__ */ jsx("div", { ref, className: cn("tw-flex tw-items-center tw-gap-2", className), ...props });
-var InputOtpSeparator = ({
+var OtpInputSeparator = ({
   ref,
   children,
   className,
@@ -13056,61 +13094,46 @@ var InputOtpSeparator = ({
     children: children ?? /* @__PURE__ */ jsx(icons_exports.Minus, { className: "tw-size-4" })
   }
 );
-var slotVariants = 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 } = use(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;
@@ -13121,7 +13144,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,
@@ -13140,19 +13163,19 @@ var InputOtpSlot = ({
 var Root23 = ({
   ref,
   sizing = "md",
-  state = "default",
   pattern = REGEXP_ONLY_DIGITS,
   containerClassName,
   className,
   children,
+  "aria-invalid": ariaInvalid,
   ...rest
-}) => /* @__PURE__ */ jsx(InputOtpVariantContext, { value: { sizing, state }, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx("div", { className: "tw-group/otp tw-w-fit", "data-size": sizing, children: /* @__PURE__ */ jsx(
   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
@@ -13161,20 +13184,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 = use(OTPInputContext);
-  if (!ctx.slots) {
-    throw new Error("useInputOtpContext must be used inside <InputOtp>.");
-  }
-  return ctx;
-};
 var SearchInput = ({
   ref,
   // group props
@@ -15148,6 +15162,18 @@ var FormGroupColorInput = ({
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsx(ColorInput, { state, ...props, ref });
 };
+var toMessage = (entry) => typeof entry === "string" ? entry : entry?.message;
+var FormGroupError = ({ children, className, errors, ...rest }) => {
+  const content = 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__ */ 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__ */ jsx("li", { children: message2 }, index)) });
+  }, [children, errors]);
+  if (!content) return null;
+  return /* @__PURE__ */ jsx("div", { ...rest, role: "alert", className: cn("tw-m-0 tw-text-xs tw-text-destructive", className), children: content });
+};
 var helpVariants = cva(["tw-m-0", "tw-text-xs"], {
   defaultVariants: {
     state: "default"
@@ -15155,18 +15181,17 @@ var helpVariants = 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__ */ jsx("p", { "data-testid": testId, className: helpVariants({ state, className }), children });
+  return /* @__PURE__ */ jsx("p", { ...rest, className: helpVariants({ state, className }), children });
 };
 var FormGroupHelp = ({ children, ...rest }) => {
   const formGroupContext = useFormGroupContext();
-  return /* @__PURE__ */ jsx(HelpBlock, { state: formGroupContext.state, ...rest, children });
+  return /* @__PURE__ */ jsx(HelpBlock, { state: formGroupContext.state === "warning" ? "warning" : "default", ...rest, children });
 };
 var FormGroupNumberInput = ({
   ref,
@@ -15186,10 +15211,11 @@ var FormGroupTextInput = ({
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsx(TextInput, { state, ...props, ref });
 };
-var FormGroup = ({ className, children, state, testId }) => {
-  return /* @__PURE__ */ jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ 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__ */ jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ 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;
@@ -15418,7 +15444,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",
@@ -18412,6 +18438,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);
@@ -20910,13 +20941,29 @@ var BreadcrumbDropdownGroup = ({
     [parent, labelMatched, registerChild]
   );
   const isExpanded = !collapsible || expanded || filtering;
+  const isEmpty = Children.count(children) === 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn("tw-flex tw-flex-col", className),
       style: visible ? void 0 : { display: "none" },
       children: [
-        collapsible ? /* @__PURE__ */ jsxs(
+        collapsible && isEmpty ? /* @__PURE__ */ 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__ */ jsx(icons_exports.ChevronRight, {}),
+              label
+            ]
+          }
+        ) : collapsible && !isEmpty ? /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
@@ -20929,7 +20976,31 @@ var BreadcrumbDropdownGroup = ({
             ]
           }
         ) : /* @__PURE__ */ jsx("span", { className: headerClass, children: label }),
-        /* @__PURE__ */ jsx(BreadcrumbDropdownContext, { value: childContext, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                "div",
+                {
+                  className: "tw-overflow-hidden",
+                  inert: !isExpanded,
+                  "aria-hidden": isExpanded ? void 0 : true,
+                  children: /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-col tw-pl-6", children })
+                }
+              )
+            }
+          )
+        ) : /* @__PURE__ */ jsx(
           "div",
           {
             className: "tw-flex tw-flex-col tw-pl-6",
@@ -21055,11 +21126,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",
@@ -22912,84 +22984,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__ */ jsxs(FormGroup, { className, state: showError ? "error" : void 0, children: [
-    label && /* @__PURE__ */ jsxs(Label2, { htmlFor: field.name, children: [
-      label,
-      required && /* @__PURE__ */ 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__ */ jsxs(FormGroup, { className, children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [
+      /* @__PURE__ */ jsxs(Label2, { htmlFor: field.name, children: [
+        label,
+        requiredMark === "required" && required && /* @__PURE__ */ jsx(Label2.Required, {}),
+        requiredMark === "optional" && !required && /* @__PURE__ */ jsx(Label2.Optional, {})
+      ] }),
+      tooltip && /* @__PURE__ */ jsx(Tooltip, { tooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ 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__ */ jsx(icons_exports.Info, { className: "tw-size-3" })
+        }
+      ) })
     ] }),
-    children,
-    showError ? /* @__PURE__ */ jsx(FormGroup.Help, { children: error }) : help && /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+      help && /* @__PURE__ */ jsx(FormGroup.Help, { id: descriptionId, children: help }),
+      isInvalid && /* @__PURE__ */ jsx(FormGroup.Error, { id: errorId, errors })
+    ] })
   ] });
 };
-var CheckboxField = ({ label, help, className, children, ...checkboxProps }) => {
+var CheckboxField = ({ className, children, ...checkboxProps }) => {
   const field = useFieldContext();
-  return /* @__PURE__ */ jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FieldItem, { className, children: (control) => /* @__PURE__ */ 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__ */ jsx(
+    FieldItem,
+    {
+      label,
+      required,
+      requiredMark,
+      help,
+      tooltip,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: (control) => /* @__PURE__ */ 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__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    FormGroup.NumberInput,
+  return /* @__PURE__ */ 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__ */ jsx(
+        OtpInput,
+        {
+          ...otpProps,
+          ...control,
+          maxLength,
+          value: field.state.value ?? "",
+          onChange: field.handleChange,
+          onBlur: field.handleBlur,
+          children: /* @__PURE__ */ jsx(OtpInput.Group, { children: Array.from({ length: maxLength }, (_, index) => /* @__PURE__ */ 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__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    PasswordInput,
+  return /* @__PURE__ */ 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__ */ 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,
@@ -23001,80 +23168,125 @@ var SelectField = ({
 }) => {
   const field = useFieldContext();
   const resolved = items ?? options ?? [];
-  return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxs(
-    Select2.Root,
+  return /* @__PURE__ */ jsx(
+    FieldItem,
     {
-      value: field.state.value ?? "",
-      onValueChange: (value) => {
-        field.handleChange(value);
-      },
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ jsx(
-          Select2.Trigger,
-          {
-            id: field.name,
-            className: triggerClassName ?? "tw-w-full",
-            placeholder,
-            variant,
-            state,
-            sizing,
-            onBlur: field.handleBlur
-          }
-        ),
-        /* @__PURE__ */ jsx(Select2.Content, { children: resolved.map((option) => /* @__PURE__ */ jsx(Select2.Item, { value: option.value, children: option.label }, option.value)) })
-      ]
+      label,
+      required,
+      requiredMark,
+      help,
+      tooltip,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: (control) => /* @__PURE__ */ jsxs(
+        Select2.Root,
+        {
+          value: field.state.value ?? "",
+          onValueChange: (value) => {
+            field.handleChange(value);
+          },
+          ...rootProps,
+          children: [
+            /* @__PURE__ */ jsx(
+              Select2.Trigger,
+              {
+                ...control,
+                className: triggerClassName ?? "tw-w-full",
+                placeholder,
+                variant,
+                state,
+                sizing,
+                onBlur: field.handleBlur
+              }
+            ),
+            /* @__PURE__ */ jsx(Select2.Content, { children: resolved.map((option) => /* @__PURE__ */ 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__ */ jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FieldItem, { className, children: (control) => /* @__PURE__ */ 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__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    FormGroup.Textarea,
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    FormGroup.TextInput,
+  return /* @__PURE__ */ 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__ */ jsx(
+        TextInput,
+        {
+          ...inputProps,
+          ...control,
+          value: field.state.value ?? "",
+          onValueChange: field.handleChange,
+          onBlur: field.handleBlur
+        }
+      )
     }
-  ) });
+  );
 };
 
 // src/blocks/Form/formHook.ts
@@ -23085,10 +23297,11 @@ var { useAppForm, withForm } = createFormHook({
     TextField,
     NumberField,
     PasswordField,
-    TextAreaField,
+    TextareaField,
     SelectField,
     CheckboxField,
-    SwitchField
+    SwitchField,
+    OtpInputField
   },
   formComponents: {
     FormBody,
@@ -23204,6 +23417,6 @@ object-assign/index.js:
   *)
 */
 
-export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DEFAULT_COLOR_SCHEME, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label2 as Label, Link, Markdown, MarkedText, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useArgoDesign, useAutosizeInput, useInputOtpContext, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, withForm };
+export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DEFAULT_COLOR_SCHEME, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label2 as Label, Link, Markdown, MarkedText, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map