@nurix/ui-component-library 1.1.3-stage.99 → 1.1.4-stage.113

package/dist/index.d.mts

@@ -9,9 +9,9 @@ import { LucideIcon } from 'lucide-react';
 import { Schema } from 'ajv';
 import { OnMount } from '@monaco-editor/react';
 
-type ButtonBorderRadius = "none" | "soft" | "rounded";
-type ButtonVariant = "primary" | "secondary" | "destructive" | "outline" | "link" | "iconPrimary" | "iconSecondary" | "iconOutline";
-type ButtonSize = "default" | "sm" | "lg" | "link" | "icon" | "iconSm" | "iconXs";
+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;
@@ -33,10 +33,27 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 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 SupportingTextType = "help" | "error";
+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.
@@ -46,6 +63,19 @@ interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>,
      * 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.
      */
@@ -58,6 +88,19 @@ interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>,
      * 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.
      */
@@ -82,6 +125,7 @@ interface FileInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
     placeholder?: string;
     fileName?: string;
     input_border_radius?: InputBorderRadius;
+    inputVariant?: InputVariant;
     onFileChange?: (file: File | null) => void;
 }
 
@@ -129,18 +173,70 @@ interface InputGroupProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElem
      */
     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;
 }
-interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
+
+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;
-    forceState?: InputGroupForceState;
+    /**
+     * 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;
-    input_border_radius?: InputGroupBorderRadius;
+    /**
+     * Resize behavior of the textarea.
+     */
     resize?: "none" | "vertical" | "horizontal" | "both";
+    style?: React$1.CSSProperties;
 }
 
-declare const InputGroup: React$1.ForwardRefExoticComponent<InputGroupProps & React$1.RefAttributes<HTMLInputElement>>;
+/**
+ * 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";
@@ -211,7 +307,25 @@ interface DialogHeaderNavigationProps extends React$1.HTMLAttributes<HTMLDivElem
     backButtonPosition?: BackButtonPosition;
     disabled?: boolean;
 }
-type TabVariant = "top" | "side";
+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;
+}
 interface TabsProps extends React$1.HTMLAttributes<HTMLDivElement> {
     value?: string;
     defaultValue?: string;
@@ -237,6 +351,11 @@ declare function Tabs({ className, value, defaultValue, onValueChange, variant,
 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;
@@ -269,17 +388,30 @@ interface AccordionTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonE
 }
 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;
+}
 
 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 = "sm" | "default" | "lg";
+type AvatarSize = "xxs" | "xs" | "sm" | "default" | "lg";
 type AvatarShape = "circle" | "square";
 interface AvatarProps {
     /**
@@ -342,6 +474,19 @@ declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.Re
 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.
@@ -374,6 +519,36 @@ interface BadgeProps {
      * 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;
+}
+/**
+ * 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;
 }
@@ -412,6 +587,13 @@ declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefA
  * 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";
@@ -466,7 +648,10 @@ declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimit
     leadIcon?: React$1.ReactNode;
     /** Size of lead icon. "xs" = 16px, "sm" = 24px (default) */
     leadIconSize?: "xs" | "sm";
-    size?: "regular" | "large";
+    /** Size variant. "small" = 32px height, "regular" = 48px, "large" = 64px */
+    size?: "small" | "regular" | "large";
+    /** Background variant. "default" = input grey, "white" = card white */
+    bg?: "default" | "white";
 } & 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>>;
