@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-D4BCQICM.js

@@ -0,0 +1,765 @@
+import { Amount, PriceRow } from './chunk-GVQQG435.js';
+import { DescriptionList } from './chunk-PFLNFIVB.js';
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, View, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { dateZone, dayLabel } from '@btndprojects/loam-date';
+import { INVOICE_STATUS, invoiceStatusLabel, taxModeText, currencyName } from '@btndprojects/loam-pay';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/invoice/invoice-labels.ts
+var DEFAULT_LABELS = {
+  name: "Name",
+  address: "Address",
+  vat: "VAT",
+  registration: "Registration",
+  contact: "Contact",
+  sellerVat: (v) => `VAT ${v}`,
+  sellerReg: (r) => `Reg. ${r}`,
+  title: "Invoice",
+  billedTo: "Billed to",
+  dates: "Dates",
+  references: "References",
+  issued: "Issued",
+  due: "Due",
+  terms: "Terms",
+  invoice: "Invoice",
+  po: "PO",
+  taxMode: "Tax mode",
+  currency: "Currency",
+  currencyLine: (code, name) => `${code} \xB7 ${name}`,
+  linesTitle: (code) => `Lines \xB7 all amounts in ${code}`,
+  colDescription: "Description",
+  colQty: "Qty",
+  colUnit: "Unit",
+  colTax: "Tax",
+  colAmount: "Amount",
+  noLines: "This invoice has no lines.",
+  linesCaption: (n) => `Lines on invoice ${n}`,
+  howToPay: "How to pay",
+  iban: "IBAN",
+  bic: "BIC / SWIFT",
+  reference: "Reference",
+  payableBy: "Payable by",
+  payByCard: "Pay by card instead",
+  totals: "Totals",
+  subtotal: "Subtotal",
+  discount: "Discount",
+  discountPercent: (label, pct) => `${label} \xB7 ${pct}%`,
+  net: "Net",
+  taxable: "Taxable amount",
+  taxIncluded: (l) => `${l} \xB7 included above`,
+  taxZeroRated: (l, mode) => `${l} \xB7 ${mode.toLowerCase()}`,
+  payment: (label, date) => `${label} \xB7 ${date}`,
+  total: "Total",
+  amountDue: "Amount due",
+  taxModeFooter: (name, note) => `${name} \u2014 ${note}`,
+  downloadPdf: "Download PDF",
+  lineQty: (qty) => `${qty} \xD7`,
+  lineTax: (rate) => `\xB7 ${rate}% tax`,
+  print: "Print"
+};
+function InvoiceStatusStamp({
+  stamp: value,
+  size = "md",
+  variant = "soft",
+  count,
+  loading = false,
+  error = false,
+  style,
+  motion = "full"
+}) {
+  const theme = useLoamTheme("invoice");
+  const level = useResolvedMotion(motion, "invoice");
+  const land = React.useRef(new Animated.Value(1)).current;
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    if (level !== "full") return;
+    land.setValue(0);
+    const run = Animated.spring(land, {
+      ...springConfig(theme, "fs"),
+      toValue: 1,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, [value.tone, value.label]);
+  const { styles } = useStyles(sheet);
+  const plate = stampPlate(theme, error ? "danger" : value.tone);
+  const word = typeof error === "string" && error ? error : value.label;
+  const text = count != null ? `${word} \xB7 ${count}` : word;
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { "aria-busy": true, accessibilityState: { busy: true }, style, children: /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rect",
+        radius: "md",
+        height: size === "lg" ? theme.space[40] : theme.space[28],
+        width: size === "lg" ? theme.space[96] : theme.space[72]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: `invoice-stamp-${value.tone}`,
+      accessibilityRole: "text",
+      accessibilityLabel: text,
+      "aria-invalid": error || void 0,
+      style: [
+        styles.stamp,
+        size === "lg" ? styles.stampLg : styles.stampMd,
+        {
+          borderColor: plate.edge,
+          backgroundColor: variant === "outline" ? "transparent" : plate.fill
+        },
+        {
+          opacity: land.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }),
+          transform: [
+            { scale: land.interpolate({ inputRange: [0, 1], outputRange: [STAMP_FROM, 1] }) }
+          ]
+        },
+        style
+      ],
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            styles.stampLabel,
+            size === "lg" ? styles.stampLabelLg : styles.stampLabelMd,
+            { color: plate.ink }
+          ],
+          children: text
+        }
+      )
+    }
+  );
+}
+var STAMP_FROM = 0.9;
+function stampPlate(theme, tone) {
+  switch (tone) {
+    case "good":
+      return { fill: theme.color.goodSoft, edge: theme.color.good, ink: theme.color.goodOnSoft };
+    case "warn":
+      return { fill: theme.color.warnSoft, edge: theme.color.warn, ink: theme.color.warnOnSoft };
+    case "danger":
+      return {
+        fill: theme.color.dangerSoft,
+        edge: theme.color.danger,
+        ink: theme.color.dangerOnSoft
+      };
+    case "info":
+    default:
+      return { fill: theme.color.infoSoft, edge: theme.color.info, ink: theme.color.infoOnSoft };
+  }
+}
+function InvoiceStatusBadge({
+  status,
+  label,
+  size = "sm",
+  variant = "soft",
+  count,
+  motion = "full",
+  loading = false,
+  error = false,
+  labels
+}) {
+  const pay = usePayLabels(labels);
+  const theme = useLoamTheme("invoice");
+  const meta = INVOICE_STATUS[status];
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        "aria-busy": true,
+        accessibilityState: { busy: true },
+        style: {
+          alignSelf: "flex-start",
+          borderRadius: theme.radius.full,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.color.border,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rect",
+            radius: "full",
+            height: size === "md" ? theme.space[24] : theme.space[20],
+            width: theme.space[64]
+          }
+        )
+      }
+    );
+  }
+  const text = typeof error === "string" && error ? error : label ?? invoiceStatusLabel(status, pay);
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: error ? "danger" : meta.tone,
+      size,
+      outline: variant === "outline",
+      motion,
+      accessibilityLabel: error ? `${text}, error` : void 0,
+      children: count != null ? `${text} \xB7 ${count}` : text
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  stamp: {
+    alignSelf: "flex-start",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    // The static thick weight: the plate outline is part of the drawing.
+    borderWidth: theme.borderWidth.thick
+  },
+  stampMd: { paddingHorizontal: theme.space.s3, paddingVertical: theme.space.s1 },
+  stampLg: { paddingHorizontal: theme.space.s4, paddingVertical: theme.space.s2 },
+  stampLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    textTransform: "uppercase"
+  },
+  stampLabelMd: {
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.tracking.wide
+  },
+  stampLabelLg: {
+    fontSize: theme.fontSize[17],
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.tracking.wider
+  }
+}));
+function discountLabel(discounts, labels = DEFAULT_LABELS) {
+  const list = discounts ?? [];
+  if (list.length === 0) return labels.discount;
+  return list.map((d) => d.kind === "pct" ? labels.discountPercent(d.label, d.value) : d.label).join(" \xB7 ");
+}
+function InvoiceDocument({
+  invoice,
+  totals: t,
+  stamp,
+  dense = false,
+  showPayAction = false,
+  locale: localeProp,
+  zone,
+  roll = true,
+  onPay,
+  onDownloadPdf,
+  title: titleProp,
+  payLabel: payLabelProp,
+  payBusy = false,
+  labels: labelsProp,
+  style,
+  motion = "full",
+  platform: _platform,
+  tone,
+  error
+}) {
+  const labels = useLabels("invoice", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const contextLocale = useLoamLocale();
+  const locale = localeProp ?? contextLocale;
+  const title = titleProp ?? labels.title;
+  const payLabel = payLabelProp ?? labels.payByCard;
+  const theme = useLoamTheme("invoice");
+  const { styles } = useStyles(sheet2);
+  const Z = zone ?? dateZone();
+  const tinted = Boolean(error) || tone !== void 0 && tone !== "neutral";
+  const muted = tinted ? { color: theme.color.text2 } : null;
+  const day = (ms) => dayLabel(Z, ms, { longMonth: true, locale });
+  const cy = invoice.currency;
+  const mode = taxModeText(invoice.taxMode, pay);
+  const zeroRated = invoice.taxMode === "reverse" || invoice.taxMode === "exempt";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "region",
+      accessibilityLabel: `${title} ${invoice.number}`,
+      style: [
+        styles.doc,
+        dense ? styles.docDense : null,
+        // An error paints the plate danger, whatever tone it was given: the
+        // danger ink is measured against its own tint, not another tone's.
+        error ? docTone(theme, "danger") : tone ? docTone(theme, tone) : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.sellerBlock, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.sellerName, children: invoice.seller.name }),
+            /* @__PURE__ */ jsx(Text, { style: styles.sellerAddr, children: invoice.seller.addr }),
+            invoice.seller.vat ? /* @__PURE__ */ jsx(Text, { style: [styles.sellerMeta, muted], children: labels.sellerVat(invoice.seller.vat) }) : null,
+            invoice.seller.reg ? /* @__PURE__ */ jsx(Text, { style: [styles.sellerMeta, muted], children: labels.sellerReg(invoice.seller.reg) }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: styles.titleBlock, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+              /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.docTitle, children: title }),
+              onDownloadPdf ? (
+                // Refinement 12: Download is a ghost sm icon button in the header.
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    accessibilityLabel: labels.downloadPdf,
+                    leadingIcon: "download",
+                    onPress: onDownloadPdf
+                  }
+                )
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number }),
+            /* @__PURE__ */ jsx(InvoiceStatusStamp, { stamp, size: "lg", motion })
+          ] })
+        ] }),
+        error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: [styles.mono, { color: theme.color.dangerOnSoft }], children: error }) : null,
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.billedTo, children: /* @__PURE__ */ jsx(
+          DescriptionList,
+          {
+            layout: "inline",
+            density: "compact",
+            items: partyEntries(invoice.buyer, styles.mono, labels)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.dates, children: /* @__PURE__ */ jsx(
+          DescriptionList,
+          {
+            layout: "inline",
+            density: "compact",
+            items: [
+              { term: labels.issued, description: day(invoice.issued) },
+              {
+                term: labels.due,
+                description: /* @__PURE__ */ jsx(Text, { style: styles.strongValue, children: day(invoice.due) })
+              },
+              { term: labels.terms, description: invoice.terms }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.references, children: /* @__PURE__ */ jsx(
+          DescriptionList,
+          {
+            layout: "inline",
+            density: "compact",
+            items: [
+              {
+                term: labels.invoice,
+                description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number })
+              },
+              ...invoice.po ? [{ term: labels.po, description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.po }) }] : [],
+              { term: labels.taxMode, description: mode.label },
+              {
+                term: labels.currency,
+                description: labels.currencyLine(t.c.code, currencyName(t.c.code, pay))
+              }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.linesTitle(t.c.code), children: t.lines.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.empty, muted], children: labels.noLines }) : /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.lines, children: t.lines.map((line, index) => /* @__PURE__ */ jsxs(
+          View,
+          {
+            role: "listitem",
+            style: [styles.line, dense ? styles.lineDense : null],
+            children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.lineDesc, children: line.desc }),
+              line.detail ? /* @__PURE__ */ jsx(Text, { style: [styles.lineDetail, muted], children: line.detail }) : null,
+              /* @__PURE__ */ jsxs(View, { style: styles.lineFoot, children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.lineMeta, children: labels.lineQty(line.qty) }),
+                /* @__PURE__ */ jsx(Amount, { minor: line.unit, currency: cy, size: "sm", noSymbol: true, locale }),
+                /* @__PURE__ */ jsx(Text, { style: styles.lineMeta, children: labels.lineTax(zeroRated ? 0 : line.tax) }),
+                /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(
+                  Amount,
+                  {
+                    minor: line.amount,
+                    currency: cy,
+                    size: "sm",
+                    weight: "bold",
+                    noSymbol: true,
+                    locale,
+                    align: "end"
+                  }
+                ) })
+              ] })
+            ]
+          },
+          `${invoice.id}-line-${index}`
+        )) }) }),
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.howToPay, children: /* @__PURE__ */ jsx(
+          DescriptionList,
+          {
+            layout: "inline",
+            density: "compact",
+            items: [
+              ...invoice.seller.iban ? [
+                {
+                  term: labels.iban,
+                  description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.seller.iban })
+                }
+              ] : [],
+              ...invoice.seller.bic ? [
+                {
+                  term: labels.bic,
+                  description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.seller.bic })
+                }
+              ] : [],
+              {
+                term: labels.reference,
+                description: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: invoice.number })
+              },
+              { term: labels.payableBy, description: day(invoice.due) }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Block, { muted, title: labels.totals, children: /* @__PURE__ */ jsxs(View, { style: dense ? styles.totalsDense : styles.totals, children: [
+          /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: labels.subtotal,
+              minor: t.gross,
+              currency: cy,
+              noSymbol: true,
+              locale
+            }
+          ),
+          t.discount !== 0 ? /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: discountLabel(invoice.discounts, labels),
+              minor: -t.discount,
+              currency: cy,
+              tone: tinted ? void 0 : "good",
+              noSymbol: true,
+              locale
+            }
+          ) : null,
+          t.discount !== 0 ? /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: labels.net,
+              minor: t.net,
+              currency: cy,
+              noSymbol: true,
+              locale,
+              rule: true
+            }
+          ) : null,
+          invoice.taxMode === "inclusive" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              PriceRow,
+              {
+                label: labels.taxable,
+                minor: t.taxable,
+                currency: cy,
+                noSymbol: true,
+                locale
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              PriceRow,
+              {
+                label: labels.taxIncluded(invoice.taxLabel),
+                minor: t.tax,
+                currency: cy,
+                noSymbol: true,
+                locale
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: zeroRated ? labels.taxZeroRated(invoice.taxLabel, mode.label) : invoice.taxLabel,
+              minor: t.tax,
+              currency: cy,
+              noSymbol: true,
+              locale
+            }
+          ),
+          (invoice.credits ?? []).map((c) => /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: c.label,
+              minor: -c.amount,
+              currency: cy,
+              tone: tinted ? void 0 : "good",
+              noSymbol: true,
+              locale
+            },
+            c.label
+          )),
+          /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: labels.total,
+              minor: t.total,
+              currency: cy,
+              strong: true,
+              rule: true,
+              locale,
+              roll,
+              motion
+            }
+          ),
+          (invoice.payments ?? []).map((p) => /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: labels.payment(p.label, day(p.at)),
+              minor: -p.amount,
+              currency: cy,
+              tone: tinted ? void 0 : "good",
+              noSymbol: true,
+              locale
+            },
+            `${p.label}-${p.at}`
+          )),
+          /* @__PURE__ */ jsx(
+            PriceRow,
+            {
+              label: labels.amountDue,
+              minor: t.due,
+              currency: cy,
+              strong: true,
+              rule: true,
+              locale,
+              roll,
+              motion
+            }
+          )
+        ] }) }),
+        invoice.taxMode === "reverse" ? /* @__PURE__ */ jsxs(View, { style: styles.legalBox, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.text2 }),
+          /* @__PURE__ */ jsxs(View, { style: styles.legalBody, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.legalTitle, children: mode.label }),
+            /* @__PURE__ */ jsx(Text, { style: styles.legalNote, children: pay.reverseChargeNote })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+          invoice.notes ? /* @__PURE__ */ jsx(Text, { style: styles.notes, children: invoice.notes }) : null,
+          /* @__PURE__ */ jsx(Text, { style: [styles.taxFooter, muted], children: labels.taxModeFooter(mode.label, mode.note) })
+        ] }),
+        showPayAction ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            size: "lg",
+            fullWidth: true,
+            leadingIcon: "card",
+            loading: payBusy,
+            onPress: onPay,
+            children: payLabel
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function partyEntries(party, mono, labels = DEFAULT_LABELS) {
+  const out = [
+    { term: labels.name, description: party.name },
+    { term: labels.address, description: party.addr }
+  ];
+  if (party.vat) out.push({ term: labels.vat, description: /* @__PURE__ */ jsx(Text, { style: mono, children: party.vat }) });
+  if (party.reg)
+    out.push({ term: labels.registration, description: /* @__PURE__ */ jsx(Text, { style: mono, children: party.reg }) });
+  if (party.contact) out.push({ term: labels.contact, description: party.contact });
+  return out;
+}
+function Block({
+  title,
+  muted,
+  children
+}) {
+  const { styles } = useStyles(sheet2);
+  return /* @__PURE__ */ jsxs(View, { style: styles.block, children: [
+    /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [styles.overline, muted], children: title }),
+    children
+  ] });
+}
+function docTone(theme, tone) {
+  const c = theme.color;
+  const e = theme.edge;
+  switch (tone) {
+    case "good":
+      return { borderColor: e.good, backgroundColor: c.goodSoft };
+    case "warn":
+      return { borderColor: e.warn, backgroundColor: c.warnSoft };
+    case "danger":
+      return { borderColor: e.danger, backgroundColor: c.dangerSoft };
+    case "info":
+      return { borderColor: e.info, backgroundColor: c.infoSoft };
+    case "neutral":
+    default:
+      return { borderColor: e.neutral, backgroundColor: c.surface2 };
+  }
+}
+var sheet2 = createStyleSheet((theme) => ({
+  doc: {
+    alignSelf: "stretch",
+    gap: theme.space.s5,
+    padding: theme.space.s5,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  docDense: { gap: theme.space.s4, padding: theme.space.s4 },
+  header: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: theme.space.s4
+  },
+  sellerBlock: { flexShrink: 1, gap: theme.space.s1 },
+  sellerName: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    color: theme.color.text
+  },
+  sellerAddr: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  sellerMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  titleBlock: { alignItems: "flex-end", gap: theme.space.s2 },
+  titleRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  docTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title1.fontSize,
+    lineHeight: theme.type.title1.lineHeight,
+    letterSpacing: theme.type.title1.letterSpacing,
+    color: theme.color.text
+  },
+  mono: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  strongValue: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  block: { gap: theme.space.s2 },
+  overline: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    color: theme.color.text3
+  },
+  lines: { gap: theme.space.s2 },
+  line: {
+    gap: theme.space.s1,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  lineDense: { padding: theme.space.s2 },
+  lineDesc: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  lineDetail: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  lineFoot: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s1
+  },
+  lineMeta: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  pushEnd: { marginStart: "auto" },
+  empty: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  totals: { gap: theme.space.s2 },
+  totalsDense: { gap: theme.space.s1 },
+  legalBox: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s3,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  legalBody: { flex: 1, gap: theme.space.s1 },
+  legalTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  legalNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  footer: {
+    gap: theme.space.s2,
+    paddingTop: theme.space.s4,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  notes: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  taxFooter: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  }
+}));
+
+export { InvoiceDocument, InvoiceStatusBadge, InvoiceStatusStamp };