@keboola/design 6.5.0 → 9.0.0

package/dist/index.d.ts

@@ -72,9 +72,9 @@ declare const argoVariants: (props?: ({
  *
  * Pass `variant` for primary/secondary/danger/outline/invisible looks, `size`
  * for height (including `icon-*` sizes when rendering icon-only). Icons are
- * composed as children — `<Button><Trash2 className="tw-size-4" /> Delete</Button>`.
+ * composed as children — `<Button><Trash2 className="tw:size-4" /> Delete</Button>`.
  */
-type Props$1R = {
+type Props$1S = {
     /** Replaces the leading content with a spinner and disables the button visually. The caller still controls `disabled`. */
     isLoading?: boolean;
     /** Render as a Radix `Slot` so the parent JSX (e.g. a `react-router` `<Link>`) becomes the button element. */
@@ -93,31 +93,31 @@ type Props$1R = {
  * @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern
  * @see RECIPES.md#confirm-dialog — for destructive-action confirmation
  */
-declare const Button: ({ ref, children, disabled, className, type, isLoading, asChild, onClick, variant, size, block, ...buttonProps }: Props$1R) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ ref, children, disabled, className, type, isLoading, asChild, onClick, variant, size, block, ...buttonProps }: Props$1S) => react_jsx_runtime.JSX.Element;
 
 declare const buttonInlineVariants: (props?: ({
     color?: "dark" | "muted" | "link" | "danger" | "custom" | null | undefined;
     variant?: "link" | "custom" | "link-reverse" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type Props$1Q = ComponentProps<'button'> & VariantProps<typeof buttonInlineVariants> & {
+type Props$1R = ComponentProps<'button'> & VariantProps<typeof buttonInlineVariants> & {
     asChild?: boolean;
 };
-declare const ButtonInline: ({ ref, children, className, variant, color, type, asChild, ...buttonProps }: Props$1Q) => react_jsx_runtime.JSX.Element;
+declare const ButtonInline: ({ ref, children, className, variant, color, type, asChild, ...buttonProps }: Props$1R) => react_jsx_runtime.JSX.Element;
 
 declare const buttonGroupVariant: (props?: ({
     variant?: "inline" | "block" | null | undefined;
     space?: "medium" | "small" | "large" | "extra-small" | "little-small" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type Props$1P = {
+type Props$1Q = {
     children: ReactNode;
     className?: string;
 } & VariantProps<typeof buttonGroupVariant> & ComponentProps<'div'>;
-declare const ButtonGroup: ({ ref, children, space, className, variant, ...rest }: Props$1P) => react_jsx_runtime.JSX.Element;
+declare const ButtonGroup: ({ ref, children, space, className, variant, ...rest }: Props$1Q) => react_jsx_runtime.JSX.Element;
 
 type Variant$8 = ComponentProps<typeof Button>['variant'];
 type Size = NonNullable<ComponentProps<typeof Button>['size']>;
 type SpitButtonSize = Exclude<Size, 'icon' | 'icon-lg' | 'icon-sm' | 'icon-xs' | 'icon-2xs' | 'icon-3xs'>;
-type Props$1O = {
+type Props$1P = {
     actions?: ReactNode;
     isActionsOpen?: boolean;
     onActionsOpenChange?: (open: boolean) => void;
@@ -126,7 +126,7 @@ type Props$1O = {
     variant?: Exclude<Variant$8, 'inline' | 'invisible'>;
     size?: SpitButtonSize;
 } & Omit<ComponentProps<typeof Button>, 'variant' | 'size' | 'icon'>;
-declare const SplitButton: (({ ref, disabled, actions, variant, size, isActionsOpen, onActionsOpenChange, icon, children, ...rest }: Props$1O) => react_jsx_runtime.JSX.Element) & {
+declare const SplitButton: (({ ref, disabled, actions, variant, size, isActionsOpen, onActionsOpenChange, icon, children, ...rest }: Props$1P) => react_jsx_runtime.JSX.Element) & {
     Action: ({ ref, className, asModalTrigger, onSelect, onPointerLeave, onPointerMove, children, asChild, icon, iconClassName, isLoading, ...props }: _radix_ui_react_dropdown_menu.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement> & {
         asModalTrigger?: boolean;
         icon?: ReactNode;
@@ -136,11 +136,11 @@ declare const SplitButton: (({ ref, disabled, actions, variant, size, isActionsO
     Actions: react.ForwardRefExoticComponent<_radix_ui_react_dropdown_menu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
 };
 
-type Props$1N = {
+type Props$1O = {
     className?: string;
 } & PropsWithChildren;
 declare const MultiActionButtonGroup: {
-    ({ children, className }: Props$1N): react_jsx_runtime.JSX.Element;
+    ({ children, className }: Props$1O): react_jsx_runtime.JSX.Element;
     Button: ({ disabled, icon, isLoading, label, onClick, tooltipContent, tooltipVariant, "data-testid": dataTestId, }: {
         disabled?: boolean;
         icon: react.ReactNode;
@@ -156,13 +156,15 @@ declare const MultiActionButtonGroup: {
 declare const toggleVariants: (props?: ({
     variant?: "ai" | "ai-vivid" | "ghost" | null | undefined;
     size?: "medium" | "small" | "large" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type Props$1M = {
+type Props$1N = {
     icon?: ReactNode;
     badge?: ReactNode;
-} & ComponentProps<typeof Root> & Omit<VariantProps<typeof toggleVariants>, 'iconOnly'>;
-declare const Toggle: ({ ref, className, variant, size, children, icon, badge, disabled, ...props }: Props$1M) => react_jsx_runtime.JSX.Element;
+    orientation?: 'horizontal' | 'vertical';
+} & ComponentProps<typeof Root> & Omit<VariantProps<typeof toggleVariants>, 'iconOnly' | 'orientation'>;
+declare const Toggle: ({ ref, className, variant, size, orientation, children, icon, badge, disabled, ...props }: Props$1N) => react_jsx_runtime.JSX.Element;
 
 declare const rootVariants: (props?: ({
     size?: "medium" | "small" | "large" | null | undefined;
@@ -177,11 +179,11 @@ declare const ToggleGroup: (({ ref, className, size, ...props }: RootProps$8) =>
 declare const tooltipVariants: (props?: ({
     variant?: "action" | "explanatory" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type Props$1L = {
+type Props$1M = {
     keepOpenOnPointerDownOutside?: boolean;
     placement?: ComponentProps<typeof Content>['side'];
 } & Omit<ComponentProps<typeof Content>, 'side'> & VariantProps<typeof tooltipVariants>;
-declare const TooltipContent: ({ className, variant, keepOpenOnPointerDownOutside, children, onPointerDownOutside, sideOffset, collisionPadding, hideWhenDetached, placement, ...rest }: Props$1L) => react_jsx_runtime.JSX.Element;
+declare const TooltipContent: ({ className, variant, keepOpenOnPointerDownOutside, children, onPointerDownOutside, sideOffset, collisionPadding, hideWhenDetached, placement, ...rest }: Props$1M) => react_jsx_runtime.JSX.Element;
 
 type TriggerProps$1 = {
     triggerAsChild?: boolean;
@@ -190,7 +192,7 @@ type TriggerProps$1 = {
  * Props for `Tooltip`. `tooltip` is the popup content; `children` is the trigger element.
  * `variant` auto-resolves to `"explanatory"` for strings >30 chars, else `"action"`.
  */
-type Props$1K = {
+type Props$1L = {
     /** Keep the tooltip visible when the user clicks the trigger (useful for click-to-copy feedback). */
     keepOpenOnTriggerClick?: boolean;
     /** Content rendered inside the tooltip. Plain text only — no interactive elements (use `HoverCard` or `Popover` for that). */
@@ -222,7 +224,7 @@ declare const TooltipProvider: react.FC<_radix_ui_react_tooltip.TooltipProviderP
  * @see RECIPES.md#disabled-button-tooltip — for the disabled-button + tooltip pattern
  */
 declare const Tooltip: {
-    ({ tooltip, children, className, keepOpenOnTriggerClick, variant, placement, forceHide, forceShow, delayDuration, triggerAsChild, }: Props$1K): react_jsx_runtime.JSX.Element;
+    ({ tooltip, children, className, keepOpenOnTriggerClick, variant, placement, forceHide, forceShow, delayDuration, triggerAsChild, }: Props$1L): react_jsx_runtime.JSX.Element;
     Root: ({ children, delayDuration, ...rest }: _radix_ui_react_tooltip.TooltipProps) => react_jsx_runtime.JSX.Element;
     Content: ({ className, variant, keepOpenOnPointerDownOutside, children, onPointerDownOutside, sideOffset, collisionPadding, hideWhenDetached, placement, ...rest }: {
         keepOpenOnPointerDownOutside?: boolean;
@@ -235,28 +237,56 @@ declare const Tooltip: {
     } & _radix_ui_react_tooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
 };
 
-type Props$1J = {
-    tooltip?: Props$1K['tooltip'];
-    tooltipPlacement?: Props$1K['placement'];
-    tooltipVariant?: Props$1K['variant'];
-    asChild?: Props$1K['triggerAsChild'];
+type Props$1K = {
+    tooltip?: Props$1L['tooltip'];
+    tooltipPlacement?: Props$1L['placement'];
+    tooltipVariant?: Props$1L['variant'];
+    asChild?: Props$1L['triggerAsChild'];
     text?: string | (() => string);
 } & ComponentProps<'button'>;
-declare const Clipboard: ({ ref, text: textProp, children, tooltip, tooltipPlacement, tooltipVariant: tooltipVariantProp, asChild, onClick, className, ...restButtonProps }: Props$1J) => react_jsx_runtime.JSX.Element;
+declare const Clipboard: ({ ref, text: textProp, children, tooltip, tooltipPlacement, tooltipVariant: tooltipVariantProp, asChild, onClick, className, ...restButtonProps }: Props$1K) => react_jsx_runtime.JSX.Element;
 
 type ClipboardProps$1 = Pick<ComponentProps<typeof Clipboard>, 'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'>;
 type ButtonProps$2 = Omit<ComponentProps<typeof Button>, 'disabled' | 'icon'>;
-type Props$1I = ClipboardProps$1 & ButtonProps$2 & {
+type Props$1J = ClipboardProps$1 & ButtonProps$2 & {
     icon?: ReactNode;
 };
-declare const ClipboardButton: ({ text, tooltip, tooltipPlacement, tooltipVariant, icon, variant, children, ...rest }: Props$1I) => react_jsx_runtime.JSX.Element;
+declare const ClipboardButton: ({ text, tooltip, tooltipPlacement, tooltipVariant, icon, variant, children, ...rest }: Props$1J) => react_jsx_runtime.JSX.Element;
 
 type ClipboardProps = Pick<ComponentProps<typeof Clipboard>, 'text' | 'tooltip' | 'tooltipPlacement' | 'tooltipVariant'>;
 type ButtonProps$1 = Omit<ComponentProps<typeof ButtonInline>, 'disabled'>;
-type Props$1H = {
+type Props$1I = {
     hideIcon?: boolean;
 } & ClipboardProps & ButtonProps$1;
-declare const ClipboardInline: ({ text, tooltip, tooltipPlacement, tooltipVariant, children, hideIcon, ...rest }: Props$1H) => react_jsx_runtime.JSX.Element;
+declare const ClipboardInline: ({ text, tooltip, tooltipPlacement, tooltipVariant, children, hideIcon, ...rest }: Props$1I) => react_jsx_runtime.JSX.Element;
+
+type ExportMenuItem = {
+    /** Menu label, e.g. "Download as CSV". */
+    label: string;
+    onSelect: () => void;
+};
+type Props$1H = {
+    items: ExportMenuItem[];
+    /** Accessible name + tooltip for the trigger, e.g. "Export table". */
+    label: string;
+    size?: 'icon-xs' | 'icon-sm';
+};
+/**
+ * Download-icon trigger with a menu of export formats.
+ *
+ * Lives in the root barrel rather than inside `ZoomableSvg` on purpose: that
+ * component ships in the lazy `@keboola/design/mermaid` chunk, and importing
+ * Radix's menu there costs ~2.7 kB brotlied against a tight budget. Callers that
+ * are already paying for the barrel inject this instead.
+ *
+ * Renders argo chrome unconditionally. `ArgoDesignContext` is scoped per bundle
+ * entry, so a consumer whose neighbouring toolbar buttons come from a lazy
+ * subpath (`ZoomableSvg` via `@keboola/design/mermaid`, which sees the argo
+ * default) would otherwise place a legacy-styled trigger beside argo-styled
+ * siblings — different border, background and icon colour from the same
+ * `variant="outline"`.
+ */
+declare const ExportMenu: ({ items, label, size }: Props$1H) => react_jsx_runtime.JSX.Element;
 
 /**
  * Compound component for readonly value/command boxes with inline copy.
@@ -586,6 +616,7 @@ declare const Popconfirm: {
     Content: ({ className, onInteractOutside, ...props }: {
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
@@ -625,7 +656,6 @@ declare const Popconfirm: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -1292,6 +1322,7 @@ declare const RadioGroup: {
     Item: <T extends string = string>({ children, tooltip, tooltipVariant, tooltipPlacement, description, ...props }: {
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
@@ -1332,7 +1363,6 @@ declare const RadioGroup: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -1585,8 +1615,8 @@ declare const RadioGroup: {
     } & {
         value: T;
         tooltip?: react.ReactNode;
-        tooltipVariant?: Props$1K["variant"];
-        tooltipPlacement?: Props$1K["placement"];
+        tooltipVariant?: Props$1L["variant"];
+        tooltipPlacement?: Props$1L["placement"];
         description?: react.ReactNode;
     }) => react_jsx_runtime.JSX.Element;
     Separator: () => react_jsx_runtime.JSX.Element;
@@ -1667,11 +1697,7 @@ type SelectItemGroup = {
     items: readonly SelectItem[];
 };
 type TriggerProps = ComponentProps<typeof SelectTrigger>;
-/**
- * Props for `Select`. Combines Radix `Select.Root` control props with `Select.Trigger` chrome and the
- * convenience `items` shape (flat list, or grouped lists with optional labels).
- */
-type Props$15 = Pick<SelectRootProps, 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'name' | 'required' | 'open' | 'defaultOpen' | 'onOpenChange'> & Pick<TriggerProps, 'variant' | 'state' | 'sizing' | 'placeholder' | 'id' | 'className'> & {
+type Props$15 = Pick<SelectRootProps, 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'name' | 'required' | 'open' | 'defaultOpen' | 'onOpenChange' | 'dir' | 'autoComplete' | 'form'> & Pick<TriggerProps, 'variant' | 'state' | 'sizing' | 'placeholder' | 'id' | 'className' | 'onBlur' | 'aria-describedby' | 'aria-invalid' | 'aria-required'> & {
     items?: readonly (SelectItem | SelectItemGroup)[];
 };
 /**
@@ -1685,7 +1711,7 @@ type Props$15 = Pick<SelectRootProps, 'value' | 'defaultValue' | 'onValueChange'
  * `Select.Item`) for custom item layouts; the top-level `Select` covers the common cases.
  */
 declare const Select: {
-    ({ value, defaultValue, onValueChange, disabled, name, required, open, defaultOpen, onOpenChange, variant, state, sizing, placeholder, id, className, items, }: Props$15): react_jsx_runtime.JSX.Element;
+    ({ value, defaultValue, onValueChange, disabled, name, required, open, defaultOpen, onOpenChange, dir, autoComplete, form, variant, state, sizing, placeholder, id, className, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, items, }: Props$15): react_jsx_runtime.JSX.Element;
     Root: (props: SelectRootProps) => react_jsx_runtime.JSX.Element;
     Trigger: ({ ref, className, variant, state, sizing, placeholder, ...props }: _radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement> & Omit<class_variance_authority.VariantProps<(props?: ({
         variant?: "primary" | "secondary" | "argo" | null | undefined;
@@ -1714,8 +1740,8 @@ type Props$14 = {
     description?: ReactNode;
     variant?: VariantProps<typeof fieldBoxVariants>['variant'];
     position?: 'start' | 'end';
-    tooltip?: Props$1K['tooltip'];
-    tooltipPlacement?: Props$1K['placement'];
+    tooltip?: Props$1L['tooltip'];
+    tooltipPlacement?: Props$1L['placement'];
 } & Omit<ComponentProps<typeof Root$8>, 'id'>;
 declare function Checkbox(prop: Omit<Props$14, 'checked' | 'onCheckedChange'> & {
     checked?: boolean;
@@ -1760,12 +1786,12 @@ type ComboboxItemProps$1 = ComponentProps<typeof ComboboxItem>;
 type Indicator$1 = NonNullable<ComboboxItemProps$1['indicator']>;
 type PublicComboboxInputProps = Pick<ComboboxInputProps$1, 'placeholder' | 'id'> & Pick<ComboboxInputGroupProps$1, 'variant' | 'focusVariant' | 'sizing' | 'state' | 'className'>;
 type PublicComboboxProps<Value> = Pick<ComboboxProps$1<Value>, 'disabled' | 'inputRef' | 'value' | 'defaultValue' | 'onValueChange' | 'itemToStringLabel' | 'itemToStringValue' | 'filter' | 'onOpenChangeComplete' | 'isItemEqualToValue'>;
-type CreatableProps<Value> = {
+type CreatableProps$1<Value> = {
     allowCreate?: boolean;
     queryToCreateLabel?: (query: string) => ReactNode;
     queryToCreateValue?: (query: string) => Value;
 };
-type Props$$<Value, GroupShape extends Group<Value> = Group<Value>> = PublicComboboxInputProps & PublicComboboxProps<Value> & CreatableProps<Value> & {
+type Props$$<Value, GroupShape extends Group<Value> = Group<Value>> = PublicComboboxInputProps & PublicComboboxProps<Value> & CreatableProps$1<Value> & {
     items?: readonly (Value | GroupShape)[];
     allowClear?: boolean;
     empty?: ReactNode;
@@ -2137,12 +2163,17 @@ type ComboboxInputGroupProps = ComponentProps<typeof Combobox.InputGroup>;
 type ComboboxItemProps = ComponentProps<typeof Combobox.Item>;
 type ComboboxChipsProps = ComponentProps<typeof Combobox.Chips>;
 type Indicator = NonNullable<ComboboxItemProps['indicator']>;
+type CreatableProps<Value> = {
+    allowCreate?: boolean;
+    queryToCreateLabel?: (query: string) => ReactNode;
+    queryToCreateValue?: (query: string) => Value;
+};
 /**
  * Props for `MultiCombobox`. Generic over `Value` (the item shape) and `GroupShape` (optional group wrapper).
  * Use `itemToLabel` / `itemToIcon` / `itemToDisabled` to project custom item shapes; use `filter` to override
- * the default substring matcher.
+ * the default substring matcher. Pass `allowCreate` to let the user add free-form values not in `items`.
  */
-type Props$_<Value, GroupShape extends Group<Value> = Group<Value>> = Pick<ComboboxInputProps, 'placeholder' | 'id'> & Pick<ComboboxInputGroupProps, 'variant' | 'focusVariant' | 'sizing' | 'state' | 'className'> & Pick<ComboboxProps<Value>, 'disabled' | 'inputRef' | 'value' | 'defaultValue' | 'onValueChange' | 'itemToStringLabel' | 'itemToStringValue' | 'filter'> & Pick<ComboboxChipsProps, 'itemToChipLabel' | 'itemToChipColor' | 'maxVisible'> & {
+type Props$_<Value, GroupShape extends Group<Value> = Group<Value>> = Pick<ComboboxInputProps, 'placeholder' | 'id'> & Pick<ComboboxInputGroupProps, 'variant' | 'focusVariant' | 'sizing' | 'state' | 'className'> & Pick<ComboboxProps<Value>, 'disabled' | 'inputRef' | 'value' | 'defaultValue' | 'onValueChange' | 'itemToStringLabel' | 'itemToStringValue' | 'filter'> & Pick<ComboboxChipsProps, 'itemToChipLabel' | 'itemToChipColor' | 'maxVisible'> & CreatableProps<Value> & {
     items?: readonly (Value | GroupShape)[];
     allowClear?: boolean;
     allowSelectAll?: boolean;
@@ -2160,12 +2191,13 @@ type Props$_<Value, GroupShape extends Group<Value> = Group<Value>> = Pick<Combo
  * Items render as chips above the input; `maxVisible` collapses excess into a `+N more` chip.
  * **When NOT to use:** for single selection use `Combobox`; for short enums without search use `Select`.
  * **Composition:** wrap in `FormGroup` for label + help text, or use `useAppForm` for form integration.
- * Pass `allowSelectAll` for a sticky "Select All" item when the full enum is small.
+ * Pass `allowSelectAll` for a sticky "Select All" item when the full enum is small. Pass `allowCreate`
+ * to let the user add free-form values that are not in `items` (e.g. entering column names by hand).
  *
  * @see RECIPES.md#creatable-multi-combobox — for free-form-plus-enumerated patterns
  * @see RECIPES.md#filter-toolbar — for combining multi-select with other filter chips
  */
-declare const MultiCombobox: <Value, GroupShape extends Group<Value> = Group<Value>>({ items: _itemsProp, value: _valueProp, defaultValue, onValueChange, itemToStringLabel, itemToStringValue, disabled, filter: filterProp, inputRef, variant, sizing, focusVariant, state, placeholder, allowClear, id, className, allowSelectAll, empty, indicator, itemToDisabled, itemToLabel, itemToIcon, groupToLabel, itemToChipLabel, itemToChipColor, maxVisible, }: Props$_<Value, GroupShape>) => react_jsx_runtime.JSX.Element;
+declare const MultiCombobox: <Value, GroupShape extends Group<Value> = Group<Value>>({ items: _itemsProp, value: _valueProp, defaultValue, onValueChange, itemToStringLabel, itemToStringValue, disabled, filter: filterProp, inputRef, variant, sizing, focusVariant, state, placeholder, allowClear, id, className, allowSelectAll, empty, indicator, allowCreate, queryToCreateValue, queryToCreateLabel, itemToDisabled, itemToLabel, itemToIcon, groupToLabel, itemToChipLabel, itemToChipColor, maxVisible, }: Props$_<Value, GroupShape>) => react_jsx_runtime.JSX.Element;
 
 type InputGroupProps$7 = Pick<ComponentProps<typeof InputGroup>, 'variant' | 'sizing' | 'focusVariant' | 'state'>;
 type TextareaNativeProps = Omit<ComponentProps<typeof InputGroup.TextArea>, 'value' | 'defaultValue' | 'rows' | 'maxRows'>;
@@ -2510,6 +2542,7 @@ declare const FormGroup: {
     Help: ({ children, ...rest }: {
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
@@ -2549,7 +2582,6 @@ declare const FormGroup: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -2800,6 +2832,7 @@ declare const FormGroup: {
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: react.ReactNode;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -2843,7 +2876,6 @@ declare const FormGroup: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -3123,6 +3155,7 @@ declare const FormGroup: {
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: react.ReactNode;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -3166,7 +3199,6 @@ declare const FormGroup: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -3442,6 +3474,7 @@ declare const FormGroup: {
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -3485,7 +3518,6 @@ declare const FormGroup: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -3761,6 +3793,8 @@ declare const FormGroup: {
     Textarea: (props: {
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        wrap?: string | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -3805,7 +3839,6 @@ declare const FormGroup: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -4049,7 +4082,6 @@ declare const FormGroup: {
         disabled?: boolean | undefined | undefined;
         value?: string | null | undefined;
         onValueChange?: (((value: string) => void) & ((value: string) => void)) | undefined;
-        wrap?: string | undefined | undefined;
         autoComplete?: string | undefined | undefined;
         maxLength?: number | undefined | undefined;
         minLength?: number | undefined | undefined;
@@ -4695,8 +4727,8 @@ declare const AppShell: (({ ref, className, children, ...props }: RootProps$4 &
         ref?: Ref<ComponentRef<"div">>;
     }) => react_jsx_runtime.JSX.Element;
     /**
-     * Main content outlet. Applies an opinionated default page gutter (`tw-p-6`)
-     * so content looks right out of the box; override the padding (e.g. `tw-p-0`)
+     * Main content outlet. Applies an opinionated default page gutter (`tw:p-6`)
+     * so content looks right out of the box; override the padding (e.g. `tw:p-0`)
      * when the app owns its own gutter.
      */
     Main: ({ ref, className, asChild, children, ...props }: SlotProps & {
@@ -4725,7 +4757,7 @@ type FooterProps = ComponentProps<'footer'> & {
  * frame (sidebar / navbar) is owned by the shell, not by `PageLayout` — so the `Root` adds no
  * outer page padding of its own (`PageLayout.Footer` keeps its own action-bar padding).
  *
- * **When to use:** every new kbc-ui page. Do not roll your own `<div className="tw-flex tw-flex-col">`
+ * **When to use:** every new kbc-ui page. Do not roll your own `<div className="tw:flex tw:flex-col">`
  * chrome. Host `PageHeader.Index` / `PageHeader.Detail` inside `PageLayout.Header` for the structured
  * page-header patterns.
  * **When NOT to use:** the left-rail `Sidebar` lives in the app shell outside `PageLayout`. For embedded
@@ -4898,7 +4930,7 @@ declare const PageToolbar: (({ ref, className, children, ...props }: DivProps) =
     Token: ({ children, popover, onRemove, removeAriaLabel, ...props }: Omit<Omit<Pick<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & class_variance_authority.VariantProps<(props?: ({
         variant?: "default" | "tag" | "pill" | null | undefined;
         color?: "blue" | "cyan" | "gray" | "green" | "orange" | "purple" | "red" | "teal" | "white" | "gray-darker" | "gray-inverse" | "green-darker" | "green-inverse" | "blue-inverse" | "orange-inverse" | "amber" | "amber-inverse" | "teal-inverse" | "purple-inverse" | "cyan-inverse" | "sidebar-primary" | null | undefined;
-    } & class_variance_authority_types.ClassProp) | undefined) => string>, "variant" | "color"> & Omit<react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & {
+    } & class_variance_authority_types.ClassProp) | undefined) => string>, "color" | "variant"> & Omit<react.ClassAttributes<HTMLSpanElement> & react.HTMLAttributes<HTMLSpanElement> & {
         asChild?: boolean;
     }, "prefix"> & {
         prefix?: ReactNode;
@@ -4906,7 +4938,7 @@ declare const PageToolbar: (({ ref, className, children, ...props }: DivProps) =
         suffix?: ReactNode;
         suffixVariant?: "inline" | "floating" | null | undefined;
         labelClassName?: string;
-    }, "ref">, "popover" | "variant" | "color" | "children" | "asChild" | "suffix"> & {
+    }, "ref">, "color" | "popover" | "variant" | "children" | "asChild" | "suffix"> & {
         children: ReactNode;
         popover: ReactNode;
         onRemove: () => void;
@@ -4921,7 +4953,7 @@ declare const PageToolbar: (({ ref, className, children, ...props }: DivProps) =
 type Props$l = {
     /** `wordmark` (default, full logo) or `mark` (square icon); each falls back to the other. */
     variant?: 'mark' | 'wordmark';
-    /** Sets the logo height; aspect ratio is preserved (e.g. `tw-h-7`). */
+    /** Sets the logo height; aspect ratio is preserved (e.g. `tw:h-7`). */
     className?: string;
 };
 /**
@@ -4974,6 +5006,7 @@ declare const Sidebar: {
     Separator: ({ className, ...props }: {
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
@@ -5014,7 +5047,6 @@ declare const Sidebar: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -5281,6 +5313,7 @@ declare const Sidebar: {
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
         popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
@@ -5322,7 +5355,6 @@ declare const Sidebar: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -5928,8 +5960,8 @@ type Props$9 = {
     tooltip?: ReactNode;
     twoLines?: boolean;
     noTooltip?: boolean;
-    tooltipVariant?: Props$1K['variant'];
-    tooltipPlacement?: Props$1K['placement'];
+    tooltipVariant?: Props$1L['variant'];
+    tooltipPlacement?: Props$1L['placement'];
 } & Omit<ComponentProps<'span'>, 'children'>;
 declare const Truncated: ({ ref, text, tooltip, className, twoLines, noTooltip, tooltipVariant, tooltipPlacement, ...rest }: Props$9) => react_jsx_runtime.JSX.Element;
 
@@ -6252,6 +6284,7 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: react.ReactNode;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -6295,7 +6328,6 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -6575,6 +6607,7 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: react.ReactNode;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -6618,7 +6651,6 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -6899,6 +6931,7 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -6940,7 +6973,6 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -7218,6 +7250,8 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
     readonly TextareaField: ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }: FieldItemProps & Omit<{
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        wrap?: string | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -7262,7 +7296,6 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -7506,7 +7539,6 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
         disabled?: boolean | undefined | undefined;
         value?: string | null | undefined;
         onValueChange?: (((value: string) => void) & ((value: string) => void)) | undefined;
-        wrap?: string | undefined | undefined;
         autoComplete?: string | undefined | undefined;
         maxLength?: number | undefined | undefined;
         minLength?: number | undefined | undefined;
@@ -7525,42 +7557,29 @@ declare const useAppForm: <TFormData, TOnMount extends _tanstack_react_form.Form
         focusVariant?: "off" | "on" | "default" | null | undefined;
         containerClassName?: string | undefined;
     }, "id" | "name" | "onBlur" | "value" | "onValueChange">) => react_jsx_runtime.JSX.Element;
-    readonly SelectField: ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, items, options, placeholder, triggerClassName, variant, state, sizing, ...rootProps }: FieldItemProps & {
-        placeholder?: string;
-        triggerClassName?: string;
-        variant?: "primary" | "secondary" | "inline" | null | undefined;
-        state?: "warning" | "default" | "error" | null | undefined;
+    readonly SelectField: ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, triggerClassName, ...selectProps }: FieldItemProps & Omit<Pick<SelectRootProps, "name" | "form" | "defaultValue" | "dir" | "open" | "defaultOpen" | "onOpenChange" | "disabled" | "value" | "onValueChange" | "autoComplete" | "required"> & Pick<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement> & Omit<class_variance_authority.VariantProps<(props?: ({
+        variant?: "primary" | "secondary" | "argo" | null | undefined;
         sizing?: "medium" | "small" | "default" | null | undefined;
-    } & Omit<SelectRootProps, "children" | "value" | "onValueChange"> & ({
-        items: readonly {
-            value: string;
-            label: react.ReactNode;
-            disabled?: boolean;
-        }[];
-        options?: readonly {
-            value: string;
-            label: react.ReactNode;
-            disabled?: boolean;
-        }[];
-    } | {
-        items?: readonly {
-            value: string;
-            label: react.ReactNode;
-            disabled?: boolean;
-        }[];
-        options: readonly {
-            value: string;
-            label: react.ReactNode;
-            disabled?: boolean;
-        }[];
-    })) => react_jsx_runtime.JSX.Element;
+        state?: "warning" | "default" | "error" | null | undefined;
+    } & class_variance_authority_types.ClassProp) | undefined) => string>, "variant"> & {
+        variant?: Exclude<class_variance_authority.VariantProps<(props?: ({
+            variant?: "primary" | "secondary" | "argo" | null | undefined;
+            sizing?: "medium" | "small" | "default" | null | undefined;
+            state?: "warning" | "default" | "error" | null | undefined;
+        } & class_variance_authority_types.ClassProp) | undefined) => string>["variant"], "argo"> | "inline";
+    } & Pick<_radix_ui_react_select.SelectValueProps & react.RefAttributes<HTMLSpanElement>, "placeholder">, "id" | "variant" | "className" | "aria-describedby" | "aria-invalid" | "aria-required" | "onBlur" | "state" | "placeholder" | "sizing"> & {
+        items?: readonly (SelectItem | SelectItemGroup)[];
+    }, "id" | "name" | "defaultValue" | "className" | "aria-describedby" | "aria-invalid" | "aria-required" | "onBlur" | "value" | "onValueChange" | "items"> & {
+        items: readonly (SelectItem | SelectItemGroup)[];
+        triggerClassName?: string;
+    }) => react_jsx_runtime.JSX.Element;
     readonly CheckboxField: ({ className, children, ...checkboxProps }: Pick<FieldItemProps, "className"> & Omit<Omit<{
         id?: string | number;
         description?: react.ReactNode;
         variant?: class_variance_authority.VariantProps<typeof fieldBoxVariants>["variant"];
         position?: "start" | "end";
-        tooltip?: Props$1K["tooltip"];
-        tooltipPlacement?: Props$1K["placement"];
+        tooltip?: Props$1L["tooltip"];
+        tooltipPlacement?: Props$1L["placement"];
     } & Omit<_radix_ui_react_checkbox.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "id">, "checked" | "onCheckedChange"> & {
         checked?: _radix_ui_react_checkbox.CheckedState;
         onCheckedChange?: (checked: _radix_ui_react_checkbox.CheckedState) => void;
@@ -7597,6 +7616,7 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: react.ReactNode;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -7640,7 +7660,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -7920,6 +7939,7 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: react.ReactNode;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -7963,7 +7983,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -8244,6 +8263,7 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         content?: string | undefined | undefined;
         size?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -8285,7 +8305,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -8563,6 +8582,8 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
     readonly TextareaField: ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }: FieldItemProps & Omit<{
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
+        wrap?: string | undefined | undefined;
+        color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         id?: string | undefined | undefined;
         name?: string | undefined | undefined;
@@ -8607,7 +8628,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -8851,7 +8871,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         disabled?: boolean | undefined | undefined;
         value?: string | null | undefined;
         onValueChange?: (((value: string) => void) & ((value: string) => void)) | undefined;
-        wrap?: string | undefined | undefined;
         autoComplete?: string | undefined | undefined;
         maxLength?: number | undefined | undefined;
         minLength?: number | undefined | undefined;
@@ -8870,42 +8889,29 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         focusVariant?: "off" | "on" | "default" | null | undefined;
         containerClassName?: string | undefined;
     }, "id" | "name" | "onBlur" | "value" | "onValueChange">) => react_jsx_runtime.JSX.Element;
-    readonly SelectField: ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, items, options, placeholder, triggerClassName, variant, state, sizing, ...rootProps }: FieldItemProps & {
-        placeholder?: string;
-        triggerClassName?: string;
-        variant?: "primary" | "secondary" | "inline" | null | undefined;
-        state?: "warning" | "default" | "error" | null | undefined;
+    readonly SelectField: ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, triggerClassName, ...selectProps }: FieldItemProps & Omit<Pick<SelectRootProps, "name" | "form" | "defaultValue" | "dir" | "open" | "defaultOpen" | "onOpenChange" | "disabled" | "value" | "onValueChange" | "autoComplete" | "required"> & Pick<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement> & Omit<class_variance_authority.VariantProps<(props?: ({
+        variant?: "primary" | "secondary" | "argo" | null | undefined;
         sizing?: "medium" | "small" | "default" | null | undefined;
-    } & Omit<SelectRootProps, "children" | "value" | "onValueChange"> & ({
-        items: readonly {
-            value: string;
-            label: react.ReactNode;
-            disabled?: boolean;
-        }[];
-        options?: readonly {
-            value: string;
-            label: react.ReactNode;
-            disabled?: boolean;
-        }[];
-    } | {
-        items?: readonly {
-            value: string;
-            label: react.ReactNode;
-            disabled?: boolean;
-        }[];
-        options: readonly {
-            value: string;
-            label: react.ReactNode;
-            disabled?: boolean;
-        }[];
-    })) => react_jsx_runtime.JSX.Element;
+        state?: "warning" | "default" | "error" | null | undefined;
+    } & class_variance_authority_types.ClassProp) | undefined) => string>, "variant"> & {
+        variant?: Exclude<class_variance_authority.VariantProps<(props?: ({
+            variant?: "primary" | "secondary" | "argo" | null | undefined;
+            sizing?: "medium" | "small" | "default" | null | undefined;
+            state?: "warning" | "default" | "error" | null | undefined;
+        } & class_variance_authority_types.ClassProp) | undefined) => string>["variant"], "argo"> | "inline";
+    } & Pick<_radix_ui_react_select.SelectValueProps & react.RefAttributes<HTMLSpanElement>, "placeholder">, "id" | "variant" | "className" | "aria-describedby" | "aria-invalid" | "aria-required" | "onBlur" | "state" | "placeholder" | "sizing"> & {
+        items?: readonly (SelectItem | SelectItemGroup)[];
+    }, "id" | "name" | "defaultValue" | "className" | "aria-describedby" | "aria-invalid" | "aria-required" | "onBlur" | "value" | "onValueChange" | "items"> & {
+        items: readonly (SelectItem | SelectItemGroup)[];
+        triggerClassName?: string;
+    }) => react_jsx_runtime.JSX.Element;
     readonly CheckboxField: ({ className, children, ...checkboxProps }: Pick<FieldItemProps, "className"> & Omit<Omit<{
         id?: string | number;
         description?: react.ReactNode;
         variant?: class_variance_authority.VariantProps<typeof fieldBoxVariants>["variant"];
         position?: "start" | "end";
-        tooltip?: Props$1K["tooltip"];
-        tooltipPlacement?: Props$1K["placement"];
+        tooltip?: Props$1L["tooltip"];
+        tooltipPlacement?: Props$1L["placement"];
     } & Omit<_radix_ui_react_checkbox.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "id">, "checked" | "onCheckedChange"> & {
         checked?: _radix_ui_react_checkbox.CheckedState;
         onCheckedChange?: (checked: _radix_ui_react_checkbox.CheckedState) => void;
@@ -8942,6 +8948,7 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
             content?: string | undefined | undefined;
             size?: number | undefined | undefined;
             translate?: "yes" | "no" | undefined | undefined;
+            color?: string | undefined | undefined;
             prefix?: react.ReactNode;
             id?: string | undefined | undefined;
             name?: string | undefined | undefined;
@@ -8985,7 +8992,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
             vocab?: string | undefined | undefined;
             autoCorrect?: string | undefined | undefined;
             autoSave?: string | undefined | undefined;
-            color?: string | undefined | undefined;
             itemProp?: string | undefined | undefined;
             itemScope?: boolean | undefined | undefined;
             itemType?: string | undefined | undefined;
@@ -9265,6 +9271,7 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
             content?: string | undefined | undefined;
             size?: number | undefined | undefined;
             translate?: "yes" | "no" | undefined | undefined;
+            color?: string | undefined | undefined;
             prefix?: react.ReactNode;
             id?: string | undefined | undefined;
             name?: string | undefined | undefined;
@@ -9308,7 +9315,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
             vocab?: string | undefined | undefined;
             autoCorrect?: string | undefined | undefined;
             autoSave?: string | undefined | undefined;
-            color?: string | undefined | undefined;
             itemProp?: string | undefined | undefined;
             itemScope?: boolean | undefined | undefined;
             itemType?: string | undefined | undefined;
@@ -9589,6 +9595,7 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
             content?: string | undefined | undefined;
             size?: number | undefined | undefined;
             translate?: "yes" | "no" | undefined | undefined;
+            color?: string | undefined | undefined;
             prefix?: string | undefined | undefined;
             id?: string | undefined | undefined;
             name?: string | undefined | undefined;
@@ -9630,7 +9637,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
             vocab?: string | undefined | undefined;
             autoCorrect?: string | undefined | undefined;
             autoSave?: string | undefined | undefined;
-            color?: string | undefined | undefined;
             itemProp?: string | undefined | undefined;
             itemScope?: boolean | undefined | undefined;
             itemType?: string | undefined | undefined;
@@ -9908,6 +9914,8 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
         readonly TextareaField: ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }: FieldItemProps & Omit<{
             content?: string | undefined | undefined;
             translate?: "yes" | "no" | undefined | undefined;
+            wrap?: string | undefined | undefined;
+            color?: string | undefined | undefined;
             prefix?: string | undefined | undefined;
             id?: string | undefined | undefined;
             name?: string | undefined | undefined;
@@ -9952,7 +9960,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
             vocab?: string | undefined | undefined;
             autoCorrect?: string | undefined | undefined;
             autoSave?: string | undefined | undefined;
-            color?: string | undefined | undefined;
             itemProp?: string | undefined | undefined;
             itemScope?: boolean | undefined | undefined;
             itemType?: string | undefined | undefined;
@@ -10196,7 +10203,6 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
             disabled?: boolean | undefined | undefined;
             value?: string | null | undefined;
             onValueChange?: (((value: string) => void) & ((value: string) => void)) | undefined;
-            wrap?: string | undefined | undefined;
             autoComplete?: string | undefined | undefined;
             maxLength?: number | undefined | undefined;
             minLength?: number | undefined | undefined;
@@ -10215,42 +10221,29 @@ declare const withForm: <TFormData, TOnMount extends _tanstack_react_form.FormVa
             focusVariant?: "off" | "on" | "default" | null | undefined;
             containerClassName?: string | undefined;
         }, "id" | "name" | "onBlur" | "value" | "onValueChange">) => react_jsx_runtime.JSX.Element;
-        readonly SelectField: ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, items, options, placeholder, triggerClassName, variant, state, sizing, ...rootProps }: FieldItemProps & {
-            placeholder?: string;
-            triggerClassName?: string;
-            variant?: "primary" | "secondary" | "inline" | null | undefined;
-            state?: "warning" | "default" | "error" | null | undefined;
+        readonly SelectField: ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, triggerClassName, ...selectProps }: FieldItemProps & Omit<Pick<SelectRootProps, "name" | "form" | "defaultValue" | "dir" | "open" | "defaultOpen" | "onOpenChange" | "disabled" | "value" | "onValueChange" | "autoComplete" | "required"> & Pick<_radix_ui_react_select.SelectTriggerProps & react.RefAttributes<HTMLButtonElement> & Omit<class_variance_authority.VariantProps<(props?: ({
+            variant?: "primary" | "secondary" | "argo" | null | undefined;
             sizing?: "medium" | "small" | "default" | null | undefined;
-        } & Omit<SelectRootProps, "children" | "value" | "onValueChange"> & ({
-            items: readonly {
-                value: string;
-                label: react.ReactNode;
-                disabled?: boolean;
-            }[];
-            options?: readonly {
-                value: string;
-                label: react.ReactNode;
-                disabled?: boolean;
-            }[];
-        } | {
-            items?: readonly {
-                value: string;
-                label: react.ReactNode;
-                disabled?: boolean;
-            }[];
-            options: readonly {
-                value: string;
-                label: react.ReactNode;
-                disabled?: boolean;
-            }[];
-        })) => react_jsx_runtime.JSX.Element;
+            state?: "warning" | "default" | "error" | null | undefined;
+        } & class_variance_authority_types.ClassProp) | undefined) => string>, "variant"> & {
+            variant?: Exclude<class_variance_authority.VariantProps<(props?: ({
+                variant?: "primary" | "secondary" | "argo" | null | undefined;
+                sizing?: "medium" | "small" | "default" | null | undefined;
+                state?: "warning" | "default" | "error" | null | undefined;
+            } & class_variance_authority_types.ClassProp) | undefined) => string>["variant"], "argo"> | "inline";
+        } & Pick<_radix_ui_react_select.SelectValueProps & react.RefAttributes<HTMLSpanElement>, "placeholder">, "id" | "variant" | "className" | "aria-describedby" | "aria-invalid" | "aria-required" | "onBlur" | "state" | "placeholder" | "sizing"> & {
+            items?: readonly (SelectItem | SelectItemGroup)[];
+        }, "id" | "name" | "defaultValue" | "className" | "aria-describedby" | "aria-invalid" | "aria-required" | "onBlur" | "value" | "onValueChange" | "items"> & {
+            items: readonly (SelectItem | SelectItemGroup)[];
+            triggerClassName?: string;
+        }) => react_jsx_runtime.JSX.Element;
         readonly CheckboxField: ({ className, children, ...checkboxProps }: Pick<FieldItemProps, "className"> & Omit<Omit<{
             id?: string | number;
             description?: react.ReactNode;
             variant?: class_variance_authority.VariantProps<typeof fieldBoxVariants>["variant"];
             position?: "start" | "end";
-            tooltip?: Props$1K["tooltip"];
-            tooltipPlacement?: Props$1K["placement"];
+            tooltip?: Props$1L["tooltip"];
+            tooltipPlacement?: Props$1L["placement"];
         } & Omit<_radix_ui_react_checkbox.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "id">, "checked" | "onCheckedChange"> & {
             checked?: _radix_ui_react_checkbox.CheckedState;
             onCheckedChange?: (checked: _radix_ui_react_checkbox.CheckedState) => void;
@@ -10356,8 +10349,29 @@ type Props = {
      * element itself is allowed). `MermaidDiagram` sets this for node/icon labels.
      */
     allowForeignObject?: boolean;
+    /**
+     * Extra toolbar controls, rendered between the copy and fullscreen buttons.
+     *
+     * Injected rather than built in, so export behaviour — filenames,
+     * rasterization, error reporting — stays with the consumer and this component
+     * keeps shipping in the lazy `@keboola/design/mermaid` chunk with no download
+     * dependencies of its own. Pass `ExportMenu` here. Receives the sanitized
+     * SVG so an exporter writes exactly what is on screen.
+     */
+    renderActions?: (safeSvg: string) => ReactNode;
 };
-declare const ZoomableSvg: ({ html, copyText, className, allowForeignObject }: Props) => react_jsx_runtime.JSX.Element;
+declare const ZoomableSvg: ({ html, copyText, className, allowForeignObject, renderActions, }: Props) => react_jsx_runtime.JSX.Element;
+
+declare const toSvgFileContent: (svg: string) => string;
+/**
+ * Rasterize SVG markup to a PNG blob at 2x for legible text.
+ *
+ * The SVG is loaded as a data URL rather than a blob URL: an <img> loading SVG
+ * is treated as a foreign resource, so a blob URL would taint the canvas and
+ * make toBlob throw a SecurityError. A background is painted first because a
+ * transparent PNG reads as unusable when pasted into a slide deck.
+ */
+declare const svgToPngBlob: (svg: string, background?: string) => Promise<Blob>;
 
 type ColorSlot = keyof Omit<NonNullable<Brand['theme']['colors']>, 'sidebar' | 'chart'>;
 type SidebarSlot = keyof NonNullable<NonNullable<Brand['theme']['colors']>['sidebar']>;
@@ -10396,4 +10410,4 @@ declare const contrastRatio: (fg: string, bg: string) => number;
 /** WCAG level for normal-size text at a given ratio. */
 declare const wcagLevel: (ratio: number) => "AAA" | "AA" | "fail";
 
-export { Alert, AlertModal, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$N as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandEditor, type BrandEditorProps, type BrandId, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, ChangeClassification, ChartPanel, type RootProps as ChartPanelProps, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, type ColorScheme, type ColorSlot, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, type RootProps$2 as DashboardHeroProps, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$6 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$5 as ErrorStateProps, type Variant as ErrorStateVariant, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HelpBlock, HoverCard, InlineStepDetail, type Props$L as InlineStepDetailProps, InlineStepLabel, type Props$K as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, Kbd, Label, type LineInformation, Link, Markdown, MarkedText, MergeConflict, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, type RootProps$7 as OtpInputProps, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1m as Props, Question, type QuestionAnswers, QuestionBlock, type Props$D as QuestionBlockProps, type QuestionOption, type Props$E as QuestionProps, type QuestionStep, RadioGroup, type RadiusSize, ResizableHandle, ResizablePanelGroup, type ResolvedColorScheme, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, type SidebarSlot, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, type SpotlightTarget, StatCard, StatCardGrid, type Props$2 as StatCardGridProps, type RootProps$1 as StatCardProps, type TrendDirection as StatCardTrendDirection, type TrendProps as StatCardTrendProps, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, type TableSortDirection, Tabs, TabsContent, type TargetRect, TextInput, Textarea, type Theme, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, type Tokens, ToolCallApproval, type ToolCallApprovalProps, type ToolCallApprovalStatus, ToolCallChip, type ToolCallChipProps, type ToolCallState, Tooltip, type Props$1K as TooltipProps, TooltipProvider, type Trigger, Truncated, UsageStats, UsageStatsRing, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, setSubmitError, tableAriaSort, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, wcagLevel, withForm };
+export { Alert, AlertModal, AnswerSummary, type AnswerItem as AnswerSummaryItem, type Props$N as AnswerSummaryProps, type Variant$5 as AnswerSummaryVariant, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandEditor, type BrandEditorProps, type BrandId, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, type CalendarProps, Card, ChangeClassification, ChartPanel, type RootProps as ChartPanelProps, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, type ColorScheme, type ColorSlot, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, type RootProps$2 as DashboardHeroProps, DateInput, DatePicker, type DateRange, DateRangeInput, DateRangePicker, type DateRangePreset, type DiffInformation, type DiffRow, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, type RootProps$6 as EmptyStateProps, type Variant$1 as EmptyStateVariant, ErrorState, type RootProps$5 as ErrorStateProps, type Variant as ErrorStateVariant, ExportMenu, type ExportMenuItem, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HelpBlock, HoverCard, InlineStepDetail, type Props$L as InlineStepDetailProps, InlineStepLabel, type Props$K as InlineStepLabelProps, type Variant$3 as InlineStepLabelVariant, InputGroup, Kbd, Label, type LineInformation, Link, Markdown, MarkedText, MergeConflict, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, type RootProps$7 as OtpInputProps, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, type PlanApprovalProps, type PlanApprovalStatus, PlanRewritingIndicator, type PlanRewritingIndicatorProps, Popconfirm, Popover, Progress, type PromptCommand, PromptInput, type Props$1m as Props, Question, type QuestionAnswers, QuestionBlock, type Props$D as QuestionBlockProps, type QuestionOption, type Props$E as QuestionProps, type QuestionStep, RadioGroup, type RadiusSize, ResizableHandle, ResizablePanelGroup, type ResolvedColorScheme, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, type SelectItem, type SelectItemGroup, Separator, type ServerFieldError, Sheet, type SideInformation, Sidebar, type SidebarMode, SidebarProvider, type SidebarSide, type SidebarSlot, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, type SpotlightTarget, StatCard, StatCardGrid, type Props$2 as StatCardGridProps, type RootProps$1 as StatCardProps, type TrendDirection as StatCardTrendDirection, type TrendProps as StatCardTrendProps, type StepStatus, Stepper, type StepperOrientation, SuggestedPrompt, Switch, Table, type TableSortDirection, Tabs, TabsContent, type TargetRect, TextInput, Textarea, type Theme, ThemeProvider, ThinkingIndicator, type ThumbTooltipFn, TimeInput, TimePicker, Timeline, type ToastOptions, Toaster, Toggle, ToggleGroup, type Tokens, ToolCallApproval, type ToolCallApprovalProps, type ToolCallApprovalStatus, ToolCallChip, type ToolCallChipProps, type ToolCallState, Tooltip, type Props$1L as TooltipProps, TooltipProvider, type Trigger, Truncated, UsageStats, UsageStatsRing, type UseAutosizeInputOptions, type UseAutosizeInputReturn, type ValidityState, type WordInformation, ZoomableSvg, argoVariants, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, setSubmitError, svgToPngBlob, tableAriaSort, toSvgFileContent, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, wcagLevel, withForm };