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

package/dist/chunk-NQYBUO3K.js

@@ -0,0 +1,1795 @@
+import { Switch } from './chunk-YG3ZJHGU.js';
+import { List, ListRow } from './chunk-IVNRBPGC.js';
+import { SegmentedControl } from './chunk-5YNTNN5A.js';
+import { Progress } from './chunk-2ZZ7TDJ4.js';
+import { Amount, PriceRow } from './chunk-VBOXAEPI.js';
+import { TextField } from './chunk-ITTYJZWX.js';
+import { Badge } from './chunk-SBMNWWBV.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React6 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, PLAN_COPY, planCta, yearlyMonthly, money } from '@btndprojects/loam-pay';
+
+function DeleteAccountScreen({
+  title = "Delete account",
+  deletes,
+  retains,
+  duration,
+  confirmationPhrase,
+  confirmationLabel,
+  confirmationValue,
+  onConfirmationChange,
+  confirmLabel = "Delete my account",
+  onConfirm,
+  cancelLabel = "Keep my account",
+  onCancel
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const isControlled = confirmationValue !== void 0;
+  const [internal, setInternal] = React6.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, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
+    /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.caption, children: "What is deleted" }),
+      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, children: "What is kept, and why" }),
+      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: `Deletion completes ${duration}.` }) }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: confirmationLabel ?? `Type ${confirmationPhrase} to confirm`,
+        value: typed,
+        onChangeText: change,
+        autoCapitalize: "characters",
+        autoCorrect: false,
+        accessibilityLabel: confirmationLabel ?? `Type ${confirmationPhrase} to confirm`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: confirmLabel,
+        accessibilityState: { disabled: !armed },
+        disabled: !armed,
+        onPress: armed ? onConfirm : void 0,
+        style: ({ pressed }) => [
+          styles.confirm,
+          armed ? null : styles.confirmDisabled,
+          pressed && armed ? styles.pressed : null
+        ],
+        children: /* @__PURE__ */ jsx(Text, { style: [styles.confirmLabel, armed ? null : styles.confirmLabelDisabled], children: confirmLabel })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: cancelLabel,
+        onPress: onCancel,
+        style: ({ pressed }) => [styles.cancel, pressed ? styles.pressed : null],
+        children: /* @__PURE__ */ jsx(Text, { style: styles.cancelLabel, children: cancelLabel })
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  screen: { flex: 1, backgroundColor: theme.color.bg },
+  scroll: { padding: theme.layout.screenPad, gap: theme.space.s4 },
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title2.fontSize,
+    lineHeight: theme.type.title2.lineHeight,
+    letterSpacing: theme.type.title2.letterSpacing,
+    color: theme.color.text
+  },
+  group: { gap: theme.space.s2 },
+  caption: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  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
+  },
+  confirm: {
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.danger
+  },
+  // Disabled is the state layer plus `disabledOpacity`, never a hand-greyed colour.
+  confirmDisabled: { backgroundColor: theme.state.disabledFill },
+  // Solid `danger` fill, so its measured ink — not a flat white.
+  confirmLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.callout.fontSize,
+    lineHeight: theme.type.callout.lineHeight,
+    color: theme.color.dangerInk
+  },
+  confirmLabelDisabled: { color: theme.color.text3, opacity: theme.state.disabledOpacity },
+  cancel: {
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cancelLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+var INDICATOR = { ring: 20, dot: 10 };
+function Paywall({
+  title,
+  description,
+  features = [],
+  meter,
+  plans,
+  selectedPlanId,
+  onSelectPlan,
+  ctaLabel,
+  onPurchase,
+  busy = false,
+  legalText,
+  restoreLabel = "Restore purchase",
+  onRestore,
+  footNote,
+  links = [],
+  onLinkPress,
+  onClose,
+  closeLabel = "Close"
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  const fallback = plans.find((p) => p.recommended)?.id ?? plans[0]?.id;
+  const isControlled = selectedPlanId !== void 0;
+  const [internal, setInternal] = React6.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: [
+        /* @__PURE__ */ jsx(Text, { style: styles.title, 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: theme.color.good }),
+          /* @__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: `${plan.name} ${plan.price} ${plan.period}`,
+            accessibilityState: { checked: on, selected: on },
+            "aria-checked": on,
+            onPress: () => select(plan.id),
+            style: ({ pressed }) => [
+              styles.plan,
+              on ? styles.planOn : null,
+              pressed ? styles.planPressed : null
+            ],
+            children: [
+              /* @__PURE__ */ jsx(View, { style: [styles.indicator, on ? styles.indicatorOn : null], children: on ? /* @__PURE__ */ jsx(View, { style: styles.indicatorDot }) : null }),
+              /* @__PURE__ */ jsxs(View, { style: styles.planMain, children: [
+                plan.recommended ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", children: plan.recommendedLabel ?? "Best value" }) : null,
+                /* @__PURE__ */ jsxs(Text, { style: styles.planTitle, children: [
+                  plan.name,
+                  " \xB7 ",
+                  plan.price,
+                  " ",
+                  plan.period
+                ] }),
+                plan.note ? /* @__PURE__ */ jsx(Text, { style: styles.planNote, children: plan.note }) : null
+              ] })
+            ]
+          },
+          plan.id
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+      /* @__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: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: restoreLabel,
+            onPress: onRestore,
+            children: /* @__PURE__ */ jsx(Text, { style: styles.link, children: restoreLabel })
+          }
+        ),
+        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 },
+  // Product name = the display face at the "Title 1" role.
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title1.fontSize,
+    lineHeight: theme.type.title1.lineHeight,
+    letterSpacing: theme.type.title1.letterSpacing,
+    color: theme.color.text
+  },
+  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 },
+  plan: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.tapMin,
+    padding: theme.space.s3,
+    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"
+  },
+  // `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 `accentSoft` fill to the plain surface. It is a graphical object under
+  // SC 1.4.11 either way — see `focusRingColor()`, which is named for the focus
+  // ring but derives the accent at exactly the 3:1 hard-edge strength any
+  // meaning-carrying accent edge needs. Identical to the raw accent in 9 of the
+  // 14 palette x mode combos, so this moves only the four palettes that failed.
+  planOn: {
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.color.accentSoft
+  },
+  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
+  },
+  planMain: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  planTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing,
+    color: theme.color.text
+  },
+  planNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  footer: {
+    padding: theme.layout.screenPad,
+    gap: theme.space.s2,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border,
+    backgroundColor: theme.color.bg
+  },
+  legal: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3,
+    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
+  },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "flex-start" }
+}));
+var WEB_BLUR = Platform.OS === "web";
+var WEB_BLUR_STYLE = { filter: "blur(8px) saturate(0.6)", opacity: 0.7 };
+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 = "regular",
+  BlurComponent,
+  style
+}) {
+  const { styles, theme } = useStyles(sheet3);
+  if (!locked) return /* @__PURE__ */ jsx(View, { style, children });
+  const compact = size === "compact";
+  const fade = treatment === "fade";
+  const preview = previewHeight ?? theme.panel.xs;
+  const card = /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "summary",
+      accessibilityLabel: title,
+      style: [styles.card, compact ? styles.cardCompact : styles.cardRegular],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.lock, compact ? styles.lockCompact : styles.lockRegular], children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "lock",
+            size: compact ? theme.icon.sm : theme.icon.md,
+            color: theme.color.accentOnSoft
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(View, { style: styles.copy, children: [
+          planLabel ? /* @__PURE__ */ jsx(Text, { style: styles.plan, children: planLabel }) : null,
+          /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, children: title }),
+          description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", 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 ? WEB_BLUR_STYLE : 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: 0.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
+  },
+  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 },
+  plan: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.accent
+  },
+  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
+  }
+}));
+function MeterBar({
+  value,
+  max,
+  unit,
+  tone = "accent",
+  label,
+  caption,
+  size = "md",
+  animate = false,
+  accessibilityLabel,
+  style
+}) {
+  const { styles } = useStyles(sheet4);
+  const readout = `${value.toLocaleString()} of ${max.toLocaleString()}${unit ? ` ${unit}` : ""}`;
+  const name = accessibilityLabel ?? (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 }) })
+    ] }),
+    /* @__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
+  },
+  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 SavingsChip({
+  savingMinor,
+  plan,
+  currency,
+  label = "Save",
+  per = "a year",
+  locale,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet5);
+  const saving = savingMinor ?? (plan ? yearlySaving(plan) : null);
+  if (saving == null) return null;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.savingChip, style], children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.savingWord, children: label }),
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor: saving,
+        currency,
+        size: "sm",
+        weight: "bold",
+        locale,
+        style: { color: theme.color.goodOnSoft }
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.savingWord, children: per })
+  ] });
+}
+function PlanPriceDelta({
+  fromMinor,
+  toMinor,
+  currency,
+  unit = PLAN_COPY.perSeat,
+  sameLabel = "Same price",
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet5);
+  const delta = planDelta(fromMinor, toMinor);
+  if (delta === 0) {
+    return /* @__PURE__ */ jsx(Text, { style: [styles.deltaUnit, style], children: sameLabel });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles.deltaRow, style], children: [
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor: delta,
+        currency,
+        size: "sm",
+        weight: "bold",
+        signed: true,
+        tone: delta > 0 ? "warn" : "good",
+        locale
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.deltaUnit, children: unit })
+  ] });
+}
+function PlanFeatureRow({
+  label,
+  included = true,
+  detail,
+  stateLabel,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet5);
+  const state = stateLabel ?? (included ? "Included" : "Not included");
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "listitem",
+      accessibilityLabel: `${state}: ${label}${detail ? `. ${detail}` : ""}`,
+      style: [styles.featureRow, style],
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: included ? "check" : "minus",
+            size: theme.icon.sm,
+            color: included ? theme.color.good : theme.color.text3
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.featureBody, children: [
+          /* @__PURE__ */ jsx(Text, { style: included ? styles.featureLabel : styles.featureLabelOut, children: label }),
+          detail ? /* @__PURE__ */ jsx(Text, { style: styles.featureDetail, children: detail }) : null
+        ] })
+      ]
+    }
+  );
+}
+function PlanPriceCell({
+  plan,
+  currency,
+  cadence = "mo",
+  size = "lg",
+  savingMinor,
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet5);
+  const words = planCta(plan).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, style], children: [
+    /* @__PURE__ */ jsx(View, { style: styles.priceHeadline, 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", locale }),
+      /* @__PURE__ */ jsx(Text, { style: styles.priceUnit, children: PLAN_COPY.perSeat })
+    ] }) }),
+    yearly == null ? null : /* @__PURE__ */ jsxs(View, { style: styles.yearlyRow, children: [
+      /* @__PURE__ */ jsx(Amount, { minor: yearly, currency, size: "sm", weight: "bold", locale }),
+      /* @__PURE__ */ jsx(Text, { style: styles.priceUnit, children: "billed yearly" }),
+      /* @__PURE__ */ jsx(
+        SavingsChip,
+        {
+          savingMinor,
+          plan,
+          currency,
+          locale
+        }
+      )
+    ] })
+  ] });
+}
+function PlanCard({
+  plan,
+  currency,
+  cadence = "mo",
+  highlighted,
+  isCurrent = false,
+  savingMinor,
+  ctaLabel,
+  currentLabel = "Your plan",
+  onSelect,
+  locale,
+  style
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet5);
+  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,
+        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: PLAN_COPY.popularBadge }) : null,
+          isCurrent ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", outline: true, children: currentLabel }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          PlanPriceCell,
+          {
+            plan,
+            currency,
+            cadence,
+            savingMinor,
+            locale
+          }
+        ),
+        /* @__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 }, 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__ */ jsx(
+          Button,
+          {
+            fullWidth: true,
+            variant: recommended ? "primary" : "outline",
+            onPress: () => onSelect?.(plan.id),
+            children: ctaLabel ?? planCta(plan).cta
+          }
+        )
+      ]
+    }
+  );
+}
+function BillingPeriodToggle({
+  value,
+  onValueChange,
+  monthlyLabel = PLAN_COPY.cadenceMonthly,
+  yearlyLabel = PLAN_COPY.cadenceYearly,
+  size = "md",
+  savingMinor,
+  currency,
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet5);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.toggleRow, style], children: [
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        size,
+        value,
+        onValueChange: (next) => onValueChange(next),
+        items: [
+          { value: "mo", label: monthlyLabel },
+          { value: "yr", label: yearlyLabel }
+        ]
+      }
+    ),
+    savingMinor != null && currency ? /* @__PURE__ */ jsx(SavingsChip, { savingMinor, currency, locale }) : null
+  ] });
+}
+function PlanGrid({
+  plans,
+  currency,
+  cadence,
+  onCadenceChange,
+  onSelect,
+  currentPlanId,
+  savings,
+  hideIds,
+  locale,
+  style
+}) {
+  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
+      }
+    ) : 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,
+        locale
+      },
+      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
+  },
+  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
+  },
+  cardCurrent: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
+  cardHead: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  planName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.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.bold,
+    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
+  },
+  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 = "monthly",
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet6);
+  const downgrade = prorationWay(proration) === "downgrade";
+  return /* @__PURE__ */ jsxs(View, { style: [styles.prorationLine, style], children: [
+    /* @__PURE__ */ jsx(
+      Amount,
+      {
+        minor: downgrade ? proration.refund : proration.dueNow,
+        currency,
+        size: "sm",
+        weight: "bold",
+        tone: downgrade ? "good" : "default",
+        locale
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: downgrade ? "credited to your next invoice" : "today" }),
+    nextMinor == null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.prorationSep, children: "\xB7" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: "then" }),
+      /* @__PURE__ */ jsx(Amount, { minor: nextMinor, currency, size: "sm", weight: "bold", locale }),
+      /* @__PURE__ */ jsx(Text, { style: styles.prorationWord, children: `${nextCadenceLabel} from ${effectiveLabel}` })
+    ] })
+  ] });
+}
+function ProrationTable({
+  proration,
+  currency,
+  fromName,
+  toName,
+  daysLeft = proration.daysLeft,
+  cycleDays = proration.cycleDays,
+  effectiveLabel,
+  nextMinor,
+  nextCadenceLabel = "monthly",
+  caption,
+  note = PLAN_COPY.prorationNote,
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet6);
+  const downgrade = prorationWay(proration) === "downgrade";
+  return /* @__PURE__ */ jsxs(View, { style: [styles.prorationTable, style], children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.overline, children: caption ?? `Mid-cycle change \xB7 ${currency}` }),
+    /* @__PURE__ */ jsx(
+      PriceRow,
+      {
+        label: `Unused ${fromName}, ${daysLeft} of ${cycleDays} days`,
+        minor: -proration.credit,
+        currency,
+        tone: "good",
+        noSymbol: true,
+        locale
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PriceRow,
+      {
+        label: `${toName} for the same ${daysLeft} days`,
+        minor: proration.charge,
+        currency,
+        noSymbol: true,
+        locale
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PriceRow,
+      {
+        label: downgrade ? "Credit on your next invoice" : "Charged today",
+        minor: downgrade ? proration.refund : proration.dueNow,
+        currency,
+        tone: downgrade ? "good" : void 0,
+        strong: true,
+        rule: true,
+        noSymbol: true,
+        locale
+      }
+    ),
+    nextMinor == null ? null : /* @__PURE__ */ jsx(
+      PriceRow,
+      {
+        label: `From ${effectiveLabel}, ${nextCadenceLabel}`,
+        minor: nextMinor,
+        currency,
+        noSymbol: true,
+        locale
+      }
+    ),
+    note === false ? null : /* @__PURE__ */ jsx(Text, { style: styles.prorationNote, children: note })
+  ] });
+}
+function toPaywallPlan(plan, currency, cadence, savingMinor, isCurrent, currentLabel, locale) {
+  const words = planCta(plan).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 })} billed yearly`);
+  if (yearly != null && saving != null) {
+    notes.push(`Save ${money(saving, currency, { locale })} a year`);
+  }
+  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 ? "" : PLAN_COPY.perSeat,
+    note: notes.join(" \xB7 "),
+    recommended: plan.popular ?? false,
+    recommendedLabel: PLAN_COPY.popularBadge
+  };
+}
+function PaywallSurface({
+  variant = "hard",
+  title,
+  subtitle,
+  meter,
+  plans,
+  currency,
+  cadence,
+  onCadenceChange,
+  onPickPlan,
+  currentPlanId,
+  currentLabel = "Your plan",
+  savings,
+  hideIds,
+  featureOffer,
+  billing = "ours",
+  platformNote = "Billed by the app store on your account. Prices come from its catalogue.",
+  legalText,
+  footNote,
+  dismissLabel = "Not now",
+  onDismiss,
+  restoreLabel = "Restore purchases",
+  onRestore,
+  upgradeLabel,
+  onUpgrade,
+  locale,
+  style
+}) {
+  const { styles } = useStyles(sheet6);
+  const canDismiss = variant !== "hard" && Boolean(onDismiss);
+  const showMeter = (variant === "metered" || variant === "trial") && meter != null;
+  const offer = variant === "feature" ? featureOffer : void 0;
+  const shown = React6.useMemo(() => {
+    const list = plans ?? [];
+    return hideIds?.length ? list.filter((p) => !hideIds.includes(p.id)) : list;
+  }, [plans, hideIds]);
+  const [selected, setSelected] = React6.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, { ...meter }) : null,
+    onCadenceChange ? /* @__PURE__ */ jsx(BillingPeriodToggle, { value: cadence, onValueChange: onCadenceChange }) : null
+  ] });
+  if (offer) {
+    return /* @__PURE__ */ jsxs(View, { role: "region", accessibilityLabel: title, style: [styles.featureSurface, style], children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.featureHead, children: [
+        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.featureTitle, 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,
+          onSelect: () => {
+            onUpgrade?.();
+            onPickPlan?.(offer.plan.id);
+          },
+          locale
+        }
+      ),
+      offer.proration && offer.effectiveLabel ? /* @__PURE__ */ jsx(
+        ProrationLine,
+        {
+          proration: offer.proration,
+          currency,
+          effectiveLabel: offer.effectiveLabel,
+          nextMinor: offer.nextMinor,
+          locale
+        }
+      ) : 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: [
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: restoreLabel, onPress: onRestore, children: /* @__PURE__ */ jsx(Text, { style: styles.link, children: restoreLabel }) }),
+        canDismiss ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: dismissLabel,
+            onPress: onDismiss,
+            children: /* @__PURE__ */ jsx(Text, { style: styles.link, children: dismissLabel })
+          }
+        ) : null
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(View, { style: [styles.surface, style], children: /* @__PURE__ */ jsx(
+    Paywall,
+    {
+      title,
+      description: subtitle,
+      meter: slot,
+      plans: shown.map(
+        (plan) => toPaywallPlan(
+          plan,
+          currency,
+          cadence,
+          savings?.[plan.id],
+          currentPlanId === plan.id,
+          currentLabel,
+          locale
+        )
+      ),
+      selectedPlanId: selected,
+      onSelectPlan: setSelected,
+      ctaLabel: selectedPlan ? planCta(selectedPlan).cta : restoreLabel,
+      onPurchase: (id) => onPickPlan?.(id),
+      legalText,
+      footNote: footer,
+      restoreLabel,
+      onRestore,
+      onClose: canDismiss ? onDismiss : void 0,
+      closeLabel: dismissLabel
+    }
+  ) });
+}
+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 },
+  footNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3,
+    textAlign: "center"
+  },
+  legal: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3,
+    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 },
+  featureTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title2.fontSize,
+    lineHeight: theme.type.title2.lineHeight,
+    letterSpacing: theme.type.title2.letterSpacing,
+    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]
+  },
+  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
+  },
+  overline: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  prorationNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  }
+}));
+var STATUS = {
+  active: { variant: "good", label: "Active" },
+  trial: { variant: "info", label: "Trial" },
+  canceled: { variant: "neutral", label: "Canceled" },
+  "past-due": { variant: "warn", label: "Past due" }
+};
+function ManageSubscription({
+  planName,
+  status = "active",
+  statusLabel,
+  price,
+  renewalDate,
+  renewalLabel = "renews",
+  paymentMethod,
+  paymentLabel = "Payment",
+  actions = [],
+  onAction,
+  cancelLabel = "Cancel subscription",
+  onCancel,
+  cancelNote
+}) {
+  const { styles } = useStyles(sheet7);
+  const theme = useLoamTheme();
+  const badge = STATUS[status];
+  return /* @__PURE__ */ jsxs(ScrollView, { style: styles.screen, contentContainerStyle: styles.scroll, 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 ?? badge.label })
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
+        price,
+        " \xB7 ",
+        renewalLabel,
+        " ",
+        renewalDate
+      ] }),
+      paymentMethod ? /* @__PURE__ */ jsxs(Text, { style: styles.meta, children: [
+        paymentLabel,
+        " \xB7 ",
+        paymentMethod
+      ] }) : null
+    ] }),
+    actions.length > 0 ? /* @__PURE__ */ jsx(List, { children: actions.map((a) => /* @__PURE__ */ jsx(
+      ListRow,
+      {
+        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 }),
+        onPress: () => onAction?.(a.id)
+      },
+      a.id
+    )) }) : null,
+    onCancel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: cancelLabel,
+          onPress: onCancel,
+          style: ({ pressed }) => [styles.cancel, 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
+  },
+  cancel: {
+    minHeight: theme.tapMin,
+    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"
+  },
+  cancelPressed: { backgroundColor: theme.state.pressed },
+  // Text on a transparent surface, so the tone itself — not `dangerInk`, which
+  // belongs on a solid danger fill.
+  cancelLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.callout.fontSize,
+    lineHeight: theme.type.callout.lineHeight,
+    color: theme.color.danger
+  },
+  cancelNote: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "center" }
+}));
+function ToggleRow({
+  label,
+  description,
+  value,
+  onValueChange,
+  disabled = false,
+  style,
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet8);
+  const announced = accessibilityLabel ?? (description ? `${label}, ${description}` : label);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "switch",
+      accessibilityLabel: announced,
+      accessibilityState: { checked: value, disabled },
+      "aria-checked": value,
+      disabled,
+      onPress: disabled ? void 0 : () => onValueChange?.(!value),
+      style: ({ pressed }) => [
+        styles.row,
+        disabled ? styles.disabled : null,
+        pressed && !disabled ? styles.pressed : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }),
+          description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.glyph, children: /* @__PURE__ */ jsx(Switch, { value, disabled, decorative: true }) })
+      ]
+    }
+  );
+}
+var sheet8 = createStyleSheet((theme) => ({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s3,
+    backgroundColor: "transparent"
+  },
+  pressed: { backgroundColor: theme.state.pressed },
+  disabled: { opacity: theme.state.disabledOpacity },
+  main: { flex: 1, minWidth: 0, gap: theme.space.s1 },
+  label: {
+    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
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  // `pointerEvents` in the style object, not as a prop: the prop form is
+  // deprecated in RN 0.76.
+  glyph: { flexShrink: 0, pointerEvents: "none" }
+}));
+function SettingsScreen({
+  groups,
+  onRowPress,
+  onToggle
+}) {
+  const { styles } = useStyles(sheet9);
+  const theme = useLoamTheme();
+  return /* @__PURE__ */ jsx(ScrollView, { style: styles.screen, contentContainerStyle: styles.scroll, children: groups.map((group) => /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+    group.title ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: group.title }) : null,
+    /* @__PURE__ */ jsx(List, { children: group.rows.map((row) => {
+      if (row.kind === "switch") {
+        return /* @__PURE__ */ jsx(
+          ToggleRow,
+          {
+            label: row.label,
+            description: row.description,
+            value: row.value,
+            disabled: row.disabled,
+            onValueChange: (next) => {
+              row.onValueChange?.(next);
+              onToggle?.(row.id, next);
+            }
+          },
+          row.id
+        );
+      }
+      if (row.kind === "danger") {
+        return /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            title: /* @__PURE__ */ jsx(Text, { style: styles.dangerLabel, children: row.label }),
+            accessibilityLabel: row.label,
+            onPress: () => {
+              row.onPress?.();
+              onRowPress?.(row.id);
+            }
+          },
+          row.id
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        ListRow,
+        {
+          title: row.label,
+          accessibilityLabel: row.label,
+          leading: row.icon ? /* @__PURE__ */ jsx(Icon, { name: row.icon, size: theme.icon.md, color: theme.color.text2 }) : null,
+          trailing: /* @__PURE__ */ jsxs(View, { style: styles.trailing, children: [
+            row.value ? /* @__PURE__ */ jsx(Text, { style: styles.value, children: row.value }) : null,
+            /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.sm, color: theme.color.text3 })
+          ] }),
+          onPress: () => {
+            row.onPress?.();
+            onRowPress?.(row.id);
+          }
+        },
+        row.id
+      );
+    }) }),
+    group.footnote ? /* @__PURE__ */ jsx(Text, { style: styles.footnote, children: group.footnote }) : null
+  ] }, group.id)) });
+}
+var sheet9 = createStyleSheet((theme) => ({
+  screen: { flex: 1, backgroundColor: theme.color.bg },
+  scroll: { padding: theme.layout.screenPad, gap: theme.space.s5 },
+  group: { gap: theme.space.s2 },
+  // Uppercase group caption. `tracking.caps` is an em multiple, so it is
+  // multiplied by the font size to become RN's absolute letterSpacing.
+  caption: {
+    paddingStart: theme.space.s1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  trailing: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  value: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text3
+  },
+  // Destructive rows are the tone itself on a surface — `dangerInk` belongs on a
+  // solid danger fill, not on a list row.
+  dangerLabel: {
+    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.danger
+  },
+  footnote: {
+    paddingStart: theme.space.s1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
+    color: theme.color.text3
+  }
+}));
+var SYSTEM_NOTE = {
+  on: "System notifications are on. Turn categories off here rather than muting the whole app.",
+  off: "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."
+};
+function NotificationPreferences({
+  systemEnabled = true,
+  systemNote,
+  systemActionLabel = "Open Settings",
+  onOpenSystemSettings,
+  categories,
+  onChange
+}) {
+  const { styles } = useStyles(sheet10);
+  const note = systemNote ?? (systemEnabled ? SYSTEM_NOTE.on : SYSTEM_NOTE.off);
+  return /* @__PURE__ */ jsxs(ScrollView, { style: styles.screen, contentContainerStyle: styles.scroll, 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
+        ]
+      }
+    ),
+    categories.map((c) => /* @__PURE__ */ jsx(
+      ToggleRow,
+      {
+        label: c.label,
+        description: c.description,
+        value: c.value,
+        disabled: c.disabled === true || !systemEnabled,
+        onValueChange: (next) => onChange?.(c.id, next),
+        style: styles.card
+      },
+      c.id
+    ))
+  ] });
+}
+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
+  },
+  pressed: { opacity: theme.state.pressedOpacity },
+  card: {
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border
+  }
+}));
+
+export { BillingPeriodToggle, DeleteAccountScreen, ManageSubscription, MeterBar, NotificationPreferences, Paywall, PaywallGate, PaywallSurface, PlanCard, PlanFeatureRow, PlanGrid, PlanPriceCell, PlanPriceDelta, ProrationLine, ProrationTable, SavingsChip, SettingsScreen, ToggleRow };