@veevarts/design-system 2.0.0 → 2.1.0-beta.10

package/dist/patterns/PillTabs/ids.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_PILL_TABS_ID = "pill-tabs";
+export declare const pillTabId: (key: string, idPrefix?: string) => string;
+export declare const pillTabPanelId: (key: string, idPrefix?: string) => string;
+export declare const pillTabPanelProps: (key: string, idPrefix?: string) => {
+    role: "tabpanel";
+    id: string;
+    'aria-labelledby': string;
+    tabIndex: number;
+};

package/dist/patterns/PillTabs/index.d.ts

@@ -0,0 +1,3 @@
+export { PillTabs } from './PillTabs';
+export { pillTabId, pillTabPanelId, pillTabPanelProps } from './ids';
+export type { PillTabsProps, PillTabItem } from './types';

package/dist/patterns/PillTabs/styles.d.ts

@@ -0,0 +1,10 @@
+export declare const pillTabsClass: {
+    readonly base: "mb-3.5 w-full";
+    readonly tabList: "w-full gap-1 rounded-full border border-pos-line bg-default-100 p-1";
+    readonly cursor: "rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,.10)]";
+    readonly tab: "h-auto flex-1 px-[0.875rem] py-[0.5625rem] data-[hover-unselected=true]:opacity-100";
+    readonly tabStill: "rounded-full data-[selected=true]:bg-white data-[selected=true]:shadow-[0_1px_3px_rgba(0,0,0,.10)]";
+    readonly tabContent: "text-[0.84375rem] leading-[1.5] font-normal text-default-600 group-data-[selected=true]:font-semibold group-data-[selected=true]:text-default-900";
+    readonly title: "inline-flex items-center gap-[0.4375rem] whitespace-nowrap";
+    readonly count: "rounded-full bg-default-200 px-[0.4375rem] py-px text-[0.71875rem] leading-[1.5] font-semibold text-default-600 group-data-[selected=true]:bg-acct-rust-fill group-data-[selected=true]:text-primary-600";
+};

package/dist/patterns/PillTabs/types.d.ts

