@hook-sdk/template 0.26.0 → 0.28.0

package/dist/index.cjs

@@ -46,10 +46,26 @@ __export(index_exports, {
   OnboardingFlow: () => OnboardingFlow,
   PaymentReturnHandler: () => PaymentReturnHandler,
   Paywall: () => Paywall,
+  PaywallAnchorPrice: () => PaywallAnchorPrice,
+  PaywallContext: () => PaywallContext,
+  PaywallCountdown: () => PaywallCountdown,
   PaywallCta: () => PaywallCta,
   PaywallCyclePicker: () => PaywallCyclePicker,
+  PaywallEyebrow: () => PaywallEyebrow,
+  PaywallFeatures: () => PaywallFeatures,
+  PaywallFeaturesCard: () => PaywallFeaturesCard,
+  PaywallFinePrint: () => PaywallFinePrint,
+  PaywallHeadline: () => PaywallHeadline,
+  PaywallHero: () => PaywallHero,
   PaywallMethodContent: () => PaywallMethodContent,
   PaywallMethodTabs: () => PaywallMethodTabs,
+  PaywallPriceHeadline: () => PaywallPriceHeadline,
+  PaywallProvider: () => PaywallProvider,
+  PaywallStatsRow: () => PaywallStatsRow,
+  PaywallStickyFooter: () => PaywallStickyFooter,
+  PaywallTestimonials: () => PaywallTestimonials,
+  PaywallTrophyBadge: () => PaywallTrophyBadge,
+  PaywallTrustLine: () => PaywallTrustLine,
   PersistenceRegistry: () => PersistenceRegistry,
   PixWaitingPageDefault: () => PixWaitingPageDefault,
   PreAuthShell: () => PreAuthShell,
@@ -80,6 +96,7 @@ __export(index_exports, {
   useInstallPrompt: () => useInstallPrompt,
   useLoginForm: () => useLoginForm,
   useOnboardingStep: () => useOnboardingStep,
+  usePaywallContext: () => usePaywallContext,
   usePaywallState: () => usePaywallState,
   usePlan: () => usePlan,
   usePush: () => usePush,
@@ -726,8 +743,8 @@ function usePaywallState() {
     opening: submitting,
     availableMethods: methods,
     monthlyEquivalent,
-    dismissPix: () => {
-    },
+    // G154 fix (template 0.24.0 + SDK 0.26.0): wired to SDK action.
+    dismissPix: subscription.clearPixPending,
     refreshPlan: () => {
     }
   };
@@ -2942,7 +2959,7 @@ function useCheckoutForm(args) {
   const emailConfirmError = touchedEmailConfirm || formSubmitAttempted ? validateEmailConfirm : null;
   const phoneError = touchedPhone || formSubmitAttempted ? validatePhone : null;
   const cpfError = touchedCpf || formSubmitAttempted ? validateCpf : null;
-  const canSubmit = name.trim().length >= 2 && EMAIL_RE.test(email) && emailConfirm === email && PHONE_RE.test(phone) && validateCpf === null && cpf.replace(/\D/g, "").length === 11 && emailStatus !== "exists" && !submitting && (method !== "card" || card.number.length >= 12 && card.ccv.length >= 3 && card.expiryMonth.length >= 1 && card.expiryYear.length >= 2 && card.holderName.length >= 1);
+  const canSubmit = name.trim().length >= 2 && EMAIL_RE.test(email) && (emailConfirm === "" || emailConfirm === email) && (phone === "" || PHONE_RE.test(phone)) && validateCpf === null && cpf.replace(/\D/g, "").length === 11 && emailStatus !== "exists" && !submitting && (method !== "card" || card.number.length >= 12 && card.ccv.length >= 3 && card.expiryMonth.length >= 1 && card.expiryYear.length >= 2 && card.holderName.length >= 1);
   const submit = (0, import_react17.useCallback)(async () => {
     setFormSubmitAttempted(true);
     setError(null);
@@ -2957,7 +2974,7 @@ function useCheckoutForm(args) {
           method: "card",
           name: name.trim(),
           email,
-          emailConfirm,
+          emailConfirm: emailConfirm || email,
           phone,
           cpf: cpf.replace(/\D/g, ""),
           cycle,
@@ -2984,7 +3001,7 @@ function useCheckoutForm(args) {
           method: "pix-auto",
           name: name.trim(),
           email,
-          emailConfirm,
+          emailConfirm: emailConfirm || email,
           phone,
           cpf: cpf.replace(/\D/g, ""),
           cycle
@@ -3073,13 +3090,49 @@ function readIntent() {
 function formatBrl(cents) {
   return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(cents / 100);
 }
+function formatCardNumber(v) {
+  const digits = v.replace(/\D/g, "").slice(0, 16);
+  return digits.replace(/(.{4})/g, "$1 ").trim();
+}
+function formatExpiryMmAa(v) {
+  const d = v.replace(/\D/g, "").slice(0, 4);
+  if (d.length < 3) return d;
+  return d.slice(0, 2) + "/" + d.slice(2);
+}
+function parseExpiryMmAa(v) {
+  const d = v.replace(/\D/g, "");
+  return { month: d.slice(0, 2), year: d.slice(2, 4) };
+}
+function formatCpf(v) {
+  const d = v.replace(/\D/g, "").slice(0, 11);
+  if (d.length <= 3) return d;
+  if (d.length <= 6) return d.slice(0, 3) + "." + d.slice(3);
+  if (d.length <= 9) return d.slice(0, 3) + "." + d.slice(3, 6) + "." + d.slice(6);
+  return d.slice(0, 3) + "." + d.slice(3, 6) + "." + d.slice(6, 9) + "-" + d.slice(9);
+}
+function detectCardBrand(num) {
+  const n = num.replace(/\s/g, "");
+  if (/^4/.test(n)) return "VISA";
+  if (/^(5[1-5]|2[2-7])/.test(n)) return "MASTER";
+  if (/^3[47]/.test(n)) return "AMEX";
+  if (/^(4011|4312|4389|4514|6011|6362|6363)/.test(n)) return "ELO";
+  if (/^(606282|3841)/.test(n)) return "HIPER";
+  return "";
+}
 function CheckoutPageDefault() {
   const navigate = (0, import_react_router_dom3.useNavigate)();
   const plan = usePlan();
   const intent = (0, import_react18.useMemo)(readIntent, []);
   const defaultMethod = intent.method === "pix-auto" ? "pix-auto" : "card";
-  const defaultCycle = intent.cycle === "YEARLY" ? "YEARLY" : "MONTHLY";
+  const defaultCycle = intent.cycle === "MONTHLY" ? "MONTHLY" : "YEARLY";
   const form = useCheckoutForm({ defaultMethod, defaultCycle });
+  const [expiryMmAa, setExpiryMmAa] = (0, import_react18.useState)("");
+  (0, import_react18.useEffect)(() => {
+    const { month, year } = parseExpiryMmAa(expiryMmAa);
+    if (month !== form.card.expiryMonth || year !== form.card.expiryYear) {
+      form.setCard({ expiryMonth: month, expiryYear: year });
+    }
+  }, [expiryMmAa]);
   (0, import_react18.useEffect)(() => {
     if (form.emailTaken && form.loginUrl) {
       const t = setTimeout(() => navigate(form.loginUrl), 1200);
@@ -3091,21 +3144,30 @@ function CheckoutPageDefault() {
     yearlyPriceCents: plan.data.yearlyPriceCents,
     trialDays: plan.data.trialDays
   } : null;
+  const annual = form.cycle === "YEARLY";
   const cyclePrice = (0, import_react18.useMemo)(() => {
     if (!planInfo) return null;
-    return form.cycle === "YEARLY" ? planInfo.yearlyPriceCents ?? planInfo.priceCents * 12 : planInfo.priceCents;
-  }, [planInfo, form.cycle]);
-  const submitLabel = (0, import_react18.useMemo)(() => {
-    if (form.submitting) return "Processando\u2026";
-    if (form.method === "card") {
-      const trial = planInfo?.trialDays ?? 0;
-      if (trial > 0 && cyclePrice) {
-        return `Come\xE7ar ${trial} dias gr\xE1tis \xB7 ${formatBrl(cyclePrice)} depois`;
-      }
-      return cyclePrice ? `Pagar ${formatBrl(cyclePrice)}` : "Continuar";
-    }
-    return cyclePrice ? `Pagar ${formatBrl(cyclePrice)} via PIX` : "Continuar via PIX";
-  }, [form.method, form.submitting, planInfo, cyclePrice]);
+    return annual ? planInfo.yearlyPriceCents ?? planInfo.priceCents * 12 : planInfo.priceCents;
+  }, [planInfo, annual]);
+  const monthlyText = (0, import_react18.useMemo)(() => {
+    if (!planInfo) return "";
+    const monthly = annual && planInfo.yearlyPriceCents ? Math.round(planInfo.yearlyPriceCents / 12) : planInfo.priceCents;
+    return formatBrl(monthly);
+  }, [planInfo, annual]);
+  const todayCents = (0, import_react18.useMemo)(() => {
+    if (form.method === "pix-auto") return cyclePrice ?? 0;
+    const trialDays2 = planInfo?.trialDays ?? 0;
+    if (trialDays2 > 0) return 0;
+    return cyclePrice ?? 0;
+  }, [form.method, cyclePrice, planInfo]);
+  const todayAmount = formatBrl(todayCents);
+  const cyclePriceText = cyclePrice !== null ? formatBrl(cyclePrice) : "";
+  const annualSavingsCents = (0, import_react18.useMemo)(() => {
+    if (!planInfo || !planInfo.yearlyPriceCents) return 0;
+    return planInfo.priceCents * 12 - planInfo.yearlyPriceCents;
+  }, [planInfo]);
+  const trialDays = planInfo?.trialDays ?? 7;
+  const cardBrand = detectCardBrand(form.card.number);
   async function onSubmit(e) {
     e.preventDefault();
     const result = await form.submit();
@@ -3128,201 +3190,367 @@ function CheckoutPageDefault() {
     }
     navigate(result.redirect.replace(/^.*\/app\/[^/]+/, "") || "/");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1 flex flex-col bg-background min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("form", { onSubmit, className: "flex-1 overflow-y-auto px-5 py-6 space-y-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("header", { className: "space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h1", { className: "font-display text-2xl text-foreground", children: "Finalizar assinatura" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm text-muted-foreground", children: "Preencha seus dados pra liberar o app. Voc\xEA j\xE1 entra com acesso na hora." })
-    ] }),
-    form.emailTaken ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { role: "alert", className: "rounded-xl bg-destructive/10 p-4 text-sm text-destructive border border-destructive/20", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1 flex flex-col bg-background min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("form", { onSubmit, className: "flex-1 overflow-y-auto", children: [
+    form.emailTaken ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-5 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { role: "alert", className: "rounded-2xl bg-destructive/10 p-4 text-sm text-destructive border border-destructive/20", children: [
       "Esse e-mail j\xE1 tem conta nesse app.",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: form.loginUrl ?? "/signin", className: "underline font-medium", children: "Entrar agora" })
-    ] }) : null,
-    form.error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "alert", className: "rounded-xl bg-destructive/10 p-4 text-sm text-destructive border border-destructive/20", children: form.error.message || "N\xE3o foi poss\xEDvel concluir o pagamento. Tente novamente." }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("section", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-sm font-semibold text-foreground uppercase tracking-wide", children: "Voc\xEA" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        FieldRow,
-        {
-          label: "Nome completo",
-          value: form.name,
-          onChange: form.setName,
-          onBlur: form.markNameTouched,
-          error: form.nameError,
-          autoComplete: "name"
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("a", { href: form.loginUrl ?? "/signin", className: "underline font-semibold", children: "Entrar agora" })
+    ] }) }) : null,
+    form.error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-5 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "alert", className: "rounded-2xl bg-destructive/10 p-4 text-sm text-destructive border border-destructive/20", children: form.error.message || "N\xE3o foi poss\xEDvel concluir o pagamento. Tente novamente." }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "px-5 pt-4", children: form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "rounded-2xl bg-card border-[1.5px] border-foreground p-3.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ShieldIcon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm font-bold", children: "Voc\xEA N\xC3O ser\xE1 cobrada hoje" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between items-baseline text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "R$ 0,00 agora" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "opacity-50", children: "\xB7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { children: [
+          monthlyText,
+          "/m\xEAs ap\xF3s ",
+          trialDays,
+          " dias"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mt-2.5 text-[11px] text-muted-foreground flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BellIcon, { className: "w-2.5 h-2.5" }),
+        "Avisamos por email 2 dias antes da primeira cobran\xE7a"
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "rounded-2xl p-3.5 bg-emerald-50 border-[1.5px] border-emerald-600/60", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2 mb-2 text-emerald-900", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ShieldIcon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-sm font-bold", children: [
+          "Garantia incondicional de ",
+          trialDays,
+          " dias"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-sm text-emerald-900 leading-snug", children: [
+        "Voc\xEA paga ",
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("b", { children: todayAmount }),
+        " agora via Pix.",
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("br", {}),
+        "N\xE3o gostou em ",
+        trialDays,
+        " dias? Devolvemos ",
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("b", { children: "100%" }),
+        " sem perguntas \u2014 direto pelo app."
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("section", { className: "px-5 pt-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "font-display text-2xl mb-3.5 leading-tight text-foreground", children: "Quase l\xE1." }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FieldLabel, { children: "Email" }),
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        FieldRow,
+        FieldInput,
         {
-          label: "E-mail",
           type: "email",
-          value: form.email,
-          onChange: form.setEmail,
-          onBlur: form.markEmailTouched,
-          error: form.emailError,
+          inputMode: "email",
           autoComplete: "email",
           autoCapitalize: "none",
           autoCorrect: "off",
           spellCheck: false,
-          hint: form.emailStatus === "checking" ? "Verificando\u2026" : form.emailStatus === "available" ? "\u2713 Dispon\xEDvel" : form.emailStatus === "exists" ? null : null
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        FieldRow,
-        {
-          label: "Confirme o e-mail",
-          type: "email",
-          value: form.emailConfirm,
-          onChange: form.setEmailConfirm,
-          onBlur: form.markEmailConfirmTouched,
-          error: form.emailConfirmError,
-          autoComplete: "email",
-          autoCapitalize: "none",
-          autoCorrect: "off",
-          spellCheck: false
+          placeholder: "seu@email.com",
+          value: form.email,
+          onChange: form.setEmail,
+          onBlur: form.markEmailTouched,
+          error: form.emailError,
+          valid: form.emailStatus === "available"
         }
       ),
+      !form.emailError && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FieldHint, { children: form.emailStatus === "checking" ? "Verificando\u2026" : form.emailStatus === "available" ? "\u2713 Dispon\xEDvel" : "Voc\xEA vai usar este email para entrar no app" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FieldLabel, { children: "Nome completo" }),
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        FieldRow,
+        FieldInput,
         {
-          label: "Telefone",
-          type: "tel",
-          value: form.phone,
-          onChange: form.setPhone,
-          onBlur: form.markPhoneTouched,
-          error: form.phoneError,
-          autoComplete: "tel",
-          placeholder: "(11) 99999-9999"
+          type: "text",
+          autoComplete: "name",
+          placeholder: "como est\xE1 no documento",
+          value: form.name,
+          onChange: form.setName,
+          onBlur: form.markNameTouched,
+          error: form.nameError,
+          valid: !!form.name && !form.nameError
         }
       ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FieldLabel, { children: "CPF" }),
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        FieldRow,
+        FieldInput,
         {
-          label: "CPF",
           type: "text",
           inputMode: "numeric",
+          placeholder: "000.000.000-00",
           value: form.cpf,
-          onChange: form.setCpf,
+          onChange: (v) => form.setCpf(formatCpf(v)),
           onBlur: form.markCpfTouched,
           error: form.cpfError,
-          autoComplete: "off",
-          placeholder: "000.000.000-00"
+          valid: !!form.cpf && !form.cpfError
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("section", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-sm font-semibold text-foreground uppercase tracking-wide", children: "Pagamento" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-2 gap-2", role: "tablist", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MethodTab, { active: form.method === "card", onClick: () => form.setMethod("card"), children: "Cart\xE3o" }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MethodTab, { active: form.method === "pix-auto", onClick: () => form.setMethod("pix-auto"), children: "PIX" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-2 gap-2", role: "tablist", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MethodTab, { active: form.cycle === "MONTHLY", onClick: () => form.setCycle("MONTHLY"), children: "Mensal" }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MethodTab, { active: form.cycle === "YEARLY", onClick: () => form.setCycle("YEARLY"), children: "Anual" })
-      ] }),
-      form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "space-y-3 rounded-xl border border-border p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("section", { className: "px-5 pt-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FieldLabel, { children: "Forma de pagamento" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { role: "tablist", className: "flex gap-1.5 bg-muted p-1 rounded-xl", children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          FieldRow,
+          TabButton,
           {
-            label: "Nome no cart\xE3o",
-            value: form.card.holderName,
-            onChange: (v) => form.setCard({ holderName: v }),
-            autoComplete: "cc-name"
+            active: form.method === "card",
+            onClick: () => form.setMethod("card"),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardIcon, { className: "w-3.5 h-3.5" }),
+            label: "Cart\xE3o",
+            subtitle: trialDays > 0 ? `${trialDays} dias gr\xE1tis` : "pague hoje",
+            subtitleActiveClass: "text-emerald-700"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          FieldRow,
+          TabButton,
           {
-            label: "N\xFAmero",
-            value: form.card.number,
-            onChange: (v) => form.setCard({ number: v }),
-            autoComplete: "cc-number",
+            active: form.method === "pix-auto",
+            onClick: () => form.setMethod("pix-auto"),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PixIcon, { className: "w-3.5 h-3.5" }),
+            label: "Pix",
+            subtitle: `pague hoje \xB7 garantia ${trialDays}d`,
+            subtitleActiveClass: "text-foreground/70"
+          }
+        )
+      ] })
+    ] }),
+    form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("section", { className: "px-5 pt-3.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FieldLabel, { children: "N\xFAmero do cart\xE3o" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          FieldInput,
+          {
+            type: "text",
             inputMode: "numeric",
-            placeholder: "0000 0000 0000 0000"
+            autoComplete: "cc-number",
+            placeholder: "0000 0000 0000 0000",
+            value: form.card.number,
+            onChange: (v) => form.setCard({ number: formatCardNumber(v) }),
+            style: cardBrand ? { paddingRight: "4.5rem" } : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
+        cardBrand && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-bold tracking-wide px-1.5 py-0.5 rounded bg-muted text-muted-foreground", children: cardBrand })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FieldLabel, { children: "Validade" }),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            FieldRow,
+            FieldInput,
             {
-              label: "M\xEAs",
-              value: form.card.expiryMonth,
-              onChange: (v) => form.setCard({ expiryMonth: v }),
-              autoComplete: "cc-exp-month",
+              type: "text",
               inputMode: "numeric",
-              placeholder: "MM"
+              autoComplete: "cc-exp",
+              placeholder: "MM/AA",
+              value: expiryMmAa,
+              onChange: (v) => setExpiryMmAa(formatExpiryMmAa(v))
             }
-          ),
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FieldLabel, { children: "CVV" }),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            FieldRow,
+            FieldInput,
             {
-              label: "Ano",
-              value: form.card.expiryYear,
-              onChange: (v) => form.setCard({ expiryYear: v }),
-              autoComplete: "cc-exp-year",
+              type: "text",
               inputMode: "numeric",
-              placeholder: "AA"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            FieldRow,
-            {
-              label: "CVV",
-              value: form.card.ccv,
-              onChange: (v) => form.setCard({ ccv: v }),
               autoComplete: "cc-csc",
-              inputMode: "numeric",
-              placeholder: "123"
+              placeholder: "3 d\xEDgitos",
+              value: form.card.ccv,
+              onChange: (v) => form.setCard({ ccv: v.replace(/\D/g, "").slice(0, 4) })
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "rounded-xl border border-border p-4 text-sm text-muted-foreground", children: "Ap\xF3s confirmar, mostraremos o QR Code PIX. Pagamento \xE0 vista." })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      "button",
-      {
-        type: "submit",
-        disabled: !form.canSubmit,
-        className: "w-full rounded-xl bg-primary py-4 text-base font-semibold text-primary-foreground disabled:opacity-50 disabled:cursor-not-allowed",
-        children: submitLabel
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-center text-xs text-muted-foreground", children: "\u{1F512} SSL \xB7 via Asaas \xB7 Garantia 7 dias" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FieldLabel, { children: "Nome no cart\xE3o" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        FieldInput,
+        {
+          type: "text",
+          autoComplete: "cc-name",
+          placeholder: "como est\xE1 no cart\xE3o",
+          value: form.card.holderName,
+          onChange: (v) => form.setCard({ holderName: v })
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("section", { className: "px-5 pt-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "rounded-2xl bg-card border border-border p-3.5 flex gap-3.5 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-[72px] h-[72px] rounded-xl shrink-0 border-2 border-foreground relative overflow-hidden bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[22px] h-[22px] bg-background flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PixIcon, { className: "w-3.5 h-3.5 text-foreground" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "pagamento em segundos" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-sm text-foreground mt-1 leading-snug", children: [
+          "Geramos seu ",
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("b", { children: "QR Pix" }),
+          " no pr\xF3ximo passo. Pague pelo app do banco e seu acesso libera ",
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("b", { children: "imediatamente" }),
+          "."
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("section", { className: "px-5 pt-5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "bg-muted rounded-2xl p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between mb-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm font-semibold text-foreground", children: annual ? "Plano Anual" : "Plano Mensal" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-[11px] text-muted-foreground", children: "Coach" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-sm font-bold text-foreground", children: [
+            cyclePriceText,
+            "/",
+            annual ? "ano" : "m\xEAs"
+          ] }),
+          annual && annualSavingsCents > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-[11px] text-emerald-700 font-semibold", children: [
+            "economia ",
+            formatBrl(annualSavingsCents)
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-px bg-border my-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between items-baseline", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm font-bold text-foreground", children: "Voc\xEA paga hoje" }),
+          form.method === "card" && trialDays > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-[11px] text-muted-foreground mt-0.5", children: [
+            "cobran\xE7a inicia no dia ",
+            trialDays
+          ] }),
+          form.method === "pix-auto" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-[11px] text-emerald-700 mt-0.5 font-semibold", children: [
+            "reembolso garantido at\xE9 o dia ",
+            trialDays
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-2xl font-bold font-display tracking-tight text-foreground", children: todayAmount })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "sticky bottom-0 px-5 pt-3.5 pb-6 bg-gradient-to-b from-transparent to-background", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "button",
+        {
+          type: "submit",
+          disabled: !form.canSubmit,
+          className: "w-full rounded-full bg-primary text-primary-foreground min-h-14 px-5 text-base font-bold inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg",
+          children: form.submitting ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Spinner2, {}),
+            " ",
+            form.method === "pix-auto" ? "Gerando QR\u2026" : "Confirmando\u2026"
+          ] }) : form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LockIcon, { className: "w-3.5 h-3.5" }),
+            " Confirmar e come\xE7ar gr\xE1tis"
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PixIcon, { className: "w-3.5 h-3.5" }),
+            " Gerar QR \xB7 pagar ",
+            todayAmount
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-center mt-2.5 text-xs text-muted-foreground", children: [
+        "Ao continuar, voc\xEA concorda com nossos ",
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("u", { children: "Termos" }),
+        ". Pagamento seguro Asaas."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-3.5 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LockIcon, { className: "w-2.5 h-2.5 opacity-60" }),
+          " SSL 256-bit"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "w-px h-2.5 bg-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Pagamento via Asaas" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "w-px h-2.5 bg-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { children: [
+          "Garantia ",
+          trialDays,
+          " dias"
+        ] })
+      ] })
+    ] })
   ] }) });
 }
