@caratlogic/design-system 0.1.30 → 0.1.31

package/dist/components/molecules/DocumentHero/DocumentHero.d.ts

@@ -1,9 +1,9 @@
 import type { ReactElement } from 'react';
 import type { DocumentHeroProps } from './DocumentHero.types';
-export type { DocumentHeroBar, DocumentHeroBarTone, DocumentHeroBreakdown, DocumentHeroMeta, DocumentHeroPayment, DocumentHeroProps, DocumentHeroSegment, DocumentHeroSegmentTone, DocumentHeroStatusTone, DocumentHeroTone, } from './DocumentHero.types';
+export type { DocumentHeroBreakdown, DocumentHeroDetail, DocumentHeroFact, DocumentHeroFactTone, DocumentHeroProgress, DocumentHeroProps, DocumentHeroSegment, DocumentHeroSegmentTone, DocumentHeroTone, } from './DocumentHero.types';
 /**
- * The top of a document detail page: its total, how much of it is settled
- * (paid, or carats returned/sold) and its key dates. Data-only.
+ * The top of a document detail page: the headline amount (balance, total, value),
+ * how much of it is settled, and the key dates and facts beside it. Data-only.
  */
-export declare function DocumentHero({ label, total, caption, captionTone, payment, bars, breakdown, meta, statusTone, className, }: DocumentHeroProps): ReactElement;
+export declare function DocumentHero({ label, labelIcon, tone, amount, amountNote, progress, breakdown, facts, details, detailsLabel, detailsIcon, className, }: DocumentHeroProps): ReactElement;
 //# sourceMappingURL=DocumentHero.d.ts.map

package/dist/components/molecules/DocumentHero/DocumentHero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentHero.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DocumentHero/DocumentHero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAyB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAgBrF,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAuC9B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAuB,EACvB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,IAAS,EACT,UAAsB,EACtB,SAAS,GACV,EAAE,iBAAiB,GAAG,YAAY,CAgIlC"}
+{"version":3,"file":"DocumentHero.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DocumentHero/DocumentHero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAIV,iBAAiB,EAElB,MAAM,sBAAsB,CAAC;AAa9B,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAqK9B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,IAAgB,EAChB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAU,EACV,OAAY,EACZ,YAAY,EACZ,WAAW,EACX,SAAS,GACV,EAAE,iBAAiB,GAAG,YAAY,CAmGlC"}

package/dist/components/molecules/DocumentHero/DocumentHero.types.d.ts

@@ -1,27 +1,23 @@
 import type { ReactNode } from 'react';
