@keboola/design 5.1.0 → 6.1.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';
@@ -14,6 +14,7 @@ import { Root, Group, Trigger as Trigger$4 } from '@radix-ui/react-dropdown-menu
 import * as ScrollAreaPrimitive2 from '@radix-ui/react-scroll-area';
 import { Root as Root$7 } from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as RLabel from '@radix-ui/react-label';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Root as Root$8, Trigger as Trigger$5, Portal as Portal$1, Content as Content$1, Cancel, Action, Overlay as Overlay$1, Title as Title$1 } from '@radix-ui/react-alert-dialog';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -25,7 +26,6 @@ import { Root as Root$a, Trigger as Trigger$3, Portal as Portal$4, Content as Co
 import { Command as Command$1, CommandInput as CommandInput$1, defaultFilter, useCommandState } from 'cmdk';
 export { defaultFilter, useCommandState } from 'cmdk';
 import TextareaAutosize from 'react-textarea-autosize';
-import * as RLabel from '@radix-ui/react-label';
 import { Root as Root$3, Thumb } from '@radix-ui/react-switch';
 import * as RRadioGroup from '@radix-ui/react-radio-group';
 import { Item, Indicator as Indicator$2 } from '@radix-ui/react-radio-group';
@@ -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",
@@ -2767,6 +2768,7 @@ var Clipboard = ({
   ] });
 };
 var DEFAULT_ICON = /* @__PURE__ */ jsx(icons_exports.Copy, {});
+var DEFAULT_ARIA_LABEL = "Copy";
 var ClipboardButton = ({
   // clipboard props
   text,
@@ -2778,20 +2780,24 @@ var ClipboardButton = ({
   variant = "outline",
   children,
   ...rest
-}) => /* @__PURE__ */ jsx(
-  Clipboard,
-  {
-    asChild: true,
-    tooltip,
-    tooltipPlacement,
-    tooltipVariant,
-    text,
-    children: /* @__PURE__ */ 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__ */ jsx(
+    Clipboard,
+    {
+      asChild: true,
+      tooltip,
+      tooltipPlacement,
+      tooltipVariant,
+      text,
+      children: /* @__PURE__ */ jsxs(Button, { ...rest, "aria-label": ariaLabel, variant, disabled: !text, children: [
+        icon,
+        children
+      ] })
+    }
+  );
+};
 var ClipboardInline = ({
   // clipboard props
   text,
@@ -2816,6 +2822,264 @@ var ClipboardInline = ({
     ] })
   }
 );
+var CopyContext = createContext(null);
+var useCopyContext = () => {
+  const ctx = 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__ */ jsx(Tooltip, { triggerAsChild: true, placement: "top", tooltip: copied ? "Copied" : "Copy", forceShow: copied, children: /* @__PURE__ */ 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__ */ 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__ */ jsx(icons_exports.Check, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(icons_exports.Copy, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyChildren = ({ children, className }) => {
+  const { maxLines } = useCopyContext();
+  const multiline = maxLines > 1;
+  return /* @__PURE__ */ 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__ */ 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();
+  useEffect(() => {
+    if (!revealable) return void 0;
+    return registerRevealable();
+  }, [revealable, registerRevealable]);
+  const masked = revealable ? hidden : true;
+  return /* @__PURE__ */ jsx("span", { className: cn("tw-select-none", className), children: masked ? MASK : 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 CopyLabel = ({ children, leading, trailing, className }) => {
+  const { labelId, registerLabel } = useCopyContext();
+  useEffect(() => registerLabel(), [registerLabel]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("tw-flex tw-items-center tw-gap-1", className), children: [
+    /* @__PURE__ */ jsx(Label2, { id: labelId, children }),
+    leading,
+    trailing != null && /* @__PURE__ */ jsx("span", { className: "tw-ml-auto tw-flex tw-items-center", children: trailing })
+  ] });
+};
+var CopyPrefix = ({ children, className }) => /* @__PURE__ */ 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__ */ 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__ */ jsx(icons_exports.Eye, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(icons_exports.EyeOff, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyRoot = ({
+  value,
+  mono = false,
+  onCopy,
+  hiddenByDefault = false,
+  minLines = 1,
+  maxLines,
+  className,
+  children
+}) => {
+  const [copied, setCopied] = useState(false);
+  const [hidden, setHidden] = useState(hiddenByDefault);
+  const [revealableCount, setRevealableCount] = useState(0);
+  const [labelCount, setLabelCount] = useState(0);
+  const resetTimerRef = useRef(void 0);
+  const generatedId = useId();
+  const labelId = `${generatedId}-label`;
+  const boxId = `${generatedId}-box`;
+  useEffect(() => () => clearTimeout(resetTimerRef.current), []);
+  const handleCopy = 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 = useCallback(() => setHidden((prev) => !prev), []);
+  const registerRevealable = useCallback(() => {
+    setRevealableCount((count) => count + 1);
+    return () => setRevealableCount((count) => count - 1);
+  }, []);
+  const registerLabel = useCallback(() => {
+    setLabelCount((count) => count + 1);
+    return () => setLabelCount((count) => count - 1);
+  }, []);
+  const contextValue = 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__ */ jsx(CopyContext, { value: contextValue, children: /* @__PURE__ */ 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__ */ 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,
@@ -6750,7 +7014,7 @@ __export(custom_components_exports, {
   NextMonthButton: () => NextMonthButton,
   Option: () => Option,
   PreviousMonthButton: () => PreviousMonthButton,
-  Root: () => Root16,
+  Root: () => Root17,
   Select: () => Select,
   Week: () => Week,
   WeekNumber: () => WeekNumber,
@@ -6930,7 +7194,7 @@ function Option(props) {
 function PreviousMonthButton(props) {
   return React26.createElement("button", { ...props });
 }
-function Root16(props) {
+function Root17(props) {
   const { rootRef, ...rest } = props;
   return React26.createElement("div", { ...rest, ref: rootRef });
 }
@@ -9011,11 +9275,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 +9302,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 +10262,6 @@ 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
-    }
-  );
-};
-Label2.Optional = Optional;
 var FieldBoxDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
@@ -11185,12 +11449,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 +11481,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 +11540,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 +11865,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 +13319,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 +13340,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 +13390,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 +13409,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 +13430,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 +15408,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 +15427,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 +15457,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;
@@ -16342,6 +16614,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,
@@ -16364,6 +16642,7 @@ var PromptInputSubmit = ({
         ref,
         type: "submit",
         disabled,
+        "aria-label": ARIA_LABEL_BY_STATUS[status],
         size: "icon-sm",
         variant: "invisible",
         isLoading: status === "submitted",
@@ -17810,7 +18089,7 @@ var cardTitleClassnames = cn(
   "tw-text-base",
   "tw-text-card-foreground"
 );
-var CardTitle = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("h3", { className: cn(cardTitleClassnames, className), ...rest, children });
+var CardTitle = ({ children, className, as: Tag = "h3", ...rest }) => /* @__PURE__ */ jsx(Tag, { className: cn(cardTitleClassnames, className), ...rest, children });
 var Card = ({
   children,
   className,
@@ -18412,6 +18691,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);
@@ -22953,84 +23237,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(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(
+        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__ */ 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(
+        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,
+  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(
+        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,
@@ -23042,80 +23421,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
@@ -23126,10 +23550,11 @@ var { useAppForm, withForm } = createFormHook({
     TextField,
     NumberField,
     PasswordField,
-    TextAreaField,
+    TextareaField,
     SelectField,
     CheckboxField,
-    SwitchField
+    SwitchField,
+    OtpInputField
   },
   formComponents: {
     FormBody,
@@ -23245,6 +23670,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, CopyField, 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