@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-JCMTP3E4.js

@@ -0,0 +1,1251 @@
+import { PanelToneContext, panelMutedInk, PanelRoot, PanelFooter, panelSurface } from './chunk-R5T4VZ7Z.js';
+import { OTP } from './chunk-U3ETF22F.js';
+import { SecurePayLabel } from './chunk-7MCEJFWV.js';
+import { Amount } from './chunk-GVQQG435.js';
+import { DescriptionList } from './chunk-PFLNFIVB.js';
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { formatTime } from './chunk-CA3DUVYD.js';
+import { DismissButton } from './chunk-Z7I4ZSO6.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig, motionTiming, useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { StyleSheet, Animated, Easing, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { STATES, stateText, isTerminal, declineText, recoveryActions, declineHeadline, nothingChargedText, THREE_DS_TIMEOUT_SECONDS } from '@btndprojects/loam-pay';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { icons } from '@btndprojects/loam-icons';
+
+// src/payment-status/payment-status-labels.ts
+var DEFAULT_LABELS = {
+  inProgress: "Payment in progress",
+  headlineAsync: "Your payment is on its way",
+  headlineSync: "Taking your payment",
+  cancelPayment: "Cancel payment",
+  reference: "Reference",
+  processingStatus: (headline, step) => `${headline}. ${step}.`,
+  receiptTitle: "Payment complete",
+  method: "Method",
+  date: "Date",
+  receipt: "Receipt",
+  sentTo: "Sent to",
+  receiptStatus: (title, id) => `${title}. Receipt ${id}.`,
+  chromeLabel: "Your bank is verifying this payment",
+  cancelAndGoBack: "Cancel and go back",
+  approve: "Approve",
+  authorise: "Authorise",
+  codeSent: (contact) => `We sent a code to ${contact}.`,
+  codeGroup: (digits) => `${digits}-digit verification code`,
+  digit: (index, total) => `Digit ${index} of ${total}`,
+  detailsForSupport: "Details for support",
+  nextStep: "Next step",
+  declineCode: "decline_code",
+  network: "network",
+  dismiss: "Dismiss",
+  soft: "soft",
+  hard: "hard",
+  attempt: "attempt",
+  attemptOf: (attempt, allowed) => `${attempt} of ${allowed}`,
+  intent: "intent"
+};
+var TONE_VARIANT = {
+  good: "good",
+  warn: "warn",
+  danger: "danger",
+  info: "info"
+};
+function StatePill({
+  state,
+  label,
+  showCode = false,
+  pulse = true,
+  size = "sm",
+  variant = "soft",
+  count,
+  error,
+  labels: labelsProp,
+  style
+}) {
+  const theme = useLoamTheme("payment-status");
+  const { styles } = useStyles(sheet);
+  const pay = usePayLabels(labelsProp);
+  const def = STATES[state];
+  const pulsing = pulse && state === "processing";
+  const words = label ?? stateText(state, pay).label;
+  const dim = React.useRef(new Animated.Value(1)).current;
+  React.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: error ? "danger" : TONE_VARIANT[def.tone],
+          size,
+          outline: variant === "outline",
+          accessibilityLabel: typeof error === "string" && error ? error : `${showCode ? `${words} ${state}` : words}${count !== void 0 ? ` ${count}` : ""}`,
+          dot: true,
+          dotStyle: { opacity: dim },
+          children: /* @__PURE__ */ jsxs(View, { style: styles.pillRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, { color: error ? theme.color.dangerOnSoft : ink }], children: typeof error === "string" && error ? error : words }),
+            count !== void 0 && !error ? /* @__PURE__ */ jsx(Text, { style: [styles.pillCode, { color: ink }], children: count }) : null,
+            showCode ? /* @__PURE__ */ jsx(Text, { style: [styles.pillCode, { color: ink }], children: state }) : null
+          ] })
+        }
+      )
+    }
+  );
+}
+function ProcessingStepRow({
+  label,
+  status,
+  style
+}) {
+  const theme = useLoamTheme("payment-status");
+  const { styles } = useStyles(sheet);
+  const panelTone = React.useContext(PanelToneContext);
+  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, { color: panelMutedInk(theme, panelTone) }]
+              )
+            ],
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+function ProcessingPanel({
+  amount,
+  currency,
+  methodLabel,
+  async: isAsync = false,
+  headline,
+  eta,
+  steps,
+  asyncNote,
+  reference,
+  reservedUntil,
+  onCancel,
+  cancelLabel,
+  variant = "default",
+  elevation = "default",
+  padding,
+  tone = "neutral",
+  density = "comfortable",
+  size = "xl",
+  label,
+  motion,
+  orientation = "vertical",
+  loading = false,
+  error,
+  locale: localeProp,
+  roll = false,
+  labels: labelsProp,
+  platform,
+  style,
+  interactive = false,
+  onPress
+}) {
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("payment-status");
+  const { styles } = useStyles(sheet);
+  const resolvedHeadline = headline ?? (isAsync ? labels.headlineAsync : labels.headlineSync);
+  const active = steps.find((step) => step.status === "active");
+  const showAsyncBlock = isAsync && Boolean(asyncNote || reference || reservedUntil);
+  return /* @__PURE__ */ jsxs(
+    PanelRoot,
+    {
+      interactive,
+      onPress,
+      role: "region",
+      accessibilityLabel: resolvedHeadline,
+      "aria-busy": loading || void 0,
+      style: [
+        styles.panel,
+        density === "compact" ? styles.panelCompact : null,
+        panelSurface(theme, { variant, elevation, padding, tone, error }),
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size,
+            motion,
+            color: tone !== "neutral" ? softToneSkin(theme, tone).edge : void 0,
+            accessibilityLabel: label ?? labels.inProgress
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.centred, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              accessibilityRole: "header",
+              style: [
+                styles.headline,
+                resolveTextRole(theme, "surfaceTitle", isAndroidIdiom(theme, platform))
+              ],
+              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,
+              roll,
+              motion
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: [styles.method, { color: panelMutedInk(theme, tone) }], children: methodLabel })
+        ] }),
+        steps.length > 0 ? /* @__PURE__ */ jsx(
+          View,
+          {
+            role: "list",
+            accessibilityRole: "list",
+            style: [styles.ladder, orientation === "horizontal" ? styles.ladderRow : null],
+            children: /* @__PURE__ */ jsx(PanelToneContext.Provider, { value: tone, children: steps.map((step) => /* @__PURE__ */ jsx(ProcessingStepRow, { label: step.label, status: step.status }, step.label)) })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(PanelFooter, { loading, error, tone }),
+        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: labels.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 ?? labels.cancelPayment }) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            role: "status",
+            accessibilityLiveRegion: "polite",
+            style: styles.srOnly,
+            ...{ "aria-live": "polite" },
+            children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: active ? labels.processingStatus(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.bold,
+    fontSize: theme.fontSize[11],
+    lineHeight: theme.type.caption2.lineHeight,
+    textTransform: "uppercase",
+    letterSpacing: theme.fontSize[11] * theme.tracking.caps
+  },
+  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[24],
+    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 },
+  ladderRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    columnGap: theme.space.s4
+  },
+  panelCompact: { gap: theme.space.s3 },
+  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: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    color: theme.color.infoOnSoft
+  },
+  referenceRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s2
+  },
+  reference: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  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 ThreeDSFrame({
+  origin,
+  secondsLeft,
+  timeoutNote,
+  chromeLabel: chromeLabelProp,
+  cancelLabel: cancelLabelProp,
+  elevation = "default",
+  loading = false,
+  variant = "default",
+  padding,
+  tone = "neutral",
+  error,
+  children,
+  labels: labelsProp,
+  style,
+  onCancel,
+  interactive = false,
+  onPress
+}) {
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const chromeLabel = chromeLabelProp ?? labels.chromeLabel;
+  const cancelLabel = cancelLabelProp ?? labels.cancelAndGoBack;
+  const theme = useLoamTheme("payment-status");
+  const { styles } = useStyles(sheet2, {
+    elevation: elevation === "default" ? void 0 : elevation
+  });
+  const clamped = Math.max(0, Math.min(secondsLeft, THREE_DS_TIMEOUT_SECONDS));
+  return /* @__PURE__ */ jsxs(
+    PanelRoot,
+    {
+      interactive,
+      onPress,
+      role: "region",
+      accessibilityLabel: chromeLabel,
+      accessibilityState: loading ? { busy: true } : void 0,
+      "aria-busy": loading || void 0,
+      style: [
+        styles.frame,
+        panelSurface(theme, {
+          variant,
+          padding: padding === "none" ? void 0 : padding,
+          tone,
+          error
+        }),
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles.chrome,
+              tone !== "neutral" ? { backgroundColor: softToneSkin(theme, tone).fill } : null
+            ],
+            children: [
+              /* @__PURE__ */ jsx(SecurePayLabel, { label: chromeLabel }),
+              /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.origin, { color: panelMutedInk(theme, tone) }], children: origin }),
+              /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onCancel, children: cancelLabel }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { children: [
+          children,
+          loading ? /* @__PURE__ */ jsxs(View, { testID: "threeds-loading", style: styles.loading, children: [
+            /* @__PURE__ */ jsx(View, { style: { width: "40%" }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", decorative: true }) }),
+            /* @__PURE__ */ jsx(View, { style: { width: "70%" }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", decorative: true }) }),
+            /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.ctl.lg, decorative: true })
+          ] }) : null
+        ] }),
+        error ? /* @__PURE__ */ jsx(View, { style: styles.errorWrap, children: /* @__PURE__ */ jsx(PanelFooter, { error, tone }) }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.xs, color: panelMutedInk(theme, tone) }),
+          /* @__PURE__ */ jsx(Text, { role: "timer", style: styles.clock, children: formatTime(clamped) }),
+          timeoutNote ? /* @__PURE__ */ jsx(Text, { style: [styles.timeoutNote, { color: panelMutedInk(theme, tone) }], children: timeoutNote }) : null
+        ] })
+      ]
+    }
+  );
+}
+function ChallengeSurface({
+  bankName,
+  amountLabel,
+  maskedContact,
+  digits = 6,
+  code,
+  error,
+  busy = false,
+  note,
+  submitLabel,
+  variant = "default",
+  elevation = "default",
+  padding,
+  tone = "neutral",
+  density = "comfortable",
+  size = "lg",
+  disabled = false,
+  labels: labelsProp,
+  style,
+  onChangeCode,
+  onSubmit,
+  interactive = false,
+  onPress
+}) {
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("payment-status");
+  const { styles } = useStyles(sheet2);
+  return /* @__PURE__ */ jsxs(
+    PanelRoot,
+    {
+      interactive,
+      onPress,
+      "aria-disabled": disabled || void 0,
+      pointerEvents: disabled ? "none" : void 0,
+      style: [
+        styles.challenge,
+        density === "compact" ? styles.challengeCompact : null,
+        panelSurface(theme, { variant, elevation, padding, tone }),
+        disabled ? { opacity: theme.state.disabledOpacity } : null,
+        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: labels.authorise }),
+            amountLabel
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.sentTo, { color: panelMutedInk(theme, tone) }], children: labels.codeSent(maskedContact) })
+        ] }),
+        /* @__PURE__ */ jsx(View, { role: "group", children: /* @__PURE__ */ jsx(
+          OTP,
+          {
+            length: digits,
+            value: code,
+            error,
+            disabled,
+            accessibilityLabel: labels.codeGroup(digits),
+            onChangeText: onChangeCode
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Button, { size, fullWidth: true, loading: busy, onPress: () => onSubmit(code), children: submitLabel ?? labels.approve }),
+        note ? /* @__PURE__ */ jsx(Text, { style: [styles.note, { color: panelMutedInk(theme, tone) }], children: note }) : null
+      ]
+    }
+  );
+}
+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,
+    variants: {
+      elevation: {
+        flat: {},
+        raised: { ...theme.shadow.lg }
+      }
+    }
+  },
+  // The skeleton sits over the bank's surface until the page has loaded.
+  loading: {
+    ...StyleSheet.absoluteFillObject,
+    gap: theme.space.s3,
+    padding: theme.space.s5,
+    backgroundColor: theme.color.surface
+  },
+  errorWrap: { padding: theme.space.s3 },
+  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
+  },
+  challengeCompact: { gap: theme.space.s2 },
+  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
+  },
+  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,
+  nextLabel,
+  variant = "default",
+  size = "md",
+  density = "comfortable",
+  icon,
+  orientation = "horizontal",
+  align,
+  disabled = false,
+  loading = false,
+  error,
+  dismissible = false,
+  motion,
+  onDismiss,
+  labels: labelsProp,
+  platform,
+  style,
+  onAction,
+  onToggleDetails
+}) {
+  const theme = useLoamTheme("payment-status");
+  const android = isAndroidIdiom(theme, platform);
+  const { styles } = useStyles(sheet3);
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const text = declineText(decline, pay);
+  const detailsId = React.useId();
+  const ladder = actions ?? recoveryActions(decline, pay);
+  const headline = declineHeadline(decline, pay);
+  const animated = motion === "full" || motion === "reduced";
+  const opacity = React.useRef(new Animated.Value(animated ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!animated) return;
+    const anim = motion === "full" && !theme.reduceMotion ? Animated.spring(opacity, {
+      ...springConfig(theme, "ds"),
+      toValue: 1,
+      useNativeDriver: true
+    }) : Animated.timing(opacity, {
+      ...motionTiming("reduced"),
+      toValue: 1,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      role: "alert",
+      accessibilityLiveRegion: "assertive",
+      accessibilityLabel: headline,
+      testID: `decline-${decline.route}-${decline.soft ? "soft" : "hard"}`,
+      "aria-busy": loading || void 0,
+      style: [
+        styles.notice,
+        variant === "outline" ? { backgroundColor: theme.color.surface } : null,
+        variant === "elevated" ? theme.shadow.md : null,
+        size === "compact" ? styles.noticeCompact : null,
+        style,
+        animated ? { opacity } : null
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.headRow, children: [
+          /* @__PURE__ */ jsx(Icon, { name: icon ?? "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, resolveTextRole(theme, "surfaceTitle", android)],
+                children: headline
+              }
+            ),
+            /* @__PURE__ */ jsxs(Text, { style: styles.explain, children: [
+              `${text.user} `,
+              /* @__PURE__ */ jsx(Text, { style: styles.nothingCharged, children: nothingChargedText(pay) })
+            ] })
+          ] }),
+          dismissible || onDismiss ? /* @__PURE__ */ jsx(
+            DismissButton,
+            {
+              label: labels.dismiss,
+              onPress: () => onDismiss?.(),
+              color: theme.color.dangerOnSoft
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.nextBox, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.overline, children: nextLabel ?? labels.nextStep }),
+          /* @__PURE__ */ jsx(Text, { style: styles.nextBody, children: text.next })
+        ] }),
+        error ? /* @__PURE__ */ jsx(PanelFooter, { error }) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.ladder,
+              android ? styles.ladderEnd : null,
+              density === "compact" ? styles.ladderCompact : null,
+              orientation === "vertical" ? styles.ladderVertical : null,
+              align ? {
+                justifyContent: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center"
+              } : null
+            ],
+            children: (android ? [
+              ...ladder.filter((a) => a.kind !== "primary"),
+              ...ladder.filter((a) => a.kind === "primary")
+            ] : ladder).map((action) => /* @__PURE__ */ jsx(
+              View,
+              {
+                style: android || orientation === "vertical" ? orientation === "vertical" ? styles.ladderStack : null : styles.ladderShare,
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    fullWidth: !android,
+                    variant: action.kind === "primary" ? "primary" : "outline",
+                    size: "sm",
+                    loading,
+                    disabled,
+                    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,
+              disabled,
+              onPress: () => onToggleDetails(!showSupportDetails),
+              style: styles.drawerTrigger,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: showSupportDetails ? "chevron-up" : "chevron-down",
+                    size: theme.icon.xs,
+                    color: theme.color.accentStrong
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { style: styles.drawerLabel, children: detailsLabel ?? labels.detailsForSupport })
+              ]
+            }
+          ),
+          showSupportDetails ? /* @__PURE__ */ jsxs(View, { nativeID: detailsId, style: styles.details, children: [
+            /* @__PURE__ */ jsx(DetailRow, { term: labels.declineCode, value: decline.code }),
+            /* @__PURE__ */ jsx(DetailRow, { term: labels.network, value: decline.soft ? labels.soft : labels.hard }),
+            /* @__PURE__ */ jsx(
+              DetailRow,
+              {
+                term: labels.attempt,
+                value: labels.attemptOf(attempt, attemptsAllowed),
+                tabular: true
+              }
+            ),
+            /* @__PURE__ */ jsx(DetailRow, { term: labels.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: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    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 },
+  // iOS: the actions share the width (F30); Android: end-aligned, outline at
+  // the start and primary at the end.
+  ladderShare: { flexGrow: 1, flexBasis: "auto" },
+  ladderCompact: { gap: theme.space.s1 },
+  ladderVertical: { flexDirection: "column", alignItems: "stretch" },
+  ladderStack: { alignSelf: "stretch" },
+  noticeCompact: { padding: theme.space.s3, gap: theme.space.s2 },
+  ladderEnd: { justifyContent: "flex-end" },
+  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,
+    // F39: the reason toggle is the link Button at sm — accent-strong, the sm
+    // control label.
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.ctl.fs.sm,
+    color: theme.color.accentStrong
+  },
+  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: titleProp,
+  methodLabel,
+  dateLabel,
+  receiptId,
+  email,
+  nextNote,
+  actions,
+  motion = "full",
+  variant = "default",
+  elevation = "default",
+  padding,
+  tone = "neutral",
+  density = "comfortable",
+  size = "hero",
+  roll,
+  unit,
+  delta,
+  caption,
+  orientation = "vertical",
+  align = "center",
+  loading = false,
+  error,
+  locale: localeProp,
+  labels: labelsProp,
+  platform,
+  style,
+  onAction,
+  interactive = false,
+  onPress
+}) {
+  const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const title = titleProp ?? labels.receiptTitle;
+  const theme = useLoamTheme("payment-status");
+  const tinted = tone !== "neutral";
+  const deltaSign = delta?.trim().charAt(0);
+  const deltaInk = tone === "good" && deltaSign === "+" ? theme.color.goodOnSoft : tone === "danger" && (deltaSign === "-" || deltaSign === "\u2212") ? theme.color.dangerOnSoft : theme.color.text2;
+  const android = isAndroidIdiom(theme, platform);
+  const { styles } = useStyles(sheet4);
+  const resolved = useResolvedMotion(motion, "payment-status");
+  const drawing = resolved === "full";
+  const plate = React.useRef(new Animated.Value(drawing ? 0 : 1)).current;
+  const ring = React.useRef(new Animated.Value(0)).current;
+  React.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: labels.method, description: methodLabel },
+    { term: labels.date, description: dateLabel },
+    {
+      term: labels.receipt,
+      description: /* @__PURE__ */ jsx(Text, { selectable: true, style: styles.mono, children: receiptId })
+    }
+  ];
+  if (email) facts.push({ term: labels.sentTo, description: email });
+  return /* @__PURE__ */ jsxs(
+    PanelRoot,
+    {
+      interactive,
+      onPress,
+      role: "region",
+      accessibilityLabel: title,
+      "aria-busy": loading || void 0,
+      style: [
+        styles.panel,
+        density === "compact" ? styles.panelCompact : null,
+        align === "start" ? styles.panelStart : null,
+        panelSurface(theme, { variant, elevation, padding, tone, error }),
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: orientation === "horizontal" ? styles.headRowH : styles.headRowV, 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, align === "start" ? styles.headStart : null], children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                accessibilityRole: "header",
+                style: [styles.title, resolveTextRole(theme, "surfaceTitle", android)],
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Amount,
+              {
+                minor: amount,
+                currency,
+                size,
+                locale,
+                roll,
+                unit,
+                delta: tinted ? void 0 : delta,
+                caption: tinted ? void 0 : caption
+              }
+            ),
+            tinted && delta ? /* @__PURE__ */ jsx(Text, { style: [styles.delta, { color: deltaInk }], children: delta }) : null,
+            tinted && caption ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: styles.facts, children: /* @__PURE__ */ jsx(DescriptionList, { layout: "inline", density: "compact", items: facts }) }),
+        /* @__PURE__ */ jsx(PanelFooter, { loading, error, tone }),
+        nextNote ? /* @__PURE__ */ jsx(Text, { style: styles.nextNote, children: nextNote }) : null,
+        actions && actions.length > 0 ? /* @__PURE__ */ jsx(View, { style: [styles.actions, android ? styles.actionsEnd : null], children: footerOrder(actions, android).map((action) => /* @__PURE__ */ jsx(View, { style: android ? null : styles.actionShare, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            fullWidth: !android,
+            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: labels.receiptStatus(title, 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 },
+  delta: {
+    fontFamily: theme.font.sans,
+    fontVariant: ["tabular-nums"],
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.fontSize[13]
+  },
+  caption: { fontFamily: theme.font.sans, fontSize: theme.fontSize[12], color: theme.color.text2 },
+  headStart: { alignItems: "flex-start" },
+  headRowV: { alignItems: "center", gap: theme.space.s5 },
+  headRowH: { flexDirection: "row", alignItems: "center", gap: theme.space.s4 },
+  panelCompact: { gap: theme.space.s3 },
+  panelStart: { alignItems: "flex-start" },
+  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"
+  },
+  // iOS: the footer actions share the width (F29); Android: end-aligned,
+  // outline at the start and primary at the end.
+  actionShare: { flexGrow: 1, flexBasis: "auto" },
+  actionsEnd: { justifyContent: "flex-end" },
+  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"
+  }
+}));
+function footerOrder(list, android) {
+  if (!android) return [...list];
+  return [...list.filter((a) => a.kind !== "primary"), ...list.filter((a) => a.kind === "primary")];
+}
+
+export { ChallengeSurface, DeclineNotice, ProcessingPanel, ProcessingStepRow, ReceiptPanel, StatePill, ThreeDSFrame, recoveryIcon };