@monetizekit/react 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -47,7 +47,13 @@ var THEME_PRESETS = {
     colorPrimaryForeground: "#ffffff",
     colorAccent: "#10b981",
     colorBorder: "#e4e4e7",
+    colorCard: "#ffffff",
+    colorCardForeground: "#0a0a0a",
+    colorSuccess: "#16a34a",
+    colorWarning: "#d97706",
+    colorDanger: "#dc2626",
     radius: "0.5rem",
+    shadow: "0 1px 3px rgba(0,0,0,0.1)",
     fontFamily: "system-ui, -apple-system, sans-serif"
   },
   dark: {
@@ -58,7 +64,13 @@ var THEME_PRESETS = {
     colorPrimaryForeground: "#0a0a0a",
     colorAccent: "#10b981",
     colorBorder: "#27272a",
+    colorCard: "#18181b",
+    colorCardForeground: "#fafafa",
+    colorSuccess: "#22c55e",
+    colorWarning: "#f59e0b",
+    colorDanger: "#ef4444",
     radius: "0.5rem",
+    shadow: "0 1px 3px rgba(0,0,0,0.4)",
     fontFamily: "system-ui, -apple-system, sans-serif"
   },
   memphis: {
@@ -69,7 +81,13 @@ var THEME_PRESETS = {
     colorPrimaryForeground: "#1a1a1a",
     colorAccent: "#00D9FF",
     colorBorder: "#1a1a1a",
+    colorCard: "#ffffff",
+    colorCardForeground: "#1a1a1a",
+    colorSuccess: "#00C853",
+    colorWarning: "#FFB400",
+    colorDanger: "#FF3B30",
     radius: "0",
+    shadow: "4px 4px 0 #1a1a1a",
     fontFamily: "system-ui, -apple-system, sans-serif"
   },
   dashboard: {
@@ -80,10 +98,119 @@ var THEME_PRESETS = {
     colorPrimaryForeground: "oklch(0.985 0 0)",
     colorAccent: "oklch(0.97 0 0)",
     colorBorder: "oklch(0.922 0 0)",
+    colorCard: "oklch(1 0 0)",
+    colorCardForeground: "oklch(0.145 0 0)",
+    colorSuccess: "#16a34a",
+    colorWarning: "#d97706",
+    colorDanger: "#dc2626",
     radius: "0.625rem",
+    shadow: "0 1px 2px rgba(0,0,0,0.06)",
     fontFamily: "Geist, system-ui, sans-serif"
+  },
+  console: {
+    colorBackground: "#0b0f14",
+    colorForeground: "#e6edf3",
+    colorMuted: "#8b949e",
+    colorPrimary: "#6366f1",
+    colorPrimaryForeground: "#ffffff",
+    colorAccent: "#00D9FF",
+    colorBorder: "#1f2630",
+    colorCard: "#11161d",
+    colorCardForeground: "#e6edf3",
+    colorSuccess: "#34d399",
+    colorWarning: "#fbbf24",
+    colorDanger: "#f87171",
+    radius: "0.625rem",
+    shadow: "0 8px 24px rgba(0,0,0,0.5)",
+    fontFamily: "Geist, system-ui, sans-serif"
+  },
+  midnight: {
+    colorBackground: "#0f172a",
+    colorForeground: "#e2e8f0",
+    colorMuted: "#94a3b8",
+    colorPrimary: "#818cf8",
+    colorPrimaryForeground: "#0f172a",
+    colorAccent: "#38bdf8",
+    colorBorder: "#1e293b",
+    colorCard: "#1e293b",
+    colorCardForeground: "#e2e8f0",
+    colorSuccess: "#4ade80",
+    colorWarning: "#facc15",
+    colorDanger: "#fb7185",
+    radius: "0.75rem",
+    shadow: "0 10px 30px rgba(2,6,23,0.6)",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  },
+  ocean: {
+    colorBackground: "#f0fdfa",
+    colorForeground: "#0f3d3e",
+    colorMuted: "#5b7c7d",
+    colorPrimary: "#0d9488",
+    colorPrimaryForeground: "#ffffff",
+    colorAccent: "#06b6d4",
+    colorBorder: "#99f6e4",
+    colorCard: "#ffffff",
+    colorCardForeground: "#0f3d3e",
+    colorSuccess: "#059669",
+    colorWarning: "#d97706",
+    colorDanger: "#e11d48",
+    radius: "0.75rem",
+    shadow: "0 4px 14px rgba(13,148,136,0.15)",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  },
+  forest: {
+    colorBackground: "#f7fee7",
+    colorForeground: "#1a2e05",
+    colorMuted: "#5c6b47",
+    colorPrimary: "#4d7c0f",
+    colorPrimaryForeground: "#ffffff",
+    colorAccent: "#65a30d",
+    colorBorder: "#d9f99d",
+    colorCard: "#ffffff",
+    colorCardForeground: "#1a2e05",
+    colorSuccess: "#16a34a",
+    colorWarning: "#ca8a04",
+    colorDanger: "#dc2626",
+    radius: "0.5rem",
+    shadow: "0 4px 14px rgba(77,124,15,0.12)",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  },
+  sunset: {
+    colorBackground: "#fff7ed",
+    colorForeground: "#431407",
+    colorMuted: "#9a6b4f",
+    colorPrimary: "#ea580c",
+    colorPrimaryForeground: "#ffffff",
+    colorAccent: "#f43f5e",
+    colorBorder: "#fed7aa",
+    colorCard: "#ffffff",
+    colorCardForeground: "#431407",
+    colorSuccess: "#16a34a",
+    colorWarning: "#d97706",
+    colorDanger: "#e11d48",
+    radius: "1rem",
+    shadow: "0 6px 20px rgba(234,88,12,0.15)",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  },
+  grape: {
+    colorBackground: "#faf5ff",
+    colorForeground: "#2e1065",
+    colorMuted: "#7c6f93",
+    colorPrimary: "#7c3aed",
+    colorPrimaryForeground: "#ffffff",
+    colorAccent: "#d946ef",
+    colorBorder: "#e9d5ff",
+    colorCard: "#ffffff",
+    colorCardForeground: "#2e1065",
+    colorSuccess: "#16a34a",
+    colorWarning: "#d97706",
+    colorDanger: "#dc2626",
+    radius: "0.875rem",
+    shadow: "0 6px 20px rgba(124,58,237,0.15)",
+    fontFamily: "system-ui, -apple-system, sans-serif"
   }
 };
+var THEME_PRESET_NAMES = Object.keys(THEME_PRESETS);
 function resolveTokens(appearance = "light") {
   if (typeof appearance === "string") {
     return THEME_PRESETS[appearance];
@@ -99,7 +226,13 @@ var TOKEN_TO_CSS_VAR = {
   colorPrimaryForeground: "--mk-primary-fg",
   colorAccent: "--mk-accent",
   colorBorder: "--mk-border",
+  colorCard: "--mk-card",
+  colorCardForeground: "--mk-card-fg",
+  colorSuccess: "--mk-success",
+  colorWarning: "--mk-warning",
+  colorDanger: "--mk-danger",
   radius: "--mk-radius",
+  shadow: "--mk-shadow",
   fontFamily: "--mk-font"
 };
 function tokensToStyle(tokens) {
@@ -258,6 +391,99 @@ function describeUsageTerm(term, locale) {
   }
   return parts.join(", ");
 }
+
+// src/lib/sample-data.ts
+var SAMPLE_PLANS = [
+  {
+    id: "sample_free",
+    name: "Starter",
+    description: "Evaluate the platform and model your catalog",
+    pricing: [{ type: "flat", amount: 0, currency: "USD", interval: "monthly" }],
+    entitlements: [
+      { featureKey: "max_customers", featureDisplayName: "Tracked customers", type: "limit", value: 100 },
+      { featureKey: "api_access", featureDisplayName: "REST & GraphQL API", type: "boolean", value: true },
+      { featureKey: "metering", featureDisplayName: "Usage metering", type: "boolean", value: true }
+    ]
+  },
+  {
+    id: "sample_pro",
+    name: "Growth",
+    description: "Product-led monetization at scale",
+    pricing: [{ type: "flat", amount: 49900, currency: "USD", interval: "monthly" }],
+    entitlements: [
+      { featureKey: "max_customers", featureDisplayName: "Tracked customers", type: "limit", value: 1e4 },
+      { featureKey: "stripe", featureDisplayName: "Stripe integration", type: "boolean", value: true },
+      { featureKey: "experiments", featureDisplayName: "Experiments & A/B testing", type: "boolean", value: true },
+      { featureKey: "widgets", featureDisplayName: "Embeddable widgets", type: "boolean", value: true }
+    ]
+  },
+  {
+    id: "sample_scale",
+    name: "Scale",
+    description: "Volume-based capacity pricing",
+    pricing: [
+      { type: "flat", amount: 99900, currency: "USD", interval: "monthly" },
+      {
+        type: "usage",
+        amount: 0,
+        currency: "USD",
+        interval: "monthly",
+        meterId: "sample_mtc",
+        meterDisplayName: "Tracked customers",
+        includedUnits: 25e3,
+        tierMode: "graduated",
+        tieredPricing: [
+          { upTo: 1e5, unitPrice: 0.012 },
+          { upTo: null, unitPrice: 6e-3 }
+        ]
+      }
+    ],
+    entitlements: [
+      { featureKey: "everything_pro", featureDisplayName: "Everything in Growth", type: "boolean", value: true },
+      { featureKey: "approvals", featureDisplayName: "Approval workflows", type: "boolean", value: true }
+    ]
+  },
+  {
+    id: "sample_enterprise",
+    name: "Enterprise",
+    description: "Governance, scale, and advanced controls",
+    tags: ["contact_sales"],
+    pricing: [],
+    entitlements: [
+      { featureKey: "sso", featureDisplayName: "SSO / SAML", type: "boolean", value: true },
+      { featureKey: "sla", featureDisplayName: "Custom SLA", type: "boolean", value: true }
+    ]
+  }
+];
+var SAMPLE_USAGE = {
+  api_calls: { meterId: "api_calls", current: 72e3, limit: 1e5 },
+  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_PORTAL = {
+  planName: "Growth",
+  meterIds: ["api_calls", "seats"]
+};
+var SAMPLE_NOTICE_TEXT = "Sample data for illustration only \u2014 define plans and products to show live values.";
+var noticeStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  border: "1px dashed var(--mk-warning)",
+  borderRadius: "var(--mk-radius)",
+  background: "color-mix(in srgb, var(--mk-warning) 12%, transparent)",
+  color: "var(--mk-card-fg)",
+  fontFamily: "var(--mk-font)",
+  fontSize: "0.75rem",
+  padding: "0.5rem 0.75rem"
+};
+function SampleNotice({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "note", "data-mk-component": "sample-notice", style: noticeStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { color: "var(--mk-warning)", fontWeight: 700 }, children: "\u25CF" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: children ?? SAMPLE_NOTICE_TEXT })
+  ] });
+}
 var wrapperStyle = {
   display: "grid",
   gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
@@ -279,7 +505,9 @@ function PricingTable({
   highlightPlan,
   locale,
   onSelectPlan,
-  onContactSales
+  onContactSales,
+  sampleWhenEmpty = true,
+  disclaimer
 }) {
   const { client, tokens } = useMonetizeKit();
   const [plans, setPlans] = react.useState(plansProp ?? null);
@@ -305,68 +533,84 @@ function PricingTable({
   if (!plans) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-busy": "true", style: { color: "var(--mk-muted)" }, children: "Loading pricing\u2026" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...tokensToStyle(tokens), ...wrapperStyle }, "data-mk-component": "pricing-table", children: plans.map((plan) => {
-    const price = describePlanPrice(plan, locale);
-    const highlighted = highlightPlan != null && plan.name.toLowerCase() === highlightPlan.toLowerCase();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          ...cardBase,
-          borderColor: highlighted ? "var(--mk-primary)" : "var(--mk-border)",
-          borderWidth: highlighted ? 2 : 1
-        },
-        "data-mk-plan": plan.name,
-        "data-mk-highlighted": highlighted ? "true" : void 0,
-        children: [
-          highlighted ? /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
+  const isSample = plans.length === 0 && sampleWhenEmpty;
+  const effectivePlans = isSample ? SAMPLE_PLANS : plans;
+  if (effectivePlans.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--mk-muted)" }, children: "No plans available." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: { ...tokensToStyle(tokens), display: "flex", flexDirection: "column", gap: "1rem" },
+      "data-mk-component": "pricing-table",
+      "data-mk-sample": isSample ? "true" : void 0,
+      children: [
+        isSample ? /* @__PURE__ */ jsxRuntime.jsx(SampleNotice, { children: disclaimer }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: wrapperStyle, children: effectivePlans.map((plan) => {
+          const price = describePlanPrice(plan, locale);
+          const highlighted = highlightPlan != null && plan.name.toLowerCase() === highlightPlan.toLowerCase();
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
               style: {
-                alignSelf: "flex-start",
-                background: "var(--mk-primary)",
-                color: "var(--mk-primary-fg)",
-                borderRadius: "var(--mk-radius)",
-                padding: "0.125rem 0.5rem",
-                fontSize: "0.75rem",
-                fontWeight: 600
+                ...cardBase,
+                borderColor: highlighted ? "var(--mk-primary)" : "var(--mk-border)",
+                borderWidth: highlighted ? 2 : 1
               },
-              children: "Most Popular"
-            }
-          ) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 700 }, children: plan.name }),
-          plan.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "var(--mk-muted)", fontSize: "0.875rem" }, children: plan.description }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "2rem", fontWeight: 700 }, children: price.contactSales ? "Custom" : price.headline }),
-            price.caption ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--mk-muted)", fontSize: "0.875rem" }, children: price.caption }) : null
-          ] }),
-          plan.entitlements && plan.entitlements.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { margin: 0, paddingLeft: "1rem", color: "var(--mk-fg)", fontSize: "0.875rem" }, children: plan.entitlements.slice(0, 6).map((e) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-            e.featureDisplayName,
-            e.type !== "boolean" ? `: ${String(e.value)}` : ""
-          ] }, e.featureKey)) }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => price.contactSales ? onContactSales?.(plan.id) : onSelectPlan?.(plan.id),
-              style: {
-                marginTop: "auto",
-                background: "var(--mk-primary)",
-                color: "var(--mk-primary-fg)",
-                border: "none",
-                borderRadius: "var(--mk-radius)",
-                padding: "0.625rem 1rem",
-                fontWeight: 600,
-                cursor: "pointer"
-              },
-              children: price.contactSales ? "Contact Sales" : "Get started"
-            }
-          )
-        ]
-      },
-      plan.id
-    );
-  }) });
+              "data-mk-plan": plan.name,
+              "data-mk-highlighted": highlighted ? "true" : void 0,
+              children: [
+                highlighted ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      alignSelf: "flex-start",
+                      background: "var(--mk-primary)",
+                      color: "var(--mk-primary-fg)",
+                      borderRadius: "var(--mk-radius)",
+                      padding: "0.125rem 0.5rem",
+                      fontSize: "0.75rem",
+                      fontWeight: 600
+                    },
+                    children: "Most Popular"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 700 }, children: plan.name }),
+                plan.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "var(--mk-muted)", fontSize: "0.875rem" }, children: plan.description }) : null,
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "2rem", fontWeight: 700 }, children: price.contactSales ? "Custom" : price.headline }),
+                  price.caption ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--mk-muted)", fontSize: "0.875rem" }, children: price.caption }) : null
+                ] }),
+                plan.entitlements && plan.entitlements.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { margin: 0, paddingLeft: "1rem", color: "var(--mk-fg)", fontSize: "0.875rem" }, children: plan.entitlements.slice(0, 6).map((e) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                  e.featureDisplayName,
+                  e.type !== "boolean" ? `: ${String(e.value)}` : ""
+                ] }, e.featureKey)) }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => price.contactSales ? onContactSales?.(plan.id) : onSelectPlan?.(plan.id),
+                    style: {
+                      marginTop: "auto",
+                      background: "var(--mk-primary)",
+                      color: "var(--mk-primary-fg)",
+                      border: "none",
+                      borderRadius: "var(--mk-radius)",
+                      padding: "0.625rem 1rem",
+                      fontWeight: 600,
+                      cursor: "pointer"
+                    },
+                    children: price.contactSales ? "Contact Sales" : "Get started"
+                  }
+                )
+              ]
+            },
+            plan.id
+          );
+        }) })
+      ]
+    }
+  );
 }
 var overlayStyle = {
   border: "1px solid var(--mk-border)",
@@ -445,7 +689,7 @@ function UsageBanner({
   const fraction = hasLimit ? Math.min(1, current / limit) : 0;
   const over = hasLimit && current > limit;
   const warn = hasLimit && fraction >= warnAt;
-  const barColor = over || warn ? "var(--mk-primary)" : "var(--mk-accent)";
+  const barColor = over ? "var(--mk-danger)" : warn ? "var(--mk-warning)" : "var(--mk-accent)";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...tokensToStyle(tokens), ...bannerStyle }, "data-mk-component": "usage-banner", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "0.875rem" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: label }),
@@ -470,73 +714,138 @@ function UsageBanner({
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: `${fraction * 100}%`, height: "100%", background: barColor } })
       }
     ) : null,
