@medialane/ui 0.184.0 → 0.186.0

package/dist/components/media-wallet/media-wallet-token-detail.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { WalletToken } from '../../utils/media-wallet/wallet-tokens.js';
+import { MediaWalletView } from './types.js';
+import 'react';
+import 'starknet';
+import '@medialane/sdk/starknet';
+
+declare function MediaWalletTokenDetail({ token, onNavigate, }: {
+    token: WalletToken;
+    onNavigate: (view: MediaWalletView) => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { MediaWalletTokenDetail };

package/dist/components/media-wallet/media-wallet-token-detail.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { CurrencyIcon } from "../currency-icon.js";
+import { normalizeAddress } from "@medialane/sdk";
+import { useErc20Balance } from "../../utils/media-wallet/use-erc20-balance.js";
+import { fmt, fmtUsd, rawToNumber, short, when, explorerTokenUrl } from "../../utils/media-wallet/wallet-format.js";
+import { walletActivityTitle, walletActivitySubtitle, walletActivityAmount } from "../../utils/media-wallet/wallet-activity.js";
+import { BackButton } from "./back-button.js";
+import { QuickAction } from "./quick-action.js";
+import { SectionHeader } from "./section-header.js";
+import { WalletActivityIcon } from "./wallet-activity-icon.js";
+import { useUsdPrices, usdPriceFor } from "../../utils/use-usd-prices.js";
+import { useMediaWalletApp } from "./types.js";
+function MediaWalletTokenDetail({
+  token,
+  onNavigate
+}) {
+  const { useWalletSession, provider, explorerUrl } = useMediaWalletApp();
+  const { address: walletAddress } = useWalletSession();
+  const { rawBalance: bal } = useErc20Balance(provider, token.address, walletAddress);
+  const usdPrices = useUsdPrices();
+  const price = usdPriceFor(usdPrices, token.symbol) ?? null;
+  const voyager = useMemo(() => explorerTokenUrl(explorerUrl, token.address), [explorerUrl, token.address]);
+  const heldValue = bal != null && price != null ? rawToNumber(bal, token.decimals) * price : null;
+  return /* @__PURE__ */ jsxs("main", { className: "flex flex-col gap-6 px-5 pb-8 pt-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(BackButton, { onBack: () => onNavigate({ name: "home" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-full bg-foreground/[0.06]", children: /* @__PURE__ */ jsx(CurrencyIcon, { symbol: token.symbol, size: 26 }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "font-[family-name:var(--font-display)] text-lg font-bold leading-none", children: token.name }),
+          /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: token.symbol })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "py-2 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-[family-name:var(--font-display)] text-5xl font-extrabold tracking-tight tabular-nums", children: bal === void 0 ? "\u2026" : bal === null ? "\u2014" : fmt(bal, token.decimals, 6) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 text-sm text-muted-foreground", children: [
+        token.symbol,
+        " \xB7 ",
+        heldValue != null ? fmtUsd(heldValue) : "\u2014"
+      ] }),
+      price != null && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+        fmtUsd(price),
+        " per ",
+        token.symbol
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx(
+        QuickAction,
+        {
+          label: "Send",
+          action: "offer",
+          onClick: () => onNavigate({ name: "send", token }),
+          icon: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        QuickAction,
+        {
+          label: "Receive",
+          action: "buy",
+          onClick: () => onNavigate({ name: "home" }),
+          icon: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(TokenActivity, { tokenAddress: token.address, walletAddress }),
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Details" }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col divide-y divide-border/40 rounded-2xl bg-card/40 px-4 backdrop-blur-sm", children: [
+        /* @__PURE__ */ jsx(
+          InfoRow,
+          {
+            label: "Network",
+            value: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "grid h-6 w-6 shrink-0 place-items-center rounded-full bg-foreground/[0.06]", children: /* @__PURE__ */ jsx(CurrencyIcon, { symbol: "STRK", size: 14 }) }),
+              "Starknet"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(InfoRow, { label: "Standard", value: "ERC-20" }),
+        /* @__PURE__ */ jsx(
+          InfoRow,
+          {
+            label: "Contract",
+            value: /* @__PURE__ */ jsxs("a", { href: voyager, target: "_blank", rel: "noopener noreferrer", className: "font-mono text-brand-blue hover:underline", children: [
+              short(token.address),
+              " \u2197"
+            ] })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function TokenActivity({ tokenAddress, walletAddress }) {
+  const { getClient } = useMediaWalletApp();
+  const [items, setItems] = useState(null);
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    if (!walletAddress) return;
+    const normalizedToken = normalizeAddress("STARKNET", tokenAddress);
+    getClient().api.getWalletActivity(walletAddress).then((res) => {
+      const filtered = res.data.filter((a) => (a.type === "SEND" || a.type === "RECEIVE") && a.tokenAddress && normalizeAddress("STARKNET", a.tokenAddress) === normalizedToken).slice(0, 5);
+      setItems(filtered);
+    }).catch(() => setError(true));
+  }, [walletAddress, tokenAddress, getClient]);
+  if (error || items && items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { title: "Activity" }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2", children: items === null ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: [0, 1].map((i) => /* @__PURE__ */ jsx("div", { className: "h-16 animate-pulse rounded-2xl bg-foreground/[0.04]" }, i)) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: items.map((a) => {
+      const subtitle = walletActivitySubtitle(a);
+      const amount = walletActivityAmount(a);
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-2xl bg-card/40 px-4 py-3 backdrop-blur-sm", children: [
+        /* @__PURE__ */ jsx(WalletActivityIcon, { a }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: walletActivityTitle(a) }),
+          subtitle && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
+          amount && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold tabular-nums", children: amount }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: when(a.timestamp) })
+        ] })
+      ] }, a.id);
+    }) }) })
+  ] });
+}
+function InfoRow({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium", children: value })
+  ] });
+}
+export {
+  MediaWalletTokenDetail
+};
+//# sourceMappingURL=media-wallet-token-detail.js.map

