@arbidocs/blocks 0.4.0 → 0.4.2

package/dist/components/ContactForm.d.ts

@@ -33,10 +33,22 @@ export interface ContactFormProps {
     onSubmit?: (values: Record<string, string>) => void | Promise<void>;
     /** Message shown after a client-side (no-action) submit. */
     successMessage?: string;
-    /** Replaces the success message block. */
-    renderSuccess?: (values: Record<string, string>) => ReactNode;
+    /**
+     * Replaces the success message block. The second argument returns the form to its initial
+     * state (no remount with `key` needed), e.g. for a "send another" button.
+     */
+    renderSuccess?: (values: Record<string, string>, reset: () => void) => ReactNode;
+    /** With the default success message, adds a button with this label that resets the form. */
+    resetLabel?: string;
+    /** Called with every field's current value on each change (and not on the initial render). */
+    onValuesChange?: (values: Record<string, string>) => void;
+    /**
+     * Content between the fields and the submit button: a note that depends on a field, a consent
+     * line, a summary. A function receives the current values and re-renders on every change.
+     */
+    footerSlot?: ReactNode | ((values: Record<string, string>) => ReactNode);
     testId?: string;
     testIds?: Partial<ContactFormTestIds>;
 }
 /** A configurable lead/contact form. Posts to `action`, hands values to `onSubmit`, or confirms. */
-export declare function ContactForm({ fields, submitLabel, action, onSubmit, successMessage, renderSuccess, testId, testIds, }: ContactFormProps): import("react").JSX.Element;
+export declare function ContactForm({ fields, submitLabel, action, onSubmit, successMessage, renderSuccess, resetLabel, onValuesChange, footerSlot, testId, testIds, }: ContactFormProps): import("react").JSX.Element;

package/dist/components/TeamGrid.d.ts

@@ -1,18 +1,30 @@
+import type { ReactNode } from 'react';
 import { type BlockLinkComponent } from './blockLink';
 export interface TeamMember {
     name: string;
     role?: string;
+    /** An accent line under the role (practice, team). */
+    kicker?: string;
     bio?: string;
     avatarUrl?: string;
     /** When set, the card becomes a link to this person's detail page. */
     href?: string;
+    /** Overrides this card's test id (default `{testId}-item-{index}`). */
+    testId?: string;
 }
 export interface TeamGridProps {
     members: TeamMember[];
     columns?: '2' | '3' | '4';
+    /**
+     * `centered`: the stacked, centred card. `profile`: the start-aligned editorial card
+     * (`ProfileCard`: clamped bio, meta pinned to the foot, arrow on linked cards).
+     */
+    variant?: 'centered' | 'profile';
+    /** Per-member content under the bio (practice chips, focus areas, links). */
+    renderMeta?: (member: TeamMember, index: number) => ReactNode;
     /** Inject a router link (adapted to `href`) so linked cards navigate in-SPA. */
     linkComponent?: BlockLinkComponent;
     testId?: string;
 }
-/** A grid of people cards: avatar, name, role and an optional short bio. */
-export declare function TeamGrid({ members, columns, linkComponent, testId }: TeamGridProps): import("react").JSX.Element;
+/** A grid of people cards: avatar, name, role and an optional short bio and meta slot. */
+export declare function TeamGrid({ members, columns, variant, renderMeta, linkComponent, testId, }: TeamGridProps): import("react").JSX.Element;

package/dist/components/editorial/ArticleList.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { type BlockLinkComponent } from '../blockLink';
+export interface ArticleItem {
+    title: ReactNode;
+    summary?: ReactNode;
+    /** Category or type, shown as an accent label. */
+    kicker?: ReactNode;
+    /** Short facts joined with a middle dot: author, date, reading time. */
+    meta?: ReactNode[];
+    href?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    testId?: string;
+}
+export interface ArticleListProps {
+    items: ArticleItem[];
+    /**
+     * `cards`: a grid of cards. `rows`: ruled rows (kicker and meta beside the title), best for an
+     * archive.
+     */
+    layout?: 'cards' | 'rows';
+    /** `cards` only: the first item is a large card beside a column of the rest from `lg`. */
+    featureFirst?: boolean;
+    columns?: 2 | 3;
+    linkComponent?: BlockLinkComponent;
+    /** Rendered instead of the list when `items` is empty. */
+    empty?: ReactNode;
+    className?: string;
+    testId?: string;
+}
+/** Article, insight or news items as cards (optionally with a lead card) or ruled archive rows. */
+export declare function ArticleList({ items, layout, featureFirst, columns, linkComponent, empty, className, testId, }: ArticleListProps): import("react").JSX.Element | null;

