@monetizekit/react 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -183,7 +183,10 @@ interface PricingTableProps {
     plans?: Plan[];
     /** Plan name to highlight as "Most Popular". */
     highlightPlan?: string;
+    /** Active billing cycle (controlled). With `showBillingToggle`, also the initial value. */
     billingCycle?: "monthly" | "annually";
+    /** Render an interactive Monthly/Yearly toggle above the cards. */
+    showBillingToggle?: boolean;
     locale?: string;
     onSelectPlan?: (planId: string) => void;
     /** Where the Contact Sales CTA links (defaults to no-op). */
@@ -196,7 +199,47 @@ interface PricingTableProps {
     /** Override the sample-data disclaimer copy. */
     disclaimer?: ReactNode;
 }
-declare function PricingTable({ plans: plansProp, highlightPlan, locale, onSelectPlan, onContactSales, sampleWhenEmpty, disclaimer, }: PricingTableProps): react.JSX.Element;
+declare function PricingTable({ plans: plansProp, highlightPlan, billingCycle, showBillingToggle, locale, onSelectPlan, onContactSales, sampleWhenEmpty, disclaimer, }: PricingTableProps): react.JSX.Element;
+
+/** A labelled group of feature keys to compare across plans. */
+interface ComparisonFeatureGroup {
+    title: string;
+    features: {
+        key: string;
+        label: string;
+    }[];
+}
+interface PricingComparisonProps {
+    /** Plans to compare; if omitted, fetched live from the publishable-key API. */
+    plans?: Plan[];
+    /**
+     * Feature groups (rows) to show. When omitted, a single "Features" group is
+     * derived from the union of the plans' entitlements.
+     */
+    groups?: ComparisonFeatureGroup[];
+    highlightPlan?: string;
+    billingCycle?: "monthly" | "annually";
+    locale?: string;
+    sampleWhenEmpty?: boolean;
+    disclaimer?: ReactNode;
+}
+/**
+ * A feature-comparison table across plans (à la a "Compare plans" section).
+ * Reads live plans via the publishable key when `plans` is omitted, and falls
+ * back to illustrative sample plans (behind a disclaimer) when empty.
+ */
+declare function PricingComparison({ plans: plansProp, groups, highlightPlan, billingCycle, locale, sampleWhenEmpty, disclaimer, }: PricingComparisonProps): react.JSX.Element;
+
+interface BillingCycleToggleProps {
+    value: "monthly" | "annually";
+    onChange: (value: "monthly" | "annually") => void;
+    /** When > 0, shows a "Save N%" hint on the Yearly option. */
+    savingsPercent?: number;
+    monthlyLabel?: string;
+    annuallyLabel?: string;
+}
+/** Monthly/Yearly billing switch used above pricing cards. */
+declare function BillingCycleToggle({ value, onChange, savingsPercent, monthlyLabel, annuallyLabel, }: BillingCycleToggleProps): react.JSX.Element;
 
 interface PaywallProps {
     /** Feature key gating the content. */
@@ -207,9 +250,11 @@ interface PaywallProps {
     description?: string;
     ctaLabel?: string;
     onUpgrade?: () => void;
+    /** Always render the locked upgrade prompt (for previews, no live customer). */
+    sample?: boolean;
 }
 /** Gate content behind an entitlement, showing an upgrade prompt when locked. */
-declare function Paywall({ feature, children, title, description, ctaLabel, onUpgrade, }: PaywallProps): react.JSX.Element;
+declare function Paywall({ feature, children, title, description, ctaLabel, onUpgrade, sample, }: PaywallProps): react.JSX.Element;
 
 interface UsageBannerProps {
     /** Meter to display usage for. */
@@ -222,6 +267,28 @@ interface UsageBannerProps {
 /** Show current usage vs allotment for a capacity meter, with overage hint. */
 declare function UsageBanner({ meterId, label, locale, warnAt, }: UsageBannerProps): react.JSX.Element;
 
+type AlertBannerVariant = "info" | "warning" | "danger" | "neutral";
+interface BannerAction {
+    label: string;
+    onClick?: () => void;
+    variant?: "primary" | "ghost";
+}
+interface AlertBannerProps {
+    variant?: AlertBannerVariant;
+    title: string;
+    description?: ReactNode;
+    /** Optional progress fraction (0–1) rendered as a colored bar. */
+    progress?: number;
+    actions?: BannerAction[];
+    /** Optional leading icon/emoji. */
+    icon?: ReactNode;
+}
+/**
+ * A flexible in-app notification banner (usage warnings, budget reached, low
+ * credits, trial ending, …). Presentational + fully themeable via tokens.
+ */
+declare function AlertBanner({ variant, title, description, progress, actions, icon, }: AlertBannerProps): react.JSX.Element;
+
 interface CustomerPortalProps {
     /** Current plan name to display. */
     planName?: string;
@@ -317,8 +384,8 @@ interface PriceDisplay {
  * when the plan is tagged `contact_sales` or has no public price; renders a
  * "from $base + usage" headline when metered usage terms are present.
  */
-declare function describePlanPrice(plan: Plan, locale?: string): PriceDisplay;
+declare function describePlanPrice(plan: Plan, locale?: string, billingCycle?: "monthly" | "annually"): PriceDisplay;
 /** Human-readable description of a usage term's metered tiers. */
 declare function describeUsageTerm(term: PricingTerm, locale?: string): string;
 
-export { type Appearance, type CreditBalance, CustomerPortal, type CustomerPortalProps, EntitlementGate, type EntitlementGateProps, type EntitlementResult, type Invoice, MonetizeKitClient, type MonetizeKitClientConfig, type MonetizeKitContextValue, MonetizeKitProvider, type MonetizeKitProviderProps, Paywall, type PaywallProps, type Plan, type PlanEntitlement, type PriceDisplay, PricingTable, type PricingTableProps, type PricingTerm, type PricingTier, SAMPLE_CREDITS, SAMPLE_INVOICES, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_TEAM, SAMPLE_USAGE, SampleNotice, type SampleNoticeProps, THEME_PRESETS, THEME_PRESET_NAMES, type TeamMember, type ThemePresetName, type ThemeTokens, UsageBanner, type UsageBannerProps, type UsageResult, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
+export { AlertBanner, type AlertBannerProps, type AlertBannerVariant, type Appearance, type BannerAction, BillingCycleToggle, type BillingCycleToggleProps, type ComparisonFeatureGroup, type CreditBalance, CustomerPortal, type CustomerPortalProps, EntitlementGate, type EntitlementGateProps, type EntitlementResult, type Invoice, MonetizeKitClient, type MonetizeKitClientConfig, type MonetizeKitContextValue, MonetizeKitProvider, type MonetizeKitProviderProps, Paywall, type PaywallProps, type Plan, type PlanEntitlement, type PriceDisplay, PricingComparison, type PricingComparisonProps, PricingTable, type PricingTableProps, type PricingTerm, type PricingTier, SAMPLE_CREDITS, SAMPLE_INVOICES, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_TEAM, SAMPLE_USAGE, SampleNotice, type SampleNoticeProps, THEME_PRESETS, THEME_PRESET_NAMES, type TeamMember, type ThemePresetName, type ThemeTokens, UsageBanner, type UsageBannerProps, type UsageResult, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };

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) {
@@ -496,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))",
@@ -515,6 +596,8 @@ var cardBase = {
 function PricingTable({
   plans: plansProp,
   highlightPlan,
+  billingCycle,
+  showBillingToggle = false,
   locale,
   onSelectPlan,
   onContactSales,
@@ -524,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);
@@ -558,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",
@@ -624,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)",
@@ -643,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: [
@@ -729,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)",
@@ -961,6 +1311,6 @@ function EntitlementGate({
   return /* @__PURE__ */ jsx(Fragment, { children: allowed ? children : fallback });
 }
 
-export { CustomerPortal, EntitlementGate, MonetizeKitClient, MonetizeKitProvider, Paywall, 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 };
+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