@linktr.ee/messaging-react 4.2.0-rc-1787325710 → 4.2.0-rc-1787599724

package/dist/Card-Be81K6su.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("@phosphor-icons/react"),d=require("./PurchaseStatusBadge-BmqAQEV9.cjs"),x=require("classnames"),r=({children:s})=>e.jsxs("div",{className:"flex items-center gap-1 text-xs font-medium",children:[e.jsx(h.LockSimpleIcon,{className:"size-3.5 shrink-0 opacity-55",weight:"fill","aria-hidden":!0}),s]}),c=({variant:s="dark"})=>{const a=s==="dark"?"bg-white/25":"bg-black/15";return e.jsxs("div",{className:"flex flex-col gap-2 str-chat__message-text my-1 animate-pulse","aria-hidden":!0,children:[e.jsx("div",{className:x("h-3 w-40 rounded-full",a)}),e.jsx("div",{className:x("h-3 w-24 rounded-full",a)})]})},n=({isMine:s,children:a,className:i})=>e.jsx("div",{className:x("message-locked-attachment-text","relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3","text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]",s?"bg-[#1e2330] text-white":"bg-[#f2f1ef] text-black","shadow-[0_1px_2px_rgba(0,0,0,0.08)]",i),children:a}),u=({renderedText:s,amountText:a,placeholderAmountText:i,onDismiss:t})=>e.jsxs(n,{isMine:!0,className:"pr-8",children:[s||e.jsx(c,{variant:"dark"}),e.jsx(r,{children:e.jsx("span",{className:a?"text-white/55":"text-white/30",children:a||i})}),t&&e.jsx("button",{type:"button",onClick:t,className:"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15","aria-label":"Dismiss attachment",children:e.jsx(h.XIcon,{className:"size-3",weight:"bold"})})]}),j=({amountText:s,placeholderAmountText:a})=>e.jsxs(n,{isMine:!1,children:[e.jsx(c,{variant:"light"}),e.jsx(r,{children:e.jsx("span",{className:"opacity-55",children:s||a})})]}),m=({renderedText:s,amountText:a,paymentStatus:i="pending"})=>{const t=i==="paid";return e.jsxs(n,{isMine:!0,children:[t&&s?s:e.jsx(c,{variant:"dark"}),e.jsxs(r,{children:[a&&e.jsx("span",{className:"text-white/55",children:a}),e.jsx(d.PurchaseStatusBadge,{isMine:!0,paymentStatus:i})]})]})},f=({renderedText:s,amountText:a,paymentStatus:i,onUnlockClick:t,isUnlocking:l=!1})=>{if(i==="paid"&&s)return e.jsxs(n,{isMine:!1,children:[s,e.jsxs(r,{children:[a!=null&&e.jsx("span",{className:"opacity-55",children:a}),e.jsx(d.PurchaseStatusBadge,{isMine:!1,paymentStatus:"paid"})]})]});const o=l?"Unlocking message.":"Unlock this message.";return e.jsx(n,{isMine:!1,children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex flex-1 flex-col gap-2",children:[e.jsx(c,{variant:"light"}),e.jsx("span",{className:"sr-only","aria-live":"polite",children:o}),e.jsx(r,{children:a!=null&&e.jsx("span",{className:"opacity-55",children:a})})]}),e.jsx("button",{type:"button",onClick:t,disabled:l,"aria-label":l?"Unlocking message":"Unlock message","aria-busy":l,title:l?"Unlocking message":"Unlock message",className:"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]",children:l?e.jsx(d.LoadingDots,{}):e.jsx(h.LockSimpleIcon,{className:"size-4",weight:"fill","aria-hidden":!0})})]})})},g=s=>s.isDraft?e.jsx(u,{...s}):s.isPreview?e.jsx(j,{...s}):s.isMine?e.jsx(m,{...s}):e.jsx(f,{...s});exports.default=g;
+//# sourceMappingURL=Card-Be81K6su.cjs.map

package/dist/Card-Be81K6su.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-Be81K6su.cjs","sources":["../src/components/CustomMessage/LockedAttachment/components/_shared/PriceLockRow.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/SkeletonTextLines.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/TextShell.tsx","../src/components/CustomMessage/LockedAttachment/components/Text/Card.tsx"],"sourcesContent":["import { LockSimpleIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\n/**\n * The lock-icon + amount/status row shared by every LockedAttachment text-mode\n * card. Only the wrapper and the leading lock icon are shared — the amount and\n * any trailing status live in `children`, since they genuinely differ per card\n * (placeholder fallback vs. paid badge vs. bare amount).\n */\nconst PriceLockRow: React.FC<React.PropsWithChildren> = ({ children }) => (\n  <div className=\"flex items-center gap-1 text-xs font-medium\">\n    <LockSimpleIcon\n      className=\"size-3.5 shrink-0 opacity-55\"\n      weight=\"fill\"\n      aria-hidden\n    />\n    {children}\n  </div>\n)\n\nexport default PriceLockRow\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport interface SkeletonTextLinesProps {\n  /** Matches the bubble it sits in — \"dark\" for the sender's own bubble. */\n  variant: 'light' | 'dark'\n}\n\n/**\n * Two skeleton bars standing in for the redacted text of a paid text-only\n * message — the real content is never sent to the client until purchase, so\n * there's nothing to render yet.\n *\n * Uses explicit black/white (not `bg-current`) because Tailwind doesn't\n * support opacity modifiers on the `current` color — `bg-current/30` silently\n * produces no CSS rule at all.\n */\nconst SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({\n  variant = 'dark',\n}) => {\n  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'\n\n  return (\n    <div\n      className=\"flex flex-col gap-2 str-chat__message-text my-1 animate-pulse\"\n      aria-hidden\n    >\n      <div className={classNames('h-3 w-40 rounded-full', colour)} />\n      <div className={classNames('h-3 w-24 rounded-full', colour)} />\n    </div>\n  )\n}\n\nexport default SkeletonTextLines\n","import classNames from 'classnames'\nimport React from 'react'\n\n/**\n * Chat-bubble chrome for a paid text-only message/preview. Deliberately\n * doesn't lean on `.str-chat`'s CSS variables (`--str-chat__message-bubble-*`)\n * — this renders in the Composer preview too, which sits outside any\n * `.str-chat` ancestor, so every value here (radius, colour, type scale) is\n * hardcoded to match the Figma spec directly.\n */\nconst TextShell: React.FC<\n  React.PropsWithChildren<{ isMine: boolean; className?: string }>\n> = ({ isMine, children, className }) => (\n  <div\n    className={classNames(\n      'message-locked-attachment-text',\n      'relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3',\n      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',\n      isMine ? 'bg-[#1e2330] text-white' : 'bg-[#f2f1ef] text-black',\n      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]',\n      className\n    )}\n  >\n    {children}\n  </div>\n)\n\nexport default TextShell\n","import { LockSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport LoadingDots from '../_shared/LoadingDots'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\n\nimport type {\n  TextCardDraftProps,\n  TextCardOtherProps,\n  TextCardOwnProps,\n  TextCardPreviewProps,\n  TextCardProps,\n} from './types'\n\nexport type { TextCardProps } from './types'\n\nconst DraftTextCard: React.FC<TextCardDraftProps> = ({\n  renderedText,\n  amountText,\n  placeholderAmountText,\n  onDismiss,\n}) => (\n  <TextShell isMine className=\"pr-8\">\n    {renderedText || <SkeletonTextLines variant=\"dark\" />}\n    <PriceLockRow>\n      <span className={amountText ? 'text-white/55' : 'text-white/30'}>\n        {amountText || placeholderAmountText}\n      </span>\n    </PriceLockRow>\n    {onDismiss && (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className=\"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n        aria-label=\"Dismiss attachment\"\n      >\n        <XIcon className=\"size-3\" weight=\"bold\" />\n      </button>\n    )}\n  </TextShell>\n)\n\nconst PreviewTextCard: React.FC<TextCardPreviewProps> = ({\n  amountText,\n  placeholderAmountText,\n}) => (\n  <TextShell isMine={false}>\n    <SkeletonTextLines variant=\"light\" />\n    <PriceLockRow>\n      <span className=\"opacity-55\">{amountText || placeholderAmountText}</span>\n    </PriceLockRow>\n  </TextShell>\n)\n\nconst OwnTextCard: React.FC<TextCardOwnProps> = ({\n  renderedText,\n  amountText,\n  paymentStatus = 'pending',\n}) => {\n  const isPaid = paymentStatus === 'paid'\n\n  return (\n    <TextShell isMine>\n      {isPaid && renderedText ? (\n        renderedText\n      ) : (\n        <SkeletonTextLines variant=\"dark\" />\n      )}\n      <PriceLockRow>\n        {amountText && <span className=\"text-white/55\">{amountText}</span>}\n        <PurchaseStatusBadge isMine paymentStatus={paymentStatus} />\n      </PriceLockRow>\n    </TextShell>\n  )\n}\n\nconst OtherTextCard: React.FC<TextCardOtherProps> = ({\n  renderedText,\n  amountText,\n  paymentStatus,\n  onUnlockClick,\n  isUnlocking = false,\n}) => {\n  const isPaid = paymentStatus === 'paid'\n\n  if (isPaid && renderedText) {\n    return (\n      <TextShell isMine={false}>\n        {renderedText}\n        <PriceLockRow>\n          {amountText != null && (\n            <span className=\"opacity-55\">{amountText}</span>\n          )}\n          <PurchaseStatusBadge isMine={false} paymentStatus=\"paid\" />\n        </PriceLockRow>\n      </TextShell>\n    )\n  }\n\n  const ariaLabel = isUnlocking ? 'Unlocking message.' : 'Unlock this message.'\n\n  return (\n    <TextShell isMine={false}>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex flex-1 flex-col gap-2\">\n          <SkeletonTextLines variant=\"light\" />\n          <span className=\"sr-only\" aria-live=\"polite\">\n            {ariaLabel}\n          </span>\n          <PriceLockRow>\n            {amountText != null && (\n              <span className=\"opacity-55\">{amountText}</span>\n            )}\n          </PriceLockRow>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onUnlockClick}\n          disabled={isUnlocking}\n          aria-label={isUnlocking ? 'Unlocking message' : 'Unlock message'}\n          aria-busy={isUnlocking}\n          title={isUnlocking ? 'Unlocking message' : 'Unlock message'}\n          className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]\"\n        >\n          {isUnlocking ? (\n            <LoadingDots />\n          ) : (\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" aria-hidden />\n          )}\n        </button>\n      </div>\n    </TextShell>\n  )\n}\n\nconst TextCard: React.FC<TextCardProps> = (props) => {\n  if (props.isDraft) {\n    return <DraftTextCard {...props} />\n  } else if (props.isPreview) {\n    return <PreviewTextCard {...props} />\n  } else if (props.isMine) {\n    return <OwnTextCard {...props} />\n  } else {\n    return <OtherTextCard {...props} />\n  }\n}\n\nexport default TextCard\n"],"names":["PriceLockRow","children","jsxs","jsx","LockSimpleIcon","SkeletonTextLines","variant","colour","classNames","TextShell","isMine","className","DraftTextCard","renderedText","amountText","placeholderAmountText","onDismiss","XIcon","PreviewTextCard","OwnTextCard","paymentStatus","isPaid","PurchaseStatusBadge","OtherTextCard","onUnlockClick","isUnlocking","ariaLabel","LoadingDots","TextCard","props"],"mappings":"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"}