package/dist/components/editorial/Bands.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import { type EditorialSurface } from './EditorialHero';
+export interface ProofStripProps {
+    /** The lead statement (an icon and a sentence). */
+    lead?: ReactNode;
+    /** Short labels: standards, memberships, clients. */
+    items: ReactNode[];
+    /** Accessible name of the label list. */
+    label?: string;
+    surface?: EditorialSurface;
+    className?: string;
+    testId?: string;
+}
+/** A thin band of proof points: a lead statement and a row of short uppercase labels. */
+export declare function ProofStrip({ lead, items, label, surface, className, testId, }: ProofStripProps): import("react").JSX.Element;
+export interface CtaBandProps {
+    title: ReactNode;
+    lead?: ReactNode;
+    /** Buttons or links. */
+    actions?: ReactNode;
+    /** Decoration behind the copy (image, texture), hidden from assistive tech. */
+    backdrop?: ReactNode;
+    /** Default `inverse`: a dark closing band. */
+    surface?: EditorialSurface;
+    className?: string;
+    testId?: string;
+}
+/** Closing call-to-action band: centred heading, lead and actions over an optional backdrop. */
+export declare function CtaBand({ title, lead, actions, backdrop, surface, className, testId, }: CtaBandProps): import("react").JSX.Element;

package/dist/components/editorial/EditorialHeading.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { type EditorialTone } from './tone';
+export interface EditorialHeadingProps {
+    eyebrow?: ReactNode;
+    /** Section number or label shown with the eyebrow. */
+    index?: number | string;
+    title: ReactNode;
+    lead?: ReactNode;
+    /** Heading element level (default 2). */
+    level?: 1 | 2 | 3;
+    align?: 'start' | 'center';
+    tone?: EditorialTone;
+    className?: string;
+    testId?: string;
+}
+/** Section heading: numbered or labelled eyebrow, display title and lead. */
+export declare function EditorialHeading({ eyebrow, index, title, lead, level, align, tone, className, testId, }: EditorialHeadingProps): import("react").JSX.Element;

package/dist/components/editorial/EditorialHero.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import { type EditorialTone } from './tone';
+export type EditorialSurface = 'plain' | 'muted' | 'inverse';
+export interface EditorialHeroTestIds {
+    root: string;
+    eyebrow: string;
+    title: string;
+    lede: string;
+    actions: string;
+    aside: string;
+}
+export interface EditorialHeroProps {
+    eyebrow?: ReactNode;
+    /** Show the accent rule before the eyebrow. */
+    eyebrowRule?: boolean;
+    /** The headline: text or any node. */
+    title: ReactNode;
+    /** A phrase inside a string `title` set in the italic accent. */
+    emphasis?: string;
+    /** The paragraph under the headline. */
+    lede?: ReactNode;
+    /** Buttons or links under the lede. */
+    actions?: ReactNode;
+    /** Anything under the actions (badges, a trust line). */
+    footer?: ReactNode;
+    /** The figure beside (below on phones) the copy: an image frame, a card, a media slot. */
+    aside?: ReactNode;
+    /** Decoration behind the copy (texture, wash, background image). Hidden from assistive tech. */
+    backdrop?: ReactNode;
+    /** `start` copy, or `center` (no aside). */
+    align?: 'start' | 'center';
+    /** `page`: a page-opening header band. `cover`: the larger home-page hero. */
+    size?: 'page' | 'cover';
+    surface?: EditorialSurface;
+    className?: string;
+    testId?: string;
+    testIds?: Partial<EditorialHeroTestIds>;
+}
+export declare const SURFACE_CLASS: Record<EditorialSurface, string>;
+export declare const SURFACE_TONE: Record<EditorialSurface, EditorialTone>;
+/**
+ * Editorial opening band: eyebrow, display headline with an italic accent phrase, lede, actions
+ * and an optional aside (image, card). Covers a page header (no aside, `size="page"`), a split
+ * hero (aside) and a centred landing hero (`align="center"`, `size="cover"`).
+ */
+export declare function EditorialHero({ eyebrow, eyebrowRule, title, emphasis, lede, actions, footer, aside, backdrop, align, size, surface, className, testId, testIds, }: EditorialHeroProps): import("react").JSX.Element;

