@locusgraph/blocks 0.2.0 → 0.3.1

package/dist/skeletons/wallet-skeleton.js

@@ -0,0 +1,84 @@
+import { c as _c } from "react/compiler-runtime";
+import { RuleGridCell, RuleGridLabel, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "@locusgraph/components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function WalletSkeleton(t0) {
+  const $ = _c(7);
+  const {
+    grants: t1
+  } = t0;
+  const grants = t1 === undefined ? 1 : t1;
+  const count = Math.max(0, Math.floor(grants));
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      className: "flex min-h-6 items-center justify-between",
+      children: /*#__PURE__*/_jsx(RuleGridLabel, {
+        children: "Prepaid credits"
+      })
+    });
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+  let t3;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      className: "flex flex-col gap-1",
+      "aria-hidden": "true",
+      children: /*#__PURE__*/_jsx(SkeletonBar, {
+        className: "h-9 w-32"
+      })
+    });
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== count) {
+    t4 = /*#__PURE__*/_jsx("ul", {
+      className: "flex flex-col divide-y divide-line",
+      "aria-hidden": "true",
+      children: Array.from({
+        length: count
+      }, _temp)
+    });
+    $[2] = count;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: "Loading credits\u2026"
+    });
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] !== t4) {
+    t6 = /*#__PURE__*/_jsxs(RuleGridCell, {
+      "data-slot": "wallet-skeleton",
+      ...skeletonRootProps,
+      className: "gap-4",
+      children: [t2, t3, t4, t5]
+    });
+    $[5] = t4;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  return t6;
+}
+function _temp(_, index) {
+  return /*#__PURE__*/_jsxs("li", {
+    "data-slot": "wallet-grant-skeleton",
+    className: "flex justify-between gap-4 py-2",
+    children: [/*#__PURE__*/_jsx(SkeletonBar, {
+      className: "h-4 w-24"
+    }), /*#__PURE__*/_jsx(SkeletonBar, {
+      className: "h-4 w-40"
+    })]
+  }, index);
+}

package/dist/types.d.ts

@@ -1,10 +1,11 @@
 export type { LinkComponent } from "@locusgraph/components";
 export type QuotaPeriod = "month" | "lifetime";
