@linktr.ee/messaging-react 1.36.0 → 1.38.0-rc-1777583423

package/dist/Card-BlXnKGaR.js

@@ -0,0 +1,127 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { LockSimpleIcon as N, DownloadSimpleIcon as A, LockOpenIcon as D, CheckCircleIcon as y } from "@phosphor-icons/react";
+import v, { useState as B, useRef as p, useCallback as w, useEffect as O } from "react";
+import { A as E, a as F } from "./index-jnKl3mQ0.js";
+const P = (r) => {
+  const {
+    isUnlocking: s = !1,
+    sourceUrl: a,
+    redeemUrl: d,
+    onUnlockClicked: f,
+    onDownloadClicked: n
+  } = r, c = a === void 0;
+  return c && f != null ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: f,
+      disabled: s,
+      className: "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",
+      children: s ? /* @__PURE__ */ e("span", { className: "size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" }) : /* @__PURE__ */ o(v.Fragment, { children: [
+        /* @__PURE__ */ e(N, { className: "size-4", weight: "fill" }),
+        "Unlock"
+      ] })
+    }
+  ) : !c && n != null && a != null ? /* @__PURE__ */ o(
+    "a",
+    {
+      href: d ?? a,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: n,
+      className: "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]",
+      children: [
+        /* @__PURE__ */ e(A, { className: "size-4", weight: "bold" }),
+        "Download"
+      ]
+    }
+  ) : null;
+}, V = ({
+  paymentStatus: r
+}) => /* @__PURE__ */ e("div", { className: "absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white", children: r === "paid" ? /* @__PURE__ */ e(D, {}) : /* @__PURE__ */ e(N, {}) }), J = ({
+  title: r,
+  amountText: s,
+  thumbnailUrl: a,
+  mimeType: d = "application/octet-stream",
+  detail: f,
+  onUnlockClick: n,
+  onFetchSource: c,
+  onDownloadClick: U,
+  paymentStatus: l,
+  isUnlocking: C = !1
+}) => {
+  const [t, I] = B(), b = p(null), g = p(!1), u = p(c);
+  u.current = c;
+  const x = t == null ? void 0 : t.sourceUrl, j = (t == null ? void 0 : t.thumbnailUrl) ?? a, z = t == null ? void 0 : t.redeemUrl, m = w(async () => {
+    var i;
+    if (!g.current) {
+      g.current = !0;
+      try {
+        const h = await ((i = u.current) == null ? void 0 : i.call(u));
+        h && I(h);
+      } finally {
+        g.current = !1;
+      }
+    }
+  }, []), L = w(() => {
+    l === "paid" ? m() : n == null || n();
+  }, [l, m, n]);
+  O(() => {
+    if (!b.current || l !== "paid" || t !== void 0) return;
+    const i = new IntersectionObserver(
+      ([h]) => {
+        h.isIntersecting && (m(), i.disconnect());
+      },
+      { threshold: 1 }
+    );
+    return i.observe(b.current), () => i.disconnect();
+  }, [l, t, m]);
+  const k = x === void 0, R = l === "paid" ? /* @__PURE__ */ o(v.Fragment, { children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[#008236]", children: "Purchased" }),
+    /* @__PURE__ */ e(y, { className: "size-4 text-[#008236]", weight: "bold" })
+  ] }) : s != null ? /* @__PURE__ */ o(v.Fragment, { children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: s })
+  ] }) : null;
+  return /* @__PURE__ */ e(
+    E,
+    {
+      variant: "light",
+      rootRef: b,
+      "data-testid": "locked-attachment",
+      title: r,
+      mimeType: d,
+      detail: f,
+      statusBadge: R,
+      thumbnail: /* @__PURE__ */ o("div", { className: "relative", children: [
+        /* @__PURE__ */ e(
+          F,
+          {
+            mimeType: d,
+            sourceUrl: x,
+            thumbnailUrl: j,
+            title: r,
+            variant: "light",
+            containedImage: !k
+          }
+        ),
+        k && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 bg-black/30", children: /* @__PURE__ */ e(V, { paymentStatus: l }) })
+      ] }),
+      action: /* @__PURE__ */ e(
+        P,
+        {
+          isUnlocking: C,
+          sourceUrl: x,
+          redeemUrl: z,
+          onUnlockClicked: L,
+          onDownloadClicked: U
+        }
+      )
+    }
+  );
+};
+export {
+  J as default
+};
+//# sourceMappingURL=Card-BlXnKGaR.js.map

