@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-CPTOADB2.js → chunk-JCMTP3E4.js}

@@ -1,17 +1,24 @@
-import { OTP } from './chunk-67IZZ2MJ.js';
-import { SecurePayLabel } from './chunk-JV5YOTOB.js';
-import { Amount } from './chunk-QHAITQIF.js';
-import { DescriptionList } from './chunk-QIKT7LIB.js';
-import { Spinner } from './chunk-KQZ3GLHR.js';
-import { usePayLabels } from './chunk-GEIGMWNF.js';
-import { Badge } from './chunk-TN2ZNJUI.js';
+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 { Button } from './chunk-E2E3I5W2.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion } from './chunk-J64KGCGX.js';
-import * as React4 from 'react';
-import { Animated, Easing, View, Text, Pressable } from 'react-native';
+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';
@@ -42,6 +49,7 @@ var DEFAULT_LABELS = {
   nextStep: "Next step",
   declineCode: "decline_code",
   network: "network",
+  dismiss: "Dismiss",
   soft: "soft",
   hard: "hard",
   attempt: "attempt",
@@ -59,6 +67,10 @@ function StatePill({
   label,
   showCode = false,
   pulse = true,
+  size = "sm",
+  variant = "soft",
+  count,
+  error,
   labels: labelsProp,
   style
 }) {
@@ -68,8 +80,8 @@ function StatePill({
   const def = STATES[state];
   const pulsing = pulse && state === "processing";
   const words = label ?? stateText(state, pay).label;
-  const dim = React4.useRef(new Animated.Value(1)).current;
-  React4.useEffect(() => {
+  const dim = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
     if (!pulsing || theme.reduceMotion) {
       dim.setValue(1);
       return;
@@ -94,13 +106,15 @@ function StatePill({
       children: /* @__PURE__ */ jsx(
         Badge,
         {
-          variant: TONE_VARIANT[def.tone],
-          size: "sm",
-          accessibilityLabel: showCode ? `${words} ${state}` : words,
+          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: ink }], children: words }),
+            /* @__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
           ] })
         }
@@ -115,6 +129,7 @@ function ProcessingStepRow({
 }) {
   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,
@@ -142,7 +157,7 @@ function ProcessingStepRow({
               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
+                status === "done" ? styles.stepLabelDone : [styles.stepLabelPending, { color: panelMutedInk(theme, panelTone) }]
               )
             ],
             children: label
@@ -165,9 +180,24 @@ function ProcessingPanel({
   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,
-  style
+  platform,
+  style,
+  interactive = false,
+  onPress
 }) {
   const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
   const providerLocale = useLoamLocale();
@@ -177,48 +207,104 @@ function ProcessingPanel({
   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(View, { role: "region", accessibilityLabel: resolvedHeadline, style: [styles.panel, style], children: [
-    /* @__PURE__ */ jsx(Spinner, { size: "xl", accessibilityLabel: labels.inProgress }),
-    /* @__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: 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 })
-      }
-    )
-  ] });
+  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.semibold,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight
+    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,
@@ -254,7 +340,7 @@ var sheet = createStyleSheet((theme) => ({
   panel: {
     alignItems: "center",
     gap: theme.space.s5,
-    padding: theme.space.s5,
+    padding: theme.space[24],
     borderRadius: theme.radius.lg,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.color.border,
@@ -284,6 +370,13 @@ var sheet = createStyleSheet((theme) => ({
     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,
@@ -301,12 +394,8 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.infoOnSoft
   },
   asyncOverline: {
+    ...theme.type.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.infoOnSoft
   },
   referenceRow: {
@@ -318,9 +407,10 @@ var sheet = createStyleSheet((theme) => ({
   reference: {
     fontFamily: theme.font.mono,
     fontVariant: ["tabular-nums"],
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.infoOnSoft
+    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: {
@@ -338,41 +428,84 @@ var sheet = createStyleSheet((theme) => ({
     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,
   chromeLabel: chromeLabelProp,
   cancelLabel: cancelLabelProp,
+  elevation = "default",
+  loading = false,
+  variant = "default",
+  padding,
+  tone = "neutral",
+  error,
   children,
   labels: labelsProp,
   style,
-  onCancel
+  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);
+  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(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) }),
-      timeoutNote ? /* @__PURE__ */ jsx(Text, { style: styles.timeoutNote, children: timeoutNote }) : null
-    ] })
-  ] });
+  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,
@@ -384,18 +517,37 @@ function ChallengeSurface({
   busy = false,
   note,
   submitLabel,
+  variant = "default",
+  elevation = "default",
+  padding,
+  tone = "neutral",
+  density = "comfortable",
+  size = "lg",
+  disabled = false,
   labels: labelsProp,
   style,
   onChangeCode,
-  onSubmit
+  onSubmit,
+  interactive = false,
+  onPress
 }) {
   const labels = useLabels("paymentStatus", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("payment-status");
   const { styles } = useStyles(sheet2);
-  const errorId = React4.useId();
   return /* @__PURE__ */ jsxs(
-    View,
+    PanelRoot,
     {
-      style: [styles.challenge, style],
+      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 }),
@@ -403,30 +555,21 @@ function ChallengeSurface({
             /* @__PURE__ */ jsx(Text, { style: styles.authorise, children: labels.authorise }),
             amountLabel
           ] }),
-          /* @__PURE__ */ jsx(Text, { style: styles.sentTo, children: labels.codeSent(maskedContact) })
+          /* @__PURE__ */ jsx(Text, { style: [styles.sentTo, { color: panelMutedInk(theme, tone) }], children: labels.codeSent(maskedContact) })
         ] }),