-function FieldRow(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "block space-y-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "block text-sm font-medium text-foreground", children: props.label }),
+function FieldLabel({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1.5", children });
+}
+function FieldInput(props) {
+  const baseClass = "w-full px-4 rounded-xl bg-card text-base text-foreground outline-none border-[1.5px] transition-colors";
+  const stateClass = props.error ? "border-destructive focus:border-destructive" : props.valid ? "border-emerald-600 focus:border-emerald-700" : "border-border focus:border-foreground";
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "input",
       {
         type: props.type ?? "text",
-        value: props.value,
-        onChange: (e) => props.onChange(e.target.value),
-        onBlur: props.onBlur,
+        inputMode: props.inputMode,
         autoComplete: props.autoComplete,
         autoCapitalize: props.autoCapitalize,
         autoCorrect: props.autoCorrect,
         spellCheck: props.spellCheck,
-        inputMode: props.inputMode,
         placeholder: props.placeholder,
-        className: `w-full rounded-xl border bg-card px-3 py-2 text-base text-foreground outline-none focus:ring-2 focus:ring-primary ${props.error ? "border-destructive" : "border-border"}`
+        value: props.value,
+        onChange: (e) => props.onChange(e.target.value),
+        onBlur: props.onBlur,
+        style: { height: "52px", ...props.style },
+        className: `${baseClass} ${stateClass}`
       }
     ),
-    props.error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "block text-xs text-destructive", children: props.error }) : props.hint ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "block text-xs text-muted-foreground", children: props.hint }) : null
+    props.error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-1.5 text-xs text-destructive font-medium", children: props.error }) : null
   ] });
 }