package/dist/components/media-wallet/media-wallet-token-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-wallet/media-wallet-token-detail.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { ApiWalletActivity } from \"@medialane/sdk\";\nimport { CurrencyIcon } from \"../currency-icon.js\";\nimport { normalizeAddress } from \"@medialane/sdk\";\nimport { useErc20Balance } from \"../../utils/media-wallet/use-erc20-balance.js\";\nimport { fmt, fmtUsd, rawToNumber, short, when, explorerTokenUrl } from \"../../utils/media-wallet/wallet-format.js\";\nimport { walletActivityTitle, walletActivitySubtitle, walletActivityAmount } from \"../../utils/media-wallet/wallet-activity.js\";\nimport { BackButton } from \"./back-button.js\";\nimport { QuickAction } from \"./quick-action.js\";\nimport { SectionHeader } from \"./section-header.js\";\nimport { WalletActivityIcon } from \"./wallet-activity-icon.js\";\nimport { useUsdPrices, usdPriceFor } from \"../../utils/use-usd-prices.js\";\nimport type { WalletToken } from \"../../utils/media-wallet/wallet-tokens.js\";\nimport { useMediaWalletApp, type MediaWalletView } from \"./types.js\";\n\nexport function MediaWalletTokenDetail({\n  token,\n  onNavigate,\n}: {\n  token: WalletToken;\n  onNavigate: (view: MediaWalletView) => void;\n}) {\n  const { useWalletSession, provider, explorerUrl } = useMediaWalletApp();\n  const { address: walletAddress } = useWalletSession();\n  const { rawBalance: bal } = useErc20Balance(provider, token.address, walletAddress);\n  const usdPrices = useUsdPrices();\n  const price = usdPriceFor(usdPrices, token.symbol) ?? null;\n\n  const voyager = useMemo(() => explorerTokenUrl(explorerUrl, token.address), [explorerUrl, token.address]);\n  const heldValue = bal != null && price != null ? rawToNumber(bal, token.decimals) * price : null;\n\n  return (\n    <main className=\"flex flex-col gap-6 px-5 pb-8 pt-2\">\n      <div className=\"flex items-center gap-3\">\n        <BackButton onBack={() => onNavigate({ name: \"home\" })} />\n        <div className=\"flex items-center gap-3\">\n          <div className=\"grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-full bg-foreground/[0.06]\">\n            <CurrencyIcon symbol={token.symbol} size={26} />\n          </div>\n          <div>\n            <div className=\"font-[family-name:var(--font-display)] text-lg font-bold leading-none\">{token.name}</div>\n            <div className=\"mt-0.5 text-xs text-muted-foreground\">{token.symbol}</div>\n          </div>\n        </div>\n      </div>\n\n      <section className=\"py-2 text-center\">\n        <div className=\"font-[family-name:var(--font-display)] text-5xl font-extrabold tracking-tight tabular-nums\">\n          {bal === undefined ? \"…\" : bal === null ? \"—\" : fmt(bal, token.decimals, 6)}\n        </div>\n        <div className=\"mt-2 text-sm text-muted-foreground\">\n          {token.symbol}\n          {\" · \"}\n          {heldValue != null ? fmtUsd(heldValue) : \"—\"}\n        </div>\n        {price != null && <div className=\"mt-0.5 text-xs text-muted-foreground\">{fmtUsd(price)} per {token.symbol}</div>}\n      </section>\n\n      <div className=\"grid grid-cols-2 gap-2\">\n        <QuickAction\n          label=\"Send\"\n          action=\"offer\"\n          onClick={() => onNavigate({ name: \"send\", token })}\n          icon={<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M12 19V5M5 12l7-7 7 7\" /></svg>}\n        />\n        <QuickAction\n          label=\"Receive\"\n          action=\"buy\"\n          onClick={() => onNavigate({ name: \"home\" })}\n          icon={<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M12 5v14M19 12l-7 7-7-7\" /></svg>}\n        />\n      </div>\n\n      <TokenActivity tokenAddress={token.address} walletAddress={walletAddress} />\n\n      <section>\n        <SectionHeader title=\"Details\" />\n        <div className=\"mt-2 flex flex-col divide-y divide-border/40 rounded-2xl bg-card/40 px-4 backdrop-blur-sm\">\n          <InfoRow\n            label=\"Network\"\n            value={\n              <span className=\"flex items-center gap-2\">\n                <span className=\"grid h-6 w-6 shrink-0 place-items-center rounded-full bg-foreground/[0.06]\">\n                  <CurrencyIcon symbol=\"STRK\" size={14} />\n                </span>\n                Starknet\n              </span>\n            }\n          />\n          <InfoRow label=\"Standard\" value=\"ERC-20\" />\n          <InfoRow\n            label=\"Contract\"\n            value={\n              <a href={voyager} target=\"_blank\" rel=\"noopener noreferrer\" className=\"font-mono text-brand-blue hover:underline\">\n                {short(token.address)} ↗\n              </a>\n            }\n          />\n        </div>\n      </section>\n    </main>\n  );\n}\n\nfunction TokenActivity({ tokenAddress, walletAddress }: { tokenAddress: string; walletAddress: string | null }) {\n  const { getClient } = useMediaWalletApp();\n  const [items, setItems] = useState<ApiWalletActivity[] | null>(null);\n  const [error, setError] = useState(false);\n\n  useEffect(() => {\n    if (!walletAddress) return;\n    const normalizedToken = normalizeAddress(\"STARKNET\", tokenAddress);\n    getClient()\n      .api.getWalletActivity(walletAddress)\n      .then((res) => {\n        const filtered = res.data\n          .filter((a) => (a.type === \"SEND\" || a.type === \"RECEIVE\") && a.tokenAddress && normalizeAddress(\"STARKNET\", a.tokenAddress) === normalizedToken)\n          .slice(0, 5);\n        setItems(filtered);\n      })\n      .catch(() => setError(true));\n  }, [walletAddress, tokenAddress, getClient]);\n\n  if (error || (items && items.length === 0)) return null;\n\n  return (\n    <section>\n      <SectionHeader title=\"Activity\" />\n      <div className=\"mt-2\">\n        {items === null ? (\n          <div className=\"flex flex-col gap-2\">\n            {[0, 1].map((i) => (\n              <div key={i} className=\"h-16 animate-pulse rounded-2xl bg-foreground/[0.04]\" />\n            ))}\n          </div>\n        ) : (\n          <div className=\"flex flex-col gap-2\">\n            {items.map((a) => {\n              const subtitle = walletActivitySubtitle(a);\n              const amount = walletActivityAmount(a);\n              return (\n                <div key={a.id} className=\"flex items-center gap-3 rounded-2xl bg-card/40 px-4 py-3 backdrop-blur-sm\">\n                  <WalletActivityIcon a={a} />\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"text-sm font-semibold\">{walletActivityTitle(a)}</div>\n                    {subtitle && <div className=\"truncate text-xs text-muted-foreground\">{subtitle}</div>}\n                  </div>\n                  <div className=\"shrink-0 text-right\">\n                    {amount && <div className=\"text-sm font-semibold tabular-nums\">{amount}</div>}\n                    <div className=\"text-xs text-muted-foreground\">{when(a.timestamp)}</div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nfunction InfoRow({ label, value }: { label: string; value: React.ReactNode }) {\n  return (\n    <div className=\"flex items-center justify-between py-3 text-sm\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"font-medium\">{value}</span>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/media-wallet/media-wallet.cjs

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var media_wallet_exports = {};
+__export(media_wallet_exports, {
+  MediaWallet: () => MediaWallet
+});
+module.exports = __toCommonJS(media_wallet_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_media_wallet_home = require("./media-wallet-home.js");
+var import_media_wallet_send = require("./media-wallet-send.js");
+var import_media_wallet_token_detail = require("./media-wallet-token-detail.js");
+var import_media_wallet_activity = require("./media-wallet-activity.js");
+function MediaWallet({
+  onClose,
+  initialView
+}) {
+  const [view, setView] = (0, import_react.useState)(initialView ?? { name: "home" });
+  switch (view.name) {
+    case "home":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_media_wallet_home.MediaWalletHome, { onNavigate: setView, onClose, autoOpenReceive: view.autoOpenReceive });
+    case "send":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_media_wallet_send.MediaWalletSend, { initialToken: view.token, onNavigate: setView, onDone: () => setView({ name: "home" }) });
+    case "token":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_media_wallet_token_detail.MediaWalletTokenDetail, { token: view.token, onNavigate: setView });
+    case "activity":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_media_wallet_activity.MediaWalletActivity, { onNavigate: setView });
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MediaWallet
+});
+//# sourceMappingURL=media-wallet.cjs.map