package/dist/components/editorial/EditorialSection.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import { type EditorialSurface } from './EditorialHero';
+export interface EditorialSectionProps {
+    id?: string;
+    eyebrow?: ReactNode;
+    /** Section number or label: `1` renders `01`. */
+    index?: number | string;
+    title?: ReactNode;
+    lead?: ReactNode;
+    /** Sits beside the heading from `sm` up (a "see all" link or button). */
+    action?: ReactNode;
+    /**
+     * `stacked`: heading above the content. `split`: heading column beside the content from `lg`.
+     * `split-wide`: the same with a wider content column.
+     */
+    layout?: 'stacked' | 'split' | 'split-wide';
+    /** `plain`, `muted` (tinted band) or `inverse` (dark band on a light theme). */
+    surface?: EditorialSurface;
+    /** Hairline above and below the band. */
+    bordered?: boolean;
+    /** Vertical rhythm. */
+    spacing?: 'md' | 'lg';
+    /** Backdrop behind the content (texture, image), hidden from assistive tech. */
+    backdrop?: ReactNode;
+    /** Accessible name when there is no `title`. */
+    'aria-label'?: string;
+    children?: ReactNode;
+    className?: string;
+    testId?: string;
+}
+/**
+ * A page band: numbered or labelled heading, optional action, and content stacked below or in a
+ * second column. Sets the tone for the parts inside it, so the same list or panel grid reads on
+ * a plain, tinted or inverse band.
+ */
+export declare function EditorialSection({ id, eyebrow, index, title, lead, action, layout, surface, bordered, spacing, backdrop, 'aria-label': ariaLabel, children, className, testId, }: EditorialSectionProps): import("react").JSX.Element;
+export interface EditorialProseProps {
+    /** One entry per paragraph. */
+    paragraphs: ReactNode[];
+    /** Two columns from `md` up (paragraphs never split across columns). */
+    columns?: 1 | 2;
+    size?: 'base' | 'lg';
+    className?: string;
+    testId?: string;
+}
+/** Long-form paragraphs set at a readable measure, in one or two columns. */
+export declare function EditorialProse({ paragraphs, columns, size, className, testId, }: EditorialProseProps): import("react").JSX.Element;

package/dist/components/editorial/Eyebrow.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { type EditorialTone } from './tone';
+export interface EyebrowProps {
+    children: ReactNode;
+    /** A number or label before the text: `1` renders `01`. */
+    index?: number | string;
+    /** A short accent rule before the text. */
+    rule?: boolean;
+    tone?: EditorialTone;
+    className?: string;
+    testId?: string;
+}
+/** Small uppercase label above a heading: optional index and accent rule. */
+export declare function Eyebrow({ children, index, rule, tone, className, testId }: EyebrowProps): import("react").JSX.Element;

package/dist/components/editorial/PanelGrid.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import { type BlockLinkComponent } from '../blockLink';
+import { type EditorialTone } from './tone';
+export interface PanelItem {
+    title: ReactNode;
+    body?: ReactNode;
+    /** Icon in a bordered tile. */
+    icon?: ReactNode;
+    /** Explicit number or label; with `numbered` on the grid it defaults to the position. */
+    index?: number | string;
+    /** A small label above the title (category). */
+    kicker?: ReactNode;
+    /** Bulleted points under the body. */
+    points?: ReactNode[];
+    /** Chips at the foot. */
+    tags?: string[];
+    /** Anything at the foot (a meta line, a link). */
+    footer?: ReactNode;
+    /** Makes the whole panel a link. */
+    href?: string;
+    testId?: string;
+}
+export interface PanelGridProps {
+    items: PanelItem[];
+    columns?: 2 | 3 | 4;
+    /** `cards`: separate bordered panels. `joined`: one hairline-ruled table of cells. */
+    variant?: 'cards' | 'joined';
+    /** Number the panels 01, 02, ... */
+    numbered?: boolean;
+    /** Fade each panel in on scroll, staggered. */
+    reveal?: boolean;
+    /** Router link for panels with an `href`. */
+    linkComponent?: BlockLinkComponent;
+    /** Heading level of the panel titles (default 3). */
+    headingLevel?: 2 | 3 | 4;
+    tone?: EditorialTone;
+    className?: string;
+    testId?: string;
+}
+/**
+ * Icon, title and body panels: principles, process steps, capability cards, security pillars,
+ * practice areas. Cards or a joined hairline table, optional numbers, bullet points, chips and
+ * a link per panel.
+ */
+export declare function PanelGrid({ items, columns, variant, numbered, reveal, linkComponent, headingLevel, tone, className, testId, }: PanelGridProps): import("react").JSX.Element;

