@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-KEVZIHM2.js

@@ -0,0 +1,1511 @@
+import { PanelRoot } from './chunk-R5T4VZ7Z.js';
+import { Amount, PriceRow } from './chunk-GVQQG435.js';
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { MetricDelta } from './chunk-N7AX4OA4.js';
+import { Checkbox } from './chunk-KNILMM4H.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { SkeletonText, Skeleton } from './chunk-YJ5PXOX3.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { NAMED_ROLE, announce } from './chunk-W23G6JLF.js';
+import { SegmentedControl } from './chunk-NZG75DGA.js';
+import { RadioGroup, RadioGroupItem } from './chunk-PK7BN3MI.js';
+import { TextField } from './chunk-KXLDK6HB.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React2 from 'react';
+import { View, Text, Animated, AccessibilityInfo, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { arrivalText, refundRemaining, money, refundLedger, refundReasons, parseAmount, clampRefund, REFUND_FRACTIONS, refundFraction, evidenceTone, evidenceLabel, disputeWorthDefending, DISPUTE_ACCEPT_THRESHOLD_MINOR } from '@btndprojects/loam-pay';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/refund/refund-shell.ts
+function refundShellStyle(theme, { variant = "default", elevation = "default", padding = "md", tone }) {
+  const raised = variant === "elevated" || elevation === "raised";
+  const flat = elevation === "flat";
+  return {
+    ...padding === "sm" ? { padding: theme.space.s4 } : null,
+    ...padding === "lg" ? { padding: theme.space.s6 } : null,
+    ...variant === "outline" ? { backgroundColor: "transparent" } : null,
+    ...tone && tone !== "neutral" ? { backgroundColor: softToneSkin(theme, tone).fill, borderColor: softToneSkin(theme, tone).edge } : null,
+    ...raised && !flat ? theme.shadow.lg : null
+  };
+}
+function panelBaseStyle(theme) {
+  return {
+    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
+  };
+}
+
+// src/refund/refund-labels.ts
+var DEFAULT_LABELS = {
+  issuedTitle: "Refund issued",
+  refundAnother: "Refund another charge",
+  title: "Refund",
+  notify: "Email the customer",
+  irreversible: "A refund cannot be undone. Check the amount before you issue it.",
+  modeAria: "Refund amount mode",
+  modeFull: "Full",
+  modePartial: "Partial",
+  fullBalance: "Refunding the full remaining balance",
+  commit: (amount) => `Refund ${amount}`,
+  states: {
+    requested: "Requested",
+    processing: "Processing",
+    sent: "Sent",
+    arrived: "Arrived",
+    failed: "Failed"
+  },
+  of: "of",
+  stillRefundable: "still refundable",
+  ledgerCaption: (currency) => `Refund ledger \xB7 ${currency}`,
+  reason: "Reason",
+  amount: "Refund amount",
+  upTo: (max) => `Up to ${max}.`,
+  capped: (max) => `That is more than the ${max} left, so it was capped.`,
+  percent: (percent) => `${percent}%`,
+  fractionAria: (percent, amount) => `Refund ${percent}% \u2014 ${amount}`,
+  amountMode: "Amount mode",
+  fullRefund: "Full refund",
+  partialRefund: "Partial refund",
+  refunding: "Refunding",
+  notStated: "Not stated",
+  customerEmail: "Customer email",
+  notifyYes: (label) => `${label} \u2014 yes`,
+  notifyNo: (label) => `${label} \u2014 no`,
+  announceIssued: (title, amount) => `${title}. ${amount}`,
+  disputeTitle: "Chargeback",
+  disputeDescription: "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.",
+  submitEvidence: "Submit evidence",
+  acceptDispute: "Accept the dispute",
+  evidence: "Evidence",
+  attach: "Attach",
+  days: (n) => `${n} ${n === 1 ? "day" : "days"}`,
+  toRespond: (due) => `to respond \xB7 evidence due ${due}`,
+  disputed: "Disputed",
+  networkFee: "Network fee",
+  reasonNetwork: (reason, network) => `${reason} \xB7 ${network}`,
+  opened: "Opened",
+  guidance: (worth, threshold, complete) => `${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.`}${complete ? "" : " Some evidence is still missing; submitting now sends what is attached."}`
+};
+var REFUND_STATE = {
+  requested: { variant: "neutral" },
+  processing: { variant: "info" },
+  sent: { variant: "info" },
+  arrived: { variant: "good" },
+  failed: { variant: "danger" }
+};
+var ALIGN_JUSTIFY = {
+  start: { justifyContent: "flex-start" },
+  center: { justifyContent: "center" },
+  end: { justifyContent: "flex-end" }
+};
+function RefundStatus({
+  state,
+  label,
+  size = "sm",
+  variant,
+  count,
+  motion,
+  error = false,
+  labels: labelsProp
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const meta = REFUND_STATE[state];
+  const tone = error ? "danger" : variant ?? meta.variant;
+  const pill = /* @__PURE__ */ jsx(Badge, { variant: tone, size, dot: true, children: label ?? labels.states[state] });
+  const hasCount = count !== void 0 && count > 0;
+  const message = typeof error === "string" && error ? error : null;
+  if (!hasCount && !message) return pill;
+  return /* @__PURE__ */ jsxs(View, { style: styles.statusRow, children: [
+    pill,
+    hasCount ? /* @__PURE__ */ jsx(Badge, { variant: tone, size, count, ...motion ? { motion } : null }) : null,
+    message ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.errorText, children: message }) : null
+  ] });
+}
+function RefundArrivalNote({
+  method,
+  window: text,
+  inline = false,
+  tone = "info",
+  variant,
+  dismissible,
+  onDismiss,
+  action,
+  icon = "clock",
+  size = "compact",
+  motion,
+  loading = false,
+  labels: labelsProp,
+  style,
+  error = false
+}) {
+  const pay = usePayLabels(labelsProp);
+  const theme = useLoamTheme("refund");
+  const { styles } = useStyles(sheet);
+  const body = text ?? arrivalText(method, pay);
+  const message = typeof error === "string" && error ? error : null;
+  const noteTone = error ? "danger" : tone;
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { accessibilityState: { busy: true }, "aria-busy": true, style: [styles.arrivalInline, style], children: /* @__PURE__ */ jsx(SkeletonText, { lines: 1 }) });
+  }
+  if (!inline) {
+    return /* @__PURE__ */ jsx(View, { style, children: /* @__PURE__ */ jsx(
+      Alert,
+      {
+        tone: noteTone,
+        size: message ? "md" : size,
+        icon,
+        title: body,
+        ...variant ? { variant } : null,
+        ...dismissible !== void 0 ? { dismissible } : null,
+        ...onDismiss ? { onDismiss } : null,
+        ...action ? { action } : null,
+        ...motion ? { motion } : null,
+        children: message ? /* @__PURE__ */ jsx(Text, { style: styles.arrivalBlockError, children: message }) : null
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles.arrivalInline, style], children: [
+    icon ? /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: icon,
+        size: theme.icon.sm,
+        color: noteTone === "info" || noteTone === "neutral" ? theme.color.text3 : theme.color[noteTone]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Text, { style: [styles.arrivalInlineBody, size === "md" ? styles.arrivalInlineMd : null], children: body }),
+    message ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.arrivalError, children: message }) : null
+  ] });
+}
+function RefundRemainingNote({
+  charge,
+  currency,
+  label: labelProp,
+  size = "sm",
+  unit,
+  tone,
+  loading = false,
+  align = "start",
+  locale: localeProp,
+  labels: labelsProp,
+  style,
+  error
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const label = labelProp ?? labels.stillRefundable;
+  const { styles } = useStyles(sheet);
+  const code = currency ?? charge.currency ?? "USD";
+  const wordSize = size === "sm" ? null : size === "md" ? styles.wordMd : styles.wordLg;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessible: true,
+      accessibilityRole: NAMED_ROLE,
+      accessibilityLabel: `${money(refundRemaining(charge), code, { locale })} ${labels.of} ${money(charge.amountMinor, code, { locale })}${unit ? ` ${unit}` : ""} ${label}${error ? `. ${error}` : ""}`,
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-busy": loading || void 0,
+      style: [styles.remaining, ALIGN_JUSTIFY[align], style],
+      children: [
+        /* @__PURE__ */ jsx(
+          Amount,
+          {
+            minor: refundRemaining(charge),
+            currency: code,
+            size,
+            weight: "bold",
+            locale,
+            loading,
+            ...error ? { tone: "danger" } : tone ? { tone } : null,
+            ...unit ? { noSymbol: true } : null
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: [styles.remainingWord, wordSize], children: labels.of }),
+        /* @__PURE__ */ jsx(
+          Amount,
+          {
+            minor: charge.amountMinor,
+            currency: code,
+            size,
+            locale,
+            loading,
+            ...unit ? { noSymbol: true } : null
+          }
+        ),
+        unit ? /* @__PURE__ */ jsx(Text, { style: [styles.remainingWord, wordSize], children: unit }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles.remainingWord, wordSize], children: label }),
+        error ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            role: "alert",
+            accessibilityRole: "alert",
+            style: [styles.remainingWord, wordSize, styles.remainingError],
+            children: error
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function RefundLedger({
+  charge,
+  next = 0,
+  currency,
+  caption,
+  loading = false,
+  density,
+  orientation,
+  align,
+  size,
+  unit,
+  tone,
+  error,
+  locale: localeProp,
+  labels: labelsProp,
+  style
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("refund");
+  const { styles } = useStyles(sheet);
+  const code = currency ?? charge.currency ?? "USD";
+  const rows = refundLedger(charge, next, pay);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-busy": loading || void 0,
+      style: [
+        styles.ledger,
+        density === "compact" ? styles.ledgerCompact : null,
+        tone && tone !== "neutral" ? {
+          backgroundColor: softToneSkin(theme, tone).fill,
+          borderColor: softToneSkin(theme, tone).edge
+        } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.overline,
+              align === "start" ? styles.captionStart : null,
+              // `text3` is measured against the neutral surfaces; a tint takes `text2`.
+              tone && tone !== "neutral" ? { color: theme.color.text2 } : null
+            ],
+            children: caption ?? labels.ledgerCaption(unit ?? code)
+          }
+        ),
+        rows.map((row) => /* @__PURE__ */ jsx(
+          PriceRow,
+          {
+            label: row.label,
+            minor: row.amountMinor,
+            currency: code,
+            tone: row.tone === "good" && !(tone && tone !== "neutral") ? "good" : void 0,
+            strong: row.strong,
+            rule: row.strong,
+            noSymbol: true,
+            locale,
+            loading,
+            ...density ? { density } : null,
+            ...orientation ? { orientation } : null,
+            ...align ? { align } : null,
+            ...size ? { size } : null,
+            ...unit ? { unit } : null
+          },
+          row.label
+        )),
+        error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.errorText, children: error }) : null
+      ]
+    }
+  );
+}
+function RefundReasonList({
+  value,
+  onChange,
+  reasons,
+  label,
+  showNotes = true,
+  size,
+  error,
+  disabled,
+  hint,
+  tone,
+  loading = false,
+  labels: labelsProp
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const list = reasons ?? refundReasons(pay);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("refund");
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        accessibilityState: { busy: true },
+        "aria-busy": true,
+        style: [styles.reasonRow, styles.reasonLoading],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.overline, children: label ?? labels.reason }),
+          list.map(([id]) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl.lg, decorative: true }, id))
+        ]
+      }
+    );
+  }
+  const skin = tone && tone !== "neutral" ? softToneSkin(theme, tone) : null;
+  const group = /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      label: label ?? labels.reason,
+      size,
+      error,
+      disabled,
+      hint,
+      value: value ?? void 0,
+      onValueChange: (next) => onChange(next),
+      children: list.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, skin ? { color: theme.color.text2 } : null], children: note }) : null
+      ] }, id))
+    }
+  );
+  return skin ? /* @__PURE__ */ jsx(View, { style: [styles.reasonTone, { backgroundColor: skin.fill, borderColor: skin.edge }], children: group }) : group;
+}
+function RefundAmountField({
+  valueMinor,
+  onChangeMinor,
+  remaining,
+  currency,
+  label,
+  hint,
+  error,
+  fractions = REFUND_FRACTIONS,
+  disabled = false,
+  readOnly = false,
+  size,
+  tone,
+  surface,
+  success,
+  loading,
+  clearable,
+  leadingIcon,
+  trailingIcon,
+  motion,
+  locale: localeProp,
+  labels: labelsProp,
+  style
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const { styles } = useStyles(sheet);
+  const [draft, setDraft] = React2.useState(null);
+  const [capped, setCapped] = React2.useState(false);
+  const display = draft ?? money(valueMinor, currency, { noSymbol: true, locale });
+  const maxText = money(remaining, currency, { locale });
+  const chips = fractions === false || readOnly ? [] : fractions;
+  const cappedMessage = labels.capped(maxText);
+  React2.useEffect(() => {
+    if (capped) announce(cappedMessage);
+  }, [capped]);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.amountBlock, style], children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: label ?? labels.amount,
+        hint: hint ?? labels.upTo(maxText),
+        error: error ?? (capped ? cappedMessage : void 0),
+        ...tone ? { validationState: tone === "good" ? "valid" : "invalid" } : null,
+        value: display,
+        editable: !disabled,
+        readOnly,
+        ...size ? { size } : null,
+        surface,
+        ...success !== void 0 ? { success } : null,
+        ...loading !== void 0 ? { loading } : null,
+        ...clearable !== void 0 ? { clearable } : null,
+        ...leadingIcon ? { leadingIcon } : null,
+        ...trailingIcon ? { trailingIcon } : null,
+        ...motion ? { motion } : null,
+        inputMode: "decimal",
+        autoComplete: "off",
+        autoCorrect: false,
+        keyboardType: "decimal-pad",
+        onChangeText: (text) => {
+          setDraft(text);
+          const parsed = parseAmount(text, currency);
+          setCapped(parsed !== null && parsed > remaining);
+          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: labels.fractionAria(
+            percent,
+            money(target, currency, { locale })
+          ),
+          onSelectedChange: () => {
+            setDraft(null);
+            setCapped(false);
+            onChangeMinor(target);
+          },
+          children: labels.percent(percent)
+        },
+        percent
+      );
+    }) }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  errorText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.dangerOnSoft
+  },
+  arrivalError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.danger
+  },
+  arrivalBlockError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.dangerOnSoft
+  },
+  remainingError: { color: theme.color.danger },
+  statusRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  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
+  },
+  arrivalInlineMd: {
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.fontSize * theme.lineHeight.normal
+  },
+  remaining: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s1
+  },
+  wordMd: {
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight
+  },
+  wordLg: {
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight
+  },
+  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
+  },
+  ledgerCompact: { gap: theme.space.s1, padding: theme.space.s3 },
+  captionStart: { textAlign: theme.rtl ? "right" : "left" },
+  overline: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    color: theme.color.text3
+  },
+  reasonRow: { gap: theme.space[2] },
+  reasonLoading: { gap: theme.space.s2 },
+  reasonTone: {
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base
+  },
+  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: titleProp,
+  refundAnotherLabel,
+  onRefundAnother,
+  actions,
+  locale: localeProp,
+  labels: labelsProp,
+  platform,
+  style,
+  roll = false,
+  motion = "full",
+  variant,
+  elevation,
+  padding,
+  tone,
+  size = "hero",
+  delta,
+  loading = false,
+  error,
+  interactive = false,
+  onPress
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const title = titleProp ?? labels.issuedTitle;
+  const theme = useLoamTheme("refund");
+  const android = isAndroidIdiom(theme, platform);
+  const titleType = resolveTextRole(theme, "surfaceTitle", android);
+  const { styles } = useStyles(sheet2);
+  const code = currency ?? charge.currency ?? "USD";
+  const level = useResolvedMotion(motion, "refund");
+  const rise = React2.useRef(new Animated.Value(level === "full" ? 0 : 1)).current;
+  const pop = React2.useRef(new Animated.Value(level === "full" ? 0 : 1)).current;
+  React2.useEffect(() => {
+    AccessibilityInfo.announceForAccessibility(
+      labels.announceIssued(title, money(result.amountMinor, code, { locale }))
+    );
+  }, []);
+  React2.useEffect(() => {
+    if (level !== "full") return;
+    const run = Animated.parallel([
+      Animated.spring(rise, { ...springConfig(theme, "ds"), toValue: 1, useNativeDriver: true }),
+      Animated.sequence([
+        // loam-audit-ignore raw-duration — one stagger step after the panel starts rising.
+        Animated.delay(60),
+        Animated.spring(pop, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true })
+      ])
+    ]);
+    run.start();
+    return () => run.stop();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    PanelRoot,
+    {
+      interactive,
+      onPress,
+      role: "status",
+      accessibilityLiveRegion: "polite",
+      accessibilityLabel: title,
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-busy": loading || void 0,
+      style: [styles.panel, refundShellStyle(theme, { variant, elevation, padding, tone }), style],
+      ...{ "aria-live": "polite" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            style: [
+              styles.confirmHead,
+              {
+                opacity: rise,
+                transform: [
+                  {
+                    translateY: rise.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [theme.space.s3, 0]
+                    })
+                  }
+                ]
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  "aria-hidden": true,
+                  accessibilityElementsHidden: true,
+                  importantForAccessibility: "no-hide-descendants",
+                  style: [
+                    styles.checkPlate,
+                    {
+                      opacity: pop,
+                      transform: [
+                        { scale: pop.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }) }
+                      ]
+                    }
+                  ],
+                  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, titleType], children: title }),
+              /* @__PURE__ */ jsx(
+                Amount,
+                {
+                  minor: result.amountMinor,
+                  currency: code,
+                  size,
+                  locale,
+                  loading,
+                  ...roll ? { roll: true, motion } : null
+                }
+              ),
+              delta !== void 0 ? /* @__PURE__ */ jsx(MetricDelta, { delta }) : null,
+              /* @__PURE__ */ jsxs(View, { style: styles.confirmMeta, children: [
+                /* @__PURE__ */ jsx(RefundStatus, { state: result.state, labels: labelsProp }),
+                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, labels: labelsProp }),
+        /* @__PURE__ */ jsx(
+          RefundLedger,
+          {
+            charge,
+            next: result.amountMinor,
+            currency: code,
+            loading,
+            locale,
+            labels: labelsProp
+          }
+        ),
+        error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error }) : null,
+        /* @__PURE__ */ jsxs(View, { style: [styles.actionRow, android ? styles.actionRowEnd : null], children: [
+          onRefundAnother ? /* @__PURE__ */ jsx(View, { style: android ? null : styles.actionShare, children: /* @__PURE__ */ jsx(Button, { variant: "outline", fullWidth: !android, onPress: onRefundAnother, children: refundAnotherLabel ?? labels.refundAnother }) }) : null,
+          actions
+        ] })
+      ]
+    }
+  );
+}
+function RefundPanel({
+  charge,
+  method,
+  mode,
+  amountMinor,
+  reason,
+  notify,
+  currency,
+  title: titleProp,
+  chargeLabel,
+  error,
+  result,
+  busy = false,
+  notifyLabel: notifyLabelProp,
+  irreversibleNote: irreversibleNoteProp,
+  onModeChange,
+  onAmountChange,
+  onReasonChange,
+  onNotifyChange,
+  onSubmit,
+  onRefundAnother,
+  locale: localeProp,
+  roll = true,
+  labels: labelsProp,
+  platform,
+  style,
+  motion = "full",
+  variant,
+  elevation,
+  padding,
+  tone,
+  density = "comfortable",
+  size,
+  disabled = false,
+  interactive = false,
+  onPress
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const title = titleProp ?? labels.title;
+  const notifyLabel = notifyLabelProp ?? labels.notify;
+  const irreversibleNote = irreversibleNoteProp ?? labels.irreversible;
+  const theme = useLoamTheme("refund");
+  const android = isAndroidIdiom(theme, platform);
+  const titleType = resolveTextRole(theme, "surfaceTitle", android);
+  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 : refundReasons(pay).find(([id]) => id === reason);
+  if (result) {
+    return /* @__PURE__ */ jsx(
+      RefundConfirmation,
+      {
+        charge,
+        result,
+        method,
+        currency: code,
+        onRefundAnother,
+        locale,
+        labels: labelsProp,
+        style,
+        variant,
+        elevation,
+        padding,
+        tone
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    PanelRoot,
+    {
+      interactive,
+      onPress,
+      role: "region",
+      accessibilityLabel: title,
+      style: [
+        styles.panel,
+        density === "compact" ? styles.panelCompact : null,
+        refundShellStyle(theme, { variant, elevation, padding, tone }),
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.headerRow, children: [
+            /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [styles.title, titleType], 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, labels: labelsProp })
+        ] }),
+        onModeChange ? /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            accessibilityLabel: labels.amountMode,
+            disabled,
+            value: mode,
+            onValueChange: (next) => onModeChange(next),
+            items: [
+              { value: "full", label: labels.modeFull },
+              { value: "partial", label: labels.modePartial }
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          Stated,
+          {
+            label: mode === "full" ? labels.fullRefund : labels.partialRefund,
+            overline: labels.amountMode
+          }
+        ),
+        mode === "full" ? /* @__PURE__ */ jsxs(View, { style: styles.fullBox, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.fullLabel, children: labels.fullBalance }),
+          /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(
+            Amount,
+            {
+              minor: remaining,
+              currency: code,
+              size: "lg",
+              weight: "bold",
+              locale,
+              roll
+            }
+          ) })
+        ] }) : onAmountChange ? /* @__PURE__ */ jsx(
+          RefundAmountField,
+          {
+            valueMinor: amountMinor,
+            onChangeMinor: onAmountChange,
+            remaining,
+            currency: code,
+            disabled,
+            ...size ? { size } : null,
+            locale,
+            labels: labelsProp
+          }
+        ) : /* @__PURE__ */ jsxs(View, { style: styles.fullBox, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.fullLabel, children: labels.refunding }),
+          /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(
+            Amount,
+            {
+              minor: amountMinor,
+              currency: code,
+              size: "lg",
+              weight: "bold",
+              locale,
+              roll,
+              motion
+            }
+          ) })
+        ] }),
+        onReasonChange ? /* @__PURE__ */ jsx(
+          RefundReasonList,
+          {
+            value: reason,
+            onChange: onReasonChange,
+            disabled,
+            ...size ? { size: size === "sm" ? "sm" : "md" } : null,
+            labels: labelsProp
+          }
+        ) : /* @__PURE__ */ jsx(
+          Stated,
+          {
+            overline: labels.reason,
+            label: reasonRow ? reasonRow[1] : labels.notStated,
+            note: reasonRow ? reasonRow[2] : void 0
+          }
+        ),
+        onNotifyChange ? (
+          // The box and its text are one control: one tap target, one focus
+          // stop, read once as "<label>, checkbox".
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: notify,
+              disabled,
+              onCheckedChange: (next) => onNotifyChange(next),
+              label: notifyLabel
+            }
+          )
+        ) : /* @__PURE__ */ jsx(
+          Stated,
+          {
+            overline: labels.customerEmail,
+            label: notify ? labels.notifyYes(notifyLabel) : labels.notifyNo(notifyLabel)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RefundLedger,
+          {
+            charge,
+            next: effective,
+            currency: code,
+            locale,
+            labels: labelsProp
+          }
+        ),
+        /* @__PURE__ */ jsx(RefundArrivalNote, { method, labels: labelsProp }),
+        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, disabled, ...size ? { size } : null, onPress: onSubmit, children: labels.commit(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: panelBaseStyle(theme),
+  panelCompact: { gap: theme.space.s3 },
+  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" },
+  // Refinement 12: the one reference style — mono 12 / 500, tabular, text-2.
+  mono: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2
+  },
+  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
+  },
+  stated: { gap: theme.space[2] },
+  overline: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    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
+  },
+  // iOS: footer actions share the width (F30); Android: end-aligned.
+  actionShare: { flexGrow: 1, flexBasis: 0 },
+  actionRowEnd: { justifyContent: "flex-end" }
+}));
+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,
+  size = "md",
+  density = "comfortable",
+  orientation = "vertical",
+  align = "start",
+  unit,
+  loading = false,
+  locale: localeProp,
+  labels: labelsProp,
+  style,
+  error
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("refund");
+  const { styles } = useStyles(sheet3);
+  const urgent = Boolean(error) || dispute.daysLeft <= urgentAt;
+  const ink = urgent ? theme.color.dangerOnSoft : theme.color.warnOnSoft;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-busy": loading || void 0,
+      style: [
+        styles.deadline,
+        density === "compact" ? styles.deadlineCompact : null,
+        orientation === "horizontal" ? styles.deadlineRow : null,
+        {
+          // 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,
+          {
+            style: [
+              styles.daysBox,
+              align === "center" ? styles.daysCentre : align === "end" ? styles.daysEnd : null
+            ],
+            children: [
+              loading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: theme.space[64], height: theme.fontSize[32], decorative: true }) : /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    styles.daysLeft,
+                    size === "sm" ? styles.daysLeftSm : null,
+                    size === "lg" ? styles.daysLeftLg : null,
+                    align === "center" ? styles.textCentre : align === "end" ? styles.textEnd : null,
+                    { color: ink }
+                  ],
+                  children: unit ? `${dispute.daysLeft} ${unit}` : labels.days(dispute.daysLeft)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    styles.daysNote,
+                    align === "center" ? styles.textCentre : align === "end" ? styles.textEnd : null,
+                    { color: ink }
+                  ],
+                  children: labels.toRespond(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: labels.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: labels.networkFee }),
+            /* @__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: labels.reason }),
+            /* @__PURE__ */ jsx(Text, { style: styles.factValue, children: labels.reasonNetwork(dispute.reason, dispute.network) })
+          ] }),
+          /* @__PURE__ */ jsxs(View, { style: styles.fact, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.factTerm, { color: ink }], children: labels.opened }),
+            /* @__PURE__ */ jsx(Text, { style: styles.factValue, children: dispute.opened })
+          ] })
+        ] }),
+        error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: [styles.evidenceError, { color: ink }], children: error }) : null
+      ]
+    }
+  );
+}
+function DisputeEvidenceRow({
+  item,
+  attachLabel,
+  onAttach,
+  density = "comfortable",
+  selected = false,
+  disabled = false,
+  onPress,
+  loading = false,
+  labels: labelsProp,
+  style,
+  error = false
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const theme = useLoamTheme("refund");
+  const { styles } = useStyles(sheet3);
+  const tone = evidenceTone(item.state);
+  const glyphColor = error ? theme.color.danger : tone === "good" ? theme.color.good : tone === "warn" ? theme.color.warn : theme.color.text3;
+  const lead = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { name: EVIDENCE_ICON[item.state], size: theme.icon.sm, color: glyphColor }),
+    /* @__PURE__ */ jsx(View, { style: styles.evidenceBody, children: loading ? /* @__PURE__ */ jsx(SkeletonText, { lines: 2 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.evidenceLabel, children: item.label }),
+      /* @__PURE__ */ jsx(Text, { style: styles.evidenceNote, children: item.note }),
+      typeof error === "string" && error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.evidenceError, children: error }) : null
+    ] }) })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "listitem",
+      accessibilityState: { disabled, busy: loading },
+      ...selected ? { "aria-current": "true" } : null,
+      "aria-disabled": disabled || void 0,
+      "aria-busy": loading || void 0,
+      "aria-invalid": error ? true : void 0,
+      style: [
+        styles.evidenceRow,
+        density === "compact" ? styles.evidenceRowCompact : null,
+        selected ? styles.evidenceRowSelected : null,
+        disabled ? styles.evidenceRowDisabled : null,
+        error ? { borderTopColor: theme.color.danger } : null,
+        style
+      ],
+      children: [
+        onPress && !loading ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `${item.label}. ${item.note}`,
+            accessibilityState: { selected, disabled },
+            disabled,
+            onPress: () => onPress(item),
+            style: styles.evidenceLead,
+            children: lead
+          }
+        ) : /* @__PURE__ */ jsx(View, { style: styles.evidenceLead, children: lead }),
+        /* @__PURE__ */ jsxs(View, { style: styles.evidenceTrail, children: [
+          /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: BADGE_VARIANT[tone], size: "sm", children: evidenceLabel(item.state, pay) }),
+          item.state === "missing" && onAttach ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "outline",
+              leadingIcon: "upload",
+              disabled,
+              onPress: () => onAttach(item),
+              children: attachLabel ?? labels.attach
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function DisputePanel({
+  dispute,
+  title,
+  description,
+  submitLabel,
+  acceptLabel,
+  canSubmit = true,
+  busy = false,
+  showGuidance = true,
+  onSubmitEvidence,
+  onAccept,
+  onAttach,
+  variant,
+  elevation,
+  padding,
+  tone,
+  density = "comfortable",
+  size,
+  error,
+  locale: localeProp,
+  labels: labelsProp,
+  platform,
+  style,
+  interactive = false,
+  onPress
+}) {
+  const labels = useLabels("refund", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("refund");
+  const android = isAndroidIdiom(theme, platform);
+  const { styles } = useStyles(sheet3);
+  const worth = disputeWorthDefending(dispute.amountMinor);
+  const threshold = money(DISPUTE_ACCEPT_THRESHOLD_MINOR, dispute.currency, { locale });
+  return /* @__PURE__ */ jsxs(
+    PanelRoot,
+    {
+      interactive,
+      onPress,
+      role: "region",
+      accessibilityLabel: title ?? labels.disputeTitle,
+      style: [
+        styles.panel,
+        density === "compact" ? styles.panelCompact : null,
+        refundShellStyle(theme, { variant, elevation, padding, tone }),
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              accessibilityRole: "header",
+              style: [styles.title, resolveTextRole(theme, "surfaceTitle", android)],
+              children: title ?? labels.disputeTitle
+            }
+          ),
+          /* @__PURE__ */ jsx(DisputeDeadline, { dispute, locale, labels: labelsProp }),
+          /* @__PURE__ */ jsx(Text, { style: styles.description, children: description ?? labels.disputeDescription })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.evidenceBlock, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.overline, children: labels.evidence }),
+          /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", children: dispute.evidence.map((item) => /* @__PURE__ */ jsx(
+            DisputeEvidenceRow,
+            {
+              item,
+              onAttach,
+              density,
+              labels: labelsProp
+            },
+            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: labels.guidance(worth, threshold, canSubmit) })
+        ] }) : null,
+        error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error }) : null,
+        /* @__PURE__ */ jsx(View, { style: [styles.actionRow, android ? styles.actionRowEnd : null], children: android ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", ...size ? { size } : null, onPress: onAccept, children: acceptLabel ?? labels.acceptDispute }),
+          /* @__PURE__ */ jsx(Button, { loading: busy, ...size ? { size } : null, onPress: onSubmitEvidence, children: submitLabel ?? labels.submitEvidence })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(View, { style: styles.actionShare, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              fullWidth: true,
+              loading: busy,
+              ...size ? { size } : null,
+              onPress: onSubmitEvidence,
+              children: submitLabel ?? labels.submitEvidence
+            }
+          ) }),
+          /* @__PURE__ */ jsx(View, { style: styles.actionShare, children: /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "outline", ...size ? { size } : null, onPress: onAccept, children: acceptLabel ?? labels.acceptDispute }) })
+        ] }) })
+      ]
+    }
+  );
+}
+var sheet3 = createStyleSheet((theme) => ({
+  panel: panelBaseStyle(theme),
+  panelCompact: { gap: theme.space.s3 },
+  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
+  },
+  deadlineCompact: { gap: theme.space.s3, padding: theme.space.s3 },
+  deadlineRow: { flexDirection: "row", flexWrap: "wrap", alignItems: "center" },
+  // Shrinkable, so a long figure ("6 working days") wraps inside the banner instead of running off its edge.
+  daysBox: { flexShrink: 1, minWidth: 0 },
+  daysCentre: { alignItems: "center" },
+  textCentre: { textAlign: "center" },
+  daysEnd: { alignItems: "flex-end" },
+  textEnd: { textAlign: theme.rtl ? "left" : "right" },
+  daysLeftSm: {
+    fontSize: theme.fontSize[24],
+    lineHeight: theme.fontSize[24] * theme.lineHeight.tight
+  },
+  daysLeftLg: {
+    fontSize: theme.fontSize[40],
+    lineHeight: theme.fontSize[40] * theme.lineHeight.tight
+  },
+  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: {
+    flexShrink: 1,
+    minWidth: 0,
+    maxWidth: "100%",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: theme.space.s5,
+    rowGap: theme.space.s2
+  },
+  fact: { gap: theme.space[2], flexShrink: 1, maxWidth: "100%" },
+  // 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: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans
+  },
+  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: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    color: theme.color.text3
+  },
+  evidenceRowCompact: { paddingVertical: theme.space.s2 },
+  evidenceRowSelected: { backgroundColor: theme.state.selected },
+  evidenceRowDisabled: { opacity: theme.state.disabledOpacity },
+  evidenceLead: {
+    flexDirection: "row",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: theme.panel.xs,
+    alignItems: "flex-start",
+    gap: theme.space.s3
+  },
+  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.
+  evidenceError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.danger
+  },
+  evidenceBody: { flexGrow: 1, flexShrink: 1, flexBasis: 0, 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
+  },
+  actionShare: { flexGrow: 1, flexBasis: 0 },
+  actionRowEnd: { justifyContent: "flex-end" },
+  // 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 };