-function MethodTab({ active, onClick, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+function FieldHint({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-1.5 text-xs text-muted-foreground", children });
+}
+function TabButton({ active, onClick, icon, label, subtitle, subtitleActiveClass }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "button",
     {
       type: "button",
       role: "tab",
       "aria-selected": active,
       onClick,
-      className: `rounded-xl border px-4 py-2 text-sm font-medium transition ${active ? "border-primary bg-primary text-primary-foreground" : "border-border bg-card text-foreground"}`,
-      children
+      className: `flex-1 flex flex-col items-center justify-center gap-0.5 py-2.5 px-1.5 rounded-lg text-sm font-semibold transition-colors ${active ? "bg-card text-foreground shadow-sm" : "bg-transparent text-muted-foreground"}`,
+      style: { minHeight: 56 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+          icon,
+          " ",
+          label
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: `text-[10px] font-medium ${active ? subtitleActiveClass : "text-muted-foreground/70"}`, children: subtitle })
+      ]
+    }
+  );
+}
+function CardIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "2.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M2.5 10h19" })
+  ] });
+}
+function PixIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M12 2L2 12l10 10 10-10L12 2zm0 4.83L17.17 12 12 17.17 6.83 12 12 6.83z" }) });
+}
+function LockIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { x: "4", y: "10", width: "16", height: "11", rx: "2.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M7.5 10V7a4.5 4.5 0 119 0v3" })
+  ] });
+}
+function ShieldIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M12 2.5l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10v-6l8-3z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M9 12l2 2 4-4" })
+  ] });
+}
+function BellIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M6 17V11a6 6 0 1112 0v6l1.5 2H4.5L6 17z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M10 21a2 2 0 004 0" })
+  ] });
+}
+function Spinner2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "span",
+    {
+      className: "w-4 h-4 rounded-full border-2 border-white/40 border-t-white",
+      style: { animation: "spin 0.7s linear infinite" }
     }
   );
 }