package/dist/components/editorial/ProfileCard.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { type BlockLinkComponent } from '../blockLink';
+export interface ProfileCardProps {
+    name: string;
+    role?: string;
+    /** An accent line under the role (practice, team). */
+    kicker?: string;
+    bio?: string;
+    avatarUrl?: string;
+    /** Replaces the avatar (a photo frame, a monogram). */
+    avatar?: ReactNode;
+    /** Extra classes of the avatar fallback, e.g. a host tint. */
+    avatarClassName?: string;
+    /** Chips, links or stats under the bio, pinned to the card foot. */
+    meta?: ReactNode;
+    /** Makes the whole card a link to the profile. */
+    href?: string;
+    linkComponent?: BlockLinkComponent;
+    /** Lines of bio shown before truncation (0 shows it all). */
+    bioLines?: 0 | 2 | 3 | 4;
+    /** Heading level of the name (default 3). */
+    headingLevel?: 2 | 3 | 4;
+    className?: string;
+    testId?: string;
+}
+/** A person's card: avatar, name, role, kicker, clamped bio and a meta slot. */
+export declare function ProfileCard({ name, role, kicker, bio, avatarUrl, avatar, avatarClassName, meta, href, linkComponent, bioLines, headingLevel, className, testId, }: ProfileCardProps): import("react").JSX.Element;

package/dist/components/editorial/PullQuote.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export interface PullQuoteProps {
+    quote: ReactNode;
+    /** Who said it. */
+    attribution?: {
+        name: ReactNode;
+        role?: ReactNode;
+    };
+    /** Link to the source. */
+    cite?: string;
+    align?: 'start' | 'center';
+    size?: 'md' | 'lg';
+    className?: string;
+    testId?: string;
+}
+/** A large display quotation with an accent rule and attribution. */
+export declare function PullQuote({ quote, attribution, cite, align, size, className, testId, }: PullQuoteProps): import("react").JSX.Element;

package/dist/components/editorial/Reveal.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+export interface RevealProps {
+    children: ReactNode;
+    /** Delay in ms before the reveal starts (stagger siblings with `index * 90`). */
+    delay?: number;
+    className?: string;
+    testId?: string;
+}
+/**
+ * Fade-and-rise on first scroll into view. Content is fully visible until the part has mounted
+ * and found an `IntersectionObserver`, so server rendering, no-JS and jsdom show everything; the
+ * hidden state and transition live in `blocks.css` (`[data-reveal]`) and collapse under
+ * `prefers-reduced-motion`.
+ */
+export declare function Reveal({ children, delay, className, testId }: RevealProps): import("react").JSX.Element;

package/dist/components/editorial/index.d.ts

@@ -0,0 +1,12 @@
+export { Eyebrow, type EyebrowProps } from './Eyebrow';
+export { EditorialHeading, type EditorialHeadingProps } from './EditorialHeading';
+export { EditorialHero, type EditorialHeroProps, type EditorialHeroTestIds, type EditorialSurface, } from './EditorialHero';
+export { EditorialSection, EditorialProse, type EditorialSectionProps, type EditorialProseProps, } from './EditorialSection';
+export { PanelGrid, type PanelGridProps, type PanelItem } from './PanelGrid';
+export { DefinitionList, CheckList, TagList, type DefinitionListProps, type DefinitionItem, type CheckListProps, type TagListProps, } from './lists';
+export { PullQuote, type PullQuoteProps } from './PullQuote';
+export { ArticleList, type ArticleListProps, type ArticleItem } from './ArticleList';
+export { ProfileCard, type ProfileCardProps } from './ProfileCard';
+export { ProofStrip, CtaBand, type ProofStripProps, type CtaBandProps } from './Bands';
+export { Reveal, type RevealProps } from './Reveal';
+export { type EditorialTone } from './tone';