package/dist/components/media-wallet/media-wallet.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-wallet/media-wallet.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { MediaWalletView } from \"./types.js\";\nimport { MediaWalletHome } from \"./media-wallet-home.js\";\nimport { MediaWalletSend } from \"./media-wallet-send.js\";\nimport { MediaWalletTokenDetail } from \"./media-wallet-token-detail.js\";\nimport { MediaWalletActivity } from \"./media-wallet-activity.js\";\n\nexport function MediaWallet({\n  onClose,\n  initialView,\n}: {\n  onClose: () => void;\n  initialView?: MediaWalletView;\n}) {\n  const [view, setView] = useState<MediaWalletView>(initialView ?? { name: \"home\" });\n\n  switch (view.name) {\n    case \"home\":\n      return <MediaWalletHome onNavigate={setView} onClose={onClose} autoOpenReceive={view.autoOpenReceive} />;\n    case \"send\":\n      return <MediaWalletSend initialToken={view.token} onNavigate={setView} onDone={() => setView({ name: \"home\" })} />;\n    case \"token\":\n      return <MediaWalletTokenDetail token={view.token} onNavigate={setView} />;\n    case \"activity\":\n      return <MediaWalletActivity onNavigate={setView} />;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBa;AAlBb,mBAAyB;AAEzB,+BAAgC;AAChC,+BAAgC;AAChC,uCAAuC;AACvC,mCAAoC;AAE7B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,MAAM,OAAO,QAAI,uBAA0B,eAAe,EAAE,MAAM,OAAO,CAAC;AAEjF,UAAQ,KAAK,MAAM;AAAA,IACjB,KAAK;AACH,aAAO,4CAAC,4CAAgB,YAAY,SAAS,SAAkB,iBAAiB,KAAK,iBAAiB;AAAA,IACxG,KAAK;AACH,aAAO,4CAAC,4CAAgB,cAAc,KAAK,OAAO,YAAY,SAAS,QAAQ,MAAM,QAAQ,EAAE,MAAM,OAAO,CAAC,GAAG;AAAA,IAClH,KAAK;AACH,aAAO,4CAAC,2DAAuB,OAAO,KAAK,OAAO,YAAY,SAAS;AAAA,IACzE,KAAK;AACH,aAAO,4CAAC,oDAAoB,YAAY,SAAS;AAAA,EACrD;AACF;","names":[]}