-export type Quota = {
+export type QuotaData = {
     key: string;
     period: QuotaPeriod;
     used: number;
     included: number;
+    label?: string;
 };
 export type CreditPack = {
     id: string;
@@ -16,9 +17,12 @@ export type WalletGrant = {
     remainingMicroUsd: number;
     expiresAt: string | null;
 };
+export type PlanInterval = "month" | "year";
 export type PlanOffer = {
     name: string;
     price: string;
+    amountCents?: number;
+    interval?: PlanInterval;
     points: string[];
     current: boolean;
 };

package/dist/types.js

@@ -1,3 +1,3 @@
 export function periodLabel(period) {
-    return period === "month" ? "this month" : "lifetime";
+  return period === "month" ? "this month" : "lifetime";
 }

package/dist/usage/quota.d.ts

@@ -0,0 +1,4 @@
+import { type QuotaData } from "../types.js";
+export declare function Quota({ quota }: {
+    quota: QuotaData;
+}): import("react").JSX.Element;

package/dist/usage/quota.js

@@ -0,0 +1,203 @@
+import { c as _c } from "react/compiler-runtime";
+import { Progress } from "@locusgraph/components";
+import { formatCount, quotaPercent, quotaStatus } from "@locusgraph/utils";
+import { periodLabel } from "../types.js";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const statusIndicator = {
+  ok: "",
+  near: "[&_[data-slot=progress-indicator]]:bg-warn",
+  over: "[&_[data-slot=progress-indicator]]:bg-destructive"
+};
+function QuotaStatusNote(t0) {
+  const $ = _c(8);
+  const {
+    quota
+  } = t0;
+  const status = quotaStatus(quota);
+  if (status === "over") {
+    const t1 = quota.used - quota.included;
+    let t2;
+    if ($[0] !== t1) {
+      t2 = formatCount(t1);
+      $[0] = t1;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    let t3;
+    if ($[2] !== t2) {
+      t3 = /*#__PURE__*/_jsxs("span", {
+        className: "font-medium text-destructive",
+        children: [t2, " over"]
+      });
+      $[2] = t2;
+      $[3] = t3;
+    } else {
+      t3 = $[3];
+    }
+    return t3;
+  }
+  if (status === "near") {
+    let t1;
+    if ($[4] !== quota) {
+      t1 = quotaPercent(quota);
+      $[4] = quota;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    let t2;
+    if ($[6] !== t1) {
+      t2 = /*#__PURE__*/_jsxs("span", {
+        className: "font-medium text-warn",
+        children: [t1, "%"]
+      });
+      $[6] = t1;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    return t2;
+  }
+  return null;
+}
+export function Quota(t0) {
+  const $ = _c(33);
+  const {
+    quota
+  } = t0;
+  let t1;
+  if ($[0] !== quota) {
+    t1 = quotaPercent(quota);
+    $[0] = quota;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const percent = t1;
+  const name = quota.label ?? quota.key;
+  let t2;
+  if ($[2] !== quota) {
+    t2 = quotaStatus(quota);
+    $[2] = quota;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const t3 = quota.label ? "text-muted-foreground" : "font-mono text-muted-foreground";
+  let t4;
+  if ($[4] !== name || $[5] !== t3) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      className: t3,
+      children: name
+    });
+    $[4] = name;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== quota.used) {
+    t5 = formatCount(quota.used);
+    $[7] = quota.used;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== quota.included) {
+    t6 = formatCount(quota.included);
+    $[9] = quota.included;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== quota.period) {
+    t7 = periodLabel(quota.period);
+    $[11] = quota.period;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+    t8 = /*#__PURE__*/_jsxs("span", {
+      className: "font-medium text-foreground",
+      children: [t5, " of ", t6, " ", t7]
+    });
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  let t9;
+  if ($[17] !== quota) {
+    t9 = /*#__PURE__*/_jsx(QuotaStatusNote, {
+      quota: quota
+    });
+    $[17] = quota;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== t8 || $[20] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("span", {
+      className: "flex items-baseline gap-2 tabular-nums",
+      children: [t8, t9]
+    });
+    $[19] = t8;
+    $[20] = t9;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  let t11;
+  if ($[22] !== t10 || $[23] !== t4) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 text-sm",
+      children: [t4, t10]
+    });
+    $[22] = t10;
+    $[23] = t4;
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  const t12 = `${name} ${percent}% of quota`;
+  const t13 = statusIndicator[quotaStatus(quota)];
+  let t14;
+  if ($[25] !== percent || $[26] !== t12 || $[27] !== t13) {
+    t14 = /*#__PURE__*/_jsx(Progress, {
+      value: percent,
+      "aria-label": t12,
+      className: t13
+    });
+    $[25] = percent;
+    $[26] = t12;
+    $[27] = t13;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  let t15;
+  if ($[29] !== t11 || $[30] !== t14 || $[31] !== t2) {
+    t15 = /*#__PURE__*/_jsxs("div", {
+      "data-slot": "quota",
+      "data-status": t2,
+      className: "flex flex-col gap-2",
+      children: [t11, t14]
+    });
+    $[29] = t11;
+    $[30] = t14;
+    $[31] = t2;
+    $[32] = t15;
+  } else {
+    t15 = $[32];
+  }
+  return t15;
+}

package/dist/usage/usage-alert.d.ts

@@ -0,0 +1,11 @@
+import { type LinkComponent, type QuotaData } from "../types.js";
+type UsageAlertProps = {
+    balanceMicroUsd: number | null;
+    quotas: QuotaData[];
+    paidPlan: boolean;
+    buyCreditsHref: string;
+    upgradeHref: string;
+    linkComponent?: LinkComponent | "a";
+};
+export declare function UsageAlert({ balanceMicroUsd, quotas, paidPlan, buyCreditsHref, upgradeHref, linkComponent: Link, }: UsageAlertProps): import("react").JSX.Element | null;
+export {};

package/dist/usage/usage-alert.js

@@ -0,0 +1,222 @@
+import { c as _c } from "react/compiler-runtime";
+import { Warning as CircleAlertIcon } from "@carbon/icons-react";
+import { Alert, AlertDescription, AlertTitle, Button } from "@locusgraph/components";
+import { balanceLevel, formatCount, formatMicroUsd, quotaStatus } from "@locusgraph/utils";
+import { periodLabel } from "../types.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function attentionTitle(level, overCount) {
+  if (level === "empty") return "Out of credits";
+  if (overCount === 0) return "Credits are running low";
+  return level === "low" ? "Usage is over your plan and credits are low" : "Usage is over your plan";
+}
+const toneClasses = {
+  warn: "bg-warn/5 [&>svg]:text-warn",
+  destructive: "bg-destructive/5 text-card-foreground [&>svg]:text-destructive"
+};
+export function UsageAlert(t0) {
+  const $ = _c(49);
+  const {
+    balanceMicroUsd,
+    quotas,
+    paidPlan,
+    buyCreditsHref,
+    upgradeHref,
+    linkComponent: t1
+  } = t0;
+  const Link = t1 === undefined ? "a" : t1;
+  let T0;
+  let T1;
+  let empty;
+  let level;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let upgradeFirst;
+  if ($[0] !== balanceMicroUsd || $[1] !== paidPlan || $[2] !== quotas) {
+    t8 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      level = balanceMicroUsd === null ? "fine" : balanceLevel(balanceMicroUsd);
+      const over = quotas.filter(_temp);
+      if (level === "fine" && over.length === 0) {
+        t8 = null;
+        break bb0;
+      }
+      empty = level === "empty";
+      upgradeFirst = !paidPlan && over.length > 0;
+      T1 = Alert;
+      t5 = toneClasses[empty ? "destructive" : "warn"];
+      if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = /*#__PURE__*/_jsx(CircleAlertIcon, {});
+        $[15] = t6;
+      } else {
+        t6 = $[15];
+      }
+      t7 = /*#__PURE__*/_jsx(AlertTitle, {
+        children: attentionTitle(level, over.length)
+      });
+      T0 = AlertDescription;
+      t4 = "flex flex-col items-start gap-3";
+      t2 = "flex flex-col gap-1";
+      t3 = over.map(_temp2);
+    }
+    $[0] = balanceMicroUsd;
+    $[1] = paidPlan;
+    $[2] = quotas;
+    $[3] = T0;
+    $[4] = T1;
+    $[5] = empty;
+    $[6] = level;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = t6;
+    $[12] = t7;
+    $[13] = t8;
+    $[14] = upgradeFirst;
+  } else {
+    T0 = $[3];
+    T1 = $[4];
+    empty = $[5];
+    level = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    t5 = $[10];
+    t6 = $[11];
+    t7 = $[12];
+    t8 = $[13];
+    upgradeFirst = $[14];
+  }
+  if (t8 !== Symbol.for("react.early_return_sentinel")) {
+    return t8;
+  }
+  let t9;
+  if ($[16] !== balanceMicroUsd || $[17] !== empty || $[18] !== level) {
+    t9 = balanceMicroUsd !== null && level !== "fine" && /*#__PURE__*/_jsx("li", {
+      children: empty ? "Paid usage is paused until you add credits." : `${formatMicroUsd(balanceMicroUsd)} of credits left.`
+    });
+    $[16] = balanceMicroUsd;
+    $[17] = empty;
+    $[18] = level;
+    $[19] = t9;
+  } else {
+    t9 = $[19];
+  }
+  let t10;
+  if ($[20] !== t2 || $[21] !== t3 || $[22] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("ul", {
+      className: t2,
+      children: [t3, t9]
+    });
+    $[20] = t2;
+    $[21] = t3;
+    $[22] = t9;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] !== Link || $[25] !== paidPlan || $[26] !== upgradeFirst || $[27] !== upgradeHref) {
+    t11 = !paidPlan && /*#__PURE__*/_jsx(Button, {
+      asChild: true,
+      size: "sm",
+      variant: upgradeFirst ? "default" : "ghost",
+      children: /*#__PURE__*/_jsx(Link, {
+        href: upgradeHref,
+        children: "Upgrade to Pro"
+      })
+    });
+    $[24] = Link;
+    $[25] = paidPlan;
+    $[26] = upgradeFirst;
+    $[27] = upgradeHref;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  const t12 = upgradeFirst ? "ghost" : "default";
+  let t13;
+  if ($[29] !== Link || $[30] !== buyCreditsHref) {
+    t13 = /*#__PURE__*/_jsx(Link, {
+      href: buyCreditsHref,
+      children: "Buy credits"
+    });
+    $[29] = Link;
+    $[30] = buyCreditsHref;
+    $[31] = t13;
+  } else {
+    t13 = $[31];
+  }
+  let t14;
+  if ($[32] !== t12 || $[33] !== t13) {
+    t14 = /*#__PURE__*/_jsx(Button, {
+      asChild: true,
+      size: "sm",
+      variant: t12,
+      children: t13
+    });
+    $[32] = t12;
+    $[33] = t13;
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+  let t15;
+  if ($[35] !== t11 || $[36] !== t14) {
+    t15 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-wrap items-center gap-2",
+      children: [t11, t14]
+    });
+    $[35] = t11;
+    $[36] = t14;
+    $[37] = t15;
+  } else {
+    t15 = $[37];
+  }
+  let t16;
+  if ($[38] !== T0 || $[39] !== t10 || $[40] !== t15 || $[41] !== t4) {
+    t16 = /*#__PURE__*/_jsxs(T0, {
+      className: t4,
+      children: [t10, t15]
+    });
+    $[38] = T0;
+    $[39] = t10;
+    $[40] = t15;
+    $[41] = t4;
+    $[42] = t16;
+  } else {
+    t16 = $[42];
+  }
+  let t17;
+  if ($[43] !== T1 || $[44] !== t16 || $[45] !== t5 || $[46] !== t6 || $[47] !== t7) {
+    t17 = /*#__PURE__*/_jsxs(T1, {
+      className: t5,
+      children: [t6, t7, t16]
+    });
+    $[43] = T1;
+    $[44] = t16;
+    $[45] = t5;
+    $[46] = t6;
+    $[47] = t7;
+    $[48] = t17;
+  } else {
+    t17 = $[48];
+  }
+  return t17;
+}
+function _temp2(quota_0) {
+  return /*#__PURE__*/_jsxs("li", {
+    children: [/*#__PURE__*/_jsx("span", {
+      className: quota_0.label ? undefined : "font-mono",
+      children: quota_0.label ?? quota_0.key
+    }), " ", "is at ", formatCount(quota_0.used), " of ", formatCount(quota_0.included), " ", periodLabel(quota_0.period), "."]
+  }, quota_0.key);
+}
+function _temp(quota) {
+  return quotaStatus(quota) === "over";
+}

package/dist/usage/usage.d.ts

@@ -0,0 +1,8 @@
+import type { QuotaData } from "../types.js";
+type UsageProps = {
+    quotas: QuotaData[];
+    label?: string;
+    emptyText?: string;
+};
+export declare function Usage({ quotas, label, emptyText, }: UsageProps): import("react").JSX.Element;
+export {};

package/dist/usage/usage.js

@@ -0,0 +1,57 @@
+import { c as _c } from "react/compiler-runtime";
+import { RuleGrid, RuleGridCell, RuleGridLabel } from "@locusgraph/components";
+import { Quota } from "./quota.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Usage(t0) {
+  const $ = _c(8);
+  const {
+    quotas,
+    label: t1,
+    emptyText: t2
+  } = t0;
+  const label = t1 === undefined ? "Usage" : t1;
+  const emptyText = t2 === undefined ? "No plan includes metered usage yet." : t2;
+  let t3;
+  if ($[0] !== label) {
+    t3 = /*#__PURE__*/_jsx(RuleGridLabel, {
+      children: label
+    });
+    $[0] = label;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== emptyText || $[3] !== quotas) {
+    t4 = quotas.length > 0 ? quotas.map(_temp) : /*#__PURE__*/_jsx("p", {
+      className: "text-sm text-muted-foreground",
+      children: emptyText
+    });
+    $[2] = emptyText;
+    $[3] = quotas;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== t3 || $[6] !== t4) {
+    t5 = /*#__PURE__*/_jsx(RuleGrid, {
+      columns: 1,
+      children: /*#__PURE__*/_jsxs(RuleGridCell, {
+        className: "gap-5",
+        children: [t3, t4]
+      })
+    });
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
+}
+function _temp(quota) {
+  return /*#__PURE__*/_jsx(Quota, {
+    quota: quota
+  }, quota.key);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locusgraph/blocks",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Product sections built from @locusgraph/components: usage meters and alerts, wallet, credit packs, plan options and API keys.",
   "license": "MIT",
   "repository": {
@@ -29,16 +29,16 @@
     "provenance": true
   },
   "peerDependencies": {
-    "@locusgraph/components": "^0.1.1",
+    "@locusgraph/components": "^0.2.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@locusgraph/utils": "0.1.1",
-    "lucide-react": "^1.28.0"
+    "@carbon/icons-react": "11.89.0",
+    "@locusgraph/utils": "0.1.1"
   },
   "devDependencies": {
-    "@locusgraph/components": "0.1.1",
+    "@locusgraph/components": "0.2.1",
     "@locusgraph/config": "0.1.1",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
@@ -49,7 +49,7 @@
     "vitest": "^5.0.3"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/sources.css dist/sources.css && node ../../scripts/esm-extensions.mjs dist",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/sources.css dist/sources.css && node ../../scripts/react-compiler.mjs dist && node ../../scripts/esm-extensions.mjs dist",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run"
   }

package/dist/billing/credit-packs.d.ts

@@ -1,9 +0,0 @@
-import type { CreditPack } from "../types.js";
-type CreditPacksProps = {
-    packs: CreditPack[];
-    onBuy: (packId: string) => void;
-    pending?: boolean;
-    description?: string;
-};
-export declare function CreditPacks({ packs, onBuy, pending, description, }: CreditPacksProps): import("react").JSX.Element;
-export {};

package/dist/billing/credit-packs.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, RuleGridCell, RuleGridDescription, RuleGridLabel } from "@locusgraph/components";
-import { centsToMicroUsd, formatCents, formatMicroUsd } from "@locusgraph/utils";
-export function CreditPacks({ packs, onBuy, pending = false, description = "Pay once with Stripe. Credits never expire and never renew on their own.", }) {
-    return (_jsxs(RuleGridCell, { className: "gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(RuleGridLabel, { children: "Buy credits" }), _jsx(RuleGridDescription, { children: description })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: packs.map((pack) => (_jsxs(Button, { variant: "outline", disabled: pending, onClick: () => onBuy(pack.id), children: [_jsx("span", { className: "tabular-nums", children: formatMicroUsd(pack.amountMicroUsd) }), centsToMicroUsd(pack.priceCents) !== pack.amountMicroUsd && (_jsxs("span", { className: "text-muted-foreground tabular-nums", children: ["for ", formatCents(pack.priceCents)] }))] }, pack.id))) })] }));
-}

package/dist/billing/plan-options.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, RuleGrid, RuleGridCell, RuleGridDescription, RuleGridTitle, } from "@locusgraph/components";
-export function PlanOptions({ plans, actionFor }) {
-    return (_jsx(RuleGrid, { columns: plans.length >= 3 ? 3 : 2, children: plans.map((plan) => {
-            const action = plan.current ? null : actionFor?.(plan);
-            return (_jsxs(RuleGridCell, { "data-current": plan.current || undefined, className: "gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(RuleGridTitle, { className: "flex items-center gap-2", children: [plan.name, plan.current && _jsx(Badge, { variant: "secondary", children: "Current" })] }), _jsx(RuleGridDescription, { children: plan.price })] }), _jsx("ul", { className: "flex flex-col gap-1.5 text-sm text-muted-foreground", children: plan.points.map((point) => (_jsx("li", { children: point }, point))) }), action && _jsx("div", { className: "mt-auto", children: action })] }, plan.name));
-        }) }));
-}