@@ -3959,25 +4187,42 @@ function useFeature(name) {
 }
 
 // src/components/paywall/Paywall.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_sdk24 = require("@hook-sdk/sdk");
 
-// src/components/paywall/PaywallMethodTabs.tsx
+// src/components/paywall/PaywallProvider.tsx
+var import_react29 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
+var PaywallContext = (0, import_react29.createContext)(null);
+function PaywallProvider({ children }) {
+  const state = usePaywallState();
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PaywallContext.Provider, { value: state, children });
+}
+
+// src/components/paywall/usePaywallContext.ts
+var import_react30 = require("react");
+function usePaywallContext() {
+  const ctx = (0, import_react30.useContext)(PaywallContext);
+  if (!ctx) {
+    throw new Error("usePaywallContext must be used within <PaywallProvider>");
+  }
+  return ctx;
+}
+
+// src/components/paywall/PaywallMethodTabs.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function PaywallMethodTabs({
-  methods,
-  selected,
-  onSelect,
   labels,
   className,
   tabClassName,
   tabActiveClassName
 }) {
+  const { methods, selectedMethod, selectMethod } = usePaywallContext();
   if (methods.length < 2) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { role: "tablist", "aria-label": "M\xE9todo de pagamento", className, children: methods.map((m) => {
-    const active = m === selected;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tablist", "aria-label": "M\xE9todo de pagamento", className, children: methods.map((m) => {
+    const active = m === selectedMethod;
     const label = labels[m] ?? m;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         type: "button",
@@ -3985,7 +4230,7 @@ function PaywallMethodTabs({
         "aria-selected": active,
         "aria-controls": `paywall-tab-${m}`,
         tabIndex: active ? 0 : -1,
-        onClick: () => onSelect(m),
+        onClick: () => selectMethod(m),
         className: [tabClassName, active ? tabActiveClassName : ""].filter(Boolean).join(" "),
         children: label
       },
@@ -3995,36 +4240,51 @@ function PaywallMethodTabs({
 }
 
 // src/components/paywall/PaywallMethodContent.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-function PaywallMethodContent({
-  method,
-  copy,
-  hasConsumedTrial = false,
-  className,
-  rowClassName
-}) {
-  const useCardConsumed = method === "card" && hasConsumedTrial && copy.cardConsumedTrial;
-  const rows = useCardConsumed ? copy.cardConsumedTrial.bodyRows : method === "pix-auto" || method === "pix-once" ? copy.pix.bodyRows : copy.card.bodyRows;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "tabpanel", id: `paywall-tab-${method}`, className, children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: rowClassName, children: row }, i)) });
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function PaywallMethodContent({ copy, className, rowClassName }) {
+  const { selectedMethod, hasConsumedTrial } = usePaywallContext();
+  const useCardConsumed = selectedMethod === "card" && hasConsumedTrial && copy.cardConsumedTrial;
+  const rows = useCardConsumed ? copy.cardConsumedTrial.bodyRows : selectedMethod === "pix-auto" || selectedMethod === "pix-once" ? copy.pix.bodyRows : copy.card.bodyRows;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { role: "tabpanel", id: `paywall-tab-${selectedMethod}`, className, children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: rowClassName, children: row }, i)) });
 }
 
 // src/components/paywall/PaywallCyclePicker.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var VARIANT_CLASSES = {
