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

package/dist/chunk-HZ6CNMAF.js

@@ -0,0 +1,870 @@
+import { OTP } from './chunk-52X2VYTD.js';
+import { SecurePayLabel } from './chunk-7CFF4HXS.js';
+import { Amount } from './chunk-VBOXAEPI.js';
+import { DescriptionList } from './chunk-TUTI5HOZ.js';
+import { Badge } from './chunk-SBMNWWBV.js';
+import { Spinner } from './chunk-O7AE6DAF.js';
+import { expandedProps } from './chunk-RQ3HASCC.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React4 from 'react';
+import { Animated, Easing, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { STATES, isTerminal, recoveryActions, declineHeadline, NOTHING_CHARGED, THREE_DS_TIMEOUT_SECONDS } from '@btndprojects/loam-pay';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { icons } from '@btndprojects/loam-icons';
+
+var TONE_VARIANT = {
+  good: "good",
+  warn: "warn",
+  danger: "danger",
+  info: "info"
+};
+function StatePill({
+  state,
+  label,
+  showCode = false,
+  pulse = true,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const def = STATES[state];
+  const pulsing = pulse && state === "processing";
+  const words = label ?? def.label;
+  const dim = React4.useRef(new Animated.Value(1)).current;
+  React4.useEffect(() => {
+    if (!pulsing || theme.reduceMotion) {
+      dim.setValue(1);
+      return;
+    }
+    const half = theme.loop.pulse / 2;
+    const easing = Easing.bezier(...theme.easing.inOut);
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(dim, { toValue: 0.4, duration: half, easing, useNativeDriver: true }),
+        Animated.timing(dim, { toValue: 1, duration: half, easing, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulsing, theme.reduceMotion, theme.loop.pulse, theme.easing.inOut, dim]);
+  const ink = def.tone === "good" ? theme.color.goodOnSoft : def.tone === "warn" ? theme.color.warnOnSoft : def.tone === "danger" ? theme.color.dangerOnSoft : theme.color.infoOnSoft;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: `state-pill-${state}${isTerminal(state) ? "-terminal" : ""}`,
+      style,
+      children: /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: TONE_VARIANT[def.tone],
+          size: "sm",
+          accessibilityLabel: showCode ? `${words} ${state}` : words,
+          dot: true,
+          dotStyle: { opacity: dim },
+          children: /* @__PURE__ */ jsxs(View, { style: styles.pillRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, { color: ink }], children: words }),
+            showCode ? /* @__PURE__ */ jsx(Text, { style: [styles.pillCode, { color: ink }], children: state }) : null
+          ] })
+        }
+      )
+    }
+  );
+}
+function ProcessingStepRow({
+  label,
+  status,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const currentAttr = status === "active" ? { "aria-current": "step" } : {};
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "listitem",
+      testID: `processing-step-${status}`,
+      ...currentAttr,
+      style: [styles.stepRow, style],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: styles.stepMarker,
+            "aria-hidden": true,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            children: status === "done" ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: theme.color.good }) : status === "active" ? /* @__PURE__ */ jsx(View, { style: [styles.stepDot, { backgroundColor: theme.color.accent }] }) : /* @__PURE__ */ jsx(View, { style: [styles.stepDot, styles.stepDotHollow] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.stepLabel,
+              status === "active" ? styles.stepLabelActive : (
+                // The finished step settles on a *measured* ink rather than an
+                // opacity — see the module note.
+                status === "done" ? styles.stepLabelDone : styles.stepLabelPending
+              )
+            ],
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+function ProcessingPanel({
+  amount,
+  currency,
+  methodLabel,
+  async: isAsync = false,
+  headline,
+  eta,
+  steps,
+  asyncNote,
+  reference,
+  reservedUntil,
+  onCancel,
+  cancelLabel = "Cancel payment",
+  locale,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const resolvedHeadline = headline ?? (isAsync ? "Your payment is on its way" : "Taking your payment");
+  const active = steps.find((step) => step.status === "active");
+  const showAsyncBlock = isAsync && Boolean(asyncNote || reference || reservedUntil);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "region",
+      accessibilityLabel: resolvedHeadline,
+      style: [styles.panel, style],
+      children: [
+        /* @__PURE__ */ jsx(Spinner, { size: "xl", accessibilityLabel: "Payment in progress" }),
+        /* @__PURE__ */ jsxs(View, { style: styles.centred, children: [
+          /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.headline, children: resolvedHeadline }),
+          eta ? /* @__PURE__ */ jsx(Text, { style: styles.eta, children: eta }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.centred, children: [
+          /* @__PURE__ */ jsx(Amount, { minor: amount, currency, size: "lg", weight: "bold", locale }),
+          /* @__PURE__ */ jsx(Text, { style: styles.method, children: methodLabel })
+        ] }),
+        steps.length > 0 ? /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.ladder, children: steps.map((step) => /* @__PURE__ */ jsx(ProcessingStepRow, { label: step.label, status: step.status }, step.label)) }) : null,
+        showAsyncBlock ? /* @__PURE__ */ jsxs(View, { style: styles.asyncBlock, children: [
+          asyncNote ? /* @__PURE__ */ jsx(Text, { style: styles.asyncBody, children: asyncNote }) : null,
+          reference ? /* @__PURE__ */ jsxs(View, { style: styles.referenceRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.asyncOverline, children: "Reference" }),
+            /* @__PURE__ */ jsx(Text, { selectable: true, style: styles.reference, children: reference })
+          ] }) : null,
+          reservedUntil ? /* @__PURE__ */ jsxs(View, { style: styles.reservedRow, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.xs, color: theme.color.infoOnSoft }),
+            /* @__PURE__ */ jsx(Text, { style: styles.reserved, children: reservedUntil })
+          ] }) : null
+        ] }) : null,
+        onCancel ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onCancel, children: cancelLabel }) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            role: "status",
+            accessibilityLiveRegion: "polite",
+            style: styles.srOnly,
+            ...{ "aria-live": "polite" },
+            children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: active ? `${resolvedHeadline}. ${active.label}.` : resolvedHeadline })
+          }
+        )
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  pillRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  pillLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight
+  },
+  pillCode: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    lineHeight: theme.type.caption2.lineHeight
+  },
+  stepRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  stepMarker: {
+    width: theme.space[20],
+    height: theme.space[20],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  stepDot: {
+    width: theme.space[10],
+    height: theme.space[10],
+    borderRadius: theme.radius.full
+  },
+  stepDotHollow: {
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: "transparent"
+  },
+  stepLabel: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight
+  },
+  stepLabelActive: { fontWeight: theme.fontWeight.semibold, color: theme.color.text },
+  stepLabelDone: { color: theme.color.text2 },
+  stepLabelPending: { color: theme.color.text3 },
+  panel: {
+    alignItems: "center",
+    gap: theme.space.s5,
+    padding: theme.space.s5,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  centred: { alignItems: "center", gap: theme.space.s1 },
+  headline: {
+    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,
+    textAlign: "center"
+  },
+  eta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  method: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  ladder: { alignSelf: "stretch", gap: theme.space.s2 },
+  asyncBlock: {
+    alignSelf: "stretch",
+    gap: theme.space.s2,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    // The soft tint always carries its tone edge.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.info,
+    backgroundColor: theme.color.infoSoft
+  },
+  asyncBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.infoOnSoft
+  },
+  asyncOverline: {
+    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.infoOnSoft
+  },
+  referenceRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s2
+  },
+  reference: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.infoOnSoft
+  },
+  reservedRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  reserved: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.infoOnSoft
+  },
+  // Announced, never drawn: the panel already states every one of these facts
+  // visually, and repeating them on screen would be the same sentence twice.
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  }
+}));
+function formatTime(seconds) {
+  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+  const m = Math.floor(s / 60);
+  return `${m}:${String(s % 60).padStart(2, "0")}`;
+}
+function ThreeDSFrame({
+  origin,
+  secondsLeft,
+  timeoutNote = "If the bank does not answer in time we will bring you back here. Nothing has been charged.",
+  chromeLabel = "Your bank is verifying this payment",
+  cancelLabel = "Cancel and go back",
+  children,
+  style,
+  onCancel
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet2);
+  const clamped = Math.max(0, Math.min(secondsLeft, THREE_DS_TIMEOUT_SECONDS));
+  return /* @__PURE__ */ jsxs(View, { role: "region", accessibilityLabel: chromeLabel, style: [styles.frame, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.chrome, children: [
+      /* @__PURE__ */ jsx(SecurePayLabel, { label: chromeLabel }),
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.origin, children: origin }),
+      /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onCancel, children: cancelLabel }) })
+    ] }),
+    /* @__PURE__ */ jsx(View, { children }),
+    /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.xs, color: theme.color.text3 }),
+      /* @__PURE__ */ jsx(Text, { role: "timer", style: styles.clock, children: formatTime(clamped) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.timeoutNote, children: timeoutNote })
+    ] })
+  ] });
+}
+function ChallengeSurface({
+  bankName,
+  amountLabel,
+  maskedContact,
+  digits = 6,
+  code,
+  error,
+  busy = false,
+  note = "Codes expire after 8 minutes.",
+  submitLabel = "Approve",
+  style,
+  onChangeCode,
+  onSubmit
+}) {
+  const { styles } = useStyles(sheet2);
+  const errorId = React4.useId();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [styles.challenge, style],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.challengeHead, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.bankName, children: bankName }),
+          /* @__PURE__ */ jsxs(View, { style: styles.authoriseRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.authorise, children: "Authorise" }),
+            amountLabel
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.sentTo, children: `We sent a code to ${maskedContact}.` })
+        ] }),
+        /* @__PURE__ */ jsx(View, { role: "group", "aria-describedby": error ? errorId : void 0, children: /* @__PURE__ */ jsx(
+          OTP,
+          {
+            length: digits,
+            value: code,
+            error: error !== void 0,
+            accessibilityLabel: `${digits}-digit verification code`,
+            onChangeText: onChangeCode
+          }
+        ) }),
+        error ? /* @__PURE__ */ jsx(Text, { nativeID: errorId, role: "alert", accessibilityLiveRegion: "assertive", style: styles.error, children: error }) : null,
+        /* @__PURE__ */ jsx(Button, { size: "lg", fullWidth: true, loading: busy, onPress: () => onSubmit(code), children: submitLabel }),
+        /* @__PURE__ */ jsx(Text, { style: styles.note, children: note })
+      ]
+    }
+  );
+}
+var sheet2 = createStyleSheet((theme) => ({
+  frame: {
+    alignSelf: "stretch",
+    overflow: "hidden",
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  chrome: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: theme.space.s3,
+    rowGap: theme.space.s1,
+    padding: theme.space.s3,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  origin: {
+    flexShrink: 1,
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  pushEnd: { marginStart: "auto" },
+  footer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: theme.space.s2,
+    rowGap: theme.space.s1,
+    padding: theme.space.s3,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  clock: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  timeoutNote: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  challenge: {
+    gap: theme.space.s4,
+    padding: theme.space.s5,
+    backgroundColor: theme.color.surface
+  },
+  challengeHead: { gap: theme.space.s1 },
+  bankName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  authoriseRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s1
+  },
+  authorise: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  sentTo: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  error: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.danger
+  },
+  note: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  }
+}));
+function recoveryIcon(name) {
+  return Object.prototype.hasOwnProperty.call(icons, name) ? name : "refresh";
+}
+function DetailRow({
+  term,
+  value,
+  tabular = false
+}) {
+  const { styles } = useStyles(sheet3);
+  return /* @__PURE__ */ jsxs(View, { style: styles.detailRow, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.detailTerm, children: term }),
+    /* @__PURE__ */ jsx(Text, { selectable: true, style: [styles.detailValue, tabular ? styles.tabular : null], children: value })
+  ] });
+}
+function DeclineNotice({
+  decline,
+  attempt,
+  attemptsAllowed = 3,
+  intentId,
+  actions,
+  showSupportDetails = false,
+  detailsLabel = "Details for support",
+  nextLabel = "Next step",
+  style,
+  onAction,
+  onToggleDetails
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet3);
+  const detailsId = React4.useId();
+  const ladder = actions ?? recoveryActions(decline);
+  const headline = declineHeadline(decline);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "alert",
+      accessibilityLiveRegion: "assertive",
+      accessibilityLabel: headline,
+      testID: `decline-${decline.route}-${decline.soft ? "soft" : "hard"}`,
+      style: [styles.notice, style],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.headRow, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.md, color: theme.color.dangerOnSoft }),
+          /* @__PURE__ */ jsxs(View, { style: styles.headBody, children: [
+            /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.headline, children: headline }),
+            /* @__PURE__ */ jsxs(Text, { style: styles.explain, children: [
+              `${decline.user} `,
+              /* @__PURE__ */ jsx(Text, { style: styles.nothingCharged, children: NOTHING_CHARGED })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.nextBox, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.overline, children: nextLabel }),
+          /* @__PURE__ */ jsx(Text, { style: styles.nextBody, children: decline.next })
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: styles.ladder, children: ladder.map((action) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: action.kind === "primary" ? "primary" : "outline",
+            size: "sm",
+            leadingIcon: recoveryIcon(action.icon),
+            onPress: () => onAction(action),
+            children: action.label
+          },
+          `${action.kind}-${action.label}`
+        )) }),
+        onToggleDetails ? /* @__PURE__ */ jsxs(View, { style: styles.drawer, children: [
+          /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityState: { expanded: showSupportDetails },
+              ...expandedProps(showSupportDetails),
+              "aria-controls": detailsId,
+              onPress: () => onToggleDetails(!showSupportDetails),
+              style: styles.drawerTrigger,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: showSupportDetails ? "chevron-up" : "chevron-down",
+                    size: theme.icon.xs,
+                    color: theme.color.text2
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { style: styles.drawerLabel, children: detailsLabel })
+              ]
+            }
+          ),
+          showSupportDetails ? /* @__PURE__ */ jsxs(View, { nativeID: detailsId, style: styles.details, children: [
+            /* @__PURE__ */ jsx(DetailRow, { term: "decline_code", value: decline.code }),
+            /* @__PURE__ */ jsx(DetailRow, { term: "network", value: decline.soft ? "soft" : "hard" }),
+            /* @__PURE__ */ jsx(DetailRow, { term: "attempt", value: `${attempt} of ${attemptsAllowed}`, tabular: true }),
+            /* @__PURE__ */ jsx(DetailRow, { term: "intent", value: intentId })
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+var sheet3 = createStyleSheet((theme) => ({
+  notice: {
+    alignSelf: "stretch",
+    gap: theme.space.s3,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.lg,
+    // The soft fill always carries its tone edge: the tint collapses to the
+    // plain surface under high contrast, and the edge is then the only thing
+    // drawing the block.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.danger,
+    backgroundColor: theme.color.dangerSoft
+  },
+  headRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  headBody: { flex: 1, gap: theme.space.s1 },
+  headline: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.dangerOnSoft
+  },
+  explain: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.dangerOnSoft
+  },
+  nothingCharged: { fontWeight: theme.fontWeight.bold },
+  nextBox: {
+    gap: theme.space.s1,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  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
+  },
+  nextBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text
+  },
+  ladder: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space.s2 },
+  drawer: { gap: theme.space.s2 },
+  drawerTrigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s1,
+    minHeight: theme.hit.sm
+  },
+  drawerLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  details: {
+    gap: theme.space.s1,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  detailRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s3 },
+  detailTerm: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  detailValue: {
+    flexShrink: 1,
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  tabular: { fontVariant: ["tabular-nums"] }
+}));
+var RING_TO = 1.6;
+function ReceiptPanel({
+  amount,
+  currency,
+  title = "Payment complete",
+  methodLabel,
+  dateLabel,
+  receiptId,
+  email,
+  nextNote,
+  actions,
+  motion = "full",
+  locale,
+  style,
+  onAction
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet4);
+  const resolved = useResolvedMotion(motion);
+  const drawing = resolved === "full";
+  const plate = React4.useRef(new Animated.Value(drawing ? 0 : 1)).current;
+  const ring = React4.useRef(new Animated.Value(0)).current;
+  React4.useEffect(() => {
+    if (!drawing) {
+      plate.setValue(1);
+      ring.setValue(0);
+      return;
+    }
+    const easing = Easing.bezier(...theme.easing.out);
+    const anim = Animated.parallel([
+      Animated.timing(plate, {
+        toValue: 1,
+        duration: theme.duration.slow,
+        easing,
+        useNativeDriver: true
+      }),
+      Animated.timing(ring, {
+        toValue: 1,
+        duration: theme.duration.slower,
+        easing,
+        useNativeDriver: true
+      })
+    ]);
+    anim.start();
+    return () => anim.stop();
+  }, [drawing, plate, ring, theme.easing.out, theme.duration.slow, theme.duration.slower]);
+  const facts = [
+    { term: "Method", description: methodLabel },
+    { term: "Date", description: dateLabel },
+    {
+      term: "Receipt",
+      description: /* @__PURE__ */ jsx(Text, { selectable: true, style: styles.mono, children: receiptId })
+    }
+  ];
+  if (email) facts.push({ term: "Sent to", description: email });
+  return /* @__PURE__ */ jsxs(View, { role: "region", accessibilityLabel: title, style: [styles.panel, style], children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: styles.mark,
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: [
+          drawing ? /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: [
+                styles.ring,
+                {
+                  opacity: ring.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+                  transform: [
+                    { scale: ring.interpolate({ inputRange: [0, 1], outputRange: [1, RING_TO] }) }
+                  ]
+                }
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Animated.View, { style: [styles.plate, { transform: [{ scale: plate }] }], children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "check",
+              size: theme.icon.lg,
+              color: theme.color.goodOnSoft,
+              strokeWidth: theme.icon.strokeBold
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
+      /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, children: title }),
+      /* @__PURE__ */ jsx(Amount, { minor: amount, currency, size: "hero", locale })
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.facts, children: /* @__PURE__ */ jsx(DescriptionList, { layout: "inline", density: "compact", items: facts }) }),
+    nextNote ? /* @__PURE__ */ jsx(Text, { style: styles.nextNote, children: nextNote }) : null,
+    actions && actions.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.actions, children: actions.map((action) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: action.kind === "primary" ? "primary" : "outline",
+        leadingIcon: action.icon && Object.prototype.hasOwnProperty.call(icons, action.icon) ? action.icon : void 0,
+        onPress: () => onAction?.(action),
+        children: action.label
+      },
+      action.id
+    )) }) : null,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "status",
+        accessibilityLiveRegion: "polite",
+        style: styles.srOnly,
+        ...{ "aria-live": "polite" },
+        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: `${title}. Receipt ${receiptId}.` })
+      }
+    )
+  ] });
+}
+var sheet4 = createStyleSheet((theme) => ({
+  panel: {
+    alignSelf: "stretch",
+    alignItems: "center",
+    gap: theme.space.s5,
+    padding: theme.space.s5,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  mark: {
+    width: theme.space[56],
+    height: theme.space[56],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  ring: {
+    position: "absolute",
+    width: theme.space[56],
+    height: theme.space[56],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.good
+  },
+  plate: {
+    width: theme.space[56],
+    height: theme.space[56],
+    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
+  },
+  head: { alignItems: "center", 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,
+    textAlign: "center"
+  },
+  facts: { alignSelf: "stretch" },
+  mono: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  nextNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  actions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s2
+  },
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  }
+}));
+
+export { ChallengeSurface, DeclineNotice, ProcessingPanel, ProcessingStepRow, ReceiptPanel, StatePill, ThreeDSFrame, recoveryIcon };