-    over ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--mk-primary)", fontSize: "0.75rem" }, children: "Over included allotment \u2014 overage billed per usage pricing." }) : null
+    over ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--mk-danger)", fontSize: "0.75rem" }, children: "Over included allotment \u2014 overage billed per usage pricing." }) : null
   ] });
 }
 var containerStyle = {
   border: "1px solid var(--mk-border)",
   borderRadius: "var(--mk-radius)",
   padding: "1.25rem",
-  background: "var(--mk-bg)",
-  color: "var(--mk-fg)",
+  background: "var(--mk-card)",
+  color: "var(--mk-card-fg)",
+  boxShadow: "var(--mk-shadow)",
   fontFamily: "var(--mk-font)",
   display: "flex",
   flexDirection: "column",
   gap: "1rem",
   maxWidth: 480
 };
+var cardStyle = {
+  border: "1px solid var(--mk-border)",
+  borderRadius: "var(--mk-radius)",
+  padding: "0.875rem 1rem",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+};
+function SampleUsageRow({
+  label,
+  current,
+  limit,
+  locale
+}) {
+  const hasLimit = typeof limit === "number" && limit > 0;
+  const fraction = hasLimit ? Math.min(1, current / limit) : 0;
+  const barColor = fraction >= 0.8 ? "var(--mk-warning)" : "var(--mk-accent)";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "0.875rem" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--mk-muted)" }, children: [
+        formatUnits(current, locale),
+        hasLimit ? ` / ${formatUnits(limit, locale)}` : ""
+      ] })
+    ] }),
+    hasLimit ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 6, borderRadius: 999, background: "var(--mk-border)", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: `${fraction * 100}%`, height: "100%", background: barColor } }) }) : null
+  ] });
+}
 function CustomerPortal({
-  planName = "Current plan",
-  meterIds = [],
+  planName,
+  meterIds,
   showCredits = true,
+  sample = false,
+  disclaimer,
+  showBranding = false,
   locale,
   currency = "USD",
   onManageBilling
 }) {
   const { tokens } = useMonetizeKit();
   const credits = useCredits();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...tokensToStyle(tokens), ...containerStyle }, "data-mk-component": "customer-portal", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.75rem", color: "var(--mk-muted)" }, children: "Plan" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "1.125rem", fontWeight: 700 }, children: planName })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onManageBilling,
