stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/Loading/AttachmentUploadedSizeIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentUploadedSizeIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/AttachmentUploadedSizeIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContext } from '../../context';\nimport { FileSizeIndicator as DefaultFileSizeIndicator } from '../Attachment/components/FileSizeIndicator';\nimport { UploadedSizeIndicator as DefaultUploadedSizeIndicator } from './UploadedSizeIndicator';\n\nfunction resolveAttachmentFullByteSize(attachment: {\n  file_size?: number | string;\n  localMetadata?: { file?: { size?: unknown } } | null;\n}): number | undefined {\n  const fromFile = attachment.localMetadata?.file?.size;\n  if (typeof fromFile === 'number' && Number.isFinite(fromFile) && fromFile >= 0) {\n    return fromFile;\n  }\n  const raw = attachment.file_size;\n  if (typeof raw === 'number' && Number.isFinite(raw) && raw >= 0) return raw;\n  if (typeof raw === 'string') {\n    const n = parseFloat(raw);\n    if (Number.isFinite(n) && n >= 0) return n;\n  }\n  return undefined;\n}\n\nexport type AttachmentUploadedSizeIndicatorProps = {\n  /**\n   * Live progress, overriding `localMetadata.uploadProgress`. Required when rendering an\n   * attachment carried by a message: the value stored there is a snapshot frozen when the\n   * message was composed, whereas `client.uploadManager` keeps reporting.\n   */\n  uploadProgress?: number;\n  attachment: {\n    file_size?: number | string;\n    localMetadata?: {\n      file?: { size?: unknown };\n      uploadProgress?: number;\n      uploadState?: string;\n    } | null;\n  };\n};\n\nexport const AttachmentUploadedSizeIndicator = ({\n  attachment,\n  uploadProgress: liveUploadProgress,\n}: AttachmentUploadedSizeIndicatorProps) => {\n  const {\n    FileSizeIndicator = DefaultFileSizeIndicator,\n    UploadedSizeIndicator = DefaultUploadedSizeIndicator,\n  } = useComponentContext();\n  const { uploadState } = attachment.localMetadata ?? {};\n  const uploadProgress = liveUploadProgress ?? attachment.localMetadata?.uploadProgress;\n  const fullBytes = resolveAttachmentFullByteSize(attachment);\n  const uploaded =\n    uploadProgress !== undefined && fullBytes !== undefined\n      ? Math.round((uploadProgress / 100) * fullBytes)\n      : undefined;\n\n  if (uploadState === 'uploading' && uploaded !== undefined && fullBytes !== undefined) {\n    return <UploadedSizeIndicator fullBytes={fullBytes} uploadedBytes={uploaded} />;\n  }\n\n  if (uploadState === 'finished') {\n    return <FileSizeIndicator fileSize={attachment.file_size} />;\n  }\n\n  return null;\n};\n"],"mappings":";;;;;;AAMA,SAAS,8BAA8B,YAGhB;CACrB,MAAM,WAAW,WAAW,eAAe,MAAM;CACjD,IAAI,OAAO,aAAa,YAAY,OAAO,SAAS,QAAQ,KAAK,YAAY,GAC3E,OAAO;CAET,MAAM,MAAM,WAAW;CACvB,IAAI,OAAO,QAAQ,YAAY,OAAO,SAAS,GAAG,KAAK,OAAO,GAAG,OAAO;CACxE,IAAI,OAAO,QAAQ,UAAU;EAC3B,MAAM,IAAI,WAAW,GAAG;EACxB,IAAI,OAAO,SAAS,CAAC,KAAK,KAAK,GAAG,OAAO;CAC3C;AAEF;AAmBA,IAAa,mCAAmC,EAC9C,YACA,gBAAgB,yBAC0B;CAC1C,MAAM,EACJ,mBAAA,sBAAoB,mBACpB,uBAAA,0BAAwB,0BACtB,oBAAoB;CACxB,MAAM,EAAE,gBAAgB,WAAW,iBAAiB,CAAC;CACrD,MAAM,iBAAiB,sBAAsB,WAAW,eAAe;CACvE,MAAM,YAAY,8BAA8B,UAAU;CAC1D,MAAM,WACJ,mBAAmB,KAAA,KAAa,cAAc,KAAA,IAC1C,KAAK,MAAO,iBAAiB,MAAO,SAAS,IAC7C,KAAA;CAEN,IAAI,gBAAgB,eAAe,aAAa,KAAA,KAAa,cAAc,KAAA,GACzE,OAAO,oBAAC,yBAAD;EAAkC;EAAW,eAAe;CAAW,CAAA;CAGhF,IAAI,gBAAgB,YAClB,OAAO,oBAAC,qBAAD,EAAmB,UAAU,WAAW,UAAY,CAAA;CAG7D,OAAO;AACT"}

package/dist/es/components/Loading/LoadingChannel.mjs

@@ -0,0 +1,59 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Loading/LoadingChannel.tsx
+var LoadingMessage = ({ bubbleSize, metadataSize, outgoing = false }) => /* @__PURE__ */ jsxs("div", {
+	className: `str-chat__loading-channel-message ${outgoing ? "str-chat__loading-channel-message--outgoing" : "str-chat__loading-channel-message--incoming"}`,
+	children: [!outgoing ? /* @__PURE__ */ jsx("div", { className: "str-chat__loading-channel-message-avatar" }) : null, /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__loading-channel-message-content",
+		children: [/* @__PURE__ */ jsx("div", { className: `str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--${bubbleSize}` }), /* @__PURE__ */ jsx("div", { className: `str-chat__loading-channel-message-metadata str-chat__loading-channel-message-metadata--${metadataSize}` })]
+	})]
+});
+var LoadingMessageInput = () => /* @__PURE__ */ jsx("div", {
+	className: "str-chat__message-composer-container str-chat__message-composer-container--loading",
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-composer",
+		children: [/* @__PURE__ */ jsx("div", { className: "str-chat__loading-channel-message-input-button" }), /* @__PURE__ */ jsx("div", { className: "str-chat__loading-channel-message-input-pill" })]
+	})
+});
+var LoadingChannelHeader = () => /* @__PURE__ */ jsxs("div", {
+	className: "str-chat__channel-header str-chat__channel-header--loading",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "str-chat__channel-header__data str-chat__channel-header__data--loading",
+		children: /* @__PURE__ */ jsx("div", { className: "str-chat__loading-channel-header-name" })
+	}), /* @__PURE__ */ jsx("div", { className: "str-chat__loading-channel-header-avatar" })]
+});
+var LoadingChannel = () => /* @__PURE__ */ jsxs("div", {
+	className: "str-chat__loading-channel",
+	children: [
+		/* @__PURE__ */ jsx(LoadingChannelHeader, {}),
+		/* @__PURE__ */ jsx("div", {
+			className: "str-chat__message-list str-chat__message-list--loading",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-list-scroll",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__loading-channel-message-list",
+					children: [
+						/* @__PURE__ */ jsx(LoadingMessage, {
+							bubbleSize: "lg",
+							metadataSize: "md"
+						}),
+						/* @__PURE__ */ jsx(LoadingMessage, {
+							bubbleSize: "md",
+							metadataSize: "sm",
+							outgoing: true
+						}),
+						/* @__PURE__ */ jsx(LoadingMessage, {
+							bubbleSize: "lg",
+							metadataSize: "md"
+						})
+					]
+				})
+			})
+		}),
+		/* @__PURE__ */ jsx(LoadingMessageInput, {})
+	]
+});
+//#endregion
+export { LoadingChannel };
+
+//# sourceMappingURL=LoadingChannel.mjs.map

