@linktr.ee/messaging-react 4.2.1-rc-1787343260 → 4.3.0-rc-1787409421

package/dist/Card-DyoGzhhM.js

@@ -0,0 +1,1033 @@
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
+import { CircleNotchIcon as be, PlayIcon as H, PauseIcon as ge, LockOpenIcon as ve, LockSimpleIcon as re, CaretLeftIcon as we, CaretRightIcon as pe, ImagesIcon as xe, DownloadSimpleIcon as ie, XIcon as ye, PencilSimpleIcon as Ne } from "@phosphor-icons/react";
+import T, { useRef as I, useState as y, useCallback as L, useEffect as C } from "react";
+import z from "classnames";
+import { g as S, r as E, o as X } from "./index-Cc8BzIhS.js";
+import { L as ke, P as se } from "./PurchaseStatusBadge-D1RRsubZ.js";
+const Pe = (t) => {
+  var a, n;
+  return "touches" in t ? ((a = t.touches[0]) == null ? void 0 : a.clientX) ?? ((n = t.changedTouches[0]) == null ? void 0 : n.clientX) ?? 0 : t.clientX;
+}, ze = ({
+  source: t,
+  mimeType: a,
+  poster: n,
+  autoPlay: s = !1,
+  playing: i,
+  loop: o = !1,
+  controls: c = !0,
+  showProgress: h = !1,
+  muted: f = !1,
+  onContainerClick: l
+}) => {
+  const d = S(a), u = I(null), b = I(null), p = I(null), P = I(i), [v, w] = y(s), [N, k] = y(0), [x, A] = y(!1), [U, B] = y(!1), [V, F] = y(!1), [ue, M] = y(!1), [Z, ee] = y(!0), [J, fe] = y(null), te = L(() => {
+    F(!1), w(!0);
+  }, []), K = L((r) => {
+    const m = b.current;
+    if (!m) return 0;
+    const D = m.getBoundingClientRect();
+    return Math.max(
+      0,
+      Math.min(1, (Pe(r) - D.left) / D.width)
+    );
+  }, []), j = L((r) => {
+    const m = u.current;
+    m && m.duration && (m.currentTime = r * m.duration);
+  }, []), G = (r) => {
+    r.stopPropagation(), A(!0);
+    const m = K(r);
+    k(m), j(m);
+  }, ae = L(
+    (r) => {
+      r.key === "ArrowRight" && j(Math.min(1, N + 0.05)), r.key === "ArrowLeft" && j(Math.max(0, N - 0.05));
+    },
+    [j, N]
+  );
+  C(() => {
+    i !== void 0 && i !== P.current && (P.current = i, w(i));
+  }, [i]), C(() => {
+    if (!v) {
+      p.current !== null && (cancelAnimationFrame(p.current), p.current = null);
+      return;
+    }
+    const r = () => {
+      const m = u.current;
+      m && m.duration && !x && k(m.currentTime / m.duration), p.current = requestAnimationFrame(r);
+    };
+    return p.current = requestAnimationFrame(r), () => {
+      p.current !== null && cancelAnimationFrame(p.current);
+    };
+  }, [v, x]), C(() => {
+    const r = u.current;
+    r && (v ? r.play().catch((m) => {
+      w(!1), F(!0);
+    }) : r.pause());
+  }, [v]), C(() => {
+    if (!x) return;
+    const r = (D) => k(K(D)), m = (D) => {
+      A(!1), j(K(D));
+    };
+    return window.addEventListener("mousemove", r), window.addEventListener("mouseup", m), window.addEventListener("touchmove", r, { passive: !0 }), window.addEventListener("touchend", m), () => {
+      window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", m), window.removeEventListener("touchmove", r), window.removeEventListener("touchend", m);
+    };
+  }, [x, K, j]);
+  const he = J ? { aspectRatio: String(J) } : void 0, me = J ? "" : " aspect-video", R = Math.round(N * 100);
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      className: `relative cursor-pointer overflow-hidden bg-black ${me}`,
+      style: he,
+      onClick: (r) => {
+        if (l) {
+          l(r);
+          return;
+        }
+        V || c && w((m) => !m);
+      },
+      onKeyDown: (r) => {
+        if (!(r.key !== "Enter" && r.key !== " ")) {
+          if (r.preventDefault(), l) {
+            l(r);
+            return;
+          }
+          V || c && w((m) => !m);
+        }
+      },
+      children: [
+        n && (d === "audio" || Z) && /* @__PURE__ */ e(
+          "img",
+          {
+            src: n,
+            alt: "",
+            className: "absolute inset-0 h-full w-full object-cover"
+          }
+        ),
+        !n && (d === "audio" || Z) && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: E(a, {
+          className: "size-12 text-black/20",
+          weight: "regular"
+        }) }),
+        /* @__PURE__ */ e("div", { className: "absolute inset-0", children: d === "audio" ? /* @__PURE__ */ e(
+          "audio",
+          {
+            ref: u,
+            src: t,
+            loop: o,
+            muted: f,
+            style: { width: "100%", height: "100%" },
+            onLoadStart: () => M(!0),
+            onCanPlay: () => {
+              M(!1), ee(!1);
+            },
+            onWaiting: () => M(!0),
+            onPlay: () => F(!1),
+            onEnded: () => {
+              o || (w(!1), k(0));
+            },
+            children: /* @__PURE__ */ e("track", { kind: "captions" })
+          }
+        ) : /* @__PURE__ */ e(
+          "video",
+          {
+            ref: u,
+            src: t,
+            loop: o,
+            muted: f,
+            playsInline: !0,
+            style: { width: "100%", height: "100%" },
+            onLoadStart: () => M(!0),
+            onCanPlay: () => {
+              M(!1), ee(!1);
+            },
+            onWaiting: () => M(!0),
+            onPlay: () => F(!1),
+            onLoadedMetadata: () => {
+              const r = u.current;
+              r instanceof HTMLVideoElement && r.videoWidth && r.videoHeight && fe(r.videoWidth / r.videoHeight);
+            },
+            onEnded: () => {
+              o || (w(!1), k(0));
+            },
+            children: /* @__PURE__ */ e("track", { kind: "captions" })
+          }
+        ) }),
+        ue && !V && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ e(
+          be,
+          {
+            className: "size-8 animate-spin text-white/80",
+            weight: "bold"
+          }
+        ) }),
+        V && !c && /* @__PURE__ */ e(
+          "div",
+          {
+            className: "absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black/35",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Play preview",
+            onClick: (r) => {
+              r.stopPropagation(), te();
+            },
+            onKeyDown: (r) => {
+              r.key !== "Enter" && r.key !== " " || (r.preventDefault(), r.stopPropagation(), te());
+            },
+            children: /* @__PURE__ */ e("span", { className: "flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm", children: /* @__PURE__ */ e(H, { className: "size-9 translate-x-0.5", weight: "fill" }) })
+          }
+        ),
+        h && !c && /* @__PURE__ */ e("div", { className: "absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent", children: /* @__PURE__ */ e(
+          "div",
+          {
+            role: "slider",
+            "aria-label": "Playback position",
+            "aria-valuenow": R,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            tabIndex: 0,
+            ref: b,
+            className: "relative flex h-4 w-full cursor-pointer items-center",
+            onMouseDown: G,
+            onTouchStart: G,
+            onClick: (r) => r.stopPropagation(),
+            onKeyDown: ae,
+            children: /* @__PURE__ */ e("div", { className: "w-full overflow-hidden rounded-full bg-white/30 h-1", children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: "h-full rounded-full bg-white",
+                style: { width: `${R}%` }
+              }
+            ) })
+          }
+        ) }),
+        c && /* @__PURE__ */ g("div", { className: "absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: (r) => {
+                r.stopPropagation(), w((m) => !m);
+              },
+              className: "shrink-0 text-white",
+              "aria-label": v ? "Pause" : "Play",
+              children: v ? /* @__PURE__ */ e(ge, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ e(H, { className: "size-5 translate-x-px", weight: "fill" })
+            }
+          ),
+          /* @__PURE__ */ g(
+            "div",
+            {
+              role: "slider",
+              "aria-label": "Playback position",
+              "aria-valuenow": R,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              tabIndex: 0,
+              ref: b,
+              className: "relative flex h-4 w-full cursor-pointer items-center",
+              onMouseDown: G,
+              onTouchStart: G,
+              onClick: (r) => r.stopPropagation(),
+              onMouseEnter: () => B(!0),
+              onMouseLeave: () => B(!1),
+              onKeyDown: ae,
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${U || x ? "h-1.5" : "h-1"}`,
+                    children: /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "h-full rounded-full bg-white",
+                        style: { width: `${R}%` }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${U || x ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
+                    style: { left: `${R}%` }
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, ne = (t) => t === "dark" ? "size-12 text-white/20" : "size-12 text-black/20", Q = (t) => t === "dark" ? "aspect-video overflow-hidden bg-white/10" : "aspect-video overflow-hidden bg-black/5", le = ({
+  mimeType: t,
+  sourceUrl: a,
+  thumbnailUrl: n,
+  title: s,
+  variant: i,
+  mediaPlayerProps: o,
+  containedImage: c = !1
+}) => {
+  const h = S(t), [f, l] = y(!1), d = X(a), u = X(n);
+  return a && (h === "video" || h === "audio") ? /* @__PURE__ */ e(
+    ze,
+    {
+      source: a,
+      mimeType: t,
+      poster: u,
+      controls: !0,
+      ...o
+    }
+  ) : a && h === "image" ? c ? /* @__PURE__ */ e("div", { className: `relative ${Q(i)}`, children: /* @__PURE__ */ e(
+    "img",
+    {
+      src: d ?? a,
+      alt: s ?? "",
+      className: `absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${f ? "opacity-100" : "opacity-0"}`,
+      draggable: !1,
+      onLoad: () => l(!0)
+    }
+  ) }) : /* @__PURE__ */ e(
+    "img",
+    {
+      src: d ?? a,
+      alt: s ?? "",
+      className: "block w-full",
+      draggable: !1
+    }
+  ) : a && h === "document" ? n ? c ? /* @__PURE__ */ e("div", { className: `relative ${Q(i)}`, children: /* @__PURE__ */ e(
+    "img",
+    {
+      src: u ?? n,
+      alt: s ?? "",
+      className: `absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${f ? "opacity-100" : "opacity-0"}`,
+      draggable: !1,
+      onLoad: () => l(!0)
+    }
+  ) }) : /* @__PURE__ */ e(
+    "img",
+    {
+      src: u ?? n,
+      alt: "",
+      className: "block w-full",
+      draggable: !1
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: `flex aspect-video w-full items-center justify-center ${i === "dark" ? "bg-white/10" : "bg-black/5"}`,
+      children: E(t, {
+        className: ne(i),
+        weight: "regular"
+      })
+    }
+  ) : n ? /* @__PURE__ */ e("div", { className: `relative ${Q(i)}`, children: /* @__PURE__ */ e(
+    "img",
+    {
+      src: u ?? n,
+      alt: s ?? "",
+      draggable: !1,
+      className: "absolute inset-0 h-full w-full object-cover"
+    }
+  ) }) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: `flex aspect-video w-full items-center justify-center ${i === "dark" ? "bg-white/10" : "bg-black/5"}`,
+      children: E(t, {
+        className: ne(i),
+        weight: "regular"
+      })
+    }
+  );
+}, q = ({
+  variant: t,
+  title: a,
+  placeholderTitle: n = "Attachment title",
+  mimeType: s,
+  detail: i,
+  statusBadge: o,
+  action: c,
+  icon: h,
+  trailingAction: f
+}) => {
+  const l = t === "dark", d = a || n, u = !a, b = h ?? E(s, {
+    className: z(
+      "size-5 shrink-0",
+      l ? "text-white/55" : "text-black/55"
+    ),
+    weight: "regular"
+  });
+  return /* @__PURE__ */ g("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ g("div", { className: "flex items-end gap-3", children: [
+      /* @__PURE__ */ g("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        d.trim() !== "" && /* @__PURE__ */ e(
+          "p",
+          {
+            className: z(
+              "truncate text-base font-medium leading-6",
+              {
+                "text-black/90": !l && !u,
+                "text-black/30": !l && u,
+                "text-white/30": l && u,
+                "text-white": l && !u
+              }
+            ),
+            children: d
+          }
+        ),
+        /* @__PURE__ */ g("div", { className: "flex flex-wrap items-center gap-1", children: [
+          b,
+          i != null && i !== "" && /* @__PURE__ */ e(
+            "span",
+            {
+              className: z(
+                "text-xs font-medium",
+                l ? "text-white/55" : "text-black/55"
+              ),
+              children: i
+            }
+          ),
+          o
+        ] })
+      ] }),
+      f && /* @__PURE__ */ e("div", { className: "shrink-0", children: f })
+    ] }),
+    c
+  ] });
+}, oe = ({
+  paymentStatus: t,
+  mimeType: a,
+  isPlayable: n,
+  isLocked: s
+}) => {
+  const i = a ? S(a) : void 0, c = (n ?? (i === "video" || i === "audio")) && !s ? H : t === "paid" ? ve : re;
+  return /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: z(
+        "flex size-12 items-center justify-center rounded-full bg-black/30 text-white",
+        c === H && "group-hover:bg-black/40"
+      ),
+      children: /* @__PURE__ */ e(c, { className: "size-6", weight: "fill" })
+    }
+  ) });
+};
+function Ie(t) {
+  const a = S(t.mimeType);
+  return a === "video" || a === "audio";
+}
+const Le = ({
+  variant: t,
+  gallery: a,
+  title: n,
+  showLocked: s,
+  paymentStatus: i,
+  topRight: o
+}) => {
+  const [c, h] = y(0), f = a.length, l = Math.min(c, f - 1), d = a[l], u = Ie(d), b = X(
+    d.thumbnailUrl
+  ), p = (k) => {
+    k.stopPropagation(), h((x) => Math.max(0, x - 1));
+  }, P = (k) => {
+    k.stopPropagation(), h((x) => Math.min(f - 1, x + 1));
+  }, v = l === 0, w = l === f - 1, N = t === "dark";
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: z(
+        "group relative overflow-hidden rounded-t-md",
+        s ? "aspect-[337/386]" : void 0
+      ),
+      children: [
+        s ? /* @__PURE__ */ e(
+          "div",
+          {
+            className: z(
+              "absolute inset-0",
+              N ? "bg-white/10" : "bg-black/5"
+            ),
+            children: d.thumbnailUrl && /* @__PURE__ */ e(
+              "img",
+              {
+                src: b ?? d.thumbnailUrl,
+                alt: "",
+                "aria-hidden": !0,
+                draggable: !1,
+                className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ e(
+          le,
+          {
+            mimeType: d.mimeType,
+            sourceUrl: d.sourceUrl,
+            thumbnailUrl: d.thumbnailUrl,
+            title: n,
+            variant: t,
+            mediaPlayerProps: { autoPlay: !0 }
+          },
+          l
+        ),
+        s && /* @__PURE__ */ e(
+          oe,
+          {
+            paymentStatus: i,
+            isPlayable: u,
+            isLocked: s
+          }
+        ),
+        f > 1 && /* @__PURE__ */ g(T.Fragment, { children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: p,
+              disabled: v,
+              "aria-label": "Previous item",
+              className: z(
+                "absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",
+                v ? "opacity-40" : "hover:bg-black/40"
+              ),
+              children: /* @__PURE__ */ e(we, { className: "size-5", weight: "bold" })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: P,
+              disabled: w,
+              "aria-label": "Next item",
+              className: z(
+                "absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",
+                w ? "opacity-40" : "hover:bg-black/40"
+              ),
+              children: /* @__PURE__ */ e(pe, { className: "size-5", weight: "bold" })
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30", children: /* @__PURE__ */ g("span", { className: "text-xs font-medium leading-none text-white", children: [
+            l + 1,
+            "/",
+            f
+          ] }) })
+        ] }),
+        o && /* @__PURE__ */ e("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: o })
+      ]
+    }
+  );
+}, Me = ({
+  variant: t,
+  mimeType: a,
+  thumbnailUrl: n,
+  title: s,
+  source: i,
+  showLocked: o,
+  paymentStatus: c,
+  topRight: h,
+  containedImage: f = !1
+}) => {
+  const l = o || i == null ? void 0 : i.sourceUrl, d = o ? n : (i == null ? void 0 : i.thumbnailUrl) ?? n, u = X(
+    d
+  ), b = t === "dark";
+  return /* @__PURE__ */ g("div", { className: "relative overflow-hidden rounded-t-md", children: [
+    o ? /* @__PURE__ */ g(
+      "div",
+      {
+        className: z(
+          "relative aspect-video overflow-hidden",
+          b ? "bg-white/10" : "bg-black/5"
+        ),
+        children: [
+          d ? /* @__PURE__ */ e(
+            "img",
+            {
+              src: u ?? d,
+              alt: "",
+              "aria-hidden": !0,
+              draggable: !1,
+              className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            }
+          ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: E(a, {
+            className: b ? "size-12 text-white/20" : "size-12 text-black/20",
+            weight: "regular"
+          }) }),
+          /* @__PURE__ */ e(
+            oe,
+            {
+              paymentStatus: c,
+              mimeType: a,
+              isLocked: o
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ e(
+      le,
+      {
+        mimeType: a,
+        sourceUrl: l,
+        thumbnailUrl: d,
+        title: s,
+        variant: t,
+        containedImage: f,
+        mediaPlayerProps: l ? { autoPlay: !0, loop: !0, controls: !0, muted: !1 } : void 0
+      }
+    ),
+    h && /* @__PURE__ */ e("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: h })
+  ] });
+}, $ = (t) => t.length >= 2, O = (t) => /* @__PURE__ */ e(
+  xe,
+  {
+    className: t === "dark" ? "size-5 shrink-0 text-white/55" : "size-5 shrink-0 text-black/55"
+  }
+), W = ({
+  variant: t,
+  gallery: a,
+  title: n,
+  showLocked: s,
+  paymentStatus: i,
+  mimeType: o,
+  thumbnailUrl: c,
+  source: h,
+  containedImage: f,
+  topRight: l
+}) => $(a) ? /* @__PURE__ */ e(
+  Le,
+  {
+    variant: t,
+    gallery: a,
+    title: n,
+    showLocked: s,
+    paymentStatus: i,
+    topRight: l
+  }
+) : /* @__PURE__ */ e(
+  Me,
+  {
+    variant: t,
+    mimeType: o,
+    thumbnailUrl: c,
+    title: n,
+    source: h,
+    showLocked: s,
+    paymentStatus: i,
+    topRight: l,
+    containedImage: f
+  }
+), _ = ({
+  variant: t,
+  children: a,
+  rootRef: n,
+  "data-testid": s
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: n,
+    "data-testid": s,
+    className: z(
+      "relative w-[280px] select-none overflow-hidden rounded-md",
+      t === "dark" ? "bg-[#1e2330]" : "bg-white",
+      "shadow-[0_1px_2px_rgba(0,0,0,0.08)]"
+    ),
+    children: a
+  }
+), ce = ({
+  onToggle: t,
+  isBusy: a,
+  isPreviewVisible: n,
+  children: s
+}) => t ? /* @__PURE__ */ e(
+  "div",
+  {
+    role: "button",
+    tabIndex: a ? -1 : 0,
+    "aria-label": "Toggle preview",
+    "aria-busy": a,
+    "aria-pressed": n,
+    "aria-disabled": a || void 0,
+    onClick: a ? void 0 : t,
+    onKeyDown: (i) => {
+      a || i.target === i.currentTarget && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), t());
+    },
+    className: a ? "block w-full text-left" : "block w-full cursor-pointer text-left",
+    children: s
+  }
+) : /* @__PURE__ */ e(T.Fragment, { children: s });
+function de({
+  isGallery: t,
+  onFetchSource: a,
+  onPreviewClick: n
+}) {
+  const [s, i] = y(), [o, c] = y(!1), [h, f] = y(!1), l = I(!1), d = L(async () => {
+    if (n == null || n(), o) {
+      c(!1);
+      return;
+    }
+    if (t) {
+      c(!0);
+      return;
+    }
+    if (s) {
+      c(!0);
+      return;
+    }
+    if (a && !l.current) {
+      l.current = !0, f(!0);
+      try {
+        const b = await a();
+        b && (i(b), c(!0));
+      } finally {
+        l.current = !1, f(!1);
+      }
+    }
+  }, [o, t, s, n, a]), u = t || a != null || n != null ? d : void 0;
+  return {
+    source: s,
+    isPreviewVisible: o,
+    isLoadingPreview: h,
+    handleToggle: d,
+    togglePreview: u
+  };
+}
+function je({
+  paymentStatus: t,
+  onFetchSource: a,
+  onUnlockClick: n
+}) {
+  const [s, i] = y(), o = I(null), c = I(!1), h = I(a);
+  h.current = a;
+  const f = L(async () => {
+    var d;
+    if (!c.current) {
+      c.current = !0;
+      try {
+        const u = await ((d = h.current) == null ? void 0 : d.call(h));
+        u && i(u);
+      } finally {
+        c.current = !1;
+      }
+    }
+  }, []), l = L(() => {
+    t === "paid" ? f() : n == null || n();
+  }, [t, f, n]);
+  return C(() => {
+    if (!o.current || t !== "paid" || s !== void 0) return;
+    const d = new IntersectionObserver(
+      ([u]) => {
+        u.isIntersecting && (f(), d.disconnect());
+      },
+      { threshold: 1 }
+    );
+    return d.observe(o.current), () => d.disconnect();
+  }, [t, s, f]), { source: s, cardRef: o, handleUnlockClick: l };
+}
+const Y = "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]", De = ({
+  isLocked: t,
+  sourceUrl: a,
+  redeemUrl: n,
+  onUnlockClicked: s,
+  onDownloadClicked: i,
+  isUnlocking: o = !1
+}) => {
+  if (t && s != null)
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: s,
+        disabled: o,
+        "aria-label": o ? "Unlocking" : "Unlock",
+        "aria-busy": o,
+        title: o ? "Unlocking" : "Unlock",
+        className: Y,
+        children: o ? /* @__PURE__ */ e(ke, {}) : /* @__PURE__ */ g(T.Fragment, { children: [
+          /* @__PURE__ */ e(re, { className: "size-4", weight: "fill" }),
+          "Unlock"
+        ] })
+      }
+    );
+  if (!t && i != null) {
+    const c = n ?? a;
+    return c != null ? /* @__PURE__ */ g(
+      "a",
+      {
+        href: c,
+        "aria-label": "Download",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: i,
+        className: `${Y} !text-white`,
+        children: [
+          /* @__PURE__ */ e(ie, { className: "size-4", weight: "bold" }),
+          "Download"
+        ]
+      }
+    ) : /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        onClick: i,
+        "aria-label": "Download",
+        className: Y,
+        children: [
+          /* @__PURE__ */ e(ie, { className: "size-4", weight: "bold" }),
+          "Download"
+        ]
+      }
+    );
+  }
+  return null;
+}, Re = ({
+  title: t,
+  mimeType: a = "application/octet-stream",
+  thumbnailUrl: n,
+  detail: s,
+  amountText: i,
+  placeholderTitle: o,
+  placeholderAmountText: c,
+  gallery: h = [],
+  onDismiss: f,
+  onPreviewClick: l,
+  onFetchSource: d,
+  onEditClick: u
+}) => {
+  const b = $(h), { source: p, isPreviewVisible: P, isLoadingPreview: v, togglePreview: w } = de({ isGallery: b, onFetchSource: d, onPreviewClick: l }), N = !P, k = v, x = /* @__PURE__ */ g(T.Fragment, { children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: i ? "text-xs font-medium text-white/55" : "text-xs font-medium text-white/30",
+        children: i || c
+      }
+    )
+  ] }), A = f ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: (B) => {
+        B.stopPropagation(), f();
+      },
+      className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
+      "aria-label": "Dismiss attachment",
+      children: /* @__PURE__ */ e(ye, { className: "size-3", weight: "bold" })
+    }
+  ) : void 0, U = u ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: u,
+      "aria-label": "Edit attachment",
+      className: "flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",
+      children: /* @__PURE__ */ e(Ne, { className: "size-5", weight: "regular" })
+    }
+  ) : void 0;
+  return /* @__PURE__ */ g(_, { variant: "dark", children: [
+    /* @__PURE__ */ e(
+      ce,
+      {
+        onToggle: w,
+        isBusy: k,
+        isPreviewVisible: !N,
+        children: /* @__PURE__ */ e(
+          W,
+          {
+            variant: "dark",
+            gallery: h,
+            title: t,
+            showLocked: N,
+            mimeType: a,
+            thumbnailUrl: n,
+            source: p,
+            topRight: A
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      q,
+      {
+        variant: "dark",
+        title: t,
+        placeholderTitle: o,
+        mimeType: a,
+        detail: s,
+        statusBadge: x,
+        icon: b ? O("dark") : void 0,
+        trailingAction: U
+      }
+    )
+  ] });
+}, Ce = ({
+  title: t,
+  mimeType: a = "application/octet-stream",
+  thumbnailUrl: n,
+  detail: s,
+  amountText: i,
+  placeholderTitle: o,
+  placeholderAmountText: c,
+  gallery: h = []
+}) => {
+  const f = $(h), l = /* @__PURE__ */ g(T.Fragment, { children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: i ? "text-xs font-medium text-black/55" : "text-xs font-medium text-black/30",
+        children: i || c
+      }
+    )
+  ] });
+  return /* @__PURE__ */ g(_, { variant: "light", children: [
+    /* @__PURE__ */ e(
+      W,
+      {
+        variant: "light",
+        gallery: h,
+        title: t,
+        showLocked: !0,
+        mimeType: a,
+        thumbnailUrl: n
+      }
+    ),
+    /* @__PURE__ */ e(
+      q,
+      {
+        variant: "light",
+        title: t,
+        placeholderTitle: o,
+        mimeType: a,
+        detail: s,
+        statusBadge: l,
+        icon: f ? O("light") : void 0
+      }
+    )
+  ] });
+}, Ee = ({
+  title: t,
+  mimeType: a = "application/octet-stream",
+  thumbnailUrl: n,
+  detail: s,
+  amountText: i,
+  placeholderTitle: o,
+  paymentStatus: c = "pending",
+  gallery: h = [],
+  onPreviewClick: f,
+  onFetchSource: l
+}) => {
+  const d = $(h), { source: u, isPreviewVisible: b, isLoadingPreview: p, togglePreview: P } = de({ isGallery: d, onFetchSource: l, onPreviewClick: f }), v = !b;
+  return /* @__PURE__ */ g(_, { variant: "dark", children: [
+    /* @__PURE__ */ e(
+      ce,
+      {
+        onToggle: P,
+        isBusy: p,
+        isPreviewVisible: !v,
+        children: /* @__PURE__ */ e(
+          W,
+          {
+            variant: "dark",
+            gallery: h,
+            title: t,
+            showLocked: v,
+            paymentStatus: c,
+            mimeType: a,
+            thumbnailUrl: n,
+            source: u
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      q,
+      {
+        variant: "dark",
+        title: t,
+        placeholderTitle: o,
+        mimeType: a,
+        detail: s,
+        statusBadge: /* @__PURE__ */ e(
+          se,
+          {
+            isMine: !0,
+            paymentStatus: c,
+            amountText: i
+          }
+        ),
+        icon: d ? O("dark") : void 0
+      }
+    )
+  ] });
+}, Te = ({
+  title: t,
+  amountText: a,
+  thumbnailUrl: n,
+  mimeType: s = "application/octet-stream",
+  detail: i,
+  gallery: o = [],
+  onUnlockClick: c,
+  onFetchSource: h,
+  onDownloadClick: f,
+  paymentStatus: l,
+  isUnlocking: d = !1
+}) => {
+  const u = $(o), { source: b, cardRef: p, handleUnlockClick: P } = je({
+    paymentStatus: l,
+    onFetchSource: h,
+    onUnlockClick: c
+  }), v = b == null ? void 0 : b.sourceUrl, w = b == null ? void 0 : b.redeemUrl, N = u ? l !== "paid" : v === void 0, k = S(s), x = u ? void 0 : v;
+  return /* @__PURE__ */ g(
+    _,
+    {
+      variant: "light",
+      rootRef: p,
+      "data-testid": "locked-attachment",
+      children: [
+        /* @__PURE__ */ e(
+          W,
+          {
+            variant: "light",
+            gallery: o,
+            title: t,
+            showLocked: N,
+            paymentStatus: l,
+            mimeType: s,
+            thumbnailUrl: n,
+            source: b,
+            containedImage: !N && k === "document"
+          }
+        ),
+        /* @__PURE__ */ e(
+          q,
+          {
+            variant: "light",
+            title: t,
+            mimeType: s,
+            detail: i,
+            statusBadge: /* @__PURE__ */ e(
+              se,
+              {
+                isMine: !1,
+                paymentStatus: l,
+                amountText: a
+              }
+            ),
+            icon: u ? O("light") : void 0,
+            action: /* @__PURE__ */ e(
+              De,
+              {
+                isLocked: N,
+                isUnlocking: d,
+                sourceUrl: x,
+                redeemUrl: w,
+                onUnlockClicked: P,
+                onDownloadClicked: f
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, Fe = (t) => t.isDraft ? /* @__PURE__ */ e(Re, { ...t }) : t.isPreview ? /* @__PURE__ */ e(Ce, { ...t }) : t.isMine ? /* @__PURE__ */ e(Ee, { ...t }) : /* @__PURE__ */ e(Te, { ...t });
+export {
+  Fe as default
+};
+//# sourceMappingURL=Card-DyoGzhhM.js.map