+  default: { card: "", cardSelected: "" },
+  "premium-gold": {
+    card: "",
+    cardSelected: "border-2 border-yellow-400/80 ring-2 ring-yellow-400/20"
+  },
+  "pink-pill": {
+    card: "rounded-2xl",
+    cardSelected: "border-2 border-pink-500"
+  }
+};
 function PaywallCyclePicker({
-  cycles,
-  selected,
-  onSelect,
-  priceCentsByCycle,
-  anchorCentsByCycle,
-  monthlyEquivByCycle,
   labels,
   className,
   cardClassName,
   cardSelectedClassName,
-  anchorClassName
+  anchorClassName,
+  variant = "default",
+  render
 }) {
+  const ctx = usePaywallContext();
+  const { cycle: selected, setCycle, plan, anchorPriceCents } = ctx;
+  const cycles = ["MONTHLY", "YEARLY"];
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, children: render({ cycles, selected, setCycle, plan, anchorPriceCents }) });
+  }
   if (cycles.length < 2) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const v = VARIANT_CLASSES[variant];
+  const composedCardClassName = [v.card, cardClassName].filter(Boolean).join(" ");
+  const composedCardSelectedClassName = [v.cardSelected, cardSelectedClassName].filter(Boolean).join(" ");
+  const monthlyCents = plan?.monthlyCents ?? 0;
+  const yearlyCents = plan?.yearlyCents ?? 0;
+  const anchorMonthly = plan?.anchorMonthlyCents ?? null;
+  const anchorYearly = plan?.anchorYearlyCents ?? null;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       role: "radiogroup",
@@ -4034,21 +4294,25 @@ function PaywallCyclePicker({
         const active = c === selected;
         const label = c === "YEARLY" ? labels.annualLabel : labels.monthlyLabel;
         const suffix = c === "YEARLY" ? labels.annualSuffix : labels.monthlySuffix;
-        const mainCents = c === "YEARLY" ? monthlyEquivByCycle[c] : priceCentsByCycle[c];
-        const anchorCents = anchorCentsByCycle[c];
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        const mainCents = c === "YEARLY" ? Math.round(yearlyCents / 12) : monthlyCents;
+        const anchorCents = c === "YEARLY" ? anchorYearly : anchorMonthly;
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "button",
           {
             type: "button",
             role: "radio",
             "aria-checked": active,
-            onClick: () => onSelect(c),
-            className: ["flex flex-col items-center gap-0.5", cardClassName, active ? cardSelectedClassName : ""].filter(Boolean).join(" "),
+            onClick: () => setCycle(c),
+            className: [
+              "flex flex-col items-center gap-0.5",
+              composedCardClassName,
+              active ? composedCardSelectedClassName : ""
+            ].filter(Boolean).join(" "),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-bold text-base leading-tight", children: formatBRL(mainCents) }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xs opacity-70 leading-tight", children: suffix }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xs opacity-60 leading-tight", children: label }),
-              anchorCents != null && anchorCents > mainCents ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: anchorClassName ?? "text-xs opacity-50", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("s", { children: formatBRL(anchorCents) }) }) : null
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-bold text-base leading-tight", children: formatBRL(mainCents) }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xs opacity-70 leading-tight", children: suffix }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xs opacity-60 leading-tight", children: label }),
+              anchorCents != null && anchorCents > mainCents ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: anchorClassName ?? "text-xs opacity-50", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("s", { children: formatBRL(anchorCents) }) }) : null
             ]
           },
           c
@@ -4058,38 +4322,6 @@ function PaywallCyclePicker({
   );
 }
 
-// src/components/paywall/PaywallCta.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-function PaywallCta({
-  ctaLabel,
-  loadingLabel,
-  switchHint,
-  trustLine,
-  onClick,
-  disabled = false,
-  loading = false,
-  className,
-  buttonClassName,
-  switchHintClassName,
-  trustClassName
-}) {
-  const label = loading && loadingLabel ? loadingLabel : ctaLabel;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick,
-        disabled: disabled || loading,
-        className: buttonClassName,
-        children: label
-      }
-    ),
-    switchHint ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: switchHintClassName, children: switchHint }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: trustClassName, children: trustLine })
-  ] });
-}
-
 // src/components/paywall/Paywall.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var NBSP = "\xA0";
