@btndprojects/loam-ui-native 0.0.0-stage → 0.1.1

package/dist/chunk-YTFKPRUK.js

@@ -0,0 +1,845 @@
+import { RadioGroup, RadioGroupItem } from './chunk-4YIP3CWS.js';
+import { SegmentedControl } from './chunk-5YNTNN5A.js';
+import { Checkbox } from './chunk-JXJB2X6M.js';
+import { Amount, PriceRow } from './chunk-VBOXAEPI.js';
+import { Chip } from './chunk-AI4DWZCD.js';
+import { TextField } from './chunk-ITTYJZWX.js';
+import { Badge } from './chunk-SBMNWWBV.js';
+import { Alert } from './chunk-OETCUXQP.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { ARRIVAL, refundRemaining, refundLedger, REFUND_REASONS, money, parseAmount, clampRefund, REFUND_FRACTIONS, refundFraction, evidenceTone, evidenceLabel, disputeWorthDefending, DISPUTE_ACCEPT_THRESHOLD_MINOR } from '@btndprojects/loam-pay';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var REFUND_STATE = {
+  requested: { label: "Requested", variant: "neutral" },
+  processing: { label: "Processing", variant: "info" },
+  sent: { label: "Sent", variant: "info" },
+  arrived: { label: "Arrived", variant: "good" },
+  failed: { label: "Failed", variant: "danger" }
+};
+function RefundStatus({ state, label }) {
+  const meta = REFUND_STATE[state];
+  return /* @__PURE__ */ jsx(Badge, { variant: meta.variant, size: "sm", dot: true, children: label ?? meta.label });
+}
+function RefundArrivalNote({
+  method,
+  window: text,
+  inline = false,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const body = text ?? ARRIVAL[method];
+  return /* @__PURE__ */ jsxs(View, { style: [inline ? styles.arrivalInline : styles.arrivalBlock, style], children: [
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: "clock",
+        size: theme.icon.sm,
+        color: inline ? theme.color.text3 : theme.color.infoOnSoft
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: inline ? styles.arrivalInlineBody : styles.arrivalBlockBody, children: body })
+  ] });
+}
+function RefundRemainingNote({
+  charge,
+  currency,
+  label = "still refundable",
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet);
+  const code = currency ?? charge.currency ?? "USD";
+  return /* @__PURE__ */ jsxs(View, { style: [styles.remaining, style], children: [
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor: refundRemaining(charge),
+        currency: code,
+        size: "sm",
+        weight: "bold",
+        locale
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.remainingWord, children: "of" }),
+    /* @__PURE__ */ jsx(Amount, { minor: charge.amountMinor, currency: code, size: "sm", locale }),
+    /* @__PURE__ */ jsx(Text, { style: styles.remainingWord, children: label })
+  ] });
+}
+function RefundLedger({
+  charge,
+  next = 0,
+  currency,
+  caption,
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet);
+  const code = currency ?? charge.currency ?? "USD";
+  const rows = refundLedger(charge, next);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.ledger, style], children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.overline, children: caption ?? `Refund ledger \xB7 ${code}` }),
+    rows.map((row) => /* @__PURE__ */ jsx(
+      PriceRow,
+      {
+        label: row.label,
+        minor: row.amountMinor,
+        currency: code,
+        tone: row.tone === "good" ? "good" : void 0,
+        strong: row.strong,
+        rule: row.strong,
+        noSymbol: true,
+        locale
+      },
+      row.label
+    ))
+  ] });
+}
+function RefundReasonList({
+  value,
+  onChange,
+  reasons = REFUND_REASONS,
+  label = "Reason",
+  showNotes = true
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      label,
+      value: value ?? void 0,
+      onValueChange: (next) => onChange(next),
+      children: reasons.map(([id, text, note]) => /* @__PURE__ */ jsxs(View, { style: styles.reasonRow, children: [
+        /* @__PURE__ */ jsx(RadioGroupItem, { value: id, label: text, accessibilityLabel: `${text}. ${note}` }),
+        showNotes ? /* @__PURE__ */ jsx(Text, { style: styles.reasonNote, children: note }) : null
+      ] }, id))
+    }
+  );
+}
+function RefundAmountField({
+  valueMinor,
+  onChangeMinor,
+  remaining,
+  currency,
+  label = "Refund amount",
+  hint,
+  error,
+  fractions = REFUND_FRACTIONS,
+  disabled = false,
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet);
+  const [draft, setDraft] = React.useState(null);
+  const display = draft ?? money(valueMinor, currency, { noSymbol: true, locale });
+  const maxText = money(remaining, currency, { locale });
+  const chips = fractions === false ? [] : fractions;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.amountBlock, style], children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label,
+        hint: hint ?? `Up to ${maxText}.`,
+        error,
+        value: display,
+        editable: !disabled,
+        inputMode: "decimal",
+        autoComplete: "off",
+        autoCorrect: false,
+        keyboardType: "decimal-pad",
+        onChangeText: (text) => {
+          setDraft(text);
+          const parsed = parseAmount(text, currency);
+          onChangeMinor(clampRefund(parsed ?? 0, remaining));
+        },
+        onBlur: () => setDraft(null)
+      }
+    ),
+    chips.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.chipRow, children: chips.map((percent) => {
+      const target = refundFraction(percent, remaining);
+      return /* @__PURE__ */ jsx(
+        Chip,
+        {
+          variant: "filter",
+          size: "sm",
+          disabled,
+          selected: !disabled && valueMinor === target && remaining > 0,
+          accessibilityLabel: `Refund ${percent}% \u2014 ${money(target, currency, { locale })}`,
+          onSelectedChange: () => {
+            setDraft(null);
+            onChangeMinor(target);
+          },
+          children: `${percent}%`
+        },
+        percent
+      );
+    }) }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  arrivalBlock: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s2,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    // The soft tint always carries its tone edge: it collapses to the plain
+    // surface under high contrast, where the edge is all that draws it.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.info,
+    backgroundColor: theme.color.infoSoft
+  },
+  arrivalBlockBody: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.infoOnSoft
+  },
+  arrivalInline: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  arrivalInlineBody: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  remaining: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s1
+  },
+  remainingWord: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  ledger: {
+    alignSelf: "stretch",
+    gap: theme.space.s2,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  overline: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  reasonRow: { gap: theme.space[2] },
+  reasonNote: {
+    marginStart: theme.space.s7,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  amountBlock: { alignSelf: "stretch", gap: theme.space.s2 },
+  chipRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s1
+  }
+}));
+function RefundConfirmation({
+  charge,
+  result,
+  method,
+  currency,
+  title = "Refund issued",
+  refundAnotherLabel = "Refund another charge",
+  onRefundAnother,
+  actions,
+  locale,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet2);
+  const code = currency ?? charge.currency ?? "USD";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "status",
+      accessibilityLiveRegion: "polite",
+      accessibilityLabel: title,
+      style: [styles.panel, style],
+      ...{ "aria-live": "polite" },
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.confirmHead, children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              "aria-hidden": true,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              style: styles.checkPlate,
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "check",
+                  size: theme.icon.md,
+                  color: theme.color.goodOnSoft,
+                  strokeWidth: theme.icon.strokeBold
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, children: title }),
+          /* @__PURE__ */ jsx(Amount, { minor: result.amountMinor, currency: code, size: "hero", locale }),
+          /* @__PURE__ */ jsxs(View, { style: styles.confirmMeta, children: [
+            /* @__PURE__ */ jsx(RefundStatus, { state: result.state }),
+            result.issuedLabel ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: result.issuedLabel }) : null,
+            result.refundId ? /* @__PURE__ */ jsx(Text, { style: styles.mono, children: result.refundId }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(RefundArrivalNote, { method }),
+        /* @__PURE__ */ jsx(RefundLedger, { charge, next: result.amountMinor, currency: code, locale }),
+        /* @__PURE__ */ jsxs(View, { style: styles.actionRow, children: [
+          onRefundAnother ? /* @__PURE__ */ jsx(Button, { variant: "outline", onPress: onRefundAnother, children: refundAnotherLabel }) : null,
+          actions
+        ] })
+      ]
+    }
+  );
+}
+function RefundPanel({
+  charge,
+  method,
+  mode,
+  amountMinor,
+  reason,
+  notify,
+  currency,
+  title = "Refund",
+  chargeLabel,
+  error,
+  result,
+  busy = false,
+  notifyLabel = "Email the customer",
+  irreversibleNote = "A refund cannot be undone. Check the amount before you issue it.",
+  onModeChange,
+  onAmountChange,
+  onReasonChange,
+  onNotifyChange,
+  onSubmit,
+  onRefundAnother,
+  locale,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet2);
+  const code = currency ?? charge.currency ?? "USD";
+  const remaining = refundRemaining(charge);
+  const effective = mode === "full" ? remaining : amountMinor;
+  const reasonRow = reason === null ? void 0 : REFUND_REASONS.find(([id]) => id === reason);
+  if (result) {
+    return /* @__PURE__ */ jsx(
+      RefundConfirmation,
+      {
+        charge,
+        result,
+        method,
+        currency: code,
+        onRefundAnother,
+        locale,
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(View, { role: "region", accessibilityLabel: title, style: [styles.panel, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.headerRow, children: [
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, children: title }),
+        charge.receiptId ? /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Text, { style: styles.mono, children: charge.receiptId }) }) : null
+      ] }),
+      chargeLabel ? /* @__PURE__ */ jsx(Text, { style: styles.chargeLabel, children: chargeLabel }) : null,
+      /* @__PURE__ */ jsx(RefundRemainingNote, { charge, currency: code, locale })
+    ] }),
+    onModeChange ? /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        value: mode,
+        onValueChange: (next) => onModeChange(next),
+        items: [
+          { value: "full", label: "Full" },
+          { value: "partial", label: "Partial" }
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      Stated,
+      {
+        label: mode === "full" ? "Full refund" : "Partial refund",
+        overline: "Amount mode"
+      }
+    ),
+    mode === "full" ? /* @__PURE__ */ jsxs(View, { style: styles.fullBox, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.fullLabel, children: "Refunding the full remaining balance" }),
+      /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Amount, { minor: remaining, currency: code, size: "lg", weight: "bold", locale }) })
+    ] }) : onAmountChange ? /* @__PURE__ */ jsx(
+      RefundAmountField,
+      {
+        valueMinor: amountMinor,
+        onChangeMinor: onAmountChange,
+        remaining,
+        currency: code,
+        locale
+      }
+    ) : /* @__PURE__ */ jsxs(View, { style: styles.fullBox, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.fullLabel, children: "Refunding" }),
+      /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Amount, { minor: amountMinor, currency: code, size: "lg", weight: "bold", locale }) })
+    ] }),
+    onReasonChange ? /* @__PURE__ */ jsx(RefundReasonList, { value: reason, onChange: onReasonChange }) : /* @__PURE__ */ jsx(
+      Stated,
+      {
+        overline: "Reason",
+        label: reasonRow ? reasonRow[1] : "Not stated",
+        note: reasonRow ? reasonRow[2] : void 0
+      }
+    ),
+    onNotifyChange ? /* @__PURE__ */ jsxs(View, { style: styles.notifyRow, children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: notify,
+          onCheckedChange: (next) => onNotifyChange(next),
+          accessibilityLabel: notifyLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: styles.notifyLabel, children: notifyLabel })
+    ] }) : /* @__PURE__ */ jsx(
+      Stated,
+      {
+        overline: "Customer email",
+        label: notify ? `${notifyLabel} \u2014 yes` : `${notifyLabel} \u2014 no`
+      }
+    ),
+    /* @__PURE__ */ jsx(RefundLedger, { charge, next: effective, currency: code, locale }),
+    /* @__PURE__ */ jsx(RefundArrivalNote, { method }),
+    error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.commitBlock, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.irreversibleRow, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.text3 }),
+        /* @__PURE__ */ jsx(Text, { style: styles.irreversible, children: irreversibleNote })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { loading: busy, onPress: onSubmit, children: `Refund ${money(effective, code, { locale })}` })
+    ] })
+  ] });
+}
+function Stated({
+  overline,
+  label,
+  note
+}) {
+  const { styles } = useStyles(sheet2);
+  return /* @__PURE__ */ jsxs(View, { style: styles.stated, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.overline, children: overline }),
+    /* @__PURE__ */ jsx(Text, { style: styles.statedValue, children: label }),
+    note ? /* @__PURE__ */ jsx(Text, { style: styles.statedNote, children: note }) : null
+  ] });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  panel: {
+    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
+  },
+  header: { gap: theme.space.s1 },
+  headerRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s2
+  },
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    letterSpacing: theme.type.title3.letterSpacing,
+    color: theme.color.text
+  },
+  pushEnd: { marginStart: "auto" },
+  mono: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  chargeLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  fullBox: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s2,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  fullLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  notifyRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  notifyLabel: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  stated: { gap: theme.space[2] },
+  overline: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  statedValue: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  statedNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  commitBlock: { gap: theme.space.s2 },
+  irreversibleRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  irreversible: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  confirmHead: { alignItems: "center", gap: theme.space.s3 },
+  checkPlate: {
+    width: theme.ctl.iconBtn,
+    height: theme.ctl.iconBtn,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    // The soft tint always carries its tone edge.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.good,
+    backgroundColor: theme.color.goodSoft
+  },
+  confirmMeta: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s2
+  },
+  meta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  actionRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  }
+}));
+var BADGE_VARIANT = {
+  info: "info",
+  good: "good",
+  warn: "warn",
+  danger: "danger",
+  "text-3": "neutral"
+};
+var EVIDENCE_ICON = {
+  have: "check-circle",
+  missing: "alert-circle",
+  "n/a": "minus"
+};
+function DisputeDeadline({
+  dispute,
+  urgentAt = 3,
+  locale,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet3);
+  const urgent = dispute.daysLeft <= urgentAt;
+  const ink = urgent ? theme.color.dangerOnSoft : theme.color.warnOnSoft;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.deadline,
+        {
+          // A soft tint always carries its tone edge.
+          borderColor: urgent ? theme.edge.danger : theme.edge.warn,
+          backgroundColor: urgent ? theme.color.dangerSoft : theme.color.warnSoft
+        },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.daysLeft, { color: ink }], children: `${dispute.daysLeft} ${dispute.daysLeft === 1 ? "day" : "days"}` }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.daysNote, { color: ink }], children: `to respond \xB7 evidence due ${dispute.due}` })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.factGrid, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.fact, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.factTerm, { color: ink }], children: "Disputed" }),
+            /* @__PURE__ */ jsx(
+              Amount,
+              {
+                minor: dispute.amountMinor,
+                currency: dispute.currency,
+                size: "lg",
+                weight: "bold",
+                locale
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: styles.fact, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.factTerm, { color: ink }], children: "Network fee" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.factValueNum, children: money(dispute.feeMinor, dispute.currency, { locale }) })
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: styles.fact, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.factTerm, { color: ink }], children: "Reason" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.factValue, children: `${dispute.reason} \xB7 ${dispute.network}` })
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: styles.fact, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.factTerm, { color: ink }], children: "Opened" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.factValue, children: dispute.opened })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function DisputeEvidenceRow({
+  item,
+  attachLabel = "Attach",
+  onAttach,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet3);
+  const tone = evidenceTone(item.state);
+  const glyphColor = tone === "good" ? theme.color.good : tone === "warn" ? theme.color.warn : theme.color.text3;
+  return /* @__PURE__ */ jsxs(View, { role: "listitem", style: [styles.evidenceRow, style], children: [
+    /* @__PURE__ */ jsx(Icon, { name: EVIDENCE_ICON[item.state], size: theme.icon.sm, color: glyphColor }),
+    /* @__PURE__ */ jsxs(View, { style: styles.evidenceBody, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.evidenceLabel, children: item.label }),
+      /* @__PURE__ */ jsx(Text, { style: styles.evidenceNote, children: item.note })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.evidenceTrail, children: [
+      /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: BADGE_VARIANT[tone], size: "sm", children: evidenceLabel(item.state) }),
+      item.state === "missing" && onAttach ? /* @__PURE__ */ jsx(Button, { size: "xs", variant: "outline", leadingIcon: "upload", onPress: () => onAttach(item), children: attachLabel }) : null
+    ] })
+  ] });
+}
+function DisputePanel({
+  dispute,
+  title = "Chargeback",
+  description = "The amount and the network fee have already left the account. Submitting evidence asks the network to reverse the first of those; the fee is not refundable either way, and the network decides \u2014 not us.",
+  submitLabel = "Submit evidence",
+  acceptLabel = "Accept the dispute",
+  canSubmit = true,
+  busy = false,
+  showGuidance = true,
+  onSubmitEvidence,
+  onAccept,
+  onAttach,
+  locale,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet3);
+  const worth = disputeWorthDefending(dispute.amountMinor);
+  const threshold = money(DISPUTE_ACCEPT_THRESHOLD_MINOR, dispute.currency, { locale });
+  return /* @__PURE__ */ jsxs(View, { role: "region", accessibilityLabel: title, style: [styles.panel, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+      /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, children: title }),
+      /* @__PURE__ */ jsx(DisputeDeadline, { dispute, locale }),
+      /* @__PURE__ */ jsx(Text, { style: styles.description, children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.evidenceBlock, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.overline, children: "Evidence" }),
+      /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", children: dispute.evidence.map((item) => /* @__PURE__ */ jsx(DisputeEvidenceRow, { item, onAttach }, item.label)) })
+    ] }),
+    showGuidance ? /* @__PURE__ */ jsxs(View, { style: styles.guidanceRow, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "info", size: theme.icon.sm, color: theme.color.text3 }),
+      /* @__PURE__ */ jsx(Text, { style: styles.guidance, children: (worth ? `Above ${threshold} this is usually worth defending \u2014 the amount at stake exceeds the staff time a response costs.` : `Below ${threshold} the staff time spent defending this usually exceeds the amount at stake. Accepting is a legitimate answer, not a loss.`) + (canSubmit ? "" : " Some evidence is still missing; submitting now sends what is attached.") })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.actionRow, children: [
+      /* @__PURE__ */ jsx(Button, { loading: busy, onPress: onSubmitEvidence, children: submitLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onPress: onAccept, children: acceptLabel })
+    ] })
+  ] });
+}
+var sheet3 = createStyleSheet((theme) => ({
+  panel: {
+    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
+  },
+  header: { gap: theme.space.s3 },
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    letterSpacing: theme.type.title3.letterSpacing,
+    color: theme.color.text
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  deadline: {
+    gap: theme.space.s4,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base
+  },
+  daysLeft: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[32],
+    lineHeight: theme.fontSize[32] * theme.lineHeight.tight
+  },
+  daysNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight
+  },
+  factGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: theme.space.s5,
+    rowGap: theme.space.s2
+  },
+  fact: { gap: theme.space[2] },
+  // No `color` here: the fact terms are inked by the caller with the *tint's*
+  // own measured ink (`dangerOnSoft` / `warnOnSoft`), the same one the days-left
+  // figure uses. They used to be `theme.color.text3`, and `--text-3` is measured
+  // against the neutral surface ramp only — on this banner's tint it read 4.20:1
+  // on `--danger-soft` and 3.78:1 on `--warn-soft` in dark mode, 28 axe
+  // `color-contrast` nodes from one style (seven deadlines x four terms).
+  factTerm: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase"
+  },
+  factValue: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  factValueNum: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  evidenceBlock: { gap: theme.space.s2 },
+  overline: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  evidenceRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    gap: theme.space.s3,
+    paddingVertical: theme.space.s3,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  // A floor, so the row wraps the badge and Attach under the text rather than
+  // squeezing the note to a 126px column beside them.
+  evidenceBody: { flexGrow: 1, flexShrink: 1, flexBasis: theme.panel.xs, gap: theme.space[2] },
+  evidenceLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  evidenceNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  evidenceTrail: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  guidanceRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  guidance: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  actionRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "center" }
+}));
+
+export { DisputeDeadline, DisputeEvidenceRow, DisputePanel, RefundAmountField, RefundArrivalNote, RefundConfirmation, RefundLedger, RefundPanel, RefundReasonList, RefundRemainingNote, RefundStatus };