@@ -0,0 +1,13 @@
+export interface PillTabItem {
+    key: string;
+    label: string;
+    count?: number;
+}
+export interface PillTabsProps {
+    items: PillTabItem[];
+    value: string;
+    onChange: (key: string) => void;
+    ariaLabel: string;
+    idPrefix?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/{CatalogItemCard → Programs/CatalogItemCard}/type.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../../components';
+import { ButtonProps } from '../../../components';
 /**
  * Metadata row displayed under the card title.
  */

package/dist/patterns/{EventDetails → Programs/EventDetails}/EventDetails.d.ts

@@ -20,6 +20,8 @@ export interface EventDetailsProps {
     classes?: string;
     /** @property {boolean} [compact] - Dense spacing mode for compact side layouts. */
     compact?: boolean;
+    /** @property {'stacked' | 'horizontal'} [layout] - Places the image beside content on desktop when horizontal. */
+    layout?: 'stacked' | 'horizontal';
     /** @property {boolean} [showImage] - Optional flag to show or hide the event image. Defaults to true. */
     showImage?: boolean;
     /** @property {'lazy' | 'eager'} [imageLoading] - Optional loading strategy for the event image. Use `'lazy'` for off-screen placements (long lists, below-the-fold). Defaults to `'eager'` since the banner is typically above-the-fold. */
@@ -37,5 +39,5 @@ export interface EventDetailsProps {
  * @function EventDetails
  * @description Displays a card with event information such as name, image, date, time, location, and description.
  */
-export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, compact, imageLoading, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
+export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, compact, layout, imageLoading, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
 export default EventDetails;

package/dist/patterns/{OfferCard → Programs/OfferCard}/OfferCard.d.ts

@@ -6,7 +6,7 @@ import { OfferCardProps } from './types';
  * Supports slot-based customization for all rendered elements.
  */
 export declare const OfferCard: {
-    ({ offer, quantity: quantityProp, defaultQuantity, onQuantityChange, currency, locale, labels: customLabels, slots, isDisabled, buttonVariant, buttonColor, showCard, showDescription, showPeopleCount, showPrice, priceDisplay, classNames, "data-testid": dataTestId, selectedColor, compact, isSoldOut: isSoldOutProp, isMaxReached: isMaxReachedProp, isRuleBlocked: isRuleBlockedProp, statusTone: statusToneProp, statusLabel, disabledReason, disabled, }: OfferCardProps): JSX.Element;
+    ({ offer, quantity: quantityProp, defaultQuantity, onQuantityChange, currency, locale, labels: customLabels, slots, isDisabled, buttonVariant, buttonColor, showCard, showDescription, showPeopleCount, showPrice, priceDisplay, classNames, "data-testid": dataTestId, selectedColor, selectionMode, compact, isSoldOut: isSoldOutProp, isMaxReached: isMaxReachedProp, isRuleBlocked: isRuleBlockedProp, statusTone: statusToneProp, statusLabel, disabledReason, disabled, }: OfferCardProps): JSX.Element;
     displayName: string;
 };
 export default OfferCard;

package/dist/patterns/{OfferCard → Programs/OfferCard}/types.d.ts

@@ -350,6 +350,13 @@ export interface OfferCardProps {
      * @default 'primary'
      */
     selectedColor?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * How an available offer is added to the selection.
+     * `press-to-add` makes the whole card add one item and omits the inline
+     * stepper. It is useful when a separate order summary owns removal.
+     * @default 'stepper'
+     */
+    selectionMode?: 'stepper' | 'press-to-add';
     /**
      * Whether to show the component inside a Card
      * @default true

package/dist/patterns/Programs/ProgramListItem/ProgramListItem.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from 'react';
+export type ProgramListItemStatus = 'open' | 'selling-fast' | 'sold-out';
+export interface ProgramListItemProps {
+    title: string;
+    subtitle: string;
+    price?: string;
+    imageUrl?: string;
+    status?: ProgramListItemStatus;
+    isDisabled?: boolean;
+    onPress?(): void;
+    className?: string;
+}
+/** Pressable Programs catalog row for POS list mode. */
+export declare function ProgramListItem({ title, subtitle, price, imageUrl, status, isDisabled, onPress, className }: ProgramListItemProps): JSX.Element;
+export declare namespace ProgramListItem {
+    var displayName: string;
+}

package/dist/patterns/Programs/ProgramListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgramListItem } from './ProgramListItem';
+export type { ProgramListItemProps, ProgramListItemStatus } from './ProgramListItem';

package/dist/patterns/Programs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CatalogItemCard';
+export * from './EventDetails';
+export * from './OfferCard';
+export * from './ProgramListItem';
+export * from './SessionTimeline';

package/dist/patterns/RecordCard/RecordCard.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { RecordCardProps } from './types';
+export declare const RecordCard: React.FC<RecordCardProps>;

package/dist/patterns/RecordCard/index.d.ts

@@ -0,0 +1,2 @@
+export { RecordCard } from './RecordCard';
+export type { RecordCardProps, RecordCardVariant, RecordCardBody } from './types';

package/dist/patterns/RecordCard/styles.d.ts

@@ -0,0 +1,15 @@
+import { RecordCardBody, RecordCardVariant } from './types';
+export declare const recordCardShadow = "shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+export declare const recordCardClass: {
+    readonly base: "overflow-hidden rounded-2xl border border-pos-line bg-white shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly title: "m-0 min-w-0 text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere]";
+    readonly count: "rounded-full bg-default-100 px-2 py-px text-[0.75rem] font-semibold text-default-600";
+    readonly icon: "flex shrink-0 text-default-500 [&_svg]:size-[1.125rem]";
+    readonly action: "ml-auto";
+    readonly description: "m-0 text-[0.84375rem] leading-[1.55] text-default-500 [&_b]:font-bold [&_b]:tabular-nums [&_b]:text-default-900";
+    readonly footer: "flex flex-wrap gap-2";
+    readonly footerAfterContent: "mt-[0.875rem]";
+    readonly footerAfterDescription: "mt-3";
+};
+export declare const recordCardHeaderClass: Record<RecordCardVariant, string>;
+export declare const recordCardBodyClass: Record<RecordCardVariant, Record<RecordCardBody, string>>;

package/dist/patterns/RecordCard/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export type RecordCardVariant = 'section' | 'aside';
+export type RecordCardBody = 'padded' | 'rows' | 'flush' | 'none';
+export interface RecordCardProps {
+    title?: ReactNode;
+    titleAs?: 'h2' | 'h3' | 'h4';
+    icon?: ReactNode;
+    count?: ReactNode;
+    badge?: ReactNode;
+    action?: ReactNode;
+    description?: ReactNode;
+    footer?: ReactNode;
+    variant?: RecordCardVariant;
+    body?: RecordCardBody;
+    children?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/RecordHeader/RecordHeader.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { RecordHeaderProps } from './types';
+export declare const RecordHeader: React.FC<RecordHeaderProps>;

package/dist/patterns/RecordHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { RecordHeader } from './RecordHeader';
+export type { RecordHeaderProps, RecordHeaderStat } from './types';

package/dist/patterns/RecordHeader/styles.d.ts

@@ -0,0 +1,43 @@
+export declare const RECORD_HEADER_WIDE_REM = 48;
+export declare const recordHeaderClass: {
+    readonly base: "mb-4 overflow-hidden rounded-2xl border border-pos-line bg-white shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly band: "flex items-center gap-2.5 border-b border-pos-hair bg-pos-page px-4 py-2.5";
+    readonly back: "inline-flex size-[1.625rem] shrink-0 items-center justify-center rounded-[0.625rem] text-default-500 outline-none transition-colors hover:bg-default-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly backIcon: "size-[0.875rem]";
+    readonly breadcrumb: "min-w-0 flex-1";
+    readonly breadcrumbList: "flex-nowrap gap-[0.375rem]";
+    readonly crumbBase: "min-w-0";
+    readonly crumb: "whitespace-nowrap text-[0.875rem] text-default-500 data-[disabled=true]:opacity-100 data-[current=true]:overflow-hidden data-[current=true]:font-normal data-[current=true]:text-default-900";
+    readonly crumbSeparator: "ms-[0.375rem] px-0 text-default-400 data-[disabled=true]:opacity-100";
+    readonly body: "flex flex-wrap gap-5";
+    readonly bodyWide: "px-5 pb-5 pt-[1.125rem]";
+    readonly bodyNarrow: "p-4";
+    readonly identity: "min-w-0 flex-[1_1_18.75rem]";
+    readonly title: "m-0 font-semibold tracking-[-.02em] text-default-900 [overflow-wrap:anywhere]";
+    readonly titleWide: "text-[1.5rem]";
+    readonly titleNarrow: "text-[1.3125rem]";
+    readonly meta: "m-0 mt-[0.6875rem] flex list-none flex-col gap-[0.4375rem] p-0";
+    readonly metaLine: "flex min-w-0 items-center gap-[0.5625rem] text-[0.84375rem] text-default-700";
+    readonly metaIcon: "flex shrink-0 text-default-400 [&_svg]:size-[0.9375rem]";
+    readonly metaText: "min-w-0 truncate";
+    readonly money: "flex flex-col gap-[0.3125rem]";
+    readonly moneyWide: "ml-auto min-w-[12.5rem] flex-none items-end text-right";
+    readonly moneyNarrow: "w-full items-start text-left";
+    readonly amountLabel: "text-[0.8125rem] text-default-500";
+    readonly amount: "whitespace-nowrap font-bold tracking-[-.03em] tabular-nums text-default-900";
+    readonly amountWide: "text-[1.9375rem] leading-[1.1]";
+    readonly amountNarrow: "text-[1.6875rem] leading-[1.1]";
+    readonly amountCaption: "text-[0.8125rem] text-default-500";
+    readonly recordId: "text-[0.8125rem] text-default-500";
+    readonly chips: "mt-[0.1875rem] flex flex-wrap gap-1.5";
+    readonly chipsWide: "justify-end";
+    readonly chipsNarrow: "justify-start";
+    readonly statItems: "m-0 mt-2.5 flex flex-wrap gap-[1.375rem]";
+    readonly stat: "flex flex-col-reverse";
+    readonly statWide: "text-right";
+    readonly statNarrow: "text-left";
+    readonly statValue: "m-0 text-[0.9375rem] font-bold tabular-nums text-default-900";
+    readonly statLabel: "mt-0.5 text-[0.75rem] text-default-500";
+    readonly statsWide: "px-5 pb-5";
+    readonly statsNarrow: "px-4 pb-4";
+};

package/dist/patterns/RecordHeader/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface RecordHeaderStat {
+    id?: string;
+    label: ReactNode;
+    value: ReactNode;
+    tone?: RecordTone;
+}
+export interface RecordHeaderProps {
+    breadcrumb: Array<{
+        label: string;
+        onClick?: () => void;
+    }>;
+    onBack?: () => void;
+    backLabel: string;
+    title: ReactNode;
+    meta?: Array<{
+        icon?: ReactNode;
+        text: ReactNode;
+    }>;
+    amountLabel?: string;
+    amount?: ReactNode;
+    amountCaption?: ReactNode;
+    recordId?: ReactNode;
+    chips?: ReactNode;
+    statItems?: RecordHeaderStat[];
+    stats?: ReactNode;
+    banner?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/RecordLayout/RecordLayout.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { RecordLayoutProps } from './types';
+export declare const RecordLayout: React.FC<RecordLayoutProps>;

package/dist/patterns/RecordLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { RecordLayout } from './RecordLayout';
+export type { RecordLayoutProps } from './types';

package/dist/patterns/RecordLayout/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const RECORD_LAYOUT_SPLIT_REM = 50;
+export declare const recordLayoutClass: {
+    readonly base: "grid items-start gap-4";
+    readonly split: "grid-cols-[minmax(0,1fr)_23.25rem]";
+    readonly stacked: "grid-cols-[minmax(0,1fr)]";
+    readonly column: "min-w-0";
+    readonly aside: "flex min-w-0 flex-col gap-[0.875rem]";
+};

package/dist/patterns/RecordLayout/types.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface RecordLayoutProps {
+    children: ReactNode;
+    aside?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/RecordTotals/RecordTotals.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { SignedAmountTone } from '../shared/recordTone';
+export interface RecordTotalsRow {
+    id: string;
+    label: React.ReactNode;
+    note?: React.ReactNode;
+    value: React.ReactNode;
+    tone?: SignedAmountTone;
+}
+export interface RecordTotalsProps {
+    rows: RecordTotalsRow[];
+    total: {
+        label: React.ReactNode;
+        value: React.ReactNode;
+    };
+    memo?: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare const RecordTotals: React.FC<RecordTotalsProps>;

package/dist/patterns/RecordTotals/index.d.ts

@@ -0,0 +1,2 @@
+export { RecordTotals } from './RecordTotals';
+export type { RecordTotalsProps, RecordTotalsRow } from './RecordTotals';

package/dist/patterns/RecordTotals/styles.d.ts

@@ -0,0 +1,19 @@
+export declare const RECORD_TOTALS_WIDE_REM = 37.5;
+export declare const recordTotalsClass: {
+    readonly base: "mx-5 border-t border-pos-hair pb-[1.125rem] pt-2.5";
+    readonly rowWide: "flex items-baseline gap-4";
+    readonly rowNarrow: "flex flex-wrap items-baseline gap-x-3";
+    readonly labelWide: "shrink-0 grow-0 basis-[11.875rem]";
+    readonly labelNarrow: "flex-auto";
+    readonly noteWide: "min-w-0 flex-1";
+    readonly noteNarrow: "order-3 mt-px basis-full";
+    readonly row: "py-2";
+    readonly label: "text-[0.875rem] text-default-900";
+    readonly note: "text-[0.8125rem] text-default-500";
+    readonly value: "ml-auto shrink-0 whitespace-nowrap text-right text-[0.875rem] tabular-nums text-default-900";
+    readonly totalRule: "mt-1.5 border-t border-pos-line";
+    readonly totalRow: "pt-3";
+    readonly totalLabel: "text-[0.9375rem] font-bold text-default-900";
+    readonly totalValue: "ml-auto shrink-0 whitespace-nowrap text-right text-[1.0625rem] font-bold tabular-nums text-default-900";
+    readonly memo: "mt-2 text-[0.78125rem] leading-[1.6] text-default-500";
+};

package/dist/patterns/RelatedRecordList/RelatedRecordList.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { RelatedRecordListProps } from './types';
+export declare const RelatedRecordList: React.FC<RelatedRecordListProps>;

package/dist/patterns/RelatedRecordList/index.d.ts

@@ -0,0 +1,2 @@
+export { RelatedRecordList } from './RelatedRecordList';
+export type { RelatedRecordListProps, RelatedRecordRow } from './types';

package/dist/patterns/RelatedRecordList/styles.d.ts

@@ -0,0 +1,19 @@
+export declare const relatedRecordListClass: {
+    readonly base: "overflow-hidden rounded-2xl border border-pos-line bg-white shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly header: "flex flex-wrap items-center gap-2 px-5 pt-4";
+    readonly title: "m-0 min-w-0 text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere]";
+    readonly count: "rounded-full bg-default-100 px-2 py-px text-[0.75rem] font-semibold text-default-600";
+    readonly list: "m-0 list-none p-0";
+    readonly item: "border-t border-pos-hair";
+    readonly itemFirstHeadless: "border-t-0";
+    readonly row: "flex w-full items-center gap-2.5 px-5 py-3 text-left";
+    readonly rowInteractive: "cursor-pointer outline-none transition-colors hover:bg-default-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly rowBody: "flex min-w-0 flex-1 flex-col";
+    readonly rowHead: "flex min-w-0 flex-wrap items-center gap-2";
+    readonly primaryLinked: "min-w-0 text-[0.875rem] font-normal text-primary [overflow-wrap:anywhere]";
+    readonly primaryPlain: "min-w-0 text-[0.875rem] font-normal text-default-900 [overflow-wrap:anywhere]";
+    readonly secondary: "mt-[0.1875rem] block min-w-0 truncate text-[0.8125rem] text-default-500";
+    readonly amount: "max-w-[45%] shrink-0 text-right text-[0.875rem] font-semibold tabular-nums text-default-900 [overflow-wrap:anywhere]";
+    readonly empty: "min-w-0 px-5 pb-5 pt-[0.875rem] text-[0.875rem] text-default-500 [overflow-wrap:anywhere]";
+    readonly emptyHeadless: "pt-5";
+};

package/dist/patterns/RelatedRecordList/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface RelatedRecordRow {
+    id: string;
+    primary: ReactNode;
+    chip?: ReactNode;
+    secondary?: ReactNode;
+    amount?: ReactNode;
+    amountTone?: 'positive' | 'negative' | 'neutral';
+    onSelect?: () => void;
+}
+export interface RelatedRecordListProps {
+    title?: ReactNode;
+    count?: number;
+    rows: RelatedRecordRow[];
+    emptyContent: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/SplitPaymentSummary/index.d.ts

@@ -6,4 +6,4 @@
  * `<PaymentsDropIn>` orchestrator.
  */
 export { SplitPaymentSummary } from './SplitPaymentSummary';
-export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, TenderRow, TenderRowStatus, TenderRowType, Money, } from './types';
+export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, SplitPaymentSummaryVariant, TenderRow, TenderRowStatus, TenderRowType, Money, } from './types';

package/dist/patterns/SplitPaymentSummary/types.d.ts

@@ -38,6 +38,13 @@ export interface SplitPaymentSummaryLabels {
     statusRecorded?: string;
     statusFailed?: string;
 }
+/**
+ * How the remaining balance is presented.
+ *
+ * `banner` is the original: a padded card with the label over a 4xl amount,
+ * ~104px tall. `compact` says the same thing on one ~24px row.
+ */
+export type SplitPaymentSummaryVariant = 'banner' | 'compact';
 export interface SplitPaymentSummaryProps {
     /** Total amount the host is collecting (sum target). */
     total: Money;
@@ -56,6 +63,17 @@ export interface SplitPaymentSummaryProps {
     labels?: SplitPaymentSummaryLabels;
     /** Hide the collected list (just the remaining banner). */
     hideCollectedList?: boolean;
+    /**
+     * Default `'banner'`. `'compact'` trades the padded card for a single
+     * label-and-amount row — the same information in ~24px instead of ~104px.
+     *
+     * For surfaces where the split summary shares a modal with a tender form:
+     * measured in the payments drop-in, the banner alone was two thirds of
+     * that modal's overflow, and the card form could not be seen whole.
+     * The collected list is unaffected — it is the part that cannot be said
+     * in one line.
+     */
+    variant?: SplitPaymentSummaryVariant;
     'data-testid'?: string;
     className?: string;
 }

package/dist/patterns/StatTiles/StatTiles.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { StatTilesProps } from './types';
+export declare const StatTiles: React.FC<StatTilesProps>;

package/dist/patterns/StatTiles/index.d.ts

@@ -0,0 +1,2 @@
+export { StatTiles } from './StatTiles';
+export type { StatTilesProps, StatTileItem } from './types';

package/dist/patterns/StatTiles/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const STAT_TILES_PAIR_MIN = 560;
+export declare const statTilesClass: {
+    readonly base: "grid gap-3";
+    readonly tile: "min-w-0 rounded-[14px] border border-pos-line bg-white px-[18px] py-4 shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly value: "text-[23px] font-bold leading-[1.2] tracking-[-.02em] tabular-nums text-default-900 [overflow-wrap:anywhere]";
+    readonly label: "mt-[5px] text-[13.5px] text-default-500";
+    readonly caption: "mt-0.5 text-[12.5px] text-default-500";
+};

package/dist/patterns/StatTiles/types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface StatTileItem {
+    label: string;
+    value: ReactNode;
+    tone?: RecordTone;
+    caption?: ReactNode;
+}
+export interface StatTilesProps {
+    items: StatTileItem[];
+    'data-testid'?: string;
+}

package/dist/patterns/StatusChip/StatusChip.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ChipProps } from '../../components';
 /** Domain-agnostic lifecycle states an admin row can be in. */
-export type StatusChipStatus = 'active' | 'archived' | 'inactive' | 'draft' | 'pending' | 'success' | 'warning' | 'danger' | 'neutral';
+export type StatusChipStatus = 'active' | 'archived' | 'inactive' | 'draft' | 'pending' | 'success' | 'warning' | 'danger' | 'neutral' | 'info' | 'violet';
 export interface StatusChipProps {
     /** Lifecycle state — selects the colour/tone only, never the text. */
     status: StatusChipStatus;
@@ -12,12 +12,12 @@ export interface StatusChipProps {
      * `'dot'` variant: a soft, radius-full pill with a leading tone dot,
      * 12px / weight-600 text, tuned for dense admin lifecycle tables.
      */
-    variant?: ChipProps['variant'] | 'dot';
+    variant?: ChipProps['variant'] | 'dot' | 'plain';
     /** Chip size. Default `'sm'`. Ignored by `variant="dot"`. */
     size?: ChipProps['size'];
     /**
      * Override the colour derived from `status`. Escape hatch for the
-     * rare state not covered by `StatusChipStatus`. Ignored by `variant="dot"`.
+     * rare state not covered by `StatusChipStatus`. Ignored by `variant="dot"` and `variant="plain"`.
      */
     color?: ChipProps['color'];
     /** Optional leading element (dot, icon). Ignored by `variant="dot"`. */

package/dist/patterns/Summary/components/ActionBar.d.ts

@@ -12,6 +12,8 @@ export interface ActionBarProps {
     cartAriaLabel: string;
     /** Optional caption rendered under the open-layer CTA (e.g. installment breakdown). */
     ctaCaption?: React.ReactNode;
+    /** Optional error rendered ABOVE the CTA, so it clears the screen edge and the thumb. */
+    ctaError?: React.ReactNode;
     /** Expand the summary — the closed-bar cart button opens it on click. */
     onToggleOpen?: () => void;
     classNames: SummaryClassNames;

package/dist/patterns/Summary/components/GrandTotalRow.d.ts

@@ -6,6 +6,7 @@ export interface GrandTotalRowProps {
         amount: Money;
     };
     locale: string;
+    compact?: boolean;
     className?: string;
 }
 export declare const GrandTotalRow: React.FC<GrandTotalRowProps>;

package/dist/patterns/Summary/components/ItemRow.d.ts

@@ -7,5 +7,6 @@ export interface ItemRowProps {
     removeAriaLabel: string;
     /** Show the per-item remove control. Defaults to `true`. */
     showRemoveButton?: boolean;
+    compact?: boolean;
 }
 export declare const ItemRow: React.FC<ItemRowProps>;

package/dist/patterns/Summary/components/SummaryBody.d.ts

@@ -9,9 +9,12 @@ export interface SummaryBodyProps {
     locale: string;
     onRemoveItem?: (id: string) => void;
     removeAriaLabel: string;
-    /** Show the per-item remove control. Defaults to `true`. */
+    onRemoveTotalRow?: (id: string) => void;
+    removeTotalRowAriaLabel: string;
+    /** Show the per-item and per-totals-row remove controls. Defaults to `true`. */
     showRemoveButton?: boolean;
     emptyState?: React.ReactNode;
+    compact?: boolean;
     classNames: SummaryClassNames;
 }
 export declare const SummaryBody: React.FC<SummaryBodyProps>;

package/dist/patterns/Summary/components/TotalsLineRow.d.ts

@@ -1,12 +1,13 @@
 import { default as React } from 'react';
-import { SummaryPostTotalRow } from '../types';
+import { SummaryTotalRow } from '../types';
 export interface TotalsLineRowProps {
-    row: SummaryPostTotalRow;
+    row: SummaryTotalRow;
     locale: string;
     emphasized: boolean;
     onRemove?: (id: string) => void;
     removeAriaLabel?: string;
     /** Show the per-row remove control. Defaults to `true`. */
     showRemoveButton?: boolean;
+    compact?: boolean;
 }
 export declare const TotalsLineRow: React.FC<TotalsLineRowProps>;