@@ -580,7 +765,7 @@ declare function usePlaySelect({ value, defaultValue, onValueChange, onPlayClick
 type EmptyStateIllustrationPosition = "top" | "bottom";
 /** Illustration size variant. */
 type EmptyStateIllustrationSize = "small" | "banner";
-interface EmptyStateProps extends React$1.HTMLAttributes<HTMLDivElement> {
+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. */
@@ -591,10 +776,10 @@ interface EmptyStateProps extends React$1.HTMLAttributes<HTMLDivElement> {
     illustrationWidth?: string | number;
     /** Custom illustration height (e.g. "220px", 200). Overrides illustrationSize for height. */
     illustrationHeight?: string | number;
-    /** Primary title text. */
-    title: string;
-    /** Secondary description text. */
-    description?: string;
+    /** 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[];
 }
@@ -639,6 +824,59 @@ interface ListProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 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>>;
+
 /**
  * Tooltip provider. Wrap your app (or a subtree) with this to enable tooltips.
  * Based on shadcn/ui + Radix Tooltip.
@@ -666,14 +904,35 @@ type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitiv
     shortcut?: string;
 };
 
-type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p1" | "p2" | "p3";
+/**
+ * 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> {
     /**
-     * Typography variant (maps to Figma text styles).
+     * 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"
@@ -694,6 +953,10 @@ interface TypographyProps extends React$1.HTMLAttributes<HTMLElement> {
 /**
  * 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>>;
 
@@ -1071,30 +1334,12 @@ declare const DEFAULT_THEME: {
     };
     readonly uIColors: {
         readonly lightMode: {
-            readonly background: "#f5f5f5";
-            readonly foreground: "#0a0a0a";
-            readonly border: "#e5e5e5";
-            readonly destructive: "#ef4444";
-            readonly secondary: "#e5e5e5";
-            readonly mutedForeground: "#737373";
-            readonly muted: "#f5f5f5";
             readonly backgroundColor: "#0000004d";
-            readonly primary: "#1d4885";
-            readonly secondaryForeground: "#0a0a0a";
-            readonly accentForeground: "#171717";
-            readonly accent: "#f5f5f5";
-            readonly ring: "#0090ff";
             readonly chart3: "#0588f0";
             readonly chart2: "#0090ff";
             readonly chart4: "#0d74ce";
             readonly chart1: "#5eb1ef";
             readonly chart5: "#113264";
-            readonly card: "#ffffff";
-            readonly cardForeground: "#0a0a0a";
-            readonly popover: "#ffffff";
-            readonly popoverForeground: "#0a0a0a";
-            readonly primaryForeground: "#fafafa";
-            readonly input: "#f5f5f5";
             readonly sidebar: "#fafafa";
             readonly sidebarForeground: "#0a0a0a";
             readonly sidebarPrimary: "#171717";
@@ -1106,17 +1351,64 @@ declare const DEFAULT_THEME: {
             readonly semanticBackground: "#696867";
             readonly semanticBorder: "#898887";
             readonly semanticForeground: "#ffffff";
-            readonly disabled: "#d4d4d4";
             readonly primary10: "#1d488519";
             readonly datePickerCircle: "#3d6aa8";
-            readonly success: "#10b981";
-            readonly warning: "#fef3c7";
-            readonly warningForeground: "#78350f";
-            readonly switchTrack: "#e5e5e5";
-            readonly hover: "#0a0a0a1a";
             readonly filterInput: "#fff";
             readonly primarySelected: "#fff";
-            readonly hoverSolid: "#efefef";
+            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 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";
@@ -1129,30 +1421,12 @@ declare const DEFAULT_THEME: {
             readonly badgeDestructiveFg: "#b91c1c";
         };
         readonly darkMode: {
-            readonly background: "#1e1e1e";
-            readonly foreground: "#fafafa";
-            readonly border: "#404040";
-            readonly destructive: "#f87171";
-            readonly secondary: "#262626";
-            readonly mutedForeground: "#a3a3a3";
-            readonly muted: "#262626";
             readonly backgroundColor: "#0000004d";
-            readonly primary: "#b5d5fd";
-            readonly secondaryForeground: "#fafafa";
-            readonly accentForeground: "#fafafa";
-            readonly accent: "#262626";
-            readonly ring: "#acd8fc";
             readonly chart3: "#0588f0";
             readonly chart2: "#0090ff";
             readonly chart4: "#0d74ce";
             readonly chart1: "#5eb1ef";
             readonly chart5: "#113264";
-            readonly card: "#262626";
-            readonly cardForeground: "#fafafa";
-            readonly popover: "#262626";
-            readonly popoverForeground: "#fafafa";
-            readonly primaryForeground: "#171717";
-            readonly input: "#2e3034";
             readonly sidebar: "#171717";
             readonly sidebarForeground: "#fafafa";
             readonly sidebarPrimary: "#0588f0";
@@ -1164,13 +1438,63 @@ declare const DEFAULT_THEME: {
             readonly semanticBackground: "#272625";
             readonly semanticBorder: "#535151";
             readonly semanticForeground: "#ffffff";
-            readonly disabled: "#404040";
             readonly primary10: "#e6f1ff1a";
             readonly datePickerCircle: "#7aa5e8";
-            readonly success: "#a7f3d0";
-            readonly warning: "#fde68a";
-            readonly warningForeground: "#78350f";
             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 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";
@@ -1181,19 +1505,16 @@ declare const DEFAULT_THEME: {
             readonly badgeNeutralFg: "#d4d4d4";
             readonly badgeDestructiveBg: "#7f1d1d";
             readonly badgeDestructiveFg: "#fecaca";
-            readonly switchTrack: "#ffffff";
-            readonly hover: "#ffffff1a";
             readonly primarySelected: "#1A273A";
-            readonly hoverSolid: "#171717";
         };
     };
     readonly components: {
         readonly mode1: {
-            readonly inputRadius: 16;
-            readonly inputHeight: 42;
+            readonly inputRadius: 12;
+            readonly inputHeight: 40;
             readonly inputHeightLarge: 56;
-            readonly inputPaddingHorizontal: 16;
-            readonly inputPaddingVertical: 8;
+            readonly inputPaddingHorizontal: 12;
+            readonly inputPaddingVertical: 10;
             readonly buttonHeight: 40;
             readonly buttonRadius: 24;
             readonly inputActiveBg: "#2e3034";
@@ -1340,11 +1661,8 @@ interface ShowToastOptions extends Omit<ToastProps, "onCancel"> {
 
 /**
  * Place `<Toaster />` once near the root of your app (inside `LegoLandWrapper`).
- * It is a thin wrapper around Sonner's Toaster with sensible defaults for this
- * design system.
  *
  * @example
- * // In your app root:
  * <LegoLandWrapper>
  *   <Toaster />
  *   <App />
@@ -1404,6 +1722,19 @@ interface StepperBarProps {
     className?: string;
     style?: React$1.CSSProperties;
 }
+interface ProgressBarProps {
+    /**
+     * Progress value from 0 to 100.
+     */
+    value: number;
+    /**
+     * Maximum value.
+     * @default 100
+     */
+    max?: number;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
 
 /**
  * StepperBar — Segmented progress bar indicating how many steps are complete.
@@ -1416,6 +1747,126 @@ declare const StepperBar: React$1.ForwardRefExoticComponent<StepperBarProps & Re
  * 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;
+}
+
+/**
+ * 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;
@@ -1569,17 +2020,38 @@ interface DataTableProps<TRow> {
      * sort_direction on the sorted column (or clear it when sort is null).
      */
     onSortChange?: (sort: SortState | null) => void;
-    currentPage: number;
-    rowsPerPage: number;
-    total: number;
-    onPageChange: (page: number) => void;
-    onRowsPerPageChange: (rowsPerPage: number) => 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;
 }
 
 /**
@@ -1604,7 +2076,7 @@ declare namespace Pagination {
  *
  * Figma reference node: 3338:6396
  */
-declare function DataTable<TRow>({ columns, data, pinnedColumns, showCheckbox, actions, getRowId, selectedRows, onSelectionChange, onSortChange, currentPage, rowsPerPage, total, onPageChange, onRowsPerPageChange, entityName, className, loading, }: DataTableProps<TRow>): react_jsx_runtime.JSX.Element;
+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, }: DataTableProps<TRow>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -1615,7 +2087,34 @@ declare namespace DataTable {
 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;
 }
+/**
+ * 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
  */
@@ -1626,15 +2125,17 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     icon?: LucideIcon;
     /** Array of selected item values */
     selectedItems?: T[];
-    /** Available items for selection */
-    items: FilterItem<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;
     /** Callback when selection changes */
     onSelectionChange?: (values: T[]) => void;
     /** Callback when order changes (draggable mode) */
     onOrderChange?: (values: T[]) => void;
-    /** Max width for selected items display (default: "35ch") */
+    /** Max width for selected items display */
     selectedItemsMaxWidth?: string;
     /** Override classes for selected items display area */
     selectedItemsClassName?: string;
@@ -1644,48 +2145,84 @@ interface FilterSelectProps<T = string> extends Omit<React$1.HTMLAttributes<HTML
     open?: boolean;
     /** Callback when open state changes */
     onOpenChange?: (open: boolean) => void;
-    /** Max height for dropdown content (default: "20vh") */
+    /** Max height for dropdown content */
     dropdownMaxHeight?: string;
     /** Show loading spinner in dropdown */
     loading?: boolean;
     onRemoveAll?: () => void;
-    /** Type of filter select: "list" (default), "text", "text_with_operands", or "date" */
-    type?: "list" | "text" | "text_with_operands" | "date";
-    /** Controlled text value for textarea/input (for "text" and "text_with_operands" types) */
+    /** Type of filter select */
+    type?: FilterSelectType;
+    /** Controlled text value */
     text?: string;
-    /** Callback when text changes (for "text" and "text_with_operands" types) */
+    /** Callback when text changes */
     onTextChange?: (text: string) => void;
-    /** Selected operand value (for "text_with_operands" type) */
+    /** Selected operand value */
     operand?: string;
-    /** Callback when operand changes (for "text_with_operands" type) */
+    /** Callback when operand changes */
     onOperandChange?: (operand: string) => void;
-    /** Available operands (for "text_with_operands" type) */
+    /** Available operands with label and value */
     operands?: {
         value: string;
         label: string;
     }[];
-    /** Placeholder text for textarea/input (for "text" and "text_with_operands" types) */
+    /** Placeholder text for textarea/input */
     textPlaceholder?: string;
-    /** Placeholder for operand select (for "text_with_operands" type, default: "") */
+    /** Placeholder for operand select (default: "") */
     operandPlaceholder?: string;
-    /** Date range value (for "date" type): { start, end } */
+    /** 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 (for "date" type) */
+    /** Callback when date range changes */
     onDateChange?: (date: {
         start?: Date;
         end?: Date;
     }) => void;
-    /** Date presets to show (default: true = built-in presets). Set false to hide, or pass custom array */
+    /** Date presets to show (default: true) */
     datePresets?: boolean | DatePreset[];
     /** Show time picker in date filter (default: true) */
     showTime?: 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;
 }
 /** Date preset: label and function to compute the range */
 interface DatePreset {
@@ -1704,12 +2241,20 @@ interface FilterListItemProps<T = string> {
     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 */
@@ -1718,6 +2263,18 @@ interface FilterListItemProps<T = string> {
 
 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;
@@ -1728,6 +2285,49 @@ declare const FilterListItem: React$1.ForwardRefExoticComponent<FilterListItemPr
     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;
@@ -1884,6 +2484,16 @@ declare const MONACO_OPTIONS_DIALOG: {
 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 {
     /**
@@ -1910,6 +2520,18 @@ interface KeyValueEditorProps {
      * 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;
     className?: string;
     style?: React$1.CSSProperties;
 }
@@ -1917,64 +2539,183 @@ interface KeyValueEditorProps {
 /**
  * KeyValueEditor - Table-style key-value pair editor.
  * Renders header (Key, Value) and editable rows with delete on hover.
- * Figma reference: 258:10275
+ *
+ * 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>>;
 
-type KeyValueJsonEditorMode = "keyValue" | "json";
-interface KeyValueJsonEditorProps {
-    /**
-     * Current mode: key-value table or JSON editor.
-     */
-    mode?: KeyValueJsonEditorMode;
-    /**
-     * Initial mode when uncontrolled.
-     */
-    defaultMode?: KeyValueJsonEditorMode;
-    /**
-     * Called when mode changes (e.g. via toggle).
-     */
-    onModeChange?: (mode: KeyValueJsonEditorMode) => void;
-    /**
-     * Key-value pairs (controlled). Used when mode is "keyValue".
-     */
-    pairs?: KeyValuePair[];
+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;
+}
+
+/**
+ * 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;
+}
+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;
+}
+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;
     /**
-     * JSON string (controlled). Used when mode is "json".
-     */
-    jsonValue?: string;
+     * 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;
+    };
     /**
-     * Called when pairs change (key-value mode).
+     * Position relative to trigger.
+     * @default "bottom"
      */
-    onPairsChange?: (pairs: KeyValuePair[]) => void;
+    side?: PopoverSide;
     /**
-     * Called when JSON changes (json mode).
+     * Alignment along the side.
+     * @default "start"
      */
-    onJsonChange?: (json: string) => void;
+    align?: PopoverAlign;
     /**
-     * Initial pairs when uncontrolled.
+     * Offset (px) between trigger and popover.
+     * @default 4
      */
-    defaultPairs?: KeyValuePair[];
+    sideOffset?: number;
     /**
-     * Initial JSON when uncontrolled.
+     * Show border around the popover container.
+     * @default false
      */
-    defaultJson?: string;
-    keyPlaceholder?: string;
-    valuePlaceholder?: string;
-    jsonHeight?: string;
-    jsonLabel?: string;
+    bordered?: boolean;
     /**
-     * JsonEditor language when in JSON mode.
+     * Shadow variant.
+     * @default "md"
      */
-    jsonLanguage?: JsonEditorLanguage;
+    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;
-    style?: React.CSSProperties;
+    /** 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;
 }
 
 /**
- * KeyValueJsonEditor - Unified component with toggle between Key-Value and JSON modes.
- * Figma reference: 258:10275, 298:6652
+ * 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 KeyValueJsonEditor: React$1.ForwardRefExoticComponent<KeyValueJsonEditorProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, AccordionContent, AccordionContentPlaceholder, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionValue, 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, Checkbox, type CheckboxProps, type ColumnDef, ColumnWidth, 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, FilterListItem, type FilterListItemProps, FilterSelect, type FilterSelectProps, Input, type InputBorderRadius, type InputForceState, InputGroup, type InputGroupBorderRadius, type InputGroupForceState, type InputGroupProps, type InputProps, JSON_EDITOR_LANGUAGE_OPTIONS, JsonEditor, type JsonEditorLanguage, type JsonEditorProps, KeyValueEditor, type KeyValueEditorProps, KeyValueJsonEditor, type KeyValueJsonEditorMode, type KeyValueJsonEditorProps, type KeyValuePair, LegoLandWrapper, type LegoLandWrapperProps, List, type ListBorderRadius, type ListProps, type ListType, type ListVariant, MONACO_OPTIONS, MONACO_OPTIONS_DIALOG, NumberBadge, type NumberBadgeProps, type NumberBadgeVariant, NurixThemeProvider, Pagination, type PaginationProps, PlaySelect, type PlaySelectAudioItem, type PlaySelectProps, PlaybackControl, type PlaybackControlProps, type PlaybackState, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, type StepItem, type StepState, Stepper, StepperBar, type StepperBarProps, type StepperProps, type SupportingTextType, Switch, type SwitchProps, type SwitchSize, type TabVariant, type TableAction, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, ThemeProvider, Toast, type ToastProps, type ToastVariant, Toaster, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, type TypographyTone, type TypographyVariant, type UsePlaySelectProps, type UseSelectProps, enhanceJsonError, showToast, useJsonEditor, usePlaySelect, useSelect, useTheme };
+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, 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, 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, Select, SelectContent, type SelectContentItem, SelectFormLabel, SelectGroup, type SelectGroupProps, SelectItem, SelectLabel, type SelectLabelProps, type SelectMenuItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShadowDOMWrapper, type ShowToastOptions, 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, 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 };