@platned/ui 0.1.4 → 0.3.0

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, HTMLAttributes, RefObject, Key } from 'react';
+import { ClassValue } from 'clsx';
 
 type ButtonVariant = 'primary' | 'neutral' | 'subtle' | 'danger' | 'danger-subtle';
 type ButtonSize = 'lg' | 'md' | 'sm';
@@ -81,18 +82,6 @@ interface AvatarBlockProps {
 }
 declare function AvatarBlock({ children, title, description, className }: AvatarBlockProps): react.JSX.Element;
 
-interface NavItemProps {
-    icon?: ReactNode;
-    label: string;
-    isActive?: boolean;
-    /** Red indicator dot at top-right corner (e.g. unread count) */
-    indicator?: boolean;
-    /** Collapsed mode — icon only, label hidden */
-    collapsed?: boolean;
-    className?: string;
-}
-declare function NavItem({ icon, label, isActive, indicator, collapsed, className, }: NavItemProps): react.JSX.Element;
-
 type InputSize = 'lg' | 'md' | 'sm';
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     label?: string;
@@ -104,6 +93,9 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>
     size?: InputSize;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
+    /** Interactive trailing slot (e.g. a show/hide password button) — unlike
+     *  `trailingIcon` it receives pointer events. */
+    trailingAction?: ReactNode;
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 
@@ -131,6 +123,15 @@ interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'siz
 }
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
 
+interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    label?: string;
+    description?: string;
+    error?: string;
+    hint?: string;
+    size?: InputSize;
+}
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
+
 type StepStatus = 'complete' | 'active' | 'upcoming';
 interface StepItem {
     label: string;
@@ -152,69 +153,35 @@ interface MultiSelectCardProps {
 }
 declare function MultiSelectCard({ icon, title, description, selected, onToggle, className, }: MultiSelectCardProps): react.JSX.Element;
 
-interface ColumnDef<T> {
-    key: string;
-    header: string;
-    /** CSS width value — e.g. "320px", "10rem". When grow is true, acts as min-width. */
-    width: string;
-    /** When true the column fills remaining row width; width becomes a min-width floor. */
-    grow?: boolean;
-    render: (row: T) => ReactNode;
-}
-declare function DataTable<T>({ columns, rows, getRowKey, className, onRowClick, }: {
-    columns: ColumnDef<T>[];
-    rows: T[];
-    getRowKey: (row: T, index: number) => React.Key;
-    className?: string;
-    onRowClick?: (row: T) => void;
-}): react.JSX.Element;
-/** Primary bold text + optional muted subtitle — for lead entity/name cells */
-declare function TableCellLeadText({ primary, secondary, }: {
-    primary: string;
-    secondary?: string;
-}): react.JSX.Element;
-/** Plain text cell — muted (secondary) by default, pass muted=false for primary colour */
-declare function TableCellText({ children, muted, }: {
-    children: ReactNode;
-    muted?: boolean;
-}): react.JSX.Element;
-/** Small outlined chip — Supplier / Customer, entity type labels etc. */
-declare function TableCellBadge({ label }: {
-    label: string;
-}): react.JSX.Element;
-/** Coloured pill with a leading dot — pass explicit colours for full design-system flexibility */
-declare function TableCellStatusPill({ label, dotColor, backgroundColor, textColor, }: {
-    label: string;
-    dotColor: string;
-    backgroundColor: string;
-    textColor: string;
-}): react.JSX.Element;
-/** Mini horizontal progress bar with a percentage label below */
-declare function TableCellProgress({ percent, barColor, }: {
-    percent: number;
-    barColor?: string;
-}): react.JSX.Element;
-
-interface StatTileProps {
-    label: string;
-    value: string | number;
-    dotColor?: string;
-    className?: string;
-}
-declare function StatTile({ label, value, dotColor, className }: StatTileProps): react.JSX.Element;
-
+type ToggleSize = 'sm' | 'md';
 interface ToggleProps {
     checked: boolean;
     onChange: (checked: boolean) => void;
+    /** Visible text beside the switch. Doubles as the accessible name. */
     label?: string;
+    /** Track size. `sm` is 36×20, `md` is 44×24. */
+    size?: ToggleSize;
     disabled?: boolean;
+    id?: string;
+    /** Accessible name when there is no visible `label`. */
+    'aria-label'?: string;
+    /** Points at the id of an existing visible label elsewhere on the page. */
+    'aria-labelledby'?: string;
+    className?: string;
 }
-declare function Toggle({ checked, onChange, label, disabled }: ToggleProps): react.JSX.Element;
+declare function Toggle({ checked, onChange, label, size, disabled, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, }: ToggleProps): react.JSX.Element;
 
 interface FileDropZoneProps {
     className?: string;
+    /** Caption shown under "Upload file". Defaults to the generic document hint. */
+    description?: string;
+    accept?: string;
+    /** Files above this size are rejected before any upload starts. */
+    maxSizeBytes?: number;
+    onFileSelected?: (file: File) => void;
+    disabled?: boolean;
 }
-declare function FileDropZone({ className }: FileDropZoneProps): react.JSX.Element;
+declare function FileDropZone({ className, description, accept, maxSizeBytes, onFileSelected, disabled, }: FileDropZoneProps): react.JSX.Element;
 
 declare function FormCard({ children, className, }: {
     children: ReactNode;
@@ -231,37 +198,36 @@ interface FormCardFooterProps {
     onContinue?: () => void;
     continueLabel?: string;
     backDisabled?: boolean;
+    continueDisabled?: boolean;
 }
-declare function FormCardFooter({ onSaveDraft, onBack, onContinue, continueLabel, backDisabled, }: FormCardFooterProps): react.JSX.Element;
+declare function FormCardFooter({ onSaveDraft, onBack, onContinue, continueLabel, backDisabled, continueDisabled, }: FormCardFooterProps): react.JSX.Element;
 
-type DocumentStatus = 'uploaded' | 'under-review' | 'processing' | 'missing' | 'not-provided';
-interface DocumentRowProps {
-    title: string;
-    required: boolean;
-    description: string;
-    status: DocumentStatus;
-    fileName?: string;
-    fileSize?: string;
-    fileType?: string;
-}
-declare function DocumentRow({ title, required, description, status, fileName, fileSize, fileType, }: DocumentRowProps): react.JSX.Element;
-
-interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title: string;
-    subtitle?: string;
-    children: ReactNode;
-    footer?: ReactNode;
-    maxWidth?: string;
+type BadgeColor = 'gray' | 'red' | 'yellow' | 'lime' | 'green' | 'teal' | 'blue' | 'pink' | 'slate';
+type BadgeSize = 'sm' | 'lg';
+type BadgeVariant = 'default' | 'subtle';
+interface BadgeProps {
+    label: string;
+    color?: BadgeColor;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    indicator?: boolean;
+    onClose?: () => void;
+    className?: string;
 }
-declare function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth }: ModalProps): react.JSX.Element | null;
+declare function Badge({ label, color, size, variant, indicator, onClose, className, }: BadgeProps): react.JSX.Element;
 
 interface RoleBadgeProps {
     role: string;
     size?: 'sm' | 'md';
+    /**
+     * Explicit role colour as a solid 6-digit hex (e.g. `#0c2d58`). When set it drives
+     * the badge — text uses the hex and the background a light tint of it. Prefer this
+     * over relying on the built-in name map, which only covers a fixed set of English
+     * role names. Falls back to the name map, then grey.
+     */
+    color?: string | null;
 }
-declare function RoleBadge({ role, size }: RoleBadgeProps): react.JSX.Element;
+declare function RoleBadge({ role, size, color }: RoleBadgeProps): react.JSX.Element;
 
 interface RoleOption {
     role: string;
@@ -275,26 +241,1471 @@ interface RoleComboBoxProps {
 }
 declare function RoleComboBox({ value, onChange, options }: RoleComboBoxProps): react.JSX.Element;
 
-declare function Panel({ children, className }: {
+/**
+ * The six status tones from the Figma design system.
+ * Values live in `src/app/styles/tokens/status.css`; see that file for why they do
+ * not derive from the SDS semantic colour families.
+ */
+type StatusTone = 'neutral' | 'info' | 'warning' | 'caution' | 'accent' | 'positive' | 'danger';
+type StatusBadgeSize = 'sm' | 'md';
+interface StatusBadgeProps {
+    label: string;
+    tone?: StatusTone;
+    size?: StatusBadgeSize;
+    /** Leading dot. On by default — the Figma status pills all carry one. */
+    dot?: boolean;
+    /**
+     * Leading glyph, replacing the dot — e.g. `<LuCheck className="size-3" />`.
+     * Use for states a colour alone under-states, like verified or rejected.
+     */
+    icon?: ReactNode;
+    className?: string;
+}
+/**
+ * The status pill.
+ *
+ * Replaces thirteen inline re-implementations of the same markup plus five
+ * competing hardcoded hex palettes. Generalises `TableCellStatusPill`, which had
+ * this exact markup but required callers to pass raw hex strings.
+ *
+ * Note this is NOT `StatusChip` — that one renders a label *and a count* and is a
+ * different component.
+ */
+declare function StatusBadge({ label, tone, size, dot, icon, className, }: StatusBadgeProps): react.JSX.Element;
+
+type StatusDotTone = 'brand' | 'positive' | 'warning' | 'danger' | 'neutral' | 'default';
+interface StatusDotProps {
+    tone?: StatusDotTone;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex color, overrides `tone` via inline style. Use when the exact source color doesn't match a design token. */
+    color?: string;
+    className?: string;
+}
+declare function StatusDot({ tone, color, className }: StatusDotProps): react.JSX.Element;
+
+interface StatusChipProps {
+    label: string;
+    count: number | string;
+    tone?: StatusDotTone;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex dot color, overrides `tone` via inline style. Use when the exact source color doesn't match a design token. */
+    dotColor?: string;
+    bg?: string;
+    className?: string;
+}
+declare function StatusChip({ label, count, tone, dotColor, bg, className }: StatusChipProps): react.JSX.Element;
+
+interface CountBadgeProps {
+    count: number | string;
+    label?: string;
+    tone?: StatusDotTone;
+    className?: string;
+}
+declare function CountBadge({ count, label, tone, className }: CountBadgeProps): react.JSX.Element;
+
+type TagPillTone = 'default' | 'brand' | 'positive' | 'warning' | 'danger';
+interface TagPillProps {
+    label: string;
+    tone?: TagPillTone;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex bg/text pair, overrides `tone` via inline style. Use when the exact source colors don't match design tokens. */
+    bg?: string;
+    color?: string;
+    className?: string;
+}
+declare function TagPill({ label, tone, bg, color, className }: TagPillProps): react.JSX.Element;
+
+interface TrailChipProps {
+    label: string;
+    value: string;
+    tone?: StatusTone;
+    /**
+     * Data-driven dot colour, overriding `tone`. The investigations trail mirrors the
+     * severity accent of whichever tree node is selected, and those accents come from
+     * the row data rather than the status palette — this is the escape hatch Phase 10
+     * classifies as "genuinely data-driven colour", not a token bypass.
+     */
+    dotColor?: string;
+    className?: string;
+}
+/**
+ * Dot + small uppercase label + value, used for the drill-down breadcrumb trail on
+ * the investigations page.
+ *
+ * Promoted from `pages/investigations`, where the dot colour was passed as a raw hex.
+ */
+declare function TrailChip({ label, value, tone, dotColor, className }: TrailChipProps): react.JSX.Element;
+
+type UserAccountStatus = 'active' | 'pending' | 'deactivated';
+interface UserStatusPillProps {
+    status: UserAccountStatus;
+}
+/** Account-status pill. A thin wrapper over `StatusBadge`. */
+declare function UserStatusPill({ status }: UserStatusPillProps): react.JSX.Element;
+
+/**
+ * States of a compliance check.
+ *
+ * Union of the two previously-divergent local unions:
+ *   - `features/entity-detail`   had passed | in_progress | pending | action_required
+ *   - `features/reviewer-detail` had passed | in-progress | failed  | pending | waived
+ *
+ * Note `in_progress` (underscore) is canonical — entity-detail's spelling, which is
+ * the one backed by the API. reviewer-detail used `in-progress` (hyphen) in mock data.
+ */
+type CheckIndicatorStatus = 'passed' | 'in_progress' | 'action_required' | 'failed' | 'pending' | 'waived';
+interface CheckIndicatorProps {
+    status: CheckIndicatorStatus;
+    /** Accessible label. Without one the indicator is decorative, which is correct when an adjacent text label already names the state. */
+    label?: string;
+    className?: string;
+}
+/**
+ * The 22px outlined circle used for compliance-check state in entity and reviewer
+ * detail. Ring and glyph share one colour; see the check tokens in
+ * `src/app/styles/tokens/status.css`.
+ */
+declare function CheckIndicator({ status, label, className }: CheckIndicatorProps): react.JSX.Element;
+
+type EntityIconBadgeSize = 'sm' | 'md';
+type EntityIconBadgeTone = 'default' | 'brand' | 'positive' | 'warning' | 'danger' | 'neutral';
+type EntityIconBadgeShape = 'square' | 'circle';
+interface EntityIconBadgeProps {
+    size?: EntityIconBadgeSize;
+    tone?: EntityIconBadgeTone;
+    /**
+     * `square` is the rounded-rect used on entity rows. `circle` is the tinted glyph
+     * circle used in modal headers. A prop rather than a `className` override, so it
+     * does not depend on Tailwind's stylesheet emit order.
+     */
+    shape?: EntityIconBadgeShape;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex background, overrides `tone` via inline style. Use when the exact source color doesn't match a design token. */
+    bg?: string;
+    iconColor?: string;
     children: ReactNode;
     className?: string;
-}): react.JSX.Element;
-declare function MetricCard({ label, value, tone }: {
+}
+declare function EntityIconBadge({ size, tone, shape, bg, iconColor, children, className }: EntityIconBadgeProps): react.JSX.Element;
+
+interface CheckboxProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: ReactNode;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    className?: string;
+}
+/** Checkbox built on a real `<input type="checkbox">` — the hand-rolled `<div onClick>` version
+ *  this replaces was not keyboard-reachable and exposed no checked state to assistive tech. */
+declare function Checkbox({ checked, onChange, label, disabled, indeterminate, className, }: CheckboxProps): react.JSX.Element;
+
+interface SegmentedControlOption {
+    value: string;
+    label: string;
+}
+interface SegmentedControlProps {
+    options: SegmentedControlOption[];
+    value: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+declare function SegmentedControl({ options, value, onChange, className }: SegmentedControlProps): react.JSX.Element;
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Note `positive`, not `success` — every other tone union in the library
+ * (`InlineAlertTone`, `TagPillTone`, `EntityIconBadgeTone`) and the token layer say
+ * `positive`, and one vocabulary beats a familiar synonym.
+ */
+type ModalTone = 'default' | 'info' | 'positive' | 'warning' | 'danger';
+type ModalFooterAlign = 'start' | 'between' | 'end';
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /**
+     * Accessible name for the dialog. Required, so a slot-composed modal can never ship
+     * unnamed. Was `title` in 0.2.0, renamed because `title` is also an HTML attribute
+     * that renders a tooltip.
+     */
+    label: string;
+    children: ReactNode;
+    size?: ModalSize;
+    /** Renders the top-right close button. */
+    showClose?: boolean;
+    /** Applied to the panel. With `cn`, `className="sm:max-w-[560px]"` beats `size`. */
+    className?: string;
+}
+/**
+ * A centred dialog above `sm`, a bottom sheet below it.
+ *
+ * Composed from `ModalHeader` / `ModalBody` / `ModalFooter`, mirroring the `Card`
+ * parts — so a modal can take any layout a card can, including headerless. Tone lives
+ * on `ModalHeader` (the part that draws the glyph); `ConfirmDialog` and
+ * `NoteConfirmModal` accept `tone` at their top level and forward it.
+ */
+declare function Modal(props: ModalProps): react.JSX.Element | null;
+interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Adds a tinted glyph circle. `default` renders none. */
+    tone?: ModalTone;
+    divider?: boolean;
+}
+declare function ModalHeader({ children, tone, divider, className, ...rest }: ModalHeaderProps): react.JSX.Element;
+interface ModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+}
+declare function ModalTitle({ children, className, ...rest }: ModalTitleProps): react.JSX.Element;
+interface ModalDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+}
+declare function ModalDescription({ children, className, ...rest }: ModalDescriptionProps): react.JSX.Element;
+interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Must not carry its own `overflow` — the panel is the scroll container. */
+declare function ModalBody({ children, className, ...rest }: ModalBodyProps): react.JSX.Element;
+interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    align?: ModalFooterAlign;
+    divider?: boolean;
+}
+declare function ModalFooter({ children, align, divider, className, ...rest }: ModalFooterProps): react.JSX.Element;
+
+interface DrawerProps {
+    /** Required as of 0.3.0 — every overlay is now `isOpen` + `onClose`. */
+    isOpen: boolean;
+    onClose: () => void;
+    /** Header content (left side). The copies this replaces differ only here — a status badge +
+     *  title in one, an avatar + title + category in another — so it is a slot, not props. */
+    header: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+    /** `between` when the footer has a left-aligned secondary action. */
+    footerAlign?: 'end' | 'between';
+    /** Panel width. Defaults to the `w-[440px] max-w-[90vw]` shared by every existing drawer. */
+    width?: string;
+    /** Accessible name for the dialog. */
+    label?: string;
+    className?: string;
+}
+/**
+ * Right-hand side panel. Handles Esc, traps Tab focus, and restores focus to the
+ * trigger on close.
+ */
+declare function Drawer(props: DrawerProps): react.JSX.Element | null;
+
+interface ConfirmDialogProps {
+    isOpen: boolean;
+    title: string;
+    subtitle?: string;
+    /**
+     * Adds a tinted glyph to the header. Defaults to `default` (no glyph) so existing
+     * call sites look unchanged; opt in per dialog rather than deriving it from
+     * `confirmVariant`, which would silently restyle every destructive confirm.
+     */
+    tone?: ModalTone;
+    size?: ModalSize;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmVariant?: 'primary' | 'danger';
+    /** Disables the confirm button and swaps its label — the double-submit guard. */
+    isConfirming?: boolean;
+    /** Label shown on the confirm button while `isConfirming`. */
+    confirmingLabel?: string;
+    /** Optional body — a warning callout, a consequences list, or a failed-attempt error. */
+    children?: ReactNode;
+    className?: string;
+    onConfirm: () => void;
+    /** Renamed from `onCancel` in 0.3.0 — every overlay now uses `isOpen` + `onClose`. */
+    onClose: () => void;
+}
+/**
+ * The in-app replacement for `window.confirm`: a title, an optional body, and a
+ * cancel/confirm pair.
+ *
+ * Kept as a preset rather than folded into `Modal` because it carries *behaviour*, not
+ * just layout — the `isConfirming` guard that disables the button and swaps its label
+ * is the thing call sites get wrong when they hand-roll a confirm. For any other
+ * shape, compose `Modal` and its parts directly.
+ */
+declare function ConfirmDialog({ isOpen, title, subtitle, tone, size, confirmLabel, cancelLabel, confirmVariant, isConfirming, confirmingLabel, children, className, onConfirm, onClose, }: ConfirmDialogProps): react.JSX.Element;
+
+interface NoteConfirmModalProps {
+    /** Required as of 0.3.0 — this is now a controlled overlay like every other. */
+    isOpen: boolean;
+    title: string;
+    subtitle?: string;
+    tone?: ModalTone;
+    size?: ModalSize;
+    confirmLabel: string;
+    cancelLabel?: string;
+    confirmVariant?: 'primary' | 'danger';
+    /** Block confirmation until the note has content. */
+    requireNote?: boolean;
+    notePlaceholder?: string;
+    submittingLabel?: string;
+    isSubmitting?: boolean;
+    className?: string;
+    onClose: () => void;
+    onConfirm: (note: string) => void;
+}
+/**
+ * Confirm dialog that collects a free-text note — approvals, rejections, information
+ * requests. The note is trimmed before it reaches `onConfirm`.
+ *
+ * Kept as a preset because it owns state, and a composition cannot.
+ */
+declare function NoteConfirmModal({ isOpen, ...rest }: NoteConfirmModalProps): react.JSX.Element | null;
+
+interface DropdownMenuItem {
+    label: string;
+    onSelect: () => void;
+    tone?: 'default' | 'danger';
+    disabled?: boolean;
+    /** Draw a separator above this item. */
+    separatorBefore?: boolean;
+}
+interface DropdownMenuProps {
+    items: DropdownMenuItem[];
+    /** Custom trigger content. Defaults to a `⋯` overflow button. */
+    trigger?: ReactNode;
+    /** Accessible name for the trigger, e.g. `Open actions for Admin`. */
+    label: string;
+    align?: 'left' | 'right';
+    className?: string;
+}
+/** Overflow / row-actions menu.
+ *
+ *  Keeps the outside-click dismissal and `aria-haspopup`/`aria-expanded` wiring from the
+ *  hand-rolled `RowMenu` it replaces, and adds Esc-to-close. `mousedown` is stopped at the
+ *  wrapper so the menu works inside clickable table rows. */
+declare function DropdownMenu({ items, trigger, label, align, className, }: DropdownMenuProps): react.JSX.Element;
+
+/** The one scrim for every overlay primitive.
+ *
+ *  Modal and Drawer both reference this constant, so there is a single place to change
+ *  the dimming behind a dialog. Backed by `--color-background-utilities-overlay`. */
+declare const OVERLAY_SCRIM = "bg-overlay";
+/** Esc-to-close, a Tab focus trap, and focus restore for a mounted overlay.
+ *
+ *  None of the hand-rolled drawers/modals this replaces handled Esc or trapped focus —
+ *  they closed on scrim click only. Pass the ref of the panel element (not the scrim). */
+declare function useOverlayDismiss(onClose: () => void, panelRef: RefObject<HTMLElement | null>): void;
+
+/**
+ * `clsx` + `tailwind-merge`.
+ *
+ * Use this instead of bare `clsx` in any component whose `className` prop is meant to
+ * *override* a base utility — the composable `Card*` and `Modal*` parts, and anything
+ * else built to be reshaped by its caller.
+ *
+ * Why it is necessary: `clsx` only concatenates. When two conflicting Tailwind
+ * utilities both end up in the attribute, the winner is decided by *stylesheet order*,
+ * not attribute order. Tailwind emits `flex-row` before `flex-col` and `gap-3` before
+ * `gap-4`, so under plain `clsx`:
+ *
+ *     <CardBody className="flex-row gap-3" />   // base is 'flex flex-col gap-4 p-4'
+ *
+ * silently stays a column with a 4-unit gap. `twMerge` drops the losing class instead,
+ * so the caller's intent wins.
+ *
+ * Everywhere else in the library `className` is purely additive, and plain `clsx`
+ * remains correct — and cheaper. Do not sweep it out of those files.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+type CardSize = 'sm' | 'md' | 'lg';
+type CardRadius = 'lg' | 'xl' | '2xl';
+type CardTone = 'default' | 'brand' | 'positive' | 'warning' | 'danger';
+type CardFooterAlign = 'start' | 'between' | 'end';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** `2xl` suits detail pages, `xl` section panels, `lg` dense or nested cards. */
+    radius?: CardRadius;
+    /**
+     * Surface tint. This is a prop rather than a `className` because a tone has to
+     * un-set the base `border-default bg-default` pair, not add to it.
+     */
+    tone?: CardTone;
+}
+/**
+ * The card shell. Composed from `CardHeader`, `CardBody` and `CardFooter` — or from
+ * nothing at all, if you want content to bleed to the edges (drop `CardBody` and put
+ * a `DataTable` straight inside).
+ *
+ * Replaces `SectionCard` and the two monolithic cards that shipped beside it,
+ * `AlertCard` and `BenchmarkCard`. Both of those are now documented compositions; see
+ * the Cards page. The vocabulary follows shadcn/ui so it is already familiar, with
+ * `CardBody` in place of its `CardContent`.
+ */
+declare function Card({ children, radius, tone, className, ...rest }: CardProps): react.JSX.Element;
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: CardSize;
+    /** Bottom rule separating the header from the body. */
+    divider?: boolean;
+}
+/**
+ * Header row. Holds `CardTitle`, `CardDescription` and an optional `CardAction`.
+ *
+ * The `has-[…]` selector switches to a two-column grid only when a `CardAction` is
+ * present, which is what lets title, description and action share a header with no
+ * wrapper div and no stray gap when the action is absent.
+ */
+declare function CardHeader({ children, size, divider, className, ...rest }: CardHeaderProps): react.JSX.Element;
+interface CardTitleProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    size?: CardSize;
+    /** Heading level. Defaults to `p`; use h2/h3 where the page has a real hierarchy. */
+    as?: 'h2' | 'h3' | 'h4' | 'p';
+}
+declare function CardTitle({ children, size, as: Tag, className, ...rest }: CardTitleProps): react.JSX.Element;
+interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+}
+declare function CardDescription({ children, className, ...rest }: CardDescriptionProps): react.JSX.Element;
+interface CardActionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Right-hand slot in a `CardHeader` — a button, a count, a status badge, a menu. */
+declare function CardAction({ children, className, ...rest }: CardActionProps): react.JSX.Element;
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: CardSize;
+}
+/**
+ * The content region. A vertical stack by default.
+ *
+ * Because this file uses `cn`, `className` genuinely overrides the base — so
+ * `className="flex-row items-center"` gives you a row, and
+ * `className="grid grid-cols-3"` a grid. That is what makes the `AlertCard` and
+ * `BenchmarkCard` rebuilds possible without a `layout` prop.
+ */
+declare function CardBody({ children, size, className, ...rest }: CardBodyProps): react.JSX.Element;
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: CardSize;
+    divider?: boolean;
+    align?: CardFooterAlign;
+}
+/** Action row at the foot of a card. Mirrors `ModalFooter` and `Drawer`'s footer. */
+declare function CardFooter({ children, size, divider, align, className, ...rest }: CardFooterProps): react.JSX.Element;
+
+/**
+ * Two genuinely different heading contexts, which the source markup distinguished:
+ *
+ *   `page`    24px title / 14px subtitle — an in-body page heading (settings, users,
+ *             alerts), i.e. the old `text-2xl` + `mt-1 text-body-sm` block.
+ *   `toolbar` 20px title / 13px subtitle — inside a `PageToolbar`, where the bar is
+ *             only 72px tall. Flattening these into one size would have grown ten
+ *             toolbar titles by 4px.
+ *   `section` 18px — a panel or card heading.
+ */
+type PageHeadingSize = 'page' | 'toolbar' | 'section';
+interface PageHeadingProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    size?: PageHeadingSize;
+    /** Heading level. Defaults to `h1` for page/toolbar and `h2` for section. */
+    as?: 'h1' | 'h2' | 'h3';
+    /** Right-aligned action cluster. When set, the heading becomes a flex row. */
+    actions?: ReactNode;
+    /** Clamp a long title to one line — needed when the title is user data, e.g. an article headline. */
+    truncateTitle?: boolean;
+    className?: string;
+}
+/**
+ * Page or section title with an optional subtitle underneath.
+ *
+ * Replaces nine copies of the `<h1>` + `<p className="mt-1 …">` block, plus the
+ * heading halves of `SettingsTabs` and `my-account/tabs`.
+ *
+ * Emitting a real heading element matters: `reviewer-detail`,
+ * `settings-audit-log`'s table area and `widget-gallery` render their titles as
+ * `<p>`/`<div>` today, so `getByRole('heading')` finds nothing there — an
+ * accessibility gap the e2e specs currently work around.
+ */
+declare function PageHeading({ title, subtitle, size, as, actions, truncateTitle, className, }: PageHeadingProps): react.JSX.Element;
+
+type PageToolbarSize = 'sm' | 'md';
+interface PageToolbarProps {
+    children: ReactNode;
+    /** Allow the row to wrap when the action cluster is wide (entity-detail has seven buttons). */
+    wrap?: boolean;
+    /** Bar height and padding. `sm` suits a secondary bar under the main toolbar. */
+    size?: PageToolbarSize;
+    className?: string;
+}
+/**
+ * The sticky top bar on a full-bleed detail or list screen: title block on the
+ * left, actions on the right.
+ *
+ * Replaces ten copies of this class string. Three of those copies used the
+ * responsive `px-4 py-4 md:px-7` and seven used a fixed `px-7 py-4`; the responsive
+ * variant is adopted here, which is a deliberate improvement below `md` where the
+ * fixed 28px padding was cramped.
+ */
+declare function PageToolbar({ children, wrap, size, className }: PageToolbarProps): react.JSX.Element;
+
+type FilterBarSize = 'sm' | 'md';
+interface FilterBarProps {
+    children: ReactNode;
+    /** Right-aligned slot for a result count or a secondary action. */
+    trailing?: ReactNode;
+    /** Gap between controls. `sm` for a filter row inside a card or drawer. */
+    size?: FilterBarSize;
+    className?: string;
+}
+/**
+ * Row of search inputs and filter selects above a table.
+ *
+ * Replaces nine copies of `flex flex-wrap items-center gap-3`. Thin by design — the
+ * value is that the spacing is decided once, not that it hides anything.
+ */
+declare function FilterBar({ children, trailing, size, className }: FilterBarProps): react.JSX.Element;
+
+type TabsVariant = 'underline' | 'pill';
+type TabsSize = 'sm' | 'md';
+interface TabItem<K extends string = string> {
+    key: K;
+    label: string;
+    /** Renders a count chip after the label. */
+    count?: number;
+}
+interface TabsProps<K extends string = string> {
+    items: TabItem<K>[];
+    value: K;
+    onChange: (key: K) => void;
+    /**
+     * `underline` is the detail-page form (entity detail, reviewer detail, role detail).
+     * `pill` is the filter-style form used by the reviewer queue.
+     */
+    variant?: TabsVariant;
+    /** `md` is the page-level strip; `sm` suits a tab strip inside a card or drawer. */
+    size?: TabsSize;
+    className?: string;
+}
+/**
+ * State-driven tab strip.
+ *
+ * The `underline` active colour is `background-brand` (#0C2D58), which is what Figma
+ * specifies. Two of the source copies also set `style={{ borderColor: '#0c2d58' }}`
+ * redundantly next to the same Tailwind class — dropped here.
+ */
+declare function Tabs<K extends string = string>({ items, value, onChange, variant, size, className, }: TabsProps<K>): react.JSX.Element;
+
+type NavItemSize = 'sm' | 'md';
+interface NavItemProps {
+    icon?: ReactNode;
+    label: string;
+    isActive?: boolean;
+    /** Red indicator dot at top-right corner (e.g. unread count) */
+    indicator?: boolean;
+    /** Collapsed mode — icon only, label hidden */
+    collapsed?: boolean;
+    /** Row height. `sm` suits a dense secondary nav or a nested group. */
+    size?: NavItemSize;
+    className?: string;
+}
+declare function NavItem({ icon, label, isActive, indicator, collapsed, size, className, }: NavItemProps): react.JSX.Element;
+
+type EyebrowLabelVariant = 'uppercase' | 'plain';
+interface EyebrowLabelProps {
+    children: ReactNode;
+    /**
+     * `uppercase` is the dominant form (nine of twelve source copies).
+     * `plain` covers the entity-detail / reviewer-detail variant, whose label text is
+     * already capitalised in the source string.
+     */
+    variant?: EyebrowLabelVariant;
+    className?: string;
+}
+/**
+ * Small semibold label above a group of fields.
+ *
+ * Replaces twelve copies across three variants:
+ *   `mb-2 text-body-tiny font-semibold uppercase tracking-wide …`   (×9)
+ *   `text-[11px] font-semibold … tracking-wide`                     (×5, entity/reviewer detail)
+ *   `text-body-tiny font-semibold uppercase tracking-wider`         (×2, entity onboarding)
+ *
+ * `text-body-tiny` is 11px, so the `text-[11px]` variant collapses into it exactly.
+ * The `tracking-wider` copies become `tracking-wide` — a 0.0125em difference at 11px,
+ * i.e. sub-pixel.
+ */
+declare function EyebrowLabel({ children, variant, className }: EyebrowLabelProps): react.JSX.Element;
+
+type WidgetTitleSize = 'sm' | 'md' | 'lg';
+interface WidgetTitleProps {
+    children: ReactNode;
+    size?: WidgetTitleSize;
+    className?: string;
+}
+declare function WidgetTitle({ children, size, className }: WidgetTitleProps): react.JSX.Element;
+
+type WidgetHeaderEyebrowVariant = 'uppercase' | 'plain';
+interface WidgetHeaderProps {
+    eyebrow?: string;
+    eyebrowVariant?: WidgetHeaderEyebrowVariant;
+    title: string;
+    titleSize?: WidgetTitleSize;
+    subtitle?: string;
+    badge?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}
+declare function WidgetHeader({ eyebrow, eyebrowVariant, title, titleSize, subtitle, badge, action, className, }: WidgetHeaderProps): react.JSX.Element;
+
+interface WidgetFooterProps {
+    caption?: string;
+    subcaption?: string;
+    action?: ReactNode;
+    className?: string;
+}
+declare function WidgetFooter({ caption, subcaption, action, className }: WidgetFooterProps): react.JSX.Element;
+
+interface StatTileProps {
     label: string;
     value: string | number;
-    tone?: 'default' | 'signal' | 'ember' | 'moss';
-}): react.JSX.Element;
-declare function SeverityBadge({ severity }: {
-    severity?: string | null;
-}): react.JSX.Element;
-declare function SentimentBadge({ sentiment }: {
-    sentiment?: string | null;
-}): react.JSX.Element;
+    /** Status tone for the leading dot. Prefer this over `dotColor`. */
+    tone?: StatusTone;
+    /**
+     * @deprecated Pass `tone` instead. A raw colour here bypasses the token layer,
+     * which is how competing status palettes drift apart.
+     */
+    dotColor?: string;
+    className?: string;
+}
+declare function StatTile({ label, value, tone, dotColor, className }: StatTileProps): react.JSX.Element;
+
+type StatNumberSize = 'sm' | 'md' | 'lg';
+type StatNumberWeight = 'medium' | 'bold';
+interface StatNumberProps {
+    value: string | number;
+    unit?: string;
+    size?: StatNumberSize;
+    weight?: StatNumberWeight;
+    /** @deprecated Bypasses the design tokens — pass `tone` instead. Raw hex color, overrides the default text color via inline style. Use when the exact source color doesn't match a design token. */
+    color?: string;
+    className?: string;
+}
+declare function StatNumber({ value, unit, size, weight, color, className }: StatNumberProps): react.JSX.Element;
+
+type ScoreValueSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ScoreValueWeight = 'normal' | 'semibold' | 'bold';
+type ScoreTone = 'brand' | 'positive' | 'warning' | 'danger' | 'neutral' | 'default';
+type ScoreValueTone = ScoreTone | 'auto';
+/**
+ * The four tones the automatic ramp can produce.
+ *
+ * Narrower than `ScoreTone` on purpose: a ramp position is always one of these, so the
+ * result is directly assignable to `ProgressBarTone` too — which is what lets a caller
+ * tone a bar and its score from one `getScoreTone` call.
+ */
+type ScoreRampTone = 'positive' | 'neutral' | 'warning' | 'danger';
+/** Which end of the scale is the bad end. */
+type ScoreDirection = 'higher-is-worse' | 'higher-is-better';
+interface ScoreThresholds {
+    /** At or above this, the score is `danger`. */
+    danger: number;
+    /** At or above this, `warning`. */
+    warning: number;
+    /** At or above this, `neutral`. Below it, `positive`. */
+    neutral: number;
+}
+/**
+ * Default ramp, on a 0–100 scale read as "higher is worse" — the risk case.
+ *
+ * 0.2.0's ramp had only four stops and resolved 65–79 to `brand` (the blue brand
+ * colour), which left `warning` and `positive` unreachable without passing `tone`
+ * by hand. This is a real five-stop ramp.
+ */
+declare const DEFAULT_SCORE_THRESHOLDS: ScoreThresholds;
+/**
+ * Resolve a numeric score to a tone.
+ *
+ * Was `getRiskTone` in 0.2.0, with the thresholds and the direction both hardcoded.
+ */
+declare function getScoreTone(score: number, { direction, thresholds, }?: {
+    direction?: ScoreDirection;
+    thresholds?: ScoreThresholds;
+}): ScoreRampTone;
+interface ScoreValueProps {
+    value: string | number;
+    /** Trailing caption — `/100`, `High`, `of target`. */
+    label?: string;
+    size?: ScoreValueSize;
+    weight?: ScoreValueWeight;
+    /** `auto` derives the tone from `value` via {@link getScoreTone}. */
+    tone?: ScoreValueTone;
+    direction?: ScoreDirection;
+    thresholds?: ScoreThresholds;
+    className?: string;
+}
+/**
+ * A scored number with an optional caption and a tone that can track its value.
+ *
+ * Was `RiskScore`. Nothing about it was ever risk-specific except the name and the
+ * direction of its ramp, so both are now parameters: use it for a risk score, a
+ * compliance score, a match confidence, a utilisation percentage.
+ *
+ * Not to be confused with `StatNumber`, which is the *large display* number with a
+ * unit (32–48px, for tiles and widget headlines). `ScoreValue` is the inline one with
+ * a label and a tone ramp.
+ */
+declare function ScoreValue({ value, label, size, weight, tone, direction, thresholds, className, }: ScoreValueProps): react.JSX.Element;
+
+type TileGridColumns = 2 | 3 | 4 | 5 | 6;
+/**
+ * Responsive column counts. Every source copy started two-up on mobile and stepped
+ * to its full count at one breakpoint.
+ *
+ * The twelve source grids disagreed on which: seven used `lg:`, three used `md:`.
+ * Standardising on `lg:` matches eight of them byte-for-byte and is the safer choice
+ * — five tiles at `md` (768px) was cramped. `alerts`, `settings-users` and
+ * `settings-organization` therefore stay two-up slightly longer on tablets than
+ * before; that is the one deliberate layout change here.
+ *
+ * Six keeps its intermediate `sm:grid-cols-3` step, matching entities-listing —
+ * without it, six tiles would stack 2×3 on tablet instead of 3×2.
+ */
+type TileGridBreakpoint = 'sm' | 'md' | 'lg';
+interface TileGridProps {
+    children: ReactNode;
+    columns?: TileGridColumns;
+    /**
+     * Breakpoint at which the grid reaches its full column count. `lg` is the default
+     * and correct for a full-width page. Narrow contexts — a stat row inside a panel,
+     * as on the article detail page — legitimately need `sm`.
+     */
+    at?: TileGridBreakpoint;
+    className?: string;
+}
+/**
+ * A responsive grid of equal-width tiles.
+ *
+ * Was `StatTileGrid`, which read as a `StatTile`-specific component. It has never been
+ * coupled to one: no context, no cloning, no constraint on `children`. It takes any
+ * nodes — `StatTile`s, `Card`s, chart tiles — and only owns the column counts and the
+ * `gap-3`. The rename says so.
+ */
+declare function TileGrid({ children, columns, at, className, }: TileGridProps): react.JSX.Element;
+
+/**
+ * Chart colour.
+ *
+ * SVG paints via the `stroke` / `fill` *attributes*, which cannot take a Tailwind
+ * class — so charts resolve a `tone` to a CSS variable reference instead of a utility.
+ * That keeps them on the token layer; 0.2.0's charts defaulted to raw hex (`#0c2d58`,
+ * `rgba(140,155,176,0.5)`) and drifted from it.
+ *
+ * Every chart still accepts an explicit `color` string for genuinely data-driven
+ * colour — a series whose colour comes from the data, not from semantics.
+ */
+type ChartTone = 'brand' | 'info' | 'positive' | 'warning' | 'danger' | 'neutral';
+declare const CHART_TONE: Record<ChartTone, string>;
+/** The muted track/rest colour behind a highlighted series. */
+declare const CHART_TRACK = "var(--color-background-default-tertiary)";
+/**
+ * Ordered sequence for multi-series charts, so two donuts in the same product never
+ * assign different colours to the same first category. Semantic tones come first
+ * because a chart with two or three series is usually still saying something.
+ */
+declare const CHART_SEQUENCE: ChartTone[];
+/** Resolve an explicit colour, else a tone, else the sequence position. */
+declare function resolveChartColor(color: string | undefined, tone: ChartTone | undefined, index?: number): string;
+
+type BarChartOrientation = 'vertical' | 'horizontal';
+type BarChartSize = 'sm' | 'md' | 'lg';
+interface BarChartSeries {
+    label: string;
+    /** One value per category. */
+    values: number[];
+    tone?: ChartTone;
+    color?: string;
+}
+interface BarChartProps {
+    /** Category names — the axis labels. */
+    categories: string[];
+    series: BarChartSeries[];
+    orientation?: BarChartOrientation;
+    /** Stack series on top of each other instead of placing them side by side. */
+    stacked?: boolean;
+    size?: BarChartSize;
+    /** Overall length of the value axis, in px. */
+    length?: number;
+    /** Show the category labels along the axis. */
+    showLabels?: boolean;
+    /** Print each bar's value at the end of the bar. Horizontal orientation only. */
+    showValues?: boolean;
+    radius?: number;
+    label?: string;
+    className?: string;
+}
+/**
+ * Grouped or stacked bars, in either orientation.
+ *
+ * Horizontal is the orientation the library was missing and the one that actually suits
+ * category data, because long category names get a full line of width rather than being
+ * rotated or truncated under a vertical bar.
+ *
+ * Deliberately axis-light: one baseline, no gridlines, no ticks. For anything needing
+ * real axes or interaction, this is the wrong component.
+ */
+declare function BarChart({ categories, series, orientation, stacked, size, length, showLabels, showValues, radius, label, className, }: BarChartProps): react.JSX.Element | null;
+
+type DonutChartSize = 'sm' | 'md' | 'lg';
+interface DonutSegment {
+    label: string;
+    value: number;
+    /** Token-backed colour. Falls back to the segment's position in the chart sequence. */
+    tone?: ChartTone;
+    /** Explicit colour, for data-driven series. */
+    color?: string;
+}
+interface DonutChartProps {
+    segments: DonutSegment[];
+    size?: DonutChartSize;
+    /** Ring thickness in px. Overrides the `size` preset. */
+    thickness?: number;
+    /** Large text at the centre — a total, a percentage. */
+    centerValue?: ReactNode;
+    /** Caption beneath `centerValue`. */
+    centerLabel?: ReactNode;
+    /** Gap between segments, in degrees. */
+    gap?: number;
+    /** Accessible description. */
+    label?: string;
+    className?: string;
+}
+/**
+ * A proportional ring.
+ *
+ * Drawn with `stroke-dasharray` on circles rather than arc paths: one element per
+ * segment, no trigonometry, and the segments stay crisp at any thickness.
+ */
+declare function DonutChart({ segments, size, thickness, centerValue, centerLabel, gap, label, className, }: DonutChartProps): react.JSX.Element;
+
+type RadialGaugeSize = 'sm' | 'md' | 'lg';
+interface RadialGaugeProps {
+    value: number;
+    /** Top of the scale. */
+    max?: number;
+    size?: RadialGaugeSize;
+    tone?: ChartTone;
+    color?: string;
+    /** Ring thickness in px. Overrides the `size` preset. */
+    thickness?: number;
+    /**
+     * Sweep in degrees. 360 is a full ring; 270 leaves a gap at the bottom, which reads
+     * more like a dial than a pie.
+     */
+    sweep?: number;
+    /** Centre content. Defaults to the value; pass `null` for an empty ring. */
+    children?: ReactNode;
+    /** Caption beneath the centre value. */
+    centerLabel?: ReactNode;
+    label?: string;
+    className?: string;
+}
+/**
+ * A single-value arc — a score ring, a utilisation dial, a completion meter.
+ *
+ * The shape the library had no form for: `ProgressBar` covers linear progress and
+ * `DonutChart` compares parts of a whole, but neither draws "one number against its
+ * ceiling" in a round frame.
+ */
+declare function RadialGauge({ value, max, size, tone, color, thickness, sweep, children, centerLabel, label, className, }: RadialGaugeProps): react.JSX.Element;
+
+type SparklineVariant = 'line' | 'area';
+type SparklineSize = 'sm' | 'md' | 'lg';
+interface SparklineProps {
+    data: number[];
+    variant?: SparklineVariant;
+    /** Token-backed colour. Ignored when `color` is set. */
+    tone?: ChartTone;
+    /** Explicit colour, for series whose colour comes from the data. */
+    color?: string;
+    size?: SparklineSize;
+    /** Overrides the `size` preset. */
+    width?: number;
+    height?: number;
+    strokeWidth?: number;
+    /** Dot on the final point — useful when the line is the "current value". */
+    showEndDot?: boolean;
+    /** Accessible description. Omit to keep the chart decorative. */
+    label?: string;
+    className?: string;
+}
+/**
+ * A compact trend line, with no axes and no interaction.
+ *
+ * `variant="area"` adds the gradient fill beneath the line that 0.2.0 had no way to
+ * draw, which is what makes a sparkline readable at `lg` where a bare 1.5px stroke
+ * looks thin.
+ */
+declare function Sparkline({ data, variant, tone, color, size, width, height, strokeWidth, showEndDot, label, className, }: SparklineProps): react.JSX.Element | null;
+
+type MiniBarChartSize = 'sm' | 'md' | 'lg';
+type MiniBarChartOrientation = 'vertical' | 'horizontal';
+interface MiniBarChartProps {
+    bars: number[];
+    /** Colour of the highlighted bars. */
+    tone?: ChartTone;
+    color?: string;
+    /** Colour of the un-highlighted bars. Defaults to the muted track token. */
+    restColor?: string;
+    /**
+     * Which bars are highlighted. A number or list of indices; negatives count from the
+     * end, so `-1` is the last bar. Pass `[]` to highlight none.
+     *
+     * Replaces 0.2.0's `highlightLastBar` boolean, which could only ever mean `-1`.
+     */
+    highlight?: number | number[];
+    size?: MiniBarChartSize;
+    /** Overrides the `size` preset. */
+    width?: number;
+    height?: number;
+    gap?: number;
+    orientation?: MiniBarChartOrientation;
+    radius?: number;
+    label?: string;
+    className?: string;
+}
+/** A compact bar series with no axes — a distribution or a per-period count. */
+declare function MiniBarChart({ bars, tone, color, restColor, highlight, size, width, height, gap, orientation, radius, label, className, }: MiniBarChartProps): react.JSX.Element | null;
+
+type LegendDotSize = 'sm' | 'md';
+/** `line` is the swatch for a line series; `dot` and `square` for areas and bars. */
+type LegendDotShape = 'dot' | 'square' | 'line';
+interface LegendDotProps {
+    /** Token-backed colour. Ignored when `color` is set. */
+    tone?: ChartTone;
+    /** Explicit colour, for data-driven series. */
+    color?: string;
+    size?: LegendDotSize;
+    shape?: LegendDotShape;
+    className?: string;
+}
+/** The colour swatch beside a series name. */
+declare function LegendDot({ tone, color, size, shape, className }: LegendDotProps): react.JSX.Element;
+
+type ChartLegendOrientation = 'vertical' | 'horizontal';
+interface ChartLegendItem {
+    label: string;
+    /** Trailing value. Omit for a legend that only names the series. */
+    count?: number | string;
+    /** Token-backed colour. Falls back to the item's position in the chart sequence. */
+    tone?: ChartTone;
+    /** Explicit colour, for data-driven series. */
+    color?: string;
+}
+interface ChartLegendProps {
+    items: ChartLegendItem[];
+    /**
+     * `vertical` spreads each row to fill its container, so the counts align in a column
+     * beside a donut. `horizontal` wraps inline, for a legend under a bar chart.
+     */
+    orientation?: ChartLegendOrientation;
+    size?: LegendDotSize;
+    shape?: LegendDotShape;
+    className?: string;
+}
+/** Series names, swatches and optional values. */
+declare function ChartLegend({ items, orientation, size, shape, className, }: ChartLegendProps): react.JSX.Element;
+
+type TrendLabelWeight = 'semibold' | 'bold';
+type TrendLabelSize = 'sm' | 'md' | 'lg';
+/**
+ * Which direction is the good one.
+ *
+ * A delta component cannot infer this: +4% on-time delivery is good, +4% unit cost is
+ * not. 0.2.0 had no such prop, so the only way to render a "rising is bad" delta was to
+ * pass a raw hex — which is exactly what the deleted `BenchmarkCard` did, inverting its
+ * own `positiveColor` default to red to compensate.
+ */
+type TrendDirection = 'up-is-good' | 'up-is-bad';
+interface TrendLabelProps {
+    value: number;
+    suffix?: string;
+    size?: TrendLabelSize;
+    weight?: TrendLabelWeight;
+    direction?: TrendDirection;
+    /** Trend arrow. On by default — the docs described one long before there was one. */
+    showArrow?: boolean;
+    /** Explicit colour, for the rare data-driven case. Overrides the direction logic. */
+    color?: string;
+    className?: string;
+}
+/** A signed delta with a direction arrow, toned by whether the movement is good news. */
+declare function TrendLabel({ value, suffix, size, weight, direction, showArrow, color, className, }: TrendLabelProps): react.JSX.Element;
+
+type ListRowDensity = 'default' | 'compact';
+type ListRowDivider = 'none' | 'top' | 'bottom';
+interface ListRowProps {
+    /** Left of the title, on the title line — an icon badge, avatar, checkbox, file chip. */
+    leading?: ReactNode;
+    title?: ReactNode;
+    /** Inline after the title — a Required/Optional chip, a count, a tag. */
+    titleMeta?: ReactNode;
+    /** Muted line under the title. */
+    description?: ReactNode;
+    /** Right end of the title line — a `StatusBadge`, a score, a timestamp. */
+    meta?: ReactNode;
+    /** Right-hand column spanning the whole row, vertically centred — actions, a `Toggle`. */
+    trailing?: ReactNode;
+    /** Full-width block below the title line — a `FileRow`, a `FileDropZone`, an alert, a nested list. */
+    footer?: ReactNode;
+    density?: ListRowDensity;
+    divider?: ListRowDivider;
+    /** Render an `<li>` instead of a `<div>` — use inside a `<ul>`/`<ol>`. */
+    as?: 'div' | 'li';
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * The generic list row: six slots and no opinion about what goes in them.
+ *
+ * Replaces `DocumentRow` and `DocumentChecklistRow`, which baked one product's
+ * document-upload flow — its status vocabulary, its five raw-hex pills and its
+ * unicode-glyph labels — into the library. Every feature of those rows is reachable by
+ * composing this with `FileRow`, `FileDropZone` and `StatusBadge`; see the docs.
+ */
+declare function ListRow({ leading, title, titleMeta, description, meta, trailing, footer, density, divider, as: Tag, onClick, className, }: ListRowProps): react.JSX.Element;
+
+interface FileRowProps {
+    name: string;
+    /** Muted second line — size, upload date, uploader. */
+    detail?: ReactNode;
+    /** Leading chip showing the file extension, e.g. `"PDF"`. Ignored when `leading` is set. */
+    fileType?: string;
+    /** Custom leading node — overrides `fileType`. */
+    leading?: ReactNode;
+    /** The canonical action. Renders a text link before `actions`. */
+    onDownload?: () => void;
+    downloadLabel?: string;
+    /** Everything else on the right — `Button`s, a `DropdownMenu`. */
+    actions?: ReactNode;
+    className?: string;
+}
+/**
+ * One attached file: name, optional detail line, and actions.
+ *
+ * This strip was hardcoded inline inside both `DocumentRow` and
+ * `DocumentChecklistRow`. Nothing about it is document-specific — it is the same row
+ * for a generated export, an invoice or an evidence attachment.
+ */
+declare function FileRow({ name, detail, fileType, leading, onDownload, downloadLabel, actions, className, }: FileRowProps): react.JSX.Element;
+
+type ScoredRowAlign = 'center' | 'end';
+/** 8 / 12 / 20 / 48px — the four gaps the source mockups actually used. */
+type ScoredRowGap = 'sm' | 'md' | 'lg' | 'xl';
+interface ScoredRowProps {
+    /** Leading visual — an `EntityIconBadge`, an `Avatar`, a rank number, or nothing. */
+    leading?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Fixed-width column between the title block and the meter. */
+    aside?: ReactNode;
+    /** The bar. Put a `<ProgressBar>` here — the row does not choose one for you. */
+    meter?: ReactNode;
+    /** Right-hand value — a `<ScoreValue>`, a `<TrendLabel>`, a `<Badge>`, a button. */
+    trailing?: ReactNode;
+    /** CSS width values. Omit one and that slot flexes instead. */
+    titleWidth?: string;
+    asideWidth?: string;
+    meterWidth?: string;
+    trailingWidth?: string;
+    gap?: ScoredRowGap;
+    /** Gap between `leading` and the title block. Defaults to `gap`. */
+    leadingGap?: ScoredRowGap;
+    align?: ScoredRowAlign;
+    className?: string;
+}
+/**
+ * A row with a title block, an optional bar and a right-hand value.
+ *
+ * Was `EntityRow`. The rename is the smaller half of the change: the old component
+ * hardcoded `RiskScore`, `WidgetProgressBar`, `TrendLabel` and `getRiskTone`, which
+ * locked it to one scoring domain and forced 32 props — including four raw
+ * `CSSProperties` escape hatches and a magic `nameWidth = '133px'` — to make it fit
+ * anything else. The score and the bar are now slots, so the caller decides.
+ */
+declare function ScoredRow({ leading, title, subtitle, aside, meter, trailing, titleWidth, asideWidth, meterWidth, trailingWidth, gap, leadingGap, align, className, }: ScoredRowProps): react.JSX.Element;
+
+type ProgressBarTone = 'brand' | 'positive' | 'warning' | 'danger' | 'neutral';
+type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
+interface ProgressBarProps {
+    /** 0–100. Values outside the range are clamped. */
+    value: number;
+    tone?: ProgressBarTone;
+    size?: ProgressBarSize;
+    /** Caption above the bar. Also becomes the accessible name. */
+    label?: string;
+    /** Show the percentage at the right of the label row. */
+    showValue?: boolean;
+    /** CSS radius override, e.g. `'1px'` for a square-ended bar. Defaults to fully round. */
+    radius?: string;
+    /** Accessible name when there is no visible `label`. */
+    'aria-label'?: string;
+    /**
+     * Applied to the track. This is how you set a fixed width — `className="w-16"`.
+     * It genuinely overrides the base `w-full` because this file uses `cn`.
+     */
+    className?: string;
+}
+/**
+ * A horizontal progress / proportion bar.
+ *
+ * Was `WidgetProgressBar` in 0.2.0, which fixed the height at 6px and lived under
+ * `widgets/` despite being a general-purpose primitive — so `TableCellProgress`
+ * hand-rolled a second copy rather than reuse it. It also had no ARIA at all.
+ */
+declare function ProgressBar({ value, tone, size, label, showValue, radius, 'aria-label': ariaLabel, className, }: ProgressBarProps): react.JSX.Element;
+
+interface RankedRowProps {
+    rank?: number;
+    name: string;
+    sublabel?: string;
+    score: number;
+    /** Bar and value colour. `auto` derives it from `score`. */
+    tone?: ProgressBarTone | 'auto';
+    /** Which end of the scale is bad, when `tone` is `auto`. */
+    direction?: ScoreDirection;
+    scoreSize?: ScoreValueSize;
+    scoreWeight?: ScoreValueWeight;
+    className?: string;
+}
+/**
+ * A leaderboard row: rank, name, score, and a full-width bar underneath.
+ *
+ * Was `RankedListItem` — the only `…Item` in a folder of `…Row`s. Its three raw-hex
+ * colour props (`scoreColor`, `barColor`, `barTrackColor`) are gone in favour of
+ * `tone`, and its `gap` CSS string is now the `gap-1.5` it always resolved to.
+ */
+declare function RankedRow({ rank, name, sublabel, score, tone, direction, scoreSize, scoreWeight, className, }: RankedRowProps): react.JSX.Element;
 
-declare function SectionHeading({ eyebrow, title, detail }: {
-    eyebrow: string;
+interface IconTextRowProps {
+    icon: ReactNode;
     title: string;
-    detail?: string;
-}): react.JSX.Element;
+    detail: string;
+    className?: string;
+}
+/**
+ * A circular icon badge, a title, and one line of detail.
+ *
+ * Feature lists, empty-state explanations, onboarding intros, "what happens next"
+ * steps. Was `FeatureRow`, which named it after the one screen it was extracted from.
+ */
+declare function IconTextRow({ icon, title, detail, className }: IconTextRowProps): react.JSX.Element;
+
+type ChecklistRowState = 'done' | 'active' | 'pending';
+interface ChecklistRowProps {
+    label: string;
+    state: ChecklistRowState;
+    className?: string;
+}
+/**
+ * One step in a progress checklist: a done tick, a spinning active ring, or an empty
+ * pending ring.
+ *
+ * Shared by the event-onboarding "building your dashboard" screen and the
+ * intelligence page's processing checklist. Both drove the same three states; only
+ * the onboarding copy had the animated ring, which is the better treatment and is
+ * adopted for both.
+ *
+ * Renders an `<li>` — callers must wrap it in a list, which is what both sources did.
+ */
+declare function ChecklistRow({ label, state, className }: ChecklistRowProps): react.JSX.Element;
+
+interface NumberedStepsListProps {
+    steps: ReactNode[];
+    className?: string;
+}
+/**
+ * Ordered list with small filled number bullets.
+ *
+ * Promoted from entity-detail's "what happens next" panel. The panel's copy is
+ * review-lifecycle business content and stays there; only the list chrome moves.
+ *
+ * The bullet was `bg-[#e7edfb] text-[#1d4ed8]` — a pale blue pair that is not in the
+ * token set. It now uses the brand-tertiary background and brand text, which is the
+ * documented treatment for a subtle brand-tinted chip.
+ */
+declare function NumberedStepsList({ steps, className }: NumberedStepsListProps): react.JSX.Element;
+
+type MetaFieldLayout = 'stacked' | 'inline';
+interface MetaFieldProps {
+    label: string;
+    value: ReactNode;
+    /** Optional second line under the value (used by the onboarding review sections). */
+    detail?: ReactNode;
+    /**
+     * `stacked` puts the label above the value (detail pages, onboarding review).
+     * `inline` puts a fixed-width label beside it (drawer detail rows).
+     */
+    layout?: MetaFieldLayout;
+    /** Fixed width for the `stacked` form, e.g. `sm:w-[262px]` on the overview grid. */
+    className?: string;
+}
+/**
+ * A label/value pair.
+ *
+ * Consolidates the same shape from six places: the entity-detail overview grid, the
+ * reviewer-detail metric column, three `DetailRow` copies in drawers (queues,
+ * filings, website-intel) and `ReviewMeta` in both onboarding wizards.
+ *
+ * An empty value renders an em dash, which is what every source copy did by hand.
+ */
+declare function MetaField({ label, value, detail, layout, className, }: MetaFieldProps): react.JSX.Element;
+interface MetaFieldGridProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Wrapper for a set of `MetaField`s that wrap into columns.
+ *
+ * Matches the entity-detail overview grid, which relies on each field carrying its
+ * own width rather than on fixed grid columns — long values (aliases, legal names)
+ * need to be able to occupy a full row on narrow viewports.
+ */
+declare function MetaFieldGrid({ children, className }: MetaFieldGridProps): react.JSX.Element;
+
+type CheckedGroupListColumns = 1 | 2 | 3;
+/** One labelled group of ticked items. */
+interface CheckedGroup {
+    label: string;
+    items: string[];
+}
+interface CheckedGroupListProps {
+    groups: CheckedGroup[];
+    columns?: CheckedGroupListColumns;
+    /** Leading glyph for every item. Defaults to a check; pass `null` for none. */
+    icon?: ReactNode | null;
+    emptyLabel?: string;
+    className?: string;
+}
+/**
+ * A read-only, grouped list of ticked items in a balanced multi-column flow.
+ *
+ * Was `PermissionGrid` — RBAC-specific naming for a generic shape, and not a grid
+ * either: groups pack tightly down each column rather than aligning to shared row
+ * heights, so a tall group beside a short one leaves no ragged gap.
+ * `break-inside-avoid` keeps each group whole within a column.
+ *
+ * Granted permissions, included plan features, completed requirements, matched
+ * criteria — anything that is "these labels, grouped, all ticked".
+ */
+declare function CheckedGroupList({ groups, columns, icon, emptyLabel, className, }: CheckedGroupListProps): react.JSX.Element;
+
+interface ColumnDef<T> {
+    key: string;
+    header: string;
+    /**
+     * CSS width value — e.g. `"320px"`, `"10rem"`. When `grow` is true this becomes the
+     * column's floor: it counts toward the table's min-width, below which the wrapper
+     * scrolls sideways rather than crushing the columns.
+     */
+    width: string;
+    /**
+     * When true the column absorbs the remaining table width.
+     *
+     * With no `grow` column, `table-fixed` distributes surplus width proportionally
+     * across every column — the old flex layout left it blank on the right instead. Mark
+     * whichever column should soak it up.
+     */
+    grow?: boolean;
+    render: (row: T) => ReactNode;
+}
+type DataTableDensity = 'default' | 'compact';
+type DataTableAlign = 'center' | 'top';
+interface DataTableProps<T> {
+    columns: ColumnDef<T>[];
+    rows: T[];
+    getRowKey: (row: T, index: number) => Key;
+    /** Row and header padding. `compact` also steps the header and cell type down. */
+    density?: DataTableDensity;
+    /** Vertical alignment of every body cell. Use `top` for multi-line or ragged cells. */
+    align?: DataTableAlign;
+    onRowClick?: (row: T) => void;
+    /** Rendered as one full-width row when `rows` is empty. Omit to render nothing. */
+    emptyLabel?: string;
+    className?: string;
+}
+/**
+ * A real `<table>` with `table-fixed` and a `<colgroup>`.
+ *
+ * 0.2.0 laid each row out as its own flex container sized `w-max`, so a `grow` column
+ * sized itself per row and one long cell shunted that row's remaining columns out of
+ * line with its neighbours. `table-fixed` resolves column widths once for the whole
+ * table, which is the property the consuming app hand-rolled a separate audit table
+ * to get.
+ */
+declare function DataTable<T>({ columns, rows, getRowKey, density, align, onRowClick, emptyLabel, className, }: DataTableProps<T>): react.JSX.Element;
+/**
+ * Cell type scale.
+ *
+ * Named `size`, not `density`, and deliberately *not* inherited from the table: the two
+ * real compact tables disagree about the mapping — the audit table wants default
+ * padding with small cell text — so inheritance could not express it anyway, and it
+ * would make these render one size inside a table and another outside one.
+ */
+type TableCellSize = 'sm' | 'md';
+interface TableCellLeadTextProps {
+    primary: string;
+    secondary?: string;
+    size?: TableCellSize;
+    className?: string;
+}
+/** Primary text plus an optional muted subtitle — for lead entity/name cells. */
+declare function TableCellLeadText({ primary, secondary, size, className }: TableCellLeadTextProps): react.JSX.Element;
+interface TableCellTextProps {
+    children: ReactNode;
+    /** Muted (secondary) by default; pass false for the primary colour. */
+    muted?: boolean;
+    size?: TableCellSize;
+    /** Ellipsise instead of wrapping, so every row keeps the same height. */
+    truncate?: boolean;
+    className?: string;
+}
+/** Plain text cell. */
+declare function TableCellText({ children, muted, size, truncate, className, }: TableCellTextProps): react.JSX.Element;
+interface TableCellBadgeProps {
+    label: string;
+    className?: string;
+}
+/** Small outlined chip — entity type labels, categories. */
+declare function TableCellBadge({ label, className }: TableCellBadgeProps): react.JSX.Element;
+interface TableCellProgressProps {
+    percent: number;
+    /**
+     * Bar colour. `brand` is 0.2.0's default and byte-identical to it — `bg-brand`
+     * resolves to the same `--prim-brand-900` the old raw-hex default hardcoded.
+     */
+    tone?: ProgressBarTone;
+    size?: TableCellSize;
+    className?: string;
+}
+/** Mini progress bar with a percentage label below. */
+declare function TableCellProgress({ percent, tone, size, className, }: TableCellProgressProps): react.JSX.Element;
+
+type InlineAlertTone = 'info' | 'warning' | 'danger' | 'positive';
+interface InlineAlertProps {
+    tone: InlineAlertTone;
+    children: ReactNode;
+    /** Overrides the per-tone default glyph. Pass `null` for no icon. */
+    icon?: ReactNode | null;
+    className?: string;
+}
+/** Banner for inline messaging — form errors, destructive-action warnings, success confirmations.
+ *
+ *  Replaces four byte-identical raw-`amber-*` callouts, five competing error-text styles and a
+ *  standalone `Banner` component. `danger` renders as `role="alert"`; the rest as `role="status"`. */
+declare function InlineAlert({ tone, children, icon, className }: InlineAlertProps): react.JSX.Element;
+
+type EmptyStateVariant = 'empty' | 'loading' | 'error';
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+interface EmptyStateProps {
+    message: string;
+    /** `error` is the only variant that changes colour; `loading` exists for intent. */
+    variant?: EmptyStateVariant;
+    size?: EmptyStateSize;
+    icon?: ReactNode;
+    /** A primary action, e.g. "Add your first source". */
+    action?: ReactNode;
+    className?: string;
+}
+/**
+ * Centred placeholder for an empty list, a loading list, or a failed fetch.
+ *
+ * Replaces eighteen copies of `py-8 text-center text-body-sm
+ * text-default-secondary` plus four divergent variants. Loading and empty were
+ * always the same markup in this codebase, so they are one component with a
+ * `variant` rather than two near-identical ones.
+ *
+ * `aria-live` is set for the loading and error variants so a screen reader announces
+ * the state change instead of silently swapping list content.
+ */
+declare function EmptyState({ message, variant, size, icon, action, className, }: EmptyStateProps): react.JSX.Element;
+
+type PasswordInputProps = Omit<InputProps, 'type' | 'trailingIcon' | 'trailingAction'>;
+/** Password field with a show/hide visibility toggle. */
+declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface AIChatBarProps {
+    placeholder?: string;
+    className?: string;
+}
+declare function AIChatBar({ placeholder, className, }: AIChatBarProps): react.JSX.Element;
+
+interface AISuggestionChipProps {
+    prompt: string;
+    onClick?: () => void;
+    className?: string;
+}
+declare function AISuggestionChip({ prompt, onClick, className }: AISuggestionChipProps): react.JSX.Element;
+
+interface QuickAction {
+    label: string;
+    value: string;
+}
+interface QuickActionsBarProps {
+    actions: QuickAction[];
+    active?: string;
+    onSelect?: (value: string) => void;
+    className?: string;
+}
+declare function QuickActionsBar({ actions, active, onSelect, className }: QuickActionsBarProps): react.JSX.Element;
+
+/** Soft aurora atmosphere used by the public-facing screens (auth, event
+ *  onboarding) — mirrors AuroraBackground in pages/intelligence. Blobs are
+ *  corner-anchored so the effect scales from phones to kiosk displays.
+ *  Render inside a `relative overflow-hidden` container; content goes on top
+ *  with `relative`. */
+declare function AuroraBackdrop(): react.JSX.Element;
+
+/** Bespoke icon art with no equivalent in the stroked icon set.
+ *
+ *  The library's icons come from `react-icons/lu`, which is a *stroked* set. What
+ *  lives here is the small set of *filled* 20×20 marks: swapping these for
+ *  `LuInfo`/`LuArrowRight`/etc. would turn a solid glyph into an outline — a visual
+ *  change, not a redraw. They keep their own `viewBox="0 0 20 20"` and
+ *  `fill="currentColor"`, and size via `className` (e.g. `className="size-5"`).
+ *
+ *  Do not add stroked icons here — import them from `react-icons/lu` instead.
+ */
+interface SolidIconProps {
+    className?: string;
+}
+declare const SolidAlertTriangle: {
+    ({ className }: SolidIconProps): react.JSX.Element;
+    displayName: string;
+};
+declare const SolidShieldCheck: {
+    ({ className }: SolidIconProps): react.JSX.Element;
+    displayName: string;
+};
+declare const SolidGlobe: {
+    ({ className }: SolidIconProps): react.JSX.Element;
+    displayName: string;
+};
+declare const SolidMapPin: {
+    ({ className }: SolidIconProps): react.JSX.Element;
+    displayName: string;
+};
+declare const SolidClock: {
+    ({ className }: SolidIconProps): react.JSX.Element;
+    displayName: string;
+};
+declare const SolidArrowRight: {
+    ({ className }: SolidIconProps): react.JSX.Element;
+    displayName: string;
+};
+declare const SolidInfoCircle: {
+    ({ className }: SolidIconProps): react.JSX.Element;
+    displayName: string;
+};
+declare const SolidCheck: {
+    ({ className }: SolidIconProps): react.JSX.Element;
+    displayName: string;
+};
+/** Chart bars — the one mark here without a `fillRule`/`clipRule` pair. */
+declare function SolidChartBar({ className }: SolidIconProps): react.JSX.Element;
 
-export { Avatar, AvatarBlock, type AvatarBlockProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarImageProps, type AvatarInitialProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, type ColumnDef, DataTable, DocumentRow, type DocumentRowProps, type DocumentStatus, FileDropZone, type FileDropZoneProps, FormCard, FormCardFooter, type FormCardFooterProps, FormCardHeader, type FormCardHeaderProps, IconButton, type IconButtonProps, type IconButtonVariant, Input, type InputProps, type InputSize, MetricCard, Modal, type ModalProps, MultiSelectCard, type MultiSelectCardProps, NavItem, type NavItemProps, Panel, ROLE_COMBO_OPTIONS, RoleBadge, type RoleBadgeProps, RoleComboBox, type RoleComboBoxProps, type RoleOption, SectionHeading, Select, type SelectOption, type SelectProps, SentimentBadge, SeverityBadge, StatTile, type StatTileProps, type StepItem, type StepStatus, Stepper, type StepperProps, TableCellBadge, TableCellLeadText, TableCellProgress, TableCellStatusPill, TableCellText, Textarea, type TextareaProps, Toggle, type ToggleProps };
+export { AIChatBar, type AIChatBarProps, AISuggestionChip, type AISuggestionChipProps, AuroraBackdrop, Avatar, AvatarBlock, type AvatarBlockProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarImageProps, type AvatarInitialProps, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, BarChart, type BarChartOrientation, type BarChartProps, type BarChartSeries, type BarChartSize, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, CHART_SEQUENCE, CHART_TONE, CHART_TRACK, Card, CardAction, type CardActionProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterAlign, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardRadius, type CardSize, CardTitle, type CardTitleProps, type CardTone, ChartLegend, type ChartLegendItem, type ChartLegendOrientation, type ChartLegendProps, type ChartTone, CheckIndicator, type CheckIndicatorProps, type CheckIndicatorStatus, Checkbox, type CheckboxProps, type CheckedGroup, CheckedGroupList, type CheckedGroupListColumns, type CheckedGroupListProps, ChecklistRow, type ChecklistRowProps, type ChecklistRowState, type ColumnDef, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, DEFAULT_SCORE_THRESHOLDS, DataTable, type DataTableAlign, type DataTableDensity, type DataTableProps, DatePicker, type DatePickerProps, DonutChart, type DonutChartProps, type DonutChartSize, type DonutSegment, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateVariant, EntityIconBadge, type EntityIconBadgeProps, type EntityIconBadgeSize, type EntityIconBadgeTone, EyebrowLabel, type EyebrowLabelProps, type EyebrowLabelVariant, FileDropZone, type FileDropZoneProps, FileRow, type FileRowProps, FilterBar, type FilterBarProps, type FilterBarSize, FormCard, FormCardFooter, type FormCardFooterProps, FormCardHeader, type FormCardHeaderProps, IconButton, type IconButtonProps, type IconButtonVariant, IconTextRow, type IconTextRowProps, InlineAlert, type InlineAlertProps, type InlineAlertTone, Input, type InputProps, type InputSize, LegendDot, type LegendDotProps, type LegendDotShape, type LegendDotSize, ListRow, type ListRowDensity, type ListRowDivider, type ListRowProps, MetaField, MetaFieldGrid, type MetaFieldGridProps, type MetaFieldLayout, type MetaFieldProps, MiniBarChart, type MiniBarChartOrientation, type MiniBarChartProps, type MiniBarChartSize, Modal, ModalBody, type ModalBodyProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterAlign, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, type ModalTone, MultiSelectCard, type MultiSelectCardProps, NavItem, type NavItemProps, type NavItemSize, NoteConfirmModal, type NoteConfirmModalProps, NumberedStepsList, type NumberedStepsListProps, OVERLAY_SCRIM, PageHeading, type PageHeadingProps, type PageHeadingSize, PageToolbar, type PageToolbarProps, type PageToolbarSize, PasswordInput, type PasswordInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarTone, type QuickAction, QuickActionsBar, type QuickActionsBarProps, ROLE_COMBO_OPTIONS, RadialGauge, type RadialGaugeProps, type RadialGaugeSize, RankedRow, type RankedRowProps, RoleBadge, type RoleBadgeProps, RoleComboBox, type RoleComboBoxProps, type RoleOption, type ScoreDirection, type ScoreRampTone, type ScoreThresholds, type ScoreTone, ScoreValue, type ScoreValueProps, type ScoreValueSize, type ScoreValueTone, type ScoreValueWeight, ScoredRow, type ScoredRowAlign, type ScoredRowGap, type ScoredRowProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SolidAlertTriangle, SolidArrowRight, SolidChartBar, SolidCheck, SolidClock, SolidGlobe, SolidInfoCircle, SolidMapPin, SolidShieldCheck, Sparkline, type SparklineProps, type SparklineSize, type SparklineVariant, StatNumber, type StatNumberProps, type StatNumberSize, type StatNumberWeight, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusChip, type StatusChipProps, StatusDot, type StatusDotProps, type StatusDotTone, type StatusTone, type StepItem, type StepStatus, Stepper, type StepperProps, type TabItem, TableCellBadge, type TableCellBadgeProps, TableCellLeadText, type TableCellLeadTextProps, TableCellProgress, type TableCellProgressProps, type TableCellSize, TableCellText, type TableCellTextProps, Tabs, type TabsProps, type TabsSize, type TabsVariant, TagPill, type TagPillProps, type TagPillTone, Textarea, type TextareaProps, TileGrid, type TileGridBreakpoint, type TileGridColumns, type TileGridProps, Toggle, type ToggleProps, type ToggleSize, TrailChip, type TrailChipProps, type TrendDirection, TrendLabel, type TrendLabelProps, type TrendLabelSize, type TrendLabelWeight, type UserAccountStatus, UserStatusPill, type UserStatusPillProps, WidgetFooter, type WidgetFooterProps, WidgetHeader, type WidgetHeaderEyebrowVariant, type WidgetHeaderProps, WidgetTitle, type WidgetTitleProps, type WidgetTitleSize, cn, getScoreTone, resolveChartColor, useOverlayDismiss };