-        /* @__PURE__ */ jsx(View, { role: "group", "aria-describedby": error ? errorId : void 0, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(View, { role: "group", children: /* @__PURE__ */ jsx(
           OTP,
           {
             length: digits,
             value: code,
-            error: error !== void 0,
+            error,
+            disabled,
             accessibilityLabel: labels.codeGroup(digits),
             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 ?? labels.approve }),
-        note ? /* @__PURE__ */ jsx(Text, { style: styles.note, children: note }) : null
+        /* @__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
       ]
     }
   );
@@ -438,8 +581,22 @@ var sheet2 = createStyleSheet((theme) => ({
     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",
@@ -488,6 +645,7 @@ var sheet2 = createStyleSheet((theme) => ({
     padding: theme.space.s5,
     backgroundColor: theme.color.surface
   },
+  challengeCompact: { gap: theme.space.s2 },
   challengeHead: { gap: theme.space.s1 },
   bankName: {
     fontFamily: theme.font.sans,
@@ -514,13 +672,6 @@ var sheet2 = createStyleSheet((theme) => ({
     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,
@@ -551,53 +702,133 @@ function DeclineNotice({
   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 = React4.useId();
+  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(
-    View,
+    Animated.View,
     {
       role: "alert",
       accessibilityLiveRegion: "assertive",
       accessibilityLabel: headline,
       testID: `decline-${decline.route}-${decline.soft ? "soft" : "hard"}`,
-      style: [styles.notice, style],
+      "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: "alert-circle", size: theme.icon.md, color: theme.color.dangerOnSoft }),
+          /* @__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, children: headline }),
+            /* @__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 })
         ] }),
-        /* @__PURE__ */ jsx(View, { style: styles.ladder, children: ladder.map((action) => /* @__PURE__ */ jsx(
-          Button,
+        error ? /* @__PURE__ */ jsx(PanelFooter, { error }) : null,
+        /* @__PURE__ */ jsx(
+          View,
           {
-            variant: action.kind === "primary" ? "primary" : "outline",
-            size: "sm",
-            leadingIcon: recoveryIcon(action.icon),
-            onPress: () => onAction(action),
-            children: action.label
-          },
-          `${action.kind}-${action.label}`
-        )) }),
+            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,
@@ -606,6 +837,7 @@ function DeclineNotice({
               accessibilityState: { expanded: showSupportDetails },
               ...expandedProps(showSupportDetails),
               "aria-controls": detailsId,
+              disabled,
               onPress: () => onToggleDetails(!showSupportDetails),
               style: styles.drawerTrigger,
               children: [
@@ -614,7 +846,7 @@ function DeclineNotice({
                   {
                     name: showSupportDetails ? "chevron-up" : "chevron-down",
                     size: theme.icon.xs,
-                    color: theme.color.text2
+                    color: theme.color.accentStrong
                   }
                 ),
                 /* @__PURE__ */ jsx(Text, { style: styles.drawerLabel, children: detailsLabel ?? labels.detailsForSupport })
@@ -624,7 +856,14 @@ function DeclineNotice({
           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.attempt,
+                value: labels.attemptOf(attempt, attemptsAllowed),
+                tabular: true
+              }
+            ),
             /* @__PURE__ */ jsx(DetailRow, { term: labels.intent, value: intentId })
           ] }) : null
         ] }) : null
@@ -669,12 +908,8 @@ var sheet3 = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface
   },
   overline: {
+    ...theme.type.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: {
@@ -684,6 +919,14 @@ var sheet3 = createStyleSheet((theme) => ({
     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",
@@ -694,10 +937,11 @@ var sheet3 = createStyleSheet((theme) => ({
   },
   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.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    color: theme.color.text2
+    fontSize: theme.ctl.fs.sm,
+    color: theme.color.accentStrong
   },
   details: {
     gap: theme.space.s1,
@@ -735,22 +979,43 @@ function ReceiptPanel({
   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
+  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 = React4.useRef(new Animated.Value(drawing ? 0 : 1)).current;
-  const ring = React4.useRef(new Animated.Value(0)).current;
-  React4.useEffect(() => {
+  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);
@@ -783,68 +1048,109 @@ function ReceiptPanel({
     }
   ];
   if (email) facts.push({ term: labels.sentTo, 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,
+  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.ring,
-                {
-                  opacity: ring.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
-                  transform: [
-                    { scale: ring.interpolate({ inputRange: [0, 1], outputRange: [1, RING_TO] }) }
-                  ]
-                }
+              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
+                  }
+                ) })
               ]
             }
-          ) : 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: labels.receiptStatus(title, receiptId) })
-      }
-    )
-  ] });
+          ),
+          /* @__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: {
@@ -883,6 +1189,18 @@ var sheet4 = createStyleSheet((theme) => ({
     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,
@@ -907,6 +1225,10 @@ var sheet4 = createStyleSheet((theme) => ({
     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",
@@ -921,5 +1243,9 @@ var sheet4 = createStyleSheet((theme) => ({
     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 };