package/dist/es/components/Loading/LoadingChannel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingChannel.mjs","names":[],"sources":["../../../../src/components/Loading/LoadingChannel.tsx"],"sourcesContent":["import React from 'react';\n\ntype LoadingMessageProps = {\n  bubbleSize: 'md' | 'lg';\n  metadataSize: 'sm' | 'md';\n  outgoing?: boolean;\n};\n\nconst LoadingMessage = ({\n  bubbleSize,\n  metadataSize,\n  outgoing = false,\n}: LoadingMessageProps) => (\n  <div\n    className={`str-chat__loading-channel-message ${\n      outgoing\n        ? 'str-chat__loading-channel-message--outgoing'\n        : 'str-chat__loading-channel-message--incoming'\n    }`}\n  >\n    {!outgoing ? <div className='str-chat__loading-channel-message-avatar' /> : null}\n    <div className='str-chat__loading-channel-message-content'>\n      <div\n        className={`str-chat__loading-channel-message-bubble str-chat__loading-channel-message-bubble--${bubbleSize}`}\n      ></div>\n      <div\n        className={`str-chat__loading-channel-message-metadata str-chat__loading-channel-message-metadata--${metadataSize}`}\n      ></div>\n    </div>\n  </div>\n);\n\nconst LoadingMessageInput = () => (\n  <div className='str-chat__message-composer-container str-chat__message-composer-container--loading'>\n    <div className='str-chat__message-composer'>\n      <div className='str-chat__loading-channel-message-input-button'></div>\n      <div className='str-chat__loading-channel-message-input-pill'></div>\n    </div>\n  </div>\n);\n\nconst LoadingChannelHeader = () => (\n  <div className='str-chat__channel-header str-chat__channel-header--loading'>\n    <div className='str-chat__channel-header__data str-chat__channel-header__data--loading'>\n      <div className='str-chat__loading-channel-header-name'></div>\n    </div>\n    <div className='str-chat__loading-channel-header-avatar'></div>\n  </div>\n);\n\nexport const LoadingChannel = () => (\n  <div className='str-chat__loading-channel'>\n    <LoadingChannelHeader />\n    <div className='str-chat__message-list str-chat__message-list--loading'>\n      <div className='str-chat__message-list-scroll'>\n        <div className='str-chat__loading-channel-message-list'>\n          <LoadingMessage bubbleSize='lg' metadataSize='md' />\n          <LoadingMessage bubbleSize='md' metadataSize='sm' outgoing />\n          <LoadingMessage bubbleSize='lg' metadataSize='md' />\n        </div>\n      </div>\n    </div>\n    <LoadingMessageInput />\n  </div>\n);\n"],"mappings":";;;AAQA,IAAM,kBAAkB,EACtB,YACA,cACA,WAAW,YAEX,qBAAC,OAAD;CACE,WAAW,qCACT,WACI,gDACA;WAJR,CAOG,CAAC,WAAW,oBAAC,OAAD,EAAK,WAAU,2CAA4C,CAAA,IAAI,MAC5E,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD,EACE,WAAW,sFAAsF,aAC7F,CAAA,GACN,oBAAC,OAAD,EACE,WAAW,0FAA0F,eACjG,CAAA,CACH;GACF;;AAGP,IAAM,4BACJ,oBAAC,OAAD;CAAK,WAAU;WACb,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD,EAAK,WAAU,iDAAsD,CAAA,GACrE,oBAAC,OAAD,EAAK,WAAU,+CAAoD,CAAA,CAChE;;AACF,CAAA;AAGP,IAAM,6BACJ,qBAAC,OAAD;CAAK,WAAU;WAAf,CACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD,EAAK,WAAU,wCAA6C,CAAA;CACzD,CAAA,GACL,oBAAC,OAAD,EAAK,WAAU,0CAA+C,CAAA,CAC3D;;AAGP,IAAa,uBACX,qBAAC,OAAD;CAAK,WAAU;WAAf;EACE,oBAAC,sBAAD,CAAuB,CAAA;EACvB,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,gBAAD;OAAgB,YAAW;OAAK,cAAa;MAAM,CAAA;MACnD,oBAAC,gBAAD;OAAgB,YAAW;OAAK,cAAa;OAAK,UAAA;MAAU,CAAA;MAC5D,oBAAC,gBAAD;OAAgB,YAAW;OAAK,cAAa;MAAM,CAAA;KAChD;;GACF,CAAA;EACF,CAAA;EACL,oBAAC,qBAAD,CAAsB,CAAA;CACnB"}

package/dist/es/components/Loading/LoadingChannels.mjs

@@ -0,0 +1,28 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Loading/LoadingChannels.tsx
+var LoadingItems = () => /* @__PURE__ */ jsx("div", {
+	className: "str-chat__channel-list-item-container",
+	children: /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": "true",
+		className: "str-chat__channel-list-item str-chat__channel-list-item--loading",
+		children: [/* @__PURE__ */ jsx("div", { className: "str-chat__loading-channels-avatar" }), /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__channel-list-item-data str-chat__channel-list-item-data--loading",
+			children: [/* @__PURE__ */ jsx("div", { className: "str-chat__loading-channels-username" }), /* @__PURE__ */ jsx("div", { className: "str-chat__loading-channels-status" })]
+		})]
+	})
+});
+var LoadingChannels = () => /* @__PURE__ */ jsxs("div", {
+	className: "str-chat__loading-channels",
+	children: [
+		/* @__PURE__ */ jsx(LoadingItems, {}),
+		/* @__PURE__ */ jsx(LoadingItems, {}),
+		/* @__PURE__ */ jsx(LoadingItems, {}),
+		/* @__PURE__ */ jsx(LoadingItems, {}),
+		/* @__PURE__ */ jsx(LoadingItems, {})
+	]
+});
+//#endregion
+export { LoadingChannels };
+
+//# sourceMappingURL=LoadingChannels.mjs.map