package/dist/Card-BzvDr-pU.js

@@ -0,0 +1,112 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { LockSimpleIcon as o, XIcon as f } from "@phosphor-icons/react";
+import { P as m, L as u } from "./PurchaseStatusBadge-D1RRsubZ.js";
+import h from "classnames";
+const n = ({ children: a }) => /* @__PURE__ */ s("div", { className: "flex items-center gap-1 text-xs font-medium", children: [
+  /* @__PURE__ */ e(
+    o,
+    {
+      className: "size-3.5 shrink-0 opacity-55",
+      weight: "fill",
+      "aria-hidden": !0
+    }
+  ),
+  a
+] }), d = ({
+  variant: a = "dark"
+}) => {
+  const i = a === "dark" ? "bg-white/25" : "bg-black/15";
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: "flex flex-col gap-2 str-chat__message-text my-1 animate-pulse",
+      "aria-hidden": !0,
+      children: [
+        /* @__PURE__ */ e("div", { className: h("h-3 w-40 rounded-full", i) }),
+        /* @__PURE__ */ e("div", { className: h("h-3 w-24 rounded-full", i) })
+      ]
+    }
+  );
+}, c = ({ isMine: a, children: i, className: t }) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: h(
+      "message-locked-attachment-text",
+      "relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3",
+      "text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]",
+      a ? "bg-[#1e2330] text-white" : "bg-[#f2f1ef] text-black",
+      "shadow-[0_1px_2px_rgba(0,0,0,0.08)]",
+      t
+    ),
+    children: i
+  }
+), x = ({
+  renderedText: a,
+  amountText: i,
+  placeholderAmountText: t,
+  onDismiss: r
+}) => /* @__PURE__ */ s(c, { isMine: !0, className: "pr-8", children: [
+  a || /* @__PURE__ */ e(d, { variant: "dark" }),
+  /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("span", { className: i ? "text-white/55" : "text-white/30", children: i || t }) }),
+  r && /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: r,
+      className: "absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",
+      "aria-label": "Dismiss attachment",
+      children: /* @__PURE__ */ e(f, { className: "size-3", weight: "bold" })
+    }
+  )
+] }), g = ({
+  amountText: a,
+  placeholderAmountText: i
+}) => /* @__PURE__ */ s(c, { isMine: !1, children: [
+  /* @__PURE__ */ e(d, { variant: "light" }),
+  /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e("span", { className: "opacity-55", children: a || i }) })
+] }), p = ({
+  renderedText: a,
+  amountText: i,
+  paymentStatus: t = "pending"
+}) => /* @__PURE__ */ s(c, { isMine: !0, children: [
+  t === "paid" && a ? a : /* @__PURE__ */ e(d, { variant: "dark" }),
+  /* @__PURE__ */ s(n, { children: [
+    i && /* @__PURE__ */ e("span", { className: "text-white/55", children: i }),
+    /* @__PURE__ */ e(m, { isMine: !0, paymentStatus: t })
+  ] })
+] }), b = ({
+  renderedText: a,
+  amountText: i,
+  paymentStatus: t,
+  onUnlockClick: r,
+  isUnlocking: l = !1
+}) => t === "paid" && a ? /* @__PURE__ */ s(c, { isMine: !1, children: [
+  a,
+  /* @__PURE__ */ s(n, { children: [
+    i != null && /* @__PURE__ */ e("span", { className: "opacity-55", children: i }),
+    /* @__PURE__ */ e(m, { isMine: !1, paymentStatus: "paid" })
+  ] })
+] }) : /* @__PURE__ */ e(c, { isMine: !1, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+  /* @__PURE__ */ s("div", { className: "flex flex-1 flex-col gap-2", children: [
+    /* @__PURE__ */ e(d, { variant: "light" }),
+    /* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", children: l ? "Unlocking message." : "Unlock this message." }),
+    /* @__PURE__ */ e(n, { children: i != null && /* @__PURE__ */ e("span", { className: "opacity-55", children: i }) })
+  ] }),
+  /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: r,
+      disabled: l,
+      "aria-label": l ? "Unlocking message" : "Unlock message",
+      "aria-busy": l,
+      title: l ? "Unlocking message" : "Unlock message",
+      className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]",
+      children: l ? /* @__PURE__ */ e(u, {}) : /* @__PURE__ */ e(o, { className: "size-4", weight: "fill", "aria-hidden": !0 })
+    }
+  )
+] }) }), M = (a) => a.isDraft ? /* @__PURE__ */ e(x, { ...a }) : a.isPreview ? /* @__PURE__ */ e(g, { ...a }) : a.isMine ? /* @__PURE__ */ e(p, { ...a }) : /* @__PURE__ */ e(b, { ...a });
+export {
+  M as default
+};
+//# sourceMappingURL=Card-BzvDr-pU.js.map