package/dist/components/media-wallet/media-wallet.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MediaWalletView } from './types.cjs';
+import 'react';
+import 'starknet';
+import '@medialane/sdk/starknet';
+import '../../utils/media-wallet/wallet-tokens.cjs';
+
+declare function MediaWallet({ onClose, initialView, }: {
+    onClose: () => void;
+    initialView?: MediaWalletView;
+}): react_jsx_runtime.JSX.Element;
+
+export { MediaWallet };

package/dist/components/media-wallet/media-wallet.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MediaWalletView } from './types.js';
+import 'react';
+import 'starknet';
+import '@medialane/sdk/starknet';
+import '../../utils/media-wallet/wallet-tokens.js';
+
+declare function MediaWallet({ onClose, initialView, }: {
+    onClose: () => void;
+    initialView?: MediaWalletView;
+}): react_jsx_runtime.JSX.Element;
+
+export { MediaWallet };

package/dist/components/media-wallet/media-wallet.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { MediaWalletHome } from "./media-wallet-home.js";
+import { MediaWalletSend } from "./media-wallet-send.js";
+import { MediaWalletTokenDetail } from "./media-wallet-token-detail.js";
+import { MediaWalletActivity } from "./media-wallet-activity.js";
+function MediaWallet({
+  onClose,
+  initialView
+}) {
+  const [view, setView] = useState(initialView ?? { name: "home" });
+  switch (view.name) {
+    case "home":
+      return /* @__PURE__ */ jsx(MediaWalletHome, { onNavigate: setView, onClose, autoOpenReceive: view.autoOpenReceive });
+    case "send":
+      return /* @__PURE__ */ jsx(MediaWalletSend, { initialToken: view.token, onNavigate: setView, onDone: () => setView({ name: "home" }) });
+    case "token":
+      return /* @__PURE__ */ jsx(MediaWalletTokenDetail, { token: view.token, onNavigate: setView });
+    case "activity":
+      return /* @__PURE__ */ jsx(MediaWalletActivity, { onNavigate: setView });
+  }
+}
+export {
+  MediaWallet
+};
+//# sourceMappingURL=media-wallet.js.map

