@nurix/ui-component-library 1.1.4 → 1.1.5-stage.129

package/dist/index.d.mts

@@ -1,19 +1,3632 @@
 import * as React$1 from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Toaster as Toaster$1 } from 'sonner';
+import { LucideIcon } from 'lucide-react';
+import { Schema } from 'ajv';
+import { OnMount } from '@monaco-editor/react';
 
-type ButtonBorderRadius = "none" | "soft" | "rounded" | "pill";
-type ButtonVariant = "primary" | "destructive" | "outline" | "secondary" | "link";
-type ButtonSize = "default" | "sm" | "lg" | "icon";
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+type ButtonBorderRadius = "none" | "soft" | "rounded" | "nestedLeft" | "nestedMiddle" | "nestedRight";
+type ButtonVariant = "primary" | "secondary" | "destructive" | "outline" | "link" | "iconPrimary" | "iconSecondary" | "iconOutline" | "iconLink";
+type ButtonSize = "lg" | "default" | "sm" | "xs" | "link" | "icon" | "iconMd" | "iconSm" | "iconXs";
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     onClick?: () => void;
+    disabled?: boolean;
+    /**
+     * Optional leading/trailing icons (e.g. lucide-react). If `asChild` is true,
+     * children layout is controlled by the consumer, so these are not injected.
+     */
+    leadingIcon?: React$1.ReactNode;
+    trailingIcon?: React$1.ReactNode;
+    showLeadingIcon?: boolean;
+    showTrailingIcon?: boolean;
     /**
      * Design-system controlled border radius
      */
     button_border_radius?: ButtonBorderRadius;
     asChild?: boolean;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"btn"` if omitted.
+     * By convention pass a descriptive name like `"btn-create-agent"`.
+     */
+    "data-testid"?: string;
 }
 
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface NestedButtonGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children: React$1.ReactNode;
+}
+/**
+ * NestedButtonGroup — renders any number of `<Button>` children as one pill.
+ * Assigns the correct `button_border_radius` (nestedLeft / nestedMiddle /
+ * nestedRight) per position and overlaps borders by -1px so the shared edge
+ * draws once. Figma: 5490:33596.
+ */
+declare const NestedButtonGroup: React$1.ForwardRefExoticComponent<NestedButtonGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type InputBorderRadius = "none" | "soft" | "rounded" | "pill";
+type InputVariant = "grey" | "white" | "borderless";
+type SupportingTextType = "help" | "error" | "success";
+type InputForceState = "active" | "focussed" | "disabled";
+/**
+ * Input size variant.
+ * - `md` (default): 40px height — standard forms.
+ * - `sm`: 32px height — compact use (filter dropdowns, toolbars).
+ */
+type InputSize = "md" | "sm";
+interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Optional label shown above the field.
+     */
+    label?: string;
+    /**
+     * Whether to show a red "*" required indicator next to the label.
+     */
+    mandatory?: boolean;
+    /**
+     * Icon or element rendered in the leading slot (left side, 16px).
+     */
+    leadingIcon?: React$1.ReactNode;
+    /**
+     * Icon or element rendered in the trailing slot (right side, 16px).
+     */
+    trailingIcon?: React$1.ReactNode;
+    /**
+     * Suffix text rendered at the trailing end (e.g. ".com", "kg").
+     * Ignored when `trailingIcon` is provided.
+     */
+    suffix?: string;
+    /**
+     * Supporting/help/error text shown below the field.
+     */
+    supportingText?: string;
+    /**
+     * Visual style for supporting text.
+     */
+    supportingTextType?: SupportingTextType;
+    /**
+     * Hide the supporting text row (even if `supportingText` is provided).
+     */
+    hideSupportingText?: boolean;
+    /**
+     * Input field background variant in light mode.
+     * grey: light grey background (--input). white: white background (--card).
+     * @default "grey"
+     */
+    inputVariant?: InputVariant;
+    /**
+     * Size variant of the input field.
+     * - `md` (default): 40px height. Standard forms.
+     * - `sm`: 32px height, compact vertical padding. Used in filter dropdowns / toolbars.
+     * @default "md"
+     */
+    inputSize?: InputSize;
+    /**
+     * Design-system controlled border radius.
+     */
+    input_border_radius?: InputBorderRadius;
+    /**
+     * Force a visual state (useful for sticker-sheet stories).
+     * When unset, focus/disabled styles are derived from real DOM state.
+     */
+    forceState?: InputForceState;
+    /**
+     * Marks the field as invalid (shadcn-style).
+     * Sets `aria-invalid` and applies destructive border/ring styling.
+     *
+     * Note: `supportingTextType="error"` will also style the field as invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"input"` if omitted.
+     * By convention pass a descriptive name like `"input-agent-name"`.
+     */
+    "data-testid"?: string;
+}
+interface FileInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
+    label?: string;
+    mandatory?: boolean;
+    buttonLabel?: string;
+    placeholder?: string;
+    fileName?: string;
+    input_border_radius?: InputBorderRadius;
+    inputVariant?: InputVariant;
+    onFileChange?: (file: File | null) => void;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"input"` if omitted.
+     */
+    "data-testid"?: string;
+}
+
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+declare const FileInput: React$1.ForwardRefExoticComponent<FileInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+type InputGroupBorderRadius = "none" | "soft" | "rounded" | "pill";
+type InputGroupForceState = "active" | "focussed" | "disabled";
+interface InputGroupProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Optional label shown above the field.
+     */
+    label?: string;
+    /**
+     * Whether to show a red "*" required indicator next to the label.
+     */
+    mandatory?: boolean;
+    /**
+     * Supporting/help/error text shown below the field.
+     */
+    supportingText?: string;
+    /**
+     * Force a visual state (useful for sticker-sheet stories).
+     */
+    forceState?: InputGroupForceState;
+    /**
+     * Marks the field as invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Optional content shown on the left of the input (icon/text/button).
+     */
+    startAdornment?: React$1.ReactNode;
+    /**
+     * Optional content shown on the right of the input (icon/text/button).
+     */
+    endAdornment?: React$1.ReactNode;
+    /**
+     * Optional content separated by a divider on the far left (e.g. "https://").
+     */
+    startSegment?: React$1.ReactNode;
+    /**
+     * Optional content separated by a divider on the far right (e.g. ".com").
+     */
+    endSegment?: React$1.ReactNode;
+    input_border_radius?: InputGroupBorderRadius;
+    /**
+     * Input field background variant in light mode.
+     * grey: light grey (--input). white: white (--card).
+     * @default "grey"
+     */
+    inputVariant?: InputVariant;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"input"` if omitted.
+     */
+    "data-testid"?: string;
+}
+
+declare const InputGroup: React$1.ForwardRefExoticComponent<InputGroupProps & React$1.RefAttributes<HTMLInputElement>>;
+
+type TextareaBorderRadius = "none" | "soft" | "rounded" | "pill";
+type TextareaForceState = "active" | "focussed" | "disabled";
+interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> {
+    /**
+     * Optional label shown above the field.
+     */
+    label?: string;
+    /**
+     * Whether to show a red "*" required indicator next to the label.
+     */
+    mandatory?: boolean;
+    /**
+     * Supporting/help/error text shown below the field.
+     */
+    supportingText?: string;
+    /**
+     * Visual style for supporting text.
+     */
+    supportingTextType?: SupportingTextType;
+    /**
+     * Hide the supporting text row (even if `supportingText` is provided).
+     */
+    hideSupportingText?: boolean;
+    /**
+     * Input field background variant in light mode.
+     * grey: light grey (--input). white: white (--card).
+     * @default "grey"
+     */
+    inputVariant?: InputVariant;
+    /**
+     * Design-system controlled border radius.
+     */
+    input_border_radius?: TextareaBorderRadius;
+    /**
+     * Force a visual state (useful for sticker-sheet stories).
+     * When unset, focus/disabled styles are derived from real DOM state.
+     */
+    forceState?: TextareaForceState;
+    /**
+     * Marks the field as invalid.
+     * Sets `aria-invalid` and applies destructive border/ring styling.
+     */
+    invalid?: boolean;
+    /**
+     * Resize behavior of the textarea.
+     */
+    resize?: "none" | "vertical" | "horizontal" | "both";
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"input"` if omitted.
+     * By convention pass a descriptive name like `"input-description"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Textarea - Standalone textarea component.
+ * Matches Input component structure and states (label, supportingText, forceState, invalid, etc).
+ */
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+type SwitchSize = "default" | "small";
+interface SwitchProps {
+    /**
+     * Controlled checked state.
+     */
+    checked?: boolean;
+    /**
+     * Uncontrolled initial state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Called whenever the checked state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: SwitchSize;
+    /**
+     * Whether to show the label. When true, label will be displayed for both on and off states.
+     */
+    showLabel?: boolean;
+    /**
+     * The label text to display. Will show "Toggle On" or "Toggle Off" based on state if not provided.
+     */
+    labelText?: string;
+    /**
+     * Placement of the label relative to the switch.
+     * @default "right"
+     */
+    labelPlacement?: "left" | "right";
+    /**
+     * Optional id for associating external labels.
+     */
+    id?: string;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"toggle"` if omitted
+     * (Switch uses the same prefix as Toggle since they're the same control family).
+     * By convention pass a descriptive name like `"toggle-streaming"`.
+     */
+    "data-testid"?: string;
+}
+
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface SliderProps {
+    /**
+     * Controlled value. Single-thumb slider — pass a single number.
+     */
+    value?: number;
+    /**
+     * Uncontrolled initial value.
+     * @default min
+     */
+    defaultValue?: number;
+    /**
+     * Called whenever the value changes (during drag and on commit).
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Called when the user finishes interacting (pointer up / blur).
+     */
+    onValueCommit?: (value: number) => void;
+    /**
+     * Minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step granularity.
+     * @default 1
+     */
+    step?: number;
+    disabled?: boolean;
+    /**
+     * Label shown at the left edge (under the min end of the track).
+     * The label row renders automatically when either `minLabel` or
+     * `maxLabel` is provided.
+     */
+    minLabel?: React$1.ReactNode;
+    /**
+     * Label shown at the right edge (under the max end of the track).
+     * The label row renders automatically when either `minLabel` or
+     * `maxLabel` is provided.
+     */
+    maxLabel?: React$1.ReactNode;
+    /**
+     * Accessible name for the thumb.
+     */
+    "aria-label"?: string;
+    /**
+     * Optional id forwarded to the underlying root element.
+     */
+    id?: string;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"slider"` if omitted.
+     * By convention pass a descriptive name like `"slider-temperature"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Slider — single-thumb range input with optional min/max edge labels.
+ *
+ * Figma reference: 557:22788, 557:23017.
+ */
+declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Toggle (segmented pill / card) — Figma references:
+ *   - 4960:33812 — IconToggleSetRegular (size = "regular", 36×36 pills)
+ *   - 4960:33890 — ToggleIconSmall      (size = "small",  24×24 pills + card)
+ *
+ * A segmented control rendered inside a grey rounded container. The
+ * selected option is filled white with a 1px xlight border and a
+ * shadow-xs drop.
+ *
+ * Two shapes:
+ *   - `pill`  — single-line option (icon, icon + text, or text only)
+ *   - `card`  — square option with title row + subtext below (only valid
+ *               for `size="small"`).
+ */
+type ToggleType = "iconText" | "iconOnly" | "textOnly";
+type ToggleShape = "pill" | "card";
+type ToggleSize = "regular" | "small";
+interface ToggleProps {
+    /**
+     * Controlled selected value. When set, the parent owns state.
+     */
+    value?: string;
+    /**
+     * Initial selected value when uncontrolled.
+     */
+    defaultValue?: string;
+    /**
+     * Called when the user picks a different option.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Layout for items inside the pill. Ignored when `shape="card"`.
+     * @default "iconText"
+     */
+    type?: ToggleType;
+    /**
+     * Item shape.
+     *   - "pill" — single-line rounded-full option
+     *   - "card" — square option with stacked title + subtext (small size)
+     * @default "pill"
+     */
+    shape?: ToggleShape;
+    /**
+     * Size of items.
+     *   - "regular" — 36×36 pills, 16×16 icons, 14px semibold label
+     *   - "small"   — 24h pills, 12×12 icons, 12px medium label; required
+     *                 for `shape="card"`
+     * @default "regular"
+     */
+    size?: ToggleSize;
+    /**
+     * Disable the entire toggle.
+     */
+    disabled?: boolean;
+    /**
+     * Toggle items — one or more `<ToggleItem>` children.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"toggle"` if omitted.
+     */
+    "data-testid"?: string;
+}
+interface ToggleItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onClick" | "type" | "role" | "aria-checked" | "children"> {
+    /**
+     * Stable value for this item. Compared against the parent's `value`.
+     */
+    value: string;
+    /**
+     * Optional leading icon. Rendered when the parent type is `iconText`
+     * or `iconOnly` (or for `shape="card"`).
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Optional secondary line below the title — only rendered when the
+     * parent's `shape="card"`.
+     */
+    subtext?: React$1.ReactNode;
+    /**
+     * Label content. Rendered when the parent type is `iconText` or `textOnly`,
+     * and always for `shape="card"`.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"toggle"` if omitted.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Toggle — segmented pill / card control.
+ * Figma: 4960:33812 (regular) and 4960:33890 (small + card).
+ *
+ * @example
+ *   // Pill (default)
+ *   <Toggle value={direction} onValueChange={setDirection}>
+ *     <ToggleItem value="inbound" icon={<PhoneIncoming />}>Inbound</ToggleItem>
+ *     <ToggleItem value="outbound" icon={<PhoneOutgoing />}>Outbound</ToggleItem>
+ *   </Toggle>
+ *
+ *   // Square card with subtext
+ *   <Toggle value={mode} onValueChange={setMode} shape="card" size="small">
+ *     <ToggleItem value="single" icon={<File />} subtext="Natural-language prompt only.">
+ *       Single Prompt
+ *     </ToggleItem>
+ *     <ToggleItem value="flow" icon={<Workflow />} subtext="Structured map of nodes.">
+ *       Conversation Flow
+ *     </ToggleItem>
+ *   </Toggle>
+ */
+declare const Toggle: React$1.ForwardRefExoticComponent<ToggleProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * ToggleItem — single segment inside a `<Toggle>`. Pulls active value
+ * from context and signals selection back via `setValue`.
+ */
+declare const ToggleItem: React$1.ForwardRefExoticComponent<ToggleItemProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+    "data-testid"?: string;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * shadcn-style Checkbox props (Radix primitive props).
+ * Note: Radix supports `checked: boolean | "indeterminate"`. Figma uses boolean.
+ */
+type CheckboxProps = React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"checkbox"` if omitted.
+     */
+    "data-testid"?: string;
+};
+
+declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    "data-testid"?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+    "data-testid"?: string;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+
+type RadioGroupProps = React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"radio-group"` if omitted.
+     */
+    "data-testid"?: string;
+};
+type RadioGroupItemProps = React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"radio"` if omitted.
+     */
+    "data-testid"?: string;
+};
+
+type DialogHeaderNavigationVariant = "primary" | "inner";
+type BackButtonPosition = "left" | "right";
+interface DialogHeaderNavigationProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    subtitle?: string;
+    /**
+     * `primary`: title/subtitle only
+     * `inner`: shows a back affordance (arrow)
+     */
+    variant?: DialogHeaderNavigationVariant;
+    onBack?: () => void;
+    backButtonAriaLabel?: string;
+    backButtonPosition?: BackButtonPosition;
+    disabled?: boolean;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"dialog-header"` if omitted.
+     */
+    "data-testid"?: string;
+}
+type TabVariant = "top" | "side" | "section";
+interface ListNavItemProps {
+    /** Unique identifier */
+    id: string;
+    /** Primary text */
+    title: string;
+    /** Secondary text */
+    subtitle?: string;
+    /** Trailing content (badges, icons, etc.) */
+    trailing?: React$1.ReactNode;
+}
+interface ListNavigationProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** List of items */
+    items: ListNavItemProps[];
+    /** Currently selected item id */
+    selectedId?: string | null;
+    /** Callback when an item is clicked */
+    onSelect?: (id: string) => void;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"nav"` if omitted.
+     */
+    "data-testid"?: string;
+}
+interface TabsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    variant?: TabVariant;
+}
+interface TabsListProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    variant?: TabVariant;
+}
+interface TabsTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+    variant?: TabVariant;
+    iconLeft?: React$1.ReactNode;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"tab"` if omitted.
+     * By convention pass a descriptive name like `"tab-configure"`.
+     */
+    "data-testid"?: string;
+}
+interface TabsContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    forceMount?: boolean;
+}
+
+declare const DialogHeaderNavigation: React$1.ForwardRefExoticComponent<DialogHeaderNavigationProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare function Tabs({ className, value, defaultValue, onValueChange, variant, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare const TabsList: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare function TabsContent({ value, forceMount, className, children, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * ListNavigation — A vertical list of selectable items (e.g. call history).
+ * Based on Figma design node: 5503:34142
+ */
+declare const ListNavigation: React$1.ForwardRefExoticComponent<ListNavigationProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type AccordionType = "single" | "multiple";
+type AccordionValue<TType extends AccordionType> = TType extends "multiple" ? string[] : string | null;
+type AccordionOnValueChange<TType extends AccordionType> = (value: AccordionValue<TType>) => void;
+interface AccordionProps<TType extends AccordionType = "single"> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    type?: TType;
+    /**
+     * When `type="single"`, allows collapsing the open item.
+     */
+    collapsible?: boolean;
+    value?: AccordionValue<TType>;
+    defaultValue?: AccordionValue<TType>;
+    onValueChange?: AccordionOnValueChange<TType>;
+    disabled?: boolean;
+}
+interface AccordionItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    disabled?: boolean;
+    /**
+     * Visual variant for the item.
+     * - `"default"` (back-compat) — flat row with a bottom divider; used in
+     *   long lists where items share a single border baseline.
+     * - `"card"` — bordered, rounded, drop-shadowed pill that reads as its own
+     *   surface (Figma 707:17455 / 6441:22282). Use when each item is a
+     *   self-contained section, e.g. a Speech Settings card.
+     * @default "default"
+     */
+    variant?: "default" | "card";
+}
+type AccordionTriggerSize = "default" | "sm";
+interface AccordionTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Optional description under the label (matches Figma).
+     */
+    description?: React$1.ReactNode;
+    /**
+     * Optional right-side action (e.g. "Add" button, Switch toggle).
+     * Note: click events are stopped from toggling the accordion.
+     */
+    action?: React$1.ReactNode;
+    /**
+     * Hide the trailing chevron. Useful for a card whose header is purely a
+     * toggle (e.g. `action` is a `Switch`) — when off, there's no body to
+     * expand, so a chevron would be misleading.
+     * @default false
+     */
+    hideChevron?: boolean;
+    /**
+     * Trigger sizing.
+     * - `"default"` — `py-4`, title is `text-lg` (legacy long-list look).
+     * - `"sm"`     — `p-3`, title is `text-sm font-semibold` (Heading/H5);
+     *               pairs with `AccordionItem variant="card"` per Figma
+     *               707:17455.
+     * @default "default"
+     */
+    size?: AccordionTriggerSize;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"accordion"` if omitted.
+     */
+    "data-testid"?: string;
+}
+interface AccordionContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+interface AccordionSectionTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Label shown inside the pill (Figma: "Summary"). Children override.
+     */
+    label?: React$1.ReactNode;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"accordion"` if omitted.
+     */
+    "data-testid"?: string;
+}
+
+declare function Accordion<TType extends AccordionType = "single">({ className, type, collapsible, value, defaultValue, onValueChange, disabled, ...props }: AccordionProps<TType>): react_jsx_runtime.JSX.Element;
+declare const AccordionItem: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React$1.ForwardRefExoticComponent<AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Section-separator trigger (Figma 6128:5627). A compact pill that separates
+ * sections within a card or page. Use in place of `AccordionTrigger` inside
+ * an `AccordionItem` — it wires into the same Radix state and flips the
+ * chevron when `data-state=open`.
+ */
+declare const AccordionSectionTrigger: React$1.ForwardRefExoticComponent<AccordionSectionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React$1.ForwardRefExoticComponent<AccordionContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare function AccordionContentPlaceholder({ className, children, }: {
+    className?: string;
+    children?: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = "xxs" | "xs" | "sm" | "default" | "lg";
+type AvatarShape = "circle" | "square";
+interface AvatarProps {
+    /**
+     * The image source URL for the avatar.
+     */
+    src?: string;
+    /**
+     * Alt text for the avatar image.
+     */
+    alt?: string;
+    /**
+     * Fallback text to display when image fails to load (typically initials).
+     */
+    fallback?: string;
+    /**
+     * Size of the avatar.
+     * @default "default"
+     */
+    size?: AvatarSize;
+    /**
+     * Shape of the avatar.
+     * @default "circle"
+     */
+    shape?: AvatarShape;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"avatar"` if omitted.
+     */
+    "data-testid"?: string;
+}
+interface AvatarGroupProps {
+    /**
+     * Maximum number of avatars to display before showing overflow indicator.
+     * @default 3
+     */
+    max?: number;
+    /**
+     * Size of the avatars in the group.
+     * @default "default"
+     */
+    size?: AvatarSize;
+    /**
+     * Shape of the avatars in the group.
+     * @default "circle"
+     */
+    shape?: AvatarShape;
+    /**
+     * The avatar items to display.
+     */
+    children: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"avatar-group"` if omitted.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Avatar component - An image element with a fallback for representing the user.
+ * Based on Figma design node: 3316:3490
+ */
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * AvatarGroup component - Displays multiple avatars in a stacked layout
+ */
+declare const AvatarGroup: React$1.ForwardRefExoticComponent<AvatarGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning";
+/**
+ * A tag option for the TagBadge dropdown menu.
+ */
+interface TagOption {
+    value: string;
+    label: string;
+    /** Badge variant to use when this tag is selected */
+    variant?: BadgeVariant;
+    /** Custom background color (overrides variant) */
+    background?: string;
+    /** Custom text color (overrides variant) */
+    color?: string;
+}
+interface BadgeProps {
+    /**
+     * The badge variant style.
+     * @default "default"
+     */
+    variant?: BadgeVariant;
+    /**
+     * The badge label text.
+     */
+    label?: string;
+    /**
+     * Optional leading icon (renders before the label).
+     */
+    leadingIcon?: React$1.ReactNode;
+    /**
+     * Optional trailing icon (renders after the label).
+     */
+    trailingIcon?: React$1.ReactNode;
+    /**
+     * Whether to show the leading icon.
+     * @default true
+     */
+    showLeadingIcon?: boolean;
+    /**
+     * Whether to show the trailing icon.
+     * @default true
+     */
+    showTrailingIcon?: boolean;
+    /**
+     * Badge content (alternative to label prop).
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Click handler. When provided, badge renders as a button.
+     */
+    onClick?: (e: React$1.MouseEvent) => void;
+    /**
+     * When false, disables hover/pressed/focus affordances and cursor-pointer.
+     * Useful for read-only / view-only badges that should not appear clickable.
+     * @default true
+     */
+    interactive?: boolean;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"badge"` if omitted.
+     */
+    "data-testid"?: string;
+}
+/**
+ * Props for TagBadge - an interactive badge that opens a dropdown to select a tag.
+ * Mirrors the TagsDropdown pattern from the zero repo.
+ */
+interface TagBadgeProps {
+    /** Currently selected tag value */
+    value: string | null;
+    /** Callback when a tag is selected */
+    onValueChange?: (value: string) => void;
+    /** Available tag options */
+    options: TagOption[];
+    /** When true, renders as a non-interactive badge (no dropdown) */
+    viewOnly?: boolean;
+    /** Placeholder text when no tag is selected */
+    placeholder?: string;
+    /** Default variant when no tag is selected */
+    defaultVariant?: BadgeVariant;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"badge"` if omitted.
+     */
+    "data-testid"?: string;
+}
+type NumberBadgeVariant = "default" | "destructive" | "secondary";
+interface NumberBadgeProps {
+    /**
+     * The number to display in the badge.
+     */
+    count: number;
+    /**
+     * Maximum count to display. Shows "max+" if exceeded.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * The badge variant style.
+     * @default "default"
+     */
+    variant?: NumberBadgeVariant;
+    /**
+     * Whether to show zero count.
+     * @default false
+     */
+    showZero?: boolean;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"badge"` if omitted.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Badge component - Displays a badge with options for leading and trailing icons
+ * Based on Figma design node: 3333:1629
+ */
+declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * NumberBadge component - Displays a circular badge with a count
+ * Based on Figma design node: 3333:1629
+ */
+declare const NumberBadge: React$1.ForwardRefExoticComponent<NumberBadgeProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * TagBadge - An interactive badge that opens a dropdown to pick a tag.
+ * Mirrors the TagsDropdown behavior from the zero repo:
+ * - viewOnly=true: renders as a static badge
+ * - viewOnly=false (default): renders as a clickable badge with chevron that opens a tag menu
+ */
+declare const TagBadge: React$1.ForwardRefExoticComponent<TagBadgeProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type SelectType = "Single Line Regular" | "Single Line Large" | "Double Line";
+type SelectState = "Default" | "Open";
+interface SelectProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    type?: SelectType;
+    state?: SelectState;
+    showLead?: boolean;
+    showSearch?: boolean;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    placeholderSubtext?: string;
+}
+interface SelectLabelProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    mandatory?: boolean;
+}
+interface SelectMenuItemProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+    hover?: boolean;
+    menuItem?: string;
+    menuItemSubtext?: string;
+    showPlaybackControl?: boolean;
+    selected?: boolean;
+}
+interface SelectGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    showLabel?: boolean;
+}
+/** Item shape when using SelectContent `items` prop. Search filters by label and subtext. */
+interface SelectContentItem {
+    value: string;
+    label: string;
+    subtext?: string;
+    leadIcon?: React$1.ReactNode;
+    leadIconSize?: "xs" | "sm" | "md";
+    /**
+     * Optional trailing content rendered between the label/subtext and the
+     * checkmark — typically used for tag badges, status pills, or counts.
+     */
+    trailing?: React$1.ReactNode;
+}
+/** Section with items when using SelectContent `items` prop. */
+interface SelectContentItemWithSection {
+    sectionLabel: string;
+    items: SelectContentItem[];
+}
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Select value text (placeholder/value) using Typography tokens.
+ *
+ * Radix's `SelectPrimitive.Value` destructures `className` and `style` out of
+ * its props and never forwards them to the rendered span (see
+ * @radix-ui/react-select source) — so styling MUST live on a wrapper around
+ * it, not on the primitive itself. We wrap with a `<span>` that carries the
+ * truncation rules so long selected values ellipsize within the trigger
+ * instead of bleeding past the chevron / pushing siblings off the row.
+ */
+declare const SelectValue: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+    showLead?: boolean;
+    leadIcon?: React$1.ReactNode;
+    /** Size of lead icon wrapper. "xs" = 12px, "sm" = 16px (default), "md" = 20px */
+    leadIconSize?: "xs" | "sm" | "md";
+    /** Size variant. "small" = 32px height, "regular" = 48px, "large" = 64px */
+    size?: "small" | "regular" | "large";
+    /** Background variant. "default" = input grey, "white" = card white */
+    bg?: "default" | "white";
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"select"` if omitted.
+     * By convention pass a descriptive name like `"select-timezone"`.
+     */
+    "data-testid"?: string;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Dropdown list items. When provided, search filters them by default. Can be flat items or sections. */
+    items?: SelectContentItem[] | SelectContentItemWithSection[];
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    /**
+     * Ref forwarded to the internal `SelectPrimitive.Viewport` (the scroll
+     * container for items). Lets consumers attach an `IntersectionObserver`
+     * — typical use is wiring an `InfiniteScroll` so items lazy-load as the
+     * user scrolls a long list (e.g. paginated transfer agents). Function
+     * refs are also supported.
+     */
+    viewportRef?: React$1.Ref<HTMLDivElement> | ((node: HTMLDivElement | null) => void);
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    subtext?: string;
+    type?: "single" | "double";
+    leadIcon?: React$1.ReactNode;
+    /** Size of leadIcon area. "xs" = 16px, "sm" = 24px, "md" = 36px (for playback controls) */
+    leadIconSize?: "xs" | "sm" | "md";
+    /**
+     * Optional trailing content rendered between the label/subtext and the
+     * checkmark — typically used for tag badges, status pills, or counts.
+     */
+    trailing?: React$1.ReactNode;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"select-item"` if omitted.
+     */
+    "data-testid"?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function SelectFormLabel({ className, label, mandatory, }: SelectLabelProps): react_jsx_runtime.JSX.Element;
+
+interface PlaySelectAudioItem {
+    value: string;
+    label: string;
+    subtext?: string;
+    /**
+     * Audio preview URL. When empty/falsy, the play button is rendered in a
+     * disabled visual state and clicks are no-ops — no playback state change.
+     */
+    url: string;
+    /**
+     * Optional trailing content rendered between the label and the checkmark.
+     * Typically used for tag badges (e.g. gender, language pills).
+     */
+    tags?: React$1.ReactNode;
+}
+interface PlaySelectProps {
+    /** List of audio items to display. Each has value, label, subtext, and playable url. */
+    dropdownListItems: PlaySelectAudioItem[];
+    /** Trigger label (e.g. "Title") */
+    label?: string;
+    /** Whether to show the form label above the trigger. @default true */
+    showLabel?: boolean;
+    /** Whether the label shows the red `*` mandatory indicator. @default true */
+    mandatory?: boolean;
+    /** Placeholder when nothing selected */
+    placeholder?: string;
+    /** Show search input in dropdown */
+    showSearch?: boolean;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Controlled value */
+    value?: string;
+    /** Default value when uncontrolled */
+    defaultValue?: string;
+    /** Called when value changes (alias for onValueChange) */
+    onValueChange?: (value: string) => void;
+    /** Called when user clicks play/pause button. Receives url and item. */
+    onPlayClick?: (url: string, item: PlaySelectAudioItem) => void;
+    /** Called when user selects a value (clicks item text to select) */
+    onSelectValue?: (value: string) => void;
+    /** Called when dropdown closes (select, click outside, escape, etc.) */
+    onCloseDropdown?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Trigger size */
+    size?: "regular" | "large";
+    /** Optional lead icon for the trigger */
+    triggerLeadIcon?: React$1.ReactNode;
+    /** Optional wrapper className (e.g. to control width) */
+    className?: string;
+    /** Optional className passed to the SelectTrigger button */
+    triggerClassName?: string;
+    /** Optional className passed to the SelectContent dropdown panel */
+    contentClassName?: string;
+    /** Minimum width (e.g. "196px"). Override via className if needed. */
+    minWidth?: string;
+}
+declare const PlaySelect: React$1.ForwardRefExoticComponent<PlaySelectProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type PlaybackState = "play" | "pause";
+interface PlaybackControlProps extends Omit<React$1.ComponentProps<typeof Button>, "children"> {
+    /**
+     * Which icon to show. `play` = play icon (triangle), `pause` = pause icon (two bars).
+     */
+    state?: PlaybackState;
+    /**
+     * Alias for `state`. When true, show pause icon; when false, show play icon.
+     */
+    playing?: boolean;
+}
+declare const PlaybackControl: React$1.ForwardRefExoticComponent<Omit<PlaybackControlProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface UseSelectProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+declare function useSelect({ value, defaultValue, onValueChange, }: UseSelectProps): {
+    value: string | undefined;
+    setValue: React$1.Dispatch<React$1.SetStateAction<string | undefined>>;
+    handleValueChange: (newValue: string) => void;
+};
+
+interface UsePlaySelectProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Called when user clicks play/pause button */
+    onPlayClick?: (url: string, item: PlaySelectAudioItem) => void;
+    /** Called when user selects a value (clicks item text) */
+    onSelectValue?: (value: string) => void;
+    /** Called when dropdown closes (select, click outside, escape, etc.) */
+    onCloseDropdown?: () => void;
+}
+declare function usePlaySelect({ value, defaultValue, onValueChange, onPlayClick, onSelectValue, onCloseDropdown, }: UsePlaySelectProps): {
+    value: string | undefined;
+    playingUrl: string | null;
+    audioRef: React$1.MutableRefObject<HTMLAudioElement | null>;
+    handleValueChange: (newValue: string) => void;
+    handleOpenChange: (open: boolean) => void;
+    handlePlay: (url: string, item: PlaySelectAudioItem) => void;
+    stopEvent: (e: React$1.PointerEvent | React$1.MouseEvent) => void;
+    createPlayHandler: (item: PlaySelectAudioItem) => (e: React$1.PointerEvent | React$1.MouseEvent) => void;
+    pauseAudio: () => void;
+};
+
+/** Illustration position relative to text and CTAs. */
+type EmptyStateIllustrationPosition = "top" | "bottom";
+/** Illustration size variant. */
+type EmptyStateIllustrationSize = "small" | "banner";
+interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "description"> {
+    /** Illustration element (e.g. image, icon, or SVG). */
+    illustration?: React$1.ReactNode;
+    /** Where to place the illustration: above or below the text/CTAs. */
+    illustrationPosition?: EmptyStateIllustrationPosition;
+    /** Size of the illustration area. Small: 120×120px, Banner: 220×500px (overridden by width/height). */
+    illustrationSize?: EmptyStateIllustrationSize;
+    /** Custom illustration width (e.g. "500px", 300). Overrides illustrationSize for width. */
+    illustrationWidth?: string | number;
+    /** Custom illustration height (e.g. "220px", 200). Overrides illustrationSize for height. */
+    illustrationHeight?: string | number;
+    /** Primary title. String uses default title styles; Typography or other ReactNode is rendered as-is. */
+    title: string | React$1.ReactNode;
+    /** Secondary description. String uses default description styles; Typography or other ReactNode is rendered as-is. */
+    description?: string | React$1.ReactNode;
+    /** Action element(s) displayed below the text. Single button or array of buttons. */
+    action?: React$1.ReactNode | React$1.ReactNode[];
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"empty-state"` if omitted.
+     * By convention pass a descriptive name like `"empty-state-no-agents"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Empty state placeholder.
+ * Figma reference: 3619:3067 (Nurix Design System 2026)
+ */
+declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type ListVariant = "default" | "outline" | "muted";
+type ListType = "card" | "list";
+type ListBorderRadius = "none" | "soft" | "rounded";
+interface ListProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Layout type.
+     * - card: vertical card layout
+     * - list: horizontal row layout
+     * @default "card"
+     */
+    type?: ListType;
+    /**
+     * Visual style variant.
+     * - default: card bg only (card) / no border, no bg (list)
+     * - outline: border with horizontal padding
+     * - muted: subtle background fill
+     * @default "default"
+     */
+    variant?: ListVariant;
+    /**
+     * Design-system controlled border radius.
+     * @default "rounded"
+     */
+    list_border_radius?: ListBorderRadius;
+    children?: React$1.ReactNode;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"card"` if omitted.
+     * By convention pass a descriptive name like `"card-agent-${id}"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * List component - A composable card/list container with layout type,
+ * variant styles, hover overlay, and design-system border radius.
+ * Based on Figma design node: 3316:3511
+ */
+declare const List: React$1.ForwardRefExoticComponent<ListProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type SurfaceBackground = "white" | "grey";
+interface SurfaceProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Surface fill style.
+     * - white: `bg-token-white`
+     * - grey: `bg-token-light-grey`
+     * @default "white"
+     */
+    background?: SurfaceBackground;
+    /**
+     * When true the surface reserves padding so that content can sit
+     * directly inside without a secondary wrapper. Disable when the
+     * children handle their own padding (for example when composing
+     * full-bleed headers or images).
+     * @default true
+     */
+    padded?: boolean;
+    children?: React$1.ReactNode;
+}
+interface SurfaceHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children?: React$1.ReactNode;
+}
+interface SurfaceBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children?: React$1.ReactNode;
+}
+interface SurfaceFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children?: React$1.ReactNode;
+}
+
+/**
+ * Surface - neutral elevated surface used to group related content.
+ *
+ * Matches the Figma "Card - Surface" primitive:
+ *   - 16px radius, 1.5px xlight border, xs drop shadow
+ *   - white / light-grey background variants
+ *   - overflow hidden so nested media clip to the radius
+ *
+ * Figma: 6100:42420 (surface), 6100:42423 (white bg), 6100:42428 (grey bg)
+ */
+declare const Surface: React$1.ForwardRefExoticComponent<SurfaceProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional header slot — intended for a short title row.
+ */
+declare const SurfaceHeader: React$1.ForwardRefExoticComponent<SurfaceHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional body slot — vertical content area with a default 8px gap.
+ */
+declare const SurfaceBody: React$1.ForwardRefExoticComponent<SurfaceBodyProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional footer slot — right-aligned action row.
+ */
+declare const SurfaceFooter: React$1.ForwardRefExoticComponent<SurfaceFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Figma 6249:35100 — Side Panel.
+ *   - sm: 420px wide
+ *   - md: 620px wide
+ *   - lg: 900px wide (Figma 6553:165)
+ */
+type SidePanelSize = "sm" | "md" | "lg";
+interface SidePanelProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Width preset. `sm` = 420px, `md` = 620px, `lg` = 900px.
+     * @default "sm"
+     */
+    size?: SidePanelSize;
+    /**
+     * Which edge the panel is anchored to. Controls which corners are rounded
+     * — the panel's inner edge (facing the app) gets the radius, the outer
+     * edge (flush against the screen) stays square.
+     * @default "right"
+     */
+    side?: "left" | "right";
+    /** Panel content */
+    children?: React$1.ReactNode;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"side-panel"` if omitted.
+     * By convention pass a descriptive name like `"side-panel-create-campaign"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * SidePanel — fixed-width panel with a single rounded inward edge.
+ *
+ * The panel is a plain shell — the consumer is responsible for positioning
+ * (e.g., `fixed right-0 top-0`), slide-in animation, and the overlay. This
+ * matches the Figma spec at 6249:35100 / 6553:165, which shows just the
+ * geometry: a 420px / 620px / 900px wide white surface with 16px radius on
+ * its inner edge.
+ */
+declare const SidePanel: React$1.ForwardRefExoticComponent<SidePanelProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Tooltip provider. Wrap your app (or a subtree) with this to enable tooltips.
+ * Based on shadcn/ui + Radix Tooltip.
+ */
+declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
+/**
+ * Tooltip root. Groups trigger and content.
+ */
+declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
+/**
+ * Tooltip trigger. The element that shows the tooltip on hover.
+ */
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Tooltip content. Renders the tooltip popover with optional arrow and shortcut badge.
+ * Figma design: primary background, rounded, optional keyboard shortcut on the right.
+ * Portals into .lego-land when present for correct theming.
+ */
+declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    shortcut?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    /** Optional keyboard shortcut to display (e.g. "U", "⌘S") */
+    shortcut?: string;
+};
+
+/**
+ * Semantic text-style variants (mapped 1:1 from Figma text styles).
+ * Each has a predefined font-size, line-height, and font-weight.
+ */
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p1" | "p2" | "p3" | "b1" | "b2" | "subtext-xs" | "subtext-sm" | "input-xs" | "input-sm" | "label-sm" | "label-sm-mono" | "label-md" | "label-lg";
+/** Utility text sizes (text-xs through text-6xl). Use with `weight` prop. */
+type TypographySize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
+/** Font weight options (maps to Figma weight tokens). */
+type TypographyWeight = "thin" | "extra-light" | "light" | "regular" | "medium" | "semi-bold" | "bold" | "extra-bold" | "black";
+type TypographyTone = "default" | "muted" | "inherit";
+interface TypographyProps extends React$1.HTMLAttributes<HTMLElement> {
+    /**
+     * Semantic typography variant (maps to Figma text styles).
+     * Provides predefined size + weight combos.
+     * Cannot be used together with `size`.
+     * @default "p2"
+     */
+    variant?: TypographyVariant;
+    /**
+     * Utility text size. Use together with `weight` for fine-grained control.
+     * Cannot be used together with `variant`.
+     */
+    size?: TypographySize;
+    /**
+     * Font weight. Used with `size` for utility text styles.
+     * When used with `variant`, overrides the variant's default weight.
+     * @default "regular" (when using `size`)
+     */
+    weight?: TypographyWeight;
+    /**
+     * Text color tone.
+     * @default "default"
+     */
+    tone?: TypographyTone;
+    /**
+     * Render as the child element (Radix Slot).
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Override the default HTML tag for the selected variant.
+     * Ignored when `asChild` is true.
+     */
+    as?: React$1.ElementType;
+}
+
+/**
+ * Typography component
+ * Figma reference: 3732-2079 (Text aliases / use cases)
+ *
+ * Two usage modes:
+ * 1. Semantic: `<Typography variant="h1">` — uses predefined size+weight from Figma
+ * 2. Utility:  `<Typography size="lg" weight="bold">` — fine-grained size × weight control
+ */
+declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
+
+type Theme = "light" | "dark";
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+declare const ThemeProvider: React$1.FC<{
+    children: React$1.ReactNode;
+    defaultTheme?: Theme;
+    /** See `LegoLandWrapper.fill` — opt the wrapper into `display: contents`. */
+    fill?: boolean;
+}>;
+declare const NurixThemeProvider: React$1.FC<{
+    children: React$1.ReactNode;
+    defaultTheme?: Theme;
+    /** See `LegoLandWrapper.fill` — opt the wrapper into `display: contents`. */
+    fill?: boolean;
+}>;
+declare const useTheme: () => ThemeContextType;
+
+interface LegoLandWrapperProps {
+    children: React$1.ReactNode;
+    theme: "light" | "dark";
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Opt-in: render the wrapper with `display: contents` (via a `data-fill`
+     * attribute the host app can target) so it doesn't form its own layout
+     * box. Use when a child needs height/flex propagation from the wrapper's
+     * parent (e.g. `h-full` on a Surface inside).
+     */
+    fill?: boolean;
+}
+declare const LegoLandWrapper: React$1.FC<LegoLandWrapperProps>;
+
+/**
+ * Hardcoded theme JSON (as requested).
+ * NOTE: `uIColors` values are hex, but at runtime we convert them to HSL channels
+ * so they work with `tailwind.config.ts` which uses `hsl(var(--...))`.
+ */
+declare const DEFAULT_THEME: {
+    /**
+     * Design tokens (numbers) used by components.
+     * This file is the single source of truth (do not duplicate these elsewhere).
+     */
+    readonly twPadding: {
+        readonly mode1: {
+            readonly px0: 0;
+            readonly px05: 2;
+            readonly px1: 4;
+            readonly px15: 6;
+            readonly px2: 8;
+            readonly px25: 10;
+            readonly px3: 12;
+            readonly px35: 14;
+            readonly px4: 16;
+            readonly px5: 20;
+            readonly px6: 24;
+            readonly px7: 28;
+            readonly px8: 32;
+            readonly px9: 36;
+            readonly px10: 40;
+            readonly px11: 44;
+            readonly px12: 48;
+            readonly px14: 56;
+            readonly px16: 64;
+            readonly px20: 80;
+            readonly px24: 96;
+            readonly px28: 112;
+            readonly px32: 128;
+            readonly px36: 144;
+            readonly px40: 160;
+            readonly px44: 176;
+            readonly px48: 192;
+            readonly px52: 208;
+            readonly px56: 224;
+            readonly px60: 240;
+            readonly px64: 256;
+            readonly px72: 288;
+            readonly px80: 320;
+            readonly px96: 384;
+            readonly pxPx: 1;
+        };
+    };
+    readonly radius: {
+        readonly mode1: {
+            readonly roundedNone: 0;
+            readonly roundedXs: 2;
+            readonly roundedSm: 4;
+            readonly roundedMd: 6;
+            readonly roundedLg: 8;
+            readonly roundedXl: 12;
+            readonly rounded2xl: 16;
+            readonly rounded3xl: 24;
+            readonly rounded4xl: 32;
+            readonly roundedFull: 9999;
+        };
+    };
+    readonly tokens: {
+        readonly mode1: {
+            readonly 0: 0;
+            readonly 1: 1;
+            readonly 2: 2;
+            readonly 3: 3;
+            readonly 4: 4;
+            readonly 5: 5;
+            readonly 6: 6;
+            readonly 8: 8;
+            readonly 10: 10;
+            readonly 12: 12;
+            readonly 14: 14;
+            readonly 15: 15;
+            readonly 16: 16;
+            readonly 18: 18;
+            readonly 20: 20;
+            readonly 24: 24;
+            readonly 25: 25;
+            readonly 28: 28;
+            readonly 32: 32;
+            readonly 40: 40;
+            readonly 48: 48;
+            readonly 64: 64;
+            readonly 96: 96;
+            readonly 128: 128;
+            readonly 256: 256;
+            readonly 512: 512;
+            readonly 1024: 1024;
+            readonly 9999: 9999;
+            readonly "05": 0.5;
+            readonly "075": 0.75;
+            readonly "125": 1.25;
+            readonly "175": 1.75;
+            readonly "225": 2.25;
+            readonly "275": 2.75;
+        };
+    };
+    readonly twColors: {
+        readonly mode1: {
+            readonly slate50: "#f8fafc";
+            readonly slate100: "#f1f5f9";
+            readonly slate200: "#e2e8f0";
+            readonly slate300: "#cbd5e1";
+            readonly slate400: "#94a3b8";
+            readonly slate500: "#64748b";
+            readonly slate600: "#475569";
+            readonly slate700: "#334155";
+            readonly slate800: "#1e293b";
+            readonly slate900: "#0f172a";
+            readonly slate950: "#020617";
+            readonly gray50: "#f9fafb";
+            readonly gray100: "#f3f4f6";
+            readonly gray200: "#e5e7eb";
+            readonly gray300: "#d1d5db";
+            readonly gray400: "#9ca3af";
+            readonly gray500: "#6b7280";
+            readonly gray600: "#4b5563";
+            readonly gray700: "#374151";
+            readonly gray800: "#1f2937";
+            readonly gray900: "#111827";
+            readonly gray950: "#030712";
+            readonly zinc50: "#fafafa";
+            readonly zinc100: "#f4f4f5";
+            readonly zinc200: "#e4e4e7";
+            readonly zinc300: "#d4d4d8";
+            readonly zinc400: "#a1a1aa";
+            readonly zinc500: "#71717a";
+            readonly zinc600: "#52525b";
+            readonly zinc700: "#3f3f46";
+            readonly zinc800: "#27272a";
+            readonly zinc900: "#18181b";
+            readonly zinc950: "#09090b";
+            readonly neutral50: "#fafafa";
+            readonly neutral100: "#f5f5f5";
+            readonly neutral200: "#e5e5e5";
+            readonly neutral300: "#d4d4d4";
+            readonly neutral400: "#a3a3a3";
+            readonly neutral500: "#737373";
+            readonly neutral600: "#525252";
+            readonly neutral700: "#404040";
+            readonly neutral800: "#262626";
+            readonly neutral900: "#171717";
+            readonly neutral950: "#0a0a0a";
+            readonly stone50: "#fafaf9";
+            readonly stone100: "#f5f5f4";
+            readonly stone200: "#e7e5e4";
+            readonly stone300: "#d6d3d1";
+            readonly stone400: "#a8a29e";
+            readonly stone500: "#78716c";
+            readonly stone600: "#57534e";
+            readonly stone700: "#44403c";
+            readonly stone800: "#292524";
+            readonly stone900: "#1c1917";
+            readonly stone950: "#0c0a09";
+            readonly red50: "#fef2f2";
+            readonly red100: "#fee2e2";
+            readonly red200: "#fecaca";
+            readonly red300: "#fca5a5";
+            readonly red400: "#f87171";
+            readonly red500: "#ef4444";
+            readonly red600: "#dc2626";
+            readonly red700: "#b91c1c";
+            readonly red800: "#991b1b";
+            readonly red900: "#7f1d1d";
+            readonly red950: "#450a0a";
+            readonly orange50: "#fff7ed";
+            readonly orange100: "#ffedd5";
+            readonly orange200: "#fed7aa";
+            readonly orange300: "#fdba74";
+            readonly orange400: "#fb923c";
+            readonly orange500: "#f97316";
+            readonly orange600: "#ea580c";
+            readonly orange700: "#c2410c";
+            readonly orange800: "#9a3412";
+            readonly orange900: "#7c2d12";
+            readonly orange950: "#431407";
+            readonly amber50: "#fffbeb";
+            readonly amber100: "#fef3c7";
+            readonly amber200: "#fde68a";
+            readonly amber300: "#fcd34d";
+            readonly amber400: "#fbbf24";
+            readonly amber500: "#f59e0b";
+            readonly amber600: "#d97706";
+            readonly amber700: "#b45309";
+            readonly amber800: "#92400e";
+            readonly amber900: "#78350f";
+            readonly amber950: "#451a03";
+            readonly green50: "#f0fdf4";
+            readonly green100: "#dcfce7";
+            readonly green200: "#bbf7d0";
+            readonly green300: "#86efac";
+            readonly green400: "#4ade80";
+            readonly green500: "#22c55e";
+            readonly green600: "#16a34a";
+            readonly green700: "#15803d";
+            readonly green800: "#166534";
+            readonly green900: "#14532d";
+            readonly green950: "#052e16";
+            readonly emerald50: "#ecfdf5";
+            readonly emerald100: "#d1fae5";
+            readonly emerald200: "#a7f3d0";
+            readonly emerald300: "#6ee7b7";
+            readonly emerald400: "#34d399";
+            readonly emerald500: "#10b981";
+            readonly emerald600: "#059669";
+            readonly emerald700: "#047857";
+            readonly emerald800: "#065f46";
+            readonly emerald900: "#064e3b";
+            readonly emerald950: "#022c22";
+            readonly teal50: "#f0fdfa";
+            readonly teal100: "#ccfbf1";
+            readonly teal200: "#99f6e4";
+            readonly teal300: "#5eead4";
+            readonly teal400: "#2dd4bf";
+            readonly teal500: "#14b8a6";
+            readonly teal600: "#0d9488";
+            readonly teal700: "#0f766e";
+            readonly teal800: "#115e59";
+            readonly teal900: "#134e4a";
+            readonly teal950: "#042f2e";
+            readonly cyan50: "#ecfeff";
+            readonly cyan100: "#cffafe";
+            readonly cyan200: "#a5f3fc";
+            readonly cyan300: "#67e8f9";
+            readonly cyan400: "#22d3ee";
+            readonly cyan500: "#06b6d4";
+            readonly cyan600: "#0891b2";
+            readonly cyan700: "#0e7490";
+            readonly cyan800: "#155e75";
+            readonly cyan900: "#164e63";
+            readonly cyan950: "#083344";
+            readonly sky50: "#f0f9ff";
+            readonly sky100: "#e0f2fe";
+            readonly sky200: "#bae6fd";
+            readonly sky300: "#7dd3fc";
+            readonly sky400: "#38bdf8";
+            readonly sky500: "#0ea5e9";
+            readonly sky600: "#0284c7";
+            readonly sky700: "#0369a1";
+            readonly sky800: "#075985";
+            readonly sky900: "#0c4a6e";
+            readonly sky950: "#082f49";
+            readonly indigo50: "#eef2ff";
+            readonly indigo100: "#e0e7ff";
+            readonly indigo200: "#c7d2fe";
+            readonly indigo300: "#a5b4fc";
+            readonly indigo400: "#818cf8";
+            readonly indigo500: "#6366f1";
+            readonly indigo600: "#4f46e5";
+            readonly indigo700: "#4338ca";
+            readonly indigo800: "#3730a3";
+            readonly indigo900: "#312e81";
+            readonly indigo950: "#1e1b4b";
+            readonly violet50: "#f5f3ff";
+            readonly violet100: "#ede9fe";
+            readonly violet200: "#ddd6fe";
+            readonly violet300: "#c4b5fd";
+            readonly violet400: "#a78bfa";
+            readonly violet500: "#8b5cf6";
+            readonly violet600: "#7c3aed";
+            readonly violet700: "#6d28d9";
+            readonly violet800: "#5b21b6";
+            readonly violet900: "#4c1d95";
+            readonly violet950: "#2e1065";
+            readonly purple50: "#faf5ff";
+            readonly purple100: "#f3e8ff";
+            readonly purple200: "#e9d5ff";
+            readonly purple300: "#d8b4fe";
+            readonly purple400: "#c084fc";
+            readonly purple500: "#a855f7";
+            readonly purple600: "#9333ea";
+            readonly purple700: "#7e22ce";
+            readonly purple800: "#6b21a8";
+            readonly purple900: "#581c87";
+            readonly purple950: "#3b0764";
+            readonly fuchsia50: "#fdf4ff";
+            readonly fuchsia100: "#fae8ff";
+            readonly fuchsia200: "#f5d0fe";
+            readonly fuchsia300: "#f0abfc";
+            readonly fuchsia400: "#e879f9";
+            readonly fuchsia500: "#d946ef";
+            readonly fuchsia600: "#c026d3";
+            readonly fuchsia700: "#a21caf";
+            readonly fuchsia800: "#86198f";
+            readonly fuchsia900: "#701a75";
+            readonly fuchsia950: "#4a044e";
+            readonly pink50: "#fdf2f8";
+            readonly pink100: "#fce7f3";
+            readonly pink200: "#fbcfe8";
+            readonly pink300: "#f9a8d4";
+            readonly pink400: "#f472b6";
+            readonly pink500: "#ec4899";
+            readonly pink600: "#db2777";
+            readonly pink700: "#be185d";
+            readonly pink800: "#9d174d";
+            readonly pink900: "#831843";
+            readonly pink950: "#500724";
+            readonly rose50: "#fff1f2";
+            readonly rose100: "#ffe4e6";
+            readonly rose200: "#fecdd3";
+            readonly rose300: "#fda4af";
+            readonly rose400: "#fb7185";
+            readonly rose500: "#f43f5e";
+            readonly rose600: "#e11d48";
+            readonly rose700: "#be123c";
+            readonly rose800: "#9f1239";
+            readonly rose900: "#881337";
+            readonly rose950: "#4c0519";
+            readonly lime50: "#f7fee7";
+            readonly lime100: "#ecfccb";
+            readonly lime200: "#d9f99d";
+            readonly lime300: "#bef264";
+            readonly lime400: "#a3e635";
+            readonly lime500: "#84cc16";
+            readonly lime600: "#65a30d";
+            readonly lime700: "#4d7c0f";
+            readonly lime800: "#3f6212";
+            readonly lime900: "#365314";
+            readonly lime950: "#1a2e05";
+            readonly yellow50: "#fefce8";
+            readonly yellow100: "#fef9c3";
+            readonly yellow200: "#fef08a";
+            readonly yellow300: "#fde047";
+            readonly yellow400: "#facc15";
+            readonly yellow500: "#eab308";
+            readonly yellow600: "#ca8a04";
+            readonly yellow700: "#a16207";
+            readonly yellow800: "#854d0e";
+            readonly yellow900: "#713f12";
+            readonly yellow950: "#422006";
+            readonly blue50: "#eff6ff";
+            readonly blue100: "#dbeafe";
+            readonly blue200: "#bfdbfe";
+            readonly blue300: "#93c5fd";
+            readonly blue400: "#60a5fa";
+            readonly blue500: "#3b82f6";
+            readonly blue600: "#2563eb";
+            readonly blue700: "#1d4ed8";
+            readonly blue800: "#1e40af";
+            readonly blue900: "#1e3a8a";
+            readonly blue950: "#172554";
+            readonly white: "#ffffff";
+            readonly black: "#000000";
+        };
+    };
+    readonly uIColors: {
+        readonly lightMode: {
+            readonly backgroundColor: "#0000004d";
+            readonly chart3: "#0588f0";
+            readonly chart2: "#0090ff";
+            readonly chart4: "#0d74ce";
+            readonly chart1: "#5eb1ef";
+            readonly chart5: "#113264";
+            readonly sidebar: "#fafafa";
+            readonly sidebarForeground: "#0a0a0a";
+            readonly sidebarPrimary: "#171717";
+            readonly sidebarPrimaryForeground: "#fafafa";
+            readonly sidebarAccent: "#f5f5f5";
+            readonly sidebarAccentForeground: "#171717";
+            readonly sidebarBorder: "#d4d4d4";
+            readonly sidebarRing: "#737373";
+            readonly semanticBackground: "#696867";
+            readonly semanticBorder: "#898887";
+            readonly semanticForeground: "#ffffff";
+            readonly primary10: "#1d488519";
+            readonly datePickerCircle: "#3d6aa8";
+            readonly filterInput: "#fff";
+            readonly primarySelected: "#fff";
+            readonly bgWhite: "#ffffff";
+            readonly bgLightGrey: "#fafafa";
+            readonly bgGrey: "#f5f5f5";
+            readonly bgDarkGrey: "#e5e5e5";
+            readonly bgDark: "#0a0a0a";
+            readonly bgBrandPrimary: "#1d4885";
+            readonly bgBrandSecondary: "#eff8ff";
+            readonly bgDestructivePrimary: "#b91c1c";
+            readonly bgDestructiveSecondary: "#fef2f2";
+            readonly bgWarningPrimary: "#92400e";
+            readonly bgWarningSecondary: "#fef3c7";
+            readonly bgSuccessPrimary: "#047857";
+            readonly bgSuccessSecondary: "#ecfdf5";
+            readonly bgBluePrimary: "#0369a1";
+            readonly bgBlueSecondary: "#f0f9ff";
+            readonly borderXlight: "#f5f5f5";
+            readonly borderLight: "#e5e5e5";
+            readonly borderBrand: "#1d4885";
+            readonly borderDestructive: "#b91c1c";
+            readonly borderInput: "#e5e5e5";
+            readonly borderInputHover: "#dadada";
+            readonly hovOpacityPrimary: "#0a0a0a0d";
+            readonly hovOpacitySecondary: "#0a0a0a0d";
+            readonly hovSolidPrimary: "#fafafa";
+            readonly hovSolidSecondary: "#f5f5f5";
+            readonly pressedOpacityPrimary: "#0a0a0a1a";
+            readonly pressedOpacitySecondary: "#0a0a0a1a";
+            readonly pressedSolid: "#e5e5e5";
+            readonly inFocusOpacity: "#0a0a0a26";
+            readonly inFocusSolid: "#f5f5f5";
+            readonly interactionSelected: "#eff8ff";
+            readonly iconWhite: "#fafafa";
+            readonly iconBlack: "#0a0a0a";
+            readonly iconDisable: "#a3a3a3";
+            readonly iconPlaceholder: "#a3a3a3";
+            readonly iconGreyPrimary: "#a3a3a3";
+            readonly iconGreySecondary: "#737373";
+            readonly iconGreyTertiary: "#525252";
+            readonly iconDestructive: "#b91c1c";
+            readonly iconLink: "#1d4885";
+            readonly iconSuccess: "#047857";
+            readonly iconWarning: "#92400e";
+            readonly iconBlue: "#0369a1";
+            readonly textWhite: "#fafafa";
+            readonly textBlack: "#0a0a0a";
+            readonly textDisable: "#a3a3a3";
+            readonly textPlaceholder: "#a3a3a3";
+            readonly textGreyPrimary: "#a3a3a3";
+            readonly textGreySecondary: "#737373";
+            readonly textGreyTertiary: "#525252";
+            readonly textDestructive: "#b91c1c";
+            readonly textBrand: "#1d4885";
+            readonly textSuccess: "#047857";
+            readonly textWarning: "#92400e";
+            readonly textBlue: "#0369a1";
+            readonly badgeDefaultBg: "#f0f9ff";
+            readonly badgeDefaultFg: "#0369a1";
+            readonly badgeSuccessBg: "#ecfdf5";
+            readonly badgeSuccessFg: "#047857";
+            readonly badgeWarningBg: "#fef3c7";
+            readonly badgeWarningFg: "#92400e";
+            readonly badgeNeutralBg: "#e5e5e5";
+            readonly badgeNeutralFg: "#525252";
+            readonly badgeDestructiveBg: "#fef2f2";
+            readonly badgeDestructiveFg: "#b91c1c";
+        };
+        readonly darkMode: {
+            readonly backgroundColor: "#0000004d";
+            readonly chart3: "#0588f0";
+            readonly chart2: "#0090ff";
+            readonly chart4: "#0d74ce";
+            readonly chart1: "#5eb1ef";
+            readonly chart5: "#113264";
+            readonly sidebar: "#171717";
+            readonly sidebarForeground: "#fafafa";
+            readonly sidebarPrimary: "#0588f0";
+            readonly sidebarPrimaryForeground: "#fafafa";
+            readonly sidebarAccent: "#262626";
+            readonly sidebarAccentForeground: "#fafafa";
+            readonly sidebarBorder: "#ffffffcc";
+            readonly sidebarRing: "#737373";
+            readonly semanticBackground: "#272625";
+            readonly semanticBorder: "#535151";
+            readonly semanticForeground: "#ffffff";
+            readonly primary10: "#e6f1ff1a";
+            readonly datePickerCircle: "#7aa5e8";
+            readonly filterInput: "#171717";
+            readonly bgWhite: "#0a0a0a";
+            readonly bgLightGrey: "#171717";
+            readonly bgGrey: "#262626";
+            readonly bgDarkGrey: "#262626";
+            readonly bgDark: "#ffffff";
+            readonly bgBrandPrimary: "#bfdbfe";
+            readonly bgBrandSecondary: "#262626";
+            readonly bgDestructivePrimary: "#f87171";
+            readonly bgDestructiveSecondary: "#0a0a0a";
+            readonly bgWarningPrimary: "#fbbf24";
+            readonly bgWarningSecondary: "#0a0a0a";
+            readonly bgSuccessPrimary: "#a7f3d0";
+            readonly bgSuccessSecondary: "#0a0a0a";
+            readonly bgBluePrimary: "#7dd3fc";
+            readonly bgBlueSecondary: "#0a0a0a";
+            readonly borderXlight: "#262626";
+            readonly borderLight: "#404040";
+            readonly borderBrand: "#bfdbfe";
+            readonly borderDestructive: "#f87171";
+            readonly borderInput: "#262626";
+            readonly borderInputHover: "#404040";
+            readonly hovOpacityPrimary: "#ffffff0d";
+            readonly hovOpacitySecondary: "#ffffff1a";
+            readonly hovSolidPrimary: "#262626";
+            readonly hovSolidSecondary: "#262626";
+            readonly pressedOpacityPrimary: "#ffffff26";
+            readonly pressedOpacitySecondary: "#ffffff26";
+            readonly pressedSolid: "#171717";
+            readonly inFocusOpacity: "#ffffff40";
+            readonly inFocusSolid: "#262626";
+            readonly interactionSelected: "#262626";
+            readonly iconWhite: "#171717";
+            readonly iconBlack: "#d4d4d4";
+            readonly iconDisable: "#525252";
+            readonly iconPlaceholder: "#a3a3a3";
+            readonly iconGreyPrimary: "#737373";
+            readonly iconGreySecondary: "#a3a3a3";
+            readonly iconGreyTertiary: "#d4d4d4";
+            readonly iconDestructive: "#f87171";
+            readonly iconLink: "#bfdbfe";
+            readonly iconSuccess: "#a7f3d0";
+            readonly iconWarning: "#fbbf24";
+            readonly iconBlue: "#7dd3fc";
+            readonly textWhite: "#0a0a0a";
+            readonly textBlack: "#d4d4d4";
+            readonly textDisable: "#525252";
+            readonly textPlaceholder: "#a3a3a3";
+            readonly textGreyPrimary: "#737373";
+            readonly textGreySecondary: "#a3a3a3";
+            readonly textGreyTertiary: "#d4d4d4";
+            readonly textDestructive: "#f87171";
+            readonly textBrand: "#bfdbfe";
+            readonly textSuccess: "#a7f3d0";
+            readonly textWarning: "#fbbf24";
+            readonly textBlue: "#7dd3fc";
+            readonly badgeDefaultBg: "#0c4a6e";
+            readonly badgeDefaultFg: "#7dd3fc";
+            readonly badgeSuccessBg: "#064e3b";
+            readonly badgeSuccessFg: "#6ee7b7";
+            readonly badgeWarningBg: "#78350f";
+            readonly badgeWarningFg: "#fcd34d";
+            readonly badgeNeutralBg: "#404040";
+            readonly badgeNeutralFg: "#d4d4d4";
+            readonly badgeDestructiveBg: "#7f1d1d";
+            readonly badgeDestructiveFg: "#fecaca";
+            readonly primarySelected: "#1A273A";
+        };
+    };
+    readonly components: {
+        readonly mode1: {
+            readonly inputRadius: 12;
+            readonly inputHeight: 40;
+            readonly inputHeightLarge: 56;
+            readonly inputPaddingHorizontal: 12;
+            readonly inputPaddingVertical: 10;
+            readonly buttonHeight: 40;
+            readonly buttonRadius: 24;
+            readonly inputActiveBg: "#2e3034";
+            readonly inputFocussedBg: "#2e3034";
+            readonly inputFocussedRing: "#acd8fc";
+        };
+    };
+};
+
+type DialogSize = "sm" | "default" | "wide";
+/**
+ * Controls the dialog layout preset:
+ * - `"default"` — header with × close, plain body, footer
+ * - `"icon"` — large icon circle at top, no × close, body, footer
+ * - `"scrollable"` — header with × close, scrollable body, footer
+ * - `"scrollable-fixed"` — same as scrollable but header and footer have dividers (sticky feel)
+ */
+type DialogType = "default" | "icon" | "scrollable" | "scrollable-fixed";
+interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** @default "default" */
+    type?: DialogType;
+    /** @default "default" */
+    size?: DialogSize;
+    title?: string;
+    /** Icon element for the blue circle (only used when `type="icon"`). */
+    icon?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+    /** @default "Cancel" */
+    cancelLabel?: string;
+    /** @default "Continue" */
+    confirmLabel?: string;
+    /**
+     * Show the Cancel button in the footer.
+     * @default true
+     */
+    showCancel?: boolean;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
+    /**
+     * Base data-testid. Forwarded to the dialog container, with
+     * `${value}-close`, `${value}-cancel`, and `${value}-confirm` auto-derived
+     * onto the close (×), cancel, and confirm buttons.
+     */
+    "data-testid"?: string;
+    className?: string;
+}
+interface DialogIconProps {
+    children: React$1.ReactNode;
+    className?: string;
+}
+interface DialogHeaderProps {
+    title: string;
+    showClose?: boolean;
+    showDivider?: boolean;
+    /**
+     * Base data-testid. Forwarded to the header container, with
+     * `${value}-close` auto-derived onto the close (×) button.
+     */
+    "data-testid"?: string;
+    className?: string;
+}
+interface DialogBodyProps {
+    children?: React$1.ReactNode;
+    scrollable?: boolean;
+    className?: string;
+}
+interface DialogFooterProps {
+    cancelLabel?: string;
+    confirmLabel?: string;
+    /**
+     * Show the Cancel button.
+     * @default true
+     */
+    showCancel?: boolean;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    /** @default "primary" */
+    confirmVariant?: ButtonVariant;
+    /** Disable the confirm button. */
+    confirmDisabled?: boolean;
+    /**
+     * Base data-testid. Forwarded to the footer container, with
+     * `${value}-cancel` and `${value}-confirm` auto-derived onto the cancel
+     * and confirm buttons.
+     */
+    "data-testid"?: string;
+    showDivider?: boolean;
+    className?: string;
+}
+
+/**
+ * Modal dialog. Rendered inline (no portal) so CSS variables from the
+ * `.lego-land` ancestor always apply. Uses `fixed inset-0` so it still covers
+ * the full viewport regardless of its position in the tree.
+ *
+ * Use the `type` prop to select a layout preset:
+ * - `"default"` — header + × close + plain body + footer
+ * - `"icon"` — icon circle at top + header (no ×) + body + footer
+ * - `"scrollable"` — header + × close + scrollable body + footer
+ * - `"scrollable-fixed"` — scrollable + dividers between header/body/footer
+ *
+ * Figma reference: 3316:3400 (Dialogs & Toasts)
+ */
+declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Blue tinted icon circle for the top of a dialog.
+ * Figma reference: 3364:1516
+ */
+declare const DialogIcon: React$1.ForwardRefExoticComponent<DialogIconProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Header row with title and optional × close button / bottom divider.
+ * Figma reference: 3364:1437
+ */
+declare const DialogHeader: React$1.ForwardRefExoticComponent<DialogHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Content area. Pass `scrollable` to constrain height and enable vertical scroll.
+ * Figma reference: 3364:1541
+ */
+declare const DialogBody: React$1.ForwardRefExoticComponent<DialogBodyProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Footer with Cancel + Confirm buttons and an optional top divider.
+ * Figma reference: 3364:1397
+ */
+declare const DialogFooter: React$1.ForwardRefExoticComponent<DialogFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type ToastVariant = "success" | "error" | "default";
+interface ToastProps {
+    /**
+     * Determines the leading icon and title colour.
+     * @default "default"
+     */
+    variant?: ToastVariant;
+    /** Primary message text. */
+    title: string;
+    /** Optional secondary line shown below the title. */
+    subtext?: string;
+    /**
+     * Show the icon-only Cancel action button on the right.
+     * When used with `showToast()`, automatically dismisses the toast.
+     * @default false
+     */
+    showCancel?: boolean;
+    /** Called when the Cancel button is clicked. */
+    onCancel?: () => void;
+    /**
+     * Show the thin progress bar pinned to the bottom of the toast.
+     * @default false
+     */
+    showProgress?: boolean;
+    /**
+     * Progress percentage 0–100. Only used when `showProgress` is true.
+     * @default 0
+     */
+    progress?: number;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"toast"` if omitted.
+     * By convention pass a descriptive name like `"toast-success"`.
+     */
+    "data-testid"?: string;
+}
+/** Options passed to `showToast()`. */
+interface ShowToastOptions extends Omit<ToastProps, "onCancel"> {
+    /** Duration in ms before auto-dismiss. Defaults to Sonner's default (4000ms). */
+    duration?: number;
+}
+
+/**
+ * Place `<Toaster />` once near the root of your app (inside `LegoLandWrapper`).
+ *
+ * @example
+ * <LegoLandWrapper>
+ *   <Toaster />
+ *   <App />
+ * </LegoLandWrapper>
+ */
+declare const Toaster: {
+    ({ position, ...props }: React$1.ComponentProps<typeof Toaster$1>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Visual Toast component. Can be used standalone or via `showToast()` for
+ * Sonner-powered positioning and auto-dismiss.
+ *
+ * Figma reference: 3364:1614 (success), 3728:2422 (default), 3728:2438 (error)
+ */
+declare const Toast: React$1.ForwardRefExoticComponent<ToastProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Trigger a toast notification. Requires `<Toaster />` to be mounted in the app.
+ *
+ * @example
+ * showToast({ variant: "success", title: "Saved!", subtext: "All changes saved." });
+ * showToast({ variant: "error",   title: "Something went wrong", showCancel: true });
+ * showToast({ variant: "default", title: "Thanks for the feedback!", showProgress: true, progress: 40 });
+ */
+declare const showToast: ({ duration, ...props }: ShowToastOptions) => string | number;
+
+type StepState = "incomplete" | "active" | "complete";
+interface StepItem {
+    /**
+     * The label text shown next to the step indicator.
+     */
+    label: string;
+    /**
+     * The state of this step.
+     * @default "incomplete"
+     */
+    state?: StepState;
+    /**
+     * Optional click handler. When provided, the step renders as a `<button>`
+     * (rather than a static `<div>`) so consumers can use the stepper as
+     * navigation — e.g. clicking a completed step jumps the wizard back to it.
+     */
+    onClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Disable click navigation even when `onClick` is provided. Useful for the
+     * currently active step or steps that aren't reachable from the current
+     * position.
+     */
+    disabled?: boolean;
+}
+interface StepperProps {
+    /**
+     * Array of step items to display.
+     */
+    steps: StepItem[];
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"stepper"` if omitted.
+     * By convention pass a descriptive name like `"stepper-onboarding"`.
+     */
+    "data-testid"?: string;
+}
+interface StepperBarProps {
+    /**
+     * Total number of steps (segments).
+     * @default 4
+     */
+    totalSteps?: number;
+    /**
+     * Current active step (1-indexed). Segments up to this index are filled.
+     */
+    currentStep: number;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"stepper-bar"` if omitted.
+     * By convention pass a descriptive name like `"stepper-bar-create-agent"`.
+     */
+    "data-testid"?: string;
+}
+interface ProgressBarProps {
+    /**
+     * Progress value from 0 to 100.
+     */
+    value: number;
+    /**
+     * Maximum value.
+     * @default 100
+     */
+    max?: number;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"progress-bar"` if omitted.
+     * By convention pass a descriptive name like `"progress-bar-upload"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * StepperBar — Segmented progress bar indicating how many steps are complete.
+ * Based on Figma design node: 3706:2092
+ */
+declare const StepperBar: React$1.ForwardRefExoticComponent<StepperBarProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Stepper — Horizontal stepper with labeled steps and state indicators.
+ * Each step can be "incomplete", "active", or "complete".
+ * Based on Figma design node: 3729:2600
+ */
+declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * ProgressBar — Continuous progress bar with fill percentage.
+ * Based on Figma design node: 3357:4677
+ */
+declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Icon component tokens.
+ * Maps semantic color names to the icon CSS variable tokens.
+ * These automatically adapt to light/dark mode.
+ */
+declare const ICON_TOKENS: {
+    readonly color: {
+        readonly default: "text-icon-black";
+        readonly white: "text-icon-white";
+        readonly black: "text-icon-black";
+        readonly disable: "text-icon-disable";
+        readonly placeholder: "text-icon-placeholder";
+        readonly "grey-primary": "text-icon-grey-primary";
+        readonly "grey-secondary": "text-icon-grey-secondary";
+        readonly "grey-tertiary": "text-icon-grey-tertiary";
+        readonly destructive: "text-icon-destructive";
+        readonly link: "text-icon-link";
+        readonly success: "text-icon-success";
+        readonly warning: "text-icon-warning";
+        readonly blue: "text-icon-blue";
+    };
+    readonly size: {
+        readonly xs: "size-3";
+        readonly sm: "size-4";
+        readonly md: "size-5";
+        readonly lg: "size-6";
+        readonly xl: "size-8";
+    };
+    readonly picker: {
+        readonly trigger: "inline-flex items-center justify-center border border-token-light rounded-xl p-2 cursor-pointer hover:bg-token-dark/5 transition-colors";
+        readonly dropdown: "bg-token-white rounded-xl p-3 shadow-sm border border-token-xlight w-[320px] max-h-[400px] flex flex-col gap-2";
+        readonly search: "bg-token-light-grey rounded-xl px-3 py-2 text-xs text-fg-black placeholder:text-fg-placeholder outline-none border border-token-xlight focus:border-token-brand w-full";
+        readonly grid: "grid grid-cols-8 gap-1 overflow-y-auto max-h-[280px] p-1";
+        readonly gridItem: "flex items-center justify-center p-2 rounded-xl cursor-pointer hover:bg-interaction-hov-solid-primary transition-colors";
+        readonly gridItemSelected: "bg-token-brand-secondary";
+        readonly emptyText: "text-xs text-fg-grey-secondary text-center py-4";
+    };
+};
+type IconColor = keyof typeof ICON_TOKENS.color;
+type IconSize = keyof typeof ICON_TOKENS.size;
+
+interface IconWrapperProps {
+    /**
+     * Semantic icon color. Automatically adapts to light/dark mode.
+     * @default "default" (icon-black in light, icon-d4d4d4 in dark)
+     */
+    color?: IconColor;
+    /**
+     * Icon size preset.
+     * @default "sm" (16px)
+     */
+    size?: IconSize;
+    /**
+     * The icon to render. Can be a Lucide icon element or any ReactNode.
+     */
+    children: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+interface IconPickerProps {
+    /**
+     * Currently selected icon name (e.g. "Home", "Search").
+     */
+    value?: string | null;
+    /**
+     * Callback when an icon is selected.
+     */
+    onValueChange?: (iconName: string) => void;
+    /**
+     * Subset of Lucide icon names to show. If not provided, shows all common icons.
+     */
+    icons?: string[];
+    /**
+     * Icon color for the trigger and grid.
+     * @default "default"
+     */
+    color?: IconColor;
+    /**
+     * Icon size in the trigger.
+     * @default "md"
+     */
+    size?: IconSize;
+    /**
+     * Placeholder text when no icon is selected.
+     * @default "Pick icon"
+     */
+    placeholder?: string;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"btn"` (the trigger
+     * is a button) if omitted.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * IconWrapper — Wraps any icon (Lucide or custom SVG) with theme-aware colors.
+ *
+ * Automatically adapts icon color to light/dark mode using the icon/* CSS variable tokens.
+ * Solves the problem of icons breaking when switching themes.
+ *
+ * Usage:
+ * ```tsx
+ * <IconWrapper color="destructive" size="lg">
+ *   <Trash2 />
+ * </IconWrapper>
+ * ```
+ */
+declare const IconWrapper: React$1.ForwardRefExoticComponent<IconWrapperProps & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * IconPicker — A dropdown grid of Lucide icons for the user to pick from.
+ *
+ * Usage:
+ * ```tsx
+ * <IconPicker value={icon} onValueChange={setIcon} />
+ * ```
+ */
+declare const IconPicker: React$1.ForwardRefExoticComponent<IconPickerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ShadowDOMWrapperProps {
+    children: React$1.ReactNode;
+    /**
+     * CSS styles to inject into the shadow root.
+     * If not provided, styles will be extracted from the document's stylesheets.
+     * For best results, provide the compiled CSS string from your build process.
+     */
+    styles?: string;
+    /**
+     * Mode for the shadow root. Defaults to "open".
+     * - "open": Shadow root is accessible via JavaScript
+     * - "closed": Shadow root is not accessible via JavaScript
+     */
+    mode?: ShadowRootMode;
+    /**
+     * Additional CSS to inject into the shadow root.
+     */
+    additionalStyles?: string;
+    /**
+     * Whether to copy CSS variables from the document root.
+     * Defaults to true.
+     */
+    copyCSSVariables?: boolean;
+}
+/**
+ * ShadowDOMWrapper component that wraps children in a Shadow DOM.
+ * This isolates component styles and DOM structure from the parent document.
+ */
+declare const ShadowDOMWrapper: React$1.FC<ShadowDOMWrapperProps>;
+
+/**
+ * Cell content can be:
+ * - string: plain text
+ * - CellTextContent: text with optional className/style
+ * - React.ReactNode: any renderable node (icon, badge, custom element)
+ *
+ * Figma reference node: 3338:6396
+ */
+type CellTextContent = {
+    text: string;
+    className?: string;
+    style?: React$1.CSSProperties;
+};
+type CellContent = string | CellTextContent | React$1.ReactNode;
+type SortDirection = "asc" | "desc";
+interface SortState {
+    key: string;
+    direction: SortDirection | null;
+}
+/**
+ * Column width size options.
+ * Defaults to "md" (160px).
+ */
+declare enum ColumnWidth {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl"
+}
+interface ColumnDef<TRow> {
+    /**
+     * Unique identifier for the column. Used for pinning and sort state.
+     */
+    key: string;
+    /**
+     * Display label shown in the column header.
+     */
+    header: string;
+    /**
+     * Returns the cell content for a given row.
+     */
+    accessor: (row: TRow) => CellContent;
+    /**
+     * Whether this column supports sorting. Clicking the header cycles
+     * null → asc → desc → null and fires onSortChange.
+     */
+    isSortable?: boolean;
+    /**
+     * Current sort direction for this column. When set, this column is sorted.
+     * Updated by the consumer in onSortChange.
+     */
+    sort_direction?: SortDirection | null;
+    /**
+     * Column width size. Defaults to "md" (160px).
+     * Required for accurate sticky offsets on pinned columns.
+     */
+    width?: ColumnWidth;
+}
+interface TableAction<TRow> {
+    /**
+     * Tooltip label shown on hover.
+     */
+    label: string;
+    /**
+     * Icon rendered inside the action button.
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Called when the action button is clicked.
+     */
+    onClick: (row: TRow) => void;
+    /**
+     * data-testid for the action button. Static string, or a function that
+     * receives the row so consumers can build per-row testids
+     * (e.g. `(row) => `btn-delete-${row.id}``).
+     */
+    "data-testid"?: string | ((row: TRow) => string);
+}
+interface PaginationProps {
+    handlePageChange: (page: number) => void;
+    rowsPerPage: number;
+    setRowsPerPage: (rowsPerPage: number) => void;
+    currentPage: number;
+    total: number;
+    entityName?: string;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"pagination"` if omitted.
+     */
+    "data-testid"?: string;
+}
+interface DataTableProps<TRow> {
+    /**
+     * Column definitions in display order. Pinned columns will be
+     * reordered to the front automatically.
+     */
+    columns: ColumnDef<TRow>[];
+    /**
+     * Rows to render on the current page.
+     */
+    data: TRow[];
+    /**
+     * Array of column keys to pin. Listed in the desired left-to-right order.
+     * Pinned columns are sticky and separated by a vertical line.
+     */
+    pinnedColumns?: string[];
+    /**
+     * When true, renders a checkbox column as the first column.
+     */
+    showCheckbox?: boolean;
+    /**
+     * Action buttons rendered in the last (Actions) column.
+     */
+    actions?: TableAction<TRow>[];
+    /**
+     * Returns a stable unique ID for a row (used for selection).
+     * Defaults to JSON.stringify if not provided.
+     */
+    getRowId?: (row: TRow) => string;
+    /**
+     * Controlled selected row IDs.
+     */
+    selectedRows?: string[];
+    /**
+     * Called when selection changes.
+     */
+    onSelectionChange?: (ids: string[]) => void;
+    /**
+     * Called when sort state changes. The consumer should update columns to set
+     * sort_direction on the sorted column (or clear it when sort is null).
+     */
+    onSortChange?: (sort: SortState | null) => void;
+    /**
+     * When false, hides the pagination footer. Defaults to true.
+     */
+    showPagination?: boolean;
+    currentPage?: number;
+    rowsPerPage?: number;
+    total?: number;
+    onPageChange?: (page: number) => void;
+    onRowsPerPageChange?: (rowsPerPage: number) => void;
+    entityName?: string;
+    /**
+     * When false, hides the outer border. Defaults to true.
+     */
+    showBorder?: boolean;
+    /**
+     * When true, the header row stays fixed at the top while the table body scrolls.
+     */
+    stickyHeader?: boolean;
+    /**
+     * Optional React node to render in the header's top-right corner.
+     * Useful for header-level actions like column filters or settings.
+     */
+    headerAction?: React$1.ReactNode;
+    className?: string;
+    /**
+     * When true, shows skeleton loading state with 10 rows.
+     */
+    loading?: boolean;
+    /**
+     * Called when a data row is clicked. Receives the row data.
+     */
+    onRowClick?: (row: TRow) => void;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"table"` if omitted.
+     * Each data row also gets `data-testid={`row-${id}`}` automatically.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Pagination controls: rows-per-page selector + page navigation.
+ * Can also be used standalone outside of DataTable.
+ *
+ * Figma reference node: 3338:6396
+ */
+declare function Pagination({ handlePageChange, rowsPerPage, setRowsPerPage, currentPage, total, entityName, "data-testid": dataTestId, }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare namespace Pagination {
+    var displayName: string;
+}
+/**
+ * A fully-featured data table with:
+ * - Column pinning (sticky with vertical divider)
+ * - Horizontal scrolling
+ * - Optional checkbox selection column
+ * - Flexible cell content (text, styled text, icon, badge, or any React node)
+ * - Sortable columns (consumer-driven — fires onSortChange)
+ * - Row action buttons
+ * - Pagination via Pagination
+ *
+ * Figma reference node: 3338:6396
+ */
+declare function DataTable<TRow>({ columns, data, pinnedColumns, showCheckbox, actions, getRowId, selectedRows, onSelectionChange, onSortChange, showPagination, currentPage, rowsPerPage, total, onPageChange, onRowsPerPageChange, entityName, showBorder, stickyHeader, headerAction, className, loading, onRowClick, "data-testid": dataTestId, }: DataTableProps<TRow>): react_jsx_runtime.JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+
+/**
+ * Optional per-item trailing action button. Rendered before the
+ * selected-tick slot, visible only on row hover (so the row stays calm when
+ * idle). Use for destructive or secondary actions like "delete this saved
+ * view" without making them part of the row's primary click.
+ */
+interface FilterItemAction {
+    icon: React$1.ReactNode;
+    ariaLabel: string;
+    onClick: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Filter item structure
+ */
+interface FilterItem<T = string> {
+    value: T;
+    label: string;
+    /** Optional secondary line shown under the label (two-line option support) */
+    subtext?: string;
+    /** Optional icon for this item (per-item icon support) */
+    icon?: LucideIcon | React$1.ReactNode;
+    /** Show loading state for this item (per-item loading) */
+    loading?: boolean;
+    /** Optional custom display node to render instead of plain label */
+    labelNode?: React$1.ReactNode;
+    /** Optional trailing hover-action (e.g. delete) */
+    action?: FilterItemAction;
+}
+/**
+ * Filter item with section grouping
+ */
+interface FilterItemWithSection<T = string> {
+    sectionLabel: string;
+    items: FilterItem<T>[];
+}
+/**
+ * Filter types.
+ *  - "list"                  : multi-select list (with optional search, sections, drag)
+ *  - "text"                  : textarea
+ *  - "text_with_operands"    : operand dropdown + textarea
+ *  - "numeric"               : single numeric input
+ *  - "numeric_with_operands" : operand dropdown + numeric input (+ optional range mode for "is between")
+ *  - "in_between"            : two numeric inputs (min / max) — no operand dropdown
+ *  - "duration"              : numeric input + unit dropdown (sec / min / hours)
+ *  - "date"                  : date range picker with optional presets
+ */
+type FilterSelectType = "list" | "text" | "text_with_operands" | "numeric" | "numeric_with_operands" | "in_between" | "duration" | "date";
+/**
+ * Props for FilterSelect component
+ */
+interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange" | "className"> {
+    /** Filter label displayed in the trigger button */
+    label?: string;
+    /** Icon displayed on the left side of the trigger */
+    icon?: LucideIcon;
+    /** Array of selected item values */
+    selectedItems?: T[];
+    /** Available items for selection (flat or sectioned) */
+    items: (FilterItem<T> | FilterItemWithSection<T>)[];
+    /** Enable drag-and-drop reordering (default: false) */
+    draggable?: boolean;
+    /** To show clear button regardless of selected items or text / date content (default: true) */
+    showClearBtn?: boolean;
+    /**
+     * When `true`, the footer action reads "Clear" (non-destructive: wipes the value but
+     * keeps the filter in the bar). When `false` (default), it reads "Remove" (implies
+     * the filter itself is removed from the bar).
+     */
+    isPersistent?: boolean;
+    /** Callback when selection changes */
+    onSelectionChange?: (values: T[]) => void;
+    /** Callback when order changes (draggable mode) */
+    onOrderChange?: (values: T[]) => void;
+    /** Max width for selected items display */
+    selectedItemsMaxWidth?: string;
+    /** Override classes for selected items display area */
+    selectedItemsClassName?: string;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Max height for dropdown content */
+    dropdownMaxHeight?: string;
+    /** Show loading spinner in dropdown */
+    loading?: boolean;
+    onRemoveAll?: () => void;
+    /** Type of filter select */
+    type?: FilterSelectType;
+    /** Controlled text value */
+    text?: string;
+    /** Callback when text changes */
+    onTextChange?: (text: string) => void;
+    /** Selected operand value */
+    operand?: string;
+    /** Callback when operand changes */
+    onOperandChange?: (operand: string) => void;
+    /** Available operands with label and value */
+    operands?: {
+        value: string;
+        label: string;
+    }[];
+    /** Placeholder text for textarea/input */
+    textPlaceholder?: string;
+    /** Placeholder for operand select (default: "") */
+    operandPlaceholder?: string;
+    /** Unit label suffix shown inside numeric input (e.g. "sec", "min") */
+    unitLabel?: string;
+    /** Enable range mode for "numeric_with_operands" - shows min/max inputs */
+    isRangeMode?: boolean;
+    /** Range min value */
+    rangeMin?: string;
+    /** Range max value */
+    rangeMax?: string;
+    /** Callback when range min changes */
+    onRangeMinChange?: (value: string) => void;
+    /** Callback when range max changes */
+    onRangeMaxChange?: (value: string) => void;
+    /**
+     * Duration filter options — when type="duration" this defines the unit dropdown choices.
+     * Defaults to [{ value: "sec", label: "sec" }, { value: "min", label: "min" }, { value: "hours", label: "hours" }].
+     */
+    durationUnits?: {
+        value: string;
+        label: string;
+    }[];
+    /** Currently selected duration unit value */
+    durationUnit?: string;
+    /** Callback when duration unit changes */
+    onDurationUnitChange?: (unit: string) => void;
+    /** Show search input to filter list items */
+    showSearch?: boolean;
+    /** Search placeholder text (default: "Search...") */
+    searchPlaceholder?: string;
+    /** Date range value (for "date" type) */
+    date?: {
+        start?: Date;
+        end?: Date;
+    };
+    /** Callback when date range changes */
+    onDateChange?: (date: {
+        start?: Date;
+        end?: Date;
+    }) => void;
+    /** Date presets to show (default: true) */
+    datePresets?: boolean | DatePreset[];
+    /** Show time picker in date filter (default: true) */
+    showTime?: boolean;
+    /**
+     * Allow selecting dates in the future. Defaults to `false` because the
+     * date filter is typically used to filter past data (logs, conversations,
+     * etc.). Enable for use cases like scheduling.
+     */
+    allowFutureDates?: boolean;
+    /**
+     * Disable selecting dates before today. Useful for scheduling flows where
+     * the start date must be today or later. Combines with `allowFutureDates`.
+     */
+    disablePastDates?: boolean;
+    /** Empty state label when no items available */
+    emptyStateLabel?: string;
+    /** Additional className for the trigger button */
+    triggerClassName?: string;
+    /** Additional className for the dropdown content */
+    dropdownClassName?: string;
+    /**
+     * Override className for the `label` span inside the trigger. Useful when embedding
+     * FilterSelect as the right pill of `<CompoundFilterSelect>`, where the Figma spec
+     * paints the label in `text-fg-brand` (Subtext/xs) — see Figma 5427:32334.
+     */
+    labelClassName?: string;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"select"` if omitted.
+     * By convention pass a descriptive name like `"select-language"`.
+     */
+    "data-testid"?: string;
+}
+/** Date preset: label and function to compute the range */
+interface DatePreset {
+    value: string;
+    label: string;
+    getRange: () => {
+        start: Date;
+        end: Date;
+    };
+}
+/**
+ * Props for FilterListItem component
+ */
+interface FilterListItemProps<T = string> {
+    /** Unique item value */
+    value: T;
+    /** Display text */
+    label: string;
+    /** Optional subtext displayed below the label (two-line option) */
+    subtext?: string;
+    /** Selection state */
+    selected?: boolean;
+    /** Show drag handle */
+    draggable?: boolean;
+    /** Selection handler */
+    onSelect?: (value: T) => void;
+    /** Optional icon for this item */
+    icon?: React$1.ComponentType<any> | React$1.ReactNode;
+    /** Show loading spinner on this item */
+    loading?: boolean;
+    /** Optional custom display node replacing the plain label */
+    labelNode?: React$1.ReactNode;
+    /** Hover state (for stories) */
+    hover?: boolean;
+    /** Additional className */
+    className?: string;
+    /** Optional trailing hover-action (e.g. delete) */
+    action?: FilterItemAction;
+}
+
+declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps<string> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * FilterListItem — single row in a FilterSelect dropdown list.
+ *
+ * Figma spec (4085:5872, 4085:5885):
+ *   [drag handle?] [leading icon?] [label / optional subtext] [trailing tick when selected]
+ *
+ * Key fix: only the SELECTED option renders a tick — NOT every option.
+ * We do not render a Checkbox; the design uses trailing check + bg-brand-secondary for selection.
+ *
+ * Layout-shift: the trailing tick slot is always reserved (same width) so selection does not
+ * jitter item width. Hover / selected use background swaps only — no padding or border changes.
+ */
+declare const FilterListItem: React$1.ForwardRefExoticComponent<FilterListItemProps<string> & {
+    onDragStart?: (e: React$1.DragEvent) => void;
+    onDragOver?: (e: React$1.DragEvent) => void;
+    onDragLeave?: (e: React$1.DragEvent) => void;
+    onDrop?: (e: React$1.DragEvent) => void;
+    onDragEnd?: (e: React$1.DragEvent) => void;
+    isDragging?: boolean;
+    isDragOver?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Option for the left-side toggle dropdown (e.g., Agent/Crew).
+ */
+interface CompoundFilterToggleOption<T extends string = string> {
+    value: T;
+    label: string;
+    /** Icon shown inside the dropdown menu next to the label */
+    icon?: LucideIcon | React$1.ReactNode;
+}
+interface CompoundFilterSelectProps<T extends string = string> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Options for the left-side toggle dropdown */
+    options: CompoundFilterToggleOption<T>[];
+    /** Current selected value for the left toggle */
+    value: T;
+    /** Callback when left toggle value changes */
+    onChange: (value: T) => void;
+    /**
+     * Leading icon shown on the left pill (e.g., an icon representing the current selection).
+     * If omitted, falls back to the icon on the currently-selected option.
+     */
+    leadingIcon?: LucideIcon | React$1.ReactNode;
+    /** Optional label shown on the left pill next to the icon. If omitted, only icon + chevron are shown (compact mode). */
+    leftLabel?: string;
+    /** Right-side content, typically a <FilterSelect /> */
+    children?: React$1.ReactNode;
+    /** Disable the left toggle */
+    disabled?: boolean;
+}
+/**
+ * CompoundFilterSelect
+ *
+ * A compound filter comprising:
+ *  - Left pill: a dropdown toggle (e.g., Agent / Crew) with its own rounded-left border
+ *  - Right pill: any content (typically a <FilterSelect />) with its own rounded-right border
+ *
+ * The two pills overlap by 1px so their borders merge visually into a single continuous pill.
+ * Per Figma spec (1XTtQGgJ2Tb0wycZ7O1Ez9 · 5427:32324).
+ */
+declare function CompoundFilterSelect<T extends string = string>({ options, value, onChange, leadingIcon, leftLabel, children, disabled, className, ...props }: CompoundFilterSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace CompoundFilterSelect {
+    var displayName: string;
+}
+
+interface ButtonListItem {
+    value: string;
+    label: string;
+    icon?: LucideIcon;
+}
+interface ButtonListProps {
+    label?: string;
+    leadingIcon?: LucideIcon;
+    items: ButtonListItem[];
+    onSelect?: (value: string) => void;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    dropdownClassName?: string;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"btn"` if omitted.
+     * By convention pass a descriptive name like `"btn-actions"`.
+     */
+    "data-testid"?: string;
+}
+
+declare const ButtonList: React$1.ForwardRefExoticComponent<ButtonListProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type SpinnerSize = "sm" | "md" | "lg" | "xl";
+interface SpinnerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the spinner
+     * @default "md"
+     */
+    size?: SpinnerSize;
+    /**
+     * Custom className for the spinner container
+     */
+    className?: string;
+    /**
+     * Optional title shown beneath the spinner (Typography `label-md`,
+     * foreground black). Passing `title` or `texts` switches the spinner
+     * into composed loader mode (centered vertical stack, gap-3).
+     */
+    title?: string;
+    /**
+     * Optional list of sub-texts rotated every 2000ms beneath the title
+     * (Typography `subtext-xs`, muted tone). The rotation stops on the
+     * last item. Resets to index 0 when the array reference changes.
+     */
+    texts?: string[];
+}
+
+/**
+ * Spinner component - Displays a loading spinner with size variations
+ * Based on Figma design node: 3357:4429
+ *
+ * When `title` or `texts` is supplied, renders a composed loader layout:
+ * spinner + title (`label-md`) + rotating sub-text (`subtext-xs`, muted).
+ * Sub-texts advance every 2000ms and stop on the last item. With neither
+ * prop set, output is byte-identical to the legacy bare spinner.
+ */
+declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Supported Monaco editor languages.
+ */
+type JsonEditorLanguage = "json" | "javascript" | "typescript" | "yaml" | "xml" | "html" | "css" | "markdown" | "sql" | "plaintext";
+declare const JSON_EDITOR_LANGUAGE_OPTIONS: readonly JsonEditorLanguage[];
+interface JsonEditorProps {
+    value: string;
+    onChange: (val: string) => void;
+    onParsedObject?: (obj: unknown | null) => void;
+    height?: string;
+    label?: string;
+    schema?: Schema;
+    nodeId?: string;
+    language?: JsonEditorLanguage;
+    showExpandButton?: boolean;
+    /** When true, hide the header/toolbar (for embedding in KeyValueJsonEditor). */
+    hideHeader?: boolean;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"input"` if omitted.
+     */
+    "data-testid"?: string;
+}
+
+declare function JsonEditor({ value, onChange, onParsedObject, height, label, schema, nodeId, language, showExpandButton, hideHeader, "data-testid": dataTestId, }: JsonEditorProps): react_jsx_runtime.JSX.Element;
+
+interface UseJsonEditorParams {
+    value: string;
+    onChange: (val: string) => void;
+    onParsedObject?: (obj: unknown | null) => void;
+    schema?: Schema;
+    nodeId?: string;
+    language?: JsonEditorLanguage;
+}
+declare function useJsonEditor({ value, onChange, onParsedObject, schema, nodeId, language, }: UseJsonEditorParams): {
+    handleMount: OnMount;
+    handleExpandedMount: OnMount;
+    handleChange: (val: string | undefined) => void;
+    formatJson: () => Promise<void> | undefined;
+    formatExpandedJson: () => Promise<void> | undefined;
+    copyToClipboard: () => void;
+    errors: string[];
+    copied: boolean;
+};
+
+declare const enhanceJsonError: (message: string) => string;
+declare const MONACO_OPTIONS: {
+    fontSize: number;
+    lineHeight: number;
+    padding: {
+        top: number;
+        bottom: number;
+    };
+    minimap: {
+        readonly enabled: false;
+    };
+    automaticLayout: true;
+    scrollBeyondLastLine: false;
+    folding: true;
+    lineNumbers: "on";
+    renderLineHighlight: "none";
+    fontFamily: "'Geist Mono', 'Cascadia Code', 'Fira Code', monospace";
+    fontLigatures: true;
+    bracketPairColorization: {
+        readonly enabled: true;
+    };
+    guides: {
+        readonly bracketPairs: false;
+        readonly indentation: false;
+    };
+    overviewRulerLanes: 0;
+    hideCursorInOverviewRuler: true;
+    overviewRulerBorder: false;
+    scrollbar: {
+        readonly vertical: "auto";
+        readonly horizontal: "auto";
+        readonly useShadows: false;
+        readonly verticalScrollbarSize: 6;
+        readonly horizontalScrollbarSize: 6;
+        readonly arrowSize: 0;
+    };
+};
+/** Dialog editor: tighter padding, slightly larger font for readability in expanded view */
+declare const MONACO_OPTIONS_DIALOG: {
+    fontSize: number;
+    lineHeight: number;
+    padding: {
+        top: number;
+        bottom: number;
+    };
+    minimap: {
+        readonly enabled: false;
+    };
+    automaticLayout: true;
+    scrollBeyondLastLine: false;
+    folding: true;
+    lineNumbers: "on";
+    renderLineHighlight: "none";
+    fontFamily: "'Geist Mono', 'Cascadia Code', 'Fira Code', monospace";
+    fontLigatures: true;
+    bracketPairColorization: {
+        readonly enabled: true;
+    };
+    guides: {
+        readonly bracketPairs: false;
+        readonly indentation: false;
+    };
+    overviewRulerLanes: 0;
+    hideCursorInOverviewRuler: true;
+    overviewRulerBorder: false;
+    scrollbar: {
+        readonly vertical: "auto";
+        readonly horizontal: "auto";
+        readonly useShadows: false;
+        readonly verticalScrollbarSize: 6;
+        readonly horizontalScrollbarSize: 6;
+        readonly arrowSize: 0;
+    };
+};
+
+interface KeyValuePair {
+    key: string;
+    value: string;
+    /**
+     * Optional per-row error for the key field. When set, the key Input is
+     * rendered with `invalid` + this message as supporting-text.
+     */
+    keyError?: string;
+    /**
+     * Optional per-row error for the value field. When set, the value Input is
+     * rendered with `invalid` + this message as supporting-text.
+     */
+    valueError?: string;
+}
+interface KeyValueEditorProps {
+    /**
+     * Key-value pairs.
+     */
+    pairs: KeyValuePair[];
+    /**
+     * Called when pairs change.
+     */
+    onPairsChange: (pairs: KeyValuePair[]) => void;
+    /**
+     * Placeholder for key inputs.
+     */
+    keyPlaceholder?: string;
+    /**
+     * Placeholder for value inputs.
+     */
+    valuePlaceholder?: string;
+    /**
+     * Optional toolbar content (e.g. Toggle button) rendered in the header.
+     */
+    toolbar?: React$1.ReactNode;
+    /**
+     * When true, omit the header row. For use inside KeyValueJsonEditor.
+     */
+    hideHeader?: boolean;
+    /**
+     * When true, show delete button on each row. When false, delete is hidden.
+     * Rows can only be deleted until 1 row remains.
+     * @default true
+     */
+    allowDeleteRow?: boolean;
+    /**
+     * Optional leading icon rendered inside the value field (e.g. a type
+     * indicator like `<Brackets />`). Defaults to the git-compare glyph that
+     * matches the Figma reference.
+     */
+    valueLeadingIcon?: React$1.ReactNode;
+    /**
+     * Override the header label for the key column. Defaults to "Key".
+     * Use for domain-specific tables (e.g. `keyHeader="Restricted Term"`).
+     */
+    keyHeader?: string;
+    /**
+     * Override the header label for the value column. Defaults to "Value".
+     * Use for domain-specific tables (e.g. `valueHeader="Preferred Term"`).
+     */
+    valueHeader?: string;
+    /**
+     * Render an extra cell at the end of every row, between the value field
+     * and the delete button. Use it for per-row controls that don't fit the
+     * key/value contract (e.g. a `Toggle` for a third boolean field).
+     *
+     * `pair` is the current pair, `index` is the row index. Return `null` /
+     * `undefined` to render nothing for that row. The trailing slot is
+     * absent from the header — pass a `header` label string to render a
+     * matching column header, otherwise the spot stays empty.
+     *
+     * Backwards-compatible: omit both props and the editor renders the
+     * legacy 2-column layout.
+     */
+    renderRowTrailing?: (pair: KeyValuePair, index: number) => React$1.ReactNode;
+    /**
+     * Header label for the trailing column. Only rendered when
+     * `renderRowTrailing` is also set and `hideHeader` is false.
+     */
+    trailingHeader?: string;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"input"` if omitted.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * KeyValueEditor - Table-style key-value pair editor.
+ * Renders header (Key, Value) and editable rows with delete on hover.
+ *
+ * Each row's key and value fields use the shared <Input> component
+ * (inputSize="sm"), so focus/hover/pressed/invalid states and typography
+ * are inherited from the design system — no ad-hoc input styling lives
+ * here.
+ *
+ * Figma reference: 5905:39527
+ */
+declare const KeyValueEditor: React$1.ForwardRefExoticComponent<KeyValueEditorProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface AudioPlayerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onSeek" | "onRateChange"> {
+    /** Whether audio is currently playing. Controls the play/pause icon. */
+    isPlaying: boolean;
+    /** Current playback position, in seconds. */
+    currentTime: number;
+    /** Total duration, in seconds. */
+    duration: number;
+    /**
+     * Normalized bar heights for the waveform, each between 0 and 1.
+     * If omitted, a flat baseline line is rendered.
+     */
+    waveform?: number[];
+    /** Current playback speed (e.g. 1, 1.5, 2). Shown in a trailing pill. */
+    playbackRate?: number;
+    /** Available playback speeds to cycle through on pill click. */
+    playbackRateOptions?: number[];
+    /** Called when the play/pause button is clicked. */
+    onPlayPause?: () => void;
+    /** Called when the user clicks a position on the waveform. */
+    onSeek?: (seconds: number) => void;
+    /** Called when the user clicks the speed pill. */
+    onRateChange?: (rate: number) => void;
+    /** Custom formatter for times. Defaults to `m:ss`. */
+    formatTime?: (seconds: number) => string;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"player"` if omitted.
+     * By convention pass a descriptive name like `"player-call-recording"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * AudioPlayer — presentational waveform audio player.
+ *
+ * Pure / controlled: all state (playing, time, rate) is driven by props.
+ * Clicks on the waveform emit `onSeek(seconds)`; clicking the speed pill
+ * cycles through `playbackRateOptions` (default `[1, 1.5, 2]`).
+ *
+ * Figma: 3576:2351
+ */
+declare const AudioPlayer: React$1.ForwardRefExoticComponent<AudioPlayerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ChatBubbleBaseProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Message body (string or rich node). */
+    message: React$1.ReactNode;
+    /** Timestamp text (e.g. "04:47 PM"). Revealed on hover by default. */
+    timestamp?: string;
+    /** When true, timestamp is always visible. */
+    alwaysShowTimestamp?: boolean;
+    /** Override for the 16px avatar slot. */
+    avatar?: React$1.ReactNode;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"chat-bubble"` if omitted.
+     * By convention pass a descriptive name like `"chat-bubble-agent-greeting"`.
+     */
+    "data-testid"?: string;
+}
+interface ChatBubbleAgentProps extends ChatBubbleBaseProps {
+    /** Shown below the bubble (e.g. a "Tool Call" tag). */
+    trailing?: React$1.ReactNode;
+    /** In-Focus state — draws the brand ring around the bubble. */
+    focused?: boolean;
+    /**
+     * Workspace icon URL rendered inside the 16px avatar slot. Used when
+     * `avatar` isn't explicitly provided. Falls back to the bundled default
+     * Nurix avatar when neither prop is set.
+     */
+    workspaceIcon?: string;
+}
+interface ChatBubbleUserProps extends ChatBubbleBaseProps {
+    /** Shown below the message (e.g. a "Tool Call" tag). */
+    trailing?: React$1.ReactNode;
+    /** In-Focus state — draws the brand ring around the row. */
+    focused?: boolean;
+}
+
+/**
+ * ChatBubbleAgent — right-aligned agent message with an avatar dot.
+ * Figma: 3575:10095 / 3575:10154 (hover) / 5494:33659 (in-focus).
+ */
+declare const ChatBubbleAgent: React$1.ForwardRefExoticComponent<ChatBubbleAgentProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * ChatBubbleUser — left-aligned user message with a grey avatar icon.
+ * No bubble background; just inline icon + grey text.
+ * Figma: 3575:10815 / 3575:10829 (hover).
+ */
+declare const ChatBubbleUser: React$1.ForwardRefExoticComponent<ChatBubbleUserProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type PopoverSide = "top" | "right" | "bottom" | "left";
+type PopoverAlign = "start" | "center" | "end";
+type PopoverShadow = "none" | "xs" | "sm" | "md" | "lg";
+interface PopoverProps {
+    /** Controlled open state. If omitted, component is uncontrolled. */
+    open?: boolean;
+    /** Called when open state changes (both controlled and uncontrolled). */
+    onOpenChange?: (open: boolean) => void;
+    /** Uncontrolled default open. */
+    defaultOpen?: boolean;
+    /** The trigger element (e.g. button). Rendered in place. */
+    trigger: React$1.ReactNode;
+    /** Popover body content — can be anything. */
+    children: React$1.ReactNode;
+    /**
+     * Optional search input rendered at the top of the popover.
+     * When provided, renders a search bar above `children`.
+     */
+    search?: {
+        /** Controlled search value */
+        value?: string;
+        /** Called when the search input changes */
+        onValueChange?: (value: string) => void;
+        /** Placeholder text */
+        placeholder?: string;
+        /** Auto-focus the search input when popover opens */
+        autoFocus?: boolean;
+    };
+    /**
+     * Position relative to trigger.
+     * @default "bottom"
+     */
+    side?: PopoverSide;
+    /**
+     * Alignment along the side.
+     * @default "start"
+     */
+    align?: PopoverAlign;
+    /**
+     * Offset (px) between trigger and popover.
+     * @default 4
+     */
+    sideOffset?: number;
+    /**
+     * Show border around the popover container.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Shadow variant.
+     * @default "md"
+     */
+    shadow?: PopoverShadow;
+    /** Width (px or CSS value). If omitted, popover sizes to content. */
+    width?: number | string;
+    /** Min width (defaults to trigger width if omitted) */
+    minWidth?: number | string;
+    /** Max height — content scrolls beyond this. */
+    maxHeight?: number | string;
+    /** Additional className for the popover container. */
+    className?: string;
+    /** Additional className for the outer wrapper (trigger + popover). */
+    wrapperClassName?: string;
+    /** Close popover on outside click. @default true */
+    closeOnOutsideClick?: boolean;
+    /** Close popover on Escape key. @default true */
+    closeOnEscape?: boolean;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"popover"` if omitted.
+     * Applied to the floating popover content container (the `role="dialog"` element).
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Popover — generic floating container.
+ *
+ * Supports:
+ * - Any children as content
+ * - Optional search bar at the top
+ * - Border / shadow variants
+ * - Controlled or uncontrolled open state
+ * - Positioning (side + align)
+ * - Click-outside / Escape to close
+ *
+ * Figma reference: 43:10346 (Menu Dropdown)
+ *
+ * @example
+ * <Popover trigger={<Button>Open</Button>}>
+ *   <div>Any content here</div>
+ * </Popover>
+ *
+ * @example with search
+ * <Popover
+ *   trigger={<Button>Filter</Button>}
+ *   search={{ value: q, onValueChange: setQ, placeholder: "Search…" }}
+ * >
+ *   <ListItems />
+ * </Popover>
+ */
+declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Plain item shape for `MultiSelect`. Mirrors the minimal subset of
+ * `SelectContentItem` that's actually meaningful for a checkbox list — no
+ * leadIcon / subtext / trailing slots.
+ */
+interface MultiSelectItem<T extends string = string> {
+    value: T;
+    label: string;
+    /** Optional: disable a single item. */
+    disabled?: boolean;
+}
+interface MultiSelectProps<T extends string = string> {
+    /**
+     * Selected values (controlled).
+     */
+    value: T[];
+    /**
+     * Called whenever the selection changes.
+     */
+    onValueChange: (values: T[]) => void;
+    /**
+     * Items to render inside the dropdown.
+     */
+    items: MultiSelectItem<T>[];
+    /**
+     * Placeholder shown in the trigger when nothing is selected.
+     * @default "Select…"
+     */
+    placeholder?: string;
+    /**
+     * Optional label rendered on the left of the trigger before a vertical
+     * separator and the selected-items summary — mirrors `FilterSelect`'s
+     * "Label | selected1, selected2 +N" layout. Use this when the field's
+     * external label is also part of the trigger (e.g. compact rows where
+     * the form-level label is omitted).
+     */
+    label?: string;
+    /**
+     * Render a search input above the list.
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * Placeholder for the search input.
+     * @default "Search…"
+     */
+    searchPlaceholder?: string;
+    /**
+     * Render a "(Select All)" toggle row above the items.
+     * @default true
+     */
+    showSelectAll?: boolean;
+    /**
+     * Size variant. Same vocabulary as `SelectTrigger.size` so a paired
+     * single-select and multi-select stay visually aligned.
+     * @default "regular"
+     */
+    size?: "small" | "regular" | "large";
+    /**
+     * Background variant. Same vocabulary as `SelectTrigger.bg`.
+     * @default "default"
+     */
+    bg?: "default" | "white";
+    /**
+     * Disable the entire control.
+     */
+    disabled?: boolean;
+    /**
+     * Max height for the items list. Content scrolls beyond this.
+     * @default 260
+     */
+    maxHeight?: number | string;
+    /**
+     * id for the trigger button.
+     */
+    id?: string;
+    /**
+     * Optional className applied to the trigger button.
+     */
+    className?: string;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"multi-select"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * MultiSelect — checkbox-list dropdown styled to match `Select`.
+ *
+ * Why this exists separately from `Select`: Radix Select is fundamentally
+ * single-select (it commits + closes on each pick). MultiSelect is built on
+ * `Popover` + `Checkbox` so the dropdown stays open while the user picks
+ * multiple items — but its trigger reuses `SELECT_TOKENS.container.*` so
+ * the height, border, chevron, and spacing match a sibling `Select` pixel-
+ * for-pixel.
+ *
+ * Behaviour mirrors FilterSelect's `type="list"` (search + Select-All +
+ * checkboxes), but the trigger is a form-field Select trigger rather than
+ * a filter pill — so it slots into form layouts next to a normal Select
+ * without visual drift.
+ */
+declare function MultiSelect<T extends string = string>({ value, onValueChange, items, placeholder, label, showSearch, searchPlaceholder, showSelectAll, size, bg, disabled, maxHeight, id, className, "data-testid": dataTestId, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick"> {
+    /**
+     * Whether the chip is in the selected state. Selected chips use the
+     * brand-secondary background and brand text color.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Click handler. When omitted, the chip renders as a non-interactive
+     * `<div>` (no hover, no press scale) — useful for read-only displays.
+     */
+    onClick?: () => void;
+    /**
+     * Optional icon shown before the label. Sized to 16px by the chip's
+     * own `[&>svg]:size-4` rule, so consumers can pass a raw lucide icon
+     * without wrapping.
+     */
+    leadingIcon?: React$1.ReactNode;
+    /**
+     * Optional icon shown after the label — typically a remove `<X />`
+     * for filter-style chips.
+     */
+    trailingIcon?: React$1.ReactNode;
+    /**
+     * Disable interactions. Renders dim and ignores pointer events.
+     */
+    disabled?: boolean;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"chip"`.
+     */
+    "data-testid"?: string;
+}
+
+/**
+ * Chip — small selectable pill with optional leading/trailing icons.
+ *
+ * Figma reference: 6332:23079.
+ *
+ * @example
+ *   <Chip selected={isOn} onClick={() => setIsOn((v) => !v)} leadingIcon={<GitCompare />}>
+ *     Uncle Chips
+ *   </Chip>
+ *
+ * When `onClick` is omitted, the chip renders as a non-interactive
+ * `<div>` (no hover tint, no press scale) so it doesn't read as
+ * clickable in read-only contexts.
+ */
+declare const Chip: React$1.ForwardRefExoticComponent<ChipProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface RuleBuilderProps {
+    /**
+     * Badge label shown in the header (e.g. "Rule 1").
+     */
+    title: string;
+    /**
+     * Controlled open state. When provided, `defaultOpen` is ignored and
+     * the consumer is responsible for toggling via `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Initial open state for the uncontrolled mode. Defaults to `true`.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the user toggles the chevron in the header.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Called when the user clicks the trash icon in the header. Omit to
+     * hide the delete button entirely.
+     */
+    onDelete?: () => void;
+    /**
+     * Optional icon shown in the title badge before the label. Defaults to
+     * a `Workflow` glyph matching the Figma reference.
+     */
+    titleIcon?: React$1.ReactNode;
+    /**
+     * Bottom strip rendered in the grey wrapper area below the white card.
+     * Pass an `<Input />` (or similar) — the label, icon, and layout are
+     * provided by RuleBuilder. Omit to hide the strip entirely (e.g. for
+     * rules that don't set a field value).
+     */
+    thenContent?: React$1.ReactNode;
+    /**
+     * Override the default "Then set field value to" label.
+     */
+    thenLabel?: React$1.ReactNode;
+    /**
+     * Override the default leading icon in the Then strip (`FileOutput`).
+     */
+    thenIcon?: React$1.ReactNode;
+    /**
+     * Body content — typically `<RuleBuilderClause />` with conditions and
+     * connectors composed inside. Rendered only when the card is open.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+    /**
+     * Optional `data-testid` for Playwright. Defaults to `"rule-builder"`.
+     */
+    "data-testid"?: string;
+}
+interface RuleBuilderClauseProps {
+    /**
+     * Clause label shown above the conditions (e.g. "IF", "WHEN"). Pass a
+     * string or any node for full custom control.
+     */
+    label?: React$1.ReactNode;
+    /**
+     * Conditions, connectors, and the `<RuleBuilderAddCondition />` button.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+}
+interface RuleBuilderConditionProps {
+    /**
+     * The cells of the condition row — typically 3 `<Select />` triggers
+     * (field, operator, value). Rendered with `gap-2` between them.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Called when the trash icon at the end of the row is clicked. Omit to
+     * hide the icon entirely (e.g. for the only / first condition).
+     */
+    onDelete?: () => void;
+    className?: string;
+}
+interface RuleBuilderConnectorProps {
+    /**
+     * Connector control — usually a `<Select />` showing "AND" / "OR".
+     * Rendered between two condition rows with vertical lines above and
+     * below for visual continuity.
+     */
+    children?: React$1.ReactNode;
+    className?: string;
+}
+interface RuleBuilderAddConditionProps {
+    /**
+     * Button label — defaults to "Add Condition".
+     */
+    label?: React$1.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+    "data-testid"?: string;
+}
+
+/**
+ * RuleBuilder — composable card for defining a single rule.
+ *
+ * Figma reference: 6587:462
+ *
+ * Layout: a grey-wrapped card with a header (badge + delete + collapse
+ * toggle), a collapsible body that hosts the IF clause(s), and an
+ * optional bottom strip ("Then set field value to ...") in the grey
+ * wrapper area below the white card.
+ *
+ * Children compose the body using the sibling exports:
+ *   - `<RuleBuilderClause label="IF">` — wraps a group of conditions
+ *   - `<RuleBuilderCondition>` — a single row, typically 3 Selects
+ *   - `<RuleBuilderConnector>` — AND/OR pill between two conditions
+ *   - `<RuleBuilderAddCondition onClick={...} />` — outline pill button
+ *
+ * Open state is controlled (`open` + `onOpenChange`) or uncontrolled
+ * (`defaultOpen`), mirroring the pattern used by `<Accordion />`.
+ */
+declare const RuleBuilder: React$1.ForwardRefExoticComponent<RuleBuilderProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Group of conditions under a labelled clause (e.g. "IF"). Typically
+ * holds `<RuleBuilderCondition />` rows separated by
+ * `<RuleBuilderConnector />`, terminated by `<RuleBuilderAddCondition />`.
+ */
+declare const RuleBuilderClause: React$1.ForwardRefExoticComponent<RuleBuilderClauseProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * A single condition row. Children are usually 3 Selects (field,
+ * operator, value); the row appends a trailing trash icon when
+ * `onDelete` is provided. Use `className="w-[144px]"` on the
+ * `<SelectTrigger />` for the wide cells to match the Figma layout.
+ */
+declare const RuleBuilderCondition: React$1.ForwardRefExoticComponent<RuleBuilderConditionProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * AND/OR connector pill rendered between two conditions. Wraps the
+ * connector control with vertical lines above and below to mirror the
+ * Figma reference. Pass a `<Select />` (or any node) as children.
+ */
+declare const RuleBuilderConnector: React$1.ForwardRefExoticComponent<RuleBuilderConnectorProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * "+ Add Condition" outline-pill button. Forwards all native button
+ * props (`onClick`, `disabled`, etc.) — `label` overrides the text.
+ */
+declare const RuleBuilderAddCondition: React$1.ForwardRefExoticComponent<RuleBuilderAddConditionProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-export { Button, type ButtonProps };
+export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionSectionTrigger, type AccordionSectionTriggerProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, AudioPlayer, type AudioPlayerProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type BackButtonPosition, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonBorderRadius, ButtonList, type ButtonListItem, type ButtonListProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CellContent, type CellTextContent, ChatBubbleAgent, type ChatBubbleAgentProps, ChatBubbleUser, type ChatBubbleUserProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ColumnDef, ColumnWidth, CompoundFilterSelect, type CompoundFilterSelectProps, type CompoundFilterToggleOption, DEFAULT_THEME, DataTable, type DataTableProps, type DatePreset, Dialog, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, DialogHeaderNavigation, type DialogHeaderNavigationProps, type DialogHeaderNavigationVariant, type DialogHeaderProps, DialogIcon, type DialogIconProps, type DialogProps, type DialogSize, type DialogType, EmptyState, type EmptyStateIllustrationPosition, type EmptyStateIllustrationSize, type EmptyStateProps, FileInput, type FileInputProps, type FilterItem, type FilterItemWithSection, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, type IconColor, IconPicker, type IconPickerProps, type IconSize, IconWrapper, type IconWrapperProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, type InputVariant, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListNavItemProps, ListNavigation, type ListNavigationProps, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, MultiSelect, type MultiSelectItem, type MultiSelectProps, NestedButtonGroup, type NestedButtonGroupProps, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, Popover, type PopoverAlign, type PopoverProps, type PopoverShadow, type PopoverSide, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, RuleBuilder, RuleBuilderAddCondition, type RuleBuilderAddConditionProps, RuleBuilderClause, type RuleBuilderClauseProps, RuleBuilderCondition, type RuleBuilderConditionProps, RuleBuilderConnector, type RuleBuilderConnectorProps, type RuleBuilderProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, SidePanel, type SidePanelProps, type SidePanelSize, Slider, type SliderProps, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Surface, type SurfaceBackground, SurfaceBody, type SurfaceBodyProps, SurfaceFooter, type SurfaceFooterProps, SurfaceHeader, type SurfaceHeaderProps, type SurfaceProps, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagBadge, type TagBadgeProps, type TagOption, Textarea, type TextareaBorderRadius, type TextareaForceState, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Toggle, ToggleItem, type ToggleItemProps, type ToggleProps, type ToggleType, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographySize, type TypographyTone, type TypographyVariant, type TypographyWeight, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };