@linktr.ee/messaging-react 4.4.0-rc-1787552892 → 4.4.0

package/dist/Card-ChcosZir.js

@@ -1,1034 +0,0 @@
-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, n as ke, o as X } from "./index-Dg235rZT.js";
-import { L as Pe, P as se } from "./PurchaseStatusBadge-D1RRsubZ.js";
-const ze = (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;
-}, Ie = ({
-  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, (ze(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",
-          {
-            ...ke,
-            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(
-    Ie,
-    {
-      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 Le(t) {
-  const a = S(t.mimeType);
-  return a === "video" || a === "audio";
-}
-const Me = ({
-  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 = Le(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 })
-      ]
-    }
-  );
-}, je = ({
-  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(
-  Me,
-  {
-    variant: t,
-    gallery: a,
-    title: n,
-    showLocked: s,
-    paymentStatus: i,
-    topRight: l
-  }
-) : /* @__PURE__ */ e(
-  je,
-  {
-    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 De({
-  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]", Re = ({
-  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(Pe, {}) : /* @__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;
-}, Ce = ({
-  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
-      }
-    )
-  ] });
-}, Ee = ({
-  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
-      }
-    )
-  ] });
-}, Te = ({
-  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
-      }
-    )
-  ] });
-}, Se = ({
-  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 } = De({
-    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(
-              Re,
-              {
-                isLocked: N,
-                isUnlocking: d,
-                sourceUrl: x,
-                redeemUrl: w,
-                onUnlockClicked: P,
-                onDownloadClicked: f
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}, Ke = (t) => t.isDraft ? /* @__PURE__ */ e(Ce, { ...t }) : t.isPreview ? /* @__PURE__ */ e(Ee, { ...t }) : t.isMine ? /* @__PURE__ */ e(Te, { ...t }) : /* @__PURE__ */ e(Se, { ...t });
-export {
-  Ke as default
-};
-//# sourceMappingURL=Card-ChcosZir.js.map