@locusgraph/blocks 0.3.0 → 0.3.1

package/dist/skeletons/wallet-skeleton.js

@@ -1,6 +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";
-import { RuleGridCell, RuleGridLabel, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps, } from "@locusgraph/components";
-export function WalletSkeleton({ grants = 1 }) {
-    const count = Math.max(0, Math.floor(grants));
-    return (_jsxs(RuleGridCell, { "data-slot": "wallet-skeleton", ...skeletonRootProps, className: "gap-4", children: [_jsx("span", { className: "flex min-h-6 items-center justify-between", children: _jsx(RuleGridLabel, { children: "Prepaid credits" }) }), _jsx("div", { className: "flex flex-col gap-1", "aria-hidden": "true", children: _jsx(SkeletonBar, { className: "h-9 w-32" }) }), _jsx("ul", { className: "flex flex-col divide-y divide-line", "aria-hidden": "true", children: Array.from({ length: count }, (_, index) => (_jsxs("li", { "data-slot": "wallet-grant-skeleton", className: "flex justify-between gap-4 py-2", children: [_jsx(SkeletonBar, { className: "h-4 w-24" }), _jsx(SkeletonBar, { className: "h-4 w-40" })] }, index))) }), _jsx(SkeletonLoadingLabel, { children: "Loading credits\u2026" })] }));
+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.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.js

@@ -1,24 +1,203 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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",
+  ok: "",
+  near: "[&_[data-slot=progress-indicator]]:bg-warn",
+  over: "[&_[data-slot=progress-indicator]]:bg-destructive"
 };
-function QuotaStatusNote({ quota }) {
-    const status = quotaStatus(quota);
-    if (status === "over") {
-        return (_jsxs("span", { className: "font-medium text-destructive", children: [formatCount(quota.used - quota.included), " over"] }));
+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];
     }
-    if (status === "near") {
-        return _jsxs("span", { className: "font-medium text-warn", children: [quotaPercent(quota), "%"] });
+    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 null;
+    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({ quota }) {
-    const percent = quotaPercent(quota);
-    const name = quota.label ?? quota.key;
-    return (_jsxs("div", { "data-slot": "quota", "data-status": quotaStatus(quota), className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 text-sm", children: [_jsx("span", { className: quota.label ? "text-muted-foreground" : "font-mono text-muted-foreground", children: name }), _jsxs("span", { className: "flex items-baseline gap-2 tabular-nums", children: [_jsxs("span", { className: "font-medium text-foreground", children: [formatCount(quota.used), " of ", formatCount(quota.included), " ", periodLabel(quota.period)] }), _jsx(QuotaStatusNote, { quota: quota })] })] }), _jsx(Progress, { value: percent, "aria-label": `${name} ${percent}% of quota`, className: statusIndicator[quotaStatus(quota)] })] }));
+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.js

@@ -1,29 +1,222 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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";
+  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",
+  warn: "bg-warn/5 [&>svg]:text-warn",
+  destructive: "bg-destructive/5 text-card-foreground [&>svg]:text-destructive"
 };
-export function UsageAlert({ balanceMicroUsd, quotas, paidPlan, buyCreditsHref, upgradeHref, linkComponent: Link = "a", }) {
-    const level = balanceMicroUsd === null ? "fine" : balanceLevel(balanceMicroUsd);
-    const over = quotas.filter((quota) => quotaStatus(quota) === "over");
-    if (level === "fine" && over.length === 0)
-        return null;
-    const empty = level === "empty";
-    const upgradeFirst = !paidPlan && over.length > 0;
-    return (_jsxs(Alert, { className: toneClasses[empty ? "destructive" : "warn"], children: [_jsx(CircleAlertIcon, {}), _jsx(AlertTitle, { children: attentionTitle(level, over.length) }), _jsxs(AlertDescription, { className: "flex flex-col items-start gap-3", children: [_jsxs("ul", { className: "flex flex-col gap-1", children: [over.map((quota) => (_jsxs("li", { children: [_jsx("span", { className: quota.label ? undefined : "font-mono", children: quota.label ?? quota.key }), " ", "is at ", formatCount(quota.used), " of ", formatCount(quota.included), " ", periodLabel(quota.period), "."] }, quota.key))), balanceMicroUsd !== null && level !== "fine" && (_jsx("li", { children: empty
-                                    ? "Paid usage is paused until you add credits."
-                                    : `${formatMicroUsd(balanceMicroUsd)} of credits left.` }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [!paidPlan && (_jsx(Button, { asChild: true, size: "sm", variant: upgradeFirst ? "default" : "ghost", children: _jsx(Link, { href: upgradeHref, children: "Upgrade to Pro" }) })), _jsx(Button, { asChild: true, size: "sm", variant: upgradeFirst ? "ghost" : "default", children: _jsx(Link, { href: buyCreditsHref, children: "Buy credits" }) })] })] })] }));
+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.js

@@ -1,6 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { RuleGrid, RuleGridCell, RuleGridLabel } from "@locusgraph/components";
 import { Quota } from "./quota.js";
-export function Usage({ quotas, label = "Usage", emptyText = "No plan includes metered usage yet.", }) {
-    return (_jsx(RuleGrid, { columns: 1, children: _jsxs(RuleGridCell, { className: "gap-5", children: [_jsx(RuleGridLabel, { children: label }), quotas.length > 0 ? (quotas.map((quota) => _jsx(Quota, { quota: quota }, quota.key))) : (_jsx("p", { className: "text-sm text-muted-foreground", children: emptyText }))] }) }));
+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.3.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,7 +29,7 @@
     "provenance": true
   },
   "peerDependencies": {
-    "@locusgraph/components": "^0.2.0",
+    "@locusgraph/components": "^0.2.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -38,7 +38,7 @@
     "@locusgraph/utils": "0.1.1"
   },
   "devDependencies": {
-    "@locusgraph/components": "0.2.0",
+    "@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"
   }