package/dist/components/editorial/lists.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export interface DefinitionItem {
+    term: ReactNode;
+    description: ReactNode;
+    /** A leading icon; without one the `dot` marker is used when `marker="dot"`. */
+    icon?: ReactNode;
+    testId?: string;
+}
+export interface DefinitionListProps {
+    items: DefinitionItem[];
+    /**
+     * `rows`: each entry is a lifted row with a marker. `ruled`: a spec sheet, term and description
+     * side by side between hairlines.
+     */
+    layout?: 'rows' | 'ruled';
+    /** Marker of an entry with no `icon` in the `rows` layout. */
+    marker?: 'dot' | 'none';
+    className?: string;
+    testId?: string;
+}
+/** Term and description pairs (`<dl>`): feature rows, a spec sheet, a definition list. */
+export declare function DefinitionList({ items, layout, marker, className, testId, }: DefinitionListProps): import("react").JSX.Element;
+export interface CheckListProps {
+    items: ReactNode[];
+    /** Two columns from `sm` up. */
+    columns?: 1 | 2;
+    /** Replaces the check mark. */
+    icon?: ReactNode;
+    className?: string;
+    testId?: string;
+}
+/** A list of points, each with a ringed check mark. */
+export declare function CheckList({ items, columns, icon, className, testId }: CheckListProps): import("react").JSX.Element;
+export interface TagListProps {
+    items: string[];
+    /** Accessible name of the list. */
+    label?: string;
+    className?: string;
+    testId?: string;
+}
+/** Small bordered chips: sectors, focus areas, topics. */
+export declare function TagList({ items, label, className, testId }: TagListProps): import("react").JSX.Element | null;

package/dist/components/editorial/tone.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Editorial parts read their colours from the theme tokens only. `inverse` flips the page
+ * tokens (`bg-foreground text-background`) for dark bands on a light theme; on a theme that is
+ * already dark, leave `default` and let the host tokens do the work.
+ */
+export type EditorialTone = 'default' | 'inverse';
+export interface EditorialToneClasses {
+    /** Body text colour of the band. */
+    text: string;
+    /** Secondary copy (lede, descriptions). */
+    muted: string;
+    /** Tertiary copy (meta lines, small print). */
+    subtle: string;
+    /** Accent text (links, kickers, markers). */
+    accent: string;
+    /** Hairline between rows and around bands. */
+    hairline: string;
+    /** A lifted surface (panel, row, chip). */
+    panel: string;
+    /** Hover state of an interactive panel. */
+    panelHover: string;
+    /** Small bordered chip. */
+    chip: string;
+    /** Icon tile. */
+    tile: string;
+}
+export declare const EditorialToneContext: import("react").Context<EditorialTone>;
+/** The tone of the enclosing band, unless a part overrides it. */
+export declare function useEditorialTone(override?: EditorialTone): EditorialToneClasses & {
+    tone: EditorialTone;
+};
+/** `01`, `02`, ... for a numbered label; strings pass through. */
+export declare function formatIndex(index: number | string): string;

package/dist/facts/FactsViewToggle.d.ts

@@ -32,5 +32,7 @@ export interface FactsViewToggleProps {
     labels?: Partial<FactsViewToggleLabels>;
     /** Item test ids are `${testIdPrefix}-${mode}-button` (default `facts-layout`). */
     testIdPrefix?: string;
+    /** Per-mode item ids that replace the prefixed ones. */
+    testIds?: Partial<Record<FactsViewMode, string>>;
 }
-export declare function FactsViewToggle({ viewMode, onChange, collapsed, labels, testIdPrefix, }: FactsViewToggleProps): import("react").JSX.Element;
+export declare function FactsViewToggle({ viewMode, onChange, collapsed, labels, testIdPrefix, testIds, }: FactsViewToggleProps): import("react").JSX.Element;

package/dist/facts/fact-row.d.ts