-export type DocumentHeroTone = 'default' | 'success' | 'destructive';
-/** The document's state, tinting the hero: settled, at risk, draft/void… */
-export type DocumentHeroStatusTone = 'neutral' | 'success' | 'info' | 'warning' | 'destructive' | 'muted';
-export type DocumentHeroBarTone = 'primary' | 'success' | 'info';
-export interface DocumentHeroPayment {
-    paid: ReactNode;
-    outstanding: ReactNode;
+/**
+ * The document's state: colours the heading, the bar's track and the facts panel to match its status pill.
+ * The amount itself stays neutral.
+ */
+export type DocumentHeroTone = 'default' | 'success' | 'info' | 'warning' | 'destructive' | 'muted';
+/** Colours a fact's icon tile and note; `success` also colours its value. */
+export type DocumentHeroFactTone = 'default' | 'success' | 'warning' | 'destructive';
+export interface DocumentHeroProgress {
     /** 0–100; clamped. */
     percent: number;
-    /** e.g. "39% paid · partially paid". */
-    caption?: ReactNode;
-    paidLabel?: string;
-    outstandingLabel?: string;
-}
-export interface DocumentHeroBar {
-    label: string;
-    /** Shown at the right of the bar, e.g. "5.20 ct". */
-    value: ReactNode;
-    /** 0–100; clamped. */
-    percent: number;
-    tone?: DocumentHeroBarTone;
+    /** Highlighted at the start of the line under the bar, e.g. "$2,000.00". */
+    value?: ReactNode;
+    /** Follows `value`, e.g. "paid". */
+    label?: ReactNode;
+    /** End of the line under the bar, e.g. "39%" or "4 days before due date". */
+    trailing?: ReactNode;
 }
-export type DocumentHeroSegmentTone = 'success' | 'info' | 'primary' | 'warning' | 'remaining';
+/** `primary-soft` is a lighter tint of the brand colour, for pairing with `primary` in one bar. */
+export type DocumentHeroSegmentTone = 'success' | 'info' | 'primary' | 'primary-soft' | 'warning' | 'remaining';
 export interface DocumentHeroSegment {
     label: string;
     /** Shown under the label, e.g. "4.38 ct". */
@@ -39,34 +35,45 @@ export interface DocumentHeroBreakdown {
     /** e.g. "100% settled · 4.38 ct on memo". */
     caption?: ReactNode;
 }
-export interface DocumentHeroMeta {
+export interface DocumentHeroFact {
     label: string;
     value: ReactNode;
-    /** Shows the cell in red text, e.g. an overdue due date. */
-    danger?: boolean;
-    /** Shown in muted italics when there's no value, e.g. "Not paid yet". Defaults to "Not provided". */
+    /** Icon element or a short glyph such as a currency symbol. */
+    icon: ReactNode;
+    /** Small text after the value, e.g. "in 7 days" or "6 days overdue". */
+    note?: ReactNode;
+    tone?: DocumentHeroFactTone;
+    /** Shown muted when there's no value. Defaults to "Not provided". */
+    emptyLabel?: string;
+    /** Adds a small link after the value, e.g. "View" scrolling to the payments. */
+    onAction?: () => void;
+    actionLabel?: string;
+}
+export interface DocumentHeroDetail {
+    label: string;
+    value: ReactNode;
+    /** Shown muted when there's no value. Defaults to "Not provided". */
     emptyLabel?: string;
 }
 export interface DocumentHeroProps {
-    /** e.g. "Invoice total". */
+    /** Small heading above the amount, e.g. "Balance due". */
     label: string;
-    total: ReactNode;
-    /** e.g. "USD · paid in full on 3 Oct 2026". */
-    caption?: ReactNode;
-    captionTone?: DocumentHeroTone;
-    /**
-     * Light status tint: on the payment / bars panel when there is one, else on the whole card.
-     * `destructive` on a payment also tints the progress track (e.g. overdue).
-     */
-    statusTone?: DocumentHeroStatusTone;
-    /** Paid vs outstanding with a progress bar. */
-    payment?: DocumentHeroPayment;
-    /** Carat (or any quantity) bars, e.g. on memo / returned / sold. Used when there's no `payment`. */
-    bars?: DocumentHeroBar[];
-    /** A whole split into parts on one stacked bar. Used when there's no `payment`; wins over `bars`. */
+    labelIcon?: ReactNode;
+    tone?: DocumentHeroTone;
+    amount: ReactNode;
+    /** Beside the amount, e.g. "of $5,176.50 total". */
+    amountNote?: ReactNode;
+    /** Bar under the amount, e.g. how much is paid. */
+    progress?: DocumentHeroProgress;
+    /** A whole split into parts on one stacked bar. Used instead of `progress`. */
     breakdown?: DocumentHeroBreakdown;
-    /** Key dates and facts along the bottom. */
-    meta?: DocumentHeroMeta[];
+    /** Key dates and facts, listed on the right (below on narrow screens). Keep to about four. */
+    facts?: DocumentHeroFact[];
+    /** Secondary facts (tax registration, references…) in a slim strip along the bottom. */
+    details?: DocumentHeroDetail[];
+    /** Names the details strip, e.g. "GST". */
+    detailsLabel?: string;
+    detailsIcon?: ReactNode;
     className?: string;
 }
 //# sourceMappingURL=DocumentHero.types.d.ts.map

package/dist/components/molecules/DocumentHero/DocumentHero.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentHero.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DocumentHero/DocumentHero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAErE,4EAA4E;AAC5E,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,OAAO,CAAC;AAC1G,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,SAAS,CAAC;IACvB,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,KAAK,EAAE,SAAS,CAAC;IACjB,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;AAE/F,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAC;IACjB,iFAAiF;IACjF,MAAM,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,IAAI,EAAE,uBAAuB,CAAC;CAC/B;AAED,6FAA6F;AAC7F,MAAM,WAAW,qBAAqB;IACpC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAChC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,oGAAoG;IACpG,IAAI,CAAC,EAAE,eAAe,EAAE,CAAC;IACzB,qGAAqG;IACrG,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"DocumentHero.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DocumentHero/DocumentHero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,SAAS,GACT,MAAM,GACN,SAAS,GACT,aAAa,GACb,OAAO,CAAC;AAEZ,6EAA6E;AAC7E,MAAM,MAAM,oBAAoB,GAC5B,SAAS,GACT,SAAS,GACT,SAAS,GACT,aAAa,CAAC;AAElB,MAAM,WAAW,oBAAoB;IACnC,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,mGAAmG;AACnG,MAAM,MAAM,uBAAuB,GAC/B,SAAS,GACT,MAAM,GACN,SAAS,GACT,cAAc,GACd,SAAS,GACT,WAAW,CAAC;AAEhB,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,SAAS,CAAC;IACjB,iFAAiF;IACjF,MAAM,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,IAAI,EAAE,uBAAuB,CAAC;CAC/B;AAED,6FAA6F;AAC7F,MAAM,WAAW,qBAAqB;IACpC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAChC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,IAAI,EAAE,SAAS,CAAC;IAChB,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,oDAAoD;IACpD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,8FAA8F;IAC9F,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,wFAAwF;IACxF,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/molecules/DocumentHero/DocumentHero.utils.d.ts

@@ -1,22 +1,13 @@
-import type { DocumentHeroBarTone, DocumentHeroSegment, DocumentHeroSegmentTone, DocumentHeroStatusTone, DocumentHeroTone } from './DocumentHero.types';
+import type { DocumentHeroFactTone, DocumentHeroSegment, DocumentHeroSegmentTone, DocumentHeroTone } from './DocumentHero.types';
 export declare function clampPercent(value: number): number;
-export declare function getCaptionClassName(tone: DocumentHeroTone): string;
-export declare function getBarClassName(tone: DocumentHeroBarTone): string;
+export declare function getLabelClassName(tone: DocumentHeroTone): string;
+export declare function getFactsPanelClassName(tone: DocumentHeroTone): string;
+export declare function getProgressTrackClassName(tone: DocumentHeroTone): string;
+export declare function getFactIconClassName(tone: DocumentHeroFactTone): string;
+export declare function getFactNoteClassName(tone: DocumentHeroFactTone): string;
 export declare function getSegmentClassName(tone: DocumentHeroSegmentTone): string;
 /** Each segment's width in percent of the segments' sum; all 0 when there's nothing to split. */
 export declare function getSegmentPercents(segments: DocumentHeroSegment[]): number[];
-/** A complete payment uses the brand green; a partial one the "paid" green. */
-export declare function getProgressFillClassName(percent: number): string;
-/** Background tint for the status area (the side panel, or the whole card without one). */
-export declare function getStatusTintClassName(tone: DocumentHeroStatusTone): string;
-/** The panel beside the total only takes a colour when the status has one. */
-export declare function getAsidePanelClassName(tone: DocumentHeroStatusTone): string;
 /** No value to show: blank, or the "—" placeholder apps pass. */
-export declare function isEmptyMetaValue(value: unknown): boolean;
-export declare function getProgressTrackClassName(tone: DocumentHeroStatusTone): string;
-/** Up to four meta cells per row from `md`, two on phones. */
-export declare function getMetaColumns(count: number): number;
-export declare function getMetaGridClassName(count: number): string;
-/** Hairlines by position, so they're right whether two or `cols` cells share a row. */
-export declare function getMetaCellClassName(index: number, count: number): string;
+export declare function isEmptyFactValue(value: unknown): boolean;
 //# sourceMappingURL=DocumentHero.utils.d.ts.map

package/dist/components/molecules/DocumentHero/DocumentHero.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentHero.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DocumentHero/DocumentHero.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AAE9B,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGlD;AAQD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM,CAElE;AAQD,wBAAgB,eAAe,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAEjE;AAUD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,uBAAuB,GAAG,MAAM,CAEzE;AAED,iGAAiG;AACjG,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,mBAAmB,EAAE,GAAG,MAAM,EAAE,CAI5E;AAED,+EAA+E;AAC/E,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEhE;AAYD,2FAA2F;AAC3F,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,sBAAsB,GAAG,MAAM,CAE3E;AAED,8EAA8E;AAC9E,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,sBAAsB,GAAG,MAAM,CAE3E;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAExD;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,sBAAsB,GAAG,MAAM,CAE9E;AAED,8DAA8D;AAC9D,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEpD;AASD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE1D;AAED,uFAAuF;AACvF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAWzE"}
+{"version":3,"file":"DocumentHero.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DocumentHero/DocumentHero.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AAE9B,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGlD;AAWD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM,CAEhE;AAYD,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM,CAErE;AAWD,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM,CAExE;AASD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,oBAAoB,GAAG,MAAM,CAEvE;AASD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,oBAAoB,GAAG,MAAM,CAEvE;AAWD,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,uBAAuB,GAAG,MAAM,CAEzE;AAED,iGAAiG;AACjG,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,mBAAmB,EAAE,GAAG,MAAM,EAAE,CAM5E;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAKxD"}

package/dist/components/molecules/DocumentHero/index.d.ts

@@ -1,3 +1,3 @@
 export { DocumentHero } from './DocumentHero';
-export type { DocumentHeroBar, DocumentHeroBarTone, DocumentHeroBreakdown, DocumentHeroMeta, DocumentHeroPayment, DocumentHeroProps, DocumentHeroSegment, DocumentHeroSegmentTone, DocumentHeroStatusTone, DocumentHeroTone, } from './DocumentHero';
+export type { DocumentHeroBreakdown, DocumentHeroDetail, DocumentHeroFact, DocumentHeroFactTone, DocumentHeroProgress, DocumentHeroProps, DocumentHeroSegment, DocumentHeroSegmentTone, DocumentHeroTone, } from './DocumentHero';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/DocumentHero/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DocumentHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DocumentHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,gBAAgB,CAAC"}

package/dist/components/molecules/Skeletons/Skeletons.d.ts

@@ -31,7 +31,7 @@ export declare function DetailPageSkeleton({ sections, }: {
     sections?: number;
 }): ReactElement;
 export interface DocumentDetailSkeletonProps {
-    /** Right half of the hero: paid/outstanding progress, quantity bars, or none. */
+    /** Bar under the hero amount: a payment/progress bar, quantity bars, or none. */
     aside?: 'payment' | 'bars' | 'none';
     /** Section cards below the hero (customer, items, notes…). */
     sections?: number;

package/dist/components/molecules/Skeletons/Skeletons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeletons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Skeletons/Skeletons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,oDAAoD;AACpD,wBAAgB,aAAa,IAAI,YAAY,CAO5C;AAED,MAAM,WAAW,4BAA4B;IAC3C,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;IACpC,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,MAAU,EACV,OAAW,EACX,MAAc,EACd,WAAkB,GACnB,EAAE,4BAA4B,GAAG,YAAY,CAwC7C;AAED,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAa3E;AAED,2GAA2G;AAC3G,wBAAgB,iBAAiB,CAAC,EAAE,IAAS,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAS/G;AAED,qFAAqF;AACrF,wBAAgB,kBAAkB,CAAC,EACjC,QAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,YAAY,CAkCf;AAED,MAAM,WAAW,2BAA2B;IAC1C,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,sGAAsG;AACtG,wBAAgB,sBAAsB,CAAC,EACrC,KAAiB,EACjB,QAAY,EACZ,KAA0B,GAC3B,EAAE,2BAA2B,GAAG,YAAY,CAoF5C"}
+{"version":3,"file":"Skeletons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Skeletons/Skeletons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,oDAAoD;AACpD,wBAAgB,aAAa,IAAI,YAAY,CAO5C;AAED,MAAM,WAAW,4BAA4B;IAC3C,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;IACpC,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,MAAU,EACV,OAAW,EACX,MAAc,EACd,WAAkB,GACnB,EAAE,4BAA4B,GAAG,YAAY,CAwC7C;AAED,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAa3E;AAED,2GAA2G;AAC3G,wBAAgB,iBAAiB,CAAC,EAAE,IAAS,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAS/G;AAED,qFAAqF;AACrF,wBAAgB,kBAAkB,CAAC,EACjC,QAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,YAAY,CAkCf;AAED,MAAM,WAAW,2BAA2B;IAC1C,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,sGAAsG;AACtG,wBAAgB,sBAAsB,CAAC,EACrC,KAAiB,EACjB,QAAY,EACZ,KAA0B,GAC3B,EAAE,2BAA2B,GAAG,YAAY,CA8D5C"}

package/dist/index.cjs.js

@@ -15473,7 +15473,7 @@ const CollapsibleCard = ({ title, subtitle, icon, headerActions, defaultOpen = t
 
 /** A titled card on a document detail page: payments, customer, items, notes… */
 function DetailSection({ icon, title, count, actions, children, className, bodyClassName, }) {
-    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxRuntime.jsxs("header", { className: "flex flex-wrap items-center gap-2.5 border-b border-border px-4 py-3", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary dark:bg-primary/20 [&_svg]:size-4", children: icon }), jsxRuntime.jsx("h3", { className: "m-0 text-base font-semibold text-foreground", children: title }), typeof count === 'string' || typeof count === 'number' ? (jsxRuntime.jsx(Badge, { appearance: "soft", color: "secondary", shape: "pill", size: "sm", children: count })) : (count), actions ? jsxRuntime.jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2.5", children: actions }) : null] }), children != null ? jsxRuntime.jsx("div", { className: bodyClassName, children: children }) : null] }));
+    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxRuntime.jsxs("header", { className: "flex flex-wrap items-center gap-2.5 border-b border-border bg-section-header px-4 py-3", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary dark:bg-primary/20 [&_svg]:size-4", children: icon }), jsxRuntime.jsx("h3", { className: "m-0 text-base font-semibold text-foreground", children: title }), typeof count === 'string' || typeof count === 'number' ? (jsxRuntime.jsx(Badge, { appearance: "soft", color: "secondary", shape: "pill", size: "sm", children: count })) : (count), actions ? jsxRuntime.jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2.5", children: actions }) : null] }), children != null ? jsxRuntime.jsx("div", { className: bodyClassName, children: children }) : null] }));
 }
 
 const HEADER_TONE_CLASSES = {
@@ -37242,26 +37242,63 @@ function clampPercent$1(value) {
         return 0;
     return Math.min(100, Math.max(0, value));
 }
-const CAPTION_TONE = {
-    default: 'text-muted-foreground',
+const LABEL_TONE = {
+    default: 'text-secondary-foreground',
     success: 'text-amount-paid',
+    info: 'text-info',
+    warning: 'text-badge-amber-text',
     destructive: 'text-amount-outstanding',
+    muted: 'text-secondary-foreground',
 };
-function getCaptionClassName(tone) {
-    return CAPTION_TONE[tone];
+function getLabelClassName(tone) {
+    return LABEL_TONE[tone];
 }
-const BAR_TONE = {
-    primary: 'bg-primary',
-    success: 'bg-success',
-    info: 'bg-info',
+/** The lightest wash of the status colour, matching the document's status pill. */
+const PANEL_TONE = {
+    default: 'bg-muted/40',
+    success: 'bg-primary/5 dark:bg-primary/10',
+    info: 'bg-info/5 dark:bg-info/10',
+    warning: 'bg-warning/5 dark:bg-warning/10',
+    destructive: 'bg-destructive/5 dark:bg-destructive/10',
+    muted: 'bg-muted/40',
 };
-function getBarClassName(tone) {
-    return BAR_TONE[tone];
+function getFactsPanelClassName(tone) {
+    return PANEL_TONE[tone];
+}
+const TRACK_TONE = {
+    default: 'bg-progress-track',
+    success: 'bg-progress-track',
+    info: 'bg-info/15',
+    warning: 'bg-warning/15',
+    destructive: 'bg-destructive/15',
+    muted: 'bg-progress-track',
+};
+function getProgressTrackClassName(tone) {
+    return TRACK_TONE[tone];
+}
+const FACT_ICON_TONE = {
+    default: 'bg-muted text-muted-foreground',
+    success: 'bg-badge-green-bg text-amount-paid',
+    warning: 'bg-badge-amber-bg text-badge-amber-text',
+    destructive: 'bg-badge-destructive-bg text-amount-outstanding',
+};
+function getFactIconClassName(tone) {
+    return FACT_ICON_TONE[tone];
+}
+const FACT_NOTE_TONE = {
+    default: 'text-muted-foreground',
+    success: 'text-amount-paid',
+    warning: 'text-badge-amber-text',
+    destructive: 'text-amount-outstanding',
+};
+function getFactNoteClassName(tone) {
+    return FACT_NOTE_TONE[tone];
 }
 const SEGMENT_TONE = {
     success: 'bg-success',
     info: 'bg-info',
     primary: 'bg-primary',
+    'primary-soft': 'bg-primary/40',
     warning: 'bg-warning',
     remaining: 'bg-progress-track',
 };
@@ -37270,82 +37307,47 @@ function getSegmentClassName$1(tone) {
 }
 /** Each segment's width in percent of the segments' sum; all 0 when there's nothing to split. */
 function getSegmentPercents(segments) {
-    const amounts = segments.map((segment) => (Number.isFinite(segment.amount) ? Math.max(0, segment.amount) : 0));
+    const amounts = segments.map((segment) => Number.isFinite(segment.amount) ? Math.max(0, segment.amount) : 0);
     const whole = amounts.reduce((sum, amount) => sum + amount, 0);
     return amounts.map((amount) => (whole > 0 ? (amount / whole) * 100 : 0));
 }
-/** A complete payment uses the brand green; a partial one the "paid" green. */
-function getProgressFillClassName(percent) {
-    return percent >= 100 ? 'bg-primary' : 'bg-amount-paid';
-}
-/** The lightest wash of the status colour, so the panel reads like the header pill without shouting. */
-const STATUS_TINT = {
-    neutral: '',
-    success: 'bg-success/5 dark:bg-success/10',
-    info: 'bg-info/5 dark:bg-info/10',
-    warning: 'bg-warning/5 dark:bg-warning/10',
-    destructive: 'bg-destructive/5 dark:bg-destructive/10',
-    muted: 'bg-muted/40',
-};
-/** Background tint for the status area (the side panel, or the whole card without one). */
-function getStatusTintClassName(tone) {
-    return STATUS_TINT[tone];
-}
-/** The panel beside the total only takes a colour when the status has one. */
-function getAsidePanelClassName(tone) {
-    return STATUS_TINT[tone];
-}
 /** No value to show: blank, or the "—" placeholder apps pass. */
-function isEmptyMetaValue(value) {
-    return value == null || (typeof value === 'string' && (value.trim() === '' || value.trim() === '—'));
-}
-function getProgressTrackClassName(tone) {
-    return tone === 'destructive' ? 'bg-destructive/15' : 'bg-progress-track';
-}
-/** Up to four meta cells per row from `md`, two on phones. */
-function getMetaColumns(count) {
-    return Math.min(4, Math.max(1, count));
-}
-const MD_COLS = {
-    1: 'md:grid-cols-1',
-    2: 'md:grid-cols-2',
-    3: 'md:grid-cols-3',
-    4: 'md:grid-cols-4',
-};
-function getMetaGridClassName(count) {
-    return `grid grid-cols-2 ${MD_COLS[getMetaColumns(count)]}`;
-}
-/** Hairlines by position, so they're right whether two or `cols` cells share a row. */
-function getMetaCellClassName(index, count) {
-    const cols = getMetaColumns(count);
-    return [
-        'min-w-0 border-border px-5 py-3',
-        index % 2 === 1 ? 'border-l' : '',
-        index >= 2 ? 'border-t' : '',
-        index % cols === 0 ? 'md:border-l-0' : 'md:border-l',
-        index >= cols ? 'md:border-t' : 'md:border-t-0',
-    ]
-        .filter(Boolean)
-        .join(' ');
+function isEmptyFactValue(value) {
+    return (value == null ||
+        (typeof value === 'string' && (value.trim() === '' || value.trim() === '—')));
 }
 
-function BreakdownPanel({ breakdown }) {
+function ProgressBar({ progress, tone, name, }) {
+    const percent = clampPercent$1(progress.percent);
+    return (jsxRuntime.jsxs("div", { className: "mt-4 w-full max-w-xl", children: [jsxRuntime.jsx("div", { role: "progressbar", "aria-label": name, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, className: cn('h-2 overflow-hidden rounded-full', getProgressTrackClassName(tone)), children: jsxRuntime.jsx("div", { className: "h-full rounded-full bg-primary", style: { width: `${percent}%` } }) }), progress.value != null ||
+                progress.label != null ||
+                progress.trailing != null ? (jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between gap-3 text-xs", children: [jsxRuntime.jsxs("span", { className: "text-secondary-foreground", children: [progress.value != null ? (jsxRuntime.jsx("span", { className: "font-semibold tabular-nums text-amount-paid", children: progress.value })) : null, progress.value != null && progress.label != null ? ' ' : null, progress.label] }), progress.trailing != null ? (jsxRuntime.jsx("span", { className: "text-right tabular-nums text-secondary-foreground", children: progress.trailing })) : null] })) : null] }));
+}
+function BreakdownBar({ breakdown, }) {
     const percents = getSegmentPercents(breakdown.segments);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dl", { className: "m-0 grid grid-flow-col auto-cols-fr gap-4", children: breakdown.segments.map((segment) => (jsxRuntime.jsxs("div", { className: "min-w-0", children: [jsxRuntime.jsxs("dt", { className: "flex items-center gap-1.5 text-xs text-label-subtle", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', getSegmentClassName$1(segment.tone)) }), segment.label] }), jsxRuntime.jsx("dd", { className: "m-0 text-lg font-semibold tabular-nums text-foreground", children: segment.value })] }, segment.label))) }), jsxRuntime.jsx("div", { role: "img", "aria-label": `${breakdown.label}: ${breakdown.segments
+    return (jsxRuntime.jsxs("div", { className: "mt-4 w-full max-w-xl", children: [jsxRuntime.jsx("dl", { className: "m-0 grid grid-flow-col auto-cols-fr gap-4", children: breakdown.segments.map((segment) => (jsxRuntime.jsxs("div", { className: "min-w-0", children: [jsxRuntime.jsxs("dt", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: cn('h-1.5 w-3 shrink-0 rounded-full', getSegmentClassName$1(segment.tone), segment.tone === 'remaining' &&
+                                        'ring-1 ring-inset ring-border') }), segment.label] }), jsxRuntime.jsx("dd", { className: "m-0 text-base font-semibold tabular-nums text-foreground", children: segment.value })] }, segment.label))) }), jsxRuntime.jsx("div", { role: "img", "aria-label": `${breakdown.label}: ${breakdown.segments
                     .map((segment, index) => `${segment.label} ${Math.round(percents[index])}%`)
-                    .join(', ')}`, className: "mb-2 mt-3 flex h-2 overflow-hidden rounded-full bg-progress-track", children: breakdown.segments.map((segment, index) => segment.tone === 'remaining' || percents[index] === 0 ? null : (jsxRuntime.jsx("div", { className: cn('h-full', getSegmentClassName$1(segment.tone)), style: { width: `${percents[index]}%` } }, segment.label))) }), breakdown.caption ? jsxRuntime.jsx("p", { className: "m-0 text-xs text-muted-foreground", children: breakdown.caption }) : null] }));
+                    .join(', ')}`, className: "mt-3 flex h-2 overflow-hidden rounded-full bg-progress-track", children: breakdown.segments.map((segment, index) => segment.tone === 'remaining' || percents[index] === 0 ? null : (jsxRuntime.jsx("div", { className: cn('h-full', getSegmentClassName$1(segment.tone)), style: { width: `${percents[index]}%` } }, segment.label))) }), breakdown.caption ? (jsxRuntime.jsx("p", { className: "m-0 mt-2 text-xs text-secondary-foreground", children: breakdown.caption })) : null] }));
+}
+function FactRow({ fact }) {
+    const tone = fact.tone ?? 'default';
+    const empty = isEmptyFactValue(fact.value);
+    return (jsxRuntime.jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: cn('flex size-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold [&_svg]:size-3.5', getFactIconClassName(tone)), children: fact.icon }), jsxRuntime.jsx("dt", { className: "min-w-0 flex-1 text-sm text-secondary-foreground", children: fact.label }), jsxRuntime.jsxs("dd", { className: "m-0 flex min-w-0 flex-wrap items-baseline justify-end gap-x-2 text-right", children: [empty ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-muted-foreground", children: fact.emptyLabel ?? 'Not provided' })) : (jsxRuntime.jsx("span", { className: cn('break-words text-sm font-semibold tabular-nums', tone === 'success' ? 'text-amount-paid' : 'text-foreground'), children: fact.value })), fact.note ? (jsxRuntime.jsx("span", { className: cn('text-xs font-medium', getFactNoteClassName(tone)), children: fact.note })) : null, fact.onAction ? (jsxRuntime.jsx("button", { type: "button", onClick: fact.onAction, className: "text-xs font-medium text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: fact.actionLabel ?? 'View' })) : null] })] }));
 }
 /**
- * The top of a document detail page: its total, how much of it is settled
- * (paid, or carats returned/sold) and its key dates. Data-only.
+ * The top of a document detail page: the headline amount (balance, total, value),
+ * how much of it is settled, and the key dates and facts beside it. Data-only.
  */
-function DocumentHero({ label, total, caption, captionTone = 'default', payment, bars, breakdown, meta = [], statusTone = 'neutral', className, }) {
-    const hasAside = !!payment || !!breakdown || (bars?.length ?? 0) > 0;
-    const percent = payment ? clampPercent$1(payment.percent) : 0;
-    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxRuntime.jsxs("div", { className: cn('grid grid-cols-1', hasAside ? 'md:grid-cols-[1fr_1.25fr]' : getStatusTintClassName(statusTone)), children: [jsxRuntime.jsxs("div", { className: "min-w-0 px-5 py-4", children: [jsxRuntime.jsx("p", { className: "m-0 text-xs text-label-subtle", children: label }), jsxRuntime.jsx("p", { className: "m-0 mt-1 break-words text-4xl font-semibold leading-none tracking-tight tabular-nums text-foreground", children: total }), caption ? jsxRuntime.jsx("p", { className: cn('m-0 mt-2 text-xs', getCaptionClassName(captionTone)), children: caption }) : null] }), payment ? (jsxRuntime.jsxs("div", { className: cn('min-w-0 border-t border-border px-5 py-4 md:border-l md:border-t-0', getAsidePanelClassName(statusTone)), children: [jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [jsxRuntime.jsxs("div", { className: "min-w-0", children: [jsxRuntime.jsx("span", { className: "text-xs text-label-subtle", children: payment.paidLabel ?? 'Amount paid' }), jsxRuntime.jsx("p", { className: "m-0 text-lg font-semibold tabular-nums text-amount-paid", children: payment.paid })] }), jsxRuntime.jsxs("div", { className: "min-w-0 text-right", children: [jsxRuntime.jsx("span", { className: "text-xs text-label-subtle", children: payment.outstandingLabel ?? 'Outstanding' }), jsxRuntime.jsx("p", { className: "m-0 text-lg font-semibold tabular-nums text-amount-outstanding", children: payment.outstanding })] })] }), jsxRuntime.jsx("div", { role: "progressbar", "aria-label": payment.paidLabel ?? 'Amount paid', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, className: cn('mb-2 mt-3 h-2 overflow-hidden rounded-full', getProgressTrackClassName(statusTone)), children: jsxRuntime.jsx("div", { className: cn('h-full rounded-full', getProgressFillClassName(percent)), style: { width: `${percent}%` } }) }), payment.caption ? jsxRuntime.jsx("p", { className: "m-0 text-xs text-muted-foreground", children: payment.caption }) : null] })) : breakdown ? (jsxRuntime.jsx("div", { className: cn('min-w-0 border-t border-border px-5 py-4 md:border-l md:border-t-0', getAsidePanelClassName(statusTone)), children: jsxRuntime.jsx(BreakdownPanel, { breakdown: breakdown }) })) : bars && bars.length > 0 ? (jsxRuntime.jsx("div", { className: cn('flex min-w-0 flex-col gap-3 border-t border-border px-5 py-4 md:border-l md:border-t-0', getAsidePanelClassName(statusTone)), children: bars.map((bar) => {
-                            const barPercent = clampPercent$1(bar.percent);
-                            return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-1 flex justify-between gap-3 text-xs", children: [jsxRuntime.jsx("span", { className: "text-muted-foreground", children: bar.label }), jsxRuntime.jsx("span", { className: "font-medium tabular-nums text-foreground", children: bar.value })] }), jsxRuntime.jsx("div", { role: "progressbar", "aria-label": bar.label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": barPercent, className: "h-2 overflow-hidden rounded-full bg-muted", children: jsxRuntime.jsx("div", { className: cn('h-full rounded-full', getBarClassName(bar.tone ?? 'primary')), style: { width: `${barPercent}%` } }) })] }, bar.label));
-                        }) })) : null] }), meta.length > 0 ? (jsxRuntime.jsx("dl", { className: cn('m-0 border-t border-border', getMetaGridClassName(meta.length)), children: meta.map((item, index) => (jsxRuntime.jsxs("div", { className: getMetaCellClassName(index, meta.length), children: [jsxRuntime.jsx("dt", { className: cn('text-xs font-semibold uppercase tracking-wider', item.danger ? 'text-amount-outstanding' : 'text-label-subtle'), children: item.label }), isEmptyMetaValue(item.value) ? (jsxRuntime.jsx("dd", { className: "m-0 mt-1 text-sm italic text-muted-foreground", children: item.emptyLabel ?? 'Not provided' })) : (jsxRuntime.jsx("dd", { className: cn('m-0 mt-1 break-words text-sm font-medium', item.danger ? 'text-amount-outstanding' : 'text-foreground'), children: item.value }))] }, item.label))) })) : null] }));
+function DocumentHero({ label, labelIcon, tone = 'default', amount, amountNote, progress, breakdown, facts = [], details = [], detailsLabel, detailsIcon, className, }) {
+    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxRuntime.jsxs("div", { className: cn('grid grid-cols-1', facts.length > 0 && 'md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]'), children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col justify-center px-5 py-4 sm:px-7 sm:py-4", children: [jsxRuntime.jsxs("p", { className: cn('m-0 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider [&_svg]:size-3.5', getLabelClassName(tone)), children: [labelIcon, label] }), jsxRuntime.jsxs("div", { className: "mt-1.5 flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [jsxRuntime.jsx("span", { className: "break-all text-4xl font-semibold leading-none tracking-tight tabular-nums text-foreground sm:text-[2.75rem]", children: amount }), amountNote ? (jsxRuntime.jsx("span", { className: "text-sm text-secondary-foreground", children: amountNote })) : null] }), breakdown ? (jsxRuntime.jsx(BreakdownBar, { breakdown: breakdown })) : progress ? (jsxRuntime.jsx(ProgressBar, { progress: progress, tone: tone, name: label })) : null] }), facts.length > 0 ? (jsxRuntime.jsx("dl", { className: cn('m-0 flex min-w-0 flex-col justify-center border-t border-border px-5 py-2 md:border-l md:border-t-0', getFactsPanelClassName(tone)), children: facts.map((fact) => (jsxRuntime.jsx(FactRow, { fact: fact }, fact.label))) })) : null] }), details.length > 0 ? (jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5 border-t border-border px-5 py-2.5 text-xs sm:px-7", children: [detailsLabel ? (jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded bg-muted px-1.5 py-0.5 font-semibold text-secondary-foreground [&_svg]:size-3", children: [detailsIcon, detailsLabel] })) : null, jsxRuntime.jsx("dl", { className: "m-0 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5", children: details.map((detail, index) => {
+                            const empty = isEmptyFactValue(detail.value);
+                            return (jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-x-3", children: [index > 0 ? (jsxRuntime.jsx("span", { "aria-hidden": true, className: "h-3 w-px shrink-0 bg-border" })) : null, jsxRuntime.jsxs("div", { className: "flex min-w-0 items-baseline gap-1.5", children: [jsxRuntime.jsx("dt", { className: "whitespace-nowrap text-muted-foreground", children: detail.label }), jsxRuntime.jsx("dd", { className: cn('m-0 break-words', empty
+                                                    ? 'italic text-label-subtle'
+                                                    : 'font-medium text-foreground'), children: empty
+                                                    ? (detail.emptyLabel ?? 'Not provided')
+                                                    : detail.value })] })] }, detail.label));
+                        }) })] })) : null] }));
 }
 
 const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
@@ -67516,7 +67518,7 @@ function DetailPageSkeleton({ sections = 3, }) {
 }
 /** Document detail page (invoice, memo…): header, `DocumentHero` and `DetailSection` placeholders. */
 function DocumentDetailSkeleton({ aside = 'payment', sections = 3, label = 'Loading document', }) {
-    return (jsxRuntime.jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsxRuntime.jsx("span", { className: "h-5 w-px bg-border" }), jsxRuntime.jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsxRuntime.jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxRuntime.jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxRuntime.jsxs("div", { className: cn('grid grid-cols-1', aside !== 'none' && 'md:grid-cols-[1fr_1.25fr]'), children: [jsxRuntime.jsxs("div", { className: "space-y-3 px-5 py-4", children: [jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 180, rounded: "md" }), jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 200, rounded: "full" })] }), aside === 'payment' && (jsxRuntime.jsxs("div", { className: "space-y-3 border-t border-border px-5 py-4 md:border-l md:border-t-0", children: [jsxRuntime.jsxs("div", { className: "flex justify-between gap-4", children: [jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 80, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 20, width: 104, rounded: "md" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-end space-y-1.5", children: [jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 80, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 20, width: 104, rounded: "md" })] })] }), jsxRuntime.jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 160, rounded: "full" })] })), aside === 'bars' && (jsxRuntime.jsx("div", { className: "space-y-3 border-t border-border px-5 py-4 md:border-l md:border-t-0", children: [0, 1, 2].map((i) => (jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsxs("div", { className: "flex justify-between", children: [jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 96, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 56, rounded: "full" })] }), jsxRuntime.jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" })] }, i))) }))] }), jsxRuntime.jsx("div", { className: "grid grid-cols-2 border-t border-border md:grid-cols-4", children: [0, 1, 2, 3].map((i) => (jsxRuntime.jsxs("div", { className: "space-y-2 border-border px-5 py-3 even:border-l [&:nth-child(n+3)]:border-t md:border-l md:first:border-l-0 md:[&:nth-child(n+3)]:border-t-0", children: [jsxRuntime.jsx(SquareSkeleton, { height: 10, width: 56, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 14, width: 96, rounded: "full" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxRuntime.jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsxRuntime.jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsxRuntime.jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsxRuntime.jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsxRuntime.jsx("span", { className: "sr-only", children: label })] }));
+    return (jsxRuntime.jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsxRuntime.jsx("span", { className: "h-5 w-px bg-border" }), jsxRuntime.jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsxRuntime.jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxRuntime.jsxs("section", { "aria-hidden": "true", className: "grid grid-cols-1 overflow-hidden rounded-2xl border border-border bg-card md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]", children: [jsxRuntime.jsxs("div", { className: "flex flex-col justify-center space-y-3 px-5 py-4 sm:px-7 sm:py-4", children: [jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 40, width: 220, rounded: "md" }), aside !== 'none' && (jsxRuntime.jsxs("div", { className: "w-full max-w-xl space-y-2 pt-1", children: [jsxRuntime.jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsxRuntime.jsxs("div", { className: "flex justify-between", children: [jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 88, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 40, rounded: "full" })] })] }))] }), jsxRuntime.jsx("div", { className: "border-t border-border bg-muted/40 px-5 py-2 md:border-l md:border-t-0", children: [0, 1, 2, 3].map((i) => (jsxRuntime.jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsxRuntime.jsx(SquareSkeleton, { height: 24, width: 24, rounded: "md" }), jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 72, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 88, rounded: "full", className: "ml-auto" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxRuntime.jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsxRuntime.jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsxRuntime.jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsxRuntime.jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsxRuntime.jsx("span", { className: "sr-only", children: label })] }));
 }
 
 const SlideOut = ({ open, onOpenChange, ...props }) => {