-          style: {
-            background: "var(--mk-primary)",
-            color: "var(--mk-primary-fg)",
-            border: "none",
-            borderRadius: "var(--mk-radius)",
-            padding: "0.5rem 0.875rem",
-            fontWeight: 600,
-            cursor: "pointer"
-          },
-          children: "Manage billing"
-        }
-      )
-    ] }),
-    meterIds.map((meterId) => /* @__PURE__ */ jsxRuntime.jsx(UsageBanner, { meterId, label: meterId, locale }, meterId)),
-    showCredits ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          border: "1px solid var(--mk-border)",
-          borderRadius: "var(--mk-radius)",
-          padding: "0.875rem 1rem",
-          display: "flex",
-          justifyContent: "space-between"
-        },
-        children: [
+  const resolvedPlanName = planName ?? (sample ? SAMPLE_PORTAL.planName : "Current plan");
+  const resolvedMeterIds = meterIds ?? (sample ? [...SAMPLE_PORTAL.meterIds] : []);
+  const creditBalance = sample ? SAMPLE_CREDITS.balance : credits.balance;
+  const creditCurrency = sample ? SAMPLE_CREDITS.currency : credits.currency;
+  const creditLoading = sample ? false : credits.loading;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: { ...tokensToStyle(tokens), ...containerStyle },
+      "data-mk-component": "customer-portal",
+      "data-mk-sample": sample ? "true" : void 0,
+      children: [
+        sample ? /* @__PURE__ */ jsxRuntime.jsx(SampleNotice, { children: disclaimer }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: "1rem" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.75rem", color: "var(--mk-muted)" }, children: "Plan" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginTop: "0.125rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1.125rem", fontWeight: 700 }, children: resolvedPlanName }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "0.6875rem",
+                    fontWeight: 600,
+                    color: "var(--mk-success)",
+                    border: "1px solid var(--mk-success)",
+                    borderRadius: 999,
+                    padding: "0.0625rem 0.5rem"
+                  },
+                  children: "Active"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onManageBilling,
+              style: {
+                background: "var(--mk-primary)",
+                color: "var(--mk-primary-fg)",
+                border: "none",
+                borderRadius: "var(--mk-radius)",
+                padding: "0.5rem 0.875rem",
+                fontWeight: 600,
+                cursor: "pointer",
+                whiteSpace: "nowrap"
+              },
+              children: "Manage billing"
+            }
+          )
+        ] }),
+        sample ? resolvedMeterIds.map((meterId) => {
+          const usage = SAMPLE_USAGE[meterId];
+          if (!usage) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            SampleUsageRow,
+            {
+              label: meterId,
+              current: usage.current,
+              limit: usage.limit,
+              locale
+            },
+            meterId
+          );
+        }) : resolvedMeterIds.map((meterId) => /* @__PURE__ */ jsxRuntime.jsx(UsageBanner, { meterId, label: meterId, locale }, meterId)),
+        showCredits ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...cardStyle, flexDirection: "row", justifyContent: "space-between" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Credits" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--mk-muted)" }, children: credits.loading ? "\u2026" : formatMoney(credits.balance, credits.currency ?? currency, locale) })
-        ]
-      }
-    ) : null
-  ] });
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--mk-muted)" }, children: creditLoading ? "\u2026" : formatMoney(creditBalance, creditCurrency ?? currency, locale) })
+        ] }) : null,
+        showBranding ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", fontSize: "0.625rem", color: "var(--mk-muted)" }, children: "Powered by MonetizeKit" }) : null
+      ]
+    }
+  );
 }
 function EntitlementGate({
   feature,
@@ -555,7 +864,14 @@ exports.MonetizeKitClient = MonetizeKitClient;
 exports.MonetizeKitProvider = MonetizeKitProvider;
 exports.Paywall = Paywall;
 exports.PricingTable = PricingTable;
+exports.SAMPLE_CREDITS = SAMPLE_CREDITS;
+exports.SAMPLE_NOTICE_TEXT = SAMPLE_NOTICE_TEXT;
+exports.SAMPLE_PLANS = SAMPLE_PLANS;
+exports.SAMPLE_PORTAL = SAMPLE_PORTAL;
+exports.SAMPLE_USAGE = SAMPLE_USAGE;
+exports.SampleNotice = SampleNotice;
 exports.THEME_PRESETS = THEME_PRESETS;
+exports.THEME_PRESET_NAMES = THEME_PRESET_NAMES;
 exports.UsageBanner = UsageBanner;
 exports.describePlanPrice = describePlanPrice;
 exports.describeUsageTerm = describeUsageTerm;