@@ -0,0 +1,32 @@
+import type { FactRowView } from './factColumns';
+/**
+ * A fact as a host with plain records usually holds it: camelCase, optional flags, tags as
+ * strings. `toFactRow` maps it to the `FactRowView` that `FactsTable` and `createFactColumns`
+ * read, so a host without the SDK type needs no adapter of its own.
+ */
+export interface PlainFactRecord {
+    id: string;
+    text: string;
+    pinned?: boolean;
+    confirmed?: boolean;
+    shared?: boolean;
+    /** ISO date (or date-time) the fact starts. */
+    dateStart?: string | null;
+    dateEnd?: string | null;
+    timezone?: string | null;
+    tags?: Array<string | {
+        name: string;
+    }> | null;
+    /** Passages that support the fact; only their count is shown. */
+    citations?: unknown[] | null;
+    createdBy?: string | null;
+    createdAt?: string | null;
+    updatedAt?: string | null;
+}
+/** The row plus the record it came from, so callbacks can hand the host its own object back. */
+export type PlainFactRow<T extends PlainFactRecord> = FactRowView & {
+    record: T;
+};
+/** Map one plain record to a grid row. Missing flags are `false`, missing lists are empty. */
+export declare function toFactRow<T extends PlainFactRecord>(record: T): PlainFactRow<T>;
+export declare function toFactRows<T extends PlainFactRecord>(records: T[]): PlainFactRow<T>[];

package/dist/facts/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunk6ALISABK_cjs = require('../chunk-6ALISABK.cjs');
+var chunkLRUCMZK6_cjs = require('../chunk-LRUCMZK6.cjs');
 var chunkOUW6G4O2_cjs = require('../chunk-OUW6G4O2.cjs');
 var chunkVPPX5XUF_cjs = require('../chunk-VPPX5XUF.cjs');
 var chunkV4ISCZJ7_cjs = require('../chunk-V4ISCZJ7.cjs');
@@ -502,7 +502,7 @@ function FactsTable({
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk6ALISABK_cjs.GridView,
+    chunkLRUCMZK6_cjs.GridView,
     {
       testId,
       items: facts,
@@ -519,6 +519,29 @@ function FactsTable({
     }
   );
 }
+
+// src/facts/fact-row.ts
+function toFactRow(record) {
+  return {
+    external_id: record.id,
+    text: record.text,
+    pinned: record.pinned ?? false,
+    confirmed: record.confirmed ?? false,
+    shared: record.shared ?? false,
+    date_start: record.dateStart ?? null,
+    date_end: record.dateEnd ?? null,
+    timezone: record.timezone ?? null,
+    tags: (record.tags ?? []).map((t) => typeof t === "string" ? { name: t } : t),
+    citations: record.citations ?? [],
+    created_by_ext_id: record.createdBy ?? null,
+    created_at: record.createdAt ?? null,
+    updated_at: record.updatedAt ?? null,
+    record
+  };
+}
+function toFactRows(records) {
+  return records.map(toFactRow);
+}
 var DEFAULT_FACT_LABELS_CELL_LABELS = {
   edit: "Edit labels",
   searchPlaceholder: "Search or create...",
@@ -1270,11 +1293,15 @@ function FactsViewToggle({
   onChange,
   collapsed = false,
   labels,
-  testIdPrefix
+  testIdPrefix,
+  testIds
 }) {
-  const options = createOptions({ ...DEFAULT_FACTS_VIEW_TOGGLE_LABELS, ...labels });
+  const options = createOptions({ ...DEFAULT_FACTS_VIEW_TOGGLE_LABELS, ...labels }).map((o) => ({
+    ...o,
+    testId: testIds?.[o.value]
+  }));
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk6ALISABK_cjs.ViewToggle,
+    chunkLRUCMZK6_cjs.ViewToggle,
     {
       options,
       value: viewMode,
@@ -2367,6 +2394,8 @@ exports.factDateSpanToFields = factDateSpanToFields;
 exports.renderPreviewInline = renderPreviewInline;
 exports.sourceDocCount = sourceDocCount;
 exports.supportedTimezones = supportedTimezones;
+exports.toFactRow = toFactRow;
+exports.toFactRows = toFactRows;
 exports.toPreviewLine = toPreviewLine;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map