@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-ADHPJALR.js

@@ -0,0 +1,3051 @@
+import { List, ListRow } from './chunk-JA6TK7H2.js';
+import { Amount, PriceRow } from './chunk-GVQQG435.js';
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { Progress } from './chunk-L2WMOA2V.js';
+import { Checkbox } from './chunk-KNILMM4H.js';
+import { Dialog } from './chunk-AQ5FIG74.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 { Switch } from './chunk-VFDQAAIW.js';
+import { SegmentedControl } from './chunk-NZG75DGA.js';
+import { RadioGroup, RadioGroupItem } from './chunk-PK7BN3MI.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useInputPlatform, TextField } from './chunk-KXLDK6HB.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React7 from 'react';
+import { Platform, ScrollView, Text, View, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { yearlySaving, planDelta, planCta, yearlyMonthly, money } from '@btndprojects/loam-pay';
+
+// src/commerce/commerce-labels.ts
+var TOGGLE_ROW_LABELS = {
+  withDescription: (label, description) => `${label}, ${description}`
+};
+var SETTINGS_SCREEN_LABELS = {
+  cancel: "Cancel",
+  close: "Close",
+  save: "Save",
+  saving: "Saving\u2026",
+  selectRow: (label, value) => `${label}, ${value}`
+};
+var NOTIFICATION_PREFERENCES_LABELS = {
+  systemOn: "System notifications are on. Turn categories off here rather than muting the whole app.",
+  systemOff: "Notifications are turned off for this app in system settings. Your choices below are kept, and take effect as soon as you turn them back on.",
+  openSettings: "Open Settings"
+};
+var DELETE_ACCOUNT_LABELS = {
+  title: "Delete account",
+  whatIsDeleted: "What is deleted",
+  whatIsKept: "What is kept, and why",
+  deletionCompletes: (duration) => `Deletion completes ${duration}.`,
+  typeToConfirm: (phrase) => `Type ${phrase} to confirm`,
+  confirm: "Delete my account",
+  busy: "Deleting\u2026",
+  keep: "Keep my account"
+};
+var MANAGE_SUBSCRIPTION_LABELS = {
+  statusActive: "Active",
+  statusTrial: "Trial",
+  statusCanceled: "Canceled",
+  statusPastDue: "Past due",
+  renews: "renews",
+  renewalLine: (price, renews, date) => `${price} \xB7 ${renews} ${date}`,
+  payment: "Payment",
+  paymentLine: (payment, method) => `${payment} \xB7 ${method}`,
+  cancel: "Cancel subscription"
+};
+function DeleteAccountScreen({
+  title: titleProp,
+  deletes,
+  retains,
+  duration,
+  confirmationPhrase,
+  confirmationLabel,
+  confirmationValue,
+  onConfirmationChange,
+  confirmLabel: confirmLabelProp,
+  onConfirm,
+  loading = false,
+  busyLabel: busyLabelProp,
+  cancelLabel: cancelLabelProp,
+  onCancel,
+  labels: labelsProp,
+  platform,
+  density = "standard",
+  size,
+  error,
+  disabled = false
+}) {
+  const os = useInputPlatform(platform);
+  const { styles } = useStyles(sheet, { os });
+  const labels = useLabels("deleteAccount", DELETE_ACCOUNT_LABELS, labelsProp);
+  const title = titleProp ?? labels.title;
+  const confirmLabel = confirmLabelProp ?? labels.confirm;
+  const busyLabel = busyLabelProp ?? labels.busy;
+  const cancelLabel = cancelLabelProp ?? labels.keep;
+  const confirmationName = confirmationLabel ?? labels.typeToConfirm(confirmationPhrase);
+  const theme = useLoamTheme("commerce");
+  const android = isAndroidIdiom(theme, os);
+  const isControlled = confirmationValue !== void 0;
+  const [internal, setInternal] = React7.useState("");
+  const typed = isControlled ? confirmationValue : internal;
+  const armed = typed.trim() === confirmationPhrase;
+  const change = (next) => {
+    if (!isControlled) setInternal(next);
+    onConfirmationChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    ScrollView,
+    {
+      style: styles.screen,
+      contentContainerStyle: [
+        styles.scroll,
+        density === "compact" ? styles.scrollCompact : null,
+        density === "comfortable" ? styles.scrollComfortable : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            style: [styles.title, resolveTextRole(theme, "surfaceTitle", android)],
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.caption, accessibilityRole: "header", children: labels.whatIsDeleted }),
+          deletes.map((d) => /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "trash", size: theme.icon.sm, color: theme.color.danger }),
+            /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: d })
+          ] }, d))
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.caption, accessibilityRole: "header", children: labels.whatIsKept }),
+          retains.map((r) => /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "lock", size: theme.icon.sm, color: theme.color.text3 }),
+            /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: r })
+          ] }, r))
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: styles.duration, children: /* @__PURE__ */ jsx(Text, { style: styles.durationText, children: labels.deletionCompletes(duration) }) }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: confirmationName,
+            value: typed,
+            onChangeText: change,
+            autoCapitalize: "characters",
+            autoCorrect: false,
+            accessibilityLabel: confirmationName,
+            size,
+            error,
+            editable: !disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "danger",
+            size: size ?? "lg",
+            fullWidth: true,
+            disabled: !armed || disabled,
+            loading,
+            accessibilityLabel: loading ? busyLabel : confirmLabel,
+            onPress: armed && !loading ? onConfirm : void 0,
+            children: loading ? busyLabel : confirmLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: size ?? "lg", fullWidth: true, disabled, onPress: onCancel, children: cancelLabel })
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  screen: { flex: 1, backgroundColor: theme.color.bg },
+  scroll: { padding: theme.layout.screenPad, gap: theme.space.s4 },
+  scrollCompact: { gap: theme.space.s2 },
+  scrollComfortable: { gap: theme.space.s6 },
+  // F117 / Refinement 38: the surface title in the native face.
+  title: { fontFamily: theme.font.sans, color: theme.color.text },
+  group: { gap: theme.space.s2 },
+  // The OS section header: iOS footnote caps in `text2`, Android 14 / 500 in
+  // `accentStrong` (the same header SettingsScreen draws).
+  caption: {
+    fontFamily: theme.font.sans,
+    variants: {
+      os: {
+        ios: {
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          letterSpacing: theme.type.footnote.letterSpacing,
+          textTransform: "uppercase",
+          color: theme.color.text2
+        },
+        android: {
+          fontWeight: theme.fontWeight.medium,
+          fontSize: theme.fontSize[14],
+          lineHeight: theme.space[20],
+          color: theme.color.accentStrong
+        }
+      }
+    }
+  },
+  row: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  rowLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text
+  },
+  duration: {
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.warnSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.warn
+  },
+  // Text on a `-soft` tint takes the tone itself, never the on-ink.
+  durationText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.warnOnSoft
+  }
+}));
+var DEFAULT_LABELS = {
+  platformNote: "Billed by the app store on your account. Prices come from its catalogue.",
+  restorePurchase: "Restore purchase",
+  close: "Close",
+  bestValue: "Best value",
+  planLine: (name, price, period) => `${name} \xB7 ${price} ${period}`,
+  planPrice: (price, period) => `${price} ${period}`,
+  planSpoken: (name, price, period) => `${name} ${price} ${period}`,
+  notNow: "Not now",
+  restorePurchases: "Restore purchases",
+  meterReadout: (value, max, unit) => `${value} of ${max}${unit ? ` ${unit}` : ""}`,
+  save: "Save",
+  perYear: "a year",
+  samePrice: "Same price",
+  billedYearlyTail: "billed yearly",
+  yourPlan: "Your plan",
+  included: "Included",
+  notIncluded: "Not included",
+  featureState: (state) => `${state}: `,
+  comparisonCell: (label, included) => `${label}: ${included ? "included" : "not included"}`,
+  billingPeriod: "Billing period",
+  plansCompared: "Plans compared",
+  feature: "Feature",
+  sortBy: (column) => `Sort by ${column}`,
+  selectRow: (row) => `Select ${row}`,
+  itemColumn: "Item",
+  amountColumn: "Amount",
+  choosePlanRow: "Choose a plan",
+  creditedNextInvoice: "credited to your next invoice",
+  today: "today",
+  then: "then",
+  cadenceFrom: (cadence, date) => `${cadence} from ${date}`,
+  monthly: "monthly",
+  midCycleChange: (currency) => `Mid-cycle change \xB7 ${currency}`,
+  unusedTime: (plan, daysLeft, cycleDays) => `Unused ${plan}, ${daysLeft} of ${cycleDays} days`,
+  sameDays: (plan, daysLeft) => `${plan} for the same ${daysLeft} days`,
+  creditOnNextInvoice: "Credit on your next invoice",
+  chargedToday: "Charged today",
+  fromDate: (date, cadence) => `From ${date}, ${cadence}`,
+  moveTo: (plan) => `Move to ${plan}`,
+  upgrade: "upgrade",
+  downgrade: "downgrade",
+  planArrow: (from, to) => `${from} \u2192 ${to}`,
+  perCycle: "per cycle",
+  confirmChange: (way) => `Confirm ${way}`,
+  keepCurrentPlan: "Keep current plan",
+  subscription: "Subscription",
+  plan: "Plan",
+  seats: (count) => `${count} seats`,
+  billedYearly: "Billed yearly",
+  billedMonthly: "Billed monthly",
+  renews: "Renews",
+  method: "Method",
+  trialDaysLeft: (days) => `${days} ${days === 1 ? "day" : "days"} left in your trial`,
+  trialUsed: "Trial used",
+  days: "days",
+  graceTitle: "We could not charge your card",
+  updatePaymentMethod: "Update payment method",
+  graceSchedule: (day) => `due \xB7 day ${day} of the retry schedule`,
+  accessEnds: (date) => `Access ends ${date}.`,
+  cancelPlan: (plan) => `Cancel ${plan}`,
+  staysActiveUntil: (plan, date) => React7.createElement(React7.Fragment, null, `${plan} stays active until `, date, "."),
+  whatYouLose: (date) => `What you lose on ${date}`,
+  whyCancelling: "Why are you cancelling?",
+  keepMyPlan: "Keep my plan"
+};
+var INDICATOR = { ring: 20, dot: 9 };
+function Paywall({
+  title,
+  eyebrow,
+  description,
+  features = [],
+  meter,
+  plans,
+  selectedPlanId,
+  onSelectPlan,
+  ctaLabel,
+  onPurchase,
+  busy = false,
+  legalText,
+  restoreLabel: restoreLabelProp,
+  onRestore,
+  footNote,
+  links = [],
+  onLinkPress,
+  onClose,
+  closeLabel: closeLabelProp,
+  labels: labelsProp,
+  platform,
+  error,
+  tone = "good"
+}) {
+  const os = useInputPlatform(platform);
+  const android = os === "android";
+  const { styles } = useStyles(sheet2, { os });
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const restoreLabel = restoreLabelProp ?? labels.restorePurchase;
+  const closeLabel = closeLabelProp ?? labels.close;
+  const theme = useLoamTheme("commerce");
+  const toneInk = tone === "good" ? theme.color.good : tone === "accent" ? theme.color.accentStrong : tone === "neutral" ? theme.color.text2 : theme.color[tone];
+  const fallback = plans.find((p) => p.recommended)?.id ?? plans[0]?.id;
+  const isControlled = selectedPlanId !== void 0;
+  const [internal, setInternal] = React7.useState(fallback);
+  const selected = isControlled ? selectedPlanId : internal;
+  const select = (id) => {
+    if (!isControlled) setInternal(id);
+    onSelectPlan?.(id);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.screen, children: [
+    /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.scroll, children: [
+      onClose ? /* @__PURE__ */ jsx(View, { style: styles.closeRow, children: /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: closeLabel,
+          onPress: onClose,
+          style: styles.close,
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.color.text3 })
+        }
+      ) }) : null,
+      /* @__PURE__ */ jsxs(View, { style: styles.intro, children: [
+        eyebrow ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.eyebrow,
+              resolveTextRole(theme, "overline", android),
+              tone === "good" ? null : { color: toneInk }
+            ],
+            children: eyebrow
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            style: [
+              styles.title,
+              // Android's large title is headline-medium 28, not headline-large.
+              resolveTextRole(theme, android ? "headlineMedium" : "largeTitle", android),
+              android ? null : styles.titleIos
+            ],
+            children: title
+          }
+        ),
+        description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null
+      ] }),
+      features.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.features, children: features.map((f) => (
+        // The glyph carries the same meaning as the tint, so the list still
+        // reads under forced colors / greyscale.
+        /* @__PURE__ */ jsxs(View, { style: styles.featureRow, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: toneInk }),
+          /* @__PURE__ */ jsx(Text, { style: styles.featureLabel, children: f })
+        ] }, f)
+      )) }) : null,
+      meter,
+      /* @__PURE__ */ jsx(View, { accessibilityRole: "radiogroup", style: styles.plans, children: plans.map((plan) => {
+        const on = plan.id === selected;
+        return /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "radio",
+            accessibilityLabel: labels.planSpoken(plan.name, plan.price, plan.period),
+            accessibilityState: { checked: on, selected: on },
+            "aria-checked": on,
+            onPress: () => select(plan.id),
+            style: ({ pressed }) => [
+              styles.plan,
+              // M1: iOS keeps the row flat (check only); Android's chosen row
+              // takes the selected fill and accent edge.
+              on && android ? styles.planOn : null,
+              pressed ? styles.planPressed : null
+            ],
+            children: [
+              android ? /* @__PURE__ */ jsx(View, { style: [styles.indicator, on ? styles.indicatorOn : null], children: on ? /* @__PURE__ */ jsx(View, { style: styles.indicatorDot }) : null }) : null,
+              /* @__PURE__ */ jsxs(View, { style: styles.planMain, children: [
+                /* @__PURE__ */ jsxs(View, { style: styles.planHead, children: [
+                  /* @__PURE__ */ jsx(Text, { style: styles.planTitle, numberOfLines: 1, children: plan.name }),
+                  plan.recommended ? /* @__PURE__ */ jsx(Badge, { variant: "accent", size: "sm", children: plan.recommendedLabel ?? labels.bestValue }) : null
+                ] }),
+                /* @__PURE__ */ jsxs(Text, { style: styles.planNote, children: [
+                  labels.planPrice(plan.price, plan.period),
+                  plan.note ? ` \xB7 ${plan.note}` : null
+                ] })
+              ] }),
+              android ? null : (
+                // The slot keeps its width unchecked so the text never shifts.
+                /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.check, children: on ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accentStrong }) : null })
+              )
+            ]
+          },
+          plan.id
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+      error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.error, children: error }) : null,
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          fullWidth: true,
+          size: "lg",
+          loading: busy,
+          onPress: selected ? () => onPurchase?.(selected) : void 0,
+          children: ctaLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { style: styles.legal, children: legalText }),
+      footNote,
+      /* @__PURE__ */ jsxs(View, { style: styles.links, children: [
+        onRestore ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onRestore, children: restoreLabel }) : null,
+        links.map((l) => /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "link",
+            accessibilityLabel: l.label,
+            onPress: () => onLinkPress?.(l.id),
+            children: /* @__PURE__ */ jsx(Text, { style: styles.link, children: l.label })
+          },
+          l.id
+        ))
+      ] })
+    ] })
+  ] });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  screen: { flex: 1, backgroundColor: theme.color.bg },
+  scroll: { padding: theme.layout.screenPad, gap: theme.space.s4 },
+  closeRow: { flexDirection: "row", justifyContent: "flex-end" },
+  close: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "flex-end",
+    justifyContent: "center"
+  },
+  intro: { gap: theme.space.s2 },
+  // The OS large title in the native face (R14): iOS 34 / 700, Android 28 / 400.
+  title: { fontFamily: theme.font.sans, color: theme.color.text },
+  titleIos: { fontWeight: theme.fontWeight.bold },
+  eyebrow: { fontFamily: theme.font.sans, color: theme.color.accentStrong },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.fontSize * theme.lineHeight.relaxed,
+    color: theme.color.text2
+  },
+  features: { gap: theme.space.s2 },
+  featureRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  featureLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  plans: { gap: theme.space.s2 },
+  // Refinement 38: a two-line row, 60 iOS / 72 Android, r 12. The chosen plan
+  // is the selected fill under an accent edge; the rest keep the strong edge.
+  plan: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s2,
+    borderRadius: theme.radius.md,
+    // `borderWidth.thick` is the static scale: the plan outline is part of the
+    // drawing (it is what "selected" looks like), not resizable chrome.
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: "transparent",
+    variants: {
+      os: {
+        ios: { minHeight: theme.space[60] },
+        android: { minHeight: theme.space[72], gap: theme.space.s4 }
+      }
+    }
+  },
+  // `focus.ringColor`, not the raw accent: this border is what marks the chosen
+  // plan, and it is the only thing left doing that once high contrast flattens
+  // the fill. It derives the accent at the 3:1 hard-edge strength any
+  // meaning-carrying accent edge needs.
+  planOn: {
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.state.selected
+  },
+  planPressed: { backgroundColor: theme.state.pressed },
+  indicator: {
+    width: INDICATOR.ring,
+    height: INDICATOR.ring,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong
+  },
+  // The radio ring's selected edge, on the same footing as `planOn` above.
+  indicatorOn: { borderColor: theme.focus.ringColor },
+  indicatorDot: {
+    width: INDICATOR.dot,
+    height: INDICATOR.dot,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  check: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: theme.icon.md,
+    height: theme.icon.md
+  },
+  planMain: { flex: 1, minWidth: 0, gap: theme.space[2] },
+  planHead: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  // Title: iOS body 17 / 400; Android body-large 16 / .5.
+  planTitle: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.regular,
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: {
+          fontSize: theme.type.body.fontSize,
+          lineHeight: theme.type.body.lineHeight,
+          letterSpacing: theme.type.body.letterSpacing
+        },
+        android: {
+          fontSize: theme.fontSize[16],
+          lineHeight: theme.space[24],
+          letterSpacing: theme.fontSize[16] * 0.03125
+        }
+      }
+    }
+  },
+  // Price as the subtitle: iOS subheadline 15, Android body-medium 14, `text2`.
+  planNote: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"],
+    variants: {
+      os: {
+        ios: {
+          fontSize: theme.type.subheadline.fontSize,
+          lineHeight: theme.type.subheadline.lineHeight,
+          letterSpacing: theme.type.subheadline.letterSpacing
+        },
+        android: {
+          fontSize: theme.fontSize[14],
+          lineHeight: theme.space[20],
+          letterSpacing: theme.fontSize[14] * 0.0179
+        }
+      }
+    }
+  },
+  footer: {
+    padding: theme.layout.screenPad,
+    gap: theme.space.s2,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border,
+    backgroundColor: theme.color.bg
+  },
+  // Legal copy is footnote 13 in `text2` (F60), never caption 11.
+  error: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.danger,
+    textAlign: "center"
+  },
+  legal: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  links: {
+    flexDirection: "row",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    gap: theme.space.s4
+  },
+  link: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  }
+}));
+var WEB_BLUR = Platform.OS === "web";
+var FADE_STEPS = [0.25, 0.5, 0.75, 0.92];
+function PaywallGate({
+  children,
+  locked = true,
+  treatment = "blur",
+  title,
+  description,
+  planLabel,
+  actionLabel,
+  onAction,
+  secondaryLabel,
+  onSecondary,
+  previewHeight,
+  size = "md",
+  BlurComponent,
+  icon = "lock",
+  headingLevel = 3,
+  style,
+  tone = "accent",
+  variant = "card",
+  loading = false,
+  error
+}) {
+  const { styles, theme } = useStyles(sheet3);
+  const android = isAndroidIdiom(theme);
+  if (!locked) return /* @__PURE__ */ jsx(View, { style, children });
+  const compact = size === "compact";
+  const fade = treatment === "fade";
+  const preview = previewHeight ?? theme.panel.xs;
+  const inline = variant === "inline";
+  const ink = {
+    accent: {
+      ink: theme.color.accentOnSoft,
+      strong: theme.color.accentStrong,
+      fill: theme.color.accentSoft,
+      edge: theme.edge.accent
+    },
+    good: {
+      ink: theme.color.goodOnSoft,
+      strong: theme.color.goodOnSoft,
+      fill: theme.color.goodSoft,
+      edge: theme.edge.good
+    },
+    warn: {
+      ink: theme.color.warnOnSoft,
+      strong: theme.color.warnOnSoft,
+      fill: theme.color.warnSoft,
+      edge: theme.edge.warn
+    },
+    danger: {
+      ink: theme.color.dangerOnSoft,
+      strong: theme.color.dangerOnSoft,
+      fill: theme.color.dangerSoft,
+      edge: theme.edge.danger
+    },
+    info: {
+      ink: theme.color.infoOnSoft,
+      strong: theme.color.infoOnSoft,
+      fill: theme.color.infoSoft,
+      edge: theme.edge.info
+    },
+    neutral: {
+      ink: theme.color.text2,
+      strong: theme.color.text2,
+      fill: theme.color.surface2,
+      edge: theme.edge.neutral
+    }
+  }[tone];
+  const card = /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "summary",
+      accessibilityLabel: title,
+      accessibilityState: { busy: loading },
+      style: [
+        styles.card,
+        compact ? styles.cardCompact : styles.cardRegular,
+        inline ? styles.cardInline : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.lock,
+              compact ? styles.lockCompact : styles.lockRegular,
+              { backgroundColor: ink.fill, borderColor: ink.edge }
+            ],
+            children: /* @__PURE__ */ jsx(Icon, { name: icon, size: compact ? theme.icon.sm : theme.icon.md, color: ink.ink })
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: [styles.copy, inline ? styles.copyInline : null], children: [
+          planLabel ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles.plan,
+                resolveTextRole(theme, "overline", android),
+                { color: ink.strong }
+              ],
+              children: planLabel
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", "aria-level": headingLevel, style: styles.title, children: title }),
+          description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
+          error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.error, children: error }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", loading, onPress: onAction, children: actionLabel }),
+          secondaryLabel && onSecondary ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onPress: onSecondary, children: secondaryLabel }) : null
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        pointerEvents: "none",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        "aria-hidden": true,
+        style: [
+          treatment === "dim" ? styles.dimmed : null,
+          treatment === "blur" && WEB_BLUR ? (
+            // react-native-web forwards `filter` as CSS; cast because RN's own
+            // `filter` type is the new-architecture array form. `blur.md`
+            // matches the web component's `--blur-md`.
+            {
+              filter: `blur(${theme.blur.md}px) saturate(0.6)`,
+              opacity: theme.opacity[72]
+            }
+          ) : null,
+          fade ? { maxHeight: preview + theme.space.s8, overflow: "hidden" } : null
+        ],
+        children: [
+          children,
+          treatment === "blur" ? BlurComponent ? /* @__PURE__ */ jsx(BlurComponent, { intensity: 40, style: styles.fill }) : WEB_BLUR ? null : /* @__PURE__ */ jsx(View, { style: [styles.fill, styles.veil] }) : null,
+          fade ? /* @__PURE__ */ jsx(View, { style: styles.fadeBands, children: FADE_STEPS.map((opacity) => /* @__PURE__ */ jsx(View, { style: [styles.fadeBand, { opacity }] }, opacity)) }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: fade ? styles.slotAfter : styles.slotOver, children: card })
+  ] });
+}
+var sheet3 = createStyleSheet((theme) => ({
+  root: { position: "relative", overflow: "hidden" },
+  fill: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0 },
+  // The frosted fallback: opaque enough that no row of sample text is
+  // legible through it, translucent enough that the shape still shows.
+  veil: { backgroundColor: theme.color.surface, opacity: theme.opacity[72] },
+  dimmed: { opacity: theme.state.disabledOpacity },
+  fadeBands: { position: "absolute", left: 0, right: 0, bottom: 0 },
+  fadeBand: { height: theme.space.s2, backgroundColor: theme.color.bg },
+  slotOver: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.space.s4
+  },
+  slotAfter: { alignItems: "center", marginTop: -theme.space.s6, padding: theme.space.s4 },
+  card: {
+    width: "100%",
+    alignItems: "center",
+    gap: theme.space.s3,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.md
+  },
+  cardRegular: { maxWidth: theme.panel.xl, padding: theme.space.s5 },
+  cardCompact: { maxWidth: theme.panel.lg, padding: theme.space.s4 },
+  lock: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent
+  },
+  cardInline: { maxWidth: "100%", flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  copyInline: { flex: 1, alignItems: "flex-start" },
+  error: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.danger,
+    textAlign: "center"
+  },
+  lockRegular: { width: theme.ctl.md, height: theme.ctl.md },
+  lockCompact: { width: theme.ctl.sm, height: theme.ctl.sm },
+  copy: { alignItems: "center", gap: theme.space.s1 },
+  // The sans overline role (Refinement 36), not bold caption 2 caps.
+  plan: {
+    fontFamily: theme.font.sans,
+    color: theme.color.accentStrong
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  description: {
+    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",
+    justifyContent: "center",
+    gap: theme.space.s2
+  }
+}));
+var METER_SEGMENTS = 10;
+function MeterBar({
+  value,
+  max,
+  unit,
+  tone = "accent",
+  label,
+  caption,
+  size = "md",
+  animate = false,
+  ariaLabel,
+  locale: localeProp,
+  labels: labelsProp,
+  style,
+  variant = "bar"
+}) {
+  const { styles } = useStyles(sheet4);
+  const theme = useLoamTheme("progress");
+  const fill = tone === "good" ? theme.color.good : tone === "warn" ? theme.color.warn : tone === "danger" ? theme.color.danger : tone === "neutral" ? theme.color.text3 : theme.color.accentStrong;
+  const filled = Math.max(
+    0,
+    Math.min(METER_SEGMENTS, Math.round(value / (max || 1) * METER_SEGMENTS))
+  );
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const readout = labels.meterReadout(
+    value.toLocaleString(locale),
+    max.toLocaleString(locale),
+    unit
+  );
+  const name = ariaLabel ?? (label ? `${label}: ${readout}` : readout);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.block, style], children: [
+    label == null && unit == null ? null : /* @__PURE__ */ jsxs(View, { style: styles.readoutRow, children: [
+      label == null ? null : /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }),
+      /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Text, { style: styles.readout, children: readout }) })
+    ] }),
+    variant === "segments" ? /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: "meter-segments",
+        accessibilityRole: "progressbar",
+        accessibilityLabel: name,
+        accessibilityValue: { min: 0, max, now: value },
+        style: styles.segments,
+        children: Array.from({ length: METER_SEGMENTS }, (_, i) => /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.segment,
+              size === "sm" ? styles.segmentSm : styles.segmentMd,
+              { backgroundColor: i < filled ? fill : theme.color.surface3 }
+            ]
+          },
+          i
+        ))
+      }
+    ) : /* @__PURE__ */ jsx(
+      Progress,
+      {
+        value,
+        max,
+        size,
+        tone,
+        animateValue: animate,
+        accessibilityLabel: name
+      }
+    ),
+    caption ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: caption }) : null
+  ] });
+}
+var sheet4 = createStyleSheet((theme) => ({
+  block: { alignSelf: "stretch", gap: theme.space.s1 },
+  readoutRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s2
+  },
+  label: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  segments: { flexDirection: "row", gap: theme.space[2] },
+  segment: { flex: 1, borderRadius: theme.radius.full },
+  segmentSm: { height: theme.space[4] },
+  segmentMd: { height: theme.space[8] },
+  pushEnd: { marginStart: "auto" },
+  readout: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  caption: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  }
+}));
+function usePlanTone(tone) {
+  const theme = useLoamTheme("commerce");
+  switch (tone) {
+    case "accent":
+      return {
+        ink: theme.color.accentOnSoft,
+        fill: theme.color.accentSoft,
+        edge: theme.edge.accent
+      };
+    case "warn":
+      return { ink: theme.color.warnOnSoft, fill: theme.color.warnSoft, edge: theme.edge.warn };
+    case "danger":
+      return {
+        ink: theme.color.dangerOnSoft,
+        fill: theme.color.dangerSoft,
+        edge: theme.edge.danger
+      };
+    case "info":
+      return { ink: theme.color.infoOnSoft, fill: theme.color.infoSoft, edge: theme.edge.info };
+    case "neutral":
+      return { ink: theme.color.text2, fill: theme.color.surface2, edge: theme.edge.neutral };
+    case "good":
+    default:
+      return { ink: theme.color.goodOnSoft, fill: theme.color.goodSoft, edge: theme.edge.good };
+  }
+}
+var ALIGN_SELF = { start: "flex-start", center: "center", end: "flex-end" };
+function SavingsChip({
+  savingMinor,
+  plan,
+  currency,
+  label,
+  per,
+  locale,
+  labels: labelsProp,
+  style,
+  tone = "good",
+  size = "md",
+  variant = "soft",
+  motion,
+  loading = false,
+  error,
+  count
+}) {
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("commerce");
+  const { styles } = useStyles(sheet5);
+  const toned = usePlanTone(error ? "danger" : tone);
+  const saving = savingMinor ?? (plan ? yearlySaving(plan) : null);
+  if (saving == null) return null;
+  const outline = variant === "outline";
+  const wordStyle = [
+    styles.savingWord,
+    { color: toned.ink },
+    size === "sm" ? styles.savingWordSm : null
+  ];
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: "savings-chip",
+      style: [
+        styles.savingChip,
+        { backgroundColor: toned.fill, borderColor: toned.edge },
+        size === "sm" ? styles.savingChipSm : null,
+        outline ? {
+          backgroundColor: "transparent",
+          borderWidth: theme.borderWidth.thin,
+          borderColor: theme.color.borderStrong
+        } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: wordStyle, children: label ?? labels.save }),
+        /* @__PURE__ */ jsx(
+          Amount,
+          {
+            minor: saving,
+            currency,
+            size: "sm",
+            weight: "bold",
+            locale,
+            loading,
+            roll: motion != null,
+            motion,
+            style: { color: toned.ink }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: wordStyle, children: per ?? labels.perYear }),
+        count === void 0 ? null : /* @__PURE__ */ jsx(Badge, { count, variant: error ? "danger" : tone, size: "sm", motion }),
+        error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: wordStyle, children: error }) : null
+      ]
+    }
+  );
+}
+function PlanPriceDelta({
+  fromMinor,
+  toMinor,
+  currency,
+  unit,
+  sameLabel,
+  locale,
+  labels: labelsProp,
+  style,
+  size = "sm",
+  tone,
+  loading = false,
+  align = "start",
+  error
+}) {
+  const { styles } = useStyles(sheet5);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const delta = planDelta(fromMinor, toMinor);
+  const place = { alignSelf: ALIGN_SELF[align] };
+  if (delta === 0) {
+    return /* @__PURE__ */ jsx(Text, { style: [styles.deltaUnit, place, error ? styles.cardError : null, style], children: error ?? sameLabel ?? labels.samePrice });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles.deltaRow, place, style], children: [
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor: delta,
+        currency,
+        size,
+        weight: "bold",
+        signed: true,
+        tone: error ? "danger" : tone ?? (delta > 0 ? "warn" : "good"),
+        loading,
+        locale,
+        error
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.deltaUnit, children: unit ?? pay.perSeat })
+  ] });
+}
+function PlanFeatureRow({
+  label,
+  included = true,
+  detail,
+  stateLabel,
+  labels: labelsProp,
+  style,
+  tone = "good",
+  loading = false,
+  error
+}) {
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("commerce");
+  const { styles } = useStyles(sheet5);
+  const state = stateLabel ?? (included ? labels.included : labels.notIncluded);
+  const glyph = error ? theme.color.danger : tone === "good" ? theme.color.good : tone === "neutral" ? theme.color.text2 : theme.color[tone];
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "listitem",
+      accessibilityLabel: `${labels.featureState(state)}${label}${detail ? `. ${detail}` : ""}${error ? `. ${error}` : ""}`,
+      accessibilityState: { busy: loading },
+      "aria-busy": loading || void 0,
+      style: [styles.featureRow, style],
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: included ? "check" : "minus",
+            size: theme.icon.sm,
+            color: included || error ? glyph : theme.color.text3
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.featureBody, children: [
+          loading ? /* @__PURE__ */ jsx(Skeleton, { decorative: true, width: theme.space[96] }) : /* @__PURE__ */ jsx(Text, { style: included ? styles.featureLabel : styles.featureLabelOut, children: label }),
+          detail && !loading ? /* @__PURE__ */ jsx(Text, { style: styles.featureDetail, children: detail }) : null,
+          error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.cardError, children: error }) : null
+        ] })
+      ]
+    }
+  );
+}
+function PlanPriceCell({
+  plan,
+  currency,
+  cadence = "mo",
+  size = "lg",
+  savingMinor,
+  locale,
+  labels: labelsProp,
+  style,
+  roll = true,
+  motion = "full",
+  tone,
+  loading = false,
+  delta,
+  caption,
+  align = "start",
+  error
+}) {
+  const { styles } = useStyles(sheet5);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const words = planCta(plan, pay).price;
+  const perMonth = yearlyMonthly(plan);
+  const yearly = cadence === "yr" && plan.yearly != null ? plan.yearly : null;
+  const headline = yearly != null && perMonth != null ? perMonth : plan.price;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles.priceCell,
+        align === "start" ? null : { alignItems: ALIGN_SELF[align] },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.priceHeadline,
+              align === "start" ? null : { justifyContent: ALIGN_SELF[align] }
+            ],
+            children: words ? /* @__PURE__ */ jsx(Text, { style: size === "hero" ? styles.priceWordsHero : styles.priceWords, children: words }) : headline == null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Amount,
+                {
+                  minor: headline,
+                  currency,
+                  size,
+                  weight: "bold",
+                  tone: error ? "danger" : tone,
+                  loading,
+                  locale,
+                  roll,
+                  motion
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { style: styles.priceUnit, children: pay.perSeat })
+            ] })
+          }
+        ),
+        yearly == null ? null : /* @__PURE__ */ jsxs(View, { style: styles.yearlyRow, children: [
+          /* @__PURE__ */ jsx(
+            Amount,
+            {
+              minor: yearly,
+              currency,
+              size: "sm",
+              weight: "bold",
+              loading,
+              locale
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: styles.priceUnit, children: labels.billedYearlyTail }),
+          /* @__PURE__ */ jsx(
+            SavingsChip,
+            {
+              savingMinor,
+              plan,
+              currency,
+              locale,
+              labels: labelsProp
+            }
+          )
+        ] }),
+        delta ? /* @__PURE__ */ jsx(
+          PlanPriceDelta,
+          {
+            fromMinor: delta.fromMinor,
+            toMinor: delta.toMinor,
+            currency,
+            unit: delta.unit,
+            locale,
+            loading,
+            align,
+            labels: labelsProp
+          }
+        ) : null,
+        caption ? /* @__PURE__ */ jsx(Text, { style: styles.priceUnit, children: caption }) : null,
+        error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.cardError, children: error }) : null
+      ]
+    }
+  );
+}
+function PlanCard({
+  plan,
+  currency,
+  cadence = "mo",
+  highlighted,
+  isCurrent = false,
+  savingMinor,
+  ctaLabel,
+  currentLabel: currentLabelProp,
+  onSelect,
+  loading = false,
+  locked = false,
+  locale,
+  labels: labelsProp,
+  style,
+  elevation = "default",
+  padding = "md",
+  error,
+  tone
+}) {
+  const theme = useLoamTheme("commerce");
+  const { styles } = useStyles(sheet5);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const currentLabel = currentLabelProp ?? labels.yourPlan;
+  const recommended = highlighted ?? plan.popular ?? false;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID: `plan-card-${plan.id}`,
+      style: [
+        styles.card,
+        recommended ? styles.cardRecommended : styles.cardPlain,
+        // `current` adds the accent tint so "this one is yours" survives next to
+        // a highlighted neighbour.
+        isCurrent ? styles.cardCurrent : null,
+        elevation === "flat" ? styles.cardFlat : null,
+        elevation === "raised" ? styles.cardRaised : null,
+        padding === "sm" ? styles.cardPadSm : null,
+        padding === "lg" ? styles.cardPadLg : null,
+        error ? { borderColor: theme.color.danger } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.cardHead, children: [
+          /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.planName, children: plan.name }),
+          recommended ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", children: pay.popularBadge }) : null,
+          isCurrent ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", outline: true, children: currentLabel }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          PlanPriceCell,
+          {
+            plan,
+            currency,
+            cadence,
+            savingMinor,
+            locale,
+            tone,
+            labels: labelsProp
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: styles.blurb, children: plan.blurb }),
+        /* @__PURE__ */ jsx(View, { style: styles.rule }),
+        /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.featureList, children: plan.features.map((feature) => /* @__PURE__ */ jsx(PlanFeatureRow, { label: feature, labels: labelsProp }, feature)) }),
+        isCurrent ? (
+          // Not a disabled button: a dead control invites the press that teaches
+          // nothing. The marker states the fact and takes no tab stop.
+          /* @__PURE__ */ jsxs(View, { style: styles.currentMarker, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: theme.icon.sm, color: theme.color.good }),
+            /* @__PURE__ */ jsx(Text, { style: styles.currentMarkerLabel, children: currentLabel })
+          ] })
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.cardError, children: error }) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              fullWidth: true,
+              variant: recommended ? "primary" : "outline",
+              loading,
+              onPress: locked ? void 0 : () => onSelect?.(plan.id),
+              children: ctaLabel ?? planCta(plan, pay).cta
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function BillingPeriodToggle({
+  value,
+  onValueChange,
+  monthlyLabel,
+  yearlyLabel,
+  size = "md",
+  disabled = false,
+  fullWidth = false,
+  savingMinor,
+  currency,
+  locale,
+  labels: labelsProp,
+  style,
+  loading = false,
+  error,
+  tone = "good",
+  orientation = "horizontal",
+  density = "standard",
+  variant = "pill"
+}) {
+  const { styles } = useStyles(sheet5);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const control = /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      accessibilityLabel: labels.billingPeriod,
+      size,
+      shape: variant,
+      disabled: disabled || loading,
+      fullWidth,
+      value,
+      onValueChange: (next) => onValueChange(next),
+      items: [
+        { value: "mo", label: monthlyLabel ?? pay.cadenceMonthly },
+        { value: "yr", label: yearlyLabel ?? pay.cadenceYearly }
+      ]
+    }
+  );
+  const vertical = orientation === "vertical";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityState: { busy: loading },
+      "aria-busy": loading || void 0,
+      style: [
+        styles.toggleRow,
+        fullWidth ? styles.toggleRowFull : null,
+        vertical ? styles.toggleRowVertical : null,
+        density === "compact" ? styles.toggleDense : null,
+        density === "comfortable" ? styles.toggleLoose : null,
+        style
+      ],
+      children: [
+        fullWidth && !vertical ? /* @__PURE__ */ jsx(View, { style: styles.toggleGrow, children: control }) : control,
+        savingMinor != null && currency ? /* @__PURE__ */ jsx(
+          SavingsChip,
+          {
+            savingMinor,
+            currency,
+            locale,
+            tone,
+            labels: labelsProp
+          }
+        ) : null,
+        error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.toggleError, children: error }) : null
+      ]
+    }
+  );
+}
+function PlanGrid({
+  plans,
+  currency,
+  cadence,
+  onCadenceChange,
+  onSelect,
+  currentPlanId,
+  pendingPlanId,
+  savings,
+  hideIds,
+  loading = false,
+  locale,
+  labels: labelsProp,
+  style,
+  error,
+  tone
+}) {
+  const { styles } = useStyles(sheet5);
+  const shown = hideIds?.length ? plans.filter((plan) => !hideIds.includes(plan.id)) : plans;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.grid, style], children: [
+    onCadenceChange ? /* @__PURE__ */ jsx(
+      BillingPeriodToggle,
+      {
+        value: cadence,
+        onValueChange: onCadenceChange,
+        currency,
+        locale,
+        labels: labelsProp
+      }
+    ) : null,
+    error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.toggleError, children: error }) : null,
+    /* @__PURE__ */ jsx(View, { style: styles.gridStack, children: shown.map((plan) => /* @__PURE__ */ jsx(
+      PlanCard,
+      {
+        plan,
+        currency,
+        cadence,
+        isCurrent: currentPlanId === plan.id,
+        savingMinor: savings?.[plan.id],
+        onSelect,
+        loading: loading || pendingPlanId === plan.id,
+        locked: pendingPlanId != null,
+        tone,
+        locale,
+        labels: labelsProp
+      },
+      plan.id
+    )) })
+  ] });
+}
+var sheet5 = createStyleSheet((theme) => ({
+  savingChip: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    alignSelf: "flex-start",
+    gap: theme.space.s1,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radius.full,
+    // A soft tint needs its tone edge: the fill collapses to the plain surface
+    // under high contrast, where the edge is the only thing drawing it.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.good,
+    backgroundColor: theme.color.goodSoft
+  },
+  savingChipSm: { paddingHorizontal: theme.space[6], paddingVertical: 0 },
+  savingWordSm: {
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight
+  },
+  savingWord: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.goodOnSoft
+  },
+  deltaRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    alignSelf: "flex-start",
+    gap: theme.space.s1
+  },
+  deltaUnit: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  featureRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  featureBody: { flex: 1, gap: theme.space[2] },
+  featureLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  featureLabelOut: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  featureDetail: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text3
+  },
+  priceCell: { gap: theme.space.s1 },
+  priceHeadline: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    columnGap: theme.space.s2,
+    rowGap: theme.space.s1
+  },
+  priceWords: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    color: theme.color.text
+  },
+  priceWordsHero: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[32],
+    lineHeight: theme.fontSize[32] * theme.lineHeight.tight,
+    color: theme.color.text
+  },
+  priceUnit: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  yearlyRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    gap: theme.space.s2
+  },
+  card: {
+    alignSelf: "stretch",
+    gap: theme.space.s4,
+    padding: theme.space.s5,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface
+  },
+  cardPlain: { borderWidth: theme.borderWidth.base, borderColor: theme.color.border },
+  // `focus.ringColor`, not the raw accent: this border is what marks the
+  // recommended plan, and it is a graphical object under SC 1.4.11 either way.
+  // Identical to the raw accent in 9 of the 14 palette × mode combos, so it
+  // moves only the four that failed. Same call `paywall.tsx` makes for `planOn`.
+  cardRecommended: {
+    borderWidth: theme.borderWidth.heavy,
+    borderColor: theme.focus.ringColor,
+    ...theme.shadow.md
+  },
+  cardFlat: { shadowOpacity: 0, elevation: 0 },
+  cardRaised: { ...theme.shadow.lg },
+  cardPadSm: { padding: theme.space.s3, gap: theme.space.s3 },
+  cardPadLg: { padding: theme.space.s6 },
+  cardError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.danger
+  },
+  cardCurrent: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
+  cardHead: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  // The plan name is the card's heading, so it never sits below the price words
+  // ("Free", "Talk to us") it introduces: same title 3 step, same weight.
+  planName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.title3.fontSize,
+    lineHeight: theme.type.title3.lineHeight,
+    color: theme.color.text
+  },
+  blurb: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2
+  },
+  rule: { height: theme.borderWidth.base, backgroundColor: theme.color.border },
+  featureList: { gap: theme.space.s2 },
+  currentMarker: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s1,
+    paddingVertical: theme.space.s2,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  currentMarkerLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  toggleRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s3
+  },
+  toggleRowFull: { alignSelf: "stretch" },
+  toggleRowVertical: { flexDirection: "column", flexWrap: "nowrap" },
+  toggleDense: { gap: theme.space.s1 },
+  toggleLoose: { gap: theme.space.s5 },
+  toggleError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.danger
+  },
+  toggleGrow: { flexGrow: 1, flexShrink: 1 },
+  grid: { alignSelf: "stretch", gap: theme.space.s5 },
+  gridStack: { gap: theme.space.s4 },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "center" }
+}));
+function prorationWay(proration) {
+  return proration.dueNow === 0 && proration.refund > 0 ? "downgrade" : "upgrade";
+}
+function ProrationLine({
+  proration,
+  currency,
+  effectiveLabel,
+  nextMinor,
+  nextCadenceLabel,
+  locale,
+  labels: labelsProp,
+  style,
+  size = "sm",
+  tone,
+  unit,
+  loading = false,
+  align = "start",
+  density = "standard",
+  orientation = "horizontal",
+  error
+}) {
+  const { styles } = useStyles(sheet6);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const downgrade = prorationWay(proration) === "downgrade";
+  const vertical = orientation === "vertical";
+  const next = nextMinor == null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+    vertical ? null : /* @__PURE__ */ jsx(Text, { style: styles.prorationSep, children: "\xB7" }),
+    /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: labels.then }),
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor: nextMinor,
+        currency,
+        size,
+        weight: "bold",
+        unit,
+        loading,
+        locale
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: labels.cadenceFrom(nextCadenceLabel ?? labels.monthly, effectiveLabel) })
+  ] });
+  const today = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor: downgrade ? proration.refund : proration.dueNow,
+        currency,
+        size,
+        weight: "bold",
+        tone: error ? "danger" : tone ?? (downgrade ? "good" : "default"),
+        unit,
+        loading,
+        locale
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: downgrade ? labels.creditedNextInvoice : labels.today })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityState: { busy: loading },
+      style: [
+        styles.prorationLine,
+        align === "start" ? null : { justifyContent: align === "end" ? "flex-end" : "center" },
+        density === "compact" ? styles.prorationLineCompact : null,
+        vertical ? styles.prorationLineStack : null,
+        style
+      ],
+      children: [
+        vertical ? /* @__PURE__ */ jsx(View, { style: styles.prorationLineRow, children: today }) : today,
+        vertical && next ? /* @__PURE__ */ jsx(View, { style: styles.prorationLineRow, children: next }) : next,
+        error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.prorationError, children: error }) : null
+      ]
+    }
+  );
+}
+function ProrationTable({
+  proration,
+  currency,
+  fromName,
+  toName,
+  daysLeft = proration.daysLeft,
+  cycleDays = proration.cycleDays,
+  effectiveLabel,
+  nextMinor,
+  nextCadenceLabel,
+  caption,
+  note,
+  locale,
+  labels: labelsProp,
+  style,
+  size,
+  unit,
+  tone,
+  loading = false,
+  align = "end",
+  density = "standard",
+  empty,
+  error,
+  sortable = false,
+  sort,
+  onSortChange,
+  selectable = false,
+  selectedIds,
+  onSelectedIdsChange
+}) {
+  const { styles, theme } = useStyles(sheet6);
+  const [innerSort, setInnerSort] = React7.useState(null);
+  const [innerSel, setInnerSel] = React7.useState([]);
+  const active = sort !== void 0 ? sort : innerSort;
+  const selected = selectedIds ?? innerSel;
+  const toggleSort = (key) => {
+    const next = {
+      key,
+      direction: active?.key === key && active.direction === "asc" ? "desc" : "asc"
+    };
+    if (sort === void 0) setInnerSort(next);
+    onSortChange?.(next);
+  };
+  const setSelected = (ids) => {
+    if (selectedIds === void 0) setInnerSel(ids);
+    onSelectedIdsChange?.(ids);
+  };
+  const android = isAndroidIdiom(theme);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const downgrade = prorationWay(proration) === "downgrade";
+  const row = {
+    size,
+    unit,
+    loading,
+    density: density === "compact" ? "compact" : "comfortable",
+    orientation: align === "start" ? "vertical" : "horizontal",
+    align: "start"
+  };
+  const rows = [
+    { id: "unused", label: labels.unusedTime(fromName, daysLeft, cycleDays), minor: -proration.credit, tone: "good" },
+    { id: "same", label: labels.sameDays(toName, daysLeft), minor: proration.charge },
+    {
+      id: "total",
+      label: downgrade ? labels.creditOnNextInvoice : labels.chargedToday,
+      minor: downgrade ? proration.refund : proration.dueNow,
+      tone: error ? "danger" : tone ?? (downgrade ? "good" : void 0),
+      strong: true,
+      rule: true
+    },
+    ...nextMinor == null ? [] : [{ id: "next", label: labels.fromDate(effectiveLabel, nextCadenceLabel ?? labels.monthly), minor: nextMinor }]
+  ];
+  const shown = active ? [...rows].sort(
+    (x, y) => (active.direction === "asc" ? 1 : -1) * (active.key === "amount" ? x.minor - y.minor : x.label.localeCompare(y.label))
+  ) : rows;
+  const nothing = empty != null && proration.credit === 0 && proration.charge === 0 && proration.dueNow === 0 && proration.refund === 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityState: { busy: loading },
+      style: [
+        styles.prorationTable,
+        density === "compact" ? styles.prorationTableCompact : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.overline, resolveTextRole(theme, "overline", android)], children: caption ?? labels.midCycleChange(currency) }),
+        nothing ? /* @__PURE__ */ jsx(Text, { style: styles.prorationNote, children: empty }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          sortable ? /* @__PURE__ */ jsx(View, { style: styles.prorationSortRow, children: ["label", "amount"].map((key) => {
+            const name = key === "label" ? labels.itemColumn : labels.amountColumn;
+            return /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: labels.sortBy(name),
+                accessibilityState: { selected: active?.key === key },
+                onPress: () => toggleSort(key),
+                style: styles.prorationSortButton,
+                children: /* @__PURE__ */ jsxs(Text, { style: [styles.overline, resolveTextRole(theme, "overline", android)], children: [
+                  name,
+                  active?.key === key ? active.direction === "asc" ? " \u25B2" : " \u25BC" : ""
+                ] })
+              },
+              key
+            );
+          }) }) : null,
+          shown.map((r) => /* @__PURE__ */ jsxs(
+            View,
+            {
+              testID: `proration-row-${r.id}`,
+              style: selectable ? styles.prorationSelectRow : null,
+              children: [
+                selectable ? /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    size: "sm",
+                    checked: selected.includes(r.id),
+                    onCheckedChange: (on) => setSelected(on ? [...selected, r.id] : selected.filter((x) => x !== r.id)),
+                    accessibilityLabel: labels.selectRow(r.label)
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(View, { style: selectable ? styles.prorationSelectBody : null, children: /* @__PURE__ */ jsx(
+                  PriceRow,
+                  {
+                    label: r.label,
+                    minor: r.minor,
+                    currency,
+                    tone: r.tone,
+                    strong: r.strong,
+                    rule: r.rule,
+                    noSymbol: true,
+                    locale,
+                    ...row,
+                    size: r.strong ? void 0 : row.size
+                  }
+                ) })
+              ]
+            },
+            r.id
+          ))
+        ] }),
+        error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.prorationError, children: error }) : null,
+        note === false || error ? null : /* @__PURE__ */ jsx(Text, { style: styles.prorationNote, children: note === void 0 ? pay.prorationNote : note })
+      ]
+    }
+  );
+}
+function toPaywallPlan(plan, currency, cadence, savingMinor, isCurrent, currentLabel, locale, labels, pay) {
+  const words = planCta(plan, pay).price;
+  const perMonth = yearlyMonthly(plan);
+  const yearly = cadence === "yr" && plan.yearly != null ? plan.yearly : null;
+  const headline = yearly != null && perMonth != null ? perMonth : plan.price;
+  const saving = savingMinor ?? yearlySaving(plan);
+  const notes = [];
+  if (yearly != null)
+    notes.push(`${money(yearly, currency, { locale })} ${labels.billedYearlyTail}`);
+  if (yearly != null && saving != null) {
+    notes.push(`${labels.save} ${money(saving, currency, { locale })} ${labels.perYear}`);
+  }
+  notes.push(plan.blurb);
+  if (isCurrent) notes.push(currentLabel);
+  return {
+    id: plan.id,
+    name: plan.name,
+    price: words || (headline == null ? "" : money(headline, currency, { locale })),
+    period: words ? "" : pay.perSeat,
+    note: notes.join(" \xB7 "),
+    recommended: plan.popular ?? false,
+    recommendedLabel: pay.popularBadge
+  };
+}
+function PaywallSurface({
+  variant = "hard",
+  title,
+  subtitle,
+  meter,
+  plans,
+  currency,
+  cadence,
+  onCadenceChange,
+  onPickPlan,
+  currentPlanId,
+  pendingPlanId,
+  currentLabel: currentLabelProp,
+  savings,
+  hideIds,
+  featureOffer,
+  billing = "ours",
+  platformNote: platformNoteProp,
+  legalText,
+  footNote,
+  dismissLabel: dismissLabelProp,
+  onDismiss,
+  restoreLabel: restoreLabelProp,
+  onRestore,
+  upgradeLabel,
+  onUpgrade,
+  locale: localeProp,
+  labels: labelsProp,
+  style,
+  loading = false,
+  error
+}) {
+  const { styles, theme } = useStyles(sheet6);
+  const android = isAndroidIdiom(theme);
+  const labels = useLabels("paywall", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const currentLabel = currentLabelProp ?? labels.yourPlan;
+  const platformNote = platformNoteProp ?? labels.platformNote;
+  const dismissLabel = dismissLabelProp ?? labels.notNow;
+  const restoreLabel = restoreLabelProp ?? labels.restorePurchases;
+  if (process.env.NODE_ENV !== "production" && billing === "platform" && !onRestore) {
+    console.warn(
+      '[loam] <PaywallSurface billing="platform"> has no `onRestore`. Restore purchases is a required, always-visible action on every platform-billed paywall \u2014 without it a user who has already paid cannot get back in.'
+    );
+  }
+  const canDismiss = variant !== "hard" && Boolean(onDismiss);
+  const showMeter = (variant === "metered" || variant === "trial") && meter != null;
+  const offer = variant === "feature" ? featureOffer : void 0;
+  const shown = React7.useMemo(() => {
+    const list = plans ?? [];
+    return hideIds?.length ? list.filter((p) => !hideIds.includes(p.id)) : list;
+  }, [plans, hideIds]);
+  const [selected, setSelected] = React7.useState(
+    () => shown.find((p) => p.popular)?.id ?? shown[0]?.id
+  );
+  const selectedPlan = shown.find((p) => p.id === selected);
+  const footer = /* @__PURE__ */ jsx(View, { style: styles.footerNotes, children: footNote ? /* @__PURE__ */ jsx(Text, { style: styles.footNote, children: footNote }) : null });
+  const slot = /* @__PURE__ */ jsxs(View, { style: styles.slot, children: [
+    billing === "platform" ? /* @__PURE__ */ jsx(Text, { style: styles.platformNote, children: platformNote }) : null,
+    showMeter && meter ? /* @__PURE__ */ jsx(MeterBar, { labels: labelsProp, ...meter }) : null,
+    onCadenceChange ? /* @__PURE__ */ jsx(
+      BillingPeriodToggle,
+      {
+        value: cadence,
+        onValueChange: onCadenceChange,
+        loading,
+        locale,
+        labels: labelsProp
+      }
+    ) : null
+  ] });
+  if (offer) {
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        role: "region",
+        accessibilityLabel: title,
+        accessibilityState: { busy: loading },
+        style: [styles.featureSurface, style],
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.featureHead, children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                accessibilityRole: "header",
+                style: [styles.featureTitle, resolveTextRole(theme, "surfaceTitle", android)],
+                children: title
+              }
+            ),
+            subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.featureSubtitle, children: subtitle }) : null
+          ] }),
+          billing === "platform" ? /* @__PURE__ */ jsx(Text, { style: styles.platformNote, children: platformNote }) : null,
+          /* @__PURE__ */ jsx(
+            PlanCard,
+            {
+              plan: offer.plan,
+              currency,
+              cadence,
+              savingMinor: offer.savingMinor,
+              highlighted: true,
+              ctaLabel: upgradeLabel,
+              loading: loading || pendingPlanId === offer.plan.id,
+              error,
+              locked: loading || pendingPlanId != null,
+              onSelect: () => {
+                onUpgrade?.();
+                onPickPlan?.(offer.plan.id);
+              },
+              locale,
+              labels: labelsProp,
+              currentLabel: currentLabelProp
+            }
+          ),
+          offer.proration && offer.effectiveLabel ? /* @__PURE__ */ jsx(
+            ProrationLine,
+            {
+              proration: offer.proration,
+              currency,
+              effectiveLabel: offer.effectiveLabel,
+              nextMinor: offer.nextMinor,
+              locale,
+              labels: labelsProp
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Text, { style: styles.legal, children: legalText }),
+          footNote ? /* @__PURE__ */ jsx(Text, { style: styles.footNote, children: footNote }) : null,
+          /* @__PURE__ */ jsxs(View, { style: styles.featureActions, children: [
+            onRestore ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: restoreLabel,
+                onPress: onRestore,
+                children: /* @__PURE__ */ jsx(Text, { style: styles.link, children: restoreLabel })
+              }
+            ) : null,
+            canDismiss ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: dismissLabel,
+                onPress: onDismiss,
+                children: /* @__PURE__ */ jsx(Text, { style: styles.link, children: dismissLabel })
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(View, { accessibilityState: { busy: loading }, style: [styles.surface, style], children: /* @__PURE__ */ jsx(
+    Paywall,
+    {
+      error,
+      title,
+      description: subtitle,
+      meter: slot,
+      plans: shown.map(
+        (plan) => toPaywallPlan(
+          plan,
+          currency,
+          cadence,
+          savings?.[plan.id],
+          currentPlanId === plan.id,
+          currentLabel,
+          locale,
+          labels,
+          pay
+        )
+      ),
+      selectedPlanId: selected,
+      onSelectPlan: setSelected,
+      ctaLabel: selectedPlan ? planCta(selectedPlan, pay).cta : restoreLabel,
+      busy: loading || pendingPlanId != null,
+      onPurchase: (id) => onPickPlan?.(id),
+      legalText,
+      footNote: footer,
+      restoreLabel,
+      onRestore,
+      onClose: canDismiss ? onDismiss : void 0,
+      closeLabel: dismissLabel,
+      labels: labelsProp
+    }
+  ) });
+}
+var sheet6 = createStyleSheet((theme) => ({
+  surface: { flex: 1 },
+  slot: { gap: theme.space.s3 },
+  platformNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  footerNotes: { gap: theme.space.s1 },
+  // Legal copy is footnote 13 in `text2` (F60), never caption 11.
+  footNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  legal: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  link: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  featureSurface: {
+    alignSelf: "stretch",
+    gap: theme.space.s4,
+    padding: theme.space.s5,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  featureHead: { alignItems: "center", gap: theme.space.s2 },
+  // F117 / Refinement 38: the surface title in the native face.
+  featureTitle: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  featureSubtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.fontSize * theme.lineHeight.normal,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  featureActions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.s4
+  },
+  prorationLine: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    columnGap: theme.space.s1,
+    rowGap: theme.space[2]
+  },
+  prorationLineCompact: { columnGap: theme.space[2], rowGap: 0 },
+  prorationLineStack: { flexDirection: "column", flexWrap: "nowrap", alignItems: "flex-start" },
+  prorationLineRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    columnGap: theme.space.s1
+  },
+  prorationWord: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  prorationSep: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  prorationTable: {
+    alignSelf: "stretch",
+    gap: theme.space.s2,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  prorationTableCompact: { gap: theme.space.s1, padding: theme.space.s3 },
+  // The sans overline role (Refinement 36), not bold caption 2 caps.
+  overline: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2
+  },
+  prorationSortRow: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  prorationSortButton: {
+    minHeight: theme.tapMin,
+    justifyContent: "center"
+  },
+  prorationSelectRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  prorationSelectBody: { flex: 1 },
+  prorationNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  prorationError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.danger
+  }
+}));
+var STATUS = {
+  active: { variant: "good", label: "statusActive" },
+  trial: { variant: "info", label: "statusTrial" },
+  canceled: { variant: "neutral", label: "statusCanceled" },
+  "past-due": { variant: "warn", label: "statusPastDue" }
+};
+function ManageSubscription({
+  planName,
+  status = "active",
+  statusLabel,
+  price,
+  renewalDate,
+  renewalLabel: renewalLabelProp,
+  paymentMethod,
+  paymentLabel: paymentLabelProp,
+  actions = [],
+  onAction,
+  cancelLabel: cancelLabelProp,
+  onCancel,
+  cancelNote,
+  cancelBusy = false,
+  labels: labelsProp,
+  platform,
+  density = "standard",
+  size = "lg",
+  error,
+  disabled = false
+}) {
+  const os = useInputPlatform(platform);
+  const { styles } = useStyles(sheet7, { os });
+  const labels = useLabels("manageSubscription", MANAGE_SUBSCRIPTION_LABELS, labelsProp);
+  const renewalLabel = renewalLabelProp ?? labels.renews;
+  const paymentLabel = paymentLabelProp ?? labels.payment;
+  const cancelLabel = cancelLabelProp ?? labels.cancel;
+  const theme = useLoamTheme("commerce");
+  const badge = STATUS[status];
+  return /* @__PURE__ */ jsxs(
+    ScrollView,
+    {
+      style: styles.screen,
+      contentContainerStyle: [
+        styles.scroll,
+        density === "compact" ? styles.scrollCompact : null,
+        density === "comfortable" ? styles.scrollComfortable : null
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.cardHead, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.planName, children: planName }),
+            /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: badge.variant, size: "sm", children: statusLabel ?? labels[badge.label] })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.meta, children: labels.renewalLine(price, renewalLabel, renewalDate) }),
+          paymentMethod ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: labels.paymentLine(paymentLabel, paymentMethod) }) : null
+        ] }),
+        actions.length > 0 ? /* @__PURE__ */ jsx(List, { children: actions.map((a) => /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            platform: os,
+            title: a.label,
+            subtitle: a.value,
+            leading: a.icon ? /* @__PURE__ */ jsx(Icon, { name: a.icon, size: theme.icon.md, color: theme.color.text2 }) : null,
+            trailing: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.sm, color: theme.color.text3 }),
+            disabled,
+            onPress: () => onAction?.(a.id)
+          },
+          a.id
+        )) }) : null,
+        onCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          error ? /* @__PURE__ */ jsx(Text, { role: "alert", accessibilityRole: "alert", style: styles.error, children: error }) : null,
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: cancelLabel,
+              accessibilityState: { busy: cancelBusy, disabled },
+              disabled,
+              onPress: cancelBusy ? void 0 : onCancel,
+              style: ({ pressed }) => [
+                styles.cancel,
+                size === "sm" ? styles.cancelSm : null,
+                size === "md" ? styles.cancelMd : null,
+                disabled ? styles.cancelDisabled : null,
+                pressed ? styles.cancelPressed : null
+              ],
+              children: /* @__PURE__ */ jsx(Text, { style: styles.cancelLabel, children: cancelLabel })
+            }
+          ),
+          cancelNote ? /* @__PURE__ */ jsx(Text, { style: styles.cancelNote, children: cancelNote }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+var sheet7 = createStyleSheet((theme) => ({
+  screen: { flex: 1, backgroundColor: theme.color.bg },
+  scroll: { padding: theme.layout.screenPad, gap: theme.space.s3 },
+  card: {
+    padding: theme.space.s4,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    gap: theme.space.s2
+  },
+  cardHead: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  planName: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.type.headline.fontWeight,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text
+  },
+  meta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  // The lg tier (44), r 12, the outline in the tone (Refinement 38).
+  cancel: {
+    minHeight: theme.ctl.lg,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    // Static `w2`: the destructive outline is the drawing, not chrome.
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.danger,
+    backgroundColor: "transparent"
+  },
+  cancelSm: { minHeight: theme.ctl.sm },
+  cancelMd: { minHeight: theme.ctl.md },
+  cancelDisabled: { opacity: theme.state.disabledOpacity },
+  scrollCompact: { gap: theme.space.s2 },
+  scrollComfortable: { gap: theme.space.s5 },
+  error: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.danger
+  },
+  cancelPressed: { backgroundColor: theme.state.pressed },
+  // Text on a transparent surface, so the tone itself — not `dangerInk`, which
+  // belongs on a solid danger fill.
+  // The Button lg label: iOS 17 / 600, Android 14 / 500.
+  cancelLabel: {
+    fontFamily: theme.font.sans,
+    color: theme.color.danger,
+    variants: {
+      os: {
+        ios: { fontWeight: theme.fontWeight.semibold, fontSize: theme.fontSize[17] },
+        android: { fontWeight: theme.fontWeight.medium, fontSize: theme.fontSize[14] }
+      }
+    }
+  },
+  // Legal-weight copy: footnote 13 in `text2` (F60).
+  cancelNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "center" }
+}));
+function ToggleRow({
+  label,
+  description,
+  value,
+  onValueChange,
+  leading,
+  disabled = false,
+  error = false,
+  size,
+  tone = "default",
+  density = "standard",
+  trailing,
+  variant = "plain",
+  style,
+  accessibilityLabel,
+  labels: labelsProp,
+  platform
+}) {
+  const os = useInputPlatform(platform);
+  const { styles } = useStyles(sheet8, { os });
+  const height = styles[`${os}${description ? "Two" : "One"}`];
+  const labels = useLabels("toggleRow", TOGGLE_ROW_LABELS, labelsProp);
+  const announced = accessibilityLabel ?? (description ? labels.withDescription(label, description) : label);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "switch",
+      accessibilityLabel: announced,
+      accessibilityState: { checked: value, disabled },
+      "aria-checked": value,
+      "aria-invalid": error ? true : void 0,
+      disabled,
+      onPress: disabled ? void 0 : () => onValueChange?.(!value),
+      style: ({ pressed }) => [
+        styles.row,
+        height,
+        density === "compact" ? styles.compact : density === "comfortable" ? styles.comfortable : null,
+        variant === "card" ? styles.card : null,
+        disabled ? styles.disabled : null,
+        pressed && !disabled ? styles.pressed : null,
+        style
+      ],
+      children: [
+        leading != null ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.leading, children: leading }) : null,
+        /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.label, tone !== "default" ? styles[`tone_${tone}`] : null], children: label }),
+          description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
+          typeof error === "string" && error ? /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: error }) : null
+        ] }),
+        trailing != null ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.trailing, children: trailing }) : null,
+        /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.glyph, children: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            value,
+            disabled,
+            decorative: true,
+            platform: os,
+            ...size ? { size } : null,
+            ...error ? { failed: true } : null
+          }
+        ) })
+      ]
+    }
+  );
+}
+var sheet8 = createStyleSheet((theme) => ({
+  // Refinement 38: the OS list row. One line 44 / 56, two lines 60 / 72; the
+  // label is the body role at 400, never a bold headline (F59).
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s2,
+    backgroundColor: "transparent",
+    variants: {
+      os: { ios: { gap: theme.space.s3 }, android: { gap: theme.space.s4 } }
+    }
+  },
+  iosOne: { minHeight: theme.ctl.lg },
+  iosTwo: { minHeight: theme.space[60] },
+  androidOne: { minHeight: theme.space[56] },
+  androidTwo: { minHeight: theme.space[72] },
+  pressed: { backgroundColor: theme.state.pressed },
+  disabled: { opacity: theme.state.disabledOpacity },
+  main: { flex: 1, minWidth: 0, gap: theme.space[2] },
+  label: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: {
+          fontWeight: theme.type.body.fontWeight,
+          fontSize: theme.type.body.fontSize,
+          lineHeight: theme.type.body.lineHeight,
+          letterSpacing: theme.type.body.letterSpacing
+        },
+        android: {
+          fontWeight: theme.fontWeight.regular,
+          fontSize: theme.fontSize[16],
+          lineHeight: theme.space[24],
+          letterSpacing: theme.fontSize[16] * 0.03125
+        }
+      }
+    }
+  },
+  // The second line: iOS subheadline 15, Android body-medium 14, in `text2`.
+  description: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    variants: {
+      os: {
+        ios: {
+          fontSize: theme.type.subheadline.fontSize,
+          lineHeight: theme.type.subheadline.lineHeight,
+          letterSpacing: theme.type.subheadline.letterSpacing
+        },
+        android: {
+          fontSize: theme.fontSize[14],
+          lineHeight: theme.space[20],
+          letterSpacing: theme.fontSize[14] * 0.0179
+        }
+      }
+    }
+  },
+  // `pointerEvents` in the style object, not as a prop: the prop form is
+  // deprecated in RN 0.76.
+  leading: { flexShrink: 0, alignItems: "center", justifyContent: "center" },
+  glyph: { flexShrink: 0, pointerEvents: "none" },
+  trailing: { flexShrink: 0, alignItems: "center", justifyContent: "center" },
+  compact: { paddingVertical: theme.space.s1 },
+  comfortable: { paddingVertical: theme.space.s4 },
+  card: {
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  },
+  tone_accent: { color: theme.color.accentStrong },
+  tone_good: { color: theme.color.goodOnSoft },
+  tone_warn: { color: theme.color.warnOnSoft },
+  tone_danger: { color: theme.color.danger }
+}));
+function SettingsScreen({
+  groups,
+  onRowPress,
+  onToggle,
+  onSelect,
+  save = "immediate",
+  title,
+  dirty = false,
+  saving = false,
+  onSave,
+  onCancel,
+  platform: platformProp,
+  labels: labelsProp,
+  density = "standard",
+  size,
+  error,
+  disabled: disabledAll = false
+}) {
+  const os = useInputPlatform(platformProp);
+  const { styles } = useStyles(sheet9, { os });
+  const theme = useLoamTheme("commerce");
+  const labels = useLabels("settingsScreen", SETTINGS_SCREEN_LABELS, labelsProp);
+  const [picking, setPicking] = React7.useState(
+    null
+  );
+  const canSave = dirty && !saving;
+  const choose = (row, next) => {
+    setPicking(null);
+    if (next === row.value) return;
+    row.onValueChange?.(next);
+    onSelect?.(row.id, next);
+  };
+  const renderRow = (row) => {
+    if (row.kind === "switch") {
+      return /* @__PURE__ */ jsx(
+        ToggleRow,
+        {
+          label: row.label,
+          description: row.description,
+          value: row.value,
+          disabled: row.disabled || disabledAll,
+          density,
+          ...size ? { size } : null,
+          platform: os,
+          onValueChange: (next) => {
+            row.onValueChange?.(next);
+            onToggle?.(row.id, next);
+          }
+        },
+        row.id
+      );
+    }
+    if (row.kind === "value") {
+      return /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [styles.row, os === "android" ? styles.rowTwoLine : null],
+          accessible: true,
+          accessibilityLabel: `${row.label}, ${row.value}`,
+          children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.label, children: row.label }),
+              os === "android" ? /* @__PURE__ */ jsx(Text, { style: styles.second, children: row.value }) : null
+            ] }),
+            os === "ios" ? /* @__PURE__ */ jsx(Text, { style: styles.value, children: row.value }) : null
+          ]
+        },
+        row.id
+      );
+    }
+    const isSelect = row.kind === "select" || row.kind === "segmented";
+    const display = isSelect ? row.options.find((o) => o.value === row.value)?.label ?? row.value : row.kind === "nav" ? row.value : void 0;
+    const disabled = (isSelect ? Boolean(row.disabled) : false) || disabledAll;
+    let onPress;
+    if (row.kind === "select" || row.kind === "segmented") {
+      const picked = row;
+      onPress = () => setPicking(picked);
+    } else {
+      const pressed = row;
+      onPress = () => {
+        pressed.onPress?.();
+        onRowPress?.(pressed.id);
+      };
+    }
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: isSelect && display ? labels.selectRow(row.label, display) : row.label,
+        accessibilityState: { disabled },
+        disabled,
+        onPress: disabled ? void 0 : onPress,
+        style: ({ pressed }) => [
+          styles.row,
+          os === "android" && display ? styles.rowTwoLine : null,
+          pressed && !disabled ? styles.pressed : null,
+          disabled ? styles.disabled : null
+        ],
+        children: [
+          row.kind === "nav" && row.icon ? /* @__PURE__ */ jsx(Icon, { name: row.icon, size: theme.icon.md, color: theme.color.text2 }) : null,
+          /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+            /* @__PURE__ */ jsx(Text, { style: row.kind === "danger" ? styles.dangerLabel : styles.label, children: row.label }),
+            os === "android" && display ? /* @__PURE__ */ jsx(Text, { style: styles.second, children: display }) : null
+          ] }),
+          os === "ios" && row.kind !== "danger" ? /* @__PURE__ */ jsxs(View, { style: styles.trailing, children: [
+            display ? /* @__PURE__ */ jsx(Text, { style: styles.value, children: display }) : null,
+            /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.sm, color: theme.color.text3 })
+          ] }) : null
+        ]
+      },
+      row.id
+    );
+  };
+  const saveBar = save === "explicit" ? /* @__PURE__ */ jsxs(View, { style: styles.bar, accessibilityRole: "header", children: [
+    os === "ios" ? /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: onCancel, style: styles.barSide, children: /* @__PURE__ */ jsx(Text, { style: styles.barAction, children: labels.cancel }) }) : /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.close,
+        onPress: onCancel,
+        style: styles.barIcon,
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.color.text })
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.barTitle, numberOfLines: 1, children: title }),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityState: { disabled: !canSave, busy: saving },
+        "aria-disabled": !canSave,
+        disabled: !canSave,
+        onPress: canSave ? onSave : void 0,
+        style: [styles.barSide, styles.barEnd],
+        children: /* @__PURE__ */ jsx(Text, { style: [styles.barAction, styles.barSave, !canSave ? styles.barOff : null], children: saving ? labels.saving : labels.save })
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(View, { style: styles.screen, children: [
+    saveBar,
+    /* @__PURE__ */ jsxs(
+      ScrollView,
+      {
+        style: styles.screen,
+        contentContainerStyle: [
+          styles.scroll,
+          density === "compact" ? styles.scrollCompact : density === "comfortable" ? styles.scrollComfortable : null
+        ],
+        children: [
+          error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.error, children: error }) : null,
+          groups.map((group) => /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+            group.title ? /* @__PURE__ */ jsx(Text, { style: styles.caption, accessibilityRole: "header", children: group.title }) : null,
+            /* @__PURE__ */ jsx(View, { style: styles.card, children: group.rows.map((row, i) => /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+              i > 0 && os === "ios" ? /* @__PURE__ */ jsx(
+                View,
+                {
+                  "aria-hidden": true,
+                  accessibilityElementsHidden: true,
+                  importantForAccessibility: "no-hide-descendants",
+                  style: styles.divider
+                }
+              ) : null,
+              renderRow(row)
+            ] }, row.id)) }),
+            group.footnote ? /* @__PURE__ */ jsx(Text, { style: styles.footnote, children: group.footnote }) : null
+          ] }, group.id))
+        ]
+      }
+    ),
+    picking ? /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: true,
+        platform: os,
+        title: picking.label,
+        onOpenChange: (open) => {
+          if (!open) setPicking(null);
+        },
+        children: /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            platform: os,
+            accessibilityLabel: picking.label,
+            value: picking.value,
+            onValueChange: (next) => choose(picking, next),
+            children: picking.options.map((o) => /* @__PURE__ */ jsx(RadioGroupItem, { value: o.value, label: o.label }, o.value))
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+var sheet9 = createStyleSheet((theme) => ({
+  screen: { flex: 1, backgroundColor: theme.color.bg },
+  scroll: {
+    paddingBottom: theme.space.s6,
+    variants: {
+      os: {
+        ios: { paddingHorizontal: theme.space.s4, paddingTop: theme.space.s5, gap: theme.space.s6 },
+        android: { gap: theme.space.s2 }
+      }
+    }
+  },
+  scrollCompact: {
+    variants: { os: { ios: { gap: theme.space.s3 }, android: { gap: theme.space.s1 } } }
+  },
+  scrollComfortable: {
+    variants: { os: { ios: { gap: theme.space.s8 }, android: { gap: theme.space.s5 } } }
+  },
+  error: {
+    paddingHorizontal: theme.space.s4,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.danger
+  },
+  group: { variants: { os: { ios: { gap: theme.space.s2 }, android: {} } } },
+  // Group header: iOS 13 uppercase `text2`, Android 14 / 500 `accentStrong`.
+  caption: {
+    fontFamily: theme.font.sans,
+    variants: {
+      os: {
+        ios: {
+          paddingHorizontal: theme.space.s4,
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          letterSpacing: theme.type.footnote.letterSpacing,
+          textTransform: "uppercase",
+          color: theme.color.text2
+        },
+        android: {
+          paddingHorizontal: theme.space.s4,
+          paddingTop: theme.space.s4,
+          paddingBottom: theme.space.s2,
+          fontWeight: theme.fontWeight.medium,
+          fontSize: theme.fontSize[14],
+          lineHeight: theme.space[20],
+          color: theme.color.accentStrong
+        }
+      }
+    }
+  },
+  // iOS: an inset r 12 card on `surface`. Android: the list sits on the page.
+  card: {
+    variants: {
+      os: {
+        ios: {
+          backgroundColor: theme.color.surface,
+          borderRadius: theme.radius.md,
+          overflow: "hidden"
+        },
+        android: {}
+      }
+    }
+  },
+  divider: {
+    height: theme.borderWidth.hair,
+    marginStart: theme.space.s4,
+    backgroundColor: theme.color.border
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: theme.space.s4,
+    backgroundColor: "transparent",
+    variants: {
+      os: {
+        ios: { minHeight: theme.ctl.lg, gap: theme.space.s3, paddingVertical: theme.space.s2 },
+        android: {
+          minHeight: theme.space[56],
+          gap: theme.space.s4,
+          paddingVertical: theme.space.s2
+        }
+      }
+    }
+  },
+  // Android: a row with the value as a second line takes the two-line tier (72).
+  rowTwoLine: { minHeight: theme.space[72] },
+  pressed: { backgroundColor: theme.state.pressed },
+  disabled: { opacity: theme.state.disabledOpacity },
+  main: { flex: 1, minWidth: 0, gap: theme.space[2] },
+  // Row title: iOS body 17 / 400; Android body-large 16 / .5.
+  label: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: {
+          fontWeight: theme.type.body.fontWeight,
+          fontSize: theme.type.body.fontSize,
+          lineHeight: theme.type.body.lineHeight,
+          letterSpacing: theme.type.body.letterSpacing
+        },
+        android: {
+          fontWeight: theme.fontWeight.regular,
+          fontSize: theme.fontSize[16],
+          lineHeight: theme.space[24],
+          letterSpacing: theme.fontSize[16] * 0.03125
+        }
+      }
+    }
+  },
+  // Android's second line: the value, 14 `text2`.
+  second: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.space[20],
+    letterSpacing: theme.fontSize[14] * 0.0179,
+    color: theme.color.text2
+  },
+  trailing: { flexDirection: "row", alignItems: "center", gap: theme.space.s1, flexShrink: 1 },
+  // iOS trailing value: body 17 in `text2`.
+  value: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing,
+    color: theme.color.text2
+  },
+  // Destructive rows take `dangerOnSoft` (Refinement 38) — `dangerInk` belongs
+  // on a solid danger fill, not on a list row.
+  dangerLabel: {
+    fontFamily: theme.font.sans,
+    color: theme.color.dangerOnSoft,
+    variants: {
+      os: {
+        ios: {
+          fontSize: theme.type.body.fontSize,
+          lineHeight: theme.type.body.lineHeight,
+          letterSpacing: theme.type.body.letterSpacing
+        },
+        android: {
+          fontSize: theme.fontSize[16],
+          lineHeight: theme.space[24],
+          letterSpacing: theme.fontSize[16] * 0.03125
+        }
+      }
+    }
+  },
+  footnote: {
+    paddingHorizontal: theme.space.s4,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2,
+    variants: { os: { ios: {}, android: { paddingBottom: theme.space.s2 } } }
+  },
+  /* ---- explicit save bar ---- */
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.bg,
+    variants: {
+      os: {
+        ios: {
+          minHeight: theme.ctl.lg,
+          paddingHorizontal: theme.space.s4,
+          borderBottomWidth: theme.borderWidth.hair,
+          borderBottomColor: theme.color.border
+        },
+        android: {
+          minHeight: theme.space[56],
+          paddingHorizontal: theme.space[4],
+          gap: theme.space[4]
+        }
+      }
+    }
+  },
+  barSide: { minHeight: theme.ctl.lg, justifyContent: "center" },
+  barEnd: { alignItems: "flex-end" },
+  barIcon: {
+    width: theme.space[48],
+    height: theme.space[48],
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full
+  },
+  barTitle: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: {
+          textAlign: "center",
+          fontWeight: theme.type.headline.fontWeight,
+          fontSize: theme.type.headline.fontSize,
+          lineHeight: theme.type.headline.lineHeight,
+          letterSpacing: theme.type.headline.letterSpacing
+        },
+        android: {
+          fontSize: theme.fontSize[22],
+          lineHeight: theme.space[28]
+        }
+      }
+    }
+  },
+  // Text actions: iOS body 17 accent (Save 600); Android label-large 14 / 500.
+  barAction: {
+    fontFamily: theme.font.sans,
+    color: theme.color.accentStrong,
+    variants: {
+      os: {
+        ios: {
+          fontSize: theme.type.body.fontSize,
+          lineHeight: theme.type.body.lineHeight,
+          letterSpacing: theme.type.body.letterSpacing
+        },
+        android: {
+          paddingHorizontal: theme.space.s3,
+          fontWeight: theme.fontWeight.medium,
+          fontSize: theme.fontSize[14],
+          lineHeight: theme.space[20],
+          letterSpacing: theme.fontSize[14] * 714e-5
+        }
+      }
+    }
+  },
+  barSave: { variants: { os: { ios: { fontWeight: theme.fontWeight.semibold }, android: {} } } },
+  barOff: { color: theme.color.text3 }
+}));
+function NotificationPreferences({
+  systemEnabled = true,
+  systemNote,
+  systemActionLabel: systemActionLabelProp,
+  onOpenSystemSettings,
+  categories,
+  onChange,
+  labels: labelsProp,
+  density = "standard",
+  size,
+  loading = false,
+  error,
+  disabled = false,
+  platform
+}) {
+  const os = useInputPlatform(platform);
+  const { styles } = useStyles(sheet10, { os });
+  const labels = useLabels("notificationPreferences", NOTIFICATION_PREFERENCES_LABELS, labelsProp);
+  const systemActionLabel = systemActionLabelProp ?? labels.openSettings;
+  const note = systemNote ?? (systemEnabled ? labels.systemOn : labels.systemOff);
+  return /* @__PURE__ */ jsxs(
+    ScrollView,
+    {
+      style: styles.screen,
+      contentContainerStyle: [
+        styles.scroll,
+        density === "compact" ? styles.scrollCompact : density === "comfortable" ? styles.scrollComfortable : null
+      ],
+      "aria-busy": loading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            accessibilityRole: systemEnabled ? "text" : "alert",
+            style: [styles.banner, systemEnabled ? styles.bannerOn : styles.bannerOff],
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [styles.bannerText, systemEnabled ? styles.bannerTextOn : styles.bannerTextOff],
+                  children: note
+                }
+              ),
+              !systemEnabled && onOpenSystemSettings ? /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: systemActionLabel,
+                  onPress: onOpenSystemSettings,
+                  style: ({ pressed }) => [styles.bannerAction, pressed ? styles.pressed : null],
+                  children: /* @__PURE__ */ jsx(Text, { style: styles.bannerActionLabel, children: systemActionLabel })
+                }
+              ) : null
+            ]
+          }
+        ),
+        error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.error, children: error }) : null,
+        loading ? /* @__PURE__ */ jsx(View, { style: styles.card, testID: "notification-loading", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(View, { style: styles.loadingRow, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text" }) }, i)) }) : null,
+        !loading && categories.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.card, children: categories.map((c, i) => /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+          i > 0 && os === "ios" ? /* @__PURE__ */ jsx(
+            View,
+            {
+              "aria-hidden": true,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              style: styles.divider
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            ToggleRow,
+            {
+              platform: os,
+              label: c.label,
+              description: c.description,
+              value: c.value,
+              disabled: c.disabled === true || !systemEnabled || disabled,
+              density,
+              ...size ? { size } : null,
+              onValueChange: (next) => onChange?.(c.id, next)
+            }
+          )
+        ] }, c.id)) }) : null
+      ]
+    }
+  );
+}
+var sheet10 = createStyleSheet((theme) => ({
+  screen: { flex: 1, backgroundColor: theme.color.bg },
+  scroll: { padding: theme.layout.screenPad, gap: theme.space.s3 },
+  banner: {
+    padding: theme.space.s4,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    gap: theme.space.s3,
+    alignItems: "flex-start"
+  },
+  bannerOn: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
+  bannerOff: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+  bannerText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal
+  },
+  // Text on a `-soft` tint is a surface case: the tone itself, never the on-ink.
+  bannerTextOn: { color: theme.color.accentOnSoft },
+  bannerTextOff: { color: theme.color.warnOnSoft },
+  bannerAction: {
+    minHeight: theme.tapMin,
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.warn
+  },
+  // Solid `warn` fill, so the measured ink for that fill.
+  bannerActionLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.warnInk
+  },
+  scrollCompact: { gap: theme.space.s1 },
+  scrollComfortable: { gap: theme.space.s5 },
+  error: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.danger
+  },
+  loadingRow: { padding: theme.space.s4 },
+  pressed: { opacity: theme.state.pressedOpacity },
+  card: {
+    variants: {
+      os: {
+        ios: {
+          backgroundColor: theme.color.surface,
+          borderRadius: theme.radius.md,
+          overflow: "hidden"
+        },
+        android: {}
+      }
+    }
+  },
+  divider: {
+    height: theme.borderWidth.hair,
+    marginStart: theme.space.s4,
+    backgroundColor: theme.color.border
+  }
+}));
+
+export { BillingPeriodToggle, DeleteAccountScreen, ManageSubscription, MeterBar, NotificationPreferences, Paywall, PaywallGate, PaywallSurface, PlanCard, PlanFeatureRow, PlanGrid, PlanPriceCell, PlanPriceDelta, ProrationLine, ProrationTable, SavingsChip, SettingsScreen, ToggleRow };