@keboola/design 5.1.0 → 6.1.0

package/dist/index.cjs

@@ -13,6 +13,7 @@ var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var ScrollAreaPrimitive2 = require('@radix-ui/react-scroll-area');
 var reactToggle = require('@radix-ui/react-toggle');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var RLabel = require('@radix-ui/react-label');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var RSeparator = require('@radix-ui/react-separator');
@@ -21,7 +22,6 @@ var reactPopover = require('@radix-ui/react-popover');
 var reactHoverCard = require('@radix-ui/react-hover-card');
 var cmdk = require('cmdk');
 var TextareaAutosize = require('react-textarea-autosize');
-var RLabel = require('@radix-ui/react-label');
 var reactSwitch = require('@radix-ui/react-switch');
 var RRadioGroup = require('@radix-ui/react-radio-group');
 var reactSlider = require('@radix-ui/react-slider');
@@ -70,11 +70,11 @@ var React26__default = /*#__PURE__*/_interopDefault(React26);
 var DropdownMenuPrimitive3__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive3);
 var ScrollAreaPrimitive2__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive2);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var RLabel__namespace = /*#__PURE__*/_interopNamespace(RLabel);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var RSeparator__namespace = /*#__PURE__*/_interopNamespace(RSeparator);
 var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);
-var RLabel__namespace = /*#__PURE__*/_interopNamespace(RLabel);
 var RRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RRadioGroup);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
@@ -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",
@@ -2799,6 +2800,7 @@ var Clipboard = ({
   ] });
 };
 var DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Copy, {});
+var DEFAULT_ARIA_LABEL = "Copy";
 var ClipboardButton = ({
   // clipboard props
   text,
@@ -2810,20 +2812,24 @@ var ClipboardButton = ({
   variant = "outline",
   children,
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  Clipboard,
-  {
-    asChild: true,
-    tooltip,
-    tooltipPlacement,
-    tooltipVariant,
-    text,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...rest, variant, disabled: !text, children: [
-      icon,
-      children
-    ] })
-  }
-);
+}) => {
+  const defaultAriaLabel = typeof tooltip === "string" && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;
+  const ariaLabel = rest["aria-label"] ?? (children == null ? defaultAriaLabel : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Clipboard,
+    {
+      asChild: true,
+      tooltip,
+      tooltipPlacement,
+      tooltipVariant,
+      text,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...rest, "aria-label": ariaLabel, variant, disabled: !text, children: [
+        icon,
+        children
+      ] })
+    }
+  );
+};
 var ClipboardInline = ({
   // clipboard props
   text,
@@ -2848,6 +2854,264 @@ var ClipboardInline = ({
     ] })
   }
 );
