stream-chat-react 14.11.1 → 15.0.0-rc.1

package/dist/es/components/Attachment/audioSampling.mjs

@@ -0,0 +1,74 @@
+import { divMod } from "./utils.mjs";
+//#region src/components/Attachment/audioSampling.ts
+var resampleWaveformData = (waveformData, amplitudesCount) => waveformData.length === amplitudesCount ? waveformData : waveformData.length > amplitudesCount ? downSample(waveformData, amplitudesCount) : upSample(waveformData, amplitudesCount);
+/**
+* The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
+* See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
+* @param data
+* @param targetOutputSize
+*/
+function downSample(data, targetOutputSize) {
+	if (data.length <= targetOutputSize || targetOutputSize === 0) return data;
+	if (targetOutputSize === 1) return [mean(data)];
+	const result = [];
+	const bucketSize = (data.length - 2) / (targetOutputSize - 2);
+	let lastSelectedPointIndex = 0;
+	result.push(data[lastSelectedPointIndex]);
+	let maxAreaPoint, maxArea, triangleArea;
+	for (let bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
+		const previousBucketRefPoint = data[lastSelectedPointIndex];
+		const nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
+		const currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
+		const nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
+		const countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
+		maxArea = triangleArea = -1;
+		for (let currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
+			const countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
+			const countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
+			const currentPointValue = data[currentPointIndex];
+			triangleArea = triangleAreaHeron(triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB), triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC), triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC));
+			if (triangleArea > maxArea) {
+				maxArea = triangleArea;
+				maxAreaPoint = data[currentPointIndex];
+				lastSelectedPointIndex = currentPointIndex;
+			}
+		}
+		if (typeof maxAreaPoint !== "undefined") result.push(maxAreaPoint);
+	}
+	result.push(data[data.length - 1]);
+	return result;
+}
+var triangleAreaHeron = (a, b, c) => {
+	const s = (a + b + c) / 2;
+	return Math.sqrt(s * (s - a) * (s - b) * (s - c));
+};
+var triangleBase = (a, b) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
+var mean = (values) => values.reduce((acc, value) => acc + value, 0) / values.length;
+var getNextBucketMean = (data, currentBucketIndex, bucketSize) => {
+	const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
+	let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
+	nextNextBucketStartIndex = nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;
+	return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
+};
+var upSample = (values, targetSize) => {
+	if (!values.length) {
+		console.warn("Cannot extend empty array of amplitudes.");
+		return values;
+	}
+	if (values.length > targetSize) {
+		console.warn("Requested to extend the waveformData that is longer than the target list size");
+		return values;
+	}
+	if (targetSize === values.length) return values;
+	let [bucketSize, remainder] = divMod(targetSize, values.length);
+	const result = [];
+	for (let i = 0; i < values.length; i++) {
+		const extra = remainder && remainder-- ? 1 : 0;
+		result.push(...Array(bucketSize + extra).fill(values[i]));
+	}
+	return result;
+};
+//#endregion
+export { downSample, resampleWaveformData, upSample };
+
+//# sourceMappingURL=audioSampling.mjs.map

package/dist/es/components/Attachment/audioSampling.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioSampling.mjs","names":[],"sources":["../../../../src/components/Attachment/audioSampling.ts"],"sourcesContent":["import { divMod } from './utils';\n\nexport const resampleWaveformData = (waveformData: number[], amplitudesCount: number) =>\n  waveformData.length === amplitudesCount\n    ? waveformData\n    : waveformData.length > amplitudesCount\n      ? downSample(waveformData, amplitudesCount)\n      : upSample(waveformData, amplitudesCount);\n\n/**\n * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.\n * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)\n * @param data\n * @param targetOutputSize\n */\nexport function downSample(data: number[], targetOutputSize: number): number[] {\n  if (data.length <= targetOutputSize || targetOutputSize === 0) {\n    return data;\n  }\n\n  if (targetOutputSize === 1) return [mean(data)];\n\n  const result: number[] = [];\n  // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output\n  const bucketSize = (data.length - 2) / (targetOutputSize - 2);\n  let lastSelectedPointIndex = 0;\n  result.push(data[lastSelectedPointIndex]); // Always add the first point\n  let maxAreaPoint, maxArea, triangleArea;\n\n  for (let bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {\n    const previousBucketRefPoint = data[lastSelectedPointIndex];\n    const nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);\n\n    const currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;\n    const nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;\n    const countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;\n\n    maxArea = triangleArea = -1;\n\n    for (\n      let currentPointIndex = currentBucketStartIndex;\n      currentPointIndex < nextBucketStartIndex;\n      currentPointIndex++\n    ) {\n      const countUnitsBetweenAtoB =\n        Math.abs(currentPointIndex - currentBucketStartIndex) + 1;\n      const countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;\n      const currentPointValue = data[currentPointIndex];\n\n      triangleArea = triangleAreaHeron(\n        triangleBase(\n          Math.abs(previousBucketRefPoint - currentPointValue),\n          countUnitsBetweenAtoB,\n        ),\n        triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC),\n        triangleBase(\n          Math.abs(previousBucketRefPoint - nextBucketMean),\n          countUnitsBetweenAtoC,\n        ),\n      );\n\n      if (triangleArea > maxArea) {\n        maxArea = triangleArea;\n        maxAreaPoint = data[currentPointIndex];\n        lastSelectedPointIndex = currentPointIndex;\n      }\n    }\n\n    if (typeof maxAreaPoint !== 'undefined') result.push(maxAreaPoint);\n  }\n\n  result.push(data[data.length - 1]); // Always add the last point\n\n  return result;\n}\n\nconst triangleAreaHeron = (a: number, b: number, c: number) => {\n  const s = (a + b + c) / 2;\n  return Math.sqrt(s * (s - a) * (s - b) * (s - c));\n};\nconst triangleBase = (a: number, b: number) => Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));\nconst mean = (values: number[]) =>\n  values.reduce((acc, value) => acc + value, 0) / values.length;\nconst getNextBucketMean = (\n  data: number[],\n  currentBucketIndex: number,\n  bucketSize: number,\n) => {\n  const nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;\n  let nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;\n  nextNextBucketStartIndex =\n    nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;\n\n  return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));\n};\nexport const upSample = (values: number[], targetSize: number) => {\n  if (!values.length) {\n    console.warn('Cannot extend empty array of amplitudes.');\n    return values;\n  }\n\n  if (values.length > targetSize) {\n    console.warn(\n      'Requested to extend the waveformData that is longer than the target list size',\n    );\n    return values;\n  }\n\n  if (targetSize === values.length) return values;\n\n  // eslint-disable-next-line prefer-const\n  let [bucketSize, remainder] = divMod(targetSize, values.length);\n  const result: number[] = [];\n\n  for (let i = 0; i < values.length; i++) {\n    const extra = remainder && remainder-- ? 1 : 0;\n    result.push(...Array(bucketSize + extra).fill(values[i]));\n  }\n  return result;\n};\n"],"mappings":";;AAEA,IAAa,wBAAwB,cAAwB,oBAC3D,aAAa,WAAW,kBACpB,eACA,aAAa,SAAS,kBACpB,WAAW,cAAc,eAAe,IACxC,SAAS,cAAc,eAAe;;;;;;;AAQ9C,SAAgB,WAAW,MAAgB,kBAAoC;CAC7E,IAAI,KAAK,UAAU,oBAAoB,qBAAqB,GAC1D,OAAO;CAGT,IAAI,qBAAqB,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;CAE9C,MAAM,SAAmB,CAAC;CAE1B,MAAM,cAAc,KAAK,SAAS,MAAM,mBAAmB;CAC3D,IAAI,yBAAyB;CAC7B,OAAO,KAAK,KAAK,uBAAuB;CACxC,IAAI,cAAc,SAAS;CAE3B,KAAK,IAAI,cAAc,GAAG,cAAc,mBAAmB,GAAG,eAAe;EAC3E,MAAM,yBAAyB,KAAK;EACpC,MAAM,iBAAiB,kBAAkB,MAAM,aAAa,UAAU;EAEtE,MAAM,0BAA0B,KAAK,OAAO,cAAc,KAAK,UAAU,IAAI;EAC7E,MAAM,uBAAuB,KAAK,MAAM,cAAc,UAAU,IAAI;EACpE,MAAM,wBAAwB,IAAI,uBAAuB;EAEzD,UAAU,eAAe;EAEzB,KACE,IAAI,oBAAoB,yBACxB,oBAAoB,sBACpB,qBACA;GACA,MAAM,wBACJ,KAAK,IAAI,oBAAoB,uBAAuB,IAAI;GAC1D,MAAM,wBAAwB,wBAAwB;GACtD,MAAM,oBAAoB,KAAK;GAE/B,eAAe,kBACb,aACE,KAAK,IAAI,yBAAyB,iBAAiB,GACnD,qBACF,GACA,aAAa,KAAK,IAAI,oBAAoB,cAAc,GAAG,qBAAqB,GAChF,aACE,KAAK,IAAI,yBAAyB,cAAc,GAChD,qBACF,CACF;GAEA,IAAI,eAAe,SAAS;IAC1B,UAAU;IACV,eAAe,KAAK;IACpB,yBAAyB;GAC3B;EACF;EAEA,IAAI,OAAO,iBAAiB,aAAa,OAAO,KAAK,YAAY;CACnE;CAEA,OAAO,KAAK,KAAK,KAAK,SAAS,EAAE;CAEjC,OAAO;AACT;AAEA,IAAM,qBAAqB,GAAW,GAAW,MAAc;CAC7D,MAAM,KAAK,IAAI,IAAI,KAAK;CACxB,OAAO,KAAK,KAAK,KAAK,IAAI,MAAM,IAAI,MAAM,IAAI,EAAE;AAClD;AACA,IAAM,gBAAgB,GAAW,MAAc,KAAK,KAAK,KAAK,IAAI,GAAG,CAAC,IAAI,KAAK,IAAI,GAAG,CAAC,CAAC;AACxF,IAAM,QAAQ,WACZ,OAAO,QAAQ,KAAK,UAAU,MAAM,OAAO,CAAC,IAAI,OAAO;AACzD,IAAM,qBACJ,MACA,oBACA,eACG;CACH,MAAM,uBAAuB,KAAK,MAAM,qBAAqB,UAAU,IAAI;CAC3E,IAAI,2BAA2B,KAAK,OAAO,qBAAqB,KAAK,UAAU,IAAI;CACnF,2BACE,2BAA2B,KAAK,SAAS,2BAA2B,KAAK;CAE3E,OAAO,KAAK,KAAK,MAAM,sBAAsB,wBAAwB,CAAC;AACxE;AACA,IAAa,YAAY,QAAkB,eAAuB;CAChE,IAAI,CAAC,OAAO,QAAQ;EAClB,QAAQ,KAAK,0CAA0C;EACvD,OAAO;CACT;CAEA,IAAI,OAAO,SAAS,YAAY;EAC9B,QAAQ,KACN,+EACF;EACA,OAAO;CACT;CAEA,IAAI,eAAe,OAAO,QAAQ,OAAO;CAGzC,IAAI,CAAC,YAAY,aAAa,OAAO,YAAY,OAAO,MAAM;CAC9D,MAAM,SAAmB,CAAC;CAE1B,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;EACtC,MAAM,QAAQ,aAAa,cAAc,IAAI;EAC7C,OAAO,KAAK,GAAG,MAAM,aAAa,KAAK,CAAC,CAAC,KAAK,OAAO,EAAE,CAAC;CAC1D;CACA,OAAO;AACT"}

package/dist/es/components/Attachment/components/AttachmentUploadProgressIndicator.mjs

@@ -0,0 +1,38 @@
+import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
+import { AttachmentUploadedSizeIndicator } from "../../Loading/AttachmentUploadedSizeIndicator.mjs";
+import { useAttachmentsUploadState } from "../hooks/useAttachmentUploadState.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Attachment/components/AttachmentUploadProgressIndicator.tsx
+/**
+* Upload progress for an attachment carried by a message whose send is already under way.
+*
+* Renders exactly what the composer's attachment previews render — the shared
+* {@link UploadProgressIndicator} (a progress ring, or a spinner when the transfer length is
+* not computable) followed by {@link AttachmentUploadedSizeIndicator}'s uploaded/total bytes —
+* so an attachment looks the same either side of pressing send.
+*
+* Renders `null` for any attachment that is not mid-upload, which is every attachment that came
+* back from the API. Placing it in the default widgets therefore changes nothing for messages
+* that are already sent.
+*/
+var AttachmentUploadProgressIndicator = ({ attachment, attachments, className, variant = "inline" }) => {
+	const { isUploading, progress, uploadConfirmationPending } = useAttachmentsUploadState(useMemo(() => attachment ? [attachment] : attachments ?? [], [attachment, attachments]));
+	if (!isUploading) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__attachment-upload-progress", `str-chat__attachment-upload-progress--${variant}`, className),
+		"data-testid": "attachment-upload-progress",
+		children: [/* @__PURE__ */ jsx(UploadProgressIndicator, {
+			uploadConfirmationPending,
+			uploadProgress: progress
+		}), attachment && /* @__PURE__ */ jsx(AttachmentUploadedSizeIndicator, {
+			attachment,
+			uploadProgress: progress
+		})]
+	});
+};
+//#endregion
+export { AttachmentUploadProgressIndicator };
+
+//# sourceMappingURL=AttachmentUploadProgressIndicator.mjs.map