package/dist/Card-BlXnKGaR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-BlXnKGaR.js","sources":["../src/components/LockedAttachment/components/Visitor/CardActions.tsx","../src/components/LockedAttachment/components/Visitor/LockBadge.tsx","../src/components/LockedAttachment/components/Visitor/Card.tsx"],"sourcesContent":["import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\ninterface CardActionsProps {\n  sourceUrl?: string\n  redeemUrl?: string\n  onUnlockClicked?: () => void\n  onDownloadClicked?: () => void\n  isUnlocking?: boolean\n}\n\nconst CardActions: React.FC<CardActionsProps> = (props) => {\n  const {\n    isUnlocking = false,\n    sourceUrl,\n    redeemUrl,\n    onUnlockClicked,\n    onDownloadClicked,\n  } = props\n\n  const isLocked = sourceUrl === undefined\n\n  if (isLocked && onUnlockClicked != null) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onUnlockClicked}\n        disabled={isUnlocking}\n        className=\"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        {isUnlocking ? (\n          <span className=\"size-4 animate-spin rounded-full border-2 border-white/30 border-t-white\" />\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 && sourceUrl != null) {\n    return (\n      <a\n        href={redeemUrl ?? sourceUrl}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onDownloadClicked}\n        className=\"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]\"\n      >\n        <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n        Download\n      </a>\n    )\n  }\n\n  return null\n}\n\n\nexport default CardActions\n","import { LockOpenIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\nimport type { PaymentStatus } from '../../types'\n\nexport const LockBadge: React.FC<{ paymentStatus?: PaymentStatus }> = ({\n  paymentStatus,\n}) => (\n  <div className=\"absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white\">\n    {paymentStatus === 'paid' ? <LockOpenIcon /> : <LockSimpleIcon />}\n  </div>\n)\n","import { CheckCircleIcon } from '@phosphor-icons/react'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport AttachmentCard, { AttachmentThumbnail } from '../../../AttachmentCard'\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n} from '../../types'\n\nimport CardActions from './CardActions'\nimport { LockBadge } from './LockBadge'\n\nexport interface VisitorCardProps extends LockedAttachmentBaseProps {\n  /**\n   * Called when the visitor 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 to fetch the attachment source — fired automatically when\n   * paymentStatus transitions to 'paid', or immediately on click when\n   * paymentStatus is already 'paid'. Return a LockedAttachmentSource to\n   * unlock the card.\n   */\n  onFetchSource?: () => Promise<LockedAttachmentSource | void>\n  /**\n   * Called when the visitor clicks Download on an unlocked card.\n   * Omit to hide the Download button.\n   */\n  onDownloadClick?: () => void\n  /**\n   * When true, shows loading dots on the Unlock button.\n   * Driven by the LockedAttachmentContext (e.g. checkout in progress, payment processing).\n   */\n  isUnlocking?: boolean\n}\n\nconst VisitorCard: React.FC<VisitorCardProps> = ({\n  title,\n  amountText,\n  thumbnailUrl,\n  mimeType = 'application/octet-stream',\n  detail,\n  onUnlockClick,\n  onFetchSource,\n  onDownloadClick,\n  paymentStatus,\n  isUnlocking = false,\n}) => {\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 effectiveSourceUrl = source?.sourceUrl\n  const effectiveThumbnail = source?.thumbnailUrl ?? thumbnailUrl\n  const effectiveRedeemUrl = source?.redeemUrl\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  // Fetch source when card is in viewport\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  const isLocked = effectiveSourceUrl === undefined\n\n  const statusBadge =\n    paymentStatus === 'paid' ? (\n      <React.Fragment>\n        <span className=\"text-xs font-medium text-black/55\">&bull;</span>\n        <span className=\"text-xs font-medium text-[#008236]\">Purchased</span>\n        <CheckCircleIcon className=\"size-4 text-[#008236]\" weight=\"bold\" />\n      </React.Fragment>\n    ) : amountText != null ? (\n      <React.Fragment>\n        <span className=\"text-xs font-medium text-black/55\">&bull;</span>\n        <span className=\"text-xs font-medium text-black/55\">{amountText}</span>\n      </React.Fragment>\n    ) : null\n\n  return (\n    <AttachmentCard\n      variant=\"light\"\n      rootRef={cardRef}\n      data-testid=\"locked-attachment\"\n      title={title}\n      mimeType={mimeType}\n      detail={detail}\n      statusBadge={statusBadge}\n      thumbnail={\n        <div className=\"relative\">\n          <AttachmentThumbnail\n            mimeType={mimeType}\n            sourceUrl={effectiveSourceUrl}\n            thumbnailUrl={effectiveThumbnail}\n            title={title}\n            variant=\"light\"\n            containedImage={!isLocked}\n          />\n          {isLocked && (\n            <div className=\"pointer-events-none absolute inset-0 bg-black/30\">\n              <LockBadge paymentStatus={paymentStatus} />\n            </div>\n          )}\n        </div>\n      }\n      action={\n        <CardActions\n          isUnlocking={isUnlocking}\n          sourceUrl={effectiveSourceUrl}\n          redeemUrl={effectiveRedeemUrl}\n          onUnlockClicked={handleUnlockClick}\n          onDownloadClicked={onDownloadClick}\n        />\n      }\n    />\n  )\n}\n\nexport default VisitorCard\n"],"names":["CardActions","props","isUnlocking","sourceUrl","redeemUrl","onUnlockClicked","onDownloadClicked","isLocked","jsx","jsxs","React","LockSimpleIcon","DownloadSimpleIcon","LockBadge","paymentStatus","LockOpenIcon","VisitorCard","title","amountText","thumbnailUrl","mimeType","detail","onUnlockClick","onFetchSource","onDownloadClick","source","setSource","useState","cardRef","useRef","fetchingRef","onFetchSourceRef","effectiveSourceUrl","effectiveThumbnail","effectiveRedeemUrl","fetchSource","useCallback","result","_a","handleUnlockClick","useEffect","observer","entry","statusBadge","CheckCircleIcon","AttachmentCard","AttachmentThumbnail"],"mappings":"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"}