package/dist/es/components/Loading/LoadingChannels.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingChannels.mjs","names":[],"sources":["../../../../src/components/Loading/LoadingChannels.tsx"],"sourcesContent":["import React from 'react';\n\nconst LoadingItems = () => (\n  <div className='str-chat__channel-list-item-container'>\n    <div\n      aria-hidden='true'\n      className='str-chat__channel-list-item str-chat__channel-list-item--loading'\n    >\n      <div className='str-chat__loading-channels-avatar' />\n      <div className='str-chat__channel-list-item-data str-chat__channel-list-item-data--loading'>\n        <div className='str-chat__loading-channels-username' />\n        <div className='str-chat__loading-channels-status' />\n      </div>\n    </div>\n  </div>\n);\n\nexport const LoadingChannels = () => (\n  <div className='str-chat__loading-channels'>\n    <LoadingItems />\n    <LoadingItems />\n    <LoadingItems />\n    <LoadingItems />\n    <LoadingItems />\n  </div>\n);\n"],"mappings":";;;AAEA,IAAM,qBACJ,oBAAC,OAAD;CAAK,WAAU;WACb,qBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAFZ,CAIE,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA,GACpD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD,EAAK,WAAU,sCAAuC,CAAA,GACtD,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA,CACjD;IACF;;AACF,CAAA;AAGP,IAAa,wBACX,qBAAC,OAAD;CAAK,WAAU;WAAf;EACE,oBAAC,cAAD,CAAe,CAAA;EACf,oBAAC,cAAD,CAAe,CAAA;EACf,oBAAC,cAAD,CAAe,CAAA;EACf,oBAAC,cAAD,CAAe,CAAA;EACf,oBAAC,cAAD,CAAe,CAAA;CACZ"}

package/dist/es/components/Loading/LoadingErrorIndicator.mjs

@@ -0,0 +1,17 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Loading/LoadingErrorIndicator.tsx
+/**
+* UI component for error indicator in a Channel
+*/
+var UnMemoizedLoadingErrorIndicator = ({ error }) => {
+	const { t } = useTranslationContext("LoadingErrorIndicator");
+	if (!error) return null;
+	return /* @__PURE__ */ jsx("div", { children: t("Error: {{ errorMessage }}", { errorMessage: error.message }) });
+};
+var LoadingErrorIndicator = React.memo(UnMemoizedLoadingErrorIndicator, (prevProps, nextProps) => prevProps.error?.message === nextProps.error?.message);
+//#endregion
+export { LoadingErrorIndicator };
+
+//# sourceMappingURL=LoadingErrorIndicator.mjs.map

package/dist/es/components/Loading/LoadingErrorIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingErrorIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/LoadingErrorIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type LoadingErrorIndicatorProps = {\n  /** Error object */\n  error?: Error | null;\n};\n\n/**\n * UI component for error indicator in a Channel\n */\nconst UnMemoizedLoadingErrorIndicator = ({ error }: LoadingErrorIndicatorProps) => {\n  const { t } = useTranslationContext('LoadingErrorIndicator');\n\n  if (!error) return null;\n\n  return <div>{t('Error: {{ errorMessage }}', { errorMessage: error.message })}</div>;\n};\n\nexport const LoadingErrorIndicator = React.memo(\n  UnMemoizedLoadingErrorIndicator,\n  (prevProps, nextProps) => prevProps.error?.message === nextProps.error?.message,\n) as typeof UnMemoizedLoadingErrorIndicator;\n"],"mappings":";;;;;;;AAYA,IAAM,mCAAmC,EAAE,YAAwC;CACjF,MAAM,EAAE,MAAM,sBAAsB,uBAAuB;CAE3D,IAAI,CAAC,OAAO,OAAO;CAEnB,OAAO,oBAAC,OAAD,EAAA,UAAM,EAAE,6BAA6B,EAAE,cAAc,MAAM,QAAQ,CAAC,EAAO,CAAA;AACpF;AAEA,IAAa,wBAAwB,MAAM,KACzC,kCACC,WAAW,cAAc,UAAU,OAAO,YAAY,UAAU,OAAO,OAC1E"}

package/dist/es/components/Loading/LoadingIndicator.mjs

@@ -0,0 +1,15 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Loading/LoadingIndicator.tsx
+var LoadingIndicator = (props) => {
+	const { IconLoading } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconLoading, {
+		...props,
+		className: "str-chat__loading-indicator"
+	});
+};
+//#endregion
+export { LoadingIndicator };
+
+//# sourceMappingURL=LoadingIndicator.mjs.map

package/dist/es/components/Loading/LoadingIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/LoadingIndicator.tsx"],"sourcesContent":["import React, { type ComponentProps } from 'react';\nimport { useComponentContextIcons } from '../../context';\nimport type { IconLoading as DefaultIconLoading } from '../Icons';\n\nexport type LoadingIndicatorProps = ComponentProps<typeof DefaultIconLoading>;\n\nexport const LoadingIndicator = (props: LoadingIndicatorProps) => {\n  const { IconLoading } = useComponentContextIcons();\n  return <IconLoading {...props} className='str-chat__loading-indicator' />;\n};\n"],"mappings":";;;;AAMA,IAAa,oBAAoB,UAAiC;CAChE,MAAM,EAAE,gBAAgB,yBAAyB;CACjD,OAAO,oBAAC,aAAD;EAAa,GAAI;EAAO,WAAU;CAA+B,CAAA;AAC1E"}

package/dist/es/components/Loading/UploadProgressIndicator.mjs

@@ -0,0 +1,15 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { LoadingIndicator } from "./LoadingIndicator.mjs";
+import { CircularProgressIndicator } from "./progress-indicators.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Loading/UploadProgressIndicator.tsx
+var UploadProgressIndicator = ({ uploadConfirmationPending, uploadProgress }) => {
+	const { LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, ProgressIndicator = CircularProgressIndicator } = useComponentContext();
+	if (uploadConfirmationPending || uploadProgress === void 0) return /* @__PURE__ */ jsx(LoadingIndicator$1, { "data-testid": "loading-indicator" });
+	return /* @__PURE__ */ jsx(ProgressIndicator, { percent: uploadProgress });
+};
+//#endregion
+export { UploadProgressIndicator };
+
+//# sourceMappingURL=UploadProgressIndicator.mjs.map

package/dist/es/components/Loading/UploadProgressIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadProgressIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/UploadProgressIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContext } from '../../context';\nimport { CircularProgressIndicator as DefaultProgressIndicator } from './progress-indicators';\nimport { LoadingIndicator as DefaultLoadingIndicator } from './LoadingIndicator';\n\nexport type UploadProgressIndicatorProps = {\n  /**\n   * Every byte has been sent, but the server has not confirmed yet — see\n   * `UploadRecord.uploadConfirmationPending` in `stream-chat`. Renders the indeterminate indicator, since\n   * a bar sitting at 100% would claim the upload is confirmed while it is not.\n   */\n  uploadConfirmationPending?: boolean;\n  uploadProgress?: number;\n};\n\nexport const UploadProgressIndicator = ({\n  uploadConfirmationPending,\n  uploadProgress,\n}: UploadProgressIndicatorProps) => {\n  const {\n    LoadingIndicator = DefaultLoadingIndicator,\n    ProgressIndicator = DefaultProgressIndicator,\n  } = useComponentContext();\n\n  if (uploadConfirmationPending || uploadProgress === undefined) {\n    return <LoadingIndicator data-testid='loading-indicator' />;\n  }\n\n  return <ProgressIndicator percent={uploadProgress} />;\n};\n"],"mappings":";;;;;;AAgBA,IAAa,2BAA2B,EACtC,2BACA,qBACkC;CAClC,MAAM,EACJ,kBAAA,qBAAmB,kBACnB,oBAAoB,8BAClB,oBAAoB;CAExB,IAAI,6BAA6B,mBAAmB,KAAA,GAClD,OAAO,oBAAC,oBAAD,EAAkB,eAAY,oBAAqB,CAAA;CAG5D,OAAO,oBAAC,mBAAD,EAAmB,SAAS,eAAiB,CAAA;AACtD"}