package/dist/components/media-wallet/media-wallet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-wallet/media-wallet.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { MediaWalletView } from \"./types.js\";\nimport { MediaWalletHome } from \"./media-wallet-home.js\";\nimport { MediaWalletSend } from \"./media-wallet-send.js\";\nimport { MediaWalletTokenDetail } from \"./media-wallet-token-detail.js\";\nimport { MediaWalletActivity } from \"./media-wallet-activity.js\";\n\nexport function MediaWallet({\n  onClose,\n  initialView,\n}: {\n  onClose: () => void;\n  initialView?: MediaWalletView;\n}) {\n  const [view, setView] = useState<MediaWalletView>(initialView ?? { name: \"home\" });\n\n  switch (view.name) {\n    case \"home\":\n      return <MediaWalletHome onNavigate={setView} onClose={onClose} autoOpenReceive={view.autoOpenReceive} />;\n    case \"send\":\n      return <MediaWalletSend initialToken={view.token} onNavigate={setView} onDone={() => setView({ name: \"home\" })} />;\n    case \"token\":\n      return <MediaWalletTokenDetail token={view.token} onNavigate={setView} />;\n    case \"activity\":\n      return <MediaWalletActivity onNavigate={setView} />;\n  }\n}\n"],"mappings":";AAoBa;AAlBb,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AAE7B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAA0B,eAAe,EAAE,MAAM,OAAO,CAAC;AAEjF,UAAQ,KAAK,MAAM;AAAA,IACjB,KAAK;AACH,aAAO,oBAAC,mBAAgB,YAAY,SAAS,SAAkB,iBAAiB,KAAK,iBAAiB;AAAA,IACxG,KAAK;AACH,aAAO,oBAAC,mBAAgB,cAAc,KAAK,OAAO,YAAY,SAAS,QAAQ,MAAM,QAAQ,EAAE,MAAM,OAAO,CAAC,GAAG;AAAA,IAClH,KAAK;AACH,aAAO,oBAAC,0BAAuB,OAAO,KAAK,OAAO,YAAY,SAAS;AAAA,IACzE,KAAK;AACH,aAAO,oBAAC,uBAAoB,YAAY,SAAS;AAAA,EACrD;AACF;","names":[]}

package/dist/components/media-wallet/nft-strip.cjs

@@ -0,0 +1,85 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var nft_strip_exports = {};
+__export(nft_strip_exports, {
+  NftStrip: () => NftStrip
+});
+module.exports = __toCommonJS(nft_strip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_link = __toESM(require("../link.js"), 1);
+var import_image = __toESM(require("../image.js"), 1);
+function NftStrip({
+  items,
+  isLoading,
+  onNavigate,
+  resolveImage
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": "nft-strip-skeleton", className: "grid grid-cols-4 gap-2", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square animate-pulse rounded-xl bg-foreground/[0.06]" }, i)) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground", children: "No NFTs yet \u2014 mint or collect your first one to see it here." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-4 gap-2", children: items.map((item) => {
+    const resolved = resolveImage(item.image);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_link.default,
+      {
+        href: item.href,
+        title: item.name,
+        onClick: onNavigate,
+        className: "group relative aspect-square overflow-hidden rounded-xl bg-foreground/[0.06] transition-opacity hover:opacity-90",
+        children: resolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_image.default,
+          {
+            src: resolved,
+            alt: item.name,
+            fill: true,
+            unoptimized: true,
+            className: "object-cover transition-transform duration-200 group-hover:scale-[1.03]"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid h-full w-full place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetFallbackIcon, {}) })
+      },
+      item.key
+    );
+  }) });
+}
+function AssetFallbackIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", className: "text-muted-foreground", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "9", r: "1.5", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15l-5-5-9 9" })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NftStrip
+});
+//# sourceMappingURL=nft-strip.cjs.map

