@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-HZ6CNMAF.js

@@ -1,870 +0,0 @@
-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 };