@linktr.ee/messaging-react 3.9.0-rc-1783407048 → 3.9.0-rc-1783472582

package/dist/{Card-qDLtjK6u.js → Card-BVZM0-06.js}

@@ -1,16 +1,16 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { XIcon as m, PencilSimpleIcon as z } from "@phosphor-icons/react";
 import B from "react";
-import { i as j, u as T, M as I, P as L, C as M, a as R, g as S } from "./usePreviewToggle-BG-pfsgP.js";
-import { T as A, P as G } from "./TextShell-BiqF2UB0.js";
-const V = ({
+import { i as T, u as j, M as S, P as L, C as M, a as I, g as R } from "./usePreviewToggle-DRhRTUou.js";
+import { T as A, S as G, P as V } from "./TextShell-DIyj9zQ7.js";
+const F = ({
   text: t,
   amountText: i,
   placeholderAmountText: s,
   onDismiss: a
-}) => /* @__PURE__ */ r(A, { children: [
-  /* @__PURE__ */ e("div", { className: "pr-8", children: t }),
-  /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("span", { className: i ? "text-white/55" : "text-white/30", children: i || s }) }),
+}) => /* @__PURE__ */ r(A, { isMine: !0, children: [
+  /* @__PURE__ */ e("div", { className: "pr-8", children: t || /* @__PURE__ */ e(G, { variant: "dark", animate: !1 }) }),
+  /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e("span", { className: i ? "text-white/55" : "text-white/30", children: i || s }) }),
   a && /* @__PURE__ */ e(
     "button",
     {
@@ -21,41 +21,41 @@ const V = ({
       children: /* @__PURE__ */ e(m, { className: "size-3", weight: "bold" })
     }
   )
-] }), F = ({
+] }), X = ({
   title: t,
   mimeType: i = "application/octet-stream",
   thumbnailUrl: s,
   detail: a,
-  amountText: o,
+  amountText: n,
   placeholderTitle: u = "Attachment title",
   placeholderAmountText: g,
-  gallery: n = [],
+  gallery: o = [],
   onDismiss: l,
   onPreviewClick: w,
   onFetchSource: x,
   onEditClick: c
 }) => {
-  const d = j(n), { source: b, isPreviewVisible: p, isLoadingPreview: f, togglePreview: v } = T({ isGallery: d, onFetchSource: x, onPreviewClick: w }), h = !p, C = f, y = /* @__PURE__ */ r(B.Fragment, { children: [
+  const d = T(o), { source: b, isPreviewVisible: f, isLoadingPreview: p, togglePreview: v } = j({ isGallery: d, onFetchSource: x, onPreviewClick: w }), h = !f, C = p, k = /* @__PURE__ */ r(B.Fragment, { children: [
     /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
     /* @__PURE__ */ e(
       "span",
       {
-        className: o ? "text-xs font-medium text-white/55" : "text-xs font-medium text-white/30",
-        children: o || g
+        className: n ? "text-xs font-medium text-white/55" : "text-xs font-medium text-white/30",
+        children: n || g
       }
     )
-  ] }), P = l ? /* @__PURE__ */ e(
+  ] }), y = l ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: (k) => {
-        k.stopPropagation(), l();
+      onClick: (N) => {
+        N.stopPropagation(), l();
       },
       className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
       "aria-label": "Dismiss attachment",
       children: /* @__PURE__ */ e(m, { className: "size-3", weight: "bold" })
     }
-  ) : void 0, N = c ? /* @__PURE__ */ e(
+  ) : void 0, P = c ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
@@ -65,7 +65,7 @@ const V = ({
       children: /* @__PURE__ */ e(z, { className: "size-5", weight: "regular" })
     }
   ) : void 0;
-  return /* @__PURE__ */ r(I, { variant: "dark", children: [
+  return /* @__PURE__ */ r(S, { variant: "dark", children: [
     /* @__PURE__ */ e(
       L,
       {
@@ -76,33 +76,33 @@ const V = ({
           M,
           {
             variant: "dark",
-            gallery: n,
+            gallery: o,
             title: t,
             showLocked: h,
             mimeType: i,
             thumbnailUrl: s,
             source: b,
-            topRight: P
+            topRight: y
           }
         )
       }
     ),
     /* @__PURE__ */ e(
-      R,
+      I,
       {
         variant: "dark",
         title: t,
         placeholderTitle: u,
         mimeType: i,
         detail: a,
-        statusBadge: y,
-        icon: d ? S("dark") : void 0,
-        trailingAction: N
+        statusBadge: k,
+        icon: d ? R("dark") : void 0,
+        trailingAction: P
       }
     )
   ] });
-}, J = (t) => t.contentType === "text" ? /* @__PURE__ */ e(V, { ...t }) : /* @__PURE__ */ e(F, { ...t });
+}, K = (t) => t.contentType === "text" ? /* @__PURE__ */ e(F, { ...t }) : /* @__PURE__ */ e(X, { ...t });
 export {
-  J as default
+  K as default
 };
-//# sourceMappingURL=Card-qDLtjK6u.js.map
+//# sourceMappingURL=Card-BVZM0-06.js.map

package/dist/Card-BVZM0-06.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-BVZM0-06.js","sources":["../src/components/LockedAttachment/components/Composer/Card.tsx"],"sourcesContent":["import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport type { FetchSourceHandler, LockedAttachmentBaseProps } from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport CardThumbnail, {\n  galleryBodyIcon,\n  isGalleryCard,\n} from '../_shared/CardThumbnail'\nimport MediaShell from '../_shared/MediaShell'\nimport PreviewToggle from '../_shared/PreviewToggle'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\n\nexport interface ComposerCardProps extends LockedAttachmentBaseProps {\n  /**\n   * The message's own text, shown as-is (not redacted yet — the message\n   * hasn't been sent). Only used when `contentType` is `\"text\"`.\n   */\n  text?: string\n  /** Placeholder shown in the amount slot before one is configured. */\n  placeholderAmountText?: string\n  /**\n   * Renders a persistent dismiss X on the thumbnail (media) or next to the\n   * text (text mode); called to remove the draft attachment. Unrelated to\n   * `TextCardProps.onDismiss`, which only appears for `isMine` after a\n   * failed payment.\n   */\n  onDismiss?: () => void\n  /** Fired the first time the composer taps the thumbnail to preview. */\n  onPreviewClick?: () => void\n  /**\n   * Lazily loads the underlying source so the composer can preview the\n   * attachment they're about to send. Called the first time the thumbnail is\n   * tapped; the returned source is cached and reused on subsequent toggles.\n   * Ignored when `contentType` is `\"text\"`.\n   */\n  onFetchSource?: FetchSourceHandler\n  /**\n   * When provided, renders a pencil button in the body bottom-right that the\n   * composer can use to edit the attachment metadata (e.g. open the price /\n   * gallery editor). Matches the Composer \"Button\" instance in Figma.\n   */\n  onEditClick?: () => void\n}\n\n/**\n * Composer card in text mode: a normal outgoing chat bubble showing the real\n * draft text (it hasn't been sent/redacted yet) plus a dismiss X and a price\n * row. Media-only props are ignored here.\n */\nconst ComposerTextCard: React.FC<ComposerCardProps> = ({\n  text,\n  amountText,\n  placeholderAmountText,\n  onDismiss,\n}) => (\n  <TextShell isMine>\n    <div className=\"pr-8\">\n      {text ? text : <SkeletonTextLines variant=\"dark\" animate={false} />}\n    </div>\n    <PriceLockRow>\n      <span className={amountText ? 'text-white/55' : 'text-white/30'}>\n        {amountText || placeholderAmountText}\n      </span>\n    </PriceLockRow>\n    {onDismiss && (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className=\"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n        aria-label=\"Dismiss attachment\"\n      >\n        <XIcon className=\"size-3\" weight=\"bold\" />\n      </button>\n    )}\n  </TextShell>\n)\n\n/**\n * Composer card in media mode: the locked thumbnail (single or gallery) the\n * composer taps to preview the attachment they're about to send, plus the\n * title/price body with optional dismiss X and edit pencil.\n */\nconst ComposerMediaCard: React.FC<ComposerCardProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  placeholderAmountText,\n  gallery = [],\n  onDismiss,\n  onPreviewClick,\n  onFetchSource,\n  onEditClick,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  // Gallery is always previewable in the composer because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  const statusBadge = (\n    <React.Fragment>\n      <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n      <span\n        className={\n          amountText\n            ? 'text-xs font-medium text-white/55'\n            : 'text-xs font-medium text-white/30'\n        }\n      >\n        {amountText || placeholderAmountText}\n      </span>\n    </React.Fragment>\n  )\n\n  const dismissButton = onDismiss ? (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        // Stop the click from bubbling up into the outer preview-toggle\n        // wrapper when both are wired up at the same time.\n        e.stopPropagation()\n        onDismiss()\n      }}\n      className=\"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white\"\n      aria-label=\"Dismiss attachment\"\n    >\n      <XIcon className=\"size-3\" weight=\"bold\" />\n    </button>\n  ) : undefined\n\n  const editButton = onEditClick ? (\n    <button\n      type=\"button\"\n      onClick={onEditClick}\n      aria-label=\"Edit attachment\"\n      className=\"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n    >\n      <PencilSimpleIcon className=\"size-5\" weight=\"regular\" />\n    </button>\n  ) : undefined\n\n  return (\n    <MediaShell variant=\"dark\">\n      <PreviewToggle\n        onToggle={togglePreview}\n        isBusy={isBusy}\n        isPreviewVisible={!showLocked}\n      >\n        <CardThumbnail\n          variant=\"dark\"\n          gallery={gallery}\n          title={title}\n          showLocked={showLocked}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n          topRight={dismissButton}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n        trailingAction={editButton}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The card the composer sees while drafting a paid attachment.\n * Matches the Composer column of the messaging design system in Figma.\n *\n * When `contentType === \"text\"`, renders as a normal outgoing chat bubble\n * showing the real draft text (it hasn't been sent/redacted yet) plus a\n * dismiss X and a price row, instead of a media thumbnail card.\n */\nconst ComposerCard: React.FC<ComposerCardProps> = (props) =>\n  props.contentType === 'text' ? (\n    <ComposerTextCard {...props} />\n  ) : (\n    <ComposerMediaCard {...props} />\n  )\n\nexport default ComposerCard\n"],"names":["ComposerTextCard","text","amountText","placeholderAmountText","onDismiss","jsxs","TextShell","jsx","SkeletonTextLines","PriceLockRow","XIcon","ComposerMediaCard","title","mimeType","thumbnailUrl","detail","placeholderTitle","gallery","onPreviewClick","onFetchSource","onEditClick","isGallery","isGalleryCard","source","isPreviewVisible","isLoadingPreview","togglePreview","usePreviewToggle","showLocked","isBusy","statusBadge","React","dismissButton","e","editButton","PencilSimpleIcon","MediaShell","PreviewToggle","CardThumbnail","CardBody","galleryBodyIcon","ComposerCard","props"],"mappings":"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"}

package/dist/{Card-DX9nBx1S.js → Card-D0hLrOxX.js}

@@ -1,46 +1,46 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
 import "classnames";
-import { LockSimpleIcon as U, DownloadSimpleIcon as M } from "@phosphor-icons/react";
-import j, { useState as G, useRef as p, useCallback as R, useEffect as O } from "react";
-import { g as T } from "./index-CZTUyiPe.js";
-import { i as B, u as A, M as N, P as D, C as k, a as I, g as y } from "./usePreviewToggle-BG-pfsgP.js";
-import { P as z } from "./PurchaseStatusBadge-CJH4S-8Z.js";
-function S({
+import { LockSimpleIcon as j, DownloadSimpleIcon as x } from "@phosphor-icons/react";
+import z, { useState as D, useRef as p, useCallback as M, useEffect as G } from "react";
+import { g as O } from "./index-B8gqCioX.js";
+import { i as R, u as T, M as B, P as A, C as k, a as I, g as L } from "./usePreviewToggle-DRhRTUou.js";
+import { L as S, P as N } from "./LoadingDots-nW6r0-Kg.js";
+function V({
   paymentStatus: e,
   onFetchSource: c,
-  onUnlockClick: a
+  onUnlockClick: o
 }) {
-  const [t, l] = G(), i = p(null), n = p(!1), d = p(c);
+  const [t, l] = D(), i = p(null), n = p(!1), d = p(c);
   d.current = c;
-  const f = R(async () => {
+  const f = M(async () => {
     var s;
     if (!n.current) {
       n.current = !0;
       try {
-        const o = await ((s = d.current) == null ? void 0 : s.call(d));
-        o && l(o);
+        const a = await ((s = d.current) == null ? void 0 : s.call(d));
+        a && l(a);
       } finally {
         n.current = !1;
       }
     }
-  }, []), h = R(() => {
-    e === "paid" ? f() : a == null || a();
-  }, [e, f, a]);
-  return O(() => {
+  }, []), g = M(() => {
+    e === "paid" ? f() : o == null || o();
+  }, [e, f, o]);
+  return G(() => {
     if (!i.current || e !== "paid" || t !== void 0) return;
     const s = new IntersectionObserver(
-      ([o]) => {
-        o.isIntersecting && (f(), s.disconnect());
+      ([a]) => {
+        a.isIntersecting && (f(), s.disconnect());
       },
       { threshold: 1 }
     );
     return s.observe(i.current), () => s.disconnect();
-  }, [e, t, f]), { source: t, cardRef: i, handleUnlockClick: h };
+  }, [e, t, f]), { source: t, cardRef: i, handleUnlockClick: g };
 }
-const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70", V = ({
+const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70", E = ({
   isLocked: e,
   sourceUrl: c,
-  redeemUrl: a,
+  redeemUrl: o,
   onUnlockClicked: t,
   onDownloadClicked: l,
   isUnlocking: i = !1
@@ -53,15 +53,15 @@ const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounde
         onClick: t,
         disabled: i,
         className: C,
-        children: i ? /* @__PURE__ */ r("span", { className: "size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" }) : /* @__PURE__ */ m(j.Fragment, { children: [
-          /* @__PURE__ */ r(U, { className: "size-4", weight: "fill" }),
+        children: i ? /* @__PURE__ */ r(S, {}) : /* @__PURE__ */ v(z.Fragment, { children: [
+          /* @__PURE__ */ r(j, { className: "size-4", weight: "fill" }),
           "Unlock"
         ] })
       }
     );
   if (!e && l != null) {
-    const n = a ?? c;
-    return n != null ? /* @__PURE__ */ m(
+    const n = o ?? c;
+    return n != null ? /* @__PURE__ */ v(
       "a",
       {
         href: n,
@@ -70,55 +70,55 @@ const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounde
         onClick: l,
         className: `${C} !text-white`,
         children: [
-          /* @__PURE__ */ r(M, { className: "size-4", weight: "bold" }),
+          /* @__PURE__ */ r(x, { className: "size-4", weight: "bold" }),
           "Download"
         ]
       }
-    ) : /* @__PURE__ */ m(
+    ) : /* @__PURE__ */ v(
       "button",
       {
         type: "button",
         onClick: l,
         className: C,
         children: [
-          /* @__PURE__ */ r(M, { className: "size-4", weight: "bold" }),
+          /* @__PURE__ */ r(x, { className: "size-4", weight: "bold" }),
           "Download"
         ]
       }
     );
   }
   return null;
-}, E = ({
+}, _ = ({
   title: e,
   mimeType: c = "application/octet-stream",
-  thumbnailUrl: a,
+  thumbnailUrl: o,
   detail: t,
   amountText: l,
   placeholderTitle: i = "Attachment title",
   paymentStatus: n = "pending",
   gallery: d = [],
   onPreviewClick: f,
-  onFetchSource: h
+  onFetchSource: g
 }) => {
-  const s = B(d), { source: o, isPreviewVisible: u, isLoadingPreview: v, togglePreview: b } = A({ isGallery: s, onFetchSource: h, onPreviewClick: f }), g = !u;
-  return /* @__PURE__ */ m(N, { variant: "dark", children: [
+  const s = R(d), { source: a, isPreviewVisible: u, isLoadingPreview: m, togglePreview: b } = T({ isGallery: s, onFetchSource: g, onPreviewClick: f }), h = !u;
+  return /* @__PURE__ */ v(B, { variant: "dark", children: [
     /* @__PURE__ */ r(
-      D,
+      A,
       {
         onToggle: b,
-        isBusy: v,
-        isPreviewVisible: !g,
+        isBusy: m,
+        isPreviewVisible: !h,
         children: /* @__PURE__ */ r(
           k,
           {
             variant: "dark",
             gallery: d,
             title: e,
-            showLocked: g,
+            showLocked: h,
             paymentStatus: n,
             mimeType: c,
-            thumbnailUrl: a,
-            source: o
+            thumbnailUrl: o,
+            source: a
           }
         )
       }
@@ -132,40 +132,40 @@ const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounde
         mimeType: c,
         detail: t,
         statusBadge: /* @__PURE__ */ r(
-          z,
+          N,
           {
             isMine: !0,
             paymentStatus: n,
             amountText: l
           }
         ),
-        icon: s ? y("dark") : void 0
+        icon: s ? L("dark") : void 0
       }
     )
   ] });
-}, _ = ({
+}, $ = ({
   title: e,
   amountText: c,
-  thumbnailUrl: a,
+  thumbnailUrl: o,
   mimeType: t = "application/octet-stream",
   detail: l,
   gallery: i = [],
   onUnlockClick: n,
   onFetchSource: d,
   onDownloadClick: f,
-  paymentStatus: h,
+  paymentStatus: g,
   isUnlocking: s = !1
 }) => {
-  const o = B(i), { source: u, cardRef: v, handleUnlockClick: b } = S({
-    paymentStatus: h,
+  const a = R(i), { source: u, cardRef: m, handleUnlockClick: b } = V({
+    paymentStatus: g,
     onFetchSource: d,
     onUnlockClick: n
-  }), g = u == null ? void 0 : u.sourceUrl, P = u == null ? void 0 : u.redeemUrl, w = o ? h !== "paid" : g === void 0, x = T(t), L = o ? void 0 : g;
-  return /* @__PURE__ */ m(
-    N,
+  }), h = u == null ? void 0 : u.sourceUrl, P = u == null ? void 0 : u.redeemUrl, w = a ? g !== "paid" : h === void 0, y = O(t), U = a ? void 0 : h;
+  return /* @__PURE__ */ v(
+    B,
     {
       variant: "light",
-      rootRef: v,
+      rootRef: m,
       "data-testid": "locked-attachment",
       children: [
         /* @__PURE__ */ r(
@@ -175,11 +175,11 @@ const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounde
             gallery: i,
             title: e,
             showLocked: w,
-            paymentStatus: h,
+            paymentStatus: g,
             mimeType: t,
-            thumbnailUrl: a,
+            thumbnailUrl: o,
             source: u,
-            containedImage: !w && (x === "image" || x === "document")
+            containedImage: !w && y === "document"
           }
         ),
         /* @__PURE__ */ r(
@@ -190,20 +190,20 @@ const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounde
             mimeType: t,
             detail: l,
             statusBadge: /* @__PURE__ */ r(
-              z,
+              N,
               {
                 isMine: !1,
-                paymentStatus: h,
+                paymentStatus: g,
                 amountText: c
               }
             ),
-            icon: o ? y("light") : void 0,
+            icon: a ? L("light") : void 0,
             action: /* @__PURE__ */ r(
-              V,
+              E,
               {
                 isLocked: w,
                 isUnlocking: s,
-                sourceUrl: L,
+                sourceUrl: U,
                 redeemUrl: P,
                 onUnlockClicked: b,
                 onDownloadClicked: f
@@ -214,8 +214,8 @@ const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounde
       ]
     }
   );
-}, X = (e) => e.isMine ? /* @__PURE__ */ r(E, { ...e }) : /* @__PURE__ */ r(_, { ...e });
+}, Y = (e) => e.isMine ? /* @__PURE__ */ r(_, { ...e }) : /* @__PURE__ */ r($, { ...e });
 export {
-  X as default
+  Y as default
 };
-//# sourceMappingURL=Card-DX9nBx1S.js.map
+//# sourceMappingURL=Card-D0hLrOxX.js.map

package/dist/Card-D0hLrOxX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-D0hLrOxX.js","sources":["../src/components/LockedAttachment/components/_shared/useReceivedSource.ts","../src/components/LockedAttachment/components/Media/CardActions.tsx","../src/components/LockedAttachment/components/Media/Card.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\n\nexport interface UseReceivedSourceOptions {\n  paymentStatus?: PaymentStatus\n  onFetchSource?: FetchSourceHandler\n  /** Called on Unlock click while the card is still unpaid (opens checkout). */\n  onUnlockClick?: () => void\n}\n\nexport interface UseReceivedSourceResult {\n  source: LockedAttachmentSource | undefined\n  /** Attach to the card root so the paid-source auto-fetch can observe it. */\n  cardRef: React.RefObject<HTMLDivElement>\n  /** Fetches the source when already paid, else defers to `onUnlockClick`. */\n  handleUnlockClick: () => void\n}\n\n/**\n * Media !isMine's source-reveal logic: unlike Composer/Media isMine's\n * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source\n * by fetching once — on click when already paid, or automatically the first\n * time a paid card scrolls fully into view. The fetch is guarded so it runs\n * at most once in flight.\n */\nexport function useReceivedSource({\n  paymentStatus,\n  onFetchSource,\n  onUnlockClick,\n}: UseReceivedSourceOptions): UseReceivedSourceResult {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n\n  const cardRef = useRef<HTMLDivElement>(null)\n  const fetchingRef = useRef(false)\n\n  const onFetchSourceRef = useRef(onFetchSource)\n  onFetchSourceRef.current = onFetchSource\n\n  const fetchSource = useCallback(async (): Promise<void> => {\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    try {\n      const result = await onFetchSourceRef.current?.()\n      if (result) setSource(result)\n    } finally {\n      fetchingRef.current = false\n    }\n  }, [])\n\n  const handleUnlockClick = useCallback(() => {\n    if (paymentStatus === 'paid') {\n      void fetchSource()\n    } else {\n      onUnlockClick?.()\n    }\n  }, [paymentStatus, fetchSource, onUnlockClick])\n\n  // Auto-fetch the source once the paid card scrolls into view.\n  useEffect(() => {\n    if (!cardRef.current) return\n    if (paymentStatus !== 'paid' || source !== undefined) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void fetchSource()\n          observer.disconnect()\n        }\n      },\n      { threshold: 1.0 }\n    )\n\n    observer.observe(cardRef.current)\n    return () => observer.disconnect()\n  }, [paymentStatus, source, fetchSource])\n\n  return { source, cardRef, handleUnlockClick }\n}\n","import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport LoadingDots from '../_shared/LoadingDots'\n\nexport interface ReceivedCardActionsProps {\n  /** Whether the card is currently locked. Drives which CTA we render. */\n  isLocked: boolean\n  /**\n   * When unlocked, the URL used as the Download link's `href` (opens in a new\n   * tab). When omitted, the Download CTA falls back to a plain `<button>`\n   * that just calls `onDownloadClicked` — useful for galleries where the\n   * single-source URL doesn't exist.\n   */\n  sourceUrl?: string\n  /** Optional alternate href that takes precedence over `sourceUrl`. */\n  redeemUrl?: string\n  onUnlockClicked?: () => void\n  onDownloadClicked?: () => void\n  isUnlocking?: boolean\n}\n\nconst buttonClass =\n  'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70'\n\n/**\n * Renders the primary CTA below the body of a Received card.\n * - Locked + onUnlockClicked → \"Unlock\" button\n * - Unlocked + onDownloadClicked + (redeemUrl || sourceUrl) → \"Download\" link\n * - Unlocked + onDownloadClicked + no URL → \"Download\" button (e.g. gallery)\n * Otherwise renders nothing.\n */\nconst ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({\n  isLocked,\n  sourceUrl,\n  redeemUrl,\n  onUnlockClicked,\n  onDownloadClicked,\n  isUnlocking = false,\n}) => {\n  if (isLocked && onUnlockClicked != null) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onUnlockClicked}\n        disabled={isUnlocking}\n        className={buttonClass}\n      >\n        {isUnlocking ? (\n          <LoadingDots />\n        ) : (\n          <React.Fragment>\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" />\n            Unlock\n          </React.Fragment>\n        )}\n      </button>\n    )\n  }\n\n  if (!isLocked && onDownloadClicked != null) {\n    const href = redeemUrl ?? sourceUrl\n    if (href != null) {\n      return (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          onClick={onDownloadClicked}\n          className={`${buttonClass} !text-white`}\n        >\n          <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n          Download\n        </a>\n      )\n    }\n\n    return (\n      <button\n        type=\"button\"\n        onClick={onDownloadClicked}\n        className={buttonClass}\n      >\n        <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n        Download\n      </button>\n    )\n  }\n\n  return null\n}\n\nexport default ReceivedCardActions\n","import type React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentGalleryItem,\n  PaymentStatus,\n} from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport CardThumbnail, {\n  galleryBodyIcon,\n  isGalleryCard,\n} from '../_shared/CardThumbnail'\nimport MediaShell from '../_shared/MediaShell'\nimport PreviewToggle from '../_shared/PreviewToggle'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\nimport { useReceivedSource } from '../_shared/useReceivedSource'\n\nimport ReceivedCardActions from './CardActions'\n\ninterface MediaCardSharedProps {\n  title?: string\n  mimeType?: string\n  thumbnailUrl?: string\n  detail?: string\n  amountText?: string\n  paymentStatus?: PaymentStatus\n  gallery?: LockedAttachmentGalleryItem[]\n  onFetchSource?: FetchSourceHandler\n}\n\nexport type MediaCardProps =\n  | (MediaCardSharedProps & {\n      isMine: true\n      /** Dimmed fallback shown in the title slot when `title` is unset. */\n      placeholderTitle?: string\n      /** Fired the first time the sender taps the thumbnail to preview their own attachment. */\n      onPreviewClick?: () => void\n    })\n  | (MediaCardSharedProps & {\n      isMine: false\n      /**\n       * When true, shows a loading spinner on the Unlock button. Driven by\n       * the LockedAttachmentContext (e.g. checkout in progress).\n       */\n      isUnlocking?: boolean\n      /**\n       * Called when the recipient clicks Unlock on an unpaid attachment.\n       * Use this to open a checkout flow. Omit to hide the Unlock button.\n       */\n      onUnlockClick?: () => void\n      /**\n       * Called when the recipient clicks Download on an unlocked card.\n       * Omit to hide the Download button.\n       */\n      onDownloadClick?: () => void\n    })\n\n/**\n * The sender's ('mine') view of a paid media attachment: the locked\n * thumbnail (single or gallery) they can tap to preview their own\n * attachment, plus the title/purchase-status body.\n */\nconst OwnMediaCard: React.FC<\n  MediaCardSharedProps & {\n    isMine: true\n    placeholderTitle?: string\n    onPreviewClick?: () => void\n  }\n> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  paymentStatus = 'pending',\n  gallery = [],\n  onPreviewClick,\n  onFetchSource,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  // Gallery is always previewable for the sender because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  return (\n    <MediaShell variant=\"dark\">\n      <PreviewToggle\n        onToggle={togglePreview}\n        isBusy={isBusy}\n        isPreviewVisible={!showLocked}\n      >\n        <CardThumbnail\n          variant=\"dark\"\n          gallery={gallery}\n          title={title}\n          showLocked={showLocked}\n          paymentStatus={paymentStatus}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={true}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The recipient's ('other') view of a paid media attachment: the locked\n * thumbnail (single or gallery) with an Unlock/Download CTA. The source is\n * revealed by fetching once — on click when already paid, or automatically\n * the first time a paid card scrolls into view.\n */\nconst OtherMediaCard: React.FC<\n  MediaCardSharedProps & {\n    isMine: false\n    onUnlockClick?: () => void\n    onDownloadClick?: () => void\n    isUnlocking?: boolean\n  }\n> = ({\n  title,\n  amountText,\n  thumbnailUrl,\n  mimeType = 'application/octet-stream',\n  detail,\n  gallery = [],\n  onUnlockClick,\n  onFetchSource,\n  onDownloadClick,\n  paymentStatus,\n  isUnlocking = false,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  const { source, cardRef, handleUnlockClick } = useReceivedSource({\n    paymentStatus,\n    onFetchSource,\n    onUnlockClick,\n  })\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveRedeemUrl = source?.redeemUrl\n\n  // For gallery, the per-item sources are carried by `gallery` itself, so\n  // the lock state is driven by paymentStatus rather than the single\n  // `effectiveSourceUrl`. Everything else still respects the source fetch.\n  const isLocked = isGallery\n    ? paymentStatus !== 'paid'\n    : effectiveSourceUrl === undefined\n  const sourceType = getSourceType(mimeType)\n\n  // For gallery, ReceivedCardActions falls back to a plain <button>\n  // (no anchor) because the gallery has no single sourceUrl to link to —\n  // the per-item sources live on `gallery` itself.\n  const actionSourceUrl = isGallery ? undefined : effectiveSourceUrl\n\n  return (\n    <MediaShell\n      variant=\"light\"\n      rootRef={cardRef}\n      data-testid=\"locked-attachment\"\n    >\n      <CardThumbnail\n        variant=\"light\"\n        gallery={gallery}\n        title={title}\n        showLocked={isLocked}\n        paymentStatus={paymentStatus}\n        mimeType={mimeType}\n        thumbnailUrl={thumbnailUrl}\n        source={source}\n        containedImage={!isLocked && sourceType === 'document'}\n      />\n\n      <CardBody\n        variant=\"light\"\n        title={title}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={false}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('light') : undefined}\n        action={\n          <ReceivedCardActions\n            isLocked={isLocked}\n            isUnlocking={isUnlocking}\n            sourceUrl={actionSourceUrl}\n            redeemUrl={effectiveRedeemUrl}\n            onUnlockClicked={handleUnlockClick}\n            onDownloadClicked={onDownloadClick}\n          />\n        }\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The card either party sees for a paid media attachment. `isMine` selects\n * the sender's preview view (tap-to-preview own draft) vs. the recipient's\n * unlock/download view.\n */\nconst MediaCard: React.FC<MediaCardProps> = (props) =>\n  props.isMine ? <OwnMediaCard {...props} /> : <OtherMediaCard {...props} />\n\nexport default MediaCard\n"],"names":["useReceivedSource","paymentStatus","onFetchSource","onUnlockClick","source","setSource","useState","cardRef","useRef","fetchingRef","onFetchSourceRef","fetchSource","useCallback","result","_a","handleUnlockClick","useEffect","observer","entry","buttonClass","ReceivedCardActions","isLocked","sourceUrl","redeemUrl","onUnlockClicked","onDownloadClicked","isUnlocking","jsx","LoadingDots","jsxs","React","LockSimpleIcon","href","DownloadSimpleIcon","OwnMediaCard","title","mimeType","thumbnailUrl","detail","amountText","placeholderTitle","gallery","onPreviewClick","isGallery","isGalleryCard","isPreviewVisible","isLoadingPreview","togglePreview","usePreviewToggle","showLocked","MediaShell","PreviewToggle","CardThumbnail","CardBody","PurchaseStatusBadge","galleryBodyIcon","OtherMediaCard","onDownloadClick","effectiveSourceUrl","effectiveRedeemUrl","sourceType","getSourceType","actionSourceUrl","MediaCard","props"],"mappings":"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"}

package/dist/Card-DIr1UnfC.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("classnames");const C=require("@phosphor-icons/react"),v=require("react"),M=require("./index-IkikzyWM.cjs"),s=require("./usePreviewToggle-B0B8cfxy.cjs"),y=require("./LoadingDots-Cn2y7g7L.cjs");function I({paymentStatus:r,onFetchSource:l,onUnlockClick:a}){const[t,d]=v.useState(),i=v.useRef(null),n=v.useRef(!1),u=v.useRef(l);u.current=l;const g=v.useCallback(async()=>{var o;if(!n.current){n.current=!0;try{const c=await((o=u.current)==null?void 0:o.call(u));c&&d(c)}finally{n.current=!1}}},[]),h=v.useCallback(()=>{r==="paid"?g():a==null||a()},[r,g,a]);return v.useEffect(()=>{if(!i.current||r!=="paid"||t!==void 0)return;const o=new IntersectionObserver(([c])=>{c.isIntersecting&&(g(),o.disconnect())},{threshold:1});return o.observe(i.current),()=>o.disconnect()},[r,t,g]),{source:t,cardRef:i,handleUnlockClick:h}}const R="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70",k=({isLocked:r,sourceUrl:l,redeemUrl:a,onUnlockClicked:t,onDownloadClicked:d,isUnlocking:i=!1})=>{if(r&&t!=null)return e.jsx("button",{type:"button",onClick:t,disabled:i,className:R,children:i?e.jsx(y.LoadingDots,{}):e.jsxs(v.Fragment,{children:[e.jsx(C.LockSimpleIcon,{className:"size-4",weight:"fill"}),"Unlock"]})});if(!r&&d!=null){const n=a??l;return n!=null?e.jsxs("a",{href:n,target:"_blank",rel:"noopener noreferrer",onClick:d,className:`${R} !text-white`,children:[e.jsx(C.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]}):e.jsxs("button",{type:"button",onClick:d,className:R,children:[e.jsx(C.DownloadSimpleIcon,{className:"size-4",weight:"bold"}),"Download"]})}return null},q=({title:r,mimeType:l="application/octet-stream",thumbnailUrl:a,detail:t,amountText:d,placeholderTitle:i="Attachment title",paymentStatus:n="pending",gallery:u=[],onPreviewClick:g,onFetchSource:h})=>{const o=s.isGalleryCard(u),{source:c,isPreviewVisible:f,isLoadingPreview:b,togglePreview:j}=s.usePreviewToggle({isGallery:o,onFetchSource:h,onPreviewClick:g}),x=!f,w=b;return e.jsxs(s.MediaShell,{variant:"dark",children:[e.jsx(s.PreviewToggle,{onToggle:j,isBusy:w,isPreviewVisible:!x,children:e.jsx(s.CardThumbnail,{variant:"dark",gallery:u,title:r,showLocked:x,paymentStatus:n,mimeType:l,thumbnailUrl:a,source:c})}),e.jsx(s.CardBody,{variant:"dark",title:r,placeholderTitle:i,mimeType:l,detail:t,statusBadge:e.jsx(y.PurchaseStatusBadge,{isMine:!0,paymentStatus:n,amountText:d}),icon:o?s.galleryBodyIcon("dark"):void 0})]})},S=({title:r,amountText:l,thumbnailUrl:a,mimeType:t="application/octet-stream",detail:d,gallery:i=[],onUnlockClick:n,onFetchSource:u,onDownloadClick:g,paymentStatus:h,isUnlocking:o=!1})=>{const c=s.isGalleryCard(i),{source:f,cardRef:b,handleUnlockClick:j}=I({paymentStatus:h,onFetchSource:u,onUnlockClick:n}),x=f==null?void 0:f.sourceUrl,w=f==null?void 0:f.redeemUrl,m=c?h!=="paid":x===void 0,P=M.getSourceType(t),B=c?void 0:x;return e.jsxs(s.MediaShell,{variant:"light",rootRef:b,"data-testid":"locked-attachment",children:[e.jsx(s.CardThumbnail,{variant:"light",gallery:i,title:r,showLocked:m,paymentStatus:h,mimeType:t,thumbnailUrl:a,source:f,containedImage:!m&&P==="document"}),e.jsx(s.CardBody,{variant:"light",title:r,mimeType:t,detail:d,statusBadge:e.jsx(y.PurchaseStatusBadge,{isMine:!1,paymentStatus:h,amountText:l}),icon:c?s.galleryBodyIcon("light"):void 0,action:e.jsx(k,{isLocked:m,isUnlocking:o,sourceUrl:B,redeemUrl:w,onUnlockClicked:j,onDownloadClicked:g})})]})},p=r=>r.isMine?e.jsx(q,{...r}):e.jsx(S,{...r});exports.default=p;
+//# sourceMappingURL=Card-DIr1UnfC.cjs.map

package/dist/Card-DIr1UnfC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DIr1UnfC.cjs","sources":["../src/components/LockedAttachment/components/_shared/useReceivedSource.ts","../src/components/LockedAttachment/components/Media/CardActions.tsx","../src/components/LockedAttachment/components/Media/Card.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\n\nexport interface UseReceivedSourceOptions {\n  paymentStatus?: PaymentStatus\n  onFetchSource?: FetchSourceHandler\n  /** Called on Unlock click while the card is still unpaid (opens checkout). */\n  onUnlockClick?: () => void\n}\n\nexport interface UseReceivedSourceResult {\n  source: LockedAttachmentSource | undefined\n  /** Attach to the card root so the paid-source auto-fetch can observe it. */\n  cardRef: React.RefObject<HTMLDivElement>\n  /** Fetches the source when already paid, else defers to `onUnlockClick`. */\n  handleUnlockClick: () => void\n}\n\n/**\n * Media !isMine's source-reveal logic: unlike Composer/Media isMine's\n * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source\n * by fetching once — on click when already paid, or automatically the first\n * time a paid card scrolls fully into view. The fetch is guarded so it runs\n * at most once in flight.\n */\nexport function useReceivedSource({\n  paymentStatus,\n  onFetchSource,\n  onUnlockClick,\n}: UseReceivedSourceOptions): UseReceivedSourceResult {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n\n  const cardRef = useRef<HTMLDivElement>(null)\n  const fetchingRef = useRef(false)\n\n  const onFetchSourceRef = useRef(onFetchSource)\n  onFetchSourceRef.current = onFetchSource\n\n  const fetchSource = useCallback(async (): Promise<void> => {\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    try {\n      const result = await onFetchSourceRef.current?.()\n      if (result) setSource(result)\n    } finally {\n      fetchingRef.current = false\n    }\n  }, [])\n\n  const handleUnlockClick = useCallback(() => {\n    if (paymentStatus === 'paid') {\n      void fetchSource()\n    } else {\n      onUnlockClick?.()\n    }\n  }, [paymentStatus, fetchSource, onUnlockClick])\n\n  // Auto-fetch the source once the paid card scrolls into view.\n  useEffect(() => {\n    if (!cardRef.current) return\n    if (paymentStatus !== 'paid' || source !== undefined) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void fetchSource()\n          observer.disconnect()\n        }\n      },\n      { threshold: 1.0 }\n    )\n\n    observer.observe(cardRef.current)\n    return () => observer.disconnect()\n  }, [paymentStatus, source, fetchSource])\n\n  return { source, cardRef, handleUnlockClick }\n}\n","import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport LoadingDots from '../_shared/LoadingDots'\n\nexport interface ReceivedCardActionsProps {\n  /** Whether the card is currently locked. Drives which CTA we render. */\n  isLocked: boolean\n  /**\n   * When unlocked, the URL used as the Download link's `href` (opens in a new\n   * tab). When omitted, the Download CTA falls back to a plain `<button>`\n   * that just calls `onDownloadClicked` — useful for galleries where the\n   * single-source URL doesn't exist.\n   */\n  sourceUrl?: string\n  /** Optional alternate href that takes precedence over `sourceUrl`. */\n  redeemUrl?: string\n  onUnlockClicked?: () => void\n  onDownloadClicked?: () => void\n  isUnlocking?: boolean\n}\n\nconst buttonClass =\n  'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70'\n\n/**\n * Renders the primary CTA below the body of a Received card.\n * - Locked + onUnlockClicked → \"Unlock\" button\n * - Unlocked + onDownloadClicked + (redeemUrl || sourceUrl) → \"Download\" link\n * - Unlocked + onDownloadClicked + no URL → \"Download\" button (e.g. gallery)\n * Otherwise renders nothing.\n */\nconst ReceivedCardActions: React.FC<ReceivedCardActionsProps> = ({\n  isLocked,\n  sourceUrl,\n  redeemUrl,\n  onUnlockClicked,\n  onDownloadClicked,\n  isUnlocking = false,\n}) => {\n  if (isLocked && onUnlockClicked != null) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onUnlockClicked}\n        disabled={isUnlocking}\n        className={buttonClass}\n      >\n        {isUnlocking ? (\n          <LoadingDots />\n        ) : (\n          <React.Fragment>\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" />\n            Unlock\n          </React.Fragment>\n        )}\n      </button>\n    )\n  }\n\n  if (!isLocked && onDownloadClicked != null) {\n    const href = redeemUrl ?? sourceUrl\n    if (href != null) {\n      return (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          onClick={onDownloadClicked}\n          className={`${buttonClass} !text-white`}\n        >\n          <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n          Download\n        </a>\n      )\n    }\n\n    return (\n      <button\n        type=\"button\"\n        onClick={onDownloadClicked}\n        className={buttonClass}\n      >\n        <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n        Download\n      </button>\n    )\n  }\n\n  return null\n}\n\nexport default ReceivedCardActions\n","import type React from 'react'\n\nimport { getSourceType } from '../../../AttachmentCard'\nimport type {\n  FetchSourceHandler,\n  LockedAttachmentGalleryItem,\n  PaymentStatus,\n} from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport CardThumbnail, {\n  galleryBodyIcon,\n  isGalleryCard,\n} from '../_shared/CardThumbnail'\nimport MediaShell from '../_shared/MediaShell'\nimport PreviewToggle from '../_shared/PreviewToggle'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\nimport { useReceivedSource } from '../_shared/useReceivedSource'\n\nimport ReceivedCardActions from './CardActions'\n\ninterface MediaCardSharedProps {\n  title?: string\n  mimeType?: string\n  thumbnailUrl?: string\n  detail?: string\n  amountText?: string\n  paymentStatus?: PaymentStatus\n  gallery?: LockedAttachmentGalleryItem[]\n  onFetchSource?: FetchSourceHandler\n}\n\nexport type MediaCardProps =\n  | (MediaCardSharedProps & {\n      isMine: true\n      /** Dimmed fallback shown in the title slot when `title` is unset. */\n      placeholderTitle?: string\n      /** Fired the first time the sender taps the thumbnail to preview their own attachment. */\n      onPreviewClick?: () => void\n    })\n  | (MediaCardSharedProps & {\n      isMine: false\n      /**\n       * When true, shows a loading spinner on the Unlock button. Driven by\n       * the LockedAttachmentContext (e.g. checkout in progress).\n       */\n      isUnlocking?: boolean\n      /**\n       * Called when the recipient clicks Unlock on an unpaid attachment.\n       * Use this to open a checkout flow. Omit to hide the Unlock button.\n       */\n      onUnlockClick?: () => void\n      /**\n       * Called when the recipient clicks Download on an unlocked card.\n       * Omit to hide the Download button.\n       */\n      onDownloadClick?: () => void\n    })\n\n/**\n * The sender's ('mine') view of a paid media attachment: the locked\n * thumbnail (single or gallery) they can tap to preview their own\n * attachment, plus the title/purchase-status body.\n */\nconst OwnMediaCard: React.FC<\n  MediaCardSharedProps & {\n    isMine: true\n    placeholderTitle?: string\n    onPreviewClick?: () => void\n  }\n> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  paymentStatus = 'pending',\n  gallery = [],\n  onPreviewClick,\n  onFetchSource,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  // Gallery is always previewable for the sender because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  return (\n    <MediaShell variant=\"dark\">\n      <PreviewToggle\n        onToggle={togglePreview}\n        isBusy={isBusy}\n        isPreviewVisible={!showLocked}\n      >\n        <CardThumbnail\n          variant=\"dark\"\n          gallery={gallery}\n          title={title}\n          showLocked={showLocked}\n          paymentStatus={paymentStatus}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={true}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The recipient's ('other') view of a paid media attachment: the locked\n * thumbnail (single or gallery) with an Unlock/Download CTA. The source is\n * revealed by fetching once — on click when already paid, or automatically\n * the first time a paid card scrolls into view.\n */\nconst OtherMediaCard: React.FC<\n  MediaCardSharedProps & {\n    isMine: false\n    onUnlockClick?: () => void\n    onDownloadClick?: () => void\n    isUnlocking?: boolean\n  }\n> = ({\n  title,\n  amountText,\n  thumbnailUrl,\n  mimeType = 'application/octet-stream',\n  detail,\n  gallery = [],\n  onUnlockClick,\n  onFetchSource,\n  onDownloadClick,\n  paymentStatus,\n  isUnlocking = false,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  const { source, cardRef, handleUnlockClick } = useReceivedSource({\n    paymentStatus,\n    onFetchSource,\n    onUnlockClick,\n  })\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveRedeemUrl = source?.redeemUrl\n\n  // For gallery, the per-item sources are carried by `gallery` itself, so\n  // the lock state is driven by paymentStatus rather than the single\n  // `effectiveSourceUrl`. Everything else still respects the source fetch.\n  const isLocked = isGallery\n    ? paymentStatus !== 'paid'\n    : effectiveSourceUrl === undefined\n  const sourceType = getSourceType(mimeType)\n\n  // For gallery, ReceivedCardActions falls back to a plain <button>\n  // (no anchor) because the gallery has no single sourceUrl to link to —\n  // the per-item sources live on `gallery` itself.\n  const actionSourceUrl = isGallery ? undefined : effectiveSourceUrl\n\n  return (\n    <MediaShell\n      variant=\"light\"\n      rootRef={cardRef}\n      data-testid=\"locked-attachment\"\n    >\n      <CardThumbnail\n        variant=\"light\"\n        gallery={gallery}\n        title={title}\n        showLocked={isLocked}\n        paymentStatus={paymentStatus}\n        mimeType={mimeType}\n        thumbnailUrl={thumbnailUrl}\n        source={source}\n        containedImage={!isLocked && sourceType === 'document'}\n      />\n\n      <CardBody\n        variant=\"light\"\n        title={title}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={\n          <PurchaseStatusBadge\n            isMine={false}\n            paymentStatus={paymentStatus}\n            amountText={amountText}\n          />\n        }\n        icon={isGallery ? galleryBodyIcon('light') : undefined}\n        action={\n          <ReceivedCardActions\n            isLocked={isLocked}\n            isUnlocking={isUnlocking}\n            sourceUrl={actionSourceUrl}\n            redeemUrl={effectiveRedeemUrl}\n            onUnlockClicked={handleUnlockClick}\n            onDownloadClicked={onDownloadClick}\n          />\n        }\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The card either party sees for a paid media attachment. `isMine` selects\n * the sender's preview view (tap-to-preview own draft) vs. the recipient's\n * unlock/download view.\n */\nconst MediaCard: React.FC<MediaCardProps> = (props) =>\n  props.isMine ? <OwnMediaCard {...props} /> : <OtherMediaCard {...props} />\n\nexport default MediaCard\n"],"names":["useReceivedSource","paymentStatus","onFetchSource","onUnlockClick","source","setSource","useState","cardRef","useRef","fetchingRef","onFetchSourceRef","fetchSource","useCallback","result","_a","handleUnlockClick","useEffect","observer","entry","buttonClass","ReceivedCardActions","isLocked","sourceUrl","redeemUrl","onUnlockClicked","onDownloadClicked","isUnlocking","jsx","LoadingDots","jsxs","React","LockSimpleIcon","href","DownloadSimpleIcon","OwnMediaCard","title","mimeType","thumbnailUrl","detail","amountText","placeholderTitle","gallery","onPreviewClick","isGallery","isGalleryCard","isPreviewVisible","isLoadingPreview","togglePreview","usePreviewToggle","showLocked","isBusy","MediaShell","PreviewToggle","CardThumbnail","CardBody","PurchaseStatusBadge","galleryBodyIcon","OtherMediaCard","onDownloadClick","effectiveSourceUrl","effectiveRedeemUrl","sourceType","getSourceType","actionSourceUrl","MediaCard","props"],"mappings":"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"}

package/dist/Card-DeSgaRTL.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@phosphor-icons/react"),T=require("react"),s=require("./usePreviewToggle-B0B8cfxy.cjs"),r=require("./TextShell-CKQOFxoH.cjs"),S=({text:t,amountText:i,placeholderAmountText:n,onDismiss:a})=>e.jsxs(r.TextShell,{isMine:!0,children:[e.jsx("div",{className:"pr-8",children:t||e.jsx(r.SkeletonTextLines,{variant:"dark",animate:!1})}),e.jsx(r.PriceLockRow,{children:e.jsx("span",{className:i?"text-white/55":"text-white/30",children:i||n})}),a&&e.jsx("button",{type:"button",onClick:a,className:"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15","aria-label":"Dismiss attachment",children:e.jsx(o.XIcon,{className:"size-3",weight:"bold"})})]}),z=({title:t,mimeType:i="application/octet-stream",thumbnailUrl:n,detail:a,amountText:l,placeholderTitle:m="Attachment title",placeholderAmountText:g,gallery:c=[],onDismiss:d,onPreviewClick:j,onFetchSource:w,onEditClick:h})=>{const x=s.isGalleryCard(c),{source:b,isPreviewVisible:v,isLoadingPreview:f,togglePreview:p}=s.usePreviewToggle({isGallery:x,onFetchSource:w,onPreviewClick:j}),u=!v,y=f,k=e.jsxs(T.Fragment,{children:[e.jsx("span",{className:"text-xs font-medium text-white/55",children:"•"}),e.jsx("span",{className:l?"text-xs font-medium text-white/55":"text-xs font-medium text-white/30",children:l||g})]}),C=d?e.jsx("button",{type:"button",onClick:N=>{N.stopPropagation(),d()},className:"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white","aria-label":"Dismiss attachment",children:e.jsx(o.XIcon,{className:"size-3",weight:"bold"})}):void 0,P=h?e.jsx("button",{type:"button",onClick:h,"aria-label":"Edit attachment",className:"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",children:e.jsx(o.PencilSimpleIcon,{className:"size-5",weight:"regular"})}):void 0;return e.jsxs(s.MediaShell,{variant:"dark",children:[e.jsx(s.PreviewToggle,{onToggle:p,isBusy:y,isPreviewVisible:!u,children:e.jsx(s.CardThumbnail,{variant:"dark",gallery:c,title:t,showLocked:u,mimeType:i,thumbnailUrl:n,source:b,topRight:C})}),e.jsx(s.CardBody,{variant:"dark",title:t,placeholderTitle:m,mimeType:i,detail:a,statusBadge:k,icon:x?s.galleryBodyIcon("dark"):void 0,trailingAction:P})]})},B=t=>t.contentType==="text"?e.jsx(S,{...t}):e.jsx(z,{...t});exports.default=B;
+//# sourceMappingURL=Card-DeSgaRTL.cjs.map

package/dist/Card-DeSgaRTL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DeSgaRTL.cjs","sources":["../src/components/LockedAttachment/components/Composer/Card.tsx"],"sourcesContent":["import { PencilSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport type { FetchSourceHandler, LockedAttachmentBaseProps } from '../../types'\nimport CardBody from '../_shared/CardBody'\nimport CardThumbnail, {\n  galleryBodyIcon,\n  isGalleryCard,\n} from '../_shared/CardThumbnail'\nimport MediaShell from '../_shared/MediaShell'\nimport PreviewToggle from '../_shared/PreviewToggle'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\nimport { usePreviewToggle } from '../_shared/usePreviewToggle'\n\nexport interface ComposerCardProps extends LockedAttachmentBaseProps {\n  /**\n   * The message's own text, shown as-is (not redacted yet — the message\n   * hasn't been sent). Only used when `contentType` is `\"text\"`.\n   */\n  text?: string\n  /** Placeholder shown in the amount slot before one is configured. */\n  placeholderAmountText?: string\n  /**\n   * Renders a persistent dismiss X on the thumbnail (media) or next to the\n   * text (text mode); called to remove the draft attachment. Unrelated to\n   * `TextCardProps.onDismiss`, which only appears for `isMine` after a\n   * failed payment.\n   */\n  onDismiss?: () => void\n  /** Fired the first time the composer taps the thumbnail to preview. */\n  onPreviewClick?: () => void\n  /**\n   * Lazily loads the underlying source so the composer can preview the\n   * attachment they're about to send. Called the first time the thumbnail is\n   * tapped; the returned source is cached and reused on subsequent toggles.\n   * Ignored when `contentType` is `\"text\"`.\n   */\n  onFetchSource?: FetchSourceHandler\n  /**\n   * When provided, renders a pencil button in the body bottom-right that the\n   * composer can use to edit the attachment metadata (e.g. open the price /\n   * gallery editor). Matches the Composer \"Button\" instance in Figma.\n   */\n  onEditClick?: () => void\n}\n\n/**\n * Composer card in text mode: a normal outgoing chat bubble showing the real\n * draft text (it hasn't been sent/redacted yet) plus a dismiss X and a price\n * row. Media-only props are ignored here.\n */\nconst ComposerTextCard: React.FC<ComposerCardProps> = ({\n  text,\n  amountText,\n  placeholderAmountText,\n  onDismiss,\n}) => (\n  <TextShell isMine>\n    <div className=\"pr-8\">\n      {text ? text : <SkeletonTextLines variant=\"dark\" animate={false} />}\n    </div>\n    <PriceLockRow>\n      <span className={amountText ? 'text-white/55' : 'text-white/30'}>\n        {amountText || placeholderAmountText}\n      </span>\n    </PriceLockRow>\n    {onDismiss && (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className=\"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n        aria-label=\"Dismiss attachment\"\n      >\n        <XIcon className=\"size-3\" weight=\"bold\" />\n      </button>\n    )}\n  </TextShell>\n)\n\n/**\n * Composer card in media mode: the locked thumbnail (single or gallery) the\n * composer taps to preview the attachment they're about to send, plus the\n * title/price body with optional dismiss X and edit pencil.\n */\nconst ComposerMediaCard: React.FC<ComposerCardProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  placeholderAmountText,\n  gallery = [],\n  onDismiss,\n  onPreviewClick,\n  onFetchSource,\n  onEditClick,\n}) => {\n  const isGallery = isGalleryCard(gallery)\n\n  // Gallery is always previewable in the composer because each item's source\n  // is already provided up-front via `gallery[*].sourceUrl`.\n  const { source, isPreviewVisible, isLoadingPreview, togglePreview } =\n    usePreviewToggle({ isGallery, onFetchSource, onPreviewClick })\n\n  const showLocked = !isPreviewVisible\n  const isBusy = isLoadingPreview\n\n  const statusBadge = (\n    <React.Fragment>\n      <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n      <span\n        className={\n          amountText\n            ? 'text-xs font-medium text-white/55'\n            : 'text-xs font-medium text-white/30'\n        }\n      >\n        {amountText || placeholderAmountText}\n      </span>\n    </React.Fragment>\n  )\n\n  const dismissButton = onDismiss ? (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        // Stop the click from bubbling up into the outer preview-toggle\n        // wrapper when both are wired up at the same time.\n        e.stopPropagation()\n        onDismiss()\n      }}\n      className=\"flex size-6 items-center justify-center rounded-full bg-[#121110] text-white\"\n      aria-label=\"Dismiss attachment\"\n    >\n      <XIcon className=\"size-3\" weight=\"bold\" />\n    </button>\n  ) : undefined\n\n  const editButton = onEditClick ? (\n    <button\n      type=\"button\"\n      onClick={onEditClick}\n      aria-label=\"Edit attachment\"\n      className=\"flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n    >\n      <PencilSimpleIcon className=\"size-5\" weight=\"regular\" />\n    </button>\n  ) : undefined\n\n  return (\n    <MediaShell variant=\"dark\">\n      <PreviewToggle\n        onToggle={togglePreview}\n        isBusy={isBusy}\n        isPreviewVisible={!showLocked}\n      >\n        <CardThumbnail\n          variant=\"dark\"\n          gallery={gallery}\n          title={title}\n          showLocked={showLocked}\n          mimeType={mimeType}\n          thumbnailUrl={thumbnailUrl}\n          source={source}\n          topRight={dismissButton}\n        />\n      </PreviewToggle>\n\n      <CardBody\n        variant=\"dark\"\n        title={title}\n        placeholderTitle={placeholderTitle}\n        mimeType={mimeType}\n        detail={detail}\n        statusBadge={statusBadge}\n        icon={isGallery ? galleryBodyIcon('dark') : undefined}\n        trailingAction={editButton}\n      />\n    </MediaShell>\n  )\n}\n\n/**\n * The card the composer sees while drafting a paid attachment.\n * Matches the Composer column of the messaging design system in Figma.\n *\n * When `contentType === \"text\"`, renders as a normal outgoing chat bubble\n * showing the real draft text (it hasn't been sent/redacted yet) plus a\n * dismiss X and a price row, instead of a media thumbnail card.\n */\nconst ComposerCard: React.FC<ComposerCardProps> = (props) =>\n  props.contentType === 'text' ? (\n    <ComposerTextCard {...props} />\n  ) : (\n    <ComposerMediaCard {...props} />\n  )\n\nexport default ComposerCard\n"],"names":["ComposerTextCard","text","amountText","placeholderAmountText","onDismiss","jsxs","TextShell","jsx","SkeletonTextLines","PriceLockRow","XIcon","ComposerMediaCard","title","mimeType","thumbnailUrl","detail","placeholderTitle","gallery","onPreviewClick","onFetchSource","onEditClick","isGallery","isGalleryCard","source","isPreviewVisible","isLoadingPreview","togglePreview","usePreviewToggle","showLocked","isBusy","statusBadge","React","dismissButton","e","editButton","PencilSimpleIcon","MediaShell","PreviewToggle","CardThumbnail","CardBody","galleryBodyIcon","ComposerCard","props"],"mappings":"8PAqDMA,EAAgD,CAAC,CACrD,KAAAC,EACA,WAAAC,EACA,sBAAAC,EACA,UAAAC,CACF,IACEC,EAAAA,KAACC,EAAAA,UAAA,CAAU,OAAM,GACf,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAU,OACZ,SAAAN,GAAcM,EAAAA,IAACC,EAAAA,kBAAA,CAAkB,QAAQ,OAAO,QAAS,EAAA,CAAO,EACnE,EACAD,EAAAA,IAACE,EAAAA,aAAA,CACC,SAAAF,EAAAA,IAAC,OAAA,CAAK,UAAWL,EAAa,gBAAkB,gBAC7C,SAAAA,GAAcC,CAAA,CACjB,CAAA,CACF,EACCC,GACCG,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAASH,EACT,UAAU,gIACV,aAAW,qBAEX,SAAAG,EAAAA,IAACG,QAAA,CAAM,UAAU,SAAS,OAAO,MAAA,CAAO,CAAA,CAAA,CAC1C,EAEJ,EAQIC,EAAiD,CAAC,CACtD,MAAAC,EACA,SAAAC,EAAW,2BACX,aAAAC,EACA,OAAAC,EACA,WAAAb,EACA,iBAAAc,EAAmB,mBACnB,sBAAAb,EACA,QAAAc,EAAU,CAAA,EACV,UAAAb,EACA,eAAAc,EACA,cAAAC,EACA,YAAAC,CACF,IAAM,CACJ,MAAMC,EAAYC,EAAAA,cAAcL,CAAO,EAIjC,CAAE,OAAAM,EAAQ,iBAAAC,EAAkB,iBAAAC,EAAkB,cAAAC,CAAA,EAClDC,EAAAA,iBAAiB,CAAE,UAAAN,EAAW,cAAAF,EAAe,eAAAD,EAAgB,EAEzDU,EAAa,CAACJ,EACdK,EAASJ,EAETK,EACJzB,EAAAA,KAAC0B,EAAM,SAAN,CACC,SAAA,CAAAxB,EAAAA,IAAC,OAAA,CAAK,UAAU,oCAAoC,SAAA,IAAM,EAC1DA,EAAAA,IAAC,OAAA,CACC,UACEL,EACI,oCACA,oCAGL,SAAAA,GAAcC,CAAA,CAAA,CACjB,EACF,EAGI6B,EAAgB5B,EACpBG,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAAU0B,GAAM,CAGdA,EAAE,gBAAA,EACF7B,EAAA,CACF,EACA,UAAU,+EACV,aAAW,qBAEX,SAAAG,EAAAA,IAACG,QAAA,CAAM,UAAU,SAAS,OAAO,MAAA,CAAO,CAAA,CAAA,EAExC,OAEEwB,EAAad,EACjBb,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAASa,EACT,aAAW,kBACX,UAAU,iGAEV,SAAAb,EAAAA,IAAC4B,mBAAA,CAAiB,UAAU,SAAS,OAAO,SAAA,CAAU,CAAA,CAAA,EAEtD,OAEJ,OACE9B,EAAAA,KAAC+B,EAAAA,WAAA,CAAW,QAAQ,OAClB,SAAA,CAAA7B,EAAAA,IAAC8B,EAAAA,cAAA,CACC,SAAUX,EACV,OAAAG,EACA,iBAAkB,CAACD,EAEnB,SAAArB,EAAAA,IAAC+B,EAAAA,cAAA,CACC,QAAQ,OACR,QAAArB,EACA,MAAAL,EACA,WAAAgB,EACA,SAAAf,EACA,aAAAC,EACA,OAAAS,EACA,SAAUS,CAAA,CAAA,CACZ,CAAA,EAGFzB,EAAAA,IAACgC,EAAAA,SAAA,CACC,QAAQ,OACR,MAAA3B,EACA,iBAAAI,EACA,SAAAH,EACA,OAAAE,EACA,YAAAe,EACA,KAAMT,EAAYmB,kBAAgB,MAAM,EAAI,OAC5C,eAAgBN,CAAA,CAAA,CAClB,EACF,CAEJ,EAUMO,EAA6CC,GACjDA,EAAM,cAAgB,OACpBnC,EAAAA,IAACP,EAAA,CAAkB,GAAG0C,CAAA,CAAO,EAE7BnC,EAAAA,IAACI,EAAA,CAAmB,GAAG+B,CAAA,CAAO"}

package/dist/Card-DnaXMVrT.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@phosphor-icons/react"),r=require("./LoadingDots-Cn2y7g7L.cjs"),i=require("./TextShell-CKQOFxoH.cjs"),x=({amountText:s,paymentStatus:a="pending",children:n})=>{const l=a==="failed";if(a==="paid"&&n)return e.jsxs(i.TextShell,{isMine:!0,children:[n,e.jsx("span",{className:"sr-only","aria-live":"polite",children:"Sold."}),e.jsxs(i.PriceLockRow,{children:[s!=null&&e.jsx("span",{className:"text-white/55",children:s}),e.jsx(r.PurchaseStatusBadge,{isMine:!0,paymentStatus:a})]})]});const t=l?"Payment failed.":a==="refunded"?"Refunded.":"Payment pending.";return e.jsxs(i.TextShell,{isMine:!0,children:[e.jsx(i.SkeletonTextLines,{variant:"dark",animate:a==="pending"}),e.jsx("span",{className:"sr-only","aria-live":"polite",children:t}),e.jsxs(i.PriceLockRow,{children:[s!=null&&e.jsx("span",{className:"text-white/55",children:s}),e.jsx(r.PurchaseStatusBadge,{isMine:!0,paymentStatus:a})]})]})},h=({amountText:s,paymentStatus:a,onUnlockClick:n,isUnlocking:l=!1,children:c})=>{if(a==="paid"&&c)return e.jsxs(i.TextShell,{isMine:!1,children:[c,e.jsxs(i.PriceLockRow,{children:[s!=null&&e.jsx("span",{className:"opacity-55",children:s}),e.jsx(r.PurchaseStatusBadge,{isMine:!1,paymentStatus:"paid"})]})]});const d=l?"Unlocking.":"Locked message available to unlock.";return e.jsx(i.TextShell,{isMine:!1,children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex flex-1 flex-col gap-2",children:[e.jsx(i.SkeletonTextLines,{variant:"light",animate:l}),e.jsx("span",{className:"sr-only","aria-live":"polite",children:d}),e.jsx(i.PriceLockRow,{children:s!=null&&e.jsx("span",{className:"opacity-55",children:s})})]}),e.jsx("button",{type:"button",onClick:n,disabled:l,"aria-label":l?"Unlocking":"Unlock","aria-busy":l,title:l?"Unlocking":"Unlock",className:"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]",children:l?e.jsx(r.LoadingDots,{}):e.jsx(o.LockSimpleIcon,{className:"size-4",weight:"fill","aria-hidden":!0})})]})})},j=s=>s.isMine?e.jsx(x,{...s}):e.jsx(h,{...s});exports.default=j;
+//# sourceMappingURL=Card-DnaXMVrT.cjs.map

package/dist/Card-DnaXMVrT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DnaXMVrT.cjs","sources":["../src/components/LockedAttachment/components/Text/Card.tsx"],"sourcesContent":["import { LockSimpleIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport type { PaymentStatus } from '../../types'\nimport LoadingDots from '../_shared/LoadingDots'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\n\ninterface TextCardSharedProps {\n  amountText?: string\n  paymentStatus?: PaymentStatus\n  /**\n   * The message's real, revealed content — shown instead of the skeleton\n   * loader once `paymentStatus` is `'paid'`. Ignored otherwise. Lets the\n   * caller supply its own text renderer (e.g. Stream's `MessageText`)\n   * without `LockedAttachment` depending on it.\n   */\n  children?: React.ReactNode\n}\n\nexport type TextCardProps =\n  | (TextCardSharedProps & {\n      isMine: true\n    })\n  | (TextCardSharedProps & {\n      isMine: false\n      /**\n       * Called when the recipient clicks Unlock on an unpaid attachment.\n       * Use this to open a checkout flow. Omit to hide the Unlock button.\n       */\n      onUnlockClick?: () => void\n      /**\n       * When true, shows a loading spinner on the Unlock button. Driven by\n       * the LockedAttachmentContext (e.g. checkout in progress).\n       */\n      isUnlocking?: boolean\n    })\n\n/**\n * The sender's ('mine') view of a paid text-only message: an outgoing chat\n * bubble showing a skeleton text loader in place of the redacted content (or\n * `children`, once paid), plus a lock/price/status row.\n */\nconst OwnTextCard: React.FC<TextCardSharedProps & { isMine: true }> = ({\n  amountText,\n  paymentStatus = 'pending',\n  children,\n}) => {\n  const isFailed = paymentStatus === 'failed'\n  const isPaid = paymentStatus === 'paid'\n\n  if (isPaid && children) {\n    return (\n      <TextShell isMine>\n        {children}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          Sold.\n        </span>\n        <PriceLockRow>\n          {amountText != null && (\n            <span className=\"text-white/55\">{amountText}</span>\n          )}\n          <PurchaseStatusBadge isMine={true} paymentStatus={paymentStatus} />\n        </PriceLockRow>\n      </TextShell>\n    )\n  }\n\n  const liveMessage = isFailed\n    ? 'Payment failed.'\n    : paymentStatus === 'refunded'\n      ? 'Refunded.'\n      : 'Payment pending.'\n\n  return (\n    <TextShell isMine>\n      <SkeletonTextLines variant=\"dark\" animate={paymentStatus === 'pending'} />\n      <span className=\"sr-only\" aria-live=\"polite\">\n        {liveMessage}\n      </span>\n      <PriceLockRow>\n        {amountText != null && (\n          <span className=\"text-white/55\">{amountText}</span>\n        )}\n        <PurchaseStatusBadge isMine={true} paymentStatus={paymentStatus} />\n      </PriceLockRow>\n    </TextShell>\n  )\n}\n\n/**\n * The recipient's ('other') view of a paid text-only message: a plain chat\n * bubble whose content is a skeleton text loader (or `children`, once paid)\n * plus a lock/price/status row. Two pre-purchase states exist — idle and\n * unlocking (checkout in flight) — plus the revealed state once\n * `paymentStatus` is `'paid'`.\n */\nconst OtherTextCard: React.FC<\n  TextCardSharedProps & {\n    isMine: false\n    onUnlockClick?: () => void\n    isUnlocking?: boolean\n  }\n> = ({\n  amountText,\n  paymentStatus,\n  onUnlockClick,\n  isUnlocking = false,\n  children,\n}) => {\n  const isPaid = paymentStatus === 'paid'\n\n  if (isPaid && children) {\n    return (\n      <TextShell isMine={false}>\n        {children}\n        <PriceLockRow>\n          {amountText != null && (\n            <span className=\"opacity-55\">{amountText}</span>\n          )}\n          <PurchaseStatusBadge isMine={false} paymentStatus=\"paid\" />\n        </PriceLockRow>\n      </TextShell>\n    )\n  }\n\n  const ariaLabel = isUnlocking\n    ? 'Unlocking.'\n    : 'Locked message available to unlock.'\n\n  return (\n    <TextShell isMine={false}>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex flex-1 flex-col gap-2\">\n          <SkeletonTextLines variant=\"light\" animate={isUnlocking} />\n          <span className=\"sr-only\" aria-live=\"polite\">\n            {ariaLabel}\n          </span>\n          <PriceLockRow>\n            {amountText != null && (\n              <span className=\"opacity-55\">{amountText}</span>\n            )}\n          </PriceLockRow>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onUnlockClick}\n          disabled={isUnlocking}\n          aria-label={isUnlocking ? 'Unlocking' : 'Unlock'}\n          aria-busy={isUnlocking}\n          title={isUnlocking ? 'Unlocking' : 'Unlock'}\n          className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]\"\n        >\n          {isUnlocking ? (\n            <LoadingDots />\n          ) : (\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" aria-hidden />\n          )}\n        </button>\n      </div>\n    </TextShell>\n  )\n}\n\n/**\n * The card either party sees for a paid text-only message — a chat bubble\n * showing a skeleton text loader (or `children`, once revealed) plus a\n * lock/price/status row. `isMine` selects the sender's payment-lifecycle view\n * (pending/failed/refunded/paid + Dismiss) vs. the recipient's unlock-flow\n * view (idle/unlocking + Unlock CTA).\n */\nconst TextCard: React.FC<TextCardProps> = (props) =>\n  props.isMine ? <OwnTextCard {...props} /> : <OtherTextCard {...props} />\n\nexport default TextCard\n"],"names":["OwnTextCard","amountText","paymentStatus","children","isFailed","jsxs","TextShell","PriceLockRow","jsx","PurchaseStatusBadge","liveMessage","SkeletonTextLines","OtherTextCard","onUnlockClick","isUnlocking","ariaLabel","LoadingDots","LockSimpleIcon","TextCard","props"],"mappings":"sOA6CMA,EAAgE,CAAC,CACrE,WAAAC,EACA,cAAAC,EAAgB,UAChB,SAAAC,CACF,IAAM,CACJ,MAAMC,EAAWF,IAAkB,SAGnC,GAFeA,IAAkB,QAEnBC,EACZ,OACEE,EAAAA,KAACC,EAAAA,UAAA,CAAU,OAAM,GACd,SAAA,CAAAH,QACA,OAAA,CAAK,UAAU,UAAU,YAAU,SAAS,SAAA,QAE7C,SACCI,EAAAA,aAAA,CACE,SAAA,CAAAN,GAAc,MACbO,EAAAA,IAAC,OAAA,CAAK,UAAU,gBAAiB,SAAAP,EAAW,EAE9CO,EAAAA,IAACC,EAAAA,oBAAA,CAAoB,OAAQ,GAAM,cAAAP,CAAA,CAA8B,CAAA,CAAA,CACnE,CAAA,EACF,EAIJ,MAAMQ,EAAcN,EAChB,kBACAF,IAAkB,WAChB,YACA,mBAEN,OACEG,EAAAA,KAACC,EAAAA,UAAA,CAAU,OAAM,GACf,SAAA,CAAAE,EAAAA,IAACG,EAAAA,kBAAA,CAAkB,QAAQ,OAAO,QAAST,IAAkB,UAAW,QACvE,OAAA,CAAK,UAAU,UAAU,YAAU,SACjC,SAAAQ,EACH,SACCH,EAAAA,aAAA,CACE,SAAA,CAAAN,GAAc,MACbO,EAAAA,IAAC,OAAA,CAAK,UAAU,gBAAiB,SAAAP,EAAW,EAE9CO,EAAAA,IAACC,EAAAA,oBAAA,CAAoB,OAAQ,GAAM,cAAAP,CAAA,CAA8B,CAAA,CAAA,CACnE,CAAA,EACF,CAEJ,EASMU,EAMF,CAAC,CACH,WAAAX,EACA,cAAAC,EACA,cAAAW,EACA,YAAAC,EAAc,GACd,SAAAX,CACF,IAAM,CAGJ,GAFeD,IAAkB,QAEnBC,EACZ,OACEE,EAAAA,KAACC,EAAAA,UAAA,CAAU,OAAQ,GAChB,SAAA,CAAAH,SACAI,EAAAA,aAAA,CACE,SAAA,CAAAN,GAAc,MACbO,EAAAA,IAAC,OAAA,CAAK,UAAU,aAAc,SAAAP,EAAW,EAE3CO,EAAAA,IAACC,EAAAA,oBAAA,CAAoB,OAAQ,GAAO,cAAc,MAAA,CAAO,CAAA,CAAA,CAC3D,CAAA,EACF,EAIJ,MAAMM,EAAYD,EACd,aACA,sCAEJ,aACGR,EAAAA,UAAA,CAAU,OAAQ,GACjB,SAAAD,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,6BACb,SAAA,CAAAG,EAAAA,IAACG,EAAAA,kBAAA,CAAkB,QAAQ,QAAQ,QAASG,EAAa,QACxD,OAAA,CAAK,UAAU,UAAU,YAAU,SACjC,SAAAC,EACH,EACAP,EAAAA,IAACD,EAAAA,cACE,SAAAN,GAAc,YACZ,OAAA,CAAK,UAAU,aAAc,SAAAA,CAAA,CAAW,CAAA,CAE7C,CAAA,EACF,EACAO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,QAASK,EACT,SAAUC,EACV,aAAYA,EAAc,YAAc,SACxC,YAAWA,EACX,MAAOA,EAAc,YAAc,SACnC,UAAU,4GAET,SAAAA,EACCN,EAAAA,IAACQ,EAAAA,YAAA,CAAA,CAAY,EAEbR,EAAAA,IAACS,EAAAA,eAAA,CAAe,UAAU,SAAS,OAAO,OAAO,cAAW,EAAA,CAAC,CAAA,CAAA,CAEjE,CAAA,CACF,CAAA,CACF,CAEJ,EASMC,EAAqCC,GACzCA,EAAM,OAASX,EAAAA,IAACR,EAAA,CAAa,GAAGmB,CAAA,CAAO,EAAKX,EAAAA,IAACI,EAAA,CAAe,GAAGO,CAAA,CAAO"}