+var CopyContext = React26.createContext(null);
+var useCopyContext = () => {
+  const ctx = React26.use(CopyContext);
+  if (!ctx) throw new Error("CopyField.* components must be used within a CopyField.Root");
+  return ctx;
+};
+var LINE_HEIGHT_REM = 1.25;
+var VERTICAL_PADDING_REM = 1.25;
+var CopyBox = ({ className, children }) => {
+  const { copied, handleCopy, mono, minLines, maxLines, boxId, labelId, hasLabel } = useCopyContext();
+  const multiline = maxLines > 1;
+  const multilineStyle = multiline ? {
+    minHeight: `${minLines * LINE_HEIGHT_REM + VERTICAL_PADDING_REM}rem`,
+    maxHeight: `${maxLines * LINE_HEIGHT_REM + VERTICAL_PADDING_REM}rem`
+  } : void 0;
+  const handleKeyDown2 = (event) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    handleCopy();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { triggerAsChild: true, placement: "top", tooltip: copied ? "Copied" : "Copy", forceShow: copied, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      id: boxId,
+      "aria-labelledby": hasLabel ? labelId : void 0,
+      onClick: handleCopy,
+      onKeyDown: handleKeyDown2,
+      style: multilineStyle,
+      className: cn(
+        "tw-group tw-relative tw-flex tw-w-fit tw-max-w-full tw-cursor-pointer tw-gap-2 tw-rounded-2xl [corner-shape:superellipse(2)] tw-border tw-border-[#e4e4e4] tw-bg-[#fafafa] tw-px-3 tw-py-2.5 tw-text-left tw-shadow-sm tw-transition-colors hover:tw-bg-[#f2f2f2]",
+        multiline ? "tw-items-start tw-overflow-auto" : "tw-items-center tw-overflow-hidden",
+        mono && "tw-font-mono tw-text-[13px]",
+        className
+      ),
+      children
+    }
+  ) });
+};
+var CopyButton = ({ className }) => {
+  const { copied, maxLines } = useCopyContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "tw-pointer-events-none tw-flex tw-shrink-0 tw-items-center tw-text-[#8b8b8b] group-hover:tw-text-[#5c5c5c]",
+        maxLines > 1 && "tw-self-start tw-pt-0.5",
+        className
+      ),
+      children: copied ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Check, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Copy, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyChildren = ({ children, className }) => {
+  const { maxLines } = useCopyContext();
+  const multiline = maxLines > 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "tw-min-w-0 tw-flex-1 tw-select-text tw-text-[#3f3f3f]",
+        multiline ? "tw-whitespace-pre-wrap tw-break-words" : "tw-truncate",
+        className
+      ),
+      children
+    }
+  );
+};
+var CopyFooter = ({ children, className }) => {
+  if (!children) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("tw-m-0 tw-text-xs tw-text-muted-foreground", className), children });
+};
+var MASK = "*".repeat(12);
+var CopyHidden = ({ children, revealable = true, className }) => {
+  const { hidden, registerRevealable } = useCopyContext();
+  React26.useEffect(() => {
+    if (!revealable) return void 0;
+    return registerRevealable();
+  }, [revealable, registerRevealable]);
+  const masked = revealable ? hidden : true;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-select-none", className), children: masked ? MASK : 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 CopyLabel = ({ children, leading, trailing, className }) => {
+  const { labelId, registerLabel } = useCopyContext();
+  React26.useEffect(() => registerLabel(), [registerLabel]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("tw-flex tw-items-center tw-gap-1", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label2, { id: labelId, children }),
+    leading,
+    trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-ml-auto tw-flex tw-items-center", children: trailing })
+  ] });
+};
+var CopyPrefix = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    "aria-hidden": true,
+    className: cn(
+      "tw-shrink-0 tw-select-none tw-self-stretch tw-border-r tw-border-[#e4e4e4] tw-pr-2 tw-text-[#6b6b6b]",
+      className
+    ),
+    children
+  }
+);
+var CopyReveal = ({ className }) => {
+  const { hidden, toggleHidden, hasRevealable, maxLines } = useCopyContext();
+  if (!hasRevealable) return null;
+  const handleClick = (event) => {
+    event.stopPropagation();
+    toggleHidden();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      "aria-label": hidden ? "Show value" : "Hide value",
+      className: cn(
+        "tw-flex tw-shrink-0 tw-items-center tw-text-[#8b8b8b] hover:tw-text-[#5c5c5c]",
+        maxLines > 1 && "tw-self-start tw-pt-0.5",
+        className
+      ),
+      children: hidden ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Eye, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(icons_exports.EyeOff, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyRoot = ({
+  value,
+  mono = false,
+  onCopy,
+  hiddenByDefault = false,
+  minLines = 1,
+  maxLines,
+  className,
+  children
+}) => {
+  const [copied, setCopied] = React26.useState(false);
+  const [hidden, setHidden] = React26.useState(hiddenByDefault);
+  const [revealableCount, setRevealableCount] = React26.useState(0);
+  const [labelCount, setLabelCount] = React26.useState(0);
+  const resetTimerRef = React26.useRef(void 0);
+  const generatedId = React26.useId();
+  const labelId = `${generatedId}-label`;
+  const boxId = `${generatedId}-box`;
+  React26.useEffect(() => () => clearTimeout(resetTimerRef.current), []);
+  const handleCopy = React26.useCallback(() => {
+    const selection = window.getSelection();
+    const boxEl = document.getElementById(boxId);
+    if (selection && !selection.isCollapsed && selection.anchorNode && boxEl?.contains(selection.anchorNode)) {
+      return;
+    }
+    copyToClipboard(value).then(() => {
+      onCopy?.();
+      setCopied(true);
+      clearTimeout(resetTimerRef.current);
+      resetTimerRef.current = setTimeout(() => setCopied(false), 1500);
+    }).catch((error) => {
+      console.error("Copy to clipboard failed", error);
+    });
+  }, [value, onCopy, boxId]);
+  const toggleHidden = React26.useCallback(() => setHidden((prev) => !prev), []);
+  const registerRevealable = React26.useCallback(() => {
+    setRevealableCount((count) => count + 1);
+    return () => setRevealableCount((count) => count - 1);
+  }, []);
+  const registerLabel = React26.useCallback(() => {
+    setLabelCount((count) => count + 1);
+    return () => setLabelCount((count) => count - 1);
+  }, []);
+  const contextValue = React26.useMemo(
+    () => ({
+      copied,
+      handleCopy,
+      value,
+      mono,
+      hidden,
+      toggleHidden,
+      registerRevealable,
+      hasRevealable: revealableCount > 0,
+      registerLabel,
+      hasLabel: labelCount > 0,
+      minLines,
+      maxLines: maxLines ?? minLines,
+      labelId,
+      boxId
+    }),
+    [
+      copied,
+      handleCopy,
+      value,
+      mono,
+      hidden,
+      toggleHidden,
+      registerRevealable,
+      revealableCount,
+      registerLabel,
+      labelCount,
+      minLines,
+      maxLines,
+      labelId,
+      boxId
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CopyContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("tw-flex tw-w-fit tw-max-w-full tw-flex-col tw-gap-1", className), children }) });
+};
+var CopySuffix = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    "aria-hidden": true,
+    className: cn(
+      "tw-shrink-0 tw-select-none tw-self-stretch tw-border-l tw-border-[#e4e4e4] tw-pl-2 tw-text-[#6b6b6b]",
+      className
+    ),
+    children
+  }
+);
+
+// src/blocks/CopyField/CopyField.tsx
+var CopyField = {
+  /** Container. Owns the copied `value`, mask state, and copy context. */
+  Root: CopyRoot,
+  /** Visible label above the box, with optional `leading`/`trailing` slots. */
+  Label: CopyLabel,
+  /** The clickable copy target row. */
+  Box: CopyBox,
+  /** Muted, non-selectable prefix addon (not copied). */
+  Prefix: CopyPrefix,
+  /** Displayed value (truncates single-line, wraps multi-line). */
+  Children: CopyChildren,
+  /** Muted, non-selectable suffix addon (not copied). */
+  Suffix: CopySuffix,
+  /** Masks its children with dots; copy still copies the real value. */
+  Hidden: CopyHidden,
+  /** Eye toggle that reveals/masks revealable `CopyField.Hidden` content. */
+  Reveal: CopyReveal,
+  /** Copy affordance icon — shows Copy/Check with feedback. */
+  Button: CopyButton,
+  /** Small helper text below the box. */
+  Footer: CopyFooter
+};
 var Link = ({
   ref,
   children,
@@ -6782,7 +7046,7 @@ __export(custom_components_exports, {
   NextMonthButton: () => NextMonthButton,
   Option: () => Option,
   PreviousMonthButton: () => PreviousMonthButton,
-  Root: () => Root16,
+  Root: () => Root17,
   Select: () => Select,
   Week: () => Week,
   WeekNumber: () => WeekNumber,
@@ -6962,7 +7226,7 @@ function Option(props) {
 function PreviousMonthButton(props) {
   return React26__default.default.createElement("button", { ...props });
 }
-function Root16(props) {
+function Root17(props) {
   const { rootRef, ...rest } = props;
   return React26__default.default.createElement("div", { ...rest, ref: rootRef });
 }
@@ -9043,11 +9307,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 +9334,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 +10294,6 @@ 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
-    }
-  );
-};
-Label2.Optional = Optional;
 var FieldBoxDescription = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
@@ -11217,12 +11481,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 +11513,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 +11572,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 +11897,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 +13351,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 +13372,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 +13422,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 +13441,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 +13462,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 +15440,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 +15459,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 +15489,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;
@@ -16374,6 +16646,12 @@ var PromptInputCommands = ({ items, open, onSelect, filterValue, children }) =>
     children
   ] });
 };
