@linktr.ee/messaging-react 2.0.1 → 2.1.0-rc-1778695491

package/src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx

@@ -0,0 +1,178 @@
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useState } from 'react'
+
+import { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'
+import type {
+  LockedAttachmentGalleryItem,
+  PaymentStatus,
+} from '../../types'
+
+import type { LockedCardVariant } from './LockedCardShell'
+
+export interface GalleryThumbnailProps {
+  variant: LockedCardVariant
+  gallery: LockedAttachmentGalleryItem[]
+  title?: string
+  /** When true, all items are shown blurred + the locked/play badge is overlaid. */
+  showLocked: boolean
+  paymentStatus?: PaymentStatus
+  /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */
+  topRight?: React.ReactNode
+}
+
+function isPlayableItem(item: LockedAttachmentGalleryItem): boolean {
+  const sourceType = getSourceType(item.mimeType)
+  return sourceType === 'video' || sourceType === 'audio'
+}
+
+/**
+ * Mixed-media carousel used by every LockedAttachment card when its `gallery`
+ * prop has 2+ items. Matches the "Gallery" frames in the Figma design system:
+ * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center
+ * lock / play indicator that swaps based on the current item.
+ */
+const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
+  variant,
+  gallery,
+  title,
+  showLocked,
+  paymentStatus,
+  topRight,
+}) => {
+  const [index, setIndex] = useState(0)
+  const total = gallery.length
+  const safeIndex = Math.min(index, total - 1)
+  const current = gallery[safeIndex]
+  const isVideoItem = isPlayableItem(current)
+
+  // Center badge: PLAY for video items, LOCK for non-video locked items.
+  // Unlocked image items show no center badge — the image is the content.
+  const centerBadge = (() => {
+    if (isVideoItem) {
+      return <PlayIcon className="size-6" weight="fill" />
+    }
+    if (showLocked) {
+      return paymentStatus === 'paid' ? (
+        <LockOpenIcon className="size-6" weight="fill" />
+      ) : (
+        <LockSimpleIcon className="size-6" weight="fill" />
+      )
+    }
+    return null
+  })()
+
+  // Stop propagation so arrow taps don't bubble up to the outer preview-toggle
+  // wrapper on ComposerCard / SentCard.
+  const goPrev = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIndex((i) => Math.max(0, i - 1))
+  }
+  const goNext = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIndex((i) => Math.min(total - 1, i + 1))
+  }
+  const atStart = safeIndex === 0
+  const atEnd = safeIndex === total - 1
+
+  const isDark = variant === 'dark'
+
+  // Locked + unlocked render entirely separate trees so the locked state
+  // doesn't end up stacking a blurred `<img>` on top of an underlying
+  // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise
+  // shows through as a visible horizontal seam at the 16:9 boundary
+  // inside the taller 337/386 gallery aspect).
+  //
+  // The locked branch uses `filter: blur` on a single full-size `<img>`
+  // — not `backdrop-filter` — so the rounded corners are clipped
+  // normally without any clip-path workarounds (see LockedThumbnail).
+  return (
+    <div className="relative aspect-[337/386] overflow-hidden rounded-t-2xl">
+      {showLocked ? (
+        <div
+          className={classNames(
+            'absolute inset-0',
+            isDark ? 'bg-white/10' : 'bg-black/5'
+          )}
+        >
+          {current.thumbnailUrl && (
+            <img
+              src={current.thumbnailUrl}
+              alt=""
+              aria-hidden
+              draggable={false}
+              // `scale-110` hides the fuzzy edge that `filter: blur` leaves
+              // around the image bounds.
+              className="absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            />
+          )}
+        </div>
+      ) : (
+        <AttachmentThumbnail
+          mimeType={current.mimeType}
+          sourceUrl={current.sourceUrl}
+          thumbnailUrl={current.thumbnailUrl}
+          title={title}
+          variant={variant}
+        />
+      )}
+
+      {centerBadge && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+            {centerBadge}
+          </div>
+        </div>
+      )}
+
+      {total > 1 && (
+        <React.Fragment>
+          <button
+            type="button"
+            onClick={goPrev}
+            disabled={atStart}
+            aria-label="Previous item"
+            className={classNames(
+              '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',
+              atStart ? 'opacity-40' : 'hover:bg-black/40'
+            )}
+          >
+            <CaretLeftIcon className="size-5" weight="bold" />
+          </button>
+          <button
+            type="button"
+            onClick={goNext}
+            disabled={atEnd}
+            aria-label="Next item"
+            className={classNames(
+              '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',
+              atEnd ? 'opacity-40' : 'hover:bg-black/40'
+            )}
+          >
+            <CaretRightIcon className="size-5" weight="bold" />
+          </button>
+
+          <div className="pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1">
+            <span className="text-xs font-medium leading-4 text-white">
+              {safeIndex + 1}/{total}
+            </span>
+          </div>
+        </React.Fragment>
+      )}
+
+      {topRight && (
+        <div className="pointer-events-auto absolute right-3 top-3 z-10">
+          {topRight}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default GalleryThumbnail

package/src/components/LockedAttachment/components/_shared/LockBadge.tsx

@@ -0,0 +1,39 @@
+import {
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
+import React from 'react'
+
+import { getSourceType } from '../../../AttachmentCard'
+import type { PaymentStatus } from '../../types'
+
+/**
+ * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.
+ * Uses `bg-black/25` from the design system's `alpha-black-25` token.
+ *
+ * For playable media (video/audio), the badge shows a play icon instead of a
+ * lock — matching the convention used by `GalleryThumbnail`.
+ */
+export const LockBadge: React.FC<{
+  paymentStatus?: PaymentStatus
+  mimeType?: string
+}> = ({ paymentStatus, mimeType }) => {
+  const sourceType = mimeType ? getSourceType(mimeType) : undefined
+  const isPlayable = sourceType === 'video' || sourceType === 'audio'
+
+  const Icon = isPlayable
+    ? PlayIcon
+    : paymentStatus === 'paid'
+      ? LockOpenIcon
+      : LockSimpleIcon
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+        <Icon className="size-6" weight="fill" />
+      </div>
+    </div>
+  )
+}
+
+export default LockBadge

package/src/components/LockedAttachment/components/_shared/LockedCardShell.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames'
+import React from 'react'
+
+export type LockedCardVariant = 'dark' | 'light'
+
+export interface LockedCardShellProps {
+  variant: LockedCardVariant
+  children: React.ReactNode
+  rootRef?: React.Ref<HTMLDivElement>
+  'data-testid'?: string
+}
+
+/**
+ * Outer chrome for every LockedAttachment card.
+ * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.
+ */
+const LockedCardShell: React.FC<LockedCardShellProps> = ({
+  variant,
+  children,
+  rootRef,
+  'data-testid': dataTestId,
+}) => (
+  <div
+    ref={rootRef}
+    data-testid={dataTestId}
+    className={classNames(
+      'relative w-[280px] select-none overflow-hidden rounded-md',
+      'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',
+      variant === 'dark' ? 'bg-[#121110]' : 'bg-white'
+    )}
+  >
+    {children}
+  </div>
+)
+
+export default LockedCardShell

package/src/components/LockedAttachment/components/_shared/LockedThumbnail.tsx

@@ -0,0 +1,128 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import {
+  AttachmentThumbnail,
+  renderTypeIcon,
+} from '../../../AttachmentCard'
+import type { LockedAttachmentSource, PaymentStatus } from '../../types'
+
+import { LockBadge } from './LockBadge'
+import type { LockedCardVariant } from './LockedCardShell'
+
+export interface LockedThumbnailProps {
+  variant: LockedCardVariant
+  mimeType: string
+  thumbnailUrl?: string
+  title?: string
+  /**
+   * When provided, the underlying source is shown unblurred (preview / unlocked state).
+   * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.
+   */
+  source?: LockedAttachmentSource
+  /**
+   * Forces the locked appearance even when a source is provided. Used for the
+   * Composer card where the locked treatment is the default and the user toggles
+   * a preview in place.
+   */
+  showLocked: boolean
+  paymentStatus?: PaymentStatus
+  /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */
+  topRight?: React.ReactNode
+  /** When true, renders the unlocked image with aspect-video + object-contain. */
+  containedImage?: boolean
+}
+
+/**
+ * Renders the 180px-tall media area for a LockedAttachment card.
+ * Handles three visual states:
+ *   - locked:       blurred thumbnail + centered 48px lock badge
+ *   - preview/paid: clear thumbnail (the underlying source)
+ *   - empty:        type-icon placeholder
+ */
+const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
+  variant,
+  mimeType,
+  thumbnailUrl,
+  title,
+  source,
+  showLocked,
+  paymentStatus,
+  topRight,
+  containedImage = false,
+}) => {
+  const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl
+  const effectiveThumbnailUrl = showLocked
+    ? thumbnailUrl
+    : (source?.thumbnailUrl ?? thumbnailUrl)
+
+  const isDark = variant === 'dark'
+
+  // Locked + unlocked render entirely separate trees so the locked state
+  // doesn't end up stacking a blurred `<img>` on top of an underlying
+  // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise
+  // shows through as a visible horizontal seam at the 16:9 boundary).
+  //
+  // The locked branch uses `filter: blur` on a single full-size `<img>`
+  // — not `backdrop-filter` — because `backdrop-filter` paints in its
+  // own compositing layer that escapes ancestor `overflow: hidden` on
+  // Chrome/Safari and flattens the card's top corners. `filter` is
+  // clipped normally, so the rounded corners stay round without any
+  // clip-path workarounds.
+  return (
+    <div className="relative overflow-hidden rounded-t-2xl">
+      {showLocked ? (
+        <div
+          className={classNames(
+            'relative aspect-video overflow-hidden',
+            isDark ? 'bg-white/10' : 'bg-black/5'
+          )}
+        >
+          {effectiveThumbnailUrl ? (
+            <img
+              src={effectiveThumbnailUrl}
+              alt=""
+              aria-hidden
+              draggable={false}
+              // `scale-110` hides the fuzzy semi-transparent edge that
+              // `filter: blur` leaves around the image bounds.
+              className="absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center">
+              {renderTypeIcon(mimeType, {
+                className: isDark
+                  ? 'size-12 text-white/20'
+                  : 'size-12 text-black/20',
+                weight: 'regular',
+              })}
+            </div>
+          )}
+          <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />
+        </div>
+      ) : (
+        <AttachmentThumbnail
+          mimeType={mimeType}
+          sourceUrl={effectiveSourceUrl}
+          thumbnailUrl={effectiveThumbnailUrl}
+          title={title}
+          variant={variant}
+          containedImage={containedImage}
+          mediaPlayerProps={
+            effectiveSourceUrl
+              ? { autoPlay: true, loop: true, controls: true, muted: false }
+              : undefined
+          }
+        />
+      )}
+
+      {topRight && (
+        <div className="pointer-events-auto absolute right-3 top-3 z-10">
+          {topRight}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LockedThumbnail

package/src/components/LockedAttachment/index.tsx

@@ -1,32 +1,63 @@
 import React, { Suspense } from 'react'
 
-import type { CreatorCardProps } from './components/Creator/Card'
-import type { VisitorCardProps } from './components/Visitor/Card'
+import type { ComposerCardProps } from './components/Composer/Card'
+import type { ReceivedCardProps } from './components/Received/Card'
+import type { SentCardProps } from './components/Sent/Card'
 
-const CreatorCardLazy = React.lazy(() => import('./components/Creator/Card'))
-const VisitorCardLazy = React.lazy(() => import('./components/Visitor/Card'))
+const ComposerCardLazy = React.lazy(() => import('./components/Composer/Card'))
+const SentCardLazy = React.lazy(() => import('./components/Sent/Card'))
+const ReceivedCardLazy = React.lazy(() => import('./components/Received/Card'))
 
 const LockedAttachmentFallback = () => (
   <div
-    className="w-[280px] min-h-[200px] animate-pulse rounded-[24px] bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]"
+    className="w-[280px] min-h-[200px] animate-pulse rounded-md bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
     aria-hidden
   />
 )
 
-const Creator = (props: CreatorCardProps) => (
+const Composer = (props: ComposerCardProps) => (
   <Suspense fallback={<LockedAttachmentFallback />}>
-    <CreatorCardLazy {...props} />
+    <ComposerCardLazy {...props} />
   </Suspense>
 )
 
-const Visitor = (props: VisitorCardProps) => (
+const Sent = (props: SentCardProps) => (
   <Suspense fallback={<LockedAttachmentFallback />}>
-    <VisitorCardLazy {...props} />
+    <SentCardLazy {...props} />
   </Suspense>
 )
 
-const LockedAttachment = { Creator, Visitor }
+const Received = (props: ReceivedCardProps) => (
+  <Suspense fallback={<LockedAttachmentFallback />}>
+    <ReceivedCardLazy {...props} />
+  </Suspense>
+)
+
+/**
+ * @deprecated Renamed to `LockedAttachment.Sent` (post-send sender card) or
+ * `LockedAttachment.Composer` (drafting state). This alias maps to `Sent`
+ * because that matches the previous in-thread usage; pre-send / drafting
+ * usages (e.g. with `onDismiss`) should migrate to `LockedAttachment.Composer`.
+ */
+const Creator = Sent
+
+/** @deprecated Renamed to `LockedAttachment.Received`. */
+const Visitor = Received
+
+const LockedAttachment = { Composer, Sent, Received, Creator, Visitor }
 
 export default LockedAttachment
-export type { CreatorCardProps, VisitorCardProps }
-export type { PaymentStatus, LockedAttachmentSource, LockedAttachmentContextValue } from './types'
+export type { ComposerCardProps, SentCardProps, ReceivedCardProps }
+/**
+ * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
+ * should migrate to `ComposerCardProps`.
+ */
+export type CreatorCardProps = SentCardProps
+/** @deprecated Renamed to `ReceivedCardProps`. */
+export type VisitorCardProps = ReceivedCardProps
+export type {
+  PaymentStatus,
+  LockedAttachmentSource,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+} from './types'

package/src/components/LockedAttachment/types.ts

@@ -9,6 +9,23 @@ export interface LockedAttachmentBaseProps {
   detail?: string
   amountText?: string
   paymentStatus?: PaymentStatus
+  /**
+   * When provided with 2+ items, the card renders as a mixed-media carousel
+   * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
+   * item brings its own thumbnail and optional source so that
+   * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
+   * same carousel chrome.
+   */
+  gallery?: LockedAttachmentGalleryItem[]
+}
+
+export interface LockedAttachmentGalleryItem {
+  /** MIME type of this carousel item — drives the per-item play / lock affordance. */
+  mimeType: string
+  /** Poster image used for both the locked (blurred) and unlocked preview state. */
+  thumbnailUrl?: string
+  /** Underlying source (image or video URL) — shown only when unlocked. */
+  sourceUrl?: string
 }
 
 export interface LockedAttachmentSource {

package/src/components/MediaMessage/index.tsx

@@ -216,7 +216,7 @@ export function resolveMediaFromMessage(
   }
 }
 
-/** Dark card (sent / own message) — matches LockedAttachment.Creator preview without toggle. */
+/** Dark card (sent / own message) — matches LockedAttachment.Sent preview without toggle. */
 const Creator: React.FC<MediaMessageResolved> = ({
   resolvedUrl,
   resolvedType,
@@ -246,7 +246,7 @@ const Creator: React.FC<MediaMessageResolved> = ({
   )
 }
 
-/** Light card (received) — matches LockedAttachment.Visitor unlocked without Purchased copy. */
+/** Light card (received) — matches LockedAttachment.Received unlocked without Purchased copy. */
 const Visitor: React.FC<MediaMessageResolved> = ({
   resolvedUrl,
   resolvedType,
@@ -283,6 +283,12 @@ export interface MediaMessageProps {
   isMyMessage?: boolean
 }
 
+/**
+ * @deprecated Slated for removal once the profile repo is migrated to
+ * `LinkAttachment` (and its forthcoming media-only Attachment variants).
+ * New consumers should reach for `LinkAttachment.Composer`,
+ * `LinkAttachment.Sent`, or `LinkAttachment.Received` instead.
+ */
 const MediaMessageRoot: React.FC<MediaMessageProps> = ({
   message,
   isMyMessage = false,

package/src/index.ts

@@ -7,6 +7,7 @@ export { ChannelList } from './components/ChannelList'
 export { ChannelView } from './components/ChannelView'
 export { default as ActionButton } from './components/ActionButton'
 export { default as LockedAttachment } from './components/LockedAttachment'
+export { default as LinkAttachment } from './components/LinkAttachment'
 export { Avatar } from './components/Avatar'
 export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
@@ -53,10 +54,23 @@ export type { MessageMetadata } from './stream-custom-data'
 export type { AvatarProps } from './components/Avatar'
 export type { ActionButtonProps } from './components/ActionButton'
 export type {
+  ComposerCardProps,
+  SentCardProps,
+  ReceivedCardProps,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+  // Deprecated aliases preserved for backwards compatibility:
   CreatorCardProps,
   VisitorCardProps,
-  LockedAttachmentContextValue,
 } from './components/LockedAttachment'
+export type {
+  ComposerCardProps as LinkAttachmentComposerCardProps,
+  SentCardProps as LinkAttachmentSentCardProps,
+  ReceivedCardProps as LinkAttachmentReceivedCardProps,
+  LinkAttachmentBaseProps,
+  LinkAttachmentCta,
+  LinkAttachmentLayout,
+} from './components/LinkAttachment'
 export type { CustomMessageRegistry } from './components/CustomMessage/context'
 export type { AttachmentSourceType } from './components/AttachmentCard/utils/mimeType'
 export type { Faq, FaqListProps } from './components/FaqList'

package/dist/Card-BKP9ml9O.js

@@ -1,138 +0,0 @@
-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-Bex7eg3v.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-BKP9ml9O.js.map