package/dist/es/components/Attachment/components/AttachmentUploadProgressIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentUploadProgressIndicator.mjs","names":[],"sources":["../../../../../src/components/Attachment/components/AttachmentUploadProgressIndicator.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport clsx from 'clsx';\nimport type { Attachment, LocalAttachment } from 'stream-chat';\n\nimport { useAttachmentsUploadState } from '../hooks/useAttachmentUploadState';\nimport { AttachmentUploadedSizeIndicator } from '../../Loading/AttachmentUploadedSizeIndicator';\nimport { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';\n\nexport type AttachmentUploadProgressIndicatorProps = {\n  /** The attachment being uploaded. Nothing renders unless its upload is still in flight. */\n  attachment?: Attachment | LocalAttachment;\n  /**\n   * Several attachments sharing one indicator, used by galleries. Their progress is averaged\n   * and the uploaded/total size is omitted. Ignored when `attachment` is given.\n   */\n  attachments?: (Attachment | LocalAttachment)[];\n  className?: string;\n  /**\n   * `inline` sits in the row that normally holds the file size (file, audio, voice recording).\n   * `overlay` is absolutely positioned over the media itself (image, video, gallery), inset\n   * from the bottom edge.\n   * @default 'inline'\n   */\n  variant?: 'inline' | 'overlay';\n};\n\n/**\n * Upload progress for an attachment carried by a message whose send is already under way.\n *\n * Renders exactly what the composer's attachment previews render — the shared\n * {@link UploadProgressIndicator} (a progress ring, or a spinner when the transfer length is\n * not computable) followed by {@link AttachmentUploadedSizeIndicator}'s uploaded/total bytes —\n * so an attachment looks the same either side of pressing send.\n *\n * Renders `null` for any attachment that is not mid-upload, which is every attachment that came\n * back from the API. Placing it in the default widgets therefore changes nothing for messages\n * that are already sent.\n */\nexport const AttachmentUploadProgressIndicator = ({\n  attachment,\n  attachments,\n  className,\n  variant = 'inline',\n}: AttachmentUploadProgressIndicatorProps) => {\n  const resolvedAttachments = useMemo(\n    () => (attachment ? [attachment] : (attachments ?? [])),\n    [attachment, attachments],\n  );\n  const { isUploading, progress, uploadConfirmationPending } =\n    useAttachmentsUploadState(resolvedAttachments);\n\n  if (!isUploading) return null;\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__attachment-upload-progress',\n        `str-chat__attachment-upload-progress--${variant}`,\n        className,\n      )}\n      data-testid='attachment-upload-progress'\n    >\n      <UploadProgressIndicator\n        uploadConfirmationPending={uploadConfirmationPending}\n        uploadProgress={progress}\n      />\n      {/*\n        The byte readout keeps the real value, so it settles on \"4.3 MB / 4.3 MB\" rather than\n        vanishing while the spinner runs — all the bytes genuinely have been sent.\n        Byte counts only make sense for a single attachment; a gallery shows just the ring.\n      */}\n      {attachment && (\n        <AttachmentUploadedSizeIndicator\n          attachment={attachment}\n          uploadProgress={progress}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,IAAa,qCAAqC,EAChD,YACA,aACA,WACA,UAAU,eACkC;CAK5C,MAAM,EAAE,aAAa,UAAU,8BAC7B,0BAL0B,cACnB,aAAa,CAAC,UAAU,IAAK,eAAe,CAAC,GACpD,CAAC,YAAY,WAAW,CAGE,CAAmB;CAE/C,IAAI,CAAC,aAAa,OAAO;CAEzB,OACE,qBAAC,OAAD;EACE,WAAW,KACT,wCACA,yCAAyC,WACzC,SACF;EACA,eAAY;YANd,CAQE,oBAAC,yBAAD;GAC6B;GAC3B,gBAAgB;EACjB,CAAA,GAMA,cACC,oBAAC,iCAAD;GACc;GACZ,gBAAgB;EACjB,CAAA,CAEA;;AAET"}

package/dist/es/components/Attachment/components/DownloadButton.mjs

@@ -0,0 +1,35 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { sanitizeUrl } from "@braintree/sanitize-url";
+//#region src/components/Attachment/components/DownloadButton.tsx
+/**
+* Icon download control for {@link Audio} and {@link FileAttachment} rows.
+* (BaseImage defines its own small download link when `showDownloadButtonOnError` is used.)
+*/
+var DownloadButton = ({ assetUrl, className, suggestedFileName, tooltipTitle }) => {
+	const { IconDownload } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	if (!assetUrl) return null;
+	const href = sanitizeUrl(assetUrl);
+	if (!href) return null;
+	return /* @__PURE__ */ jsx("a", {
+		"aria-label": t("common.downloadAttachment.ariaLabel", "Download attachment"),
+		className: clsx("str-chat__button", "str-chat__button--secondary", "str-chat__button--outline", "str-chat__button--circular", "str-chat__button--size-sm", "str-chat__audio-attachment-download-button", className),
+		download: suggestedFileName ?? "",
+		href,
+		rel: "noopener noreferrer",
+		target: "_blank",
+		title: tooltipTitle ?? t("common.downloadAttachment.title", "Download Attachment"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__button__content",
+			children: /* @__PURE__ */ jsx(IconDownload, { className: "str-chat__icon str-chat__audio-attachment-download-button__icon" })
+		})
+	});
+};
+//#endregion
+export { DownloadButton };
+
+//# sourceMappingURL=DownloadButton.mjs.map

package/dist/es/components/Attachment/components/DownloadButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadButton.mjs","names":[],"sources":["../../../../../src/components/Attachment/components/DownloadButton.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\n\nexport type DownloadButtonProps = {\n  /** Attachment asset URL (e.g. `asset_url`). */\n  assetUrl?: string;\n  className?: string;\n  /** Suggested filename for the `download` attribute (not the HTML `title` tooltip). */\n  suggestedFileName?: string;\n  /** Native browser tooltip; defaults to translated “Download Attachment”. */\n  tooltipTitle?: string;\n};\n\n/**\n * Icon download control for {@link Audio} and {@link FileAttachment} rows.\n * (BaseImage defines its own small download link when `showDownloadButtonOnError` is used.)\n */\nexport const DownloadButton = ({\n  assetUrl,\n  className,\n  suggestedFileName,\n  tooltipTitle,\n}: DownloadButtonProps) => {\n  const { IconDownload } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  if (!assetUrl) return null;\n  const href = sanitizeUrl(assetUrl);\n  if (!href) return null;\n\n  return (\n    <a\n      aria-label={t('common.downloadAttachment.ariaLabel', 'Download attachment')}\n      className={clsx(\n        'str-chat__button',\n        'str-chat__button--secondary',\n        'str-chat__button--outline',\n        'str-chat__button--circular',\n        'str-chat__button--size-sm',\n        'str-chat__audio-attachment-download-button',\n        className,\n      )}\n      download={suggestedFileName ?? ''}\n      href={href}\n      rel='noopener noreferrer'\n      target='_blank'\n      title={tooltipTitle ?? t('common.downloadAttachment.title', 'Download Attachment')}\n    >\n      <div className='str-chat__button__content'>\n        <IconDownload className='str-chat__icon str-chat__audio-attachment-download-button__icon' />\n      </div>\n    </a>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,kBAAkB,EAC7B,UACA,WACA,mBACA,mBACyB;CACzB,MAAM,EAAE,iBAAiB,yBAAyB;CAClD,MAAM,EAAE,MAAM,sBAAsB;CACpC,IAAI,CAAC,UAAU,OAAO;CACtB,MAAM,OAAO,YAAY,QAAQ;CACjC,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,oBAAC,KAAD;EACE,cAAY,EAAE,uCAAuC,qBAAqB;EAC1E,WAAW,KACT,oBACA,+BACA,6BACA,8BACA,6BACA,8CACA,SACF;EACA,UAAU,qBAAqB;EACzB;EACN,KAAI;EACJ,QAAO;EACP,OAAO,gBAAgB,EAAE,mCAAmC,qBAAqB;YAEjF,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,cAAD,EAAc,WAAU,kEAAmE,CAAA;EACxF,CAAA;CACJ,CAAA;AAEP"}

package/dist/es/components/Attachment/components/FileSizeIndicator.mjs

@@ -0,0 +1,17 @@
+import { prettifyFileSize } from "../../MessageComposer/hooks/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Attachment/components/FileSizeIndicator.tsx
+var FileSizeIndicator = ({ fileSize, maximumFractionDigits }) => {
+	const actualFileSize = typeof fileSize === "string" ? parseFloat(fileSize) : fileSize;
+	if (typeof actualFileSize === "undefined" || !Number.isFinite(Number(actualFileSize))) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "str-chat__message-attachment-file--item-size",
+		"data-testid": "file-size-indicator",
+		children: prettifyFileSize(actualFileSize, maximumFractionDigits)
+	});
+};
+//#endregion
+export { FileSizeIndicator };
+
+//# sourceMappingURL=FileSizeIndicator.mjs.map

package/dist/es/components/Attachment/components/FileSizeIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileSizeIndicator.mjs","names":[],"sources":["../../../../../src/components/Attachment/components/FileSizeIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { prettifyFileSize } from '../../MessageComposer/hooks/utils';\n\nexport type FileSizeIndicatorProps = {\n  /** file size in byte */\n  fileSize?: number | string;\n  /**\n   The maximum number of fraction digits to display. If not set, the default behavior is to round to 3 significant digits.\n   @default undefined\n   */\n  maximumFractionDigits?: number;\n};\n\nexport const FileSizeIndicator = ({\n  fileSize,\n  maximumFractionDigits,\n}: FileSizeIndicatorProps) => {\n  const actualFileSize = typeof fileSize === 'string' ? parseFloat(fileSize) : fileSize;\n\n  if (typeof actualFileSize === 'undefined' || !Number.isFinite(Number(actualFileSize))) {\n    return null;\n  }\n\n  return (\n    <span\n      className='str-chat__message-attachment-file--item-size'\n      data-testid='file-size-indicator'\n    >\n      {prettifyFileSize(actualFileSize, maximumFractionDigits)}\n    </span>\n  );\n};\n"],"mappings":";;;;AAaA,IAAa,qBAAqB,EAChC,UACA,4BAC4B;CAC5B,MAAM,iBAAiB,OAAO,aAAa,WAAW,WAAW,QAAQ,IAAI;CAE7E,IAAI,OAAO,mBAAmB,eAAe,CAAC,OAAO,SAAS,OAAO,cAAc,CAAC,GAClF,OAAO;CAGT,OACE,oBAAC,QAAD;EACE,WAAU;EACV,eAAY;YAEX,iBAAiB,gBAAgB,qBAAqB;CACnD,CAAA;AAEV"}

package/dist/es/components/Attachment/giphyAccessibility.mjs

@@ -0,0 +1,15 @@
+//#region src/components/Attachment/giphyAccessibility.ts
+/** True when a string looks like a media URL (so it must NOT be used as an accessible name). */
+var looksLikeUrl = (value) => !!value && /^(https?:|\/\/)/i.test(value);
+/**
+* Resolve a human, non-URL giphy title for accessible naming/announcements, or `undefined`.
+* Giphy payloads rarely carry a real title (they often fall back to a media URL), so callers
+* should provide a generic label when this returns `undefined`. Shared by `Giphy` (the image's
+* accessible name) and `AttachmentActions` (the shuffle announcement) so the
+* two stay in sync.
+*/
+var getGiphyDescriptiveTitle = (title) => looksLikeUrl(title) ? void 0 : title ?? void 0;
+//#endregion
+export { getGiphyDescriptiveTitle, looksLikeUrl };
+
+//# sourceMappingURL=giphyAccessibility.mjs.map

package/dist/es/components/Attachment/giphyAccessibility.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"giphyAccessibility.mjs","names":[],"sources":["../../../../src/components/Attachment/giphyAccessibility.ts"],"sourcesContent":["/** True when a string looks like a media URL (so it must NOT be used as an accessible name). */\nexport const looksLikeUrl = (value?: string | null): boolean =>\n  !!value && /^(https?:|\\/\\/)/i.test(value);\n\n/**\n * Resolve a human, non-URL giphy title for accessible naming/announcements, or `undefined`.\n * Giphy payloads rarely carry a real title (they often fall back to a media URL), so callers\n * should provide a generic label when this returns `undefined`. Shared by `Giphy` (the image's\n * accessible name) and `AttachmentActions` (the shuffle announcement) so the\n * two stay in sync.\n */\nexport const getGiphyDescriptiveTitle = (title?: string | null): string | undefined =>\n  looksLikeUrl(title) ? undefined : (title ?? undefined);\n"],"mappings":";;AACA,IAAa,gBAAgB,UAC3B,CAAC,CAAC,SAAS,mBAAmB,KAAK,KAAK;;;;;;;;AAS1C,IAAa,4BAA4B,UACvC,aAAa,KAAK,IAAI,KAAA,IAAa,SAAS,KAAA"}

