@monetizekit/react 0.1.0

package/README.md

@@ -0,0 +1,63 @@
+# @monetizekit/react
+
+Themeable React components and hooks for [MonetizeKit](https://monetizekit.app) —
+the canonical UI library that MonetizeKit's own marketing site and dashboard
+dogfood, and that customers embed in their SaaS apps.
+
+## Install
+
+```bash
+pnpm add @monetizekit/react
+```
+
+## Quick start
+
+```tsx
+import { MonetizeKitProvider, PricingTable } from "@monetizekit/react";
+
+export function Pricing() {
+  return (
+    <MonetizeKitProvider
+      publishableKey="pk_live_xxx"
+      baseUrl="https://app.monetizekit.app"
+      appearance="memphis"
+    >
+      <PricingTable highlightPlan="Pro" />
+    </MonetizeKitProvider>
+  );
+}
+```
+
+The `publishableKey` is a browser-safe `pk_*` key restricted to read-only public
+catalog reads and to the origins you allowlist (CORS) in MonetizeKit.
+
+## Components
+
+- `PricingTable` — live plans incl. graduated/volume metered pricing + Contact Sales
+- `Paywall` — gate content behind an entitlement with an upgrade prompt
+- `EntitlementGate` — conditionally render on a live entitlement check
+- `UsageBanner` — current usage vs allotment with overage hint
+- `CustomerPortal` — plan, usage meters, and credit balance
+
+## Hooks
+
+`useEntitlement(feature)`, `useUsage(meterId)`, `useCredits()`.
+
+## Theming
+
+Pass an `appearance` to the provider: a preset name (`light`, `dark`, `memphis`,
+`dashboard`) or `{ preset, tokens }` to override design tokens. Components render
+via `--mk-*` CSS custom properties so they adapt to the host design system.
+
+## Development
+
+```bash
+pnpm install
+pnpm test          # vitest + RTL
+pnpm build         # tsup (ESM + CJS + d.ts)
+pnpm storybook     # local component gallery
+pnpm build-storybook
+```
+
+The Storybook is deployed as the living component gallery at
+`ui.monetizekit.{dev,delivery,app}`.

package/dist/index.cjs

@@ -0,0 +1,571 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/provider.tsx
+
+// src/lib/client.ts
+var MonetizeKitClient = class {
+  constructor(config) {
+    this.config = config;
+  }
+  async get(path) {
+    const headers = {
+      Authorization: `Bearer ${this.config.publishableKey}`
+    };
+    if (this.config.customerToken) {
+      headers["X-Customer-Token"] = this.config.customerToken;
+    }
+    const res = await fetch(`${this.config.baseUrl}${path}`, { headers });
+    if (!res.ok) {
+      throw new Error(`MonetizeKit API ${res.status} for ${path}`);
+    }
+    return await res.json();
+  }
+  listPlans() {
+    return this.get("/api/v1/plans?page=1&pageSize=100");
+  }
+  getEntitlement(customerId, featureKey) {
+    return this.get(`/api/v1/entitlements/${customerId}/${encodeURIComponent(featureKey)}`);
+  }
+  getUsage(customerId, meterId) {
+    return this.get(`/api/v1/usage/${customerId}/${encodeURIComponent(meterId)}`);
+  }
+  getCredits(customerId) {
+    return this.get(`/api/v1/credits/${customerId}`);
+  }
+};
+
+// src/theme/tokens.ts
+var THEME_PRESETS = {
+  light: {
+    colorBackground: "#ffffff",
+    colorForeground: "#0a0a0a",
+    colorMuted: "#71717a",
+    colorPrimary: "#4f46e5",
+    colorPrimaryForeground: "#ffffff",
+    colorAccent: "#10b981",
+    colorBorder: "#e4e4e7",
+    radius: "0.5rem",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  },
+  dark: {
+    colorBackground: "#0a0a0a",
+    colorForeground: "#fafafa",
+    colorMuted: "#a1a1aa",
+    colorPrimary: "#6366f1",
+    colorPrimaryForeground: "#0a0a0a",
+    colorAccent: "#10b981",
+    colorBorder: "#27272a",
+    radius: "0.5rem",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  },
+  memphis: {
+    colorBackground: "#FFFEF2",
+    colorForeground: "#1a1a1a",
+    colorMuted: "#5b5b52",
+    colorPrimary: "#FF6B35",
+    colorPrimaryForeground: "#1a1a1a",
+    colorAccent: "#00D9FF",
+    colorBorder: "#1a1a1a",
+    radius: "0",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  },
+  dashboard: {
+    colorBackground: "oklch(1 0 0)",
+    colorForeground: "oklch(0.145 0 0)",
+    colorMuted: "oklch(0.556 0 0)",
+    colorPrimary: "oklch(0.205 0 0)",
+    colorPrimaryForeground: "oklch(0.985 0 0)",
+    colorAccent: "oklch(0.97 0 0)",
+    colorBorder: "oklch(0.922 0 0)",
+    radius: "0.625rem",
+    fontFamily: "Geist, system-ui, sans-serif"
+  }
+};
+function resolveTokens(appearance = "light") {
+  if (typeof appearance === "string") {
+    return THEME_PRESETS[appearance];
+  }
+  const base = THEME_PRESETS[appearance.preset ?? "light"];
+  return { ...base, ...appearance.tokens };
+}
+var TOKEN_TO_CSS_VAR = {
+  colorBackground: "--mk-bg",
+  colorForeground: "--mk-fg",
+  colorMuted: "--mk-muted",
+  colorPrimary: "--mk-primary",
+  colorPrimaryForeground: "--mk-primary-fg",
+  colorAccent: "--mk-accent",
+  colorBorder: "--mk-border",
+  radius: "--mk-radius",
+  fontFamily: "--mk-font"
+};
+function tokensToStyle(tokens) {
+  const style = {};
+  Object.keys(tokens).forEach((key) => {
+    style[TOKEN_TO_CSS_VAR[key]] = String(tokens[key]);
+  });
+  return style;
+}
+var MonetizeKitContext = react.createContext(null);
+function MonetizeKitProvider({
+  publishableKey,
+  baseUrl,
+  customerToken,
+  customerId,
+  appearance = "light",
+  children
+}) {
+  const value = react.useMemo(() => {
+    return {
+      client: new MonetizeKitClient({ publishableKey, baseUrl, customerToken }),
+      customerId,
+      appearance,
+      tokens: resolveTokens(appearance)
+    };
+  }, [publishableKey, baseUrl, customerToken, customerId, appearance]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MonetizeKitContext.Provider, { value, children });
+}
+function useMonetizeKit() {
+  const ctx = react.useContext(MonetizeKitContext);
+  if (!ctx) {
+    throw new Error("useMonetizeKit must be used within a <MonetizeKitProvider>.");
+  }
+  return ctx;
+}
+function useAsync(run, deps) {
+  const [state, setState] = react.useState({
+    data: null,
+    loading: true,
+    error: null
+  });
+  react.useEffect(() => {
+    let active = true;
+    const promise = run();
+    if (!promise) {
+      setState({ data: null, loading: false, error: null });
+      return;
+    }
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+    promise.then((data) => {
+      if (active) setState({ data, loading: false, error: null });
+    }).catch((error) => {
+      if (active) {
+        setState({
+          data: null,
+          loading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        });
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, deps);
+  return state;
+}
+function useEntitlement(featureKey) {
+  const { client, customerId } = useMonetizeKit();
+  const state = useAsync(
+    () => customerId ? client.getEntitlement(customerId, featureKey) : null,
+    [client, customerId, featureKey]
+  );
+  return {
+    value: state.data?.value ?? null,
+    allowed: state.data?.allowed ?? false,
+    loading: state.loading,
+    error: state.error
+  };
+}
+function useUsage(meterId) {
+  const { client, customerId } = useMonetizeKit();
+  const state = useAsync(
+    () => customerId ? client.getUsage(customerId, meterId) : null,
+    [client, customerId, meterId]
+  );
+  return {
+    current: state.data?.current ?? 0,
+    limit: state.data?.limit ?? null,
+    loading: state.loading,
+    error: state.error
+  };
+}
+function useCredits() {
+  const { client, customerId } = useMonetizeKit();
+  const state = useAsync(
+    () => customerId ? client.getCredits(customerId) : null,
+    [client, customerId]
+  );
+  return {
+    balance: state.data?.balance ?? 0,
+    currency: state.data?.currency,
+    loading: state.loading,
+    error: state.error
+  };
+}
+
+// src/lib/format.ts
+function formatMoney(amount, currency = "USD", locale) {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: Number.isInteger(amount) ? 0 : 2,
+    maximumFractionDigits: amount < 1 ? 3 : 2
+  }).format(amount);
+}
+function formatUnits(value, locale) {
+  return new Intl.NumberFormat(locale, {
+    notation: value >= 1e4 ? "compact" : "standard",
+    maximumFractionDigits: 1
+  }).format(value);
+}
+var INTERVAL_SUFFIX = {
+  monthly: "/mo",
+  annually: "/yr",
+  one_time: ""
+};
+function describePlanPrice(plan, locale) {
+  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 hasUsage = pricing.some((t) => t.type === "usage");
+  const currency = base?.currency ?? pricing[0]?.currency ?? "USD";
+  const interval = base?.interval ?? pricing[0]?.interval ?? "monthly";
+  const baseAmount = base?.amount ?? 0;
+  const headline = `${formatMoney(baseAmount, currency, locale)}${INTERVAL_SUFFIX[interval]}`;
+  return {
+    headline,
+    caption: hasUsage ? "+ usage" : void 0,
+    contactSales: false
+  };
+}
+function describeUsageTerm(term, locale) {
+  const parts = [];
+  if (term.includedUnits && term.includedUnits > 0) {
+    parts.push(`${formatUnits(term.includedUnits, locale)} ${term.meterDisplayName ?? "units"} included`);
+  }
+  const tiers = term.tieredPricing ?? [];
+  if (tiers.length > 0) {
+    const first = tiers[0];
+    parts.push(
+      `then ${formatMoney(first.unitPrice, term.currency, locale)}/unit${term.tierMode === "volume" ? " (volume)" : ""}`
+    );
+  }
+  return parts.join(", ");
+}
+var wrapperStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
+  gap: "1.5rem",
+  background: "var(--mk-bg)",
+  color: "var(--mk-fg)",
+  fontFamily: "var(--mk-font)"
+};
+var cardBase = {
+  border: "1px solid var(--mk-border)",
+  borderRadius: "var(--mk-radius)",
+  padding: "1.5rem",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem"
+};
+function PricingTable({
+  plans: plansProp,
+  highlightPlan,
+  locale,
+  onSelectPlan,
+  onContactSales
+}) {
+  const { client, tokens } = useMonetizeKit();
+  const [plans, setPlans] = react.useState(plansProp ?? null);
+  const [error, setError] = react.useState(null);
+  react.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__ */ jsxRuntime.jsx("div", { role: "alert", style: { color: "var(--mk-muted)" }, children: "Unable to load pricing." });
+  }
+  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",
+            {
+              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)",
+  borderRadius: "var(--mk-radius)",
+  padding: "2rem",
+  textAlign: "center",
+  background: "var(--mk-bg)",
+  color: "var(--mk-fg)",
+  fontFamily: "var(--mk-font)",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem",
+  alignItems: "center"
+};
+function Paywall({
+  feature,
+  children,
+  title = "Upgrade to unlock this feature",
+  description = "This feature isn't included in your current plan.",
+  ctaLabel = "Upgrade",
+  onUpgrade
+}) {
+  const { allowed, loading } = useEntitlement(feature);
+  const { tokens } = useMonetizeKit();
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-busy": "true", style: { color: "var(--mk-muted)" }, children: "Checking access\u2026" });
+  }
+  if (allowed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...tokensToStyle(tokens), ...overlayStyle }, "data-mk-component": "paywall", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 700 }, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "var(--mk-muted)", fontSize: "0.875rem" }, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onUpgrade,
+        style: {
+          background: "var(--mk-primary)",
+          color: "var(--mk-primary-fg)",
+          border: "none",
+          borderRadius: "var(--mk-radius)",
+          padding: "0.625rem 1.25rem",
+          fontWeight: 600,
+          cursor: "pointer"
+        },
+        children: ctaLabel
+      }
+    )
+  ] });
+}
+var bannerStyle = {
+  border: "1px solid var(--mk-border)",
+  borderRadius: "var(--mk-radius)",
+  padding: "0.875rem 1rem",
+  background: "var(--mk-bg)",
+  color: "var(--mk-fg)",
+  fontFamily: "var(--mk-font)",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+};
+function UsageBanner({
+  meterId,
+  label = "Usage",
+  locale,
+  warnAt = 0.8
+}) {
+  const { current, limit, loading } = useUsage(meterId);
+  const { tokens } = useMonetizeKit();
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-busy": "true", style: { color: "var(--mk-muted)" }, children: "Loading usage\u2026" });
+  }
+  const hasLimit = typeof limit === "number" && limit > 0;
+  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)";
+  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 }),
+      /* @__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"
+        },
+        role: "progressbar",
+        "aria-valuenow": Math.round(fraction * 100),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        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
+  ] });
+}
+var containerStyle = {
+  border: "1px solid var(--mk-border)",
+  borderRadius: "var(--mk-radius)",
+  padding: "1.25rem",
+  background: "var(--mk-bg)",
+  color: "var(--mk-fg)",
+  fontFamily: "var(--mk-font)",
+  display: "flex",
+  flexDirection: "column",
+  gap: "1rem",
+  maxWidth: 480
+};
+function CustomerPortal({
+  planName = "Current plan",
+  meterIds = [],
+  showCredits = true,
+  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: [
+          /* @__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
+  ] });
+}
+function EntitlementGate({
+  feature,
+  children,
+  fallback = null,
+  loadingFallback = null
+}) {
+  const { allowed, loading } = useEntitlement(feature);
+  if (loading) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingFallback });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: allowed ? children : fallback });
+}
+
+exports.CustomerPortal = CustomerPortal;
+exports.EntitlementGate = EntitlementGate;
+exports.MonetizeKitClient = MonetizeKitClient;
+exports.MonetizeKitProvider = MonetizeKitProvider;
+exports.Paywall = Paywall;
+exports.PricingTable = PricingTable;
+exports.THEME_PRESETS = THEME_PRESETS;
+exports.UsageBanner = UsageBanner;
+exports.describePlanPrice = describePlanPrice;
+exports.describeUsageTerm = describeUsageTerm;
+exports.formatMoney = formatMoney;
+exports.formatUnits = formatUnits;
+exports.resolveTokens = resolveTokens;
+exports.tokensToStyle = tokensToStyle;
+exports.useCredits = useCredits;
+exports.useEntitlement = useEntitlement;
+exports.useMonetizeKit = useMonetizeKit;
+exports.useUsage = useUsage;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map