@cmgfi/clear-ds 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,2296 @@
+import { default as default_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
+import { RefAttributes } from 'react';
+
+/**
+ * Accordion — Clear Design System
+ *
+ * Collapsible content panels. Fully controlled — pass `openIds` + `onChange`.
+ * Four visual variants: `simple` (teal underline), `page`, `panel`, `flyout`
+ * (all three use a light gray header).
+ *
+ * @example
+ * const [open, setOpen] = useState(['item1']);
+ * <Accordion
+ *   variant="page"
+ *   items={[
+ *     { id: 'item1', title: 'Borrower', content: <BorrowerForm /> },
+ *     { id: 'item2', title: 'Property', content: <PropertyForm /> },
+ *   ]}
+ *   openIds={open}
+ *   onChange={setOpen}
+ * />
+ */
+export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface AccordionItem {
+    /** Unique identifier. */
+    id: string;
+    /** Header title text. */
+    title: string;
+    /** Panel body — any ReactNode, including tables, forms, etc. */
+    content: React.ReactNode;
+    /**
+     * Optional count badge shown next to the title.
+     * Visible in `panel` and `flyout` variants only.
+     */
+    badge?: number;
+    /**
+     * Optional action slot rendered between the title and the chevron.
+     * Primarily used in the `simple` variant (e.g. a checkbox + label).
+     */
+    headerAction?: React.ReactNode;
+    /** Prevents toggling when true. */
+    disabled?: boolean;
+}
+
+export declare interface AccordionProps {
+    /** Array of accordion items. */
+    items: AccordionItem[];
+    /**
+     * Visual variant.
+     * - `simple`  — transparent header, teal-700 bottom border + title
+     * - `page`    — full-width section, gray `#e4e4e4` bg, top-rounded header
+     * - `panel`   — compact gray `#f4f4f5` header, 32px height, optional badge
+     * - `flyout`  — medium gray `#f4f4f5` header, 44px height, optional badge
+     * @default 'page'
+     */
+    variant?: AccordionVariant;
+    /**
+     * IDs of currently open items (controlled).
+     * When `multiple` is false, at most one ID should be present.
+     */
+    openIds: string[];
+    /** Called with the new set of open IDs when the user toggles an item. */
+    onChange: (ids: string[]) => void;
+    /**
+     * Allow multiple panels open simultaneously.
+     * @default false
+     */
+    multiple?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare type AccordionVariant = 'simple' | 'page' | 'panel' | 'flyout';
+
+export declare type AlertSeverity = 'success' | 'info' | 'warn' | 'error';
+
+export declare function AUSChip({ label, color }: AUSChipProps): JSX_2.Element;
+
+export declare namespace AUSChip {
+    var displayName: string;
+}
+
+export declare type AUSChipColor = 'green' | 'red' | 'yellow' | 'grey';
+
+export declare interface AUSChipProps {
+    label: string;
+    /** AUS finding color — maps to standard severity tokens. */
+    color: AUSChipColor;
+}
+
+export declare type BadgeShape = 'square' | 'diamond' | 'circle';
+
+export declare function BannerAlert({ severity, title, detail, closable, onClose }: BannerAlertProps): JSX_2.Element;
+
+export declare namespace BannerAlert {
+    var displayName: string;
+}
+
+export declare interface BannerAlertProps {
+    severity: BannerAlertSeverity;
+    /** Bold heading text */
+    title: string;
+    /** Optional supporting detail shown after the title */
+    detail?: string;
+    /**
+     * Whether a dismiss (✕) button is shown.
+     * @default true
+     */
+    closable?: boolean;
+    onClose?: () => void;
+}
+
+export declare type BannerAlertSeverity = 'success' | 'info' | 'warn' | 'error' | 'neutral';
+
+export declare interface BannerTabBadge {
+    /** The number shown inside the badge. */
+    count: number;
+    /** Tooltip text revealed on hover. */
+    tooltip: string;
+    /**
+     * Shape of the badge.
+     * Defaults per position: 0 → square, 1 → diamond, 2 → circle.
+     */
+    shape?: BadgeShape;
+    /**
+     * CSS color value for the badge fill.
+     * Defaults per position: 0 → --red-500, 1 → --yellow-500, 2 → --green-300.
+     * When count is 0, always renders in muted gray regardless of this value.
+     */
+    color?: string;
+}
+
+export declare interface BannerTabBadgeGroup {
+    /** Ordered list of badge definitions within this group. */
+    badges: BannerTabBadge[];
+}
+
+export declare interface BannerTabItem {
+    /** Unique identifier. */
+    id: string;
+    /** Primary label ("DU", "Loan Summary"). */
+    label: string;
+    /** Secondary label after "/" ("LPA" in "DU / LPA"). */
+    subLabel?: string;
+    /** Muted status line ("Not Complete", "Rep. Score 732"). */
+    subtitle: string;
+    /** Primary status indicator shape + color. */
+    status: BannerTabStatus;
+    /** Secondary status indicator (used alongside subLabel). */
+    subStatus?: BannerTabStatus;
+    /** Shows a lock icon after the label. */
+    locked?: boolean;
+    /**
+     * One or more groups of count badges rendered below the subtitle.
+     * Multiple groups are separated by a pipe ( | ).
+     * Each badge defaults to square/diamond/circle with red/yellow/green fills
+     * by position — override per badge with `shape` and `color`.
+     */
+    badgeGroups?: BannerTabBadgeGroup[];
+    /** Custom docs/badge row rendered at the bottom of the card. */
+    docs?: React.ReactNode;
+    /** Prevents interaction when true. */
+    disabled?: boolean;
+}
+
+/**
+ * BannerTabs — Clear Design System
+ *
+ * Scrollable horizontal strip of card-shaped navigation tabs. Each card shows
+ * a status indicator, primary label, optional secondary label, a muted
+ * subtitle, and optional count badge groups. Overflow is handled with
+ * left/right arrow buttons and a fade gradient on the right edge.
+ *
+ * Fully controlled — the parent owns which tab is active.
+ *
+ * @example
+ * const [active, setActive] = useState('loan-summary');
+ * <BannerTabs items={loanStages} activeId={active} onChange={setActive} />
+ */
+export declare const BannerTabs: ForwardRefExoticComponent<BannerTabsProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface BannerTabsProps {
+    /** Array of banner tab definitions. */
+    items: BannerTabItem[];
+    /** Controlled: id of the active item, or null for none. */
+    activeId: string | null;
+    /** Called with the id when the user selects a tab. */
+    onChange: (id: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare interface BannerTabStatus {
+    shape: StatusShape;
+    color: StatusColor;
+}
+
+/**
+ * Button — Clear Design System
+ *
+ * A versatile action button with five visual variants, two sizes, optional
+ * leading/trailing icons, and an optional notification badge.
+ *
+ * @example
+ * <Button>Submit</Button>
+ *
+ * @example
+ * <Button variant="secondary" size="sm">Cancel</Button>
+ *
+ * @example
+ * <Button variant="danger" leadingIcon={<i className="pi pi-trash" />}>Delete</Button>
+ *
+ * @example
+ * <Button badge={3} trailingIcon={<i className="pi pi-chevron-down" />}>Actions</Button>
+ */
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style. Defaults to `'primary'`. */
+    variant?: ButtonVariant;
+    /** Size. `md` = 40px height / 15px font (default). `sm` = 24px height / 10px font. */
+    size?: ButtonSize;
+    /** Icon rendered before the label. Pass any React node (e.g. a PrimeIcon). */
+    leadingIcon?: React.ReactNode;
+    /** Icon rendered after the label. */
+    trailingIcon?: React.ReactNode;
+    /**
+     * Red notification badge shown after the label.
+     * Pass a number or short string (e.g. `5` or `"99+"`).
+     */
+    badge?: string | number;
+}
+
+export declare type ButtonSize = 'md' | 'sm';
+
+export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+
+/**
+ * Card — Clear Design System
+ *
+ * A surface container with consistent border, radius, and padding. Optionally
+ * renders a title, subtitle, body content, and a footer action area.
+ * All sections are optional — use what you need.
+ *
+ * @example
+ * // Standard card
+ * <Card title="Loan Summary" subTitle="Application #12345" footer={<Button>View</Button>}>
+ *   <p>Body content goes here.</p>
+ * </Card>
+ *
+ * @example
+ * // Content-only container (no header or footer)
+ * <Card><DataTable ... /></Card>
+ *
+ * @example
+ * // Interactive / clickable card
+ * <Card title="Open Application" onClick={() => navigate('/app/123')}>
+ *   <p>Click anywhere to open.</p>
+ * </Card>
+ */
+export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardProps {
+    /** Bold primary title rendered at the top of the card. */
+    title?: React.ReactNode;
+    /** Muted subtitle rendered below the title. */
+    subTitle?: React.ReactNode;
+    /**
+     * Action area rendered at the bottom of the card.
+     * Typically contains buttons or links.
+     */
+    footer?: React.ReactNode;
+    /** Card body content. Accepts any ReactNode. */
+    children?: React.ReactNode;
+    /**
+     * Makes the entire card interactive — adds a pointer cursor and a subtle
+     * shadow lift on hover. Pass a handler to opt into this mode.
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * Checkbox — Clear Design System
+ *
+ * A fully accessible checkbox with label, indeterminate, invalid, and disabled states.
+ * Three sizes (sm, md, lg) follow the type scale.
+ *
+ * @example
+ * <Checkbox label="Remember me" />
+ *
+ * @example
+ * <Checkbox label="Agree to terms" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />
+ *
+ * @example
+ * <Checkbox label="Select all" indeterminate />
+ *
+ * @example
+ * <Checkbox label="Accept terms" invalid helperText="You must accept the terms to continue." />
+ *
+ * @example
+ * <Checkbox label="Dense option" size="sm" />
+ */
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children' | 'size'> {
+    /** The visible label next to the checkbox. */
+    label?: React.ReactNode;
+    /** When true, renders a dash instead of a checkmark (useful for "select all" patterns). */
+    indeterminate?: boolean;
+    /** Shows the invalid/error state with red border and label. */
+    invalid?: boolean;
+    /** Helper text shown below the checkbox. Shown in red when `invalid` is true. */
+    helperText?: string;
+    /** Size variant. sm = 14px box / 10px label, md = 18px box / 12px label (default), lg = 22px box / 14px label. */
+    size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * CloseButton — Clear Design System
+ *
+ * A circular ghost button with a built-in ✕ icon. Use to dismiss modals,
+ * panels, toasts, tags, or any overlay. Requires an `aria-label` for
+ * screen-reader context (defaults to `"Close"`).
+ *
+ * @example
+ * <CloseButton onClick={onClose} />
+ *
+ * @example
+ * <CloseButton aria-label="Close dialog" size="md" onClick={onClose} />
+ */
+export declare const CloseButton: ForwardRefExoticComponent<CloseButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface CloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Accessible label. Defaults to `"Close"`. Override when the button
+     * closes something specific, e.g. `aria-label="Close dialog"`.
+     */
+    'aria-label'?: string;
+    /** Size variant. `sm` = 24×24px (default). `md` = 40×40px. */
+    size?: 'sm' | 'md';
+}
+
+export declare interface ColumnFilter {
+    /** Determines which filter UI to render. */
+    type: FilterType;
+    /** Options for `'checklist'` type. */
+    options?: FilterOption[];
+    /** Grouped options for `'grouped-checklist'` type. */
+    groups?: FilterGroup[];
+    /** Controlled filter value. Format depends on type. */
+    value?: unknown;
+    /** Called with the new value when the user clicks Apply. */
+    onChange?: (value: unknown) => void;
+}
+
+/**
+ * DataTable — Clear Design System
+ *
+ * A full-featured data grid with sortable/filterable columns, row selection,
+ * expandable row groups, nested row expansion, and inline row/cell editing.
+ *
+ * @example
+ * <DataTable
+ *   data={loans}
+ *   dataKey="id"
+ *   columns={[
+ *     { field: 'borrower', header: 'Borrower', sortable: true },
+ *     { field: 'amount', header: 'Amount', body: (row) => formatCurrency(row.amount) },
+ *   ]}
+ * />
+ */
+export declare function DataTable<T extends object = Record<string, unknown>>({ data, columns, dataKey, selectionMode, selection, onSelectionChange, sortMode, sortField, sortOrder, multiSortMeta, onSort, expansion, editMode, onRowEditSave, onRowEditCancel, onCellEdit, stripedRows, size, showFooter, loading, emptyMessage, scrollable, scrollHeight, className, style, }: DataTableProps<T>): JSX_2.Element;
+
+export declare namespace DataTable {
+    var displayName: string;
+}
+
+export declare interface DataTableColumn<T extends object = Record<string, unknown>> {
+    /** Data field key. */
+    field: string;
+    /** Column header content. */
+    header: React.ReactNode;
+    /** Show sort icons and make column sortable. */
+    sortable?: boolean;
+    /** Attach a filter popover to this column's header. */
+    filter?: ColumnFilter;
+    /** Custom cell renderer. Return any ReactNode. */
+    body?: (row: T, index: number) => React.ReactNode;
+    /**
+     * Editor rendered when a row/cell enters edit mode.
+     * `onChange` should be called with the new value.
+     */
+    editor?: (row: T, field: string, onChange: (val: unknown) => void) => React.ReactNode;
+    /** Footer cell content. Pass a function to receive all data. */
+    footer?: React.ReactNode | ((data: T[]) => React.ReactNode);
+    /** Column width (px number or CSS string). */
+    width?: number | string;
+    /** Text alignment for header and cells. */
+    align?: 'left' | 'center' | 'right';
+}
+
+/** Row expansion (nested rows) configuration. */
+export declare interface DataTableExpansion<T extends object = Record<string, unknown>> {
+    /** Field used as the unique row key for tracking expanded state. */
+    dataKey: string;
+    /**
+     * Field on each row that contains an array of child rows.
+     * If provided, the expanded section renders a nested DataTable
+     * using the same columns (or `columns` if specified).
+     */
+    childKey?: string;
+    /** Custom expansion template. Overrides the default nested table. */
+    template?: (row: T) => React.ReactNode;
+    /** Custom column set for the nested table. Defaults to parent columns. */
+    columns?: DataTableColumn<T>[];
+}
+
+/** Pre-grouped data structure. */
+export declare interface DataTableGroup<T extends object = Record<string, unknown>> {
+    /** Group header label. */
+    label: string;
+    /** Rows in this group. */
+    data: T[];
+    /** Whether the group starts expanded. Defaults to true. */
+    defaultExpanded?: boolean;
+}
+
+export declare interface DataTableProps<T extends object = Record<string, unknown>> {
+    /** Flat row array or pre-grouped array (`DataTableGroup<T>[]`). */
+    data: T[] | DataTableGroup<T>[];
+    /** Column definitions. */
+    columns: DataTableColumn<T>[];
+    /** Field name used as unique row identifier. Defaults to `'id'`. */
+    dataKey?: string;
+    selectionMode?: SelectionMode_2;
+    /** Controlled selection. `T` for single, `T[]` for multiple. */
+    selection?: T | T[] | null;
+    onSelectionChange?: (sel: T | T[] | null) => void;
+    sortMode?: 'single' | 'multiple';
+    sortField?: string;
+    sortOrder?: SortOrder;
+    multiSortMeta?: SortMeta[];
+    onSort?: (e: {
+        field: string;
+        order: SortOrder;
+        multiSortMeta?: SortMeta[];
+    }) => void;
+    expansion?: DataTableExpansion<T>;
+    editMode?: EditMode;
+    onRowEditSave?: (updated: T, original: T) => void;
+    onRowEditCancel?: () => void;
+    onCellEdit?: (row: T, field: string, value: unknown) => void;
+    stripedRows?: boolean;
+    /** `'sm'` = compact (6px padding). `'md'` = default (8px). */
+    size?: 'sm' | 'md';
+    showFooter?: boolean;
+    loading?: boolean;
+    emptyMessage?: React.ReactNode;
+    scrollable?: boolean;
+    scrollHeight?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * DatePicker — Clear Design System
+ *
+ * A date input with a popup calendar. Users can type a date directly (MM/DD/YYYY)
+ * or pick one from the calendar. Three views: day, month, and year.
+ *
+ * @example
+ * <DatePicker label="Closing date" value={date} onChange={setDate} />
+ *
+ * @example
+ * <DatePicker label="Start date" value={date} onChange={setDate} minDate={new Date()} />
+ *
+ * @example
+ * <DatePicker label="Date" value={date} onChange={setDate} required invalid helperText="Required." />
+ */
+export declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface DatePickerProps {
+    /** Controlled selected date. Pass `null` to clear. */
+    value?: Date | null;
+    /** Called when the user selects or clears a date. */
+    onChange?: (date: Date | null) => void;
+    /** Label shown above the input. */
+    label?: string;
+    /** Adds a red asterisk to the label. */
+    required?: boolean;
+    /** Helper text shown below the input. Turns red when `invalid` is true. */
+    helperText?: string;
+    /** Renders the input in error state with red border and red helper text. */
+    invalid?: boolean;
+    /** Disables the entire component. */
+    disabled?: boolean;
+    /** Placeholder for the text input. Defaults to "MM/DD/YYYY". */
+    placeholder?: string;
+    /** Dates before this date are disabled in the calendar. */
+    minDate?: Date;
+    /** Dates after this date are disabled in the calendar. */
+    maxDate?: Date;
+    /** When true (default), shows ISO week numbers as the first calendar column. */
+    showWeekNumbers?: boolean;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare const DEFAULT_DOC_TYPES: string[];
+
+/**
+ * Drawer — Clear Design System
+ *
+ * A full-height panel that slides in from the left or right edge, sitting on
+ * top of page content with a dark scrim behind it. Unlike SidePanel, Drawer
+ * does not push page content — it overlays it like a modal.
+ *
+ * The footer is always present with structured action buttons. A gradient
+ * shadow appears above the footer when the body content overflows (indicating
+ * more scrollable content below).
+ *
+ * Fully controlled — pass `isOpen` + `onClose`. Closes on ✕ click, scrim
+ * click, or Escape key.
+ *
+ * @example
+ * const [open, setOpen] = useState(false);
+ * <Drawer
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   title="Review Documents"
+ *   primaryAction={{ label: 'Save', onClick: handleSave }}
+ *   secondaryAction={{ label: 'Cancel', onClick: () => setOpen(false) }}
+ * >
+ *   <p>Drawer content here…</p>
+ * </Drawer>
+ */
+export declare const Drawer: ForwardRefExoticComponent<DrawerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface DrawerAction {
+    /** Button label */
+    label: string;
+    /** Called when the button is clicked */
+    onClick: () => void;
+    /** Disables the button */
+    disabled?: boolean;
+}
+
+export declare interface DrawerProps {
+    /** Controls open/closed state */
+    isOpen: boolean;
+    /** Called when ✕ is clicked, scrim is clicked, or Escape is pressed */
+    onClose: () => void;
+    /** Panel heading */
+    title?: string;
+    /** Optional subtitle rendered below the title — any ReactNode */
+    subtitle?: React.ReactNode;
+    /** Scrollable body content */
+    children: React.ReactNode;
+    /**
+     * Required primary action (right-aligned, primary variant).
+     * Always rendered.
+     */
+    primaryAction: DrawerAction;
+    /** Optional secondary action (right-aligned, secondary variant, left of primary) */
+    secondaryAction?: DrawerAction;
+    /**
+     * Optional tertiary actions (left-aligned, ghost variant).
+     * Multiple are supported — they appear to the left of the footer.
+     */
+    tertiaryActions?: DrawerAction[];
+    /**
+     * Which edge the drawer slides in from.
+     * @default 'right'
+     */
+    side?: 'left' | 'right';
+    /**
+     * Panel width in px.
+     * @default 800
+     */
+    width?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * DropdownButton — Clear Design System
+ *
+ * A button that opens an action menu dropdown when clicked. Uses the same
+ * variant and size system as Button, with a built-in trailing chevron icon.
+ *
+ * @example
+ * <DropdownButton
+ *   label="Actions"
+ *   items={[
+ *     { label: 'Edit', value: 'edit' },
+ *     { label: 'Duplicate', value: 'duplicate' },
+ *     { label: 'Delete', value: 'delete' },
+ *   ]}
+ *   onSelect={handleAction}
+ * />
+ *
+ * @example
+ * <DropdownButton label="Export" variant="secondary" size="sm" items={exportItems} onSelect={onExport} />
+ */
+export declare const DropdownButton: ForwardRefExoticComponent<DropdownButtonProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface DropdownButtonItem {
+    /** Displayed label. */
+    label: string;
+    /** Unique identifier passed to `onSelect`. */
+    value: string;
+    /** Optional icon rendered before the label. */
+    icon?: React.ReactNode;
+    /** When true, the item is non-interactive and visually muted. */
+    disabled?: boolean;
+    /** When true, renders a divider line above this item. */
+    divider?: boolean;
+}
+
+export declare interface DropdownButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onSelect'> {
+    /** The button label. */
+    label: string;
+    /** Menu items shown in the dropdown. */
+    items: DropdownButtonItem[];
+    /** Called when the user selects an item. */
+    onSelect?: (value: string) => void;
+    /** Visual style. Defaults to `'primary'`. */
+    variant?: ButtonVariant;
+    /** Size. Defaults to `'md'`. */
+    size?: ButtonSize;
+    /** Optional icon rendered before the label. */
+    leadingIcon?: React.ReactNode;
+}
+
+export declare type EditMode = 'row' | 'cell';
+
+/**
+ * FileUpload — Clear Design System
+ *
+ * A two-step document upload widget for the mortgage workflow:
+ *
+ * 1. User drops or browses for files → `onFilesAdded` fires (consumer uploads
+ *    to server); each file appears in the classification list below.
+ * 2. User selects a document type for each file (searchable dropdown).
+ * 3. When all files are classified, the Upload button activates. Clicking it
+ *    calls `onUpload` with the full list and resets the component.
+ *
+ * Invalid file types show an error message below the drop zone.
+ *
+ * @example
+ * <FileUpload
+ *   onFilesAdded={files => myApi.upload(files)}
+ *   onUpload={results => myApi.classify(results)}
+ * />
+ */
+export declare function FileUpload({ onFilesAdded, onUpload, docTypes, accept, initialFiles, className, style, }: FileUploadProps): JSX_2.Element;
+
+export declare namespace FileUpload {
+    var displayName: string;
+}
+
+export declare interface FileUploadProps {
+    /**
+     * Called as soon as files are dropped or selected (before classification).
+     * Use this to trigger the actual upload to your server.
+     */
+    onFilesAdded?: (files: File[]) => void;
+    /**
+     * Called when the Upload button is clicked with all classified files.
+     * The component resets its internal list after calling this.
+     */
+    onUpload: (files: FileUploadResult[]) => void;
+    /**
+     * Document type options shown in the per-file dropdown.
+     * @default DEFAULT_DOC_TYPES (standard mortgage document types)
+     */
+    docTypes?: string[];
+    /**
+     * Accepted file extensions passed to the native file input.
+     * Files dropped via drag-and-drop are validated against this list too.
+     * @default '.html,.heic,.jpeg,.jpg,.png,.gif,.bmp,.tiff,.tif,.pdf,.doc,.docx,.xls,.xlsx'
+     */
+    accept?: string;
+    /**
+     * Pre-populate the staged file list — useful for Storybook / testing.
+     * These files are added to the queue on mount without triggering `onFilesAdded`.
+     */
+    initialFiles?: File[];
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare interface FileUploadResult {
+    file: File;
+    docType: string;
+}
+
+export declare interface FilterGroup {
+    label: string;
+    options: FilterOption[];
+}
+
+export declare interface FilterOption {
+    label: string;
+    value: unknown;
+}
+
+declare interface FilterRule {
+    matchMode: string;
+    value: string;
+}
+
+export declare type FilterType = 'rule' | 'checklist' | 'grouped-checklist';
+
+export declare function FullNav({ topBar, loanBannerNav, urlATabsNav, className, style }: FullNavProps): JSX_2.Element;
+
+export declare function FullNavMobile({ topBar, urlATabsNavMobile, className, style }: FullNavMobileProps): JSX_2.Element;
+
+export declare interface FullNavMobileProps {
+    topBar: TopBarMobileProps;
+    /** URLA sub-nav — only renders when topBar.borrower is also set */
+    urlATabsNavMobile?: URLATabsNavMobileProps;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface FullNavProps {
+    topBar: TopBarProps;
+    /** When provided → loan-file context: LoanBannerNav renders below TopBar */
+    loanBannerNav?: LoanBannerNavProps;
+    /** When provided → URLA section: URLATabsNav renders below LoanBannerNav */
+    urlATabsNav?: URLATabsNavProps;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * IconButton — Clear Design System
+ *
+ * A circular icon-only button. Shares the same variants and sizes as Button.
+ * Always requires an `aria-label` since there is no visible text.
+ *
+ * @example
+ * <IconButton icon={<i className="pi pi-search" />} aria-label="Search" />
+ *
+ * @example
+ * <IconButton icon={<i className="pi pi-trash" />} aria-label="Delete" variant="danger" />
+ *
+ * @example
+ * <IconButton icon={<i className="pi pi-plus" />} aria-label="Add" size="sm" />
+ */
+export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The icon to display. Pass any React node (e.g. a PrimeIcon `<i className="pi pi-search" />`). */
+    icon: React.ReactNode;
+    /** Visual style. Defaults to `'primary'`. */
+    variant?: ButtonVariant;
+    /** Size. `md` = 40×40px (default). `sm` = 24×24px. */
+    size?: ButtonSize;
+    /**
+     * Accessible label describing the button's action. Required for screen-reader support
+     * since there is no visible text.
+     */
+    'aria-label': string;
+}
+
+export declare function InlineAlert({ severity, message }: InlineAlertProps): JSX_2.Element;
+
+export declare namespace InlineAlert {
+    var displayName: string;
+}
+
+export declare interface InlineAlertProps {
+    severity: AlertSeverity;
+    message: string;
+}
+
+export declare function InlineContainedAlert({ severity, message, closable, onClose }: InlineContainedAlertProps): JSX_2.Element;
+
+export declare namespace InlineContainedAlert {
+    var displayName: string;
+}
+
+export declare interface InlineContainedAlertProps {
+    severity: AlertSeverity;
+    message: string;
+    /**
+     * Whether a dismiss (✕) button is shown.
+     * @default true
+     */
+    closable?: boolean;
+    onClose?: () => void;
+}
+
+/**
+ * InputText — Clear Design System
+ *
+ * A text input with label, helper text, prefix/suffix icon slots, and full state support.
+ * Sizes follow the type scale (sm=10px, md=12px, lg=14px).
+ *
+ * @example
+ * // Basic
+ * <InputText label="Search" placeholder="Enter a keyword" />
+ *
+ * @example
+ * // Required with helper text
+ * <InputText label="Email" required helperText="We'll never share your email." />
+ *
+ * @example
+ * // Invalid / error state
+ * <InputText label="Email" invalid helperText="Please enter a valid email address." />
+ *
+ * @example
+ * // With icons
+ * <InputText
+ *   label="Search"
+ *   prefixIcon={<i className="pi pi-search" />}
+ *   suffixIcon={<i className="pi pi-times" />}
+ * />
+ *
+ * @example
+ * // Large size
+ * <InputText label="Full name" size="lg" placeholder="Jane Smith" />
+ */
+export declare const InputText: ForwardRefExoticComponent<InputTextProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputTextProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Field label displayed above the input. */
+    label?: string;
+    /** Appends a red asterisk to the label and sets `aria-required`. */
+    required?: boolean;
+    /** Helper or error text shown below the input. */
+    helperText?: string;
+    /** Triggers the error/invalid visual state with red styling. */
+    invalid?: boolean;
+    /** Size variant. Affects label size, input font size, and padding. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Icon or element rendered to the left of the input text. */
+    prefixIcon?: React.ReactNode;
+    /** Icon or element rendered to the right of the input text. */
+    suffixIcon?: React.ReactNode;
+    /** Associates the label `htmlFor` and input `id`. Auto-generated if not provided. */
+    id?: string;
+}
+
+/**
+ * LightningButton — Clear Design System
+ *
+ * A pill-shaped icon-only dropdown button with a lightning bolt icon.
+ * Used as the "Quick Actions" trigger in navigation bars and toolbars.
+ *
+ * Two variants:
+ * - `basic`  — no visible container, teal icon (default)
+ * - `filled` — solid teal-700 background
+ *
+ * @example
+ * <LightningButton
+ *   variant="outline"
+ *   items={[{ label: 'Copy Loan', value: 'copy' }]}
+ *   onSelect={(v) => console.log(v)}
+ *   aria-label="Quick actions"
+ * />
+ */
+export declare const LightningButton: ForwardRefExoticComponent<LightningButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface LightningButtonItem {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    divider?: boolean;
+}
+
+export declare interface LightningButtonProps {
+    /**
+     * Visual variant.
+     * - `'basic'`  — no visible container, teal icon (default)
+     * - `'filled'` — teal-50 bg / teal-200 border idle; teal-700 bg on hover/active
+     */
+    variant?: 'basic' | 'filled';
+    /**
+     * Button size. Only meaningful for the `filled` variant.
+     * - `'md'` — 36px tall (default)
+     * - `'sm'` — 24px tall
+     */
+    size?: 'md' | 'sm';
+    /** Dropdown items. */
+    items: LightningButtonItem[];
+    /** Called when the user selects a dropdown item. */
+    onSelect: (value: string) => void;
+    /** Disables the button and blocks dropdown. */
+    disabled?: boolean;
+    /** Accessible label — required since there is no visible text. */
+    'aria-label'?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * ListBox — Clear Design System
+ *
+ * A scrollable list that lets users select one or more values. Supports
+ * single-select, multi-select (checkboxes), a filter/search header, and
+ * grouped option sets with bold group headers.
+ *
+ * @example
+ * <ListBox options={items} value={val} onChange={setVal} />
+ *
+ * @example
+ * <ListBox multiple options={items} value={vals} onChange={setVals} />
+ *
+ * @example
+ * <ListBox multiple filter label="Loan Type" options={items} value={vals} onChange={setVals} />
+ *
+ * @example
+ * <ListBox multiple options={groupedItems} value={vals} onChange={setVals} />
+ */
+export declare const ListBox: ForwardRefExoticComponent<ListBoxProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ListBoxOption {
+    /** Displayed text. */
+    label: string;
+    /** Unique identifier used for selection state. */
+    value: string;
+    /** When true, this individual option is non-interactive. */
+    disabled?: boolean;
+}
+
+export declare interface ListBoxOptionGroup {
+    /** Bold, non-selectable group header. */
+    label: string;
+    /** Selectable options nested under this group. */
+    items: ListBoxOption[];
+}
+
+export declare interface ListBoxProps {
+    /**
+     * Flat list of options or grouped option sets.
+     * Groups are detected automatically when each entry contains an `items` array.
+     */
+    options: ListBoxOption[] | ListBoxOptionGroup[];
+    /**
+     * Controlled selection. Pass a `string` for single-select or `string[]` for
+     * multi-select. Pass `null` / `[]` to clear.
+     */
+    value?: string | string[] | null;
+    /** Called when the user clicks an option. */
+    onChange?: (value: string | string[] | null) => void;
+    /** When true, renders a checkbox per option and allows multiple selection. */
+    multiple?: boolean;
+    /** When true, shows a search input above the option list. */
+    filter?: boolean;
+    /** Placeholder text for the search input. Defaults to "Search…". */
+    filterPlaceholder?: string;
+    /** Label rendered above the filter input. Only visible when `filter` is true or a label/helperText is provided. */
+    label?: string;
+    /** Adds a red asterisk to the label and sets `aria-required` on the filter input. */
+    required?: boolean;
+    /** Helper text rendered below the filter input. Turns red when `invalid` is true. */
+    helperText?: string;
+    /** Renders a red border to signal a validation error. */
+    invalid?: boolean;
+    /** Disables the entire component — no interaction, muted colours. */
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * LoanBannerNav — Clear Design System
+ *
+ * Primary navigation bar for the loan origination application.
+ * Wraps `BannerTabs` in a full-width bar with a menu toggle on the left and
+ * a flexible action zone on the right.
+ *
+ * Optionally renders a secondary toolbar row (left/center/right slots) and/or
+ * a `BannerAlert` strip below.
+ *
+ * @example
+ * <LoanBannerNav
+ *   tabs={tabs}
+ *   activeTabId="urla"
+ *   onTabChange={setActiveTab}
+ *   onRefresh={handleRefresh}
+ *   onPrimary={handleSave}
+ * />
+ */
+export declare const LoanBannerNav: ForwardRefExoticComponent<LoanBannerNavProps & RefAttributes<HTMLElement>>;
+
+/**
+ * A single action rendered in the right-side action zone.
+ *
+ * Rendering rules (in priority order):
+ * 1. No `label` + `items`  → small secondary icon-only DropdownButton (⚡▼)
+ * 2. No `label` + no `items` → small secondary IconButton (💬, 🔄)
+ * 3. `label` + `items`     → small secondary DropdownButton with text (+ optional badge)
+ * 4. `label` only          → small secondary Button with optional leading icon
+ */
+export declare interface LoanBannerNavAction {
+    /** Unique key. */
+    value: string;
+    /** Button label. Omit for icon-only rendering. */
+    label?: string;
+    /** Click handler (used for non-dropdown buttons). */
+    onClick?: () => void;
+    /** Visual variant for text buttons. Defaults to `'secondary'`. */
+    variant?: ButtonVariant;
+    /** Leading icon (or the sole icon when label is omitted). */
+    icon?: React.ReactNode;
+    /** Red count badge shown on the button. */
+    badge?: string | number;
+    /** If provided, the button opens a dropdown menu. */
+    items?: DropdownButtonItem[];
+    /** Called when the user selects a dropdown item. */
+    onSelect?: (value: string) => void;
+    /** Renders a pipe `|` divider immediately before this action. */
+    dividerBefore?: boolean;
+    /** Aria label — required when `label` is omitted. */
+    ariaLabel?: string;
+    /**
+     * When `true`, renders as a `LightningButton` pill (bolt icon + chevron).
+     * Requires `items` and `onSelect`. `variant` controls outline vs filled.
+     */
+    lightning?: boolean;
+    /** LightningButton variant when `lightning` is true. Defaults to `'basic'`. */
+    lightningVariant?: 'basic' | 'filled';
+}
+
+export declare interface LoanBannerNavBanner {
+    /** Bold heading text shown in the alert strip. */
+    title: string;
+    /** Optional detail text shown after the title. */
+    detail?: string;
+    /** Visual severity. Defaults to `'warn'`. */
+    severity?: BannerAlertSeverity;
+    /** Whether the dismiss (✕) button is shown. Defaults to `true`. */
+    closable?: boolean;
+    /** Called when the user dismisses the banner. */
+    onClose?: () => void;
+}
+
+export declare interface LoanBannerNavCollapsedSection {
+    /** Section label (e.g. "Loan Summary"). */
+    label: string;
+    /** Muted sub-label (e.g. "LE Pending for 2 Days"). */
+    subLabel?: string;
+    /** Status dot color. */
+    status?: StatusColor;
+}
+
+export declare interface LoanBannerNavCondition {
+    /** Label text shown in the condition badge (e.g. "Dunning Delete Org"). */
+    label: string;
+    /** Called when the user dismisses the condition. */
+    onDismiss?: () => void;
+}
+
+export declare interface LoanBannerNavProps {
+    /** Tab definitions — reuses `BannerTabItem` from BannerTabs. */
+    tabs: BannerTabItem[];
+    /** Controlled active tab id. */
+    activeTabId: string;
+    /** Called when the user selects a different tab. */
+    onTabChange: (id: string) => void;
+    /** Hamburger / menu-toggle handler. */
+    onMenuToggle?: () => void;
+    /**
+     * Actions rendered left-to-right before the primary button.
+     * Order is exactly as provided — consumers control placement.
+     */
+    secondaryActions?: LoanBannerNavAction[];
+    /** Dedicated refresh icon button (sm secondary). */
+    onRefresh?: () => void;
+    /** Primary button label. Defaults to `'Save Loan'`. */
+    primaryLabel?: string;
+    /** Primary button click handler. */
+    onPrimary?: () => void;
+    /** When provided, primary renders as a `SplitButton`. */
+    primaryItems?: SplitButtonItem[];
+    /** Called when the user selects a SplitButton dropdown item. */
+    onPrimarySelect?: (value: string) => void;
+    /** When provided, renders a dismissible condition badge before the primary. */
+    condition?: LoanBannerNavCondition;
+    /**
+     * When provided, renders a secondary toolbar row below the main bar.
+     * Three layout slots: left (compact), center (flex-1), right (compact).
+     */
+    toolbar?: LoanBannerNavToolbar;
+    /**
+     * When provided, renders a `BannerAlert` strip below the main bar
+     * (or below the toolbar if both are present).
+     */
+    banner?: LoanBannerNavBanner;
+    /** Switches to compact single-row mode (hides BannerTabs, shows breadcrumb pills). */
+    collapsed?: boolean;
+    /** Parent section breadcrumb pill shown in collapsed mode. */
+    collapsedSection?: LoanBannerNavCollapsedSection;
+    /** When provided, renders a back-arrow before the breadcrumb pills. */
+    onCollapsedBack?: () => void;
+    /** When provided, renders a ">" expand button to reveal all tabs. */
+    onExpandTabs?: () => void;
+    /** Items for the ⚡▼ quick-actions dropdown in collapsed mode. */
+    collapsedQuickItems?: DropdownButtonItem[];
+    /** Called when the user picks a collapsed quick action. */
+    onCollapsedQuickAction?: (value: string) => void;
+}
+
+export declare interface LoanBannerNavToolbar {
+    /** Left slot — e.g. a compact section-navigation dropdown. */
+    left?: React.ReactNode;
+    /** Center slot — fills remaining width. e.g. a wide Select. */
+    center?: React.ReactNode;
+    /** Right slot — e.g. the ⚡▼ quick-actions dropdown. */
+    right?: React.ReactNode;
+}
+
+export declare function MiscChip({ label, color, dismissible, onDismiss }: MiscChipProps): JSX_2.Element;
+
+export declare namespace MiscChip {
+    var displayName: string;
+}
+
+export declare type MiscChipColor = 'red-darkest' | 'red-light' | 'yellow-darkest' | 'yellow-dark' | 'yellow-light' | 'green-darkest' | 'green-dark' | 'green-light' | 'blue-darkest' | 'blue-dark' | 'blue-light' | 'navy';
+
+export declare interface MiscChipProps {
+    label: string;
+    color: MiscChipColor;
+    /**
+     * Whether the dismiss (✕) button is shown.
+     * @default true
+     */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+
+/**
+ * Modal — Clear Design System
+ *
+ * A centered overlay dialog. Always rendered via a portal into `document.body`.
+ * Supports a dark scrim (default) or no scrim for inline-style alerts.
+ * Closes on ✕ click, scrim click, or Escape key.
+ *
+ * Fully controlled — pass `isOpen` + `onClose`.
+ *
+ * @example
+ * const [open, setOpen] = useState(false);
+ * <Modal
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   title="Unsaved Changes"
+ *   footer={
+ *     <>
+ *       <Button variant="secondary" size="sm" onClick={() => setOpen(false)}>No</Button>
+ *       <Button variant="primary" size="sm" onClick={() => setOpen(false)}>Yes</Button>
+ *     </>
+ *   }
+ * >
+ *   <p>Are you sure you want to leave without saving?</p>
+ * </Modal>
+ */
+export declare const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ModalProps {
+    /** Controls visibility */
+    isOpen: boolean;
+    /** Called when ✕ is clicked, scrim is clicked, or Escape is pressed */
+    onClose: () => void;
+    /** Modal title — renders in the header */
+    title?: string;
+    /** Modal body content — any ReactNode */
+    children: React.ReactNode;
+    /** Footer slot — typically right-aligned action buttons */
+    footer?: React.ReactNode;
+    /**
+     * Render a dark scrim behind the modal.
+     * @default true
+     */
+    scrim?: boolean;
+    /**
+     * Modal width in px.
+     * @default 510
+     */
+    width?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * MultiSelect — Clear Design System
+ *
+ * A dropdown that lets users select multiple values via checkboxes.
+ * Selected items appear as chips in the trigger. Supports live search/filter
+ * and a "Select all" toggle. Three sizes follow the type scale.
+ *
+ * @example
+ * <MultiSelect options={items} value={vals} onChange={setVals} label="Loan types" />
+ *
+ * @example
+ * <MultiSelect options={items} value={vals} onChange={setVals} required invalid helperText="Select at least one." />
+ *
+ * @example
+ * <MultiSelect options={items} value={vals} onChange={setVals} filter={false} showSelectAll={false} />
+ */
+export declare const MultiSelect: ForwardRefExoticComponent<MultiSelectProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface MultiSelectOption {
+    /** Displayed text. */
+    label: string;
+    /** Unique identifier used in the value array. */
+    value: string;
+    /** When true, this option cannot be toggled. */
+    disabled?: boolean;
+}
+
+export declare interface MultiSelectProps {
+    /** List of options to display in the dropdown. */
+    options: MultiSelectOption[];
+    /** Controlled array of selected values. */
+    value?: string[];
+    /** Called when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /** Placeholder shown in the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Label shown above the trigger input. */
+    label?: string;
+    /** Adds a red asterisk to the label and sets aria-required. */
+    required?: boolean;
+    /** Helper text shown below the trigger input. Turns red when `invalid` is true. */
+    helperText?: string;
+    /** Renders the trigger with a red border and turns the helper text red. */
+    invalid?: boolean;
+    /** Disables the entire component — trigger and dropdown are non-interactive. */
+    disabled?: boolean;
+    /**
+     * When true (default), shows a search input in the dropdown header
+     * that filters the option list in real time.
+     */
+    filter?: boolean;
+    /** Placeholder for the search input. Defaults to "Search…". */
+    filterPlaceholder?: string;
+    /**
+     * When true (default), shows a "Select all" checkbox in the dropdown header.
+     * The checkbox is indeterminate when some (but not all) options are selected.
+     */
+    showSelectAll?: boolean;
+    /** Size variant that controls font size and trigger padding. sm = 10px / md = 12px (default) / lg = 14px. */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare interface PageChangeEvent {
+    /** 0-based index of the first record on the new page. */
+    first: number;
+    /** Records per page. */
+    rows: number;
+    /** 0-based page number. */
+    page: number;
+}
+
+/**
+ * Paginator — Clear Design System
+ *
+ * Navigation control for paginated content. Works with DataTable or any
+ * paginated list. Three layout templates: `pages`, `report`, and `full`.
+ *
+ * @example
+ * // Basic page navigation
+ * <Paginator totalRecords={200} first={0} rows={10} onPageChange={setPage} />
+ *
+ * @example
+ * // Text summary instead of page numbers
+ * <Paginator totalRecords={200} first={0} rows={10} onPageChange={setPage} template="report" />
+ *
+ * @example
+ * // Full layout with rows-per-page selector
+ * <Paginator totalRecords={200} first={0} rows={10} onPageChange={setPage}
+ *   template="full" rowsPerPageOptions={[10, 25, 50]} />
+ */
+export declare const Paginator: ForwardRefExoticComponent<PaginatorProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface PaginatorProps {
+    /** Total number of records across all pages. */
+    totalRecords: number;
+    /** 0-based index of the first record on the current page. */
+    first: number;
+    /** Number of records per page. */
+    rows: number;
+    /** Called when the user changes the page or rows-per-page. */
+    onPageChange: (e: PageChangeEvent) => void;
+    /**
+     * Layout template.
+     * - `'pages'` (default): page-number buttons + rows-per-page select.
+     * - `'report'`: "Showing X to Y of Z entries" text instead of page buttons.
+     * - `'full'`: "Results per page" label + select + entry count on the left; page buttons on the right.
+     */
+    template?: 'pages' | 'report' | 'full';
+    /** Options shown in the rows-per-page dropdown. Defaults to `[10, 25, 50, 100]`. */
+    rowsPerPageOptions?: number[];
+    /** Number of page-number buttons visible at once. Defaults to 5. */
+    pageLinkSize?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * Picklist — Clear Design System
+ *
+ * Two-panel component for moving items between a source list and a target list.
+ * Supports checkbox multi-selection, custom item templates (table rows, etc.),
+ * optional filter inputs per panel, and optional move-all buttons.
+ *
+ * The component is fully controlled — `sourceItems` and `targetItems` are props,
+ * and `onChange` fires with the updated arrays on every move action.
+ *
+ * @example
+ * // Simple string list
+ * <Picklist
+ *   sourceItems={source}
+ *   targetItems={target}
+ *   onChange={({ source, target }) => { setSource(source); setTarget(target); }}
+ *   sourceHeader="Available"
+ *   targetHeader="Selected"
+ * />
+ *
+ * @example
+ * // Table-style rows
+ * <Picklist
+ *   sourceItems={source}
+ *   targetItems={target}
+ *   onChange={...}
+ *   sourceHeader={<MyTableHeader />}
+ *   targetHeader={<MyTableHeader />}
+ *   itemTemplate={(item) => <MyTableRow item={item} />}
+ * />
+ */
+export declare const Picklist: ForwardRefExoticComponent<PicklistProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface PicklistChangeEvent {
+    source: PicklistItem[];
+    target: PicklistItem[];
+}
+
+export declare interface PicklistItem {
+    /** Unique identifier for the item. */
+    id: string | number;
+    /** Default label shown when no itemTemplate is provided. */
+    label?: string;
+    /** PrimeIcons class name for the item icon (default rendering only). */
+    icon?: string;
+    /** Prevents this item from being selected or moved. */
+    disabled?: boolean;
+    /** Any additional data fields (available in itemTemplate). */
+    [key: string]: unknown;
+}
+
+export declare interface PicklistProps {
+    /** Items available in the source (left) list. */
+    sourceItems: PicklistItem[];
+    /** Items in the target (right) list. */
+    targetItems: PicklistItem[];
+    /** Called when items are moved between lists. Receives updated source and target arrays. */
+    onChange: (e: PicklistChangeEvent) => void;
+    /** Optional header for the source panel. Accepts any ReactNode — string, table header row, etc. */
+    sourceHeader?: React.ReactNode;
+    /** Optional header for the target panel. Accepts any ReactNode — string, table header row, etc. */
+    targetHeader?: React.ReactNode;
+    /**
+     * Custom render function for each item row content.
+     * The Picklist always prepends its own checkbox; this controls everything after it.
+     * Defaults to rendering `[icon?] label`.
+     */
+    itemTemplate?: (item: PicklistItem) => React.ReactNode;
+    /** Show a filter/search input at the top of each panel. */
+    filter?: boolean;
+    /** Placeholder for the source panel filter input. */
+    sourceFilterPlaceholder?: string;
+    /** Placeholder for the target panel filter input. */
+    targetFilterPlaceholder?: string;
+    /**
+     * Show move-all buttons (>> and <<).
+     * @default true
+     */
+    showMoveAll?: boolean;
+    /**
+     * Show checkboxes on each item row.
+     * Set to `false` when items have icons that serve as the visual indicator —
+     * selection is then shown via row highlight only.
+     * @default true
+     */
+    showCheckbox?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * Popup — Clear Design System
+ *
+ * A positioned overlay anchored to a trigger element. Opens above or below the
+ * trigger with a small triangle arrow pointing at it. Renders a scrim behind it
+ * to keep focus on the popup.
+ *
+ * Fully controlled — pass `isOpen` + `onClose`. The popup measures the trigger's
+ * screen position to place itself; the trigger is responsible for toggling state.
+ *
+ * @example
+ * const [open, setOpen] = useState(false);
+ * <Popup
+ *   trigger={<Button onClick={() => setOpen(true)}>Details</Button>}
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   title="Loan Details"
+ *   footer={<Button size="sm" onClick={() => setOpen(false)}>Close</Button>}
+ * >
+ *   <p>…content…</p>
+ * </Popup>
+ */
+export declare const Popup: ForwardRefExoticComponent<PopupProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface PopupProps {
+    /** Controls popup visibility */
+    isOpen: boolean;
+    /** Called when ✕ is clicked or the scrim is clicked */
+    onClose: () => void;
+    /**
+     * The element the popup is anchored to.
+     * The popup measures this element's position to place itself.
+     */
+    trigger: React.ReactNode;
+    /** Optional header title */
+    title?: string;
+    /** Popup body content — any ReactNode */
+    children: React.ReactNode;
+    /** Footer slot — typically action buttons, right-aligned with a separator border */
+    footer?: React.ReactNode;
+    /**
+     * Which side of the trigger the popup opens on.
+     * @default 'bottom'
+     */
+    placement?: 'top' | 'bottom';
+    /**
+     * Horizontal alignment relative to the trigger.
+     * - 'right': popup extends to the right; its left edge anchors near the trigger's left edge.
+     * - 'left': popup extends to the left; its right edge anchors near the trigger's right edge.
+     * The arrow always points at the exact trigger center.
+     * @default 'right'
+     */
+    align?: 'left' | 'right';
+    /**
+     * Popup width in px.
+     * @default 360
+     */
+    width?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare function ProfileChip({ label, leading, trailing, dismissible, onDismiss }: ProfileChipProps): JSX_2.Element;
+
+export declare namespace ProfileChip {
+    var displayName: string;
+}
+
+export declare interface ProfileChipProps {
+    label: string;
+    /**
+     * Content shown to the left of the label (avatar, icon, initials, etc.).
+     * Rendered in a 18×18px circular clip.
+     */
+    leading?: ReactNode;
+    /**
+     * Content shown to the right of the label (avatar, icon, initials, etc.).
+     * Rendered in a 18×18px circular clip.
+     */
+    trailing?: ReactNode;
+    /**
+     * Whether the dismiss (✕) button is shown.
+     * @default true
+     */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+
+export declare function ProgressBar({ value, max, error, errorMessage, 'aria-label': ariaLabel, }: ProgressBarProps): JSX_2.Element;
+
+export declare namespace ProgressBar {
+    var displayName: string;
+}
+
+export declare interface ProgressBarProps {
+    /**
+     * Current progress value. Clamped to [0, max].
+     */
+    value: number;
+    /**
+     * Maximum value. Defaults to 100.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Puts the bar into an error state — hides the fill and shows `errorMessage` in red.
+     */
+    error?: boolean;
+    /**
+     * Error message shown below the track when `error` is true.
+     */
+    errorMessage?: string;
+    /** Accessible label describing what is being measured. */
+    'aria-label'?: string;
+}
+
+export declare function ProgressSpinner({ size, label, theme, 'aria-label': ariaLabel, }: ProgressSpinnerProps): JSX_2.Element;
+
+export declare namespace ProgressSpinner {
+    var displayName: string;
+}
+
+export declare interface ProgressSpinnerProps {
+    /**
+     * Spinner size.
+     * - `sm` — 20px ring
+     * - `md` — 32px ring (default)
+     * - `lg` — 36px ring with the CLEAR logo centered inside
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Text label displayed below the spinner. Primarily designed for the `lg` variant.
+     */
+    label?: string;
+    /**
+     * Adjusts the label text color for placement on light or dark backgrounds.
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark';
+    /** Accessible label describing the loading state. */
+    'aria-label'?: string;
+}
+
+/**
+ * RadioButton — Clear Design System
+ *
+ * A fully accessible radio button with label, invalid, and disabled states.
+ * Three sizes (sm, md, lg) follow the type scale. Group multiple RadioButtons
+ * under a shared `name` prop so the browser enforces single selection.
+ *
+ * @example
+ * <RadioButton name="plan" value="basic" label="Basic" />
+ *
+ * @example
+ * <RadioButton name="plan" value="pro" label="Pro" checked onChange={handleChange} />
+ *
+ * @example
+ * <RadioButton name="plan" value="enterprise" label="Enterprise" invalid helperText="Contact sales first." />
+ *
+ * @example
+ * <RadioButton name="plan" value="basic" label="Small" size="sm" />
+ */
+export declare const RadioButton: ForwardRefExoticComponent<RadioButtonProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children' | 'size'> {
+    /** The visible label next to the radio button. */
+    label?: React.ReactNode;
+    /** Shows the invalid/error state with red border and label. */
+    invalid?: boolean;
+    /** Helper text shown below the radio button. Shown in red when `invalid` is true. */
+    helperText?: string;
+    /** Size variant. sm = 14px / md = 18px (default) / lg = 22px. */
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export declare interface RuleFilterValue {
+    operator: 'and' | 'or';
+    rules: FilterRule[];
+}
+
+/**
+ * Select — Clear Design System
+ *
+ * A single-value dropdown. Selecting an option closes the dropdown immediately.
+ * Supports an optional live-search filter, three sizes, and full state coverage:
+ * idle, hover, active/open, filled, invalid, and disabled.
+ *
+ * @example
+ * <Select options={opts} value={val} onChange={setVal} label="Loan type" />
+ *
+ * @example
+ * <Select options={opts} value={val} onChange={setVal} required invalid helperText="Required." />
+ *
+ * @example
+ * <Select options={opts} value={val} onChange={setVal} filter size="lg" />
+ */
+export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * SelectButton — Clear Design System
+ *
+ * A single-select toggle control with two variants:
+ * - `group`: options displayed as a joined row of toggle buttons (use for view/filter switching).
+ * - `options`: a split button showing the active selection; clicking opens a dropdown picker.
+ *
+ * Each option can carry an optional count number and a colored badge indicator.
+ *
+ * @example
+ * // Toggle group
+ * <SelectButton
+ *   options={[
+ *     { label: 'All', value: 'all', count: 42 },
+ *     { label: 'In Review', value: 'review', count: 5, badge: { value: 3, color: '#D60F00' } },
+ *     { label: 'Approved', value: 'approved', count: 12 },
+ *   ]}
+ *   value={view}
+ *   onChange={setView}
+ * />
+ *
+ * @example
+ * // Dropdown options variant
+ * <SelectButton
+ *   variant="options"
+ *   options={statusOptions}
+ *   value={status}
+ *   onChange={setStatus}
+ *   label="Status"
+ * />
+ */
+export declare const SelectButton: ForwardRefExoticComponent<SelectButtonProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SelectButtonBadge {
+    /** Displayed inside the badge circle. */
+    value: string | number;
+    /** Background color of the badge (hex or CSS color). */
+    color: string;
+}
+
+export declare interface SelectButtonOption {
+    /** Option display label. */
+    label: string;
+    /** Unique identifier used as the value. */
+    value: string;
+    /** Plain count shown next to the label in bold. */
+    count?: number;
+    /** Colored circular badge (e.g., teal for info, red for alerts). */
+    badge?: SelectButtonBadge;
+}
+
+export declare interface SelectButtonProps {
+    /** Options to display. */
+    options: SelectButtonOption[];
+    /** Currently selected value. */
+    value?: string | null;
+    /** Called when the user selects an option. */
+    onChange?: (value: string) => void;
+    /**
+     * - `'group'` (default): all options rendered as a joined toggle-button row.
+     *   Use for view switching or filter toggling.
+     * - `'options'`: renders a split button showing the current selection;
+     *   clicking opens a dropdown to pick a different option.
+     */
+    variant?: 'group' | 'options';
+    /** Optional field label rendered above the button. */
+    label?: string;
+    /** Adds a red asterisk next to the label. */
+    required?: boolean;
+    /** Disables the entire component. */
+    disabled?: boolean;
+    /** Placeholder for the `options` variant when nothing is selected. */
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+declare type SelectionMode_2 = 'none' | 'single' | 'multiple';
+export { SelectionMode_2 as SelectionMode }
+
+export declare interface SelectOption {
+    /** Displayed text. */
+    label: string;
+    /** Unique identifier used for the value. */
+    value: string;
+    /** When true, this option cannot be selected. */
+    disabled?: boolean;
+}
+
+export declare interface SelectProps {
+    /** List of options to display in the dropdown. */
+    options: SelectOption[];
+    /** Controlled selected value. Pass `null` to clear. */
+    value?: string | null;
+    /** Called when the user selects an option. Receives `null` when cleared. */
+    onChange?: (value: string | null) => void;
+    /** Placeholder shown in the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Label shown above the trigger input. */
+    label?: string;
+    /** Adds a red asterisk to the label and sets aria-required. */
+    required?: boolean;
+    /** Helper text shown below the trigger input. Turns red when `invalid` is true. */
+    helperText?: string;
+    /** Renders the trigger with a red border, red text, and red helper text. */
+    invalid?: boolean;
+    /** Disables the entire component — non-interactive and visually muted. */
+    disabled?: boolean;
+    /**
+     * When true, shows a search input at the top of the dropdown
+     * that filters the option list in real time.
+     */
+    filter?: boolean;
+    /** Placeholder for the search input. Defaults to "Search…". */
+    filterPlaceholder?: string;
+    /** Size variant. sm = 10px / md = 12px (default) / lg = 14px. */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare function SeverityChip({ label, severity, dismissible, onDismiss }: SeverityChipProps): JSX_2.Element;
+
+export declare namespace SeverityChip {
+    var displayName: string;
+}
+
+export declare interface SeverityChipProps {
+    label: string;
+    severity: SeverityChipVariant;
+    /**
+     * Whether the dismiss (✕) button is shown.
+     * @default true
+     */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+
+export declare type SeverityChipVariant = 'plain' | 'contrast' | 'error' | 'warning' | 'informative' | 'success';
+
+/**
+ * SidePanel — Clear Design System
+ *
+ * A fixed-position drawer that slides in from the right edge. It **pushes**
+ * main content (no overlay). Use with `SidePanelLayout` to shift the page
+ * content left when the panel opens.
+ *
+ * @example
+ * <SidePanelLayout open={open} panelWidth={470}>
+ *   <main>…page content…</main>
+ * </SidePanelLayout>
+ * <SidePanel isOpen={open} onClose={() => setOpen(false)} title="Ryan Smith">
+ *   …panel body…
+ * </SidePanel>
+ */
+export declare const SidePanel: ForwardRefExoticComponent<SidePanelProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * SidePanelLayout — Clear Design System
+ *
+ * A thin layout wrapper that pushes the main content left when a `SidePanel`
+ * is open. Place this around the page's main content area, then render a
+ * `SidePanel` alongside it (outside this wrapper).
+ *
+ * @example
+ * <SidePanelLayout open={panelOpen} panelWidth={470}>
+ *   <main>…page content…</main>
+ * </SidePanelLayout>
+ * <SidePanel isOpen={panelOpen} onClose={close} title="Details">…</SidePanel>
+ */
+export declare const SidePanelLayout: ForwardRefExoticComponent<SidePanelLayoutProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SidePanelLayoutProps {
+    /** Should match SidePanel's `isOpen` */
+    open: boolean;
+    /** Should match SidePanel's `width`. @default 470 */
+    panelWidth?: number;
+    /** The main page content that gets pushed left */
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare interface SidePanelProps {
+    /** Controls open/closed state */
+    isOpen: boolean;
+    /** Called when the ✕ button is pressed */
+    onClose: () => void;
+    /** Primary heading (e.g. borrower name). When omitted, the title row is hidden. */
+    title?: string;
+    /** Subtitle row below the title (e.g. phone + loan# link as ReactNode) */
+    subtitle?: React.ReactNode;
+    /**
+     * When provided, renders a Save button in the header (teal, sm).
+     * Called on Save click.
+     */
+    onSave?: () => void;
+    /**
+     * Slot below the title row — intended for the future BoltDropdown
+     * section navigator. Accepts any ReactNode.
+     */
+    headerContent?: React.ReactNode;
+    /** Panel width in px. @default 470 */
+    width?: number;
+    /** Panel body content (scrollable). */
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare interface SortMeta {
+    field: string;
+    order: SortOrder;
+}
+
+export declare type SortOrder = 1 | -1;
+
+/**
+ * SplitButton — Clear Design System
+ *
+ * Two joined buttons in a single pill:
+ * - **Left** (main): executes the primary action when clicked.
+ * - **Right** (trigger): opens a dropdown of secondary actions.
+ *
+ * @example
+ * <SplitButton
+ *   label="Import"
+ *   onAction={handleImport}
+ *   items={[
+ *     { label: 'Import Liabilities', value: 'liabilities' },
+ *     { label: 'View Report', value: 'report' },
+ *     { label: 'Get MI Quote', value: 'mi' },
+ *   ]}
+ *   onSelect={handleSelect}
+ * />
+ *
+ * @example
+ * <SplitButton label="Save" variant="secondary" onAction={onSave} items={moreActions} onSelect={onSelect} />
+ */
+export declare const SplitButton: ForwardRefExoticComponent<SplitButtonProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SplitButtonItem {
+    /** Displayed label. */
+    label: string;
+    /** Unique identifier passed to `onSelect`. */
+    value: string;
+    /** Optional icon before the label. */
+    icon?: React.ReactNode;
+    /** When true, the item is non-interactive and visually muted. */
+    disabled?: boolean;
+}
+
+export declare interface SplitButtonProps {
+    /** Label shown in the main action area. */
+    label: string;
+    /** Called when the user clicks the main action button (left side). */
+    onAction?: () => void;
+    /** Items shown in the dropdown, opened by clicking the right trigger. */
+    items: SplitButtonItem[];
+    /** Called when the user picks an item from the dropdown. */
+    onSelect?: (value: string) => void;
+    /**
+     * Visual style.
+     * - `'primary'` — both sides teal-700, forming a seamless pill.
+     * - `'secondary'` — left side teal-50 (secondary), right trigger teal-700 (primary). Use when the button needs less visual weight.
+     * Defaults to `'primary'`.
+     */
+    variant?: 'primary' | 'secondary';
+    /** Size. `'md'` = 36px height (default). `'sm'` = 24px height. */
+    size?: 'md' | 'sm';
+    /** Optional icon rendered before the label in the main action area. */
+    leadingIcon?: React.ReactNode;
+    /** Disables the entire component. */
+    disabled?: boolean;
+    /** Accessible label for the dropdown trigger. Defaults to `"More options"`. */
+    triggerAriaLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare interface StaticToastProps {
+    severity: ToastSeverity;
+    title: string;
+    detail?: string;
+    layout?: ToastLayout;
+    onClose?: () => void;
+}
+
+export declare type StatusColor = 'green' | 'yellow' | 'red' | 'gray';
+
+export declare type StatusShape = 'dot' | 'diamond' | 'square' | 'none';
+
+export declare interface TabItem {
+    /** Unique identifier for this tab. */
+    id: string;
+    /** Display label. */
+    label: string;
+    /** Optional leading icon (any ReactNode). */
+    icon?: React.ReactNode;
+    /** Optional trailing count badge. */
+    count?: number;
+    /**
+     * Second icon rendered after the label, before the count.
+     * When present a `|` pipe separator is inserted between the label and this icon.
+     */
+    icon2?: React.ReactNode;
+    /** Panel content rendered when this tab is active. */
+    content?: React.ReactNode;
+    /** Prevents interaction when true. */
+    disabled?: boolean;
+}
+
+/**
+ * Tabs — Clear Design System
+ *
+ * Standard underline-style tab strip. Fully controlled — the parent owns
+ * which tab is active. Renders the active tab's `content` below the strip.
+ *
+ * @example
+ * const [active, setActive] = useState('tab1');
+ * <Tabs
+ *   tabs={[
+ *     { id: 'tab1', label: 'Overview', content: <p>Overview content</p> },
+ *     { id: 'tab2', label: 'Details',  content: <p>Details content</p> },
+ *   ]}
+ *   activeTab={active}
+ *   onChange={setActive}
+ * />
+ */
+export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TabsProps {
+    /** Array of tab definitions. */
+    tabs: TabItem[];
+    /** Controlled: id of the currently active tab. */
+    activeTab: string;
+    /** Called with the id of the tab the user selected. */
+    onChange: (id: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * TextArea — Clear Design System
+ *
+ * A multi-line text input with label, helper text, character counter (when
+ * `maxLength` is set), and full state coverage: default, hover, focus, filled,
+ * invalid, and disabled. Supports optional auto-grow behaviour.
+ *
+ * @example
+ * <TextArea label="Loan notes" placeholder="Enter notes…" rows={4} />
+ *
+ * @example
+ * <TextArea label="Comments" maxLength={500} />
+ *
+ * @example
+ * <TextArea label="Description" autoGrow />
+ *
+ * @example
+ * <TextArea label="Notes" invalid helperText="This field is required." />
+ */
+export declare const TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+    /** Label shown above the textarea. */
+    label?: string;
+    /** Adds a red asterisk to the label and sets aria-required. */
+    required?: boolean;
+    /** Helper text shown below the textarea. Turns red when `invalid` is true. */
+    helperText?: string;
+    /** Renders the invalid/error state with red border, red-50 background, and red helper text. */
+    invalid?: boolean;
+    /** Number of visible text rows. Defaults to 3. */
+    rows?: number;
+    /**
+     * When true, the textarea grows in height automatically as the user types,
+     * instead of showing a scrollbar.
+     */
+    autoGrow?: boolean;
+}
+
+/**
+ * A static, non-dismissing version of a single toast — useful for Storybook
+ * and visual testing without needing the imperative API.
+ */
+export declare function Toast({ severity, title, detail, layout, onClose }: StaticToastProps): JSX_2.Element;
+
+export declare namespace Toast {
+    var displayName: string;
+}
+
+/**
+ * Imperative toast API. Requires `<Toaster />` to be mounted in the app.
+ *
+ * @example
+ * toast.success('Saved', 'Loan application saved successfully.');
+ * toast.error('Failed', 'Unable to update loan. Please try again.');
+ */
+export declare const toast: {
+    success: (title: string, detail?: string, opts?: ToastOptions) => void;
+    info: (title: string, detail?: string, opts?: ToastOptions) => void;
+    warn: (title: string, detail?: string, opts?: ToastOptions) => void;
+    error: (title: string, detail?: string, opts?: ToastOptions) => void;
+};
+
+/**
+ * Toaster — mount once in your app root to enable toast notifications.
+ *
+ * @example
+ * // In App.tsx or layout root:
+ * <Toaster />
+ *
+ * // Anywhere else:
+ * toast.success('Saved', 'Your changes have been saved.');
+ */
+export declare function Toaster(): ReactPortal | null;
+
+export declare namespace Toaster {
+    var displayName: string;
+}
+
+export declare type ToastLayout = 'horizontal' | 'vertical';
+
+export declare interface ToastOptions {
+    /**
+     * How the title and detail are arranged.
+     * - `horizontal` (default): title and detail on one line — for short messages.
+     * - `vertical`: title on top, detail below — for longer descriptions.
+     */
+    layout?: ToastLayout;
+    /**
+     * Auto-dismiss delay in ms. Set to `0` to disable auto-dismiss.
+     * @default 5000
+     */
+    duration?: number;
+}
+
+export declare type ToastSeverity = 'success' | 'info' | 'warn' | 'error';
+
+/**
+ * ToggleSwitch — Clear Design System
+ *
+ * A binary on/off toggle. Use when an action takes immediate effect
+ * (no Save/Submit required). Supports label, helper text, disabled,
+ * and controlled/uncontrolled usage.
+ *
+ * @example
+ * <ToggleSwitch label="Enable notifications" checked={on} onChange={e => setOn(e.target.checked)} />
+ *
+ * @example
+ * <ToggleSwitch label="Auto-lock" defaultChecked />
+ *
+ * @example
+ * <ToggleSwitch label="Feature locked" disabled />
+ */
+export declare const ToggleSwitch: ForwardRefExoticComponent<ToggleSwitchProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface ToggleSwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children' | 'size'> {
+    /** Label shown to the right of the switch. */
+    label?: React.ReactNode;
+    /** Helper text shown below the switch row. */
+    helperText?: string;
+}
+
+/**
+ * Tooltip — Clear Design System
+ *
+ * A small informational bubble anchored to a trigger element. Appears on
+ * hover and keyboard focus; hides on mouse leave and blur.
+ *
+ * Wraps its child in an inline container — the child itself is not modified.
+ * Uses `aria-describedby` to associate the tooltip text with the trigger for
+ * screen readers.
+ *
+ * @example
+ * <Tooltip content="Delete this record" placement="top">
+ *   <IconButton icon={<i className="pi pi-trash" />} aria-label="Delete" />
+ * </Tooltip>
+ */
+export declare function Tooltip({ content, children, placement, delay, disabled, maxWidth, className, }: TooltipProps): JSX_2.Element;
+
+export declare namespace Tooltip {
+    var displayName: string;
+}
+
+export declare type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export declare interface TooltipProps {
+    /** Content displayed inside the tooltip bubble */
+    content: React.ReactNode;
+    /** The element the tooltip is anchored to */
+    children: React.ReactNode;
+    /**
+     * Which side the tooltip appears on relative to the trigger.
+     * @default 'top'
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Delay in ms before the tooltip appears on hover.
+     * @default 200
+     */
+    delay?: number;
+    /** When true, the tooltip will not appear */
+    disabled?: boolean;
+    /**
+     * Maximum width of the tooltip bubble in px. Content wraps when exceeded.
+     * @default 140
+     */
+    maxWidth?: number;
+    className?: string;
+}
+
+export declare const TopBar: default_2.ForwardRefExoticComponent<TopBarProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TopBarMenuItem {
+    label: string;
+    value: string;
+    icon?: default_2.ReactNode;
+    disabled?: boolean;
+    divider?: boolean;
+}
+
+export declare function TopBarMobile({ borrower, onMenuOpen, onSearchOpen, profile, className, style, }: TopBarMobileProps): JSX_2.Element;
+
+export declare interface TopBarMobileBorrower {
+    name: string;
+    onInfoClick?: () => void;
+}
+
+export declare interface TopBarMobileProps {
+    /** When provided → URLA mode: small C logo left + borrower name center */
+    borrower?: TopBarMobileBorrower;
+    onMenuOpen?: () => void;
+    onSearchOpen?: () => void;
+    profile: TopBarUserProfile;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface TopBarNavItem {
+    id: string;
+    label: string;
+    items?: TopBarMenuItem[];
+    onSelect?: (value: string) => void;
+    /** Teal color + plus-circle icon (for the Create CTA) */
+    isPrimary?: boolean;
+}
+
+export declare interface TopBarProps {
+    /** e.g. "v.1.88.3459" — shown in small text next to logo */
+    version?: string;
+    navItems: TopBarNavItem[];
+    onSearch?: (query: string) => void;
+    searchPlaceholder?: string;
+    profile: TopBarUserProfile;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface TopBarUserProfile {
+    name: string;
+    /** Shown above the avatar. E.g. "Loan Officer" */
+    role?: string;
+    /** 1–2 char initials. Defaults to first letters of name words. */
+    initials?: string;
+    menuItems?: TopBarMenuItem[];
+    onMenuSelect?: (value: string) => void;
+}
+
+/**
+ * URLATabsNav — Clear Design System
+ *
+ * Single-row sub-navigation bar for the URLA section of the loan origination app.
+ *
+ * - **Left section**: applicant selector (245px) + optional sort button (47px)
+ * - **Divider**: 1px vertical rule (35px tall)
+ * - **Right section**: optional AUS action buttons + scrollable tab strip
+ *
+ * @example
+ * <URLATabsNav
+ *   applicants={[{ id: 'joint', label: 'Ryan Smith | Laura Smith' }]}
+ *   selectedApplicantId="joint"
+ *   onApplicantChange={setApplicant}
+ *   tabs={tabs}
+ *   activeTabId={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ */
+export declare const URLATabsNav: ForwardRefExoticComponent<URLATabsNavProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * An option in the applicant selector.
+ * A single option may represent one borrower or a combined group (e.g. spouses).
+ */
+export declare interface URLATabsNavApplicantOption {
+    id: string;
+    label: string;
+}
+
+/** An item in a dropdown menu (sort, section, actions, etc.). */
+export declare interface URLATabsNavMenuItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+/**
+ * URLATabsNavMobile — two-row touch-optimised variant for mobile viewports (~768px).
+ *
+ * Row 1: borrower name + "Loan Details ⓘ" | section dropdown | sort pill | Actions | Save
+ * Row 2: AUS pills | applicant selector (44px) | sort button (62×44) | tab dropdown (fill)
+ */
+export declare const URLATabsNavMobile: ForwardRefExoticComponent<URLATabsNavMobileProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface URLATabsNavMobileProps {
+    borrowerName: string;
+    onLoanDetailsClick?: () => void;
+    sectionLabel: string;
+    sectionItems?: URLATabsNavMenuItem[];
+    onSectionSelect?: (value: string) => void;
+    onSectionSort?: () => void;
+    actionItems?: URLATabsNavMenuItem[];
+    onActionSelect?: (value: string) => void;
+    onSave?: () => void;
+    applicants: URLATabsNavApplicantOption[];
+    selectedApplicantId: string;
+    onApplicantChange: (id: string) => void;
+    onAddApplicant?: () => void;
+    sortItems?: URLATabsNavMenuItem[];
+    onSortSelect?: (value: string) => void;
+    onNextValidation?: () => void;
+    nextValidationBadge?: number;
+    onBackToAUS?: () => void;
+    tabs: URLATabsNavTab[];
+    activeTabId: string;
+    onTabChange: (id: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export declare interface URLATabsNavProps {
+    applicants: URLATabsNavApplicantOption[];
+    selectedApplicantId: string;
+    onApplicantChange: (id: string) => void;
+    onAddApplicant?: () => void;
+    sortItems?: URLATabsNavMenuItem[];
+    onSortSelect?: (value: string) => void;
+    tabs: URLATabsNavTab[];
+    activeTabId: string;
+    onTabChange: (id: string) => void;
+    onNextValidation?: () => void;
+    nextValidationBadge?: number;
+    onBackToAUS?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/** A single tab item. */
+export declare interface URLATabsNavTab {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+
+/**
+ * URLATabsNavTablet — two-row variant of URLATabsNav for tablet viewports (~992px).
+ *
+ * Row 1: borrower name + "Loan Details ⓘ" | divider | applicant selector + sort | divider | AUS buttons
+ * Row 2: scrollable tab strip + optional red count badge
+ */
+export declare const URLATabsNavTablet: ForwardRefExoticComponent<URLATabsNavTabletProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface URLATabsNavTabletProps {
+    borrowerName: string;
+    onLoanDetailsClick?: () => void;
+    applicants: URLATabsNavApplicantOption[];
+    selectedApplicantId: string;
+    onApplicantChange: (id: string) => void;
+    onAddApplicant?: () => void;
+    sortItems?: URLATabsNavMenuItem[];
+    onSortSelect?: (value: string) => void;
+    onNextValidation?: () => void;
+    nextValidationBadge?: number;
+    onBackToAUS?: () => void;
+    tabs: URLATabsNavTab[];
+    activeTabId: string;
+    onTabChange: (id: string) => void;
+    tabStripBadge?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export { }