package/dist/components/media-wallet/nft-strip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-wallet/nft-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"../link.js\";\nimport Image from \"../image.js\";\nimport type { NftItem } from \"../../utils/media-wallet/nft-items.js\";\n\nexport function NftStrip({\n  items,\n  isLoading,\n  onNavigate,\n  resolveImage,\n}: {\n  items: NftItem[];\n  isLoading: boolean;\n  onNavigate?: () => void;\n  resolveImage: (uri: string | null | undefined) => string | null;\n}) {\n  if (isLoading) {\n    return (\n      <div data-testid=\"nft-strip-skeleton\" className=\"grid grid-cols-4 gap-2\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div key={i} className=\"aspect-square animate-pulse rounded-xl bg-foreground/[0.06]\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (items.length === 0) {\n    return (\n      <p className=\"text-sm text-muted-foreground\">\n        No NFTs yet — mint or collect your first one to see it here.\n      </p>\n    );\n  }\n\n  return (\n    <div className=\"grid grid-cols-4 gap-2\">\n      {items.map((item) => {\n        const resolved = resolveImage(item.image);\n        return (\n          <Link\n            key={item.key}\n            href={item.href}\n            title={item.name}\n            onClick={onNavigate}\n            className=\"group relative aspect-square overflow-hidden rounded-xl bg-foreground/[0.06] transition-opacity hover:opacity-90\"\n          >\n            {resolved ? (\n              <Image\n                src={resolved}\n                alt={item.name}\n                fill\n                unoptimized\n                className=\"object-cover transition-transform duration-200 group-hover:scale-[1.03]\"\n              />\n            ) : (\n              <div className=\"grid h-full w-full place-items-center\">\n                <AssetFallbackIcon />\n              </div>\n            )}\n          </Link>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction AssetFallbackIcon() {\n  return (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" className=\"text-muted-foreground\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\" />\n      <circle cx=\"9\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\" />\n      <path d=\"M21 15l-5-5-9 9\" />\n    </svg>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBU;AAnBV,kBAAiB;AACjB,mBAAkB;AAGX,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,WAAW;AACb,WACE,4CAAC,SAAI,eAAY,sBAAqB,WAAU,0BAC7C,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,4CAAC,SAAY,WAAU,iEAAb,CAA2E,CACtF,GACH;AAAA,EAEJ;AAEA,MAAI,MAAM,WAAW,GAAG;AACtB,WACE,4CAAC,OAAE,WAAU,iCAAgC,+EAE7C;AAAA,EAEJ;AAEA,SACE,4CAAC,SAAI,WAAU,0BACZ,gBAAM,IAAI,CAAC,SAAS;AACnB,UAAM,WAAW,aAAa,KAAK,KAAK;AACxC,WACE;AAAA,MAAC,YAAAA;AAAA,MAAA;AAAA,QAEC,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,QACZ,SAAS;AAAA,QACT,WAAU;AAAA,QAET,qBACC;AAAA,UAAC,aAAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK,KAAK;AAAA,YACV,MAAI;AAAA,YACJ,aAAW;AAAA,YACX,WAAU;AAAA;AAAA,QACZ,IAEA,4CAAC,SAAI,WAAU,yCACb,sDAAC,qBAAkB,GACrB;AAAA;AAAA,MAjBG,KAAK;AAAA,IAmBZ;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,SAAS,oBAAoB;AAC3B,SACE,6CAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,WAAU,yBAAwB,eAAc,SAAQ,gBAAe,SACzK;AAAA,gDAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI;AAAA,IAChD,4CAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,MAAK,gBAAe,QAAO,QAAO;AAAA,IAChE,4CAAC,UAAK,GAAE,mBAAkB;AAAA,KAC5B;AAEJ;","names":["Link","Image"]}

package/dist/components/media-wallet/nft-strip.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NftItem } from '../../utils/media-wallet/nft-items.cjs';
+import '@medialane/sdk';
+
+declare function NftStrip({ items, isLoading, onNavigate, resolveImage, }: {
+    items: NftItem[];
+    isLoading: boolean;
+    onNavigate?: () => void;
+    resolveImage: (uri: string | null | undefined) => string | null;
+}): react_jsx_runtime.JSX.Element;
+
+export { NftStrip };

package/dist/components/media-wallet/nft-strip.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NftItem } from '../../utils/media-wallet/nft-items.js';
+import '@medialane/sdk';
+
+declare function NftStrip({ items, isLoading, onNavigate, resolveImage, }: {
+    items: NftItem[];
+    isLoading: boolean;
+    onNavigate?: () => void;
+    resolveImage: (uri: string | null | undefined) => string | null;
+}): react_jsx_runtime.JSX.Element;
+
+export { NftStrip };

package/dist/components/media-wallet/nft-strip.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "../link.js";
+import Image from "../image.js";
+function NftStrip({
+  items,
+  isLoading,
+  onNavigate,
+  resolveImage
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { "data-testid": "nft-strip-skeleton", className: "grid grid-cols-4 gap-2", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "aspect-square animate-pulse rounded-xl bg-foreground/[0.06]" }, i)) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No NFTs yet \u2014 mint or collect your first one to see it here." });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2", children: items.map((item) => {
+    const resolved = resolveImage(item.image);
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: item.href,
+        title: item.name,
+        onClick: onNavigate,
+        className: "group relative aspect-square overflow-hidden rounded-xl bg-foreground/[0.06] transition-opacity hover:opacity-90",
+        children: resolved ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: resolved,
+            alt: item.name,
+            fill: true,
+            unoptimized: true,
+            className: "object-cover transition-transform duration-200 group-hover:scale-[1.03]"
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "grid h-full w-full place-items-center", children: /* @__PURE__ */ jsx(AssetFallbackIcon, {}) })
+      },
+      item.key
+    );
+  }) });
+}
+function AssetFallbackIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", className: "text-muted-foreground", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "1.5", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 15l-5-5-9 9" })
+  ] });
+}
+export {
+  NftStrip
+};
+//# sourceMappingURL=nft-strip.js.map