package/dist/Card-BzvDr-pU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-BzvDr-pU.js","sources":["../src/components/CustomMessage/LockedAttachment/components/_shared/PriceLockRow.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/SkeletonTextLines.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/TextShell.tsx","../src/components/CustomMessage/LockedAttachment/components/Text/Card.tsx"],"sourcesContent":["import { LockSimpleIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\n/**\n * The lock-icon + amount/status row shared by every LockedAttachment text-mode\n * card. Only the wrapper and the leading lock icon are shared — the amount and\n * any trailing status live in `children`, since they genuinely differ per card\n * (placeholder fallback vs. paid badge vs. bare amount).\n */\nconst PriceLockRow: React.FC<React.PropsWithChildren> = ({ children }) => (\n  <div className=\"flex items-center gap-1 text-xs font-medium\">\n    <LockSimpleIcon\n      className=\"size-3.5 shrink-0 opacity-55\"\n      weight=\"fill\"\n      aria-hidden\n    />\n    {children}\n  </div>\n)\n\nexport default PriceLockRow\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport interface SkeletonTextLinesProps {\n  /** Matches the bubble it sits in — \"dark\" for the sender's own bubble. */\n  variant: 'light' | 'dark'\n}\n\n/**\n * Two skeleton bars standing in for the redacted text of a paid text-only\n * message — the real content is never sent to the client until purchase, so\n * there's nothing to render yet.\n *\n * Uses explicit black/white (not `bg-current`) because Tailwind doesn't\n * support opacity modifiers on the `current` color — `bg-current/30` silently\n * produces no CSS rule at all.\n */\nconst SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({\n  variant = 'dark',\n}) => {\n  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'\n\n  return (\n    <div\n      className=\"flex flex-col gap-2 str-chat__message-text my-1 animate-pulse\"\n      aria-hidden\n    >\n      <div className={classNames('h-3 w-40 rounded-full', colour)} />\n      <div className={classNames('h-3 w-24 rounded-full', colour)} />\n    </div>\n  )\n}\n\nexport default SkeletonTextLines\n","import classNames from 'classnames'\nimport React from 'react'\n\n/**\n * Chat-bubble chrome for a paid text-only message/preview. Deliberately\n * doesn't lean on `.str-chat`'s CSS variables (`--str-chat__message-bubble-*`)\n * — this renders in the Composer preview too, which sits outside any\n * `.str-chat` ancestor, so every value here (radius, colour, type scale) is\n * hardcoded to match the Figma spec directly.\n */\nconst TextShell: React.FC<\n  React.PropsWithChildren<{ isMine: boolean; className?: string }>\n> = ({ isMine, children, className }) => (\n  <div\n    className={classNames(\n      'message-locked-attachment-text',\n      'relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3',\n      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',\n      isMine ? 'bg-[#1e2330] text-white' : 'bg-[#f2f1ef] text-black',\n      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]',\n      className\n    )}\n  >\n    {children}\n  </div>\n)\n\nexport default TextShell\n","import { LockSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport LoadingDots from '../_shared/LoadingDots'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\n\nimport type {\n  TextCardDraftProps,\n  TextCardOtherProps,\n  TextCardOwnProps,\n  TextCardPreviewProps,\n  TextCardProps,\n} from './types'\n\nexport type { TextCardProps } from './types'\n\nconst DraftTextCard: React.FC<TextCardDraftProps> = ({\n  renderedText,\n  amountText,\n  placeholderAmountText,\n  onDismiss,\n}) => (\n  <TextShell isMine className=\"pr-8\">\n    {renderedText || <SkeletonTextLines variant=\"dark\" />}\n    <PriceLockRow>\n      <span className={amountText ? 'text-white/55' : 'text-white/30'}>\n        {amountText || placeholderAmountText}\n      </span>\n    </PriceLockRow>\n    {onDismiss && (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className=\"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n        aria-label=\"Dismiss attachment\"\n      >\n        <XIcon className=\"size-3\" weight=\"bold\" />\n      </button>\n    )}\n  </TextShell>\n)\n\nconst PreviewTextCard: React.FC<TextCardPreviewProps> = ({\n  amountText,\n  placeholderAmountText,\n}) => (\n  <TextShell isMine={false}>\n    <SkeletonTextLines variant=\"light\" />\n    <PriceLockRow>\n      <span className=\"opacity-55\">{amountText || placeholderAmountText}</span>\n    </PriceLockRow>\n  </TextShell>\n)\n\nconst OwnTextCard: React.FC<TextCardOwnProps> = ({\n  renderedText,\n  amountText,\n  paymentStatus = 'pending',\n}) => {\n  const isPaid = paymentStatus === 'paid'\n\n  return (\n    <TextShell isMine>\n      {isPaid && renderedText ? (\n        renderedText\n      ) : (\n        <SkeletonTextLines variant=\"dark\" />\n      )}\n      <PriceLockRow>\n        {amountText && <span className=\"text-white/55\">{amountText}</span>}\n        <PurchaseStatusBadge isMine paymentStatus={paymentStatus} />\n      </PriceLockRow>\n    </TextShell>\n  )\n}\n\nconst OtherTextCard: React.FC<TextCardOtherProps> = ({\n  renderedText,\n  amountText,\n  paymentStatus,\n  onUnlockClick,\n  isUnlocking = false,\n}) => {\n  const isPaid = paymentStatus === 'paid'\n\n  if (isPaid && renderedText) {\n    return (\n      <TextShell isMine={false}>\n        {renderedText}\n        <PriceLockRow>\n          {amountText != null && (\n            <span className=\"opacity-55\">{amountText}</span>\n          )}\n          <PurchaseStatusBadge isMine={false} paymentStatus=\"paid\" />\n        </PriceLockRow>\n      </TextShell>\n    )\n  }\n\n  const ariaLabel = isUnlocking ? 'Unlocking message.' : 'Unlock this message.'\n\n  return (\n    <TextShell isMine={false}>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex flex-1 flex-col gap-2\">\n          <SkeletonTextLines variant=\"light\" />\n          <span className=\"sr-only\" aria-live=\"polite\">\n            {ariaLabel}\n          </span>\n          <PriceLockRow>\n            {amountText != null && (\n              <span className=\"opacity-55\">{amountText}</span>\n            )}\n          </PriceLockRow>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onUnlockClick}\n          disabled={isUnlocking}\n          aria-label={isUnlocking ? 'Unlocking message' : 'Unlock message'}\n          aria-busy={isUnlocking}\n          title={isUnlocking ? 'Unlocking message' : 'Unlock message'}\n          className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]\"\n        >\n          {isUnlocking ? (\n            <LoadingDots />\n          ) : (\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" aria-hidden />\n          )}\n        </button>\n      </div>\n    </TextShell>\n  )\n}\n\nconst TextCard: React.FC<TextCardProps> = (props) => {\n  if (props.isDraft) {\n    return <DraftTextCard {...props} />\n  } else if (props.isPreview) {\n    return <PreviewTextCard {...props} />\n  } else if (props.isMine) {\n    return <OwnTextCard {...props} />\n  } else {\n    return <OtherTextCard {...props} />\n  }\n}\n\nexport default TextCard\n"],"names":["PriceLockRow","children","jsxs","jsx","LockSimpleIcon","SkeletonTextLines","variant","colour","classNames","TextShell","isMine","className","DraftTextCard","renderedText","amountText","placeholderAmountText","onDismiss","XIcon","PreviewTextCard","OwnTextCard","paymentStatus","PurchaseStatusBadge","OtherTextCard","onUnlockClick","isUnlocking","LoadingDots","TextCard","props"],"mappings":";;;;AASA,MAAMA,IAAkD,CAAC,EAAE,UAAAC,QACzD,gBAAAC,EAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,QAAO;AAAA,MACP,eAAW;AAAA,IAAA;AAAA,EAAA;AAAA,EAEZH;AAAA,GACH,GCAII,IAAsD,CAAC;AAAA,EAC3D,SAAAC,IAAU;AACZ,MAAM;AACJ,QAAMC,IAASD,MAAY,SAAS,gBAAgB;AAEpD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAW;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWK,EAAW,yBAAyBD,CAAM,GAAG;AAAA,0BAC5D,OAAA,EAAI,WAAWC,EAAW,yBAAyBD,CAAM,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnE,GCrBME,IAEF,CAAC,EAAE,QAAAC,GAAQ,UAAAT,GAAU,WAAAU,QACvB,gBAAAR;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWK;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACAE,IAAS,4BAA4B;AAAA,MACrC;AAAA,MACAC;AAAA,IAAA;AAAA,IAGD,UAAAV;AAAA,EAAA;AACH,GCLIW,IAA8C,CAAC;AAAA,EACnD,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,WAAAC;AACF,MACE,gBAAAd,EAACO,GAAA,EAAU,QAAM,IAAC,WAAU,QACzB,UAAA;AAAA,EAAAI,KAAgB,gBAAAV,EAACE,GAAA,EAAkB,SAAQ,OAAA,CAAO;AAAA,EACnD,gBAAAF,EAACH,GAAA,EACC,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWW,IAAa,kBAAkB,iBAC7C,UAAAA,KAAcC,EAAA,CACjB,EAAA,CACF;AAAA,EACCC,KACC,gBAAAb;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASa;AAAA,MACT,WAAU;AAAA,MACV,cAAW;AAAA,MAEX,UAAA,gBAAAb,EAACc,GAAA,EAAM,WAAU,UAAS,QAAO,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAC1C,GAEJ,GAGIC,IAAkD,CAAC;AAAA,EACvD,YAAAJ;AAAA,EACA,uBAAAC;AACF,MACE,gBAAAb,EAACO,GAAA,EAAU,QAAQ,IACjB,UAAA;AAAA,EAAA,gBAAAN,EAACE,GAAA,EAAkB,SAAQ,QAAA,CAAQ;AAAA,EACnC,gBAAAF,EAACH,KACC,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,cAAc,UAAAW,KAAcC,GAAsB,EAAA,CACpE;AAAA,GACF,GAGII,IAA0C,CAAC;AAAA,EAC/C,cAAAN;AAAA,EACA,YAAAC;AAAA,EACA,eAAAM,IAAgB;AAClB,MAII,gBAAAlB,EAACO,GAAA,EAAU,QAAM,IACd,UAAA;AAAA,EAJUW,MAAkB,UAIlBP,IACTA,IAEA,gBAAAV,EAACE,GAAA,EAAkB,SAAQ,QAAO;AAAA,oBAEnCL,GAAA,EACE,UAAA;AAAA,IAAAc,KAAc,gBAAAX,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAW,GAAW;AAAA,IAC3D,gBAAAX,EAACkB,GAAA,EAAoB,QAAM,IAAC,eAAAD,EAAA,CAA8B;AAAA,EAAA,EAAA,CAC5D;AAAA,GACF,GAIEE,IAA8C,CAAC;AAAA,EACnD,cAAAT;AAAA,EACA,YAAAC;AAAA,EACA,eAAAM;AAAA,EACA,eAAAG;AAAA,EACA,aAAAC,IAAc;AAChB,MACiBJ,MAAkB,UAEnBP,IAEV,gBAAAX,EAACO,GAAA,EAAU,QAAQ,IAChB,UAAA;AAAA,EAAAI;AAAA,oBACAb,GAAA,EACE,UAAA;AAAA,IAAAc,KAAc,QACb,gBAAAX,EAAC,QAAA,EAAK,WAAU,cAAc,UAAAW,GAAW;AAAA,IAE3C,gBAAAX,EAACkB,GAAA,EAAoB,QAAQ,IAAO,eAAc,OAAA,CAAO;AAAA,EAAA,EAAA,CAC3D;AAAA,GACF,sBAODZ,GAAA,EAAU,QAAQ,IACjB,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA,gBAAAC,EAACE,GAAA,EAAkB,SAAQ,QAAA,CAAQ;AAAA,sBAClC,QAAA,EAAK,WAAU,WAAU,aAAU,UACjC,UAROmB,IAAc,uBAAuB,wBAS/C;AAAA,IACA,gBAAArB,EAACH,KACE,UAAAc,KAAc,0BACZ,QAAA,EAAK,WAAU,cAAc,UAAAA,EAAA,CAAW,EAAA,CAE7C;AAAA,EAAA,GACF;AAAA,EACA,gBAAAX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASoB;AAAA,MACT,UAAUC;AAAA,MACV,cAAYA,IAAc,sBAAsB;AAAA,MAChD,aAAWA;AAAA,MACX,OAAOA,IAAc,sBAAsB;AAAA,MAC3C,WAAU;AAAA,MAET,UAAAA,IACC,gBAAArB,EAACsB,GAAA,CAAA,CAAY,IAEb,gBAAAtB,EAACC,GAAA,EAAe,WAAU,UAAS,QAAO,QAAO,eAAW,GAAA,CAAC;AAAA,IAAA;AAAA,EAAA;AAEjE,EAAA,CACF,EAAA,CACF,GAIEsB,IAAoC,CAACC,MACrCA,EAAM,UACD,gBAAAxB,EAACS,GAAA,EAAe,GAAGe,EAAA,CAAO,IACxBA,EAAM,YACR,gBAAAxB,EAACe,GAAA,EAAiB,GAAGS,EAAA,CAAO,IAC1BA,EAAM,SACR,gBAAAxB,EAACgB,GAAA,EAAa,GAAGQ,EAAA,CAAO,IAExB,gBAAAxB,EAACmB,GAAA,EAAe,GAAGK,EAAA,CAAO;"}