@@ -4098,22 +4330,43 @@ function Paywall({
   themeClasses = {},
   slots = {},
   onBeforeCheckout
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PaywallProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    PaywallInner,
+    {
+      copy,
+      themeClasses,
+      slots,
+      onBeforeCheckout
+    }
+  ) });
+}
+function PaywallInner({
+  copy,
+  themeClasses = {},
+  slots = {},
+  onBeforeCheckout
 }) {
   const { track: track2 } = (0, import_sdk24.useHook)();
-  const s = usePaywallState();
+  const s = usePaywallContext();
   const priceLabel = formatBRL(s.currentPriceCents).replace(new RegExp(NBSP, "g"), " ");
-  const monthlyEquivLabel = formatBRL(s.currentMonthlyEquivCents).replace(new RegExp(NBSP, "g"), " ");
   const trialDaysCardLabel = String(s.trialDaysCard);
-  const ctaLabel = (0, import_react29.useMemo)(() => {
+  const ctaLabel = (0, import_react31.useMemo)(() => {
     if (s.isFree) return copy.freeCta ?? "Come\xE7ar agora";
     if (s.selectedMethod === "card") {
       if (s.hasConsumedTrial && copy.cardConsumedTrial) {
-        return interp(copy.cardConsumedTrial.ctaTemplate, { price: priceLabel, days: trialDaysCardLabel });
+        return interp(copy.cardConsumedTrial.ctaTemplate, {
+          price: priceLabel,
+          days: trialDaysCardLabel
+        });
       }
       if (s.trialDaysCard > 0) {
         return interp(copy.card.ctaTemplate, { price: priceLabel, days: trialDaysCardLabel });
       }
-      return copy.cardConsumedTrial ? interp(copy.cardConsumedTrial.ctaTemplate, { price: priceLabel, days: trialDaysCardLabel }) : `Assinar por ${priceLabel}`;
+      return copy.cardConsumedTrial ? interp(copy.cardConsumedTrial.ctaTemplate, {
+        price: priceLabel,
+        days: trialDaysCardLabel
+      }) : `Assinar por ${priceLabel}`;
     }
     return interp(copy.pix.ctaTemplate, { price: priceLabel, days: trialDaysCardLabel });
   }, [
@@ -4125,11 +4378,11 @@ function Paywall({
     priceLabel,
     trialDaysCardLabel
   ]);
-  const switchHint = (0, import_react29.useMemo)(() => {
+  const switchHint = (0, import_react31.useMemo)(() => {
     if (s.methods.length < 2) return void 0;
     return s.selectedMethod === "card" ? copy.card.switchHint : copy.pix.switchHint;
   }, [s.methods.length, s.selectedMethod, copy]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!s.initialLoadComplete) return;
     track2("paywall_view", {
       default_method: s.selectedMethod,
@@ -4162,21 +4415,6 @@ function Paywall({
     slots.cyclePickerSlot ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       PaywallCyclePicker,
       {
-        cycles: ["MONTHLY", "YEARLY"],
-        selected: s.cycle,
-        onSelect: s.selectCycle,
-        priceCentsByCycle: {
-          MONTHLY: priceCentsForCycle(s, "MONTHLY"),
-          YEARLY: priceCentsForCycle(s, "YEARLY")
-        },
-        anchorCentsByCycle: {
-          MONTHLY: anchorForCycle(s, "MONTHLY"),
-          YEARLY: anchorForCycle(s, "YEARLY")
-        },
-        monthlyEquivByCycle: {
-          MONTHLY: priceCentsForCycle(s, "MONTHLY"),
-          YEARLY: Math.round(priceCentsForCycle(s, "YEARLY") / 12)
-        },
         labels: copy.cycle,
         cardClassName: themeClasses.cycleCard,
         cardSelectedClassName: themeClasses.cycleCardSelected,
@@ -4186,9 +4424,6 @@ function Paywall({
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       PaywallMethodTabs,
       {
-        methods: s.methods,
-        selected: s.selectedMethod,
-        onSelect: s.selectMethod,
         labels: { "pix-auto": copy.pix.tabLabel, card: copy.card.tabLabel },
         className: themeClasses.tabs,
         tabClassName: themeClasses.tab,
@@ -4198,7 +4433,6 @@ function Paywall({
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       PaywallMethodContent,
       {
-        method: s.selectedMethod,
         copy: {
           pix: interpolateCopy(copy.pix, priceLabel, trialDaysCardLabel),
           card: interpolateCopy(copy.card, priceLabel, trialDaysCardLabel),
@@ -4209,27 +4443,27 @@ function Paywall({
             ctaTemplate: copy.cardConsumedTrial.ctaTemplate
           } : void 0
         },
-        hasConsumedTrial: s.hasConsumedTrial,
         className: themeClasses.tabContent,
         rowClassName: themeClasses.tabContentRow
       }
     ),
     slots.beforeCtaSlot,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      PaywallCta,
-      {
-        ctaLabel,
-        loadingLabel: "Abrindo checkout\u2026",
-        switchHint,
-        trustLine: copy.trustLine,
-        onClick: handleCta,
-        disabled: s.submitting,
-        loading: s.submitting,
-        buttonClassName: ctaTheme,
-        switchHintClassName: themeClasses.switchHint,
-        trustClassName: themeClasses.trustLine
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            void handleCta();
+          },
+          disabled: s.submitting,
+          className: ctaTheme,
+          children: s.submitting ? "Abrindo checkout\u2026" : ctaLabel
+        }
+      ),
+      switchHint ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: themeClasses.switchHint, children: switchHint }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: themeClasses.trustLine, children: copy.trustLine })
+    ] })
   ] });
 }
 function interp(tpl, vars) {
@@ -4243,13 +4477,438 @@ function interpolateCopy(m, price, days) {
     switchHint: m.switchHint
   };
 }
-function priceCentsForCycle(s, c) {
-  return s.plan ? c === "YEARLY" ? s.plan.yearlyCents ?? 0 : s.plan.monthlyCents : 0;
+
+// src/components/paywall/PaywallCta.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function PaywallCta({
+  ctaLabel,
+  loadingLabel,
+  switchHint,
+  trustLine,
+  className,
+  buttonClassName,
+  switchHintClassName,
+  trustClassName
+}) {
+  const { submit, submitting } = usePaywallContext();
+  const label = submitting && loadingLabel ? loadingLabel : ctaLabel;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          void submit();
+        },
+        disabled: submitting,
+        className: buttonClassName,
+        children: label
+      }
+    ),
+    switchHint ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: switchHintClassName, children: switchHint }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: trustClassName, children: trustLine })
+  ] });
+}
+
+// src/components/paywall/blocks/PaywallEyebrow.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var DEFAULT_EYEBROW_CLASSES = "text-xs uppercase tracking-widest font-semibold opacity-70";
+function PaywallEyebrow({ text, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: [DEFAULT_EYEBROW_CLASSES, className].filter(Boolean).join(" "), children: text });
+}
+
+// src/components/paywall/blocks/PaywallHero.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var DEFAULT_GRADIENT = "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent";
+function PaywallHero({
+  src,
+  alt = "",
+  headline,
+  aspectRatio = "16/9",
+  gradientClassName,
+  className,
+  headlineClassName,
+  imgClassName,
+  render
+}) {
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className, children: render({ src, headline }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    "div",
+    {
+      className: ["relative overflow-hidden", className].filter(Boolean).join(" "),
+      style: { aspectRatio },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "img",
+          {
+            src,
+            alt,
+            className: ["absolute inset-0 w-full h-full object-cover", imgClassName].filter(Boolean).join(" ")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: gradientClassName ?? DEFAULT_GRADIENT, "aria-hidden": "true" }),
+        headline ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "h1",
+          {
+            className: ["absolute bottom-0 left-0 right-0 p-4 text-white font-bold text-2xl", headlineClassName].filter(Boolean).join(" "),
+            children: headline
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/paywall/blocks/PaywallHeadline.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var DEFAULT_HEADLINE_CLASSES = "text-2xl font-bold leading-tight";
+function PaywallHeadline({ text, className, as = "h1" }) {
+  const Tag = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Tag, { className: [DEFAULT_HEADLINE_CLASSES, className].filter(Boolean).join(" "), children: text });
+}
+
+// src/components/paywall/blocks/PaywallPriceHeadline.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var DEFAULT_CLASS = "text-2xl font-bold leading-tight";
+var CYCLE_LABEL = {
+  MONTHLY: "mensal",
+  YEARLY: "anual"
+};
+function PaywallPriceHeadline({
+  template,
+  className,
+  as = "h1",
+  render
+}) {
+  const { cycle, currentMonthlyEquivCents, plan } = usePaywallContext();
+  const yearlyCents = plan?.yearlyCents ?? null;
+  const pricePerDay = formatBRL(dailyFromYearly(yearlyCents));
+  const monthlyEquiv = currentMonthlyEquivCents ?? 0;
+  const cycleLabel = CYCLE_LABEL[cycle] ?? cycle.toLowerCase();
+  const rootClasses = [DEFAULT_CLASS, className].filter(Boolean).join(" ");
+  if (render) {
+    const RootTag2 = as;
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RootTag2, { className: [className].filter(Boolean).join(" ") || void 0, children: render({ pricePerDay, currentMonthlyEquivCents: monthlyEquiv, cycle }) });
+  }
+  const text = template.replaceAll("{pricePerDay}", pricePerDay).replaceAll("{currentMonthlyEquiv}", formatBRL(monthlyEquiv)).replaceAll("{cycle}", cycleLabel);
+  const RootTag = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RootTag, { className: rootClasses, children: text });
+}
+
+// src/components/paywall/blocks/PaywallCountdown.tsx
+var import_react32 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var DEFAULT_COUNTDOWN_CLASSES = "font-mono tabular-nums";
+function resolveDeadlineMs(deadline) {
+  if (deadline instanceof Date) return deadline.getTime();
+  if (typeof deadline === "string") return new Date(deadline).getTime();
+  const { sessionStorageKey, durationMs } = deadline;
+  if (typeof window === "undefined" || typeof window.sessionStorage === "undefined") {
+    return Date.now() + durationMs;
+  }
+  const stored = window.sessionStorage.getItem(sessionStorageKey);
+  const parsed = stored ? Number.parseInt(stored, 10) : NaN;
+  const now = Date.now();
+  if (!Number.isFinite(parsed) || parsed < now) {
+    const target = now + durationMs;
+    window.sessionStorage.setItem(sessionStorageKey, String(target));
+    return target;
+  }
+  return parsed;
+}
+function computeRemaining(deadlineMs) {
+  const diff = Math.max(0, deadlineMs - Date.now());
+  const totalSeconds = Math.floor(diff / 1e3);
+  const h = Math.floor(totalSeconds / 3600);
+  const m = Math.floor(totalSeconds % 3600 / 60);
+  const s = totalSeconds % 60;
+  return { h, m, s, expired: diff === 0 };
+}
+function pad(n) {
+  return String(n).padStart(2, "0");
 }