package/dist/components/media-wallet/nft-strip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-wallet/nft-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"../link.js\";\nimport Image from \"../image.js\";\nimport type { NftItem } from \"../../utils/media-wallet/nft-items.js\";\n\nexport function NftStrip({\n  items,\n  isLoading,\n  onNavigate,\n  resolveImage,\n}: {\n  items: NftItem[];\n  isLoading: boolean;\n  onNavigate?: () => void;\n  resolveImage: (uri: string | null | undefined) => string | null;\n}) {\n  if (isLoading) {\n    return (\n      <div data-testid=\"nft-strip-skeleton\" className=\"grid grid-cols-4 gap-2\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div key={i} className=\"aspect-square animate-pulse rounded-xl bg-foreground/[0.06]\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (items.length === 0) {\n    return (\n      <p className=\"text-sm text-muted-foreground\">\n        No NFTs yet — mint or collect your first one to see it here.\n      </p>\n    );\n  }\n\n  return (\n    <div className=\"grid grid-cols-4 gap-2\">\n      {items.map((item) => {\n        const resolved = resolveImage(item.image);\n        return (\n          <Link\n            key={item.key}\n            href={item.href}\n            title={item.name}\n            onClick={onNavigate}\n            className=\"group relative aspect-square overflow-hidden rounded-xl bg-foreground/[0.06] transition-opacity hover:opacity-90\"\n          >\n            {resolved ? (\n              <Image\n                src={resolved}\n                alt={item.name}\n                fill\n                unoptimized\n                className=\"object-cover transition-transform duration-200 group-hover:scale-[1.03]\"\n              />\n            ) : (\n              <div className=\"grid h-full w-full place-items-center\">\n                <AssetFallbackIcon />\n              </div>\n            )}\n          </Link>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction AssetFallbackIcon() {\n  return (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" className=\"text-muted-foreground\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\" />\n      <circle cx=\"9\" cy=\"9\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\" />\n      <path d=\"M21 15l-5-5-9 9\" />\n    </svg>\n  );\n}\n"],"mappings":";AAqBU,cAgDN,YAhDM;AAnBV,OAAO,UAAU;AACjB,OAAO,WAAW;AAGX,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,eAAY,sBAAqB,WAAU,0BAC7C,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,oBAAC,SAAY,WAAU,iEAAb,CAA2E,CACtF,GACH;AAAA,EAEJ;AAEA,MAAI,MAAM,WAAW,GAAG;AACtB,WACE,oBAAC,OAAE,WAAU,iCAAgC,+EAE7C;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAU,0BACZ,gBAAM,IAAI,CAAC,SAAS;AACnB,UAAM,WAAW,aAAa,KAAK,KAAK;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,QACZ,SAAS;AAAA,QACT,WAAU;AAAA,QAET,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK,KAAK;AAAA,YACV,MAAI;AAAA,YACJ,aAAW;AAAA,YACX,WAAU;AAAA;AAAA,QACZ,IAEA,oBAAC,SAAI,WAAU,yCACb,8BAAC,qBAAkB,GACrB;AAAA;AAAA,MAjBG,KAAK;AAAA,IAmBZ;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,SAAS,oBAAoB;AAC3B,SACE,qBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,WAAU,yBAAwB,eAAc,SAAQ,gBAAe,SACzK;AAAA,wBAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI;AAAA,IAChD,oBAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,MAAK,gBAAe,QAAO,QAAO;AAAA,IAChE,oBAAC,UAAK,GAAE,mBAAkB;AAAA,KAC5B;AAEJ;","names":[]}

package/dist/components/media-wallet/quick-action.cjs