+var ARIA_LABEL_BY_STATUS = {
+  ready: "Send message",
+  streaming: "Stop",
+  interrupted: "Continue",
+  submitted: "Sending\u2026"
+};
 var PromptInputSubmit = ({
   ref,
   disabled,
@@ -16396,6 +16674,7 @@ var PromptInputSubmit = ({
         ref,
         type: "submit",
         disabled,
+        "aria-label": ARIA_LABEL_BY_STATUS[status],
         size: "icon-sm",
         variant: "invisible",
         isLoading: status === "submitted",
@@ -17842,7 +18121,7 @@ var cardTitleClassnames = cn(
   "tw-text-base",
   "tw-text-card-foreground"
 );
-var CardTitle = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn(cardTitleClassnames, className), ...rest, children });
+var CardTitle = ({ children, className, as: Tag = "h3", ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: cn(cardTitleClassnames, className), ...rest, children });
 var Card = ({
   children,
   className,
@@ -18444,6 +18723,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);
@@ -22985,84 +23269,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(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(
+        NumberInput,
+        {
+          ...inputProps,
+          ...control,
+          value: field.state.value ?? null,
+          onValueChange: field.handleChange,
+          onBlur: field.handleBlur
+        }
+      )
     }
-  ) });
+  );
 };
-var PasswordField = ({ label, required, help, className, ...inputProps }) => {
+var OtpInputField = ({
+  label,
+  required,
+  requiredMark,
+  help,
+  tooltip,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  maxLength,
+  ...otpProps
+}) => {
   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(
+        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,
+  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(
+        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,
@@ -23074,80 +23453,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
@@ -23158,10 +23582,11 @@ var { useAppForm, withForm } = reactForm.createFormHook({
     TextField,
     NumberField,
     PasswordField,
-    TextAreaField,
+    TextareaField,
     SelectField,
     CheckboxField,
-    SwitchField
+    SwitchField,
+    OtpInputField
   },
   formComponents: {
     FormBody,
@@ -23361,6 +23786,7 @@ exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
 exports.ConflictStatusIndicator = ConflictStatusIndicator;
+exports.CopyField = CopyField;
 exports.DEFAULT_COLOR_SCHEME = DEFAULT_COLOR_SCHEME;
 exports.DEFAULT_KEBOOLA_BRAND_ID = DEFAULT_BRAND_ID;
 exports.DateInput = DateInput;
@@ -23385,7 +23811,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;
@@ -23397,6 +23822,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;
@@ -23470,7 +23896,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;