package/dist/es/components/Loading/UploadedSizeIndicator.mjs

@@ -0,0 +1,22 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { FileSizeIndicator } from "../Attachment/components/FileSizeIndicator.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Loading/UploadedSizeIndicator.tsx
+var UploadedSizeIndicator = ({ fullBytes, uploadedBytes }) => {
+	const { FileSizeIndicator: FileSizeIndicator$1 = FileSizeIndicator } = useComponentContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__attachment-preview-file__upload-size-fraction",
+		"data-testid": "upload-size-fraction",
+		children: [
+			/* @__PURE__ */ jsx(FileSizeIndicator$1, { fileSize: uploadedBytes }),
+			" ",
+			` / `,
+			/* @__PURE__ */ jsx(FileSizeIndicator$1, { fileSize: fullBytes })
+		]
+	});
+};
+//#endregion
+export { UploadedSizeIndicator };
+
+//# sourceMappingURL=UploadedSizeIndicator.mjs.map

package/dist/es/components/Loading/UploadedSizeIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadedSizeIndicator.mjs","names":[],"sources":["../../../../src/components/Loading/UploadedSizeIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContext } from '../../context';\nimport { FileSizeIndicator as DefaultFileSizeIndicator } from '../Attachment/components/FileSizeIndicator';\n\nexport type UploadedSizeIndicatorProps = {\n  fullBytes: number;\n  uploadedBytes: number;\n};\n\nexport const UploadedSizeIndicator = ({\n  fullBytes,\n  uploadedBytes,\n}: UploadedSizeIndicatorProps) => {\n  const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();\n  return (\n    <div\n      className='str-chat__attachment-preview-file__upload-size-fraction'\n      data-testid='upload-size-fraction'\n    >\n      <FileSizeIndicator fileSize={uploadedBytes} /> {` / `}\n      <FileSizeIndicator fileSize={fullBytes} />\n    </div>\n  );\n};\n"],"mappings":";;;;;AAUA,IAAa,yBAAyB,EACpC,WACA,oBACgC;CAChC,MAAM,EAAE,mBAAA,sBAAoB,sBAA6B,oBAAoB;CAC7E,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIE,oBAAC,qBAAD,EAAmB,UAAU,cAAgB,CAAA;GAAC;GAAE;GAChD,oBAAC,qBAAD,EAAmB,UAAU,UAAY,CAAA;EACtC;;AAET"}

package/dist/es/components/Loading/progress-indicators.mjs

@@ -0,0 +1,50 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Loading/progress-indicators.tsx
+var RING_RADIUS = 12;
+var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+/** Circular progress indicator with input from 0 to 100. */
+var CircularProgressIndicator = ({ percent }) => {
+	const { t } = useTranslationContext("CircularProgressIndicator");
+	const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__circular-progress-indicator str-chat__progress-indicator",
+		children: /* @__PURE__ */ jsxs("svg", {
+			"aria-label": t("aria/Percent complete", { percent }),
+			"aria-valuemax": 100,
+			"aria-valuemin": 0,
+			"aria-valuenow": percent,
+			"data-testid": "circular-progress-ring",
+			height: "100%",
+			role: "progressbar",
+			viewBox: "0 0 32 32",
+			width: "100%",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "16",
+				cy: "16",
+				fill: "none",
+				r: RING_RADIUS,
+				stroke: "currentColor",
+				strokeOpacity: .35,
+				strokeWidth: "2.5"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: "16",
+				cy: "16",
+				fill: "none",
+				r: RING_RADIUS,
+				stroke: "currentColor",
+				strokeDasharray: RING_CIRCUMFERENCE,
+				strokeDashoffset: dashOffset,
+				strokeLinecap: "round",
+				strokeWidth: "2.5",
+				transform: "rotate(-90 16 16)"
+			})]
+		})
+	});
+};
+//#endregion
+export { CircularProgressIndicator };
+
+//# sourceMappingURL=progress-indicators.mjs.map