@@ -0,0 +1,59 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var quick_action_exports = {};
+__export(quick_action_exports, {
+  QuickAction: () => QuickAction
+});
+module.exports = __toCommonJS(quick_action_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_action_button = require("./action-button.js");
+function QuickAction({
+  label,
+  icon,
+  action,
+  onClick,
+  disabled
+}) {
+  const grad = `linear-gradient(115deg, ${import_action_button.ACTION_GRADIENTS[action].join(",")})`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `group flex flex-col items-center gap-1.5 ${disabled ? "pointer-events-none opacity-40" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "ml-gbtn relative grid h-12 w-12 place-items-center rounded-[15px] bg-transparent transition-transform group-active:scale-95",
+            style: { "--ml-grad": grad, color: import_action_button.ACTION_FOREGROUNDS[action] },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[11px] font-medium text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  QuickAction
+});
+//# sourceMappingURL=quick-action.cjs.map

package/dist/components/media-wallet/quick-action.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-wallet/quick-action.tsx"],"sourcesContent":["\"use client\";\n\nimport { ACTION_GRADIENTS, ACTION_FOREGROUNDS } from \"./action-button.js\";\n\nexport function QuickAction({\n  label,\n  icon,\n  action,\n  onClick,\n  disabled,\n}: {\n  label: string;\n  icon: React.ReactNode;\n  action: keyof typeof ACTION_GRADIENTS;\n  onClick?: () => void;\n  disabled?: boolean;\n}) {\n  const grad = `linear-gradient(115deg, ${ACTION_GRADIENTS[action].join(\",\")})`;\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      className={`group flex flex-col items-center gap-1.5 ${disabled ? \"pointer-events-none opacity-40\" : \"\"}`}\n    >\n      <span\n        className=\"ml-gbtn relative grid h-12 w-12 place-items-center rounded-[15px] bg-transparent transition-transform group-active:scale-95\"\n        style={{ \"--ml-grad\": grad, color: ACTION_FOREGROUNDS[action] } as React.CSSProperties}\n      >\n        {icon}\n      </span>\n      <span className=\"text-[11px] font-medium text-muted-foreground\">{label}</span>\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAjBJ,2BAAqD;AAE9C,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,OAAO,2BAA2B,sCAAiB,MAAM,EAAE,KAAK,GAAG,CAAC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,4CAA4C,WAAW,mCAAmC,EAAE;AAAA,MAEvG;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,aAAa,MAAM,OAAO,wCAAmB,MAAM,EAAE;AAAA,YAE7D;AAAA;AAAA,QACH;AAAA,QACA,4CAAC,UAAK,WAAU,iDAAiD,iBAAM;AAAA;AAAA;AAAA,EACzE;AAEJ;","names":[]}

package/dist/components/media-wallet/quick-action.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ACTION_GRADIENTS } from './action-button.cjs';
+
+declare function QuickAction({ label, icon, action, onClick, disabled, }: {
+    label: string;
+    icon: React.ReactNode;
+    action: keyof typeof ACTION_GRADIENTS;
+    onClick?: () => void;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { QuickAction };

package/dist/components/media-wallet/quick-action.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ACTION_GRADIENTS } from './action-button.js';
+
+declare function QuickAction({ label, icon, action, onClick, disabled, }: {
+    label: string;
+    icon: React.ReactNode;
+    action: keyof typeof ACTION_GRADIENTS;
+    onClick?: () => void;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { QuickAction };

package/dist/components/media-wallet/quick-action.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ACTION_GRADIENTS, ACTION_FOREGROUNDS } from "./action-button.js";
+function QuickAction({
+  label,
+  icon,
+  action,
+  onClick,
+  disabled
+}) {
+  const grad = `linear-gradient(115deg, ${ACTION_GRADIENTS[action].join(",")})`;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `group flex flex-col items-center gap-1.5 ${disabled ? "pointer-events-none opacity-40" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ml-gbtn relative grid h-12 w-12 place-items-center rounded-[15px] bg-transparent transition-transform group-active:scale-95",
+            style: { "--ml-grad": grad, color: ACTION_FOREGROUNDS[action] },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+export {
+  QuickAction
+};
+//# sourceMappingURL=quick-action.js.map

package/dist/components/media-wallet/quick-action.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-wallet/quick-action.tsx"],"sourcesContent":["\"use client\";\n\nimport { ACTION_GRADIENTS, ACTION_FOREGROUNDS } from \"./action-button.js\";\n\nexport function QuickAction({\n  label,\n  icon,\n  action,\n  onClick,\n  disabled,\n}: {\n  label: string;\n  icon: React.ReactNode;\n  action: keyof typeof ACTION_GRADIENTS;\n  onClick?: () => void;\n  disabled?: boolean;\n}) {\n  const grad = `linear-gradient(115deg, ${ACTION_GRADIENTS[action].join(\",\")})`;\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      className={`group flex flex-col items-center gap-1.5 ${disabled ? \"pointer-events-none opacity-40\" : \"\"}`}\n    >\n      <span\n        className=\"ml-gbtn relative grid h-12 w-12 place-items-center rounded-[15px] bg-transparent transition-transform group-active:scale-95\"\n        style={{ \"--ml-grad\": grad, color: ACTION_FOREGROUNDS[action] } as React.CSSProperties}\n      >\n        {icon}\n      </span>\n      <span className=\"text-[11px] font-medium text-muted-foreground\">{label}</span>\n    </button>\n  );\n}\n"],"mappings":";AAmBI,SAKE,KALF;AAjBJ,SAAS,kBAAkB,0BAA0B;AAE9C,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,OAAO,2BAA2B,iBAAiB,MAAM,EAAE,KAAK,GAAG,CAAC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,4CAA4C,WAAW,mCAAmC,EAAE;AAAA,MAEvG;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,aAAa,MAAM,OAAO,mBAAmB,MAAM,EAAE;AAAA,YAE7D;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,UAAK,WAAU,iDAAiD,iBAAM;AAAA;AAAA;AAAA,EACzE;AAEJ;","names":[]}