-function anchorForCycle(s, c) {
-  if (!s.plan) return null;
-  if (c === "YEARLY") return s.plan.anchorYearlyCents ?? null;
-  return s.plan.anchorMonthlyCents ?? null;
+function PaywallCountdown({
+  deadline,
+  format = "h:m:s",
+  onExpire,
+  className,
+  render
+}) {
+  const deadlineMsRef = (0, import_react32.useRef)(null);
+  if (deadlineMsRef.current === null) {
+    deadlineMsRef.current = resolveDeadlineMs(deadline);
+  }
+  const [state, setState] = (0, import_react32.useState)(() => computeRemaining(deadlineMsRef.current));
+  const expiredCalledRef = (0, import_react32.useRef)(false);
+  (0, import_react32.useEffect)(() => {
+    if (state.expired) {
+      if (!expiredCalledRef.current) {
+        expiredCalledRef.current = true;
+        onExpire?.();
+      }
+      return;
+    }
+    const tick = () => {
+      const next = computeRemaining(deadlineMsRef.current);
+      setState(next);
+      if (next.expired && !expiredCalledRef.current) {
+        expiredCalledRef.current = true;
+        onExpire?.();
+      }
+    };
+    const id = setInterval(tick, 1e3);
+    return () => clearInterval(id);
+  }, [state.expired]);
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className, children: render(state) });
+  }
+  const formatted = format === "h:m:s" ? `${pad(state.h)}:${pad(state.m)}:${pad(state.s)}` : `${pad(state.h * 60 + state.m)}:${pad(state.s)}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: [DEFAULT_COUNTDOWN_CLASSES, className].filter(Boolean).join(" "), children: formatted });
+}
+
+// src/components/paywall/blocks/PaywallFeatures.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function PaywallFeatures({
+  items,
+  IconComponent,
+  className,
+  itemClassName,
+  iconClassName,
+  render,
+  renderItem
+}) {
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className, children: render({ items }) });
+  }
+  if (renderItem) {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { className, children: items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: renderItem(item, idx) }, idx)) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { className, children: items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("li", { className: itemClassName, children: [
+    IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(IconComponent, { className: iconClassName }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: iconClassName, "aria-hidden": "true", children: "\u2713" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: item })
+  ] }, idx)) });
+}
+
+// src/components/paywall/blocks/PaywallFeaturesCard.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var DEFAULT_CARD_CLASSES = "rounded-xl border p-4";
+function PaywallFeaturesCard({
+  title,
+  items,
+  className,
+  cardClassName,
+  titleClassName,
+  itemClassName,
+  renderItem
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: [DEFAULT_CARD_CLASSES, cardClassName].filter(Boolean).join(" "), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: ["font-semibold mb-2", titleClassName].filter(Boolean).join(" "), children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ul", { children: items.map(
+      (item, idx) => renderItem ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("li", { children: renderItem(item, idx) }, idx) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { className: itemClassName, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true", children: "\u2022" }),
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: item })
+      ] }, idx)
+    ) })
+  ] }) });
+}
+
+// src/components/paywall/blocks/PaywallTrophyBadge.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var DEFAULT_CHIP_CLASSES = "inline-flex items-center gap-1 px-3 py-1 rounded-full bg-yellow-100 text-yellow-900 text-sm font-medium";
+var FLOATING_CLASSES = "absolute top-2 right-2 z-10 shadow-md";
+function PaywallTrophyBadge({
+  text,
+  className,
+  iconClassName,
+  floating = false,
+  render
+}) {
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className, children: render({ text }) });
+  }
+  const rootClasses = [
+    DEFAULT_CHIP_CLASSES,
+    floating ? FLOATING_CLASSES : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: rootClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: iconClassName, "aria-hidden": "true", children: "\u{1F3C6}" }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: text })
+  ] });
+}
+
+// src/components/paywall/blocks/PaywallAnchorPrice.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var DEFAULT_CLASS2 = "text-sm opacity-60 line-through";
+function PaywallAnchorPrice({
+  className,
+  render
+}) {
+  const { anchorPriceCents, cycle } = usePaywallContext();
+  if (anchorPriceCents === null || anchorPriceCents === void 0 || anchorPriceCents <= 0) {
+    return null;
+  }
+  void cycle;
+  const formatted = formatBRL(anchorPriceCents);
+  const rootClasses = [DEFAULT_CLASS2, className].filter(Boolean).join(" ");
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: className || void 0, children: render({ anchorCents: anchorPriceCents, formatted }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: rootClasses, children: formatted });
+}
+
+// src/components/paywall/blocks/PaywallTestimonials.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var DEFAULT_ROOT = "flex gap-3 overflow-x-auto snap-x snap-mandatory pb-2";
+var DEFAULT_CARD = "snap-start shrink-0 w-72 rounded-2xl border p-4 flex flex-col gap-2";
+var DEFAULT_AVATAR = "w-10 h-10 rounded-full object-cover";
+var DEFAULT_QUOTE = "text-sm leading-snug";
+var DEFAULT_NAME = "text-xs font-semibold opacity-80";
+var DEFAULT_STARS = "text-yellow-500 text-sm";
+function clampStars(n) {
+  return Math.max(0, Math.min(5, Math.round(n)));
+}
+function PaywallTestimonials({
+  items,
+  className,
+  cardClassName,
+  avatarClassName,
+  quoteClassName,
+  nameClassName,
+  starsClassName,
+  renderItem
+}) {
+  const rootClasses = [DEFAULT_ROOT, className].filter(Boolean).join(" ");
+  const cardClasses = [DEFAULT_CARD, cardClassName].filter(Boolean).join(" ");
+  const avatarClasses = [DEFAULT_AVATAR, avatarClassName].filter(Boolean).join(" ");
+  const quoteClasses = [DEFAULT_QUOTE, quoteClassName].filter(Boolean).join(" ");
+  const nameClasses = [DEFAULT_NAME, nameClassName].filter(Boolean).join(" ");
+  const starsClasses = [DEFAULT_STARS, starsClassName].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: rootClasses, children: items.map((item, idx) => {
+    if (renderItem) return renderItem(item, idx);
+    const filled = clampStars(item.stars);
+    const empty = 5 - filled;
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cardClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
+        item.avatar ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "img",
+          {
+            src: item.avatar,
+            alt: "",
+            loading: "lazy",
+            className: avatarClasses,
+            "aria-hidden": "true"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: nameClasses, children: item.name })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: starsClasses, "aria-label": `${filled} de 5 estrelas`, children: [
+        "\u2605".repeat(filled),
+        "\u2606".repeat(empty)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: quoteClasses, children: item.quote })
+    ] }, idx);
+  }) });
+}
+
+// src/components/paywall/blocks/PaywallStatsRow.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var DEFAULT_ROOT2 = "grid grid-cols-3 gap-4";
+var DEFAULT_CELL = "flex flex-col items-center text-center";
+var DEFAULT_VALUE = "text-2xl font-bold";
+var DEFAULT_LABEL = "text-xs opacity-70";
+function PaywallStatsRow({
+  stats,
+  className,
+  cellClassName,
+  valueClassName,
+  labelClassName,
+  renderCell
+}) {
+  const rootClasses = [DEFAULT_ROOT2, className].filter(Boolean).join(" ");
+  const cellClasses = [DEFAULT_CELL, cellClassName].filter(Boolean).join(" ");
+  const valueClasses = [DEFAULT_VALUE, valueClassName].filter(Boolean).join(" ");
+  const labelClasses = [DEFAULT_LABEL, labelClassName].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: rootClasses, children: stats.map((stat, idx) => {
+    if (renderCell) return renderCell(stat, idx);
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cellClasses, children: [
+      stat.icon ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { "aria-hidden": "true", children: stat.icon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: valueClasses, children: stat.value }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: labelClasses, children: stat.label })
+    ] }, idx);
+  }) });
+}
+
+// src/components/paywall/blocks/PaywallFinePrint.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var DEFAULT_CLASS3 = "text-xs opacity-60 leading-snug";
+var CYCLE_LABEL2 = {
+  MONTHLY: "mensal",
+  YEARLY: "anual"
+};
+function PaywallFinePrint({
+  template,
+  className,
+  render
+}) {
+  const {
+    currentPriceCents,
+    cycle,
+    trialDaysCard,
+    trialDaysPix,
+    selectedMethod
+  } = usePaywallContext();
+  const trialDays = selectedMethod === "card" ? trialDaysCard : trialDaysPix;
+  const cycleLabel = CYCLE_LABEL2[cycle] ?? cycle.toLowerCase();
+  const priceFormatted = formatBRL(currentPriceCents ?? 0);
+  const rootClasses = [DEFAULT_CLASS3, className].filter(Boolean).join(" ");
+  if (render) {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: className || void 0, children: render({
+      currentPriceCents: currentPriceCents ?? 0,
+      cycle,
+      trialDays: trialDays ?? 0,
+      selectedMethod
+    }) });
+  }
+  const text = template.replaceAll("{price}", priceFormatted).replaceAll("{trialDays}", String(trialDays ?? 0)).replaceAll("{cycle}", cycleLabel);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: rootClasses, children: text });
+}
+
+// src/components/paywall/blocks/PaywallTrustLine.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var DEFAULT_ROOT3 = "flex items-center gap-3";
+var DEFAULT_ITEM = "flex items-center gap-1.5 text-xs";
+function PaywallTrustLine({
+  items,
+  className,
+  itemClassName,
+  renderItem
+}) {
+  const rootClasses = [DEFAULT_ROOT3, className].filter(Boolean).join(" ");
+  const itemClasses = [DEFAULT_ITEM, itemClassName].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: rootClasses, children: items.map((item, idx) => {
+    if (renderItem) return renderItem(item, idx);
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: itemClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": "true", children: item.icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: item.text })
+    ] }, idx);
+  }) });
+}
+
+// src/components/paywall/blocks/PaywallStickyFooter.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var DEFAULT_CLASSES = "sticky bottom-0 left-0 right-0 bg-background";
+var SAFE_AREA_CLASS = "pb-[env(safe-area-inset-bottom)]";
+function PaywallStickyFooter({
+  children,
+  className,
+  safeAreaInsets = true
+}) {
+  const classes = [DEFAULT_CLASSES, safeAreaInsets ? SAFE_AREA_CLASS : null, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: classes, children });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -4269,10 +4928,26 @@ function anchorForCycle(s, c) {
   OnboardingFlow,
   PaymentReturnHandler,
   Paywall,
+  PaywallAnchorPrice,
+  PaywallContext,
+  PaywallCountdown,
   PaywallCta,
   PaywallCyclePicker,
+  PaywallEyebrow,
+  PaywallFeatures,
+  PaywallFeaturesCard,
+  PaywallFinePrint,
+  PaywallHeadline,
+  PaywallHero,
   PaywallMethodContent,
   PaywallMethodTabs,
+  PaywallPriceHeadline,
+  PaywallProvider,
+  PaywallStatsRow,
+  PaywallStickyFooter,
+  PaywallTestimonials,
+  PaywallTrophyBadge,
+  PaywallTrustLine,
   PersistenceRegistry,
   PixWaitingPageDefault,
   PreAuthShell,
@@ -4303,6 +4978,7 @@ function anchorForCycle(s, c) {
   useInstallPrompt,
   useLoginForm,
   useOnboardingStep,
+  usePaywallContext,
   usePaywallState,
   usePlan,
   usePush,