package/dist/Card-DoNJA-jg.js

@@ -0,0 +1,138 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { CheckCircleIcon as C, XIcon as T, EyeIcon as B, EyeSlashIcon as D, LockOpenIcon as H, LockIcon as V } from "@phosphor-icons/react";
+import y from "classnames";
+import I, { useState as g, useRef as O, useCallback as P } from "react";
+import { A as X, a as q } from "./index-jnKl3mQ0.js";
+function G(d) {
+  const { onDismiss: n, onToggle: r, isExpanded: o, paymentStatus: l, isLoading: f } = d;
+  return n ? {
+    topLeft: void 0,
+    topRight: /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: n,
+        className: "flex size-8 items-center justify-center rounded-full bg-black/60 text-white",
+        "aria-label": "Dismiss attachment",
+        children: /* @__PURE__ */ e(T, { className: "size-4", weight: "bold" })
+      }
+    )
+  } : r ? {
+    topLeft: /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: r,
+        className: "flex size-8 items-center justify-center rounded-full bg-black/60 text-white",
+        "aria-label": o ? "Hide preview" : "Show preview",
+        "aria-pressed": o,
+        children: /* @__PURE__ */ e(o ? B : D, { className: "size-4", weight: "fill" })
+      }
+    ),
+    topRight: void 0
+  } : {
+    topLeft: /* @__PURE__ */ e("div", { className: "flex size-8 items-center justify-center rounded-full bg-black/60 text-white", children: f ? /* @__PURE__ */ e("span", { className: "size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" }) : /* @__PURE__ */ e(l === "paid" ? H : V, { className: "size-4", weight: "fill" }) }),
+    topRight: void 0
+  };
+}
+const Y = ({
+  title: d,
+  mimeType: n = "application/octet-stream",
+  thumbnailUrl: r,
+  detail: o,
+  amountText: l,
+  placeholderTitle: f = "Attachment title",
+  placeholderAmountText: x,
+  paymentStatus: m,
+  isUnlocking: L,
+  onDismiss: k,
+  onPreviewClick: c,
+  onFetchSource: u
+}) => {
+  const [t, z] = g(), [a, h] = g(!1), [R, v] = g(!1), p = O(!1), w = a ? t == null ? void 0 : t.sourceUrl : void 0, j = a ? (t == null ? void 0 : t.thumbnailUrl) ?? r : r, s = R || L, U = P(async () => {
+    if (c == null || c(), a) {
+      h(!1);
+      return;
+    }
+    if (t) {
+      h(!0);
+      return;
+    }
+    if (u && !p.current) {
+      p.current = !0, v(!0);
+      try {
+        const N = await u();
+        N && (z(N), h(!0));
+      } finally {
+        p.current = !1, v(!1);
+      }
+    }
+  }, [a, t, c, u]), i = u || c ? U : void 0, A = m === "paid" ? /* @__PURE__ */ b(I.Fragment, { children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[#34c759]", children: "Sold" }),
+    /* @__PURE__ */ e(C, { className: "size-4 text-[#34c759]", weight: "bold" })
+  ] }) : /* @__PURE__ */ b(I.Fragment, { children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: y("text-xs font-medium", {
+          "text-white/30": !l,
+          "text-white/55": !!l
+        }),
+        children: l || x
+      }
+    )
+  ] }), { topLeft: E, topRight: S } = G({
+    onDismiss: k,
+    onToggle: s ? void 0 : i,
+    isExpanded: a,
+    paymentStatus: m,
+    isLoading: s
+  });
+  return /* @__PURE__ */ e(
+    X,
+    {
+      variant: "dark",
+      title: d,
+      placeholderTitle: f,
+      mimeType: n,
+      detail: o,
+      statusBadge: A,
+      topLeft: E,
+      topRight: S,
+      thumbnail: /* @__PURE__ */ b(
+        "button",
+        {
+          type: "button",
+          disabled: !i || s,
+          className: y(
+            "relative block w-full overflow-hidden border-0 bg-white/10 p-0 text-left appearance-none",
+            { "cursor-pointer": !!i && !s, "cursor-default": !i || s }
+          ),
+          onClick: s ? void 0 : i,
+          "aria-label": i ? "Toggle preview" : void 0,
+          "aria-busy": s,
+          children: [
+            /* @__PURE__ */ e(
+              q,
+              {
+                mimeType: n,
+                sourceUrl: w,
+                thumbnailUrl: j,
+                title: d,
+                variant: "dark",
+                mediaPlayerProps: w ? { autoPlay: !0, loop: !0, controls: !0, muted: !1 } : void 0
+              }
+            ),
+            !a && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 bg-black/30" })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Y as default
+};
+//# sourceMappingURL=Card-DoNJA-jg.js.map

package/dist/Card-DoNJA-jg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-DoNJA-jg.js","sources":["../src/components/LockedAttachment/components/Creator/Card.tsx"],"sourcesContent":["import {\n  CheckCircleIcon,\n  EyeIcon,\n  EyeSlashIcon,\n  LockIcon,\n  LockOpenIcon,\n  XIcon,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useCallback, useRef, useState } from 'react'\n\nimport AttachmentCard, { AttachmentThumbnail } from '../../../AttachmentCard'\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\n\nexport interface CreatorCardProps extends LockedAttachmentBaseProps {\n  placeholderTitle?: string\n  placeholderAmountText?: string\n  isUnlocking?: boolean\n  onDismiss?: () => void\n  onPreviewClick?: () => void\n  onFetchSource?: () => Promise<LockedAttachmentSource | void>\n}\n\nfunction headerSlots(props: {\n  onDismiss?: () => void\n  onToggle?: () => void\n  isExpanded?: boolean\n  paymentStatus?: PaymentStatus\n  isLoading?: boolean\n}): { topLeft?: React.ReactNode; topRight?: React.ReactNode } {\n  const { onDismiss, onToggle, isExpanded, paymentStatus, isLoading } = props\n\n  if (onDismiss) {\n    return {\n      topLeft: undefined,\n      topRight: (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          className=\"flex size-8 items-center justify-center rounded-full bg-black/60 text-white\"\n          aria-label=\"Dismiss attachment\"\n        >\n          <XIcon className=\"size-4\" weight=\"bold\" />\n        </button>\n      ),\n    }\n  }\n\n  if (onToggle) {\n    const Icon = isExpanded ? EyeIcon : EyeSlashIcon\n    return {\n      topLeft: (\n        <button\n          type=\"button\"\n          onClick={onToggle}\n          className=\"flex size-8 items-center justify-center rounded-full bg-black/60 text-white\"\n          aria-label={isExpanded ? 'Hide preview' : 'Show preview'}\n          aria-pressed={isExpanded}\n        >\n          <Icon className=\"size-4\" weight=\"fill\" />\n        </button>\n      ),\n      topRight: undefined,\n    }\n  }\n\n  const Icon = paymentStatus === 'paid' ? LockOpenIcon : LockIcon\n\n  return {\n    topLeft: (\n      <div className=\"flex size-8 items-center justify-center rounded-full bg-black/60 text-white\">\n        {isLoading ? (\n          <span className=\"size-4 animate-spin rounded-full border-2 border-white/30 border-t-white\" />\n        ) : (\n          <Icon className=\"size-4\" weight=\"fill\" />\n        )}\n      </div>\n    ),\n    topRight: undefined,\n  }\n}\n\nconst CreatorCard: React.FC<CreatorCardProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  placeholderAmountText,\n  paymentStatus,\n  isUnlocking,\n  onDismiss,\n  onPreviewClick,\n  onFetchSource,\n}) => {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n  const [isPreviewVisible, setIsPreviewVisible] = useState(false)\n  const [isLoadingPreview, setLoadingPreview] = useState(false)\n  const fetchingRef = useRef(false)\n\n  const effectiveSourceUrl = isPreviewVisible ? source?.sourceUrl : undefined\n  const effectiveThumbnailUrl = isPreviewVisible ? (source?.thumbnailUrl ?? thumbnailUrl) : thumbnailUrl\n  const isBusy = isLoadingPreview || isUnlocking\n\n  const handleToggle = useCallback(async () => {\n    onPreviewClick?.()\n    if (isPreviewVisible) {\n      setIsPreviewVisible(false)\n      return\n    }\n    if (source) {\n      setIsPreviewVisible(true)\n      return\n    }\n    if (!onFetchSource) return\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    setLoadingPreview(true)\n    try {\n      const result = await onFetchSource()\n      if (result) {\n        setSource(result)\n        setIsPreviewVisible(true)\n      }\n    } finally {\n      fetchingRef.current = false\n      setLoadingPreview(false)\n    }\n  }, [isPreviewVisible, source, onPreviewClick, onFetchSource])\n\n  const toggleHandler = onFetchSource || onPreviewClick ? handleToggle : undefined\n\n  const statusBadge =\n    paymentStatus === 'paid' ? (\n      <React.Fragment>\n        <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n        <span className=\"text-xs font-medium text-[#34c759]\">Sold</span>\n        <CheckCircleIcon className=\"size-4 text-[#34c759]\" weight=\"bold\" />\n      </React.Fragment>\n    ) : (\n      <React.Fragment>\n        <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n        <span\n          className={classNames('text-xs font-medium', {\n            'text-white/30': !amountText,\n            'text-white/55': !!amountText,\n          })}\n        >\n          {amountText || placeholderAmountText}\n        </span>\n      </React.Fragment>\n    )\n\n  const { topLeft, topRight } = headerSlots({\n    onDismiss,\n    onToggle: isBusy ? undefined : toggleHandler,\n    isExpanded: isPreviewVisible,\n    paymentStatus,\n    isLoading: isBusy,\n  })\n\n  return (\n    <AttachmentCard\n      variant=\"dark\"\n      title={title}\n      placeholderTitle={placeholderTitle}\n      mimeType={mimeType}\n      detail={detail}\n      statusBadge={statusBadge}\n      topLeft={topLeft}\n      topRight={topRight}\n      thumbnail={\n        <button\n          type=\"button\"\n          disabled={!toggleHandler || isBusy}\n          className={classNames(\n            'relative block w-full overflow-hidden border-0 bg-white/10 p-0 text-left appearance-none',\n            { 'cursor-pointer': !!toggleHandler && !isBusy, 'cursor-default': !toggleHandler || isBusy }\n          )}\n          onClick={isBusy ? undefined : toggleHandler}\n          aria-label={toggleHandler ? 'Toggle preview' : undefined}\n          aria-busy={isBusy}\n        >\n          <AttachmentThumbnail\n            mimeType={mimeType}\n            sourceUrl={effectiveSourceUrl}\n            thumbnailUrl={effectiveThumbnailUrl}\n            title={title}\n            variant=\"dark\"\n            mediaPlayerProps={\n              effectiveSourceUrl\n                ? { autoPlay: true, loop: true, controls: true, muted: false }\n                : undefined\n            }\n          />\n          {!isPreviewVisible && (\n            <div className=\"pointer-events-none absolute inset-0 bg-black/30\" />\n          )}\n        </button>\n      }\n    />\n  )\n}\n\nexport default CreatorCard\n"],"names":["headerSlots","props","onDismiss","onToggle","isExpanded","paymentStatus","isLoading","jsx","XIcon","EyeIcon","EyeSlashIcon","LockOpenIcon","LockIcon","CreatorCard","title","mimeType","thumbnailUrl","detail","amountText","placeholderTitle","placeholderAmountText","isUnlocking","onPreviewClick","onFetchSource","source","setSource","useState","isPreviewVisible","setIsPreviewVisible","isLoadingPreview","setLoadingPreview","fetchingRef","useRef","effectiveSourceUrl","effectiveThumbnailUrl","isBusy","handleToggle","useCallback","result","toggleHandler","statusBadge","jsxs","React","CheckCircleIcon","classNames","topLeft","topRight","AttachmentCard","AttachmentThumbnail"],"mappings":"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"}