@linktr.ee/messaging-react 3.12.4-rc-1784099103 → 3.12.4-rc-1784101037

package/dist/{Card-Ce9FOfFE.cjs.map → Card-WIKV3qOh.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Card-Ce9FOfFE.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> = ({ variant = 'dark' }) => {\n  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'\n\n  return (\n    <div className=\"flex flex-col gap-2 str-chat__message-text my-1 animate-pulse\" aria-hidden>\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 w-fit max-w-[min(100%,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\n    ? 'Unlocking message.'\n    : '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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"}
+{"version":3,"file":"Card-WIKV3qOh.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> = ({ variant = 'dark' }) => {\n  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'\n\n  return (\n    <div className=\"flex flex-col gap-2 str-chat__message-text my-1 animate-pulse\" aria-hidden>\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 w-fit max-w-[min(280px,100%)] 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\n    ? 'Unlocking message.'\n    : '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/{index-CINy7e9F.js → index-4V2hVQl1.js}

@@ -1240,7 +1240,7 @@ const Ea = (e) => {
       ref: f,
       "data-testid": h,
       className: k(
-        "relative w-full max-w-[280px] select-none overflow-hidden rounded-[24px] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]",
+        "relative w-[min(280px,100%)] select-none overflow-hidden rounded-[24px] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]",
         g ? "bg-[#1e2330]" : "bg-white"
       ),
       children: [
@@ -1289,7 +1289,7 @@ function ps(e) {
   return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
 }
 function ht(e) {
-  return `w-full max-w-[280px] select-none overflow-hidden rounded-[24px] ${e ? "bg-[#1e2330]" : "bg-[#F3F3F1]"} shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]`;
+  return `w-[min(280px,100%)] select-none overflow-hidden rounded-[24px] ${e ? "bg-[#1e2330]" : "bg-[#F3F3F1]"} shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]`;
 }
 function Ma(e) {
   return e ? "bg-white/10" : "bg-black/5";
@@ -1543,12 +1543,12 @@ const vs = ({
       "data-testid": o,
       "data-group-position": a,
       className: k(
-        // Caps at 280px and shrinks with the message row so mweb padding
-        // can't force horizontal overflow. The 8px / 16px inset matches
+        // Width is min(280px, 100%) so cards cap at the design size and
+        // shrink with the message row. The 8px / 16px inset matches
         // `--str-chat__spacing-2 --str-chat__spacing-4` so attachments
         // share the same hit / negative-space rhythm as surrounding
         // `CustomMessage` text bubbles.
-        "relative w-full max-w-[280px] overflow-hidden px-2 py-2",
+        "relative w-[min(280px,100%)] overflow-hidden px-2 py-2",
         d,
         Ua[e],
         Ba[e],
@@ -2668,10 +2668,10 @@ const rr = ({
 function Pr(e) {
   return Te(As)[e] ?? Fr[e];
 }
-const Or = V.lazy(() => import("./Card-CNVnUwPO.js")), $r = V.lazy(() => import("./Card-CEcDWSUV.js")), Ur = () => /* @__PURE__ */ s(
+const Or = V.lazy(() => import("./Card-CNST04Mf.js")), $r = V.lazy(() => import("./Card-DSS88TWW.js")), Ur = () => /* @__PURE__ */ s(
   "div",
   {
-    className: "w-full max-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)]",
+    className: "w-[min(280px,100%)] 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": !0
   }
 ), Pe = (e) => /* @__PURE__ */ s(Gs, { fallback: /* @__PURE__ */ s(Ur, {}), children: e.contentType === "text" ? /* @__PURE__ */ s(Or, { ...e }) : /* @__PURE__ */ s($r, { ...e }) }), Br = ({ size: e = 15 }) => /* @__PURE__ */ s(
@@ -2884,7 +2884,7 @@ const Jr = {
     o && /* @__PURE__ */ s(Qr, { variant: e, cta: o })
   ] });
 }, ni = k(
-  "relative block w-full max-w-[280px] select-none overflow-hidden rounded-md",
+  "relative block w-[min(280px,100%)] select-none overflow-hidden rounded-md",
   // 1px hairline border that sits flush with the card chrome — matches
   // the messaging design system's "small border around link attachments"
   // treatment from the mobile spec. The drop shadow remains for depth.
@@ -5348,4 +5348,4 @@ export {
   He as y,
   gt as z
 };
-//# sourceMappingURL=index-CINy7e9F.js.map
+//# sourceMappingURL=index-4V2hVQl1.js.map