@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-NQYBUO3K.js

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