package/dist/es/components/Loading/progress-indicators.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicators.mjs","names":[],"sources":["../../../../src/components/Loading/progress-indicators.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type ProgressIndicatorProps = {\n  /** Clamped 0–100 completion. */\n  percent: number;\n};\n\nconst RING_RADIUS = 12;\nconst RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;\n\n/** Circular progress indicator with input from 0 to 100. */\nexport const CircularProgressIndicator = ({ percent }: ProgressIndicatorProps) => {\n  const { t } = useTranslationContext('CircularProgressIndicator');\n  const dashOffset = RING_CIRCUMFERENCE * (1 - percent / 100);\n\n  return (\n    <div className='str-chat__circular-progress-indicator str-chat__progress-indicator'>\n      <svg\n        aria-label={t('aria/Percent complete', { percent })}\n        aria-valuemax={100}\n        aria-valuemin={0}\n        aria-valuenow={percent}\n        data-testid='circular-progress-ring'\n        height='100%'\n        role='progressbar'\n        viewBox='0 0 32 32'\n        width='100%'\n        xmlns='http://www.w3.org/2000/svg'\n      >\n        <circle\n          cx='16'\n          cy='16'\n          fill='none'\n          r={RING_RADIUS}\n          stroke='currentColor'\n          strokeOpacity={0.35}\n          strokeWidth='2.5'\n        />\n        <circle\n          cx='16'\n          cy='16'\n          fill='none'\n          r={RING_RADIUS}\n          stroke='currentColor'\n          strokeDasharray={RING_CIRCUMFERENCE}\n          strokeDashoffset={dashOffset}\n          strokeLinecap='round'\n          strokeWidth='2.5'\n          transform='rotate(-90 16 16)'\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;AASA,IAAM,cAAc;AACpB,IAAM,qBAAqB,IAAI,KAAK,KAAK;;AAGzC,IAAa,6BAA6B,EAAE,cAAsC;CAChF,MAAM,EAAE,MAAM,sBAAsB,2BAA2B;CAC/D,MAAM,aAAa,sBAAsB,IAAI,UAAU;CAEvD,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GACE,cAAY,EAAE,yBAAyB,EAAE,QAAQ,CAAC;GAClD,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,eAAY;GACZ,QAAO;GACP,MAAK;GACL,SAAQ;GACR,OAAM;GACN,OAAM;aAVR,CAYE,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,MAAK;IACL,GAAG;IACH,QAAO;IACP,eAAe;IACf,aAAY;GACb,CAAA,GACD,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,MAAK;IACL,GAAG;IACH,QAAO;IACP,iBAAiB;IACjB,kBAAkB;IAClB,eAAc;IACd,aAAY;IACZ,WAAU;GACX,CAAA,CACE;;CACF,CAAA;AAET"}

package/dist/es/components/Location/ShareLocationDialog.mjs

@@ -0,0 +1,206 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { ContextMenuBody, ContextMenuButton, ContextMenuRoot } from "../Dialog/components/ContextMenu.mjs";
+import { Prompt } from "../Dialog/components/Prompt.mjs";
+import { Dropdown, useDropdownContext } from "../Form/Dropdown.mjs";
+import { SwitchField } from "../Form/SwitchField.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Location/ShareLocationDialog.tsx
+var MIN_LIVE_LOCATION_SHARE_DURATION = 60 * 1e3;
+var DEFAULT_SHARE_LOCATION_DURATIONS = [
+	900 * 1e3,
+	3600 * 1e3,
+	480 * 60 * 1e3
+];
+var DefaultGeolocationMap = () => null;
+var LiveLocationDurationTrigger = ({ children, onClick, referenceRef, ...props }) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	className: "str-chat__live-location-sharing-duration-selector__button",
+	onClick,
+	ref: referenceRef,
+	type: "button",
+	children
+});
+var ShareLocationDialog = ({ close, GeolocationMap = DefaultGeolocationMap, shareDurations = DEFAULT_SHARE_LOCATION_DURATIONS }) => {
+	const { IconChevronDown } = useComponentContextIcons();
+	const { addNotification } = useNotificationApi();
+	const { t } = useTranslationContext();
+	const messageComposer = useMessageComposerController();
+	const [durations, setDurations] = useState([]);
+	const [selectedDuration, setSelectedDuration] = useState(void 0);
+	const [geolocationPosition, setGeolocationPosition] = useState(null);
+	const [loadingLocation, setLoadingLocation] = useState(false);
+	const [geolocationPositionError, setGeolocationPositionError] = useState(void 0);
+	const validShareDurations = useMemo(() => shareDurations.filter((d) => d >= MIN_LIVE_LOCATION_SHARE_DURATION), [shareDurations]);
+	const selectedDurationLabel = useMemo(() => durations.length > 0 ? t("duration/Share Location", { milliseconds: selectedDuration ?? durations[0] }) : void 0, [
+		durations,
+		selectedDuration,
+		t
+	]);
+	const durationTriggerProps = useMemo(() => ({ children: selectedDurationLabel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: selectedDurationLabel }), /* @__PURE__ */ jsx(IconChevronDown, {})] }) : null }), [IconChevronDown, selectedDurationLabel]);
+	const getPosition = useCallback(() => new Promise((resolve, reject) => {
+		navigator.geolocation.getCurrentPosition((position) => {
+			resolve(position);
+		}, (positionError) => {
+			console.warn(positionError);
+			reject(positionError);
+		}, { timeout: 1e3 });
+	}), []);
+	const setupPositionWatching = useCallback(() => {
+		setLoadingLocation(true);
+		const watch = navigator.geolocation.watchPosition((position) => {
+			setGeolocationPosition(position);
+			setLoadingLocation(false);
+			setGeolocationPositionError(void 0);
+		}, (error) => {
+			setGeolocationPosition(null);
+			setLoadingLocation(false);
+			setGeolocationPositionError(error);
+		}, { timeout: 1e3 });
+		return () => {
+			navigator.geolocation.clearWatch(watch);
+		};
+	}, []);
+	useEffect(() => setupPositionWatching(), [setupPositionWatching]);
+	const liveLocationSwitchEnabled = durations.length > 0;
+	return /* @__PURE__ */ jsxs(Prompt.Root, {
+		className: "str-chat__share-location-dialog",
+		"data-testid": "share-location-dialog",
+		children: [
+			/* @__PURE__ */ jsx(Prompt.Header, {
+				close,
+				description: t("Select your current location and optionally enable live location sharing"),
+				title: t("Share Location")
+			}),
+			/* @__PURE__ */ jsxs(Prompt.Body, { children: [/* @__PURE__ */ jsx(GeolocationMap, {
+				geolocationPositionError,
+				latitude: geolocationPosition?.coords.latitude,
+				loadingLocation,
+				longitude: geolocationPosition?.coords.longitude,
+				restartLocationWatching: setupPositionWatching
+			}), validShareDurations.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: clsx("str-chat__live-location-activation", { "str-chat__live-location-activation--expanded": liveLocationSwitchEnabled }),
+				children: [/* @__PURE__ */ jsx(SwitchField, {
+					checked: liveLocationSwitchEnabled,
+					"data-testid": "share-location-dialog-live-location-switch",
+					disabled: !geolocationPosition,
+					onChange: (e) => {
+						e.stopPropagation();
+						if (liveLocationSwitchEnabled) {
+							setDurations([]);
+							setSelectedDuration(void 0);
+						} else {
+							setDurations(validShareDurations);
+							setSelectedDuration(validShareDurations[0]);
+						}
+					},
+					title: t("Share live location for")
+				}), liveLocationSwitchEnabled && selectedDurationLabel && /* @__PURE__ */ jsx("div", {
+					className: "str-chat__live-location-sharing-duration-selector",
+					children: /* @__PURE__ */ jsx(Dropdown, {
+						placement: "bottom-start",
+						TriggerComponent: LiveLocationDurationTrigger,
+						triggerProps: durationTriggerProps,
+						children: /* @__PURE__ */ jsx(DurationDropdownItems, {
+							durations,
+							selectDuration: setSelectedDuration,
+							selectedDuration
+						})
+					})
+				})]
+			})] }),
+			/* @__PURE__ */ jsx(Prompt.Footer, { children: /* @__PURE__ */ jsxs(Prompt.FooterControls, { children: [
+				/* @__PURE__ */ jsx(Prompt.FooterControlsButtonSecondary, {
+					className: "str-chat__prompt__footer__controls-button--cancel",
+					onClick: () => {
+						messageComposer.locationComposer.initState();
+						close();
+					},
+					children: t("Cancel")
+				}),
+				/* @__PURE__ */ jsx(Prompt.FooterControlsButtonSecondary, {
+					className: "str-chat__prompt__footer__controls-button--submit",
+					disabled: !geolocationPosition,
+					onClick: async () => {
+						let coords = geolocationPosition && {
+							latitude: geolocationPosition.coords.latitude,
+							longitude: geolocationPosition.coords.longitude
+						};
+						if (!coords) coords = (await getPosition()).coords;
+						messageComposer.locationComposer.setData({
+							...coords,
+							durationMs: selectedDuration
+						});
+						close();
+					},
+					type: "submit",
+					children: t("Attach")
+				}),
+				/* @__PURE__ */ jsx(Prompt.FooterControlsButtonPrimary, {
+					className: "str-chat__prompt__footer__controls-button--submit",
+					disabled: !geolocationPosition,
+					onClick: async () => {
+						let coords = geolocationPosition && {
+							latitude: geolocationPosition.coords.latitude,
+							longitude: geolocationPosition.coords.longitude
+						};
+						if (!coords) try {
+							coords = (await getPosition()).coords;
+						} catch (e) {
+							addNotification({
+								emitter: "ShareLocationDialog",
+								error: e instanceof Error ? e : void 0,
+								message: t("Failed to retrieve location"),
+								severity: "error",
+								type: "browser:location:get:failed"
+							});
+							return;
+						}
+						messageComposer.locationComposer.setData({
+							...coords,
+							durationMs: selectedDuration
+						});
+						try {
+							await messageComposer.sendLocation();
+						} catch (err) {
+							addNotification({
+								emitter: "ShareLocationDialog",
+								error: err instanceof Error ? err : void 0,
+								message: t("Failed to share location"),
+								severity: "error",
+								type: "api:location:share:failed"
+							});
+							return;
+						}
+						close();
+					},
+					type: "submit",
+					children: t("Share")
+				})
+			] }) })
+		]
+	});
+};
+var DurationDropdownItems = ({ durations, selectDuration, selectedDuration }) => {
+	const { t } = useTranslationContext();
+	const { close } = useDropdownContext();
+	return /* @__PURE__ */ jsx(ContextMenuRoot, { children: /* @__PURE__ */ jsx(ContextMenuBody, { children: durations.map((duration) => /* @__PURE__ */ jsx(ContextMenuButton, {
+		"aria-checked": selectedDuration === duration,
+		className: "str-chat__live-location-sharing-duration-option",
+		onClick: () => {
+			selectDuration(duration);
+			close();
+		},
+		role: "menuitemradio",
+		children: t("duration/Share Location", { milliseconds: duration })
+	}, `duration-${duration}`)) }) });
+};
+//#endregion
+export { ShareLocationDialog };
+
+//# sourceMappingURL=ShareLocationDialog.mjs.map