package/dist/es/components/Attachment/hooks/useAttachmentUploadState.mjs

@@ -0,0 +1,80 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useCallback, useMemo } from "react";
+import { isPendingUpload } from "stream-chat";
+//#region src/components/Attachment/hooks/useAttachmentUploadState.ts
+/** Sentinel for "no live record for this id" inside the joined selector key. */
+var NO_RECORD = "-";
+var emptyUploadState = {
+	isUploading: false,
+	uploadConfirmationPending: false
+};
+/**
+* Reports whether a request for any of these attachments is in flight *right now*, and how far
+* along it is.
+*
+* The source of truth is `client.uploadManager`, which holds a record only for the lifetime of
+* the request. That has two consequences worth knowing:
+*
+* 1. **The UI is opt-in by construction.** An integration that never hands still-uploading
+*    attachments to a message never has a message referencing a live record, so none of the
+*    upload-progress UI ever renders — no config flag needed. Attachments returned by the API
+*    carry no `localMetadata` at all and can never match.
+*
+* 2. **No phantom progress.** A message can outlive its request — the upload was aborted,
+*    `disconnectUser` called `uploadManager.reset()`, or the message was rehydrated from an
+*    offline store with a stale `localMetadata.uploadState`. Keying off the frozen state would
+*    leave such an attachment showing an indeterminate spinner forever; keying off the live
+*    record makes it self-healing.
+*
+* `localMetadata.uploadProgress` is only a fallback for the progress *number*, never for
+* deciding whether an upload is running.
+*/
+var useAttachmentsUploadState = (attachments) => {
+	const { client } = useChatContext();
+	const pending = useMemo(() => attachments.filter(isPendingUpload).map((a) => a.localMetadata), [attachments]);
+	const pendingIdsKey = pending.map(({ id }) => id).join(",");
+	const selector = useCallback((state) => ({ recordsKey: pendingIdsKey.split(",").map((id) => {
+		const record = state.uploads[id];
+		if (!record) return NO_RECORD;
+		const awaiting = record.uploadConfirmationPending === void 0 ? "" : record.uploadConfirmationPending ? "1" : "0";
+		return `${record.uploadProgress ?? ""}:${awaiting}`;
+	}).join(",") }), [pendingIdsKey]);
+	const { recordsKey } = useStateStore(client?.uploadManager?.state, selector) ?? {};
+	if (!pending.length) return emptyUploadState;
+	const liveEntries = (recordsKey?.split(",") ?? []).map((entry, index) => {
+		if (entry === NO_RECORD) return void 0;
+		const [reportedProgress, reportedAwaiting] = entry.split(":");
+		const progress = reportedProgress === "" ? pending[index].uploadProgress : Number(reportedProgress);
+		return {
+			progress,
+			uploadConfirmationPending: reportedAwaiting === "" ? progress !== void 0 && progress >= 100 : reportedAwaiting === "1"
+		};
+	}).filter((entry) => !!entry);
+	if (!liveEntries.length) return emptyUploadState;
+	const values = liveEntries.map(({ progress }) => progress);
+	const known = values.filter((value) => typeof value === "number");
+	return {
+		isUploading: true,
+		progress: known.length === values.length && known.length ? Math.round(known.reduce((sum, value) => sum + value, 0) / known.length) : void 0,
+		uploadConfirmationPending: liveEntries.some(({ uploadConfirmationPending }) => uploadConfirmationPending)
+	};
+};
+/** Single-attachment convenience wrapper around {@link useAttachmentsUploadState}. */
+var useAttachmentUploadState = (attachment) => useAttachmentsUploadState(useMemo(() => [attachment], [attachment]));
+/**
+* Whether an attachment is in the window where every byte has been sent but the server has not
+* confirmed — read straight off `localMetadata`.
+*
+* This is the composer-side counterpart to {@link useAttachmentsUploadState}: for an attachment
+* still held by the composer, `AttachmentManager` mirrors the live `UploadRecord` into
+* `localMetadata`, so no store subscription is needed. On a *message* the mirrored value is a
+* frozen snapshot, which is why the message side reads the record instead.
+*
+* Falls back to inferring the window from a 100% reading when `uploadConfirmationPending` is absent,
+* i.e. against a resolved `stream-chat` older than v9.51.
+*/
+//#endregion
+export { useAttachmentUploadState, useAttachmentsUploadState };
+
+//# sourceMappingURL=useAttachmentUploadState.mjs.map

package/dist/es/components/Attachment/hooks/useAttachmentUploadState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAttachmentUploadState.mjs","names":[],"sources":["../../../../../src/components/Attachment/hooks/useAttachmentUploadState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { isPendingUpload } from 'stream-chat';\nimport type {\n  Attachment,\n  LocalAttachment,\n  SharedLocationResponse,\n  UploadManagerState,\n} from 'stream-chat';\n\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useStateStore } from '../../../store';\n\nexport type AttachmentUploadState = {\n  /**\n   * `true` once every byte has been handed to the socket but the server has not answered yet.\n   *\n   * Browser upload progress measures bytes *written to the connection*, not bytes the server\n   * acknowledged, so it reaches 100% the instant the request body is flushed — then the\n   * connection sits idle while the CDN ingests the file and the response travels back. On a\n   * large file over a slow link that dead zone is long, and a bar parked at 100% claims the\n   * upload is done when nothing is confirmed. Nothing measurable is happening during it, so the\n   * honest rendering is indeterminate.\n   */\n  uploadConfirmationPending: boolean;\n  /**\n   * `true` only while `client.uploadManager` holds a live record for at least one of the\n   * attachments — i.e. a request really is in flight right now.\n   */\n  isUploading: boolean;\n  /**\n   * 0–100 while uploading and the transfer length is known; `undefined` otherwise. For several\n   * attachments this is their mean, so a gallery shows one combined bar.\n   */\n  progress?: number;\n};\n\n/** Sentinel for \"no live record for this id\" inside the joined selector key. */\nconst NO_RECORD = '-';\n\n/**\n * `UploadRecord.uploadConfirmationPending` was added in stream-chat v9.51 — see the field's docs there.\n * Widened locally so this SDK still compiles against an older resolved `stream-chat`, in which\n * case the flag is absent and {@link useAttachmentsUploadState} infers it instead.\n */\ntype UploadRecordWithConfirmationPending = {\n  uploadConfirmationPending?: boolean;\n  uploadProgress?: number;\n};\n\nconst emptyUploadState: AttachmentUploadState = {\n  isUploading: false,\n  uploadConfirmationPending: false,\n};\n\n/**\n * Reports whether a request for any of these attachments is in flight *right now*, and how far\n * along it is.\n *\n * The source of truth is `client.uploadManager`, which holds a record only for the lifetime of\n * the request. That has two consequences worth knowing:\n *\n * 1. **The UI is opt-in by construction.** An integration that never hands still-uploading\n *    attachments to a message never has a message referencing a live record, so none of the\n *    upload-progress UI ever renders — no config flag needed. Attachments returned by the API\n *    carry no `localMetadata` at all and can never match.\n *\n * 2. **No phantom progress.** A message can outlive its request — the upload was aborted,\n *    `disconnectUser` called `uploadManager.reset()`, or the message was rehydrated from an\n *    offline store with a stale `localMetadata.uploadState`. Keying off the frozen state would\n *    leave such an attachment showing an indeterminate spinner forever; keying off the live\n *    record makes it self-healing.\n *\n * `localMetadata.uploadProgress` is only a fallback for the progress *number*, never for\n * deciding whether an upload is running.\n */\nexport const useAttachmentsUploadState = (\n  attachments: (Attachment | LocalAttachment | SharedLocationResponse | undefined)[],\n): AttachmentUploadState => {\n  const { client } = useChatContext();\n\n  const pending = useMemo(\n    () => attachments.filter(isPendingUpload).map((a) => a.localMetadata),\n    [attachments],\n  );\n  // Stable primitive so the selector identity does not change on every render.\n  const pendingIdsKey = pending.map(({ id }) => id).join(',');\n\n  const selector = useCallback(\n    (state: UploadManagerState) => ({\n      // One joined string rather than an array: useStateStore shallow-compares the selected\n      // keys, and a fresh array would compare unequal on every store update.\n      // Per id: `-` when there is no live record, else `<progress>:<uploadConfirmationPending>`.\n      recordsKey: pendingIdsKey\n        .split(',')\n        .map((id) => {\n          const record = state.uploads[id] as\n            | UploadRecordWithConfirmationPending\n            | undefined;\n          if (!record) return NO_RECORD;\n\n          const awaiting =\n            record.uploadConfirmationPending === undefined\n              ? ''\n              : record.uploadConfirmationPending\n                ? '1'\n                : '0';\n\n          return `${record.uploadProgress ?? ''}:${awaiting}`;\n        })\n        .join(','),\n    }),\n    [pendingIdsKey],\n  );\n\n  // `client` is absent when rendered outside <Chat>; useStateStore tolerates an undefined store.\n  const { recordsKey } = useStateStore(client?.uploadManager?.state, selector) ?? {};\n\n  if (!pending.length) return emptyUploadState;\n\n  // A record exists only while the request runs — that, not the message payload, is what\n  // \"uploading\" means here.\n  const entries = (recordsKey?.split(',') ?? []).map((entry, index) => {\n    if (entry === NO_RECORD) return undefined;\n\n    const [reportedProgress, reportedAwaiting] = entry.split(':');\n    const progress =\n      reportedProgress === '' ? pending[index].uploadProgress : Number(reportedProgress);\n\n    return {\n      progress,\n      // Prefer the explicit signal from `UploadRecord.uploadConfirmationPending`. It is absent\n      // when the resolved `stream-chat` predates it, so fall back to inferring the same thing:\n      // the record is still live, therefore 100% can only mean \"all bytes sent, confirmation\n      // still pending\".\n      uploadConfirmationPending:\n        reportedAwaiting === ''\n          ? progress !== undefined && progress >= 100\n          : reportedAwaiting === '1',\n    };\n  });\n\n  const liveEntries = entries.filter((entry) => !!entry);\n  if (!liveEntries.length) return emptyUploadState;\n\n  const values = liveEntries.map(({ progress }) => progress);\n  const known = values.filter((value): value is number => typeof value === 'number');\n\n  return {\n    isUploading: true,\n    // Only report a number once every pending upload has one, so the bar does not jump between\n    // determinate and indeterminate mid-flight.\n    progress:\n      known.length === values.length && known.length\n        ? Math.round(known.reduce((sum, value) => sum + value, 0) / known.length)\n        : undefined,\n    uploadConfirmationPending: liveEntries.some(\n      ({ uploadConfirmationPending }) => uploadConfirmationPending,\n    ),\n  };\n};\n\n/** Single-attachment convenience wrapper around {@link useAttachmentsUploadState}. */\nexport const useAttachmentUploadState = (\n  attachment?: Attachment | LocalAttachment | SharedLocationResponse,\n): AttachmentUploadState =>\n  useAttachmentsUploadState(useMemo(() => [attachment], [attachment]));\n\n/**\n * Whether an attachment is in the window where every byte has been sent but the server has not\n * confirmed — read straight off `localMetadata`.\n *\n * This is the composer-side counterpart to {@link useAttachmentsUploadState}: for an attachment\n * still held by the composer, `AttachmentManager` mirrors the live `UploadRecord` into\n * `localMetadata`, so no store subscription is needed. On a *message* the mirrored value is a\n * frozen snapshot, which is why the message side reads the record instead.\n *\n * Falls back to inferring the window from a 100% reading when `uploadConfirmationPending` is absent,\n * i.e. against a resolved `stream-chat` older than v9.51.\n */\n"],"mappings":";;;;;;AAqCA,IAAM,YAAY;AAYlB,IAAM,mBAA0C;CAC9C,aAAa;CACb,2BAA2B;AAC7B;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAa,6BACX,gBAC0B;CAC1B,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,UAAU,cACR,YAAY,OAAO,eAAe,CAAC,CAAC,KAAK,MAAM,EAAE,aAAa,GACpE,CAAC,WAAW,CACd;CAEA,MAAM,gBAAgB,QAAQ,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,GAAG;CAE1D,MAAM,WAAW,aACd,WAA+B,EAI9B,YAAY,cACT,MAAM,GAAG,CAAC,CACV,KAAK,OAAO;EACX,MAAM,SAAS,MAAM,QAAQ;EAG7B,IAAI,CAAC,QAAQ,OAAO;EAEpB,MAAM,WACJ,OAAO,8BAA8B,KAAA,IACjC,KACA,OAAO,4BACL,MACA;EAER,OAAO,GAAG,OAAO,kBAAkB,GAAG,GAAG;CAC3C,CAAC,CAAC,CACD,KAAK,GAAG,EACb,IACA,CAAC,aAAa,CAChB;CAGA,MAAM,EAAE,eAAe,cAAc,QAAQ,eAAe,OAAO,QAAQ,KAAK,CAAC;CAEjF,IAAI,CAAC,QAAQ,QAAQ,OAAO;CAwB5B,MAAM,eApBW,YAAY,MAAM,GAAG,KAAK,CAAC,EAAA,CAAG,KAAK,OAAO,UAAU;EACnE,IAAI,UAAU,WAAW,OAAO,KAAA;EAEhC,MAAM,CAAC,kBAAkB,oBAAoB,MAAM,MAAM,GAAG;EAC5D,MAAM,WACJ,qBAAqB,KAAK,QAAQ,MAAM,CAAC,iBAAiB,OAAO,gBAAgB;EAEnF,OAAO;GACL;GAKA,2BACE,qBAAqB,KACjB,aAAa,KAAA,KAAa,YAAY,MACtC,qBAAqB;EAC7B;CACF,CAEoB,CAAA,CAAQ,QAAQ,UAAU,CAAC,CAAC,KAAK;CACrD,IAAI,CAAC,YAAY,QAAQ,OAAO;CAEhC,MAAM,SAAS,YAAY,KAAK,EAAE,eAAe,QAAQ;CACzD,MAAM,QAAQ,OAAO,QAAQ,UAA2B,OAAO,UAAU,QAAQ;CAEjF,OAAO;EACL,aAAa;EAGb,UACE,MAAM,WAAW,OAAO,UAAU,MAAM,SACpC,KAAK,MAAM,MAAM,QAAQ,KAAK,UAAU,MAAM,OAAO,CAAC,IAAI,MAAM,MAAM,IACtE,KAAA;EACN,2BAA2B,YAAY,MACpC,EAAE,gCAAgC,yBACrC;CACF;AACF;;AAGA,IAAa,4BACX,eAEA,0BAA0B,cAAc,CAAC,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC"}

package/dist/es/components/Attachment/hooks/useLocalVideoDimensions.mjs

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+import { FixedSizeQueueCache, withoutConcurrency } from "stream-chat";
+//#region src/components/Attachment/hooks/useLocalVideoDimensions.ts
+/**
+* Probing creates a media element, and browsers cap how many can exist at once (Chrome allows a
+* few dozen per page), so the rendered players of other attachments compete for the same budget.
+* Two guards keep this bounded no matter how many videos are in flight:
+*
+* - results are cached by source, so a blob is probed once even if its widget remounts (a
+*   virtualized list unmounts and remounts widgets as the user scrolls) or is rendered twice;
+* - probes run one at a time under a shared tag, so N uploading videos never hold N extra media
+*   elements open. Each is a metadata read off an in-memory blob, so the queue drains fast.
+*/
+var dimensionsBySource = new FixedSizeQueueCache(100);
+var PROBE_TAG = "stream-chat-react/local-video-dimensions";
+/** A file the browser cannot decode never fires `loadedmetadata`; do not block the queue on it. */
+var PROBE_TIMEOUT_MS = 5e3;
+var probeDimensions = (src) => new Promise((resolve) => {
+	const probe = document.createElement("video");
+	const finish = (dimensions) => {
+		clearTimeout(timeout);
+		probe.removeEventListener("loadedmetadata", handleLoadedMetadata);
+		probe.removeEventListener("error", handleError);
+		probe.removeAttribute("src");
+		probe.load();
+		resolve(dimensions);
+	};
+	const handleLoadedMetadata = () => {
+		const { videoHeight, videoWidth } = probe;
+		finish(videoWidth > 0 && videoHeight > 0 ? {
+			height: videoHeight,
+			width: videoWidth
+		} : void 0);
+	};
+	const handleError = () => finish();
+	const timeout = setTimeout(handleError, PROBE_TIMEOUT_MS);
+	probe.addEventListener("loadedmetadata", handleLoadedMetadata);
+	probe.addEventListener("error", handleError);
+	probe.preload = "metadata";
+	probe.src = src;
+});
+/**
+* Reads the intrinsic dimensions of a video that is not on the CDN yet.
+*
+* Sizing normally comes from the `oh`/`ow` parameters on the attachment's CDN `thumb_url`
+* (`getCssDimensionsVariables`). A video whose upload is still in flight has no `thumb_url`, so
+* the box falls back to `1000000x1000000` and lays out square — and then resizes the moment the
+* real dimensions arrive. The local file answers the same question without a network request.
+*
+* Returns `undefined` until the metadata is in, or if the file cannot be decoded.
+*/
+var useLocalVideoDimensions = (src) => {
+	const [dimensions, setDimensions] = useState(() => src ? dimensionsBySource.get(src) : void 0);
+	useEffect(() => {
+		if (!src) {
+			setDimensions(void 0);
+			return;
+		}
+		const cached = dimensionsBySource.get(src);
+		if (cached) {
+			setDimensions(cached);
+			return;
+		}
+		let cancelled = false;
+		withoutConcurrency(PROBE_TAG, async () => {
+			const resolved = dimensionsBySource.get(src) ?? await probeDimensions(src);
+			if (resolved) dimensionsBySource.add(src, resolved);
+			if (!cancelled) setDimensions(resolved);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [src]);
+	return dimensions;
+};
+//#endregion
+export { useLocalVideoDimensions };
+
+//# sourceMappingURL=useLocalVideoDimensions.mjs.map

package/dist/es/components/Attachment/hooks/useLocalVideoDimensions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalVideoDimensions.mjs","names":[],"sources":["../../../../../src/components/Attachment/hooks/useLocalVideoDimensions.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FixedSizeQueueCache, withoutConcurrency } from 'stream-chat';\n\nexport type LocalVideoDimensions = { height: number; width: number };\n\n/**\n * Probing creates a media element, and browsers cap how many can exist at once (Chrome allows a\n * few dozen per page), so the rendered players of other attachments compete for the same budget.\n * Two guards keep this bounded no matter how many videos are in flight:\n *\n * - results are cached by source, so a blob is probed once even if its widget remounts (a\n *   virtualized list unmounts and remounts widgets as the user scrolls) or is rendered twice;\n * - probes run one at a time under a shared tag, so N uploading videos never hold N extra media\n *   elements open. Each is a metadata read off an in-memory blob, so the queue drains fast.\n */\nconst dimensionsBySource = new FixedSizeQueueCache<string, LocalVideoDimensions>(100);\nconst PROBE_TAG = 'stream-chat-react/local-video-dimensions';\n/** A file the browser cannot decode never fires `loadedmetadata`; do not block the queue on it. */\nconst PROBE_TIMEOUT_MS = 5000;\n\nconst probeDimensions = (src: string) =>\n  new Promise<LocalVideoDimensions | undefined>((resolve) => {\n    const probe = document.createElement('video');\n\n    const finish = (dimensions?: LocalVideoDimensions) => {\n      clearTimeout(timeout);\n      probe.removeEventListener('loadedmetadata', handleLoadedMetadata);\n      probe.removeEventListener('error', handleError);\n      // Detach the source so the element stops holding the blob and frees its media slot.\n      probe.removeAttribute('src');\n      probe.load();\n      resolve(dimensions);\n    };\n\n    const handleLoadedMetadata = () => {\n      const { videoHeight, videoWidth } = probe;\n      // An undecodable file reports 0x0 — no better than the CSS fallback.\n      finish(\n        videoWidth > 0 && videoHeight > 0\n          ? { height: videoHeight, width: videoWidth }\n          : undefined,\n      );\n    };\n    const handleError = () => finish();\n\n    const timeout = setTimeout(handleError, PROBE_TIMEOUT_MS);\n    probe.addEventListener('loadedmetadata', handleLoadedMetadata);\n    probe.addEventListener('error', handleError);\n    probe.preload = 'metadata';\n    probe.src = src;\n  });\n\n/**\n * Reads the intrinsic dimensions of a video that is not on the CDN yet.\n *\n * Sizing normally comes from the `oh`/`ow` parameters on the attachment's CDN `thumb_url`\n * (`getCssDimensionsVariables`). A video whose upload is still in flight has no `thumb_url`, so\n * the box falls back to `1000000x1000000` and lays out square — and then resizes the moment the\n * real dimensions arrive. The local file answers the same question without a network request.\n *\n * Returns `undefined` until the metadata is in, or if the file cannot be decoded.\n */\nexport const useLocalVideoDimensions = (src?: string) => {\n  const [dimensions, setDimensions] = useState<LocalVideoDimensions | undefined>(() =>\n    src ? dimensionsBySource.get(src) : undefined,\n  );\n\n  useEffect(() => {\n    if (!src) {\n      setDimensions(undefined);\n      return;\n    }\n\n    const cached = dimensionsBySource.get(src);\n    if (cached) {\n      setDimensions(cached);\n      return;\n    }\n\n    let cancelled = false;\n\n    withoutConcurrency(PROBE_TAG, async () => {\n      // Another widget may have probed this source while this one waited its turn.\n      const resolved = dimensionsBySource.get(src) ?? (await probeDimensions(src));\n\n      if (resolved) dimensionsBySource.add(src, resolved);\n      if (!cancelled) setDimensions(resolved);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [src]);\n\n  return dimensions;\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,qBAAqB,IAAI,oBAAkD,GAAG;AACpF,IAAM,YAAY;;AAElB,IAAM,mBAAmB;AAEzB,IAAM,mBAAmB,QACvB,IAAI,SAA2C,YAAY;CACzD,MAAM,QAAQ,SAAS,cAAc,OAAO;CAE5C,MAAM,UAAU,eAAsC;EACpD,aAAa,OAAO;EACpB,MAAM,oBAAoB,kBAAkB,oBAAoB;EAChE,MAAM,oBAAoB,SAAS,WAAW;EAE9C,MAAM,gBAAgB,KAAK;EAC3B,MAAM,KAAK;EACX,QAAQ,UAAU;CACpB;CAEA,MAAM,6BAA6B;EACjC,MAAM,EAAE,aAAa,eAAe;EAEpC,OACE,aAAa,KAAK,cAAc,IAC5B;GAAE,QAAQ;GAAa,OAAO;EAAW,IACzC,KAAA,CACN;CACF;CACA,MAAM,oBAAoB,OAAO;CAEjC,MAAM,UAAU,WAAW,aAAa,gBAAgB;CACxD,MAAM,iBAAiB,kBAAkB,oBAAoB;CAC7D,MAAM,iBAAiB,SAAS,WAAW;CAC3C,MAAM,UAAU;CAChB,MAAM,MAAM;AACd,CAAC;;;;;;;;;;;AAYH,IAAa,2BAA2B,QAAiB;CACvD,MAAM,CAAC,YAAY,iBAAiB,eAClC,MAAM,mBAAmB,IAAI,GAAG,IAAI,KAAA,CACtC;CAEA,gBAAgB;EACd,IAAI,CAAC,KAAK;GACR,cAAc,KAAA,CAAS;GACvB;EACF;EAEA,MAAM,SAAS,mBAAmB,IAAI,GAAG;EACzC,IAAI,QAAQ;GACV,cAAc,MAAM;GACpB;EACF;EAEA,IAAI,YAAY;EAEhB,mBAAmB,WAAW,YAAY;GAExC,MAAM,WAAW,mBAAmB,IAAI,GAAG,KAAM,MAAM,gBAAgB,GAAG;GAE1E,IAAI,UAAU,mBAAmB,IAAI,KAAK,QAAQ;GAClD,IAAI,CAAC,WAAW,cAAc,QAAQ;EACxC,CAAC;EAED,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,GAAG,CAAC;CAER,OAAO;AACT"}

package/dist/es/components/Attachment/icons.mjs

@@ -0,0 +1,13 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Attachment/icons.tsx
+var ExternalLinkIcon = () => /* @__PURE__ */ jsx("svg", {
+	fill: "currentColor",
+	viewBox: "0 0 16 16",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("path", { d: "M12.586 2H10a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V3.414l-6.793 6.793a1 1 0 0 1-1.414-1.414L12.586 2zM6 1a1 1 0 1 1 0 2H3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h8.967a1 1 0 0 0 1-.99L13 9.99a1 1 0 1 1 2 .02l-.033 3.023a3 3 0 0 1-3 2.967H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h3z" })
+});
+//#endregion
+export { ExternalLinkIcon };
+
+//# sourceMappingURL=icons.mjs.map

package/dist/es/components/Attachment/icons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.mjs","names":[],"sources":["../../../../src/components/Attachment/icons.tsx"],"sourcesContent":["import React from 'react';\nimport type { IconProps } from '../../types/types';\n\nexport const DownloadIcon = ({ className }: IconProps) => (\n  <svg\n    className={className}\n    data-testid='download'\n    fill='none'\n    height='24'\n    viewBox='0 0 24 24'\n    width='24'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path\n      d='M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z'\n      fill='black'\n    />\n  </svg>\n);\n\nexport const ExternalLinkIcon = () => (\n  <svg fill='currentColor' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'>\n    <path d='M12.586 2H10a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V3.414l-6.793 6.793a1 1 0 0 1-1.414-1.414L12.586 2zM6 1a1 1 0 1 1 0 2H3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h8.967a1 1 0 0 0 1-.99L13 9.99a1 1 0 1 1 2 .02l-.033 3.023a3 3 0 0 1-3 2.967H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h3z' />\n  </svg>\n);\n"],"mappings":";;;AAoBA,IAAa,yBACX,oBAAC,OAAD;CAAK,MAAK;CAAe,SAAQ;CAAY,OAAM;WACjD,oBAAC,QAAD,EAAM,GAAE,iRAAkR,CAAA;AACvR,CAAA"}

package/dist/es/components/Attachment/utils.mjs

@@ -0,0 +1,41 @@
+import * as linkify from "linkifyjs";
+//#region src/components/Attachment/utils.tsx
+var SUPPORTED_VIDEO_FORMATS = [
+	"video/mp4",
+	"video/ogg",
+	"video/webm",
+	"video/quicktime"
+];
+var isGalleryAttachmentType = (attachment) => Array.isArray(attachment.items);
+var isSvgAttachment = (attachment) => {
+	return (attachment.fallback || "").toLowerCase().endsWith(".svg");
+};
+var divMod = (num, divisor) => [Math.floor(num / divisor), num % divisor];
+var displayDuration = (totalSeconds) => {
+	if (!totalSeconds || totalSeconds < 0) return "00:00";
+	const [hours, hoursLeftover] = divMod(totalSeconds, 3600);
+	const [minutes, seconds] = divMod(hoursLeftover, 60);
+	const roundedSeconds = Math.ceil(seconds);
+	const prependHrsZero = String(hours).padStart(2, "0");
+	const minSec = `${String(minutes).padStart(2, "0")}:${String(roundedSeconds).padStart(2, "0")}`;
+	return hours ? `${prependHrsZero}:` + minSec : minSec;
+};
+function getCssDimensionsVariables(url) {
+	const cssVars = {
+		"--original-height": 1e6,
+		"--original-width": 1e6
+	};
+	if (linkify.test(url, "url")) {
+		const urlParams = new URL(url).searchParams;
+		const oh = Number(urlParams.get("oh"));
+		const ow = Number(urlParams.get("ow"));
+		const originalHeight = oh > 1 ? oh : 1e6;
+		cssVars["--original-width"] = ow > 1 ? ow : 1e6;
+		cssVars["--original-height"] = originalHeight;
+	}
+	return cssVars;
+}
+//#endregion
+export { SUPPORTED_VIDEO_FORMATS, displayDuration, divMod, getCssDimensionsVariables, isGalleryAttachmentType, isSvgAttachment };
+
+//# sourceMappingURL=utils.mjs.map

package/dist/es/components/Attachment/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../src/components/Attachment/utils.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Attachment, SharedLocationResponseData } from 'stream-chat';\nimport type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';\nimport * as linkify from 'linkifyjs';\n\nexport const SUPPORTED_VIDEO_FORMATS = [\n  'video/mp4',\n  'video/ogg',\n  'video/webm',\n  'video/quicktime',\n];\n\nexport type AttachmentComponentType =\n  | 'card'\n  | 'gallery'\n  | 'giphy'\n  | 'image'\n  | 'media'\n  | 'audio'\n  | 'voiceRecording'\n  | 'file'\n  | 'geolocation'\n  | 'unsupported';\n\nexport type AttachmentContainerType = (typeof ATTACHMENT_GROUPS_ORDER)[number];\n\nexport type GroupedRenderedAttachment = Record<AttachmentContainerType, ReactNode[]>;\n\nexport type GalleryAttachment = {\n  items: Attachment[];\n  type: 'gallery';\n};\n\nexport type RenderAttachmentProps = Omit<AttachmentProps, 'attachments'> & {\n  attachment: Attachment;\n};\n\nexport type RenderGalleryProps = Omit<AttachmentProps, 'attachments'> & {\n  attachment: GalleryAttachment;\n};\n\nexport type RenderMediaProps = Omit<AttachmentProps, 'attachments'> & {\n  attachments: Attachment[];\n};\n\nexport type GeolocationContainerProps = Omit<AttachmentProps, 'attachments'> & {\n  location: SharedLocationResponseData;\n};\n\n// This identity function determines attachment type specific to React.\n// Once made sure other SDKs support the same logic, move to stream-chat-js\nexport const isGalleryAttachmentType = (\n  attachment: Attachment | GalleryAttachment,\n): attachment is GalleryAttachment =>\n  Array.isArray((attachment as GalleryAttachment).items);\n\nexport const isSvgAttachment = (attachment: Attachment) => {\n  const filename = attachment.fallback || '';\n  return filename.toLowerCase().endsWith('.svg');\n};\n\nexport const divMod = (num: number, divisor: number) => [\n  Math.floor(num / divisor),\n  num % divisor,\n];\n\nexport const displayDuration = (totalSeconds?: number) => {\n  if (!totalSeconds || totalSeconds < 0) return '00:00';\n\n  const [hours, hoursLeftover] = divMod(totalSeconds, 3600);\n  const [minutes, seconds] = divMod(hoursLeftover, 60);\n  const roundedSeconds = Math.ceil(seconds);\n  const prependHrsZero = String(hours).padStart(2, '0');\n  const prependMinZero = String(minutes).padStart(2, '0');\n  const prependSecZero = String(roundedSeconds).padStart(2, '0');\n  const minSec = `${prependMinZero}:${prependSecZero}`;\n\n  return hours ? `${prependHrsZero}:` + minSec : minSec;\n};\nexport function getCssDimensionsVariables(url: string) {\n  const cssVars = {\n    '--original-height': 1000000,\n    '--original-width': 1000000,\n  } as Record<string, number>;\n\n  if (linkify.test(url, 'url')) {\n    const urlParams = new URL(url).searchParams;\n    const oh = Number(urlParams.get('oh'));\n    const ow = Number(urlParams.get('ow'));\n    const originalHeight = oh > 1 ? oh : 1000000;\n    const originalWidth = ow > 1 ? ow : 1000000;\n    cssVars['--original-width'] = originalWidth;\n    cssVars['--original-height'] = originalHeight;\n  }\n\n  return cssVars;\n}\n"],"mappings":";;AAKA,IAAa,0BAA0B;CACrC;CACA;CACA;CACA;AACF;AAyCA,IAAa,2BACX,eAEA,MAAM,QAAS,WAAiC,KAAK;AAEvD,IAAa,mBAAmB,eAA2B;CAEzD,QADiB,WAAW,YAAY,GAAA,CACxB,YAAY,CAAC,CAAC,SAAS,MAAM;AAC/C;AAEA,IAAa,UAAU,KAAa,YAAoB,CACtD,KAAK,MAAM,MAAM,OAAO,GACxB,MAAM,OACR;AAEA,IAAa,mBAAmB,iBAA0B;CACxD,IAAI,CAAC,gBAAgB,eAAe,GAAG,OAAO;CAE9C,MAAM,CAAC,OAAO,iBAAiB,OAAO,cAAc,IAAI;CACxD,MAAM,CAAC,SAAS,WAAW,OAAO,eAAe,EAAE;CACnD,MAAM,iBAAiB,KAAK,KAAK,OAAO;CACxC,MAAM,iBAAiB,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;CAGpD,MAAM,SAAS,GAFQ,OAAO,OAAO,CAAC,CAAC,SAAS,GAAG,GAEjC,EAAe,GADV,OAAO,cAAc,CAAC,CAAC,SAAS,GAAG,GACtB;CAEpC,OAAO,QAAQ,GAAG,eAAe,KAAK,SAAS;AACjD;AACA,SAAgB,0BAA0B,KAAa;CACrD,MAAM,UAAU;EACd,qBAAqB;EACrB,oBAAoB;CACtB;CAEA,IAAI,QAAQ,KAAK,KAAK,KAAK,GAAG;EAC5B,MAAM,YAAY,IAAI,IAAI,GAAG,CAAC,CAAC;EAC/B,MAAM,KAAK,OAAO,UAAU,IAAI,IAAI,CAAC;EACrC,MAAM,KAAK,OAAO,UAAU,IAAI,IAAI,CAAC;EACrC,MAAM,iBAAiB,KAAK,IAAI,KAAK;EAErC,QAAQ,sBADc,KAAK,IAAI,KAAK;EAEpC,QAAQ,uBAAuB;CACjC;CAEA,OAAO;AACT"}

package/dist/es/components/AudioPlayback/AudioPlaybackArbiter.mjs

@@ -0,0 +1,57 @@
+import { StateStore } from "@stream-io/state-store";
+//#region src/components/AudioPlayback/AudioPlaybackArbiter.ts
+/**
+* Decides who is allowed to play, across every {@link AudioPlayerPool} that shares it.
+*
+* It owns the single `Audio` element and hands ownership between players: starting one pauses
+* whoever held the element. Exclusivity has to live here rather than in the pool because a pool is
+* scoped to a surface -- `Channel` and `Thread` each mount their own -- and two voice messages
+* playing over each other is exactly what happens when each surface arbitrates for itself.
+*
+* Reusing one element is also what keeps playback working on iOS, where an element must be unlocked
+* by a user gesture before it can be played programmatically.
+*/
+var AudioPlaybackArbiter = class {
+	state = new StateStore({ activeAudioPlayer: null });
+	element = null;
+	owner = null;
+	get activeAudioPlayer() {
+		return this.state.getLatestValue().activeAudioPlayer;
+	}
+	/**
+	* Hands the shared element to `owner`, pausing the previous holder, and loads `src` into it.
+	*/
+	acquire = ({ owner, src }) => {
+		if (!this.element) this.element = new Audio();
+		if (this.owner && this.owner !== owner) {
+			this.owner.pause();
+			this.owner.releaseElementForHandoff();
+		}
+		this.owner = owner;
+		if (this.element.src !== src) this.element.src = src;
+		return this.element;
+	};
+	/**
+	* Drops `owner`'s claim on the shared element and pauses it. A release from anyone who is not the
+	* current holder is ignored, so a player torn down in the background cannot stop the one that has
+	* since taken over.
+	*/
+	release = (owner) => {
+		if (this.owner !== owner) return;
+		if (this.element) {
+			try {
+				this.element.pause();
+			} catch {}
+			this.element.removeAttribute("src");
+			this.element.load();
+		}
+		this.owner = null;
+	};
+	setActivePlayer = (activeAudioPlayer) => {
+		this.state.partialNext({ activeAudioPlayer });
+	};
+};
+//#endregion
+export { AudioPlaybackArbiter };
+
+//# sourceMappingURL=AudioPlaybackArbiter.mjs.map

package/dist/es/components/AudioPlayback/AudioPlaybackArbiter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlaybackArbiter.mjs","names":[],"sources":["../../../../src/components/AudioPlayback/AudioPlaybackArbiter.ts"],"sourcesContent":["import { StateStore } from '@stream-io/state-store';\nimport type { AudioPlayer } from './AudioPlayer';\n\nexport type AudioPlaybackArbiterState = {\n  activeAudioPlayer: AudioPlayer | null;\n};\n\n/**\n * Decides who is allowed to play, across every {@link AudioPlayerPool} that shares it.\n *\n * It owns the single `Audio` element and hands ownership between players: starting one pauses\n * whoever held the element. Exclusivity has to live here rather than in the pool because a pool is\n * scoped to a surface -- `Channel` and `Thread` each mount their own -- and two voice messages\n * playing over each other is exactly what happens when each surface arbitrates for itself.\n *\n * Reusing one element is also what keeps playback working on iOS, where an element must be unlocked\n * by a user gesture before it can be played programmatically.\n */\nexport class AudioPlaybackArbiter {\n  state = new StateStore<AudioPlaybackArbiterState>({ activeAudioPlayer: null });\n\n  private element: HTMLAudioElement | null = null;\n  private owner: AudioPlayer | null = null;\n\n  get activeAudioPlayer() {\n    return this.state.getLatestValue().activeAudioPlayer;\n  }\n\n  /**\n   * Hands the shared element to `owner`, pausing the previous holder, and loads `src` into it.\n   */\n  acquire = ({ owner, src }: { owner: AudioPlayer; src: string }) => {\n    if (!this.element) {\n      this.element = new Audio();\n    }\n\n    if (this.owner && this.owner !== owner) {\n      // Pause and drop the reference, but leave the player registered in its own pool.\n      this.owner.pause();\n      this.owner.releaseElementForHandoff();\n    }\n    this.owner = owner;\n\n    if (this.element.src !== src) {\n      // setting src starts loading; avoid explicit load() to prevent currentTime reset flicker\n      this.element.src = src;\n    }\n    return this.element;\n  };\n\n  /**\n   * Drops `owner`'s claim on the shared element and pauses it. A release from anyone who is not the\n   * current holder is ignored, so a player torn down in the background cannot stop the one that has\n   * since taken over.\n   */\n  release = (owner: AudioPlayer) => {\n    if (this.owner !== owner) return;\n    if (this.element) {\n      try {\n        this.element.pause();\n      } catch {\n        // ignore\n      }\n      this.element.removeAttribute('src');\n      this.element.load();\n    }\n    // Keep the element instance for reuse\n    this.owner = null;\n  };\n\n  setActivePlayer = (activeAudioPlayer: AudioPlayer | null) => {\n    this.state.partialNext({ activeAudioPlayer });\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AAkBA,IAAa,uBAAb,MAAkC;CAChC,QAAQ,IAAI,WAAsC,EAAE,mBAAmB,KAAK,CAAC;CAE7E,UAA2C;CAC3C,QAAoC;CAEpC,IAAI,oBAAoB;EACtB,OAAO,KAAK,MAAM,eAAe,CAAC,CAAC;CACrC;;;;CAKA,WAAW,EAAE,OAAO,UAA+C;EACjE,IAAI,CAAC,KAAK,SACR,KAAK,UAAU,IAAI,MAAM;EAG3B,IAAI,KAAK,SAAS,KAAK,UAAU,OAAO;GAEtC,KAAK,MAAM,MAAM;GACjB,KAAK,MAAM,yBAAyB;EACtC;EACA,KAAK,QAAQ;EAEb,IAAI,KAAK,QAAQ,QAAQ,KAEvB,KAAK,QAAQ,MAAM;EAErB,OAAO,KAAK;CACd;;;;;;CAOA,WAAW,UAAuB;EAChC,IAAI,KAAK,UAAU,OAAO;EAC1B,IAAI,KAAK,SAAS;GAChB,IAAI;IACF,KAAK,QAAQ,MAAM;GACrB,QAAQ,CAER;GACA,KAAK,QAAQ,gBAAgB,KAAK;GAClC,KAAK,QAAQ,KAAK;EACpB;EAEA,KAAK,QAAQ;CACf;CAEA,mBAAmB,sBAA0C;EAC3D,KAAK,MAAM,YAAY,EAAE,kBAAkB,CAAC;CAC9C;AACF"}