@monetizekit/react 0.2.0 → 0.4.0

package/dist/index.js

@@ -357,13 +357,14 @@ var INTERVAL_SUFFIX = {
   annually: "/yr",
   one_time: ""
 };
-function describePlanPrice(plan, locale) {
+function describePlanPrice(plan, locale, billingCycle = "monthly") {
   const pricing = plan.pricing ?? [];
   const contactSales = (plan.tags ?? []).includes("contact_sales") || pricing.length === 0;
   if (contactSales) {
     return { headline: null, contactSales: true };
   }
-  const base = pricing.find((t) => t.type === "flat");
+  const flats = pricing.filter((t) => t.type === "flat");
+  const base = flats.find((t) => t.interval === billingCycle) ?? flats.find((t) => t.interval === "monthly") ?? flats[0];
   const hasUsage = pricing.some((t) => t.type === "usage");
   const currency = base?.currency ?? pricing[0]?.currency ?? "USD";
   const interval = base?.interval ?? pricing[0]?.interval ?? "monthly";
@@ -375,6 +376,14 @@ function describePlanPrice(plan, locale) {
     contactSales: false
   };
 }
+function annualSavingsPercent(plan) {
+  const flats = (plan.pricing ?? []).filter((t) => t.type === "flat");
+  const monthly = flats.find((t) => t.interval === "monthly");
+  const annual = flats.find((t) => t.interval === "annually");
+  if (!monthly || !annual || monthly.amount <= 0) return null;
+  const pct = Math.round((1 - annual.amount / (monthly.amount * 12)) * 100);
+  return pct > 0 ? pct : null;
+}
 function describeUsageTerm(term, locale) {
   const parts = [];
   if (term.includedUnits && term.includedUnits > 0) {
@@ -407,7 +416,7 @@ var SAMPLE_PLANS = [
     id: "sample_pro",
     name: "Growth",
     description: "Product-led monetization at scale",
-    pricing: [{ type: "flat", amount: 49900, currency: "USD", interval: "monthly" }],
+    pricing: [{ type: "flat", amount: 499, currency: "USD", interval: "monthly" }],
     entitlements: [
       { featureKey: "max_customers", featureDisplayName: "Tracked customers", type: "limit", value: 1e4 },
       { featureKey: "stripe", featureDisplayName: "Stripe integration", type: "boolean", value: true },
@@ -420,7 +429,7 @@ var SAMPLE_PLANS = [
     name: "Scale",
     description: "Volume-based capacity pricing",
     pricing: [
-      { type: "flat", amount: 99900, currency: "USD", interval: "monthly" },
+      { type: "flat", amount: 999, currency: "USD", interval: "monthly" },
       {
         type: "usage",
         amount: 0,
@@ -458,7 +467,21 @@ var SAMPLE_USAGE = {
   seats: { meterId: "seats", current: 8, limit: 10 },
   storage_gb: { meterId: "storage_gb", current: 3, limit: 10 }
 };
-var SAMPLE_CREDITS = { balance: 12e4, currency: "USD" };
+var SAMPLE_CREDITS = { balance: 1200, currency: "USD" };
+var SAMPLE_TEAM = {
+  members: [
+    { name: "Jordan Lee", email: "jordan@acme.test", role: "owner" },
+    { name: "Sam Rivera", email: "sam@acme.test", role: "admin" },
+    { name: "Taylor Kim", email: "taylor@acme.test", role: "member" }
+  ],
+  seats: 3,
+  maxSeats: 10
+};
+var SAMPLE_INVOICES = [
+  { id: "in_1003", date: "2026-03-01T00:00:00Z", amount: 499, currency: "USD", status: "paid" },
+  { id: "in_1002", date: "2026-02-01T00:00:00Z", amount: 499, currency: "USD", status: "paid" },
+  { id: "in_1001", date: "2026-01-01T00:00:00Z", amount: 499, currency: "USD", status: "paid" }
+];
 var SAMPLE_PORTAL = {
   planName: "Growth",
   meterIds: ["api_calls", "seats"]
@@ -482,6 +505,78 @@ function SampleNotice({ children }) {
     /* @__PURE__ */ jsx("span", { children: children ?? SAMPLE_NOTICE_TEXT })
   ] });
 }
+var trackStyle = {
+  display: "inline-flex",
+  alignSelf: "center",
+  gap: "0.125rem",
+  padding: "0.25rem",
+  borderRadius: "var(--mk-radius)",
+  background: "color-mix(in srgb, var(--mk-fg) 6%, transparent)",
+  fontFamily: "var(--mk-font)"
+};
+function optionStyle(active) {
+  return {
+    border: "none",
+    cursor: "pointer",
+    borderRadius: "var(--mk-radius)",
+    padding: "0.375rem 0.875rem",
+    fontSize: "0.8125rem",
+    fontWeight: 600,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.375rem",
+    background: active ? "var(--mk-card)" : "transparent",
+    color: active ? "var(--mk-card-fg)" : "var(--mk-muted)",
+    boxShadow: active ? "var(--mk-shadow)" : "none"
+  };
+}
+function BillingCycleToggle({
+  value,
+  onChange,
+  savingsPercent = 0,
+  monthlyLabel = "Monthly",
+  annuallyLabel = "Yearly"
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: trackStyle, role: "group", "aria-label": "Billing cycle", "data-mk-component": "billing-toggle", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        style: optionStyle(value === "monthly"),
+        "aria-pressed": value === "monthly",
+        onClick: () => onChange("monthly"),
+        children: monthlyLabel
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        style: optionStyle(value === "annually"),
+        "aria-pressed": value === "annually",
+        onClick: () => onChange("annually"),
+        children: [
+          annuallyLabel,
+          savingsPercent > 0 ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                fontSize: "0.6875rem",
+                fontWeight: 700,
+                color: "var(--mk-success)"
+              },
+              children: [
+                "Save ",
+                savingsPercent,
+                "%"
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
 var wrapperStyle = {
   display: "grid",
   gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
@@ -501,6 +596,8 @@ var cardBase = {
 function PricingTable({
   plans: plansProp,
   highlightPlan,
+  billingCycle,
+  showBillingToggle = false,
   locale,
   onSelectPlan,
   onContactSales,
@@ -510,6 +607,10 @@ function PricingTable({
   const { client, tokens } = useMonetizeKit();
   const [plans, setPlans] = useState(plansProp ?? null);
   const [error, setError] = useState(null);
+  const [cycle, setCycle] = useState(billingCycle ?? "monthly");
+  useEffect(() => {
+    if (billingCycle) setCycle(billingCycle);
+  }, [billingCycle]);
   useEffect(() => {
     if (plansProp) {
       setPlans(plansProp);
@@ -544,8 +645,19 @@ function PricingTable({
       "data-mk-sample": isSample ? "true" : void 0,
       children: [
         isSample ? /* @__PURE__ */ jsx(SampleNotice, { children: disclaimer }) : null,
+        showBillingToggle ? /* @__PURE__ */ jsx(
+          BillingCycleToggle,
+          {
+            value: cycle,
+            onChange: setCycle,
+            savingsPercent: Math.max(
+              0,
+              ...effectivePlans.map((p) => annualSavingsPercent(p) ?? 0)
+            )
+          }
+        ) : null,
         /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: effectivePlans.map((plan) => {
-          const price = describePlanPrice(plan, locale);
+          const price = describePlanPrice(plan, locale, cycle);
           const highlighted = highlightPlan != null && plan.name.toLowerCase() === highlightPlan.toLowerCase();
           return /* @__PURE__ */ jsxs(
             "div",
@@ -610,6 +722,169 @@ function PricingTable({
     }
   );
 }
+var UNLIMITED_THRESHOLD = 9999;
+function entitlementCell(ent, locale) {
+  if (!ent) return /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)" }, children: "\u2014" });
+  switch (ent.type) {
+    case "boolean":
+      return ent.value ? /* @__PURE__ */ jsx("span", { "aria-label": "Included", style: { color: "var(--mk-success)", fontWeight: 700 }, children: "\u2713" }) : /* @__PURE__ */ jsx("span", { "aria-label": "Not included", style: { color: "var(--mk-muted)" }, children: "\u2014" });
+    case "limit": {
+      const n = Number(ent.value);
+      return /* @__PURE__ */ jsx("span", { children: n >= UNLIMITED_THRESHOLD ? "Unlimited" : formatUnits(n, locale) });
+    }
+    default:
+      return /* @__PURE__ */ jsx("span", { children: String(ent.value) });
+  }
+}
+function deriveGroups(plans) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const plan of plans) {
+    for (const ent of plan.entitlements ?? []) {
+      if (!seen.has(ent.featureKey)) seen.set(ent.featureKey, ent.featureDisplayName);
+    }
+  }
+  return [
+    {
+      title: "Features",
+      features: Array.from(seen, ([key, label]) => ({ key, label }))
+    }
+  ];
+}
+var cellStyle = {
+  padding: "0.75rem 1rem",
+  textAlign: "center",
+  fontSize: "0.875rem",
+  borderTop: "1px solid var(--mk-border)"
+};
+function PricingComparison({
+  plans: plansProp,
+  groups,
+  highlightPlan,
+  billingCycle = "monthly",
+  locale,
+  sampleWhenEmpty = true,
+  disclaimer
+}) {
+  const { client, tokens } = useMonetizeKit();
+  const [plans, setPlans] = useState(plansProp ?? null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (plansProp) {
+      setPlans(plansProp);
+      return;
+    }
+    let active = true;
+    client.listPlans().then((res) => {
+      if (active) setPlans(res.data ?? []);
+    }).catch((e) => {
+      if (active) setError(e instanceof Error ? e : new Error(String(e)));
+    });
+    return () => {
+      active = false;
+    };
+  }, [client, plansProp]);
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", style: { color: "var(--mk-muted)" }, children: "Unable to load plan comparison." });
+  }
+  if (!plans) {
+    return /* @__PURE__ */ jsx("div", { "aria-busy": "true", style: { color: "var(--mk-muted)" }, children: "Loading comparison\u2026" });
+  }
+  const isSample = plans.length === 0 && sampleWhenEmpty;
+  const effectivePlans = isSample ? SAMPLE_PLANS : plans;
+  if (effectivePlans.length === 0) {
+    return /* @__PURE__ */ jsx("div", { style: { color: "var(--mk-muted)" }, children: "No plans to compare." });
+  }
+  const effectiveGroups = groups ?? deriveGroups(effectivePlans);
+  const entByPlan = effectivePlans.map(
+    (plan) => new Map((plan.entitlements ?? []).map((e) => [e.featureKey, e]))
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { ...tokensToStyle(tokens), display: "flex", flexDirection: "column", gap: "1rem" },
+      "data-mk-component": "pricing-comparison",
+      "data-mk-sample": isSample ? "true" : void 0,
+      children: [
+        isSample ? /* @__PURE__ */ jsx(SampleNotice, { children: disclaimer }) : null,
+        /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs(
+          "table",
+          {
+            style: {
+              width: "100%",
+              borderCollapse: "collapse",
+              background: "var(--mk-bg)",
+              color: "var(--mk-fg)",
+              fontFamily: "var(--mk-font)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("th", { style: { ...cellStyle, textAlign: "left", borderTop: "none" }, children: "Features" }),
+                effectivePlans.map((plan) => {
+                  const highlighted = highlightPlan != null && plan.name.toLowerCase() === highlightPlan.toLowerCase();
+                  const price = describePlanPrice(plan, locale, billingCycle);
+                  return /* @__PURE__ */ jsxs(
+                    "th",
+                    {
+                      style: {
+                        ...cellStyle,
+                        borderTop: "none",
+                        color: highlighted ? "var(--mk-primary)" : "var(--mk-fg)"
+                      },
+                      "data-mk-plan": plan.name,
+                      "data-mk-highlighted": highlighted ? "true" : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx("div", { style: { fontWeight: 700 }, children: plan.name }),
+                        /* @__PURE__ */ jsx("div", { style: { fontSize: "0.75rem", color: "var(--mk-muted)", fontWeight: 400 }, children: price.contactSales ? "Custom" : price.headline })
+                      ]
+                    },
+                    plan.id
+                  );
+                })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: effectiveGroups.map((group) => /* @__PURE__ */ jsx(
+                FeatureGroupRows,
+                {
+                  group,
+                  planCount: effectivePlans.length,
+                  entByPlan,
+                  locale
+                },
+                group.title
+              )) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function FeatureGroupRows({
+  group,
+  planCount,
+  entByPlan,
+  locale
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        colSpan: planCount + 1,
+        style: {
+          padding: "0.625rem 1rem",
+          fontSize: "0.8125rem",
+          fontWeight: 700,
+          background: "color-mix(in srgb, var(--mk-fg) 5%, transparent)",
+          borderTop: "1px solid var(--mk-border)"
+        },
+        children: group.title
+      }
+    ) }),
+    group.features.map((feature) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { style: { ...cellStyle, textAlign: "left", color: "var(--mk-fg)" }, children: feature.label }),
+      entByPlan.map((map, i) => /* @__PURE__ */ jsx("td", { style: cellStyle, children: entitlementCell(map.get(feature.key), locale) }, i))
+    ] }, feature.key))
+  ] });
+}
 var overlayStyle = {
   border: "1px solid var(--mk-border)",
   borderRadius: "var(--mk-radius)",
@@ -629,14 +904,15 @@ function Paywall({
   title = "Upgrade to unlock this feature",
   description = "This feature isn't included in your current plan.",
   ctaLabel = "Upgrade",
-  onUpgrade
+  onUpgrade,
+  sample = false
 }) {
   const { allowed, loading } = useEntitlement(feature);
   const { tokens } = useMonetizeKit();
-  if (loading) {
+  if (!sample && loading) {
     return /* @__PURE__ */ jsx("div", { "aria-busy": "true", style: { color: "var(--mk-muted)" }, children: "Checking access\u2026" });
   }
-  if (allowed) {
+  if (!sample && allowed) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   return /* @__PURE__ */ jsxs("div", { style: { ...tokensToStyle(tokens), ...overlayStyle }, "data-mk-component": "paywall", children: [
@@ -715,6 +991,94 @@ function UsageBanner({
     over ? /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-danger)", fontSize: "0.75rem" }, children: "Over included allotment \u2014 overage billed per usage pricing." }) : null
   ] });
 }
+var VARIANT_COLOR = {
+  info: "var(--mk-accent)",
+  warning: "var(--mk-warning)",
+  danger: "var(--mk-danger)",
+  neutral: "var(--mk-muted)"
+};
+function actionStyle(variant, accent) {
+  if (variant === "ghost") {
+    return {
+      background: "transparent",
+      color: "var(--mk-muted)",
+      border: "none",
+      cursor: "pointer",
+      fontSize: "0.8125rem",
+      fontWeight: 600,
+      padding: "0.375rem 0.5rem"
+    };
+  }
+  return {
+    background: accent,
+    color: "var(--mk-card)",
+    border: "none",
+    borderRadius: "var(--mk-radius)",
+    cursor: "pointer",
+    fontSize: "0.8125rem",
+    fontWeight: 600,
+    padding: "0.375rem 0.75rem"
+  };
+}
+function AlertBanner({
+  variant = "info",
+  title,
+  description,
+  progress,
+  actions = [],
+  icon
+}) {
+  const { tokens } = useMonetizeKit();
+  const accent = VARIANT_COLOR[variant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "data-mk-component": "alert-banner",
+      "data-mk-variant": variant,
+      style: {
+        ...tokensToStyle(tokens),
+        display: "flex",
+        gap: "0.75rem",
+        alignItems: "flex-start",
+        border: `1px solid color-mix(in srgb, ${accent} 35%, var(--mk-border))`,
+        background: `color-mix(in srgb, ${accent} 8%, var(--mk-card))`,
+        color: "var(--mk-card-fg)",
+        borderRadius: "var(--mk-radius)",
+        padding: "0.875rem 1rem",
+        fontFamily: "var(--mk-font)"
+      },
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: accent, fontSize: "1.1rem", lineHeight: 1 }, children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: title }),
+          description ? /* @__PURE__ */ jsx("div", { style: { fontSize: "0.8125rem", color: "var(--mk-muted)" }, children: description }) : null,
+          typeof progress === "number" ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { height: 6, borderRadius: 999, background: "var(--mk-border)", overflow: "hidden" },
+              role: "progressbar",
+              "aria-valuenow": Math.round(Math.min(1, Math.max(0, progress)) * 100),
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              children: /* @__PURE__ */ jsx("div", { style: { width: `${Math.min(1, Math.max(0, progress)) * 100}%`, height: "100%", background: accent } })
+            }
+          ) : null,
+          actions.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: actions.map((action) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: action.onClick,
+              style: actionStyle(action.variant, accent),
+              children: action.label
+            },
+            action.label
+          )) }) : null
+        ] })
+      ]
+    }
+  );
+}
 var containerStyle = {
   border: "1px solid var(--mk-border)",
   borderRadius: "var(--mk-radius)",
@@ -756,10 +1120,38 @@ function SampleUsageRow({
     hasLimit ? /* @__PURE__ */ jsx("div", { style: { height: 6, borderRadius: 999, background: "var(--mk-border)", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { width: `${fraction * 100}%`, height: "100%", background: barColor } }) }) : null
   ] });
 }
+var ROW_DIVIDER = { borderTop: "1px solid var(--mk-border)" };
+var INVOICE_STATUS_COLOR = {
+  paid: "var(--mk-success)",
+  pending: "var(--mk-warning)",
+  overdue: "var(--mk-danger)"
+};
+function StatusBadge({ label, color }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        fontSize: "0.6875rem",
+        fontWeight: 600,
+        textTransform: "capitalize",
+        color,
+        border: `1px solid ${color}`,
+        borderRadius: 999,
+        padding: "0.0625rem 0.5rem"
+      },
+      children: label
+    }
+  );
+}
 function CustomerPortal({
   planName,
   meterIds,
   showCredits = true,
+  showTeam,
+  teamMembers,
+  seats,
+  showInvoices,
+  invoices,
   sample = false,
   disclaimer,
   showBranding = false,
@@ -774,6 +1166,11 @@ function CustomerPortal({
   const creditBalance = sample ? SAMPLE_CREDITS.balance : credits.balance;
   const creditCurrency = sample ? SAMPLE_CREDITS.currency : credits.currency;
   const creditLoading = sample ? false : credits.loading;
+  const teamEnabled = showTeam ?? sample;
+  const resolvedTeam = teamMembers ?? (sample ? SAMPLE_TEAM.members : []);
+  const resolvedSeats = seats ?? (sample ? { used: SAMPLE_TEAM.seats, max: SAMPLE_TEAM.maxSeats } : void 0);
+  const invoicesEnabled = showInvoices ?? sample;
+  const resolvedInvoices = invoices ?? (sample ? SAMPLE_INVOICES : []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -840,6 +1237,64 @@ function CustomerPortal({
           /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Credits" }),
           /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)" }, children: creditLoading ? "\u2026" : formatMoney(creditBalance, creditCurrency ?? currency, locale) })
         ] }) : null,
+        teamEnabled ? /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Team" }),
+            resolvedSeats ? /* @__PURE__ */ jsxs("span", { style: { color: "var(--mk-muted)", fontSize: "0.75rem" }, children: [
+              resolvedSeats.used,
+              "/",
+              resolvedSeats.max >= 9999 ? "Unlimited" : resolvedSeats.max,
+              " seats"
+            ] }) : null
+          ] }),
+          resolvedTeam.length === 0 ? /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)", fontSize: "0.8125rem" }, children: "No team members." }) : resolvedTeam.map((member, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: "0.75rem",
+                fontSize: "0.8125rem",
+                paddingTop: i === 0 ? 0 : "0.5rem",
+                ...i === 0 ? {} : ROW_DIVIDER
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontWeight: 600 }, children: member.name }),
+                  /* @__PURE__ */ jsx("div", { style: { color: "var(--mk-muted)", fontSize: "0.75rem" }, children: member.email })
+                ] }),
+                /* @__PURE__ */ jsx(StatusBadge, { label: member.role, color: "var(--mk-muted)" })
+              ]
+            },
+            member.email
+          ))
+        ] }) : null,
+        invoicesEnabled ? /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Invoices" }),
+          resolvedInvoices.length === 0 ? /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)", fontSize: "0.8125rem" }, children: "No invoices yet." }) : resolvedInvoices.map((invoice, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: "0.75rem",
+                fontSize: "0.8125rem",
+                paddingTop: i === 0 ? 0 : "0.5rem",
+                ...i === 0 ? {} : ROW_DIVIDER
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: new Date(invoice.date).toLocaleDateString(locale) }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: formatMoney(invoice.amount, invoice.currency, locale) }),
+                  /* @__PURE__ */ jsx(StatusBadge, { label: invoice.status, color: INVOICE_STATUS_COLOR[invoice.status] })
+                ] })
+              ]
+            },
+            invoice.id
+          ))
+        ] }) : null,
         showBranding ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", fontSize: "0.625rem", color: "var(--mk-muted)" }, children: "Powered by MonetizeKit" }) : null
       ]
     }
@@ -856,6 +1311,6 @@ function EntitlementGate({
   return /* @__PURE__ */ jsx(Fragment, { children: allowed ? children : fallback });
 }
 
-export { CustomerPortal, EntitlementGate, MonetizeKitClient, MonetizeKitProvider, Paywall, PricingTable, SAMPLE_CREDITS, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_USAGE, SampleNotice, THEME_PRESETS, THEME_PRESET_NAMES, UsageBanner, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
+export { AlertBanner, BillingCycleToggle, CustomerPortal, EntitlementGate, MonetizeKitClient, MonetizeKitProvider, Paywall, PricingComparison, PricingTable, SAMPLE_CREDITS, SAMPLE_INVOICES, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_TEAM, SAMPLE_USAGE, SampleNotice, THEME_PRESETS, THEME_PRESET_NAMES, UsageBanner, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map