package/dist/es/components/Location/ShareLocationDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareLocationDialog.mjs","names":[],"sources":["../../../../src/components/Location/ShareLocationDialog.tsx"],"sourcesContent":["import React, {\n  type ComponentType,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\nimport { ContextMenuBody, ContextMenuButton, ContextMenuRoot, Prompt } from '../Dialog';\nimport {\n  Dropdown,\n  type DropdownTriggerProps,\n  useDropdownContext,\n} from '../Form/Dropdown';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { SwitchField } from '../Form/SwitchField';\nimport { useNotificationApi } from '../Notifications';\nimport type { Coords } from 'stream-chat';\nimport { Button } from '../Button';\nimport clsx from 'clsx';\n\nconst MIN_LIVE_LOCATION_SHARE_DURATION = 60 * 1000; // 1 minute;\n\nconst DEFAULT_SHARE_LOCATION_DURATIONS = [\n  15 * 60 * 1000, // 15 minutes\n  60 * 60 * 1000, // 1 hour\n  8 * 60 * 60 * 1000, // 8 hours\n];\n\nexport type ShareGeolocationMapProps = Partial<Coords> & {\n  loadingLocation: boolean;\n  restartLocationWatching: () => void;\n  geolocationPositionError?: GeolocationPositionError;\n};\n\nexport type ShareLocationDialogProps = {\n  close: () => void;\n  shareDurations?: number[];\n  GeolocationMap?: ComponentType<ShareGeolocationMapProps>;\n  DurationDropdownItems?: ComponentType<DurationDropdownItemsProps>;\n};\n\nconst DefaultGeolocationMap = () => null;\n\nconst LiveLocationDurationTrigger = ({\n  children,\n  onClick,\n  referenceRef,\n  ...props\n}: DropdownTriggerProps) => (\n  <Button\n    {...props}\n    className='str-chat__live-location-sharing-duration-selector__button'\n    onClick={onClick}\n    ref={referenceRef as React.Ref<HTMLButtonElement>}\n    type='button'\n  >\n    {children}\n  </Button>\n);\n\nexport const ShareLocationDialog = ({\n  close,\n  GeolocationMap = DefaultGeolocationMap,\n  shareDurations = DEFAULT_SHARE_LOCATION_DURATIONS,\n}: ShareLocationDialogProps) => {\n  const { IconChevronDown } = useComponentContextIcons();\n\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const messageComposer = useMessageComposerController();\n  const [durations, setDurations] = useState<number[]>([]);\n  const [selectedDuration, setSelectedDuration] = useState<number | undefined>(undefined);\n  const [geolocationPosition, setGeolocationPosition] =\n    useState<GeolocationPosition | null>(null);\n  const [loadingLocation, setLoadingLocation] = useState<boolean>(false);\n  const [geolocationPositionError, setGeolocationPositionError] = useState<\n    GeolocationPositionError | undefined\n  >(undefined);\n\n  const validShareDurations = useMemo(\n    () => shareDurations.filter((d) => d >= MIN_LIVE_LOCATION_SHARE_DURATION),\n    [shareDurations],\n  );\n\n  const selectedDurationLabel = useMemo(\n    () =>\n      durations.length > 0\n        ? t('duration/Share Location', {\n            milliseconds: selectedDuration ?? durations[0],\n          })\n        : undefined,\n    [durations, selectedDuration, t],\n  );\n\n  const durationTriggerProps = useMemo(\n    () => ({\n      children: selectedDurationLabel ? (\n        <>\n          <span>{selectedDurationLabel}</span>\n          <IconChevronDown />\n        </>\n      ) : null,\n    }),\n    [IconChevronDown, selectedDurationLabel],\n  );\n\n  const getPosition = useCallback(\n    (): Promise<GeolocationPosition> =>\n      new Promise((resolve, reject) => {\n        navigator.geolocation.getCurrentPosition(\n          (position) => {\n            resolve(position);\n          },\n          (positionError) => {\n            console.warn(positionError);\n            reject(positionError);\n          },\n          { timeout: 1000 },\n        );\n      }),\n    [],\n  );\n\n  const setupPositionWatching = useCallback(() => {\n    setLoadingLocation(true);\n    const watch = navigator.geolocation.watchPosition(\n      (position) => {\n        setGeolocationPosition(position);\n        setLoadingLocation(false);\n        setGeolocationPositionError(undefined);\n      },\n      (error) => {\n        setGeolocationPosition(null);\n        setLoadingLocation(false);\n        setGeolocationPositionError(error);\n      },\n      { timeout: 1000 },\n    );\n\n    return () => {\n      navigator.geolocation.clearWatch(watch);\n    };\n  }, []);\n\n  useEffect(() => setupPositionWatching(), [setupPositionWatching]);\n\n  const liveLocationSwitchEnabled = durations.length > 0;\n  return (\n    <Prompt.Root\n      className='str-chat__share-location-dialog'\n      data-testid='share-location-dialog'\n    >\n      <Prompt.Header\n        close={close}\n        description={t(\n          'Select your current location and optionally enable live location sharing',\n        )}\n        title={t('Share Location')}\n      />\n      <Prompt.Body>\n        <GeolocationMap\n          geolocationPositionError={geolocationPositionError}\n          latitude={geolocationPosition?.coords.latitude}\n          loadingLocation={loadingLocation}\n          longitude={geolocationPosition?.coords.longitude}\n          restartLocationWatching={setupPositionWatching}\n        />\n        {validShareDurations.length > 0 && (\n          <div\n            className={clsx('str-chat__live-location-activation', {\n              'str-chat__live-location-activation--expanded': liveLocationSwitchEnabled,\n            })}\n          >\n            <SwitchField\n              checked={liveLocationSwitchEnabled}\n              data-testid='share-location-dialog-live-location-switch'\n              disabled={!geolocationPosition}\n              onChange={(e) => {\n                e.stopPropagation();\n                if (liveLocationSwitchEnabled) {\n                  setDurations([]);\n                  setSelectedDuration(undefined);\n                } else {\n                  setDurations(validShareDurations);\n                  setSelectedDuration(validShareDurations[0]);\n                }\n              }}\n              title={t('Share live location for')}\n            />\n            {liveLocationSwitchEnabled && selectedDurationLabel && (\n              <div className='str-chat__live-location-sharing-duration-selector'>\n                <Dropdown\n                  placement='bottom-start'\n                  TriggerComponent={LiveLocationDurationTrigger}\n                  triggerProps={durationTriggerProps}\n                >\n                  <DurationDropdownItems\n                    durations={durations}\n                    selectDuration={setSelectedDuration}\n                    selectedDuration={selectedDuration}\n                  />\n                </Dropdown>\n              </div>\n            )}\n          </div>\n        )}\n      </Prompt.Body>\n      <Prompt.Footer>\n        <Prompt.FooterControls>\n          <Prompt.FooterControlsButtonSecondary\n            className='str-chat__prompt__footer__controls-button--cancel'\n            onClick={() => {\n              messageComposer.locationComposer.initState();\n              close();\n            }}\n          >\n            {t('Cancel')}\n          </Prompt.FooterControlsButtonSecondary>\n          <Prompt.FooterControlsButtonSecondary\n            className='str-chat__prompt__footer__controls-button--submit'\n            disabled={!geolocationPosition}\n            onClick={async () => {\n              let coords = geolocationPosition && {\n                latitude: geolocationPosition.coords.latitude,\n                longitude: geolocationPosition.coords.longitude,\n              };\n              if (!coords) {\n                coords = (await getPosition()).coords;\n              }\n              messageComposer.locationComposer.setData({\n                ...coords,\n                durationMs: selectedDuration,\n              });\n              close();\n            }}\n            type='submit'\n          >\n            {t('Attach')}\n          </Prompt.FooterControlsButtonSecondary>\n          <Prompt.FooterControlsButtonPrimary\n            className='str-chat__prompt__footer__controls-button--submit'\n            disabled={!geolocationPosition}\n            onClick={async () => {\n              let coords = geolocationPosition && {\n                latitude: geolocationPosition.coords.latitude,\n                longitude: geolocationPosition.coords.longitude,\n              };\n              if (!coords) {\n                try {\n                  coords = (await getPosition()).coords;\n                } catch (e) {\n                  addNotification({\n                    emitter: 'ShareLocationDialog',\n                    error: e instanceof Error ? e : undefined,\n                    message: t('Failed to retrieve location'),\n                    severity: 'error',\n                    type: 'browser:location:get:failed',\n                  });\n                  return;\n                }\n              }\n\n              messageComposer.locationComposer.setData({\n                ...coords,\n                durationMs: selectedDuration,\n              });\n              try {\n                await messageComposer.sendLocation();\n              } catch (err) {\n                addNotification({\n                  emitter: 'ShareLocationDialog',\n                  error: err instanceof Error ? err : undefined,\n                  message: t('Failed to share location'),\n                  severity: 'error',\n                  type: 'api:location:share:failed',\n                });\n                return;\n              }\n              close();\n            }}\n            type='submit'\n          >\n            {t('Share')}\n          </Prompt.FooterControlsButtonPrimary>\n        </Prompt.FooterControls>\n      </Prompt.Footer>\n    </Prompt.Root>\n  );\n};\n\nexport type DurationDropdownItemsProps = {\n  durations: number[];\n  selectedDuration?: number;\n  selectDuration: (duration: number) => void;\n};\nconst DurationDropdownItems = ({\n  durations,\n  selectDuration,\n  selectedDuration,\n}: DurationDropdownItemsProps) => {\n  const { t } = useTranslationContext();\n  const { close } = useDropdownContext();\n  return (\n    <ContextMenuRoot>\n      <ContextMenuBody>\n        {durations.map((duration) => (\n          <ContextMenuButton\n            aria-checked={selectedDuration === duration}\n            className='str-chat__live-location-sharing-duration-option'\n            key={`duration-${duration}`}\n            onClick={() => {\n              selectDuration(duration);\n              close();\n            }}\n            role='menuitemradio'\n          >\n            {t('duration/Share Location', { milliseconds: duration })}\n          </ContextMenuButton>\n        ))}\n      </ContextMenuBody>\n    </ContextMenuRoot>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/Location/hooks/useLiveLocationSharingManager.mjs

@@ -0,0 +1,57 @@
+import { useEffect, useMemo } from "react";
+import { LiveLocationManager } from "stream-chat";
+//#region src/components/Location/hooks/useLiveLocationSharingManager.ts
+var isMobile = () => /Mobi/i.test(navigator.userAgent);
+/**
+* Checks whether the current browser is Safari.
+*/
+var isSafari = () => {
+	if (typeof navigator === "undefined") return false;
+	return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || "");
+};
+/**
+* Checks whether the current browser is Firefox.
+*/
+var isFirefox = () => {
+	if (typeof navigator === "undefined") return false;
+	return navigator.userAgent?.includes("Firefox");
+};
+/**
+* Checks whether the current browser is Google Chrome.
+*/
+var isChrome = () => {
+	if (typeof navigator === "undefined") return false;
+	return navigator.userAgent?.includes("Chrome");
+};
+var browser = () => {
+	if (isChrome()) return "chrome";
+	if (isFirefox()) return "firefox";
+	if (isSafari()) return "safari";
+	return "other";
+};
+var useLiveLocationSharingManager = ({ client, getDeviceId, watchLocation }) => {
+	const manager = useMemo(() => {
+		if (!client) return null;
+		return new LiveLocationManager({
+			client,
+			getDeviceId: getDeviceId ?? (() => `web-${isMobile() ? "mobile" : "desktop"}-${browser()}-${client.userID}`),
+			watchLocation
+		});
+	}, [
+		client,
+		getDeviceId,
+		watchLocation
+	]);
+	useEffect(() => {
+		if (!manager) return;
+		manager.init();
+		return () => {
+			manager.unregisterSubscriptions();
+		};
+	}, [manager]);
+	return manager;
+};
+//#endregion
+export { isChrome, isFirefox, isSafari, useLiveLocationSharingManager };
+
+//# sourceMappingURL=useLiveLocationSharingManager.mjs.map

package/dist/es/components/Location/hooks/useLiveLocationSharingManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveLocationSharingManager.mjs","names":[],"sources":["../../../../../src/components/Location/hooks/useLiveLocationSharingManager.ts"],"sourcesContent":["import { LiveLocationManager } from 'stream-chat';\nimport { useEffect, useMemo } from 'react';\nimport type { LiveLocationManagerConstructorParameters, StreamChat } from 'stream-chat';\n\nconst isMobile = () => /Mobi/i.test(navigator.userAgent);\n/**\n * Checks whether the current browser is Safari.\n */\nexport const isSafari = () => {\n  if (typeof navigator === 'undefined') return false;\n  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');\n};\n\n/**\n * Checks whether the current browser is Firefox.\n */\nexport const isFirefox = () => {\n  if (typeof navigator === 'undefined') return false;\n  return navigator.userAgent?.includes('Firefox');\n};\n\n/**\n * Checks whether the current browser is Google Chrome.\n */\nexport const isChrome = () => {\n  if (typeof navigator === 'undefined') return false;\n  return navigator.userAgent?.includes('Chrome');\n};\n\nconst browser = () => {\n  if (isChrome()) return 'chrome';\n  if (isFirefox()) return 'firefox';\n  if (isSafari()) return 'safari';\n  return 'other';\n};\n\nexport const useLiveLocationSharingManager = ({\n  client,\n  getDeviceId,\n  watchLocation,\n}: Omit<LiveLocationManagerConstructorParameters, 'client' | 'getDeviceId'> & {\n  client?: StreamChat | null;\n  getDeviceId?: () => string;\n}) => {\n  const manager = useMemo(() => {\n    if (!client) return null;\n\n    return new LiveLocationManager({\n      client,\n      getDeviceId:\n        getDeviceId ??\n        (() => `web-${isMobile() ? 'mobile' : 'desktop'}-${browser()}-${client.userID}`),\n      watchLocation,\n    });\n  }, [client, getDeviceId, watchLocation]);\n\n  useEffect(() => {\n    if (!manager) return;\n\n    manager.init();\n\n    return () => {\n      manager.unregisterSubscriptions();\n    };\n  }, [manager]);\n\n  return manager;\n};\n"],"mappings":";;;AAIA,IAAM,iBAAiB,QAAQ,KAAK,UAAU,SAAS;;;;AAIvD,IAAa,iBAAiB;CAC5B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,iCAAiC,KAAK,UAAU,aAAa,EAAE;AACxE;;;;AAKA,IAAa,kBAAkB;CAC7B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,UAAU,WAAW,SAAS,SAAS;AAChD;;;;AAKA,IAAa,iBAAiB;CAC5B,IAAI,OAAO,cAAc,aAAa,OAAO;CAC7C,OAAO,UAAU,WAAW,SAAS,QAAQ;AAC/C;AAEA,IAAM,gBAAgB;CACpB,IAAI,SAAS,GAAG,OAAO;CACvB,IAAI,UAAU,GAAG,OAAO;CACxB,IAAI,SAAS,GAAG,OAAO;CACvB,OAAO;AACT;AAEA,IAAa,iCAAiC,EAC5C,QACA,aACA,oBAII;CACJ,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,QAAQ,OAAO;EAEpB,OAAO,IAAI,oBAAoB;GAC7B;GACA,aACE,sBACO,OAAO,SAAS,IAAI,WAAW,UAAU,GAAG,QAAQ,EAAE,GAAG,OAAO;GACzE;EACF,CAAC;CACH,GAAG;EAAC;EAAQ;EAAa;CAAa,CAAC;CAEvC,gBAAgB;EACd,IAAI,CAAC,SAAS;EAEd,QAAQ,KAAK;EAEb,aAAa;GACX,QAAQ,wBAAwB;EAClC;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;AACT"}

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecorder.mjs

@@ -0,0 +1,32 @@
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { MediaRecordingState } from "../classes/MediaRecorderController.mjs";
+import { AudioRecordingPlayback } from "./AudioRecordingPlayback.mjs";
+import { AudioRecordingPreview } from "./AudioRecordingPreview.mjs";
+import { isStopped } from "./recordingStateIdentity.mjs";
+import { AudioRecorderRecordingControls } from "./AudioRecorderRecordingControls.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx
+var AudioRecorder = () => {
+	const { recordingController: { recorder, recording, recordingState } } = useMessageComposerContext();
+	const state = useMemo(() => ({
+		paused: recordingState === MediaRecordingState.PAUSED,
+		recording: recordingState === MediaRecordingState.RECORDING,
+		stopped: recordingState === MediaRecordingState.STOPPED
+	}), [recordingState]);
+	if (!recorder) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__audio_recorder",
+		"data-testid": "audio-recorder",
+		children: [(isStopped(recordingState) || state.paused) && recording?.asset_url ? /* @__PURE__ */ jsx(AudioRecordingPlayback, {
+			durationSeconds: recording.duration ?? 0,
+			mimeType: recording.mime_type,
+			src: recording.asset_url,
+			waveformData: recording.waveform_data
+		}) : state.recording ? /* @__PURE__ */ jsx(AudioRecordingPreview, {}) : null, /* @__PURE__ */ jsx(AudioRecorderRecordingControls, {})]
+	});
+};
+//#endregion
+export { AudioRecorder };
+
+//# sourceMappingURL=AudioRecorder.mjs.map

package/dist/es/components/MediaRecorder/AudioRecorder/AudioRecorder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecorder.mjs","names":[],"sources":["../../../../../src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AudioRecordingPlayback } from './AudioRecordingPlayback';\nimport { AudioRecordingPreview } from './AudioRecordingPreview';\nimport { MediaRecordingState } from '../classes';\nimport { useMessageComposerContext } from '../../../context/MessageComposerContext';\nimport { AudioRecorderRecordingControls } from './AudioRecorderRecordingControls';\nimport { isStopped } from './recordingStateIdentity';\n\nexport const AudioRecorder = () => {\n  const {\n    recordingController: { recorder, recording, recordingState },\n  } = useMessageComposerContext();\n\n  const state = useMemo(\n    () => ({\n      paused: recordingState === MediaRecordingState.PAUSED,\n      recording: recordingState === MediaRecordingState.RECORDING,\n      stopped: recordingState === MediaRecordingState.STOPPED,\n    }),\n    [recordingState],\n  );\n\n  if (!recorder) return null;\n\n  return (\n    <div className='str-chat__audio_recorder' data-testid={'audio-recorder'}>\n      {(isStopped(recordingState) || state.paused) && recording?.asset_url ? (\n        <AudioRecordingPlayback\n          durationSeconds={recording.duration ?? 0}\n          mimeType={recording.mime_type}\n          src={recording.asset_url}\n          waveformData={recording.waveform_data}\n        />\n      ) : state.recording ? (\n        <AudioRecordingPreview />\n      ) : null}\n\n      <AudioRecorderRecordingControls />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,sBAAsB;CACjC,MAAM,EACJ,qBAAqB,EAAE,UAAU,WAAW,qBAC1C,0BAA0B;CAE9B,MAAM,QAAQ,eACL;EACL,QAAQ,mBAAmB,oBAAoB;EAC/C,WAAW,mBAAmB,oBAAoB;EAClD,SAAS,mBAAmB,oBAAoB;CAClD,IACA,CAAC,cAAc,CACjB;CAEA,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAU;EAA2B,eAAa;YAAvD,EACI,UAAU,cAAc,KAAK,MAAM,WAAW,WAAW,YACzD,oBAAC,wBAAD;GACE,iBAAiB,UAAU,YAAY;GACvC,UAAU,UAAU;GACpB,KAAK,UAAU;GACf,cAAc,UAAU;EACzB,CAAA,IACC,MAAM,YACR,oBAAC,uBAAD,CAAwB,CAAA,IACtB,MAEJ,oBAAC,gCAAD,CAAiC,CAAA,CAC9B;;AAET"}