stream-chat-react 14.5.0 → 14.6.0

package/dist/cjs/useChannelHeaderOnlineStatus.6546ac83.js

@@ -0,0 +1,4143 @@
+const require_useNotificationApi = require("./useNotificationApi.eb753f31.js");
+let react = require("react");
+react = require_useNotificationApi.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let stream_chat = require("stream-chat");
+let clsx = require("clsx");
+clsx = require_useNotificationApi.__toESM(clsx);
+let use_sync_external_store_shim = require("use-sync-external-store/shim");
+let _react_aria_focus = require("@react-aria/focus");
+let unist_util_visit = require("unist-util-visit");
+let react_markdown = require("react-markdown");
+react_markdown = require_useNotificationApi.__toESM(react_markdown);
+let remark_gfm = require("remark-gfm");
+remark_gfm = require_useNotificationApi.__toESM(remark_gfm);
+let _braintree_sanitize_url = require("@braintree/sanitize-url");
+//#region src/context/MessageContext.tsx
+var MessageContext = react.default.createContext(void 0);
+var MessageProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageContext.Provider, {
+	value,
+	children
+});
+var useMessageContext = (_componentName) => {
+	const contextValue = (0, react.useContext)(MessageContext);
+	if (!contextValue) return {};
+	return contextValue;
+};
+//#endregion
+//#region src/context/MessageTranslationViewContext.tsx
+/**
+* Message translation view context: user-specific state for whether each message
+* shows original text or a translation.
+*
+* ## Spec
+*
+* - **State**: Per message list (channel vs thread), we store a map
+*   `messageId → 'original' | 'translated'`. Default for messages with `message.i18n`
+*   is `'translated'`; otherwise `'original'`.
+*
+* - **Provider placement**: The provider is tied to the **message list**, not the channel.
+*   It is rendered inside `MessageList` and `VirtualizedMessageList`. That way the
+*   main channel list and the thread list each have their own translation view state
+*   (e.g. Thread.tsx gets correct behavior without sharing channel state).
+*
+* - **Multiple translations**: `message.i18n` can contain multiple languages, e.g.:
+*   `{ en_text: "Good morning", fr_text: "Bonjour", it_text: "Buongiorno", language: "en" }`.
+*   Which translation is shown is determined by the app’s **user language**
+*   (`useTranslationContext().userLanguage`). We use `message.i18n[userLanguage + '_text']`;
+*   if missing, we fall back to `message.text`. Only one translation is shown at a time.
+*
+* - **Source language**: When present, `message.i18n.language` is the original/source
+*   language of `message.text`. It can be used for the indicator label, e.g.
+*   "Translated from English · View original".
+*
+* - **Invariants**: The original message content, layout, grouping, and order stay
+*   unchanged. Removing or toggling translation only changes the annotation and which
+*   text is displayed. "View original" / "View translation" switch the displayed
+*   text and update the annotation (e.g. "Original · View translation" when showing
+*   original).
+*
+* - **Translation indicator visibility**: The translation indicator (e.g. "Translated ·
+*   View original") is **not** shown when the currently viewed text already corresponds
+*   to `userLanguage` — for example when viewing original and the original text is the
+*   user-language version (i.e. `getTranslatedMessageText({ language: userLanguage, message })`
+*   equals `message.text`). In that case there is no meaningful original/translated choice,
+*   so the indicator is hidden.
+*/
+/**
+* Returns the translated message text for a given language from `message.i18n`, or
+* undefined if not present. Used to resolve which of the multiple translations to show.
+*/
+var getTranslatedMessageText = ({ language, message }) => message?.i18n?.[`${language}_text`];
+var defaultContextValue = {
+	getTranslationView: (_messageId, hasI18n) => hasI18n ? "translated" : "original",
+	setTranslationView: () => {}
+};
+var MessageTranslationViewContext = (0, react.createContext)(defaultContextValue);
+var MessageTranslationViewProvider = ({ children }) => {
+	const [viewByMessageId, setViewByMessageId] = (0, react.useState)({});
+	const setTranslationView = (0, react.useCallback)((messageId, view) => {
+		setViewByMessageId((prev) => ({
+			...prev,
+			[messageId]: view
+		}));
+	}, []);
+	const getTranslationView = (0, react.useCallback)((messageId, hasI18n) => viewByMessageId[messageId] ?? (hasI18n ? "translated" : "original"), [viewByMessageId]);
+	const stableValue = react.default.useMemo(() => ({
+		getTranslationView,
+		setTranslationView
+	}), [getTranslationView, setTranslationView]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageTranslationViewContext.Provider, {
+		value: stableValue,
+		children
+	});
+};
+var useMessageTranslationViewContext = () => {
+	return (0, react.useContext)(MessageTranslationViewContext) ?? defaultContextValue;
+};
+//#endregion
+//#region src/context/ModalContext.tsx
+var ModalContext = react.default.createContext(void 0);
+var ModalContextProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContext.Provider, {
+	value,
+	children
+});
+var useModalContext = () => {
+	const contextValue = (0, react.useContext)(ModalContext);
+	if (!contextValue) {
+		console.warn(`The useModalContext hook was called outside of the ModalContext provider. Make sure this hook is called within a child of the GlobalModal.`);
+		return { close: () => null };
+	}
+	return contextValue;
+};
+//#endregion
+//#region src/components/Notifications/NotificationConfigurationContext.tsx
+var defaultNotificationDisplayFilter = () => true;
+var defaultNotificationConfigurationContextValue = { displayFilter: defaultNotificationDisplayFilter };
+var NotificationConfigurationContext = react.default.createContext(defaultNotificationConfigurationContextValue);
+var NotificationConfigurationProvider = ({ children, displayFilter }) => {
+	const parentConfiguration = (0, react.useContext)(NotificationConfigurationContext);
+	const value = (0, react.useMemo)(() => ({ displayFilter: displayFilter ?? parentConfiguration.displayFilter }), [displayFilter, parentConfiguration.displayFilter]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotificationConfigurationContext.Provider, {
+		value,
+		children
+	});
+};
+var useNotificationConfigurationContext = () => (0, react.useContext)(NotificationConfigurationContext);
+//#endregion
+//#region src/components/Notifications/hooks/useNotifications.ts
+/**
+* Subscribes to client.notifications.store and returns the list of notifications.
+* Optionally pass a filter so only notifications that match are returned (e.g. for a specific NotificationList).
+*/
+var useNotifications = (options) => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { displayFilter } = useNotificationConfigurationContext();
+	const { applyDisplayFilter, fallbackPanel, filter, panel } = options ?? {};
+	const selector = (0, react.useCallback)((state) => {
+		return { notifications: state.notifications.filter((notification) => {
+			if (panel && !require_useNotificationApi.isNotificationForPanel(notification, panel, { fallbackPanel })) return false;
+			if (applyDisplayFilter && !displayFilter({
+				fallbackPanel,
+				filter,
+				notification,
+				panel
+			})) return false;
+			return filter ? filter(notification) : true;
+		}) };
+	}, [
+		applyDisplayFilter,
+		displayFilter,
+		fallbackPanel,
+		filter,
+		panel
+	]);
+	const { notifications } = require_useNotificationApi.useStateStore(client.notifications.store, selector);
+	return notifications;
+};
+//#endregion
+//#region src/components/Loading/LoadingIndicator.tsx
+var LoadingIndicator = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconLoading, {
+	...props,
+	className: "str-chat__loading-indicator"
+});
+//#endregion
+//#region src/components/MessageComposer/hooks/utils.ts
+function prettifyFileSize(bytes, precision = 3) {
+	const units = [
+		"B",
+		"kB",
+		"MB",
+		"GB"
+	];
+	const exponent = bytes === 0 ? 0 : Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+	const mantissa = bytes / 1024 ** exponent;
+	return `${precision === 0 ? Math.round(mantissa).toString() : mantissa.toPrecision(precision)} ${units[exponent]}`;
+}
+//#endregion
+//#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__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "str-chat__message-attachment-file--item-size",
+		"data-testid": "file-size-indicator",
+		children: prettifyFileSize(actualFileSize, maximumFractionDigits)
+	});
+};
+//#endregion
+//#region src/utils/useStableCallback.ts
+/**
+* A utility hook implementing a stable callback. It takes in an unstable method that
+* is supposed to be invoked somewhere deeper in the DOM tree without making it
+* change its reference every time the parent component rerenders. It will also return
+* the value of the callback if it does return one.
+* A common use-case would be having a function whose invocation depends on state
+* somewhere high up in the DOM tree and wanting to use the same function deeper
+* down, for example in a leaf node and simply using useCallback results in
+* cascading dependency hell. If we wrap it in useStableCallback, we would be able
+* to:
+* - Use the same function as a dependency of another hook (since it is stable)
+* - Still invoke it and get the latest state
+*
+* **Caveats:**
+* - Never wrap a function that is supposed to return a React.ReactElement in
+*   useStableCallback, since React will not know that the DOM needs to be updated
+*   whenever the callback value changes (for example, renderItem from FlatList must
+*   never be wrapped in this hook)
+* - Always prefer using a standard useCallback/stable function wherever possible
+*   (the purpose of useStableCallback is to bridge the gap between top level contexts
+*   and cascading rereders in downstream components - **not** as an escape hatch)
+* @param callback - the callback we want to stabilize
+*/
+var useStableCallback = (callback) => {
+	const ref = (0, react.useRef)(callback);
+	ref.current = callback;
+	return (0, react.useCallback)((...args) => ref.current(...args), []);
+};
+//#endregion
+//#region src/a11y/hooks/useAriaIdentifiers.ts
+var sanitizeAriaRootId = (rootId) => rootId?.trim().replace(/[^A-Za-z0-9:_-]/g, "-") ?? "";
+var buildAriaIdentifier = (sanitizedRootId, descriptor) => sanitizedRootId ? `${sanitizedRootId}-${descriptor}` : void 0;
+/**
+* Derives stable ARIA identifier IDs from a single root ID.
+*
+* Use this to keep dialog/component labeling conventions consistent without
+* manually building `*-title` and `*-description` IDs at each call site.
+*
+* Behavior:
+* - Root ID is trimmed and sanitized to `[A-Za-z0-9:_-]` before use.
+* - Returns `undefined` IDs when root ID is missing/empty after sanitization.
+*/
+var useAriaIdentifiers = (rootId) => {
+	const sanitizedRootId = sanitizeAriaRootId(rootId);
+	return (0, react.useMemo)(() => ({
+		descriptionId: buildAriaIdentifier(sanitizedRootId, "description"),
+		titleId: buildAriaIdentifier(sanitizedRootId, "title")
+	}), [sanitizedRootId]);
+};
+//#endregion
+//#region src/components/Dialog/components/Alert.tsx
+var Root = (0, react.forwardRef)(function AlertRoot({ children, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: (0, clsx.default)("str-chat__alert-root", className),
+		ref,
+		children
+	});
+});
+var Header = (0, react.forwardRef)(function AlertHeader({ children, className, description, descriptionId, Icon, title, titleId, ...props }, ref) {
+	const { dialogId } = useModalContext();
+	const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } = useAriaIdentifiers(dialogId);
+	const resolvedTitleId = titleId ?? derivedTitleId;
+	const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: (0, clsx.default)("str-chat__alert-header", className),
+		ref,
+		children: title ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "str-chat__alert-header__copy",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "str-chat__alert-header__title",
+				id: resolvedTitleId,
+				children: title
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "str-chat__alert-header__description",
+				id: resolvedDescriptionId,
+				children: description
+			})]
+		})] }) : children
+	});
+});
+var Alert = {
+	Actions: (0, react.forwardRef)(function AlertActions({ children, className, ...props }, ref) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...props,
+			className: (0, clsx.default)("str-chat__alert-actions", className),
+			ref,
+			children
+		});
+	}),
+	Header,
+	Root
+};
+//#endregion
+//#region src/components/Dialog/service/DialogAnchor.tsx
+function useDialogAnchor({ allowFlip, offset, open, placement, referenceElement, updateKey, updatePositionOnContentResize = false }) {
+	const [popperElement, setPopperElement] = (0, react.useState)(null);
+	const [stabilisedChosenPlacement, setStabilisedChosenPlacement] = (0, react.useState)(null);
+	const { placement: chosenPlacement, refs, strategy, update, x, y } = require_useNotificationApi.usePopoverPosition({
+		allowFlip,
+		freeze: true,
+		offset,
+		placement: stabilisedChosenPlacement ?? placement
+	});
+	if (!stabilisedChosenPlacement && popperElement && placement !== chosenPlacement) setStabilisedChosenPlacement(chosenPlacement);
+	else if (stabilisedChosenPlacement && !popperElement) setStabilisedChosenPlacement(null);
+	const frozenReferenceRef = (0, react.useRef)(null);
+	if (open && referenceElement && !frozenReferenceRef.current) frozenReferenceRef.current = referenceElement;
+	if (!open) frozenReferenceRef.current = null;
+	const effectiveReference = open ? frozenReferenceRef.current : referenceElement;
+	(0, react.useEffect)(() => {
+		refs.setReference(effectiveReference);
+	}, [effectiveReference, refs]);
+	(0, react.useEffect)(() => {
+		refs.setFloating(popperElement);
+	}, [popperElement, refs]);
+	(0, react.useEffect)(() => {
+		if (open && popperElement && effectiveReference) update?.();
+	}, [
+		open,
+		placement,
+		popperElement,
+		update,
+		updateKey,
+		effectiveReference
+	]);
+	(0, react.useEffect)(() => {
+		if (!popperElement || !updatePositionOnContentResize) return;
+		const resizeObserver = new ResizeObserver(update);
+		resizeObserver.observe(popperElement);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [
+		popperElement,
+		update,
+		updatePositionOnContentResize
+	]);
+	if (popperElement && !open) setPopperElement(null);
+	return {
+		placement: stabilisedChosenPlacement ?? chosenPlacement,
+		setPopperElement,
+		styles: {
+			left: x ?? 0,
+			position: strategy,
+			top: y ?? 0
+		}
+	};
+}
+var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside, closeTransitionMs = 0, dialogManagerId, focus = true, id, offset, placement = "auto", referenceElement = null, tabIndex, trapFocus, updateKey, updatePositionOnContentResize, ...restDivProps }) => {
+	/**
+	* Rendering lifecycle notes:
+	* - `open=true` renders dialog contents immediately.
+	* - `open=false` can keep contents mounted for `closeTransitionMs` to allow CSS exit
+	*   animations before unmount.
+	*
+	* State exposed to CSS:
+	* - `data-str-chat-dialog-state="open"` while actively open.
+	* - `data-str-chat-dialog-state="closing"` during delayed unmount window.
+	*
+	* Consumers like `ContextMenu` combine:
+	* - `data-str-chat-dialog-state` from this component, and
+	* - `data-str-chat-placement` (e.g. `top-start`, `right-end`)
+	* to select the correct closing keyframe in CSS (horizontal vs vertical roll direction).
+	* In practice, JS only toggles state and timing (`closeTransitionMs`); CSS owns the
+	* visual motion details (transform/easing), so animation behavior stays declarative.
+	*/
+	const dialog = require_useNotificationApi.useDialog({
+		closeOnClickOutside,
+		dialogManagerId,
+		id
+	});
+	const open = require_useNotificationApi.useDialogIsOpen(id, dialogManagerId);
+	const [shouldRender, setShouldRender] = (0, react.useState)(open);
+	const closeTimeoutRef = (0, react.useRef)(null);
+	const isClosing = !open && shouldRender;
+	(0, react.useEffect)(() => {
+		if (open) {
+			setShouldRender(true);
+			if (closeTimeoutRef.current) {
+				clearTimeout(closeTimeoutRef.current);
+				closeTimeoutRef.current = null;
+			}
+			return;
+		}
+		if (!shouldRender) return;
+		if (!closeTransitionMs) {
+			setShouldRender(false);
+			return;
+		}
+		closeTimeoutRef.current = setTimeout(() => {
+			setShouldRender(false);
+			closeTimeoutRef.current = null;
+		}, closeTransitionMs);
+	}, [
+		closeTransitionMs,
+		open,
+		shouldRender
+	]);
+	(0, react.useEffect)(() => () => {
+		if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+	}, []);
+	const { placement: chosenPlacement, setPopperElement, styles } = useDialogAnchor({
+		allowFlip,
+		offset,
+		open: shouldRender,
+		placement,
+		referenceElement,
+		updateKey,
+		updatePositionOnContentResize
+	});
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const hideOnEscape = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			dialog?.close();
+		};
+		document.addEventListener("keyup", hideOnEscape);
+		return () => {
+			document.removeEventListener("keyup", hideOnEscape);
+		};
+	}, [dialog, open]);
+	if (!shouldRender) return null;
+	const { ["aria-describedby"]: ariaDescribedBy, ["aria-label"]: ariaLabel, ["aria-labelledby"]: ariaLabelledBy, ["aria-modal"]: ariaModal, role, ...anchorDivProps } = restDivProps;
+	const resolvedRole = trapFocus ? role ?? "dialog" : role;
+	const resolvedAriaModal = trapFocus ? true : ariaModal;
+	const resolvedAriaLabel = ariaLabelledBy ? void 0 : ariaLabel;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.DialogPortalEntry, {
+		dialogId: id,
+		dialogManagerId,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_aria_focus.FocusScope, {
+			autoFocus: focus,
+			contain: trapFocus,
+			restoreFocus: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...anchorDivProps,
+				"aria-describedby": ariaDescribedBy,
+				"aria-label": resolvedAriaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-modal": resolvedAriaModal,
+				className: (0, clsx.default)("str-chat__dialog-contents", className),
+				"data-str-chat-dialog-state": isClosing ? "closing" : "open",
+				"data-str-chat-placement": chosenPlacement,
+				"data-testid": "str-chat__dialog-contents",
+				ref: setPopperElement,
+				role: resolvedRole,
+				style: styles,
+				tabIndex: typeof tabIndex !== "undefined" ? tabIndex : 0,
+				children
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/Avatar/Avatar.tsx
+var getInitials = (name) => {
+	const regex = /(\p{L}{1})\p{L}+/gu;
+	if (!name || name.trim().length === 0) return "";
+	const initials = Array.from(name?.matchAll(regex) || []);
+	if (!initials.length) return "";
+	return `${initials.at(0)[1]}${initials.length > 1 ? initials.at(-1)[1] : ""}`;
+};
+/**
+* A round avatar image with fallback to username's first letter
+*/
+var Avatar = ({ className, FallbackIcon = require_useNotificationApi.IconUser, imageUrl, isOnline, size, userName, ...rest }) => {
+	const [error, setError] = (0, react.useState)(false);
+	(0, react.useEffect)(() => () => setError(false), [imageUrl]);
+	const nameString = userName?.toString() || "";
+	const avatarImageAlt = nameString.trim();
+	const sizeAwareInitials = (0, react.useMemo)(() => {
+		const initials = getInitials(nameString);
+		if (size === "sm" || size === "xs") return initials.charAt(0);
+		return initials;
+	}, [nameString, size]);
+	const showImage = typeof imageUrl === "string" && imageUrl && !error;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)(`str-chat__avatar`, className, {
+			"str-chat__avatar--multiple-letters": sizeAwareInitials.length > 1,
+			"str-chat__avatar--no-letters": !sizeAwareInitials.length,
+			"str-chat__avatar--one-letter": sizeAwareInitials.length === 1,
+			[`str-chat__avatar--size-${size}`]: typeof size === "string"
+		}),
+		"data-testid": "avatar",
+		role: "button",
+		title: userName,
+		...rest,
+		children: [typeof isOnline === "boolean" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("str-chat__avatar-status-badge", {
+			"str-chat__avatar-status-badge--offline": !isOnline,
+			"str-chat__avatar-status-badge--online": isOnline
+		}) }), showImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			alt: avatarImageAlt,
+			className: "str-chat__avatar-image",
+			"data-testid": "avatar-img",
+			onError: () => setError(true),
+			src: imageUrl
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!!sizeAwareInitials.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__avatar-initials",
+			"data-testid": "avatar-fallback",
+			children: sizeAwareInitials
+		}), !sizeAwareInitials.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FallbackIcon, {})] })]
+	});
+};
+//#endregion
+//#region src/components/Badge/Badge.tsx
+/**
+* Compact pill/circle badge for counts and labels.
+* Uses design tokens: --badge-bg-*, --badge-text-*, --badge-border.
+*/
+var Badge = ({ children, className, size = "md", variant = "default", ...spanProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...spanProps,
+	className: (0, clsx.default)("str-chat__badge", `str-chat__badge--variant-${variant}`, { [`str-chat__badge--size-${size}`]: size }, className),
+	children
+});
+var ErrorBadge = ({ className, size = "sm", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+	...rest,
+	className,
+	size,
+	variant: "error",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconExclamationMarkFill, {})
+});
+//#endregion
+//#region src/components/Avatar/ChannelAvatar.tsx
+var ChannelAvatar = ({ displayMembers, imageUrl, size, userName, ...sharedProps }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupAvatar, {
+		displayMembers: (0, react.useMemo)(() => {
+			if (!imageUrl && displayMembers && displayMembers.length > 0) return displayMembers;
+			return [{
+				imageUrl,
+				userName
+			}];
+		}, [
+			displayMembers,
+			imageUrl,
+			userName
+		]),
+		size,
+		...sharedProps
+	});
+};
+//#endregion
+//#region src/components/Avatar/GroupAvatar.tsx
+/**
+* Avatar component to display multiple users' avatars in a group.
+* Renders a single Avatar if fewer than 2 members. Otherwise, renders up to 2 avatars (when overflowCount is set) or 4, plus an optional +N badge.
+*/
+var GroupAvatar = ({ badgeSize, className, displayMembers = [], isOnline, size, ...rest }) => {
+	const displayMembersToRender = (0, react.useMemo)(() => displayMembers.length > 4 ? displayMembers.slice(0, 2) : displayMembers, [displayMembers]);
+	const overflowCount = displayMembers.length - displayMembersToRender.length;
+	if (displayMembers.length < 2) {
+		const firstUser = displayMembers[0];
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+			imageUrl: firstUser?.imageUrl,
+			isOnline,
+			size,
+			userName: firstUser?.userName,
+			...rest
+		});
+	}
+	let avatarSize = null;
+	if (size === "2xl") avatarSize = "lg";
+	else if (size === "xl") avatarSize = "md";
+	else if (size === "lg") avatarSize = "sm";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("str-chat__avatar-group", {
+			"str-chat__avatar-group--offline": typeof isOnline === "boolean" && !isOnline,
+			"str-chat__avatar-group--online": typeof isOnline === "boolean" && isOnline,
+			[`str-chat__avatar-group--size-${size}`]: typeof size === "string"
+		}, className),
+		"data-testid": "group-avatar",
+		role: "button",
+		...rest,
+		children: [displayMembersToRender.map(({ id, imageUrl, userName }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+			imageUrl,
+			size: avatarSize,
+			userName
+		}, id || `${userName}-${imageUrl}-${index}`)), typeof overflowCount === "number" && overflowCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Badge, {
+			className: "str-chat__avatar-group__count-badge",
+			"data-testid": "group-avatar-count-badge",
+			size: badgeSize,
+			variant: "counter",
+			children: ["+", overflowCount]
+		})]
+	});
+};
+//#endregion
+//#region src/a11y/a11yUtils.ts
+var MENU_KEYBOARD_NAVIGATION_KEYS = [
+	"ArrowDown",
+	"ArrowUp",
+	"End",
+	"Home"
+];
+var isMenuKeyboardNavigationKey = (key) => MENU_KEYBOARD_NAVIGATION_KEYS.includes(key);
+var getNextRovingFocusIndex = ({ activeIndex, itemCount, key }) => {
+	if (itemCount <= 0 || !isMenuKeyboardNavigationKey(key)) return null;
+	const lastIndex = itemCount - 1;
+	if (key === "Home") return 0;
+	if (key === "End") return lastIndex;
+	if (activeIndex === -1) return key === "ArrowUp" ? lastIndex : 0;
+	if (key === "ArrowUp") return activeIndex <= 0 ? lastIndex : activeIndex - 1;
+	return activeIndex >= lastIndex ? 0 : activeIndex + 1;
+};
+var getDefaultActiveIndex = (items) => {
+	const activeElement = document.activeElement;
+	if (!(activeElement instanceof Element)) return -1;
+	return items.findIndex((item) => item instanceof Element && item === activeElement);
+};
+var createRovingFocusKeyDownHandler = ({ focusItem = (item) => item.focus(), getActiveIndex = (items) => getDefaultActiveIndex(items), getItems }) => {
+	const handleKeyDown = (event) => {
+		const items = getItems(event);
+		const nextIndex = getNextRovingFocusIndex({
+			activeIndex: getActiveIndex(items, event),
+			itemCount: items.length,
+			key: event.key
+		});
+		if (nextIndex === null) return;
+		event.preventDefault();
+		const nextItem = items[nextIndex];
+		if (!nextItem) return;
+		focusItem(nextItem, event);
+	};
+	return handleKeyDown;
+};
+//#endregion
+//#region src/components/Dialog/components/ContextMenu.tsx
+var BaseContextMenuButton = ({ children, className, details, hasSubMenu, Icon, label, role = "menuitem", SubmenuIcon = require_useNotificationApi.IconChevronRight, variant, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+	...props,
+	className: (0, clsx.default)("str-chat__context-menu__button", {
+		"str-chat__context-menu__button--with-submenu": hasSubMenu,
+		[`str-chat__context-menu__button--${variant}`]: typeof variant === "string"
+	}, className),
+	role,
+	type: "button",
+	children: [
+		Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "str-chat__context-menu__button__icon" }),
+		label ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__context-menu__button__label",
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__context-menu__button__details",
+			children: details
+		})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__context-menu__button__label",
+			children
+		}),
+		!!hasSubMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuIcon, { className: "str-chat__context-menu__button__submenu-icon" })
+	]
+});
+var UserContextMenuButton = ({ children, className, imageUrl, role = "menuitem", userName, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+	...props,
+	className: (0, clsx.default)("str-chat__context-menu__button str-chat__user-context-menu__button", className),
+	role,
+	type: "button",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+		imageUrl,
+		size: "sm",
+		userName
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "str-chat__context-menu__button__label",
+		children: children ?? userName
+	})]
+});
+var EmojiContextMenuButton = ({ children, className, emoji, label, role = "menuitem", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+	...props,
+	className: (0, clsx.default)("str-chat__context-menu__button str-chat__emoji-context-menu__button", className),
+	role,
+	type: "button",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "str-chat__context-menu__button__emoji str-chat__emoji-item--entity",
+		children: emoji
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "str-chat__context-menu__button__label",
+		children: children ?? label
+	})]
+});
+var ContextMenuButtonWithSubmenu = ({ children, className, Submenu, submenuContainerProps, submenuPlacement = "right-start", submenuRollAxis = "x", ...buttonProps }) => {
+	const { className: submenuClassName, ...submenuContainerRestProps } = submenuContainerProps ?? {};
+	const { registerDialogSubmenu, unregisterDialogSubmenu } = useContextMenuContext();
+	const buttonRef = (0, react.useRef)(null);
+	const [dialogContainer, setDialogContainer] = (0, react.useState)(null);
+	const keepSubmenuOpenFlag = (0, react.useRef)(false);
+	const dialogCloseTimeout = (0, react.useRef)(null);
+	const dialogId = (0, react.useMemo)(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
+	const { dialog, dialogManager } = require_useNotificationApi.useDialogOnNearestManager({ id: dialogId });
+	const dialogIsOpen = require_useNotificationApi.useDialogIsOpen(dialogId, dialogManager?.id);
+	(0, react.useEffect)(() => {
+		if (!dialogIsOpen) return;
+		registerDialogSubmenu();
+		return () => unregisterDialogSubmenu();
+	}, [
+		dialogIsOpen,
+		registerDialogSubmenu,
+		unregisterDialogSubmenu
+	]);
+	const { placement: chosenPlacement, setPopperElement, styles } = useDialogAnchor({
+		offset: 8,
+		open: dialogIsOpen,
+		placement: submenuPlacement,
+		referenceElement: buttonRef.current
+	});
+	const closeDialogLazily = (0, react.useCallback)(() => {
+		if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);
+		dialogCloseTimeout.current = setTimeout(() => {
+			if (keepSubmenuOpenFlag.current) return;
+			dialog.close();
+		}, 100);
+	}, [dialog]);
+	const keepSubmenuOpen = (0, react.useCallback)(() => {
+		keepSubmenuOpenFlag.current = true;
+	}, []);
+	const allowToCloseSubmenu = (0, react.useCallback)(() => {
+		keepSubmenuOpenFlag.current = false;
+	}, []);
+	const closeSubmenu = (0, react.useCallback)(() => {
+		allowToCloseSubmenu();
+		closeDialogLazily();
+	}, [allowToCloseSubmenu, closeDialogLazily]);
+	const handleClose = (0, react.useCallback)((event) => {
+		const parentButton = buttonRef.current;
+		if (!dialogIsOpen || !parentButton) return;
+		event.stopPropagation();
+		closeDialogLazily();
+		parentButton.focus();
+	}, [
+		closeDialogLazily,
+		dialogIsOpen,
+		buttonRef
+	]);
+	const handleFocusParentButton = () => {
+		if (dialogIsOpen) return;
+		dialog.open();
+		keepSubmenuOpen();
+	};
+	(0, react.useEffect)(() => {
+		const parentButton = buttonRef.current;
+		if (!dialogIsOpen || !parentButton) return;
+		const hideOnEscape = (event) => {
+			if (event.key !== "Escape") return;
+			handleClose(event);
+			closeSubmenu();
+		};
+		document.addEventListener("keyup", hideOnEscape, { capture: true });
+		return () => {
+			document.removeEventListener("keyup", hideOnEscape, { capture: true });
+		};
+	}, [
+		dialogIsOpen,
+		handleClose,
+		closeSubmenu
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseContextMenuButton, {
+		"aria-expanded": dialogIsOpen,
+		"aria-haspopup": "menu",
+		className: (0, clsx.default)(className, "str_chat__button-with-submenu", { "str_chat__button-with-submenu--submenu-open": dialogIsOpen }),
+		hasSubMenu: true,
+		onBlur: closeSubmenu,
+		onClick: (event) => {
+			event.stopPropagation();
+			dialog.toggle();
+		},
+		onFocus: handleFocusParentButton,
+		onMouseEnter: handleFocusParentButton,
+		onMouseLeave: closeSubmenu,
+		...buttonProps,
+		ref: buttonRef,
+		children
+	}), dialogIsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("str-chat__context-menu__submenu-container", submenuClassName),
+		"data-str-chat-placement": chosenPlacement,
+		"data-str-chat-roll-axis": submenuRollAxis,
+		onBlur: (event) => {
+			if (event.relatedTarget instanceof Node && dialogContainer?.contains(event.relatedTarget)) return;
+			closeSubmenu();
+		},
+		onFocus: keepSubmenuOpen,
+		onMouseEnter: keepSubmenuOpen,
+		onMouseLeave: closeSubmenu,
+		ref: (element) => {
+			setPopperElement(element);
+			setDialogContainer(element);
+		},
+		style: styles,
+		tabIndex: -1,
+		...submenuContainerRestProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Submenu, {})
+	})] });
+};
+var ContextMenuButton = (props) => {
+	const { Submenu, submenuContainerProps, submenuPlacement, submenuRollAxis, ...buttonProps } = props;
+	if (Submenu) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuButtonWithSubmenu, {
+		...buttonProps,
+		Submenu,
+		submenuContainerProps,
+		submenuPlacement,
+		submenuRollAxis
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseContextMenuButton, { ...buttonProps });
+};
+var ContextMenuBackButton = ({ children, className, role = "menuitem", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+	...props,
+	className: (0, clsx.default)("str-chat__context-menu__back-button", className),
+	role,
+	type: "button",
+	children
+});
+var ContextMenuHeader = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...props,
+	className: (0, clsx.default)("str-chat__context-menu__header", className),
+	children
+});
+var ContextMenuBody = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...props,
+	className: (0, clsx.default)("str-chat__context-menu__body", className),
+	children
+});
+var ContextMenuRoot = react.default.forwardRef(function ContextMenuRoot({ className, role = "menu", ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: (0, clsx.default)("str-chat__context-menu", className),
+		ref,
+		role
+	});
+});
+var DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR = [
+	"[role=\"menuitem\"]:not(:disabled)",
+	"[role=\"menuitemradio\"]:not(:disabled)",
+	"[role=\"menuitemcheckbox\"]:not(:disabled)"
+].join(",");
+var isVisibleContextMenuKeyboardNavigationItem = (item) => {
+	if (item.offsetParent !== null || item.offsetHeight > 0) return true;
+	if (item.hidden) return false;
+	if (item.style.display === "none") return false;
+	return true;
+};
+var getVisibleContextMenuKeyboardNavigationItems = (contextMenuRoot, itemSelector = DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR) => Array.from(contextMenuRoot?.querySelectorAll(itemSelector) ?? []).filter(isVisibleContextMenuKeyboardNavigationItem);
+var createContextMenuFocusRestoreRequest = ({ contextMenuRoot, focusReturnTarget }) => {
+	const target = focusReturnTarget ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null);
+	if (!target) return {
+		index: -1,
+		target: null
+	};
+	return {
+		index: getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot).findIndex((menuItem) => menuItem === target),
+		target
+	};
+};
+var resolveContextMenuFocusRestoreTarget = ({ contextMenuRoot, request }) => {
+	if (!request) return null;
+	if (request.target?.isConnected) return request.target;
+	if (request.index >= 0) return getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot)[request.index] ?? null;
+	return null;
+};
+var ContextMenuContext = react.default.createContext(void 0);
+var useContextMenuContext = () => (0, react.useContext)(ContextMenuContext);
+/**
+* Internal/default content renderer for {@link ContextMenu}.
+*
+* Override this through `ComponentContext.ContextMenuContent` when you need to
+* customize submenu/back navigation behavior while keeping the same anchor/focus
+* handling from `ContextMenu`.
+*/
+function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", children, className, enableAnimations = true, Header, items, ItemsWrapper, keyboardNavigation, menuClassName, onClose, onMenuLevelChange, transitionDirection, ...props }) {
+	const rootLevel = (0, react.useMemo)(() => ({
+		Header,
+		items,
+		ItemsWrapper,
+		menuClassName
+	}), [
+		Header,
+		items,
+		ItemsWrapper,
+		menuClassName
+	]);
+	const [menuStack, setMenuStack] = (0, react.useState)(() => [rootLevel]);
+	const [menuBodyAnimationKey, setMenuBodyAnimationKey] = (0, react.useState)(0);
+	const contextMenuRootRef = (0, react.useRef)(null);
+	const focusRestoreRequestRef = (0, react.useRef)(null);
+	const activeMenu = menuStack[menuStack.length - 1];
+	const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? react.default.Fragment;
+	const closeMenu = (0, react.useCallback)(() => {
+		onClose?.();
+	}, [onClose]);
+	const openSubmenu = (0, react.useCallback)(({ focusReturnTarget, Header, ItemsWrapper: SubmenuItemsWrapper, menuClassName, Submenu }) => {
+		const nextLevel = {
+			focusRestoreRequest: createContextMenuFocusRestoreRequest({
+				contextMenuRoot: contextMenuRootRef.current,
+				focusReturnTarget
+			}),
+			Header,
+			ItemsWrapper: SubmenuItemsWrapper ?? ItemsWrapper,
+			menuClassName,
+			Submenu
+		};
+		setMenuStack((current) => [...current, nextLevel]);
+	}, [ItemsWrapper]);
+	const returnToParentMenu = (0, react.useCallback)(() => {
+		setMenuStack((current) => {
+			if (current.length <= 1) return current;
+			focusRestoreRequestRef.current = current[current.length - 1]?.focusRestoreRequest ?? null;
+			return current.slice(0, -1);
+		});
+	}, []);
+	(0, react.useEffect)(() => {
+		setMenuStack((current) => {
+			if (current.length === 1 && current[0] === rootLevel) return current;
+			return [rootLevel];
+		});
+	}, [rootLevel]);
+	(0, react.useEffect)(() => {
+		onMenuLevelChange?.(menuStack.length);
+	}, [menuStack.length, onMenuLevelChange]);
+	(0, react.useEffect)(() => {
+		const focusRestoreRequest = focusRestoreRequestRef.current;
+		if (!focusRestoreRequest) return;
+		focusRestoreRequestRef.current = null;
+		requestAnimationFrame(() => {
+			resolveContextMenuFocusRestoreTarget({
+				contextMenuRoot: contextMenuRootRef.current,
+				request: focusRestoreRequest
+			})?.focus();
+		});
+	}, [menuStack.length]);
+	(0, react.useEffect)(() => {
+		if (!transitionDirection) return;
+		setMenuBodyAnimationKey((value) => value + 1);
+	}, [transitionDirection, menuStack.length]);
+	const dialogSubmenuOpenCountRef = (0, react.useRef)(0);
+	const registerDialogSubmenu = (0, react.useCallback)(() => {
+		dialogSubmenuOpenCountRef.current += 1;
+	}, []);
+	const unregisterDialogSubmenu = (0, react.useCallback)(() => {
+		dialogSubmenuOpenCountRef.current = Math.max(0, dialogSubmenuOpenCountRef.current - 1);
+	}, []);
+	const rovingFocusKeyDownHandler = (0, react.useMemo)(() => {
+		const itemSelector = keyboardNavigation?.itemSelector ?? DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR;
+		return createRovingFocusKeyDownHandler({ getItems: (event) => getVisibleContextMenuKeyboardNavigationItems(event.currentTarget, itemSelector) });
+	}, [keyboardNavigation]);
+	const escapeConsumedRef = (0, react.useRef)(false);
+	const keyboardNavigationHandler = (0, react.useCallback)((event) => {
+		if (event.key === "Escape") {
+			if (dialogSubmenuOpenCountRef.current > 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (menuStack.length > 1) {
+				escapeConsumedRef.current = true;
+				returnToParentMenu();
+			} else closeMenu();
+			return;
+		}
+		rovingFocusKeyDownHandler(event);
+	}, [
+		closeMenu,
+		menuStack.length,
+		returnToParentMenu,
+		rovingFocusKeyDownHandler
+	]);
+	const suppressEscapeKeyUp = (0, react.useCallback)((event) => {
+		if (event.key === "Escape" && escapeConsumedRef.current) {
+			escapeConsumedRef.current = false;
+			event.stopPropagation();
+		}
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuContext.Provider, {
+		value: {
+			anchorReferenceElement,
+			closeMenu,
+			openSubmenu,
+			registerDialogSubmenu,
+			returnToParentMenu,
+			unregisterDialogSubmenu
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContextMenuRoot, {
+			className: (0, clsx.default)(className, activeMenu.menuClassName),
+			"data-str-chat-enable-animations": enableAnimations,
+			onKeyDownCapture: keyboardNavigationHandler,
+			onKeyUpCapture: suppressEscapeKeyUp,
+			ref: contextMenuRootRef,
+			...props,
+			children: [activeMenu.Header ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContextMenuBackButton, {
+				onClick: returnToParentMenu,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconChevronLeft, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: backLabel })]
+			}) }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuBody, {
+				className: (0, clsx.default)({
+					"str-chat__context-menu__body--submenu-backward": transitionDirection === "backward",
+					"str-chat__context-menu__body--submenu-forward": transitionDirection === "forward"
+				}),
+				children: activeMenu.Submenu ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(activeMenu.Submenu, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Item, {}, `context-menu-item-${index}`)) })
+			}, `context-menu-body-${menuStack.length}-${menuBodyAnimationKey}`)]
+		})
+	});
+}
+/**
+* Contextual actions menu that can be used in two modes:
+*
+* - Anchored dialog mode: pass `id` + `referenceElement` (submenu-aware positioning).
+* - Inline mode: omit `id` and render a plain contextual list.
+*
+* Customization via `ComponentContext`:
+*
+* - `ContextMenu`: replace the whole menu container/behavior.
+* - `ContextMenuContent`: keep default container behavior but customize menu content
+*   rendering (items, submenu transitions, back navigation UI).
+* - To customize outside-click dismissal via `ComponentContext`, provide a custom
+*   `ContextMenu` that sets `closeOnClickOutside`:
+*
+* ```tsx
+* const CustomContextMenu = (props: ContextMenuProps) => (
+*   <ContextMenu {...props} closeOnClickOutside={false} />
+* );
+*
+* <ComponentProvider value={{ ContextMenu: CustomContextMenu }}>
+*   <Chat client={client}>{children}</Chat>
+* </ComponentProvider>
+* ```
+*
+* Example:
+* ```tsx
+* <ComponentProvider
+*   value={{
+*     ContextMenu: MyContextMenu,
+*     ContextMenuContent: MyContextMenuContent,
+*   }}
+* >
+*   <Chat client={client}>{children}</Chat>
+* </ComponentProvider>
+* ```
+*/
+var ContextMenu = (props) => {
+	const { ContextMenuContent: ContextMenuContentComponent = ContextMenuContent } = require_useNotificationApi.useComponentContext();
+	const { allowFlip, closeOnClickOutside, closeTransitionMs = 130, dialogManagerId, focus, id, offset = 8, onMenuLevelChange: onMenuLevelChangeProp, placement, referenceElement, submenuTransitionDurationMs, tabIndex, trapFocus, ...menuProps } = props;
+	const resolvedSubmenuTransitionDurationMs = submenuTransitionDurationMs ?? 460;
+	const isAnchored = id != null;
+	const [menuLevel, setMenuLevel] = (0, react.useState)(1);
+	const [transitionDirection, setTransitionDirection] = (0, react.useState)(void 0);
+	const [contentResetToken, setContentResetToken] = (0, react.useState)(0);
+	const transitionTimeoutRef = (0, react.useRef)(null);
+	const previousMenuLevelRef = (0, react.useRef)(1);
+	const open = require_useNotificationApi.useDialogIsOpen(id ?? "", dialogManagerId);
+	const previousOpenRef = (0, react.useRef)(open);
+	(0, react.useEffect)(() => {
+		if (!isAnchored) return;
+		if (previousOpenRef.current && !open) {
+			setMenuLevel(1);
+			setTransitionDirection(void 0);
+			setContentResetToken((value) => value + 1);
+			previousMenuLevelRef.current = 1;
+			if (transitionTimeoutRef.current) {
+				clearTimeout(transitionTimeoutRef.current);
+				transitionTimeoutRef.current = null;
+			}
+		}
+		previousOpenRef.current = open;
+	}, [isAnchored, open]);
+	(0, react.useEffect)(() => () => {
+		if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+	}, []);
+	const handleMenuLevelChange = (0, react.useCallback)((level) => {
+		if (isAnchored) {
+			const previousLevel = previousMenuLevelRef.current;
+			if (level !== previousLevel) {
+				setTransitionDirection(level > previousLevel ? "forward" : "backward");
+				if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+				transitionTimeoutRef.current = setTimeout(() => {
+					setTransitionDirection(void 0);
+					transitionTimeoutRef.current = null;
+				}, resolvedSubmenuTransitionDurationMs);
+			}
+			previousMenuLevelRef.current = level;
+			setMenuLevel(level);
+			return;
+		}
+		onMenuLevelChangeProp?.(level);
+	}, [
+		isAnchored,
+		onMenuLevelChangeProp,
+		resolvedSubmenuTransitionDurationMs
+	]);
+	const content = /* @__PURE__ */ (0, react.createElement)(ContextMenuContentComponent, {
+		anchorReferenceElement: isAnchored ? referenceElement : void 0,
+		...menuProps,
+		key: `context-menu-content-${contentResetToken}`,
+		onMenuLevelChange: handleMenuLevelChange,
+		transitionDirection
+	});
+	if (isAnchored) {
+		const { backLabel: _b, enableAnimations: _ea, Header: _h, items: _i, ItemsWrapper: _w, keyboardNavigation: _kn, menuClassName: _m, onClose: _c, role: _r, ...anchorDivProps } = menuProps;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogAnchor, {
+			allowFlip,
+			closeOnClickOutside,
+			closeTransitionMs,
+			dialogManagerId,
+			focus,
+			id,
+			offset,
+			placement,
+			referenceElement,
+			tabIndex,
+			trapFocus,
+			updateKey: menuLevel,
+			...anchorDivProps,
+			children: content
+		});
+	}
+	return content;
+};
+//#endregion
+//#region src/components/Dialog/components/Prompt.tsx
+var PromptRoot = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...props,
+	className: (0, clsx.default)("str-chat__prompt", className),
+	children
+});
+var PromptHeader = ({ className, close, description, descriptionId, goBack, LeadingContent, title, titleId, TrailingContent }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { dialogId } = useModalContext();
+	const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } = useAriaIdentifiers(dialogId);
+	const resolvedTitleId = titleId ?? derivedTitleId;
+	const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;
+	const hasDescription = description != null && description !== "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("str-chat__prompt__header", className, {
+			"str-chat__prompt__header--withDescription": hasDescription,
+			"str-chat__prompt__header--withGoBack": goBack
+		}),
+		children: [
+			LeadingContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "str-chat__prompt__header__leading-content",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeadingContent, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("str-chat__prompt__header__title-group"),
+				children: [
+					goBack && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+						appearance: "ghost",
+						"aria-label": t("Go back"),
+						circular: true,
+						className: "str-chat__prompt__header__go-back-button",
+						onClick: goBack,
+						size: "md",
+						variant: "secondary",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconArrowLeft, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "str-chat__prompt__header__title",
+						id: resolvedTitleId,
+						children: title
+					}),
+					hasDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "str-chat__prompt__header__description",
+						id: resolvedDescriptionId,
+						children: description
+					})
+				]
+			}),
+			(close || TrailingContent) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "str-chat__prompt__header__trailing-content",
+				children: [TrailingContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrailingContent, {}), close && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+					appearance: "ghost",
+					"aria-describedby": hasDescription ? resolvedDescriptionId : void 0,
+					"aria-label": typeof title === "string" ? t("Close prompt: {{ title }}", { title }) : t("Close"),
+					circular: true,
+					className: "str-chat__prompt__header__close-button",
+					onClick: close,
+					size: "md",
+					variant: "secondary",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconXmark, {})
+				})]
+			})
+		]
+	});
+};
+var PromptBody = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, clsx.default)("str-chat__prompt__body", className),
+	children
+});
+var PromptFooter = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, clsx.default)("str-chat__prompt__footer", className),
+	children
+});
+var PromptFooterControls = ({ children, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, clsx.default)("str-chat__prompt__footer__controls", className),
+	children
+});
+var PromptFooterControlsButtonSecondary = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+	appearance: "ghost",
+	className: (0, clsx.default)("str-chat__prompt__footer__controls-button", className),
+	size: "md",
+	variant: "secondary",
+	...props
+});
+var PromptFooterControlsButtonPrimary = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+	appearance: "solid",
+	className: (0, clsx.default)("str-chat__prompt__footer__controls-button", className),
+	size: "md",
+	variant: "primary",
+	...props
+});
+var Prompt = {
+	Body: PromptBody,
+	Footer: PromptFooter,
+	FooterControls: PromptFooterControls,
+	FooterControlsButtonPrimary: PromptFooterControlsButtonPrimary,
+	FooterControlsButtonSecondary: PromptFooterControlsButtonSecondary,
+	Header: PromptHeader,
+	Root: PromptRoot
+};
+//#endregion
+//#region src/a11y/hooks/useResolvedModalAriaProps.ts
+/**
+* Resolves modal labeling/description attributes from explicit props first,
+* then from the modal dialog id convention (`${dialogId}-title|description`).
+*
+* Rules:
+* - `aria-labelledby` wins over `aria-label`.
+* - `aria-describedby` defaults to inferred id when explicit value is absent.
+*/
+var useResolvedModalAriaProps = ({ ariaDescribedby, ariaLabel, ariaLabelledby, dialogId }) => {
+	const { descriptionId, titleId } = useAriaIdentifiers(dialogId);
+	return (0, react.useMemo)(() => {
+		const resolvedAriaLabelledby = ariaLabel ? ariaLabelledby : ariaLabelledby ?? titleId;
+		return {
+			"aria-describedby": ariaDescribedby ?? descriptionId,
+			"aria-label": resolvedAriaLabelledby ? void 0 : ariaLabel,
+			"aria-labelledby": resolvedAriaLabelledby
+		};
+	}, [
+		ariaDescribedby,
+		ariaLabel,
+		ariaLabelledby,
+		descriptionId,
+		titleId
+	]);
+};
+//#endregion
+//#region src/components/Modal/GlobalModal.tsx
+var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className, CloseButtonOnOverlay, dialogId, dialogRootProps, onClose, onCloseAttempt, open, role = "dialog" }) => {
+	const generatedDialogId = require_useNotificationApi.useStableId();
+	const resolvedDialogId = dialogId ?? `modal-dialog-${generatedDialogId}`;
+	const dialog = require_useNotificationApi.useModalDialog(resolvedDialogId);
+	const isOpen = require_useNotificationApi.useModalDialogIsOpen(resolvedDialogId);
+	const isTopmost = require_useNotificationApi.useModalDialogIsTopmost(resolvedDialogId);
+	const overlayRef = (0, react.useRef)(null);
+	const closeButtonRef = (0, react.useRef)(null);
+	const closingRef = (0, react.useRef)(false);
+	const { theme } = require_useNotificationApi.useChatContext();
+	const { NotificationList: NotificationList$1 = NotificationList } = require_useNotificationApi.useComponentContext();
+	const { className: dialogRootClassName, onKeyDown: dialogRootOnKeyDown, ...dialogRootPropsRest } = dialogRootProps ?? {};
+	const dialogLabelingBaseId = dialog.id;
+	const resolvedModalAriaProps = useResolvedModalAriaProps({
+		ariaDescribedby,
+		ariaLabel,
+		ariaLabelledby,
+		dialogId: dialogLabelingBaseId
+	});
+	const maybeClose = (0, react.useCallback)((source, event) => {
+		if (onCloseAttempt?.(source, event) !== false) {
+			dialog.close();
+			closingRef.current = true;
+			onClose?.(event);
+		}
+	}, [
+		dialog,
+		onClose,
+		onCloseAttempt
+	]);
+	const modalContextValue = (0, react.useMemo)(() => ({
+		close: () => maybeClose("button", {}),
+		dialogId: dialogLabelingBaseId
+	}), [dialogLabelingBaseId, maybeClose]);
+	const handleOverlayClick = (event) => {
+		if (!isTopmost) return;
+		const target = event.target;
+		if (overlayRef.current === target) maybeClose("overlay", event);
+	};
+	const handleCloseButtonClick = (event) => {
+		if (!isTopmost) return;
+		maybeClose("button", event);
+	};
+	const handleDialogKeyDown = (event) => {
+		dialogRootOnKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Escape" || !isTopmost) return;
+		maybeClose("escape", event);
+	};
+	(0, react.useEffect)(() => {
+		if (!open) {
+			closingRef.current = false;
+			if (isOpen) dialog.close();
+			return;
+		}
+		if (open && !isOpen && !closingRef.current) dialog.open();
+	}, [
+		dialog,
+		isOpen,
+		open
+	]);
+	if (!open || !isOpen) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.DialogPortalEntry, {
+		dialogId: resolvedDialogId,
+		dialogManagerId: require_useNotificationApi.modalDialogManagerId,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalContextProvider, {
+			value: modalContextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("str-chat", theme, "str-chat__modal str-chat-react__modal str-chat__modal--open", className),
+				onClick: handleOverlayClick,
+				ref: overlayRef,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_aria_focus.FocusScope, {
+						autoFocus: isTopmost,
+						contain: isTopmost,
+						restoreFocus: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							...dialogRootPropsRest,
+							"aria-describedby": resolvedModalAriaProps["aria-describedby"],
+							"aria-label": resolvedModalAriaProps["aria-label"],
+							"aria-labelledby": resolvedModalAriaProps["aria-labelledby"],
+							"aria-modal": isTopmost ? "true" : void 0,
+							className: (0, clsx.default)("str-chat__modal__dialog", dialogRootClassName),
+							inert: isTopmost ? void 0 : true,
+							onKeyDown: handleDialogKeyDown,
+							role,
+							tabIndex: isTopmost ? 0 : -1,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.DialogManagerProvider, {
+								id: `${resolvedDialogId}-floating-dialog-manager`,
+								portalDestinationProps: {
+									captureOutsideClicks: true,
+									className: "str-chat__modal__floating-dialog-overlay"
+								},
+								children
+							})
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotificationList$1, {
+						className: "str-chat__modal__notification-list",
+						panel: "modal",
+						verticalAlignment: "top"
+					}),
+					CloseButtonOnOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseButtonOnOverlay, {
+						onClick: handleCloseButtonClick,
+						ref: closeButtonRef
+					})
+				]
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/Message/renderText/remarkPlugins/htmlToTextPlugin.ts
+var visitor = (node) => {
+	if (node.type !== "html") return;
+	node.type = "text";
+};
+var transform = (tree) => {
+	(0, unist_util_visit.visit)(tree, visitor);
+};
+var htmlToTextPlugin = () => transform;
+//#endregion
+//#region src/components/Message/renderText/remarkPlugins/imageToLink.ts
+var text = (value) => ({
+	type: "text",
+	value
+});
+/**
+* Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))
+* to HTML <a href={url}>{url | title | alt}</a>
+*
+* By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.
+* @param getTextLabelFrom
+*/
+function imageToLink({ getTextLabelFrom = "url" } = {}) {
+	return (tree) => {
+		const visitor = (node, index, parent) => {
+			if (parent == null || index == null) return;
+			const link = {
+				children: [text(node[getTextLabelFrom] ?? node.url)],
+				title: node.title ?? node.alt ?? node.url,
+				type: "link",
+				url: node.url
+			};
+			parent.children.splice(index, 1, link);
+			return [unist_util_visit.SKIP, index + 1];
+		};
+		(0, unist_util_visit.visit)(tree, "image", visitor);
+	};
+}
+//#endregion
+//#region src/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.ts
+/**
+* \S → first char must be non-whitespace
+* (?:...)?→ optional middle+closing when length > 1
+* [\s\S]*?→ anything (including newlines), lazy
+* final \S→ last char non-whitespace (only required when there’s more than 1)
+*
+* Matches:
+* ++a++
+* Does not match:
+* ++++
+* ++ ++
+*/
+var INS_REGEX = /\+\+(\S(?:[\s\S]*?\S)?)\+\+/g;
+var IGNORE_NODE_TYPES = new Set([
+	"code",
+	"inlineCode",
+	"link",
+	"linkReference",
+	"definition",
+	"math",
+	"inlineMath"
+]);
+/**
+* Converts MD "++Some text++" to inserted text element rendered in HTML as <ins>Some text</ins>
+* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins
+*/
+var plusPlusToEmphasis = () => {
+	const visitor = (node, index, parent) => {
+		if (IGNORE_NODE_TYPES.has(node.type)) return unist_util_visit.SKIP;
+		if (node.type !== "text" || parent == null || typeof index !== "number") return;
+		const value = node.value;
+		INS_REGEX.lastIndex = 0;
+		let match;
+		let last = 0;
+		const out = [];
+		while (match = INS_REGEX.exec(value)) {
+			const [full, inner] = match;
+			const start = match.index;
+			if (start > last) out.push({
+				type: "text",
+				value: value.slice(last, start)
+			});
+			out.push({
+				children: [{
+					type: "text",
+					value: inner
+				}],
+				data: { hName: "ins" },
+				type: "emphasis"
+			});
+			last = start + full.length;
+		}
+		if (out.length === 0) return;
+		if (last < value.length) out.push({
+			type: "text",
+			value: value.slice(last)
+		});
+		parent.children.splice(index, 1, ...out);
+		return [unist_util_visit.SKIP, index + out.length];
+	};
+	return (tree) => (0, unist_util_visit.visit)(tree, visitor);
+};
+//#endregion
+//#region src/components/Message/Timestamp.tsx
+function Timestamp(props) {
+	const { calendar, calendarFormats, customClass, format, timestamp } = props;
+	const { formatDate } = useMessageContext("MessageTimestamp");
+	const { t, tDateTimeParser } = require_useNotificationApi.useTranslationContext("MessageTimestamp");
+	const normalizedTimestamp = timestamp && require_useNotificationApi.isDate(timestamp) ? timestamp.toISOString() : timestamp;
+	const when = (0, react.useMemo)(() => require_useNotificationApi.getDateString({
+		calendar,
+		calendarFormats,
+		format,
+		formatDate,
+		messageCreatedAt: normalizedTimestamp,
+		t,
+		tDateTimeParser,
+		timestampTranslationKey: "timestamp/MessageTimestamp"
+	}), [
+		calendar,
+		calendarFormats,
+		format,
+		formatDate,
+		normalizedTimestamp,
+		t,
+		tDateTimeParser
+	]);
+	if (!when) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+		className: customClass,
+		dateTime: normalizedTimestamp,
+		title: normalizedTimestamp,
+		children: when
+	});
+}
+//#endregion
+//#region src/components/Message/MessageTimestamp.tsx
+var UnMemoizedMessageTimestamp = (props) => {
+	const { message: propMessage, ...timestampProps } = props;
+	const { message: contextMessage } = useMessageContext("MessageTimestamp");
+	const { Timestamp: Timestamp$1 = Timestamp } = require_useNotificationApi.useComponentContext("MessageTimestamp");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timestamp$1, {
+		timestamp: (propMessage || contextMessage).created_at,
+		...timestampProps
+	});
+};
+var MessageTimestamp = react.default.memo(UnMemoizedMessageTimestamp);
+//#endregion
+//#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 { t } = require_useNotificationApi.useTranslationContext();
+	if (!assetUrl) return null;
+	const href = (0, _braintree_sanitize_url.sanitizeUrl)(assetUrl);
+	if (!href) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		"aria-label": t("aria/Download attachment"),
+		className: (0, clsx.default)("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("Download Attachment"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__button__content",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconDownload, { className: "str-chat__icon str-chat__audio-attachment-download-button__icon" })
+		})
+	});
+};
+//#endregion
+//#region src/components/FileIcon/FileIconSet.tsx
+var BASE_FILE_ICON_CLASSNAME = "str-chat__file-icon";
+var FILE_ICON_GRAPHIC_CLASSNAME = "str-chat__file-icon__graphic";
+/** Add this class (e.g. via className) when hiding the label with CSS to center the icon graphic. */
+var FILE_ICON_NO_LABEL_CLASSNAME = "str-chat__file-icon--no-label";
+/** Rendered dimensions (px) and label position in viewBox coords for consistent spacing. */
+var FILE_ICON_SIZE_CONFIG = {
+	lg: {
+		height: 40,
+		labelX: 16,
+		labelY: 36,
+		width: 32
+	},
+	md: {
+		height: 32,
+		labelX: 16,
+		labelY: 35,
+		width: 26
+	},
+	sm: {
+		height: 24,
+		labelX: 16,
+		labelY: 31.5,
+		width: 19
+	},
+	xl: {
+		height: 48,
+		labelX: 16,
+		labelY: 36,
+		width: 40
+	}
+};
+/** Merge partial overrides with default config. Use for Chat-level fileIconSizeConfig. */
+var mergeFileIconSizeConfig = (overrides) => {
+	if (!overrides) return FILE_ICON_SIZE_CONFIG;
+	return [
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	].reduce((acc, size) => ({
+		...acc,
+		[size]: {
+			...FILE_ICON_SIZE_CONFIG[size],
+			...overrides[size]
+		}
+	}), {});
+};
+var FILE_ICON_VIEWBOX = {
+	height: 40,
+	width: 32
+};
+var FILE_ICON_PAPER_PATH = "M0 4C0 1.79086 1.79086 0 4 0H22.4L32 10V36C32 38.2091 30.2091 40 28 40H4C1.79086 40 0 38.2091 0 36V4Z";
+var FILE_ICON_FOLD_PATH = "M32 10H25.4C23.7431 10 22.4 8.65685 22.4 7V0L32 10Z";
+var FILE_ICON_WITHOUT_CAPTION_SYMBOL_SCALE_X = 32 / 26;
+var FILE_ICON_WITHOUT_CAPTION_SYMBOL_SCALE_Y = 40 / 32;
+var Svg = ({ className, size, sizeConfig, ...props }) => {
+	const dimensions = size ? (sizeConfig ?? FILE_ICON_SIZE_CONFIG)[size] : void 0;
+	const dimensionsStyle = dimensions ? {
+		flexShrink: 0,
+		height: `${dimensions.height}px`,
+		width: `${dimensions.width}px`
+	} : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		height: dimensions?.height,
+		viewBox: `0 0 ${FILE_ICON_VIEWBOX.width} ${FILE_ICON_VIEWBOX.height}`,
+		width: dimensions?.width,
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		className: (0, clsx.default)(BASE_FILE_ICON_CLASSNAME, { [`${BASE_FILE_ICON_CLASSNAME}--size-${size}`]: size }, className),
+		style: {
+			...dimensionsStyle,
+			...props.style
+		}
+	});
+};
+var FileIconLabel = ({ label, size, sizeConfig }) => {
+	const config = size ? (sizeConfig ?? FILE_ICON_SIZE_CONFIG)[size] : {
+		labelX: 16,
+		labelY: 33
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+		className: "str-chat__file-icon__label",
+		x: config.labelX,
+		y: config.labelY,
+		children: label
+	});
+};
+var TEXT_SYMBOLS = {
+	withCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "white",
+			height: "1.6",
+			rx: "0.8",
+			width: "14.4",
+			x: "8",
+			y: "12.2"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "white",
+			height: "1.6",
+			rx: "0.8",
+			width: "14.4",
+			x: "8",
+			y: "20.2"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "white",
+			height: "1.6",
+			rx: "0.8",
+			width: "9.6",
+			x: "8",
+			y: "16.2"
+		})
+	] }),
+	withoutCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "white",
+			height: "1.4",
+			rx: "0.7",
+			width: "12.6",
+			x: "6",
+			y: "14.8"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "white",
+			height: "1.4",
+			rx: "0.7",
+			width: "12.6",
+			x: "6",
+			y: "21.8"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "white",
+			height: "1.4",
+			rx: "0.7",
+			width: "8.4",
+			x: "6",
+			y: "18.3"
+		})
+	] })
+};
+var OTHER_SYMBOLS = {
+	withCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "white",
+			height: "1.6",
+			rx: "0.8",
+			width: "14.4",
+			x: "8",
+			y: "13.2"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "white",
+			height: "1.6",
+			rx: "0.8",
+			width: "14.4",
+			x: "8",
+			y: "21.2"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "white",
+			height: "1.6",
+			rx: "0.8",
+			width: "9.6",
+			x: "8",
+			y: "17.2"
+		})
+	] }),
+	withoutCaption: TEXT_SYMBOLS.withoutCaption
+};
+var CODE_SYMBOLS = {
+	withCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M14.5 22.5L17.5 11.5M20.1666 14.1667L21.9732 16.0862C22.4564 16.5996 22.4564 17.4004 21.9732 17.9138L20.1666 19.8333M11.8333 19.8333L10.0267 17.9138C9.54351 17.4004 9.54351 16.5996 10.0267 16.0862L11.8333 14.1667",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.2"
+	}),
+	withoutCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M11.6876 23.8125L14.3126 14.1875M16.646 16.5208L18.2267 18.2004C18.6495 18.6496 18.6495 19.3503 18.2267 19.7996L16.646 21.4792M9.3543 21.4792L7.77352 19.7996C7.35072 19.3503 7.35072 18.6496 7.77352 18.2004L9.3543 16.5208",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.33333"
+	})
+};
+var AUDIO_SYMBOLS = {
+	withCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M20.5 15.5V18.5M22.5 14.5V19.5M13.5 19.5H10.5C10.3674 19.5 10.2402 19.4473 10.1464 19.3536C10.0527 19.2598 10 19.1326 10 19V15C10 14.8674 10.0527 14.7402 10.1464 14.6464C10.2402 14.5527 10.3674 14.5 10.5 14.5H13.5L18 11V23L13.5 19.5Z",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.2"
+	}),
+	withoutCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M17.5 17.5V20.5M19.5 16.5V21.5M10.5 21.5H7.5C7.36739 21.5 7.24021 21.4473 7.14645 21.3536C7.05268 21.2598 7 21.1326 7 21V17C7 16.8674 7.05268 16.7402 7.14645 16.6464C7.24021 16.5527 7.36739 16.5 7.5 16.5H10.5L15 13V25L10.5 21.5Z",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.33333"
+	})
+};
+var PRESENTATION_SYMBOLS = {
+	withCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M12.5 15.5H19.5M16 17.5V22.5M14 22.5H18M9.49999 17.5C9.41472 17.5001 9.33085 17.4783 9.25635 17.4368C9.18185 17.3953 9.1192 17.3355 9.07436 17.263C9.02952 17.1904 9.00397 17.1076 9.00014 17.0224C8.99631 16.9373 9.01433 16.8525 9.05249 16.7762L11.5525 11.7763C11.5941 11.6932 11.6579 11.6233 11.737 11.5745C11.816 11.5257 11.9071 11.4999 12 11.5H20C20.0929 11.4999 20.184 11.5257 20.263 11.5745C20.342 11.6233 20.4059 11.6932 20.4475 11.7763L22.9475 16.7762C22.9857 16.8525 23.0037 16.9373 22.9998 17.0224C22.996 17.1076 22.9705 17.1904 22.9256 17.263C22.8808 17.3355 22.8181 17.3953 22.7436 17.4368C22.6691 17.4783 22.5853 17.5001 22.5 17.5H9.49999Z",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.2"
+	}),
+	withoutCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M9.49999 17.5H16.5M13 19.5V24.5M11 24.5H15M6.49999 19.5C6.41472 19.5001 6.33085 19.4783 6.25635 19.4368C6.18185 19.3953 6.11921 19.3355 6.07436 19.263C6.02952 19.1904 6.00397 19.1076 6.00014 19.0224C5.99631 18.9373 6.01433 18.8525 6.05249 18.7763L8.55249 13.7763C8.59406 13.6932 8.65795 13.6233 8.73699 13.5745C8.81603 13.5257 8.9071 13.4999 8.99999 13.5H17C17.0929 13.4999 17.184 13.5257 17.263 13.5745C17.342 13.6233 17.4059 13.6932 17.4475 13.7763L19.9475 18.7763C19.9857 18.8525 20.0037 18.9373 19.9998 19.0224C19.996 19.1076 19.9705 19.1904 19.9256 19.263C19.8808 19.3355 19.8181 19.3953 19.7436 19.4368C19.6691 19.4783 19.5853 19.5001 19.5 19.5H6.49999Z",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.33333"
+	})
+};
+var SPREADSHEET_SYMBOLS = {
+	withCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M10 15.5H22M10 18.5H22M13.5 15.5V21.5M10 12.5H22V21C22 21.1326 21.9473 21.2598 21.8536 21.3536C21.7598 21.4473 21.6326 21.5 21.5 21.5H10.5C10.3674 21.5 10.2402 21.4473 10.1464 21.3536C10.0527 21.2598 10 21.1326 10 21V12.5Z",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.5"
+	}),
+	withoutCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M7 17.5H19M7 20.5H19M10.5 17.5V23.5M7 14.5H19V23C19 23.1326 18.9473 23.2598 18.8536 23.3536C18.7598 23.4473 18.6326 23.5 18.5 23.5H7.5C7.36739 23.5 7.24021 23.4473 7.14645 23.3536C7.05268 23.2598 7 23.1326 7 23V14.5Z",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.2"
+	})
+};
+var COMPRESSION_SYMBOLS = {
+	withCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		clipRule: "evenodd",
+		d: "M9.41177 0H7.52942V2H9.41177V4H7.52942V6H9.41177V8H7.52942V10H9.41177V12H7.52942V14H9.41177V12H11.2941V10H9.41177V8H11.2941V6H9.41177V4H11.2941V2H9.41177V0ZM7.52942 17C7.52942 16.4477 7.9508 16 8.4706 16H10.3529C10.8727 16 11.2941 16.4477 11.2941 17V23C11.2941 23.5523 10.8727 24 10.3529 24H8.4706C7.9508 24 7.52942 23.5523 7.52942 23V17ZM8.4706 23V20H10.3529V23H8.4706Z",
+		fill: "white",
+		fillRule: "evenodd"
+	}),
+	withoutCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		clipRule: "evenodd",
+		d: "M8.17031 0H6.11768V2.14737H8.17031V4.29474H6.11768V6.4421H8.17031V8.58947H6.11768V10.7368H8.17031V12.8842H6.11768V15.0316H8.17031V12.8842H10.2229V10.7368H8.17031V8.58947H10.2229V6.4421H8.17031V4.29474H10.2229V2.14737H8.17031V0ZM6.11768 18.2526C6.11768 17.6597 6.57717 17.1789 7.14399 17.1789H9.19662C9.76344 17.1789 10.2229 17.6597 10.2229 18.2526V24.6947C10.2229 25.2877 9.76344 25.7684 9.19662 25.7684H7.14399C6.57717 25.7684 6.11768 25.2877 6.11768 24.6947V18.2526ZM7.14399 24.6947V21.4737H9.19662V24.6947H7.14399Z",
+		fill: "white",
+		fillRule: "evenodd"
+	})
+};
+var VIDEO_SYMBOLS = {
+	withCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M20.5 16L23.5 14V20L20.5 18M10 13H20C20.2761 13 20.5 13.2239 20.5 13.5V20.5C20.5 20.7761 20.2761 21 20 21H10C9.72386 21 9.5 20.7761 9.5 20.5V13.5C9.5 13.2239 9.72386 13 10 13Z",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.2"
+	}),
+	withoutCaption: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M17.5001 18L20.5001 16V22L17.5001 20M7.00012 15H17.0001C17.2763 15 17.5001 15.2239 17.5001 15.5V22.5C17.5001 22.7761 17.2763 23 17.0001 23H7.00012C6.72398 23 6.50012 22.7761 6.50012 22.5V15.5C6.50012 15.2239 6.72398 15 7.00012 15Z",
+		stroke: "white",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "1.33333"
+	})
+};
+var StandardFileTypeIcon = ({ className, color, fileTypeClassName, label, size, sizeConfig, symbols, ...props }) => {
+	const renderLabel = !!label;
+	const resolvedLabel = renderLabel ? label : void 0;
+	const symbolVariant = renderLabel ? "withCaption" : "withoutCaption";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Svg, {
+		...props,
+		className: (0, clsx.default)(fileTypeClassName, className),
+		size,
+		sizeConfig,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+			className: FILE_ICON_GRAPHIC_CLASSNAME,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: FILE_ICON_PAPER_PATH,
+					fill: color
+				}),
+				renderLabel ? symbols[symbolVariant] : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+					transform: `scale(${FILE_ICON_WITHOUT_CAPTION_SYMBOL_SCALE_X} ${FILE_ICON_WITHOUT_CAPTION_SYMBOL_SCALE_Y})`,
+					children: symbols[symbolVariant]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: FILE_ICON_FOLD_PATH,
+					fill: "white",
+					opacity: "0.5"
+				})
+			]
+		}), resolvedLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIconLabel, {
+			label: resolvedLabel,
+			size,
+			sizeConfig
+		})]
+	});
+};
+var PDF_SMALL_SYMBOL = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+	d: "M20.7533 19.5337C20.28 19.037 19.3093 18.7537 17.9373 18.7537C17.204 18.7537 16.3526 18.8244 15.43 18.9897C14.8647 18.4461 14.3499 17.8523 13.892 17.2157C13.5373 16.7424 13.2293 16.2224 12.9453 15.725C13.49 14.069 13.75 12.7204 13.75 11.7504C13.75 10.6624 13.348 9.52637 12.1886 9.52637C11.834 9.52637 11.4786 9.7397 11.2893 10.047C10.7693 10.9697 11.006 12.9804 11.9046 14.9677C11.5664 15.984 11.1876 16.9863 10.7693 17.9724C10.3906 18.8717 9.96465 19.7944 9.49131 20.6457C6.88931 21.687 5.20931 22.8937 5.01998 23.839C4.94931 24.1944 5.06731 24.5257 5.32798 24.7857C5.42265 24.857 5.75398 25.141 6.32131 25.141C8.04798 25.141 9.86998 22.349 10.7926 20.6697C11.5026 20.433 12.2126 20.1964 12.922 20.007C13.6704 19.8038 14.4284 19.638 15.1933 19.5104C17.0146 21.1424 18.6233 21.403 19.428 21.403C20.4213 21.403 20.7766 21.0004 20.8946 20.6697C21.108 20.243 20.966 19.7704 20.7533 19.5337ZM19.8066 20.2204C19.7353 20.575 19.38 20.8117 18.884 20.8117C18.742 20.8117 18.624 20.7877 18.4813 20.7644C17.5826 20.551 16.7306 20.1017 15.8793 19.3917C16.5357 19.2807 17.2003 19.2254 17.866 19.2264C18.3633 19.2264 18.7893 19.2497 19.0726 19.321C19.404 19.3917 19.9246 19.605 19.806 20.2197L19.8066 20.2204ZM14.7906 19.1084C14.1305 19.2321 13.4755 19.382 12.8273 19.5577C12.262 19.7047 11.7017 19.8703 11.1473 20.0544C11.4355 19.4962 11.7039 18.9281 11.952 18.351C12.236 17.6884 12.472 17.0024 12.7093 16.3637C12.9453 16.7657 13.206 17.1684 13.466 17.523C13.8911 18.065 14.3329 18.5937 14.7906 19.1084ZM11.692 10.307C11.7338 10.2232 11.7978 10.1525 11.877 10.1025C11.9563 10.0526 12.0477 10.0253 12.1413 10.0237C12.638 10.0237 12.7326 10.591 12.7326 11.041C12.7326 11.7977 12.496 12.957 12.094 14.2817C11.4073 12.4364 11.3606 10.899 11.692 10.307ZM9.08931 21.3317C7.88265 23.319 6.72331 24.549 6.01398 24.549C5.88599 24.5498 5.76132 24.5083 5.65931 24.431C5.51731 24.289 5.44598 24.1237 5.49331 23.9344C5.63531 23.2244 7.00731 22.231 9.08931 21.3317Z",
+	fill: "white"
+});
+var PDF_LEGACY_SYMBOL = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+	d: "M23.7533 19.2C23.28 18.7033 22.3093 18.42 20.9373 18.42C20.204 18.42 19.3526 18.4906 18.43 18.656C17.8647 18.1124 17.3499 17.5186 16.892 16.882C16.5373 16.4086 16.2293 15.8886 15.9453 15.3913C16.49 13.7353 16.75 12.3866 16.75 11.4166C16.75 10.3286 16.348 9.19263 15.1886 9.19263C14.834 9.19263 14.4786 9.40596 14.2893 9.71329C13.7693 10.636 14.006 12.6466 14.9046 14.634C14.5664 15.6502 14.1877 16.6526 13.7693 17.6386C13.3906 18.538 12.9646 19.4606 12.4913 20.312C9.88931 21.3533 8.20931 22.56 8.01998 23.5053C7.94931 23.8606 8.06731 24.192 8.32798 24.452C8.42265 24.5233 8.75398 24.8073 9.32131 24.8073C11.048 24.8073 12.87 22.0153 13.7926 20.336C14.5026 20.0993 15.2126 19.8626 15.922 19.6733C16.6704 19.4701 17.4284 19.3043 18.1933 19.1766C20.0146 20.8086 21.6233 21.0693 22.428 21.0693C23.4213 21.0693 23.7766 20.6666 23.8946 20.336C24.108 19.9093 23.966 19.4366 23.7533 19.2ZM22.8066 19.8866C22.7353 20.2413 22.38 20.478 21.884 20.478C21.742 20.478 21.624 20.454 21.4813 20.4306C20.5826 20.2173 19.7306 19.768 18.8793 19.058C19.5357 18.947 20.2003 18.8917 20.866 18.8926C21.3633 18.8926 21.7893 18.916 22.0726 18.9873C22.404 19.058 22.9246 19.2713 22.806 19.886L22.8066 19.8866ZM17.7906 18.7746C17.1305 18.8983 16.4755 19.0482 15.8273 19.224C15.262 19.3709 14.7017 19.5366 14.1473 19.7206C14.4355 19.1625 14.7039 18.5944 14.952 18.0173C15.236 17.3546 15.472 16.6686 15.7093 16.03C15.9453 16.432 16.206 16.8346 16.466 17.1893C16.8911 17.7313 17.3329 18.26 17.7906 18.7746ZM14.692 9.97329C14.7338 9.88949 14.7978 9.81875 14.877 9.7688C14.9563 9.71884 15.0477 9.69157 15.1413 9.68996C15.638 9.68996 15.7326 10.2573 15.7326 10.7073C15.7326 11.464 15.496 12.6233 15.094 13.948C14.4073 12.1026 14.3606 10.5653 14.692 9.97329ZM12.0893 20.998C10.8826 22.9853 9.72331 24.2153 9.01398 24.2153C8.88599 24.2161 8.76132 24.1746 8.65931 24.0973C8.51731 23.9553 8.44598 23.79 8.49331 23.6006C8.63531 22.8906 10.0073 21.8973 12.0893 20.998Z",
+	fill: "white"
+}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+	d: "M9.74219 34.4258V28.6992H10.8828V29.3633H10.9531C11.0286 29.2096 11.1276 29.0781 11.25 28.9688C11.375 28.8594 11.5208 28.776 11.6875 28.7188C11.8542 28.6589 12.0391 28.6289 12.2422 28.6289C12.6016 28.6289 12.9115 28.7188 13.1719 28.8984C13.4323 29.0781 13.6328 29.3333 13.7734 29.6641C13.9167 29.9922 13.9883 30.3854 13.9883 30.8438V30.8516C13.9883 31.3125 13.918 31.7083 13.7773 32.0391C13.6367 32.3698 13.4362 32.6237 13.1758 32.8008C12.9154 32.9779 12.6042 33.0664 12.2422 33.0664C12.0443 33.0664 11.8607 33.0365 11.6914 32.9766C11.5247 32.9141 11.3776 32.8268 11.25 32.7148C11.125 32.6029 11.026 32.4688 10.9531 32.3125H10.8828V34.4258H9.74219ZM11.8516 32.1211C12.0547 32.1211 12.2279 32.0703 12.3711 31.9688C12.5169 31.8672 12.6289 31.7214 12.707 31.5312C12.7878 31.3411 12.8281 31.1146 12.8281 30.8516V30.8438C12.8281 30.5807 12.7878 30.3542 12.707 30.1641C12.6289 29.974 12.5169 29.8281 12.3711 29.7266C12.2279 29.625 12.0547 29.5742 11.8516 29.5742C11.651 29.5742 11.4766 29.625 11.3281 29.7266C11.1823 29.8281 11.069 29.974 10.9883 30.1641C10.9102 30.3516 10.8711 30.5781 10.8711 30.8438V30.8516C10.8711 31.112 10.9115 31.3385 10.9922 31.5312C11.0729 31.7214 11.1862 31.8672 11.332 31.9688C11.4805 32.0703 11.6536 32.1211 11.8516 32.1211ZM16.457 33.0664C16.1003 33.0664 15.7904 32.9779 15.5273 32.8008C15.2669 32.6211 15.0651 32.3659 14.9219 32.0352C14.7812 31.7044 14.7109 31.3099 14.7109 30.8516V30.8438C14.7109 30.3828 14.7799 29.987 14.918 29.6562C15.0586 29.3255 15.2591 29.0716 15.5195 28.8945C15.7799 28.7174 16.0924 28.6289 16.457 28.6289C16.6523 28.6289 16.8333 28.6602 17 28.7227C17.1693 28.7826 17.3177 28.8685 17.4453 28.9805C17.5729 29.0924 17.6719 29.2279 17.7422 29.3867H17.8125V27.0547H18.9531V33H17.8125V32.332H17.7422C17.6693 32.4857 17.5703 32.6172 17.4453 32.7266C17.3229 32.8359 17.1784 32.9206 17.0117 32.9805C16.8451 33.0378 16.6602 33.0664 16.457 33.0664ZM16.8438 32.1211C17.0469 32.1211 17.2214 32.0703 17.3672 31.9688C17.513 31.8672 17.625 31.7214 17.7031 31.5312C17.7839 31.3411 17.8242 31.1159 17.8242 30.8555V30.8477C17.8242 30.582 17.7839 30.3555 17.7031 30.168C17.625 29.9779 17.5117 29.832 17.3633 29.7305C17.2174 29.6263 17.0443 29.5742 16.8438 29.5742C16.6458 29.5742 16.4727 29.6263 16.3242 29.7305C16.1784 29.832 16.0664 29.9779 15.9883 30.168C15.9102 30.3555 15.8711 30.5807 15.8711 30.8438V30.8516C15.8711 31.1146 15.9102 31.3411 15.9883 31.5312C16.0664 31.7214 16.1784 31.8672 16.3242 31.9688C16.4701 32.0703 16.6432 32.1211 16.8438 32.1211ZM20.4648 33V29.5586H19.7695V28.6992H20.4648V28.2969C20.4648 28.0104 20.5156 27.7721 20.6172 27.582C20.7188 27.3919 20.8776 27.25 21.0938 27.1562C21.3125 27.0599 21.5951 27.0117 21.9414 27.0117C22.0586 27.0117 22.1641 27.0156 22.2578 27.0234C22.3542 27.0312 22.444 27.0417 22.5273 27.0547V27.8164C22.4909 27.8086 22.4427 27.8034 22.3828 27.8008C22.3255 27.7956 22.2604 27.793 22.1875 27.793C21.9661 27.793 21.8099 27.8438 21.7188 27.9453C21.6276 28.0443 21.582 28.1875 21.582 28.375V28.6992H22.4922V29.5586H21.6055V33H20.4648Z",
+	fill: "white"
+})] });
+var FilePdfIcon = ({ className, label, size, sizeConfig, ...props }) => {
+	const useLegacyPdfMarkup = !!label;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Svg, {
+		...props,
+		className: (0, clsx.default)("str-chat__file-icon--pdf", useLegacyPdfMarkup && "str-chat__file-icon--no-label", className),
+		size,
+		sizeConfig,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+			className: FILE_ICON_GRAPHIC_CLASSNAME,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: FILE_ICON_PAPER_PATH,
+					fill: "#E71A01"
+				}),
+				useLegacyPdfMarkup ? PDF_LEGACY_SYMBOL : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+					transform: `scale(${FILE_ICON_WITHOUT_CAPTION_SYMBOL_SCALE_X} ${FILE_ICON_WITHOUT_CAPTION_SYMBOL_SCALE_Y})`,
+					children: PDF_SMALL_SYMBOL
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: FILE_ICON_FOLD_PATH,
+					fill: "white",
+					opacity: "0.5"
+				})
+			]
+		})
+	});
+};
+var FileWordIcon = ({ className, label, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardFileTypeIcon, {
+	...props,
+	className,
+	color: "#3375E2",
+	fileTypeClassName: "str-chat__file-icon--doc",
+	label,
+	symbols: TEXT_SYMBOLS
+});
+var FilePowerPointIcon = ({ className, label, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardFileTypeIcon, {
+	...props,
+	className,
+	color: "#D14423",
+	fileTypeClassName: "str-chat__file-icon--ppt",
+	label,
+	symbols: PRESENTATION_SYMBOLS
+});
+var FileExcelIcon = ({ className = "", label, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardFileTypeIcon, {
+	...props,
+	className,
+	color: "#0C864B",
+	fileTypeClassName: "str-chat__file-icon--xls",
+	label,
+	symbols: SPREADSHEET_SYMBOLS
+});
+var FileArchiveIcon = ({ className = "", label = "", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardFileTypeIcon, {
+	...props,
+	className,
+	color: "#E59E34",
+	fileTypeClassName: "str-chat__file-icon--compressed",
+	label,
+	symbols: COMPRESSION_SYMBOLS
+});
+var FileCodeIcon = ({ className = "", label, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardFileTypeIcon, {
+	...props,
+	className,
+	color: "#00ACA1",
+	fileTypeClassName: "str-chat__file-icon--code",
+	label,
+	symbols: CODE_SYMBOLS
+});
+var FileAudioIcon = ({ className = "", label, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardFileTypeIcon, {
+	...props,
+	className,
+	color: "#2727B0",
+	fileTypeClassName: "str-chat__file-icon--audio",
+	label,
+	symbols: AUDIO_SYMBOLS
+});
+var FileVideoIcon = ({ className = "", label, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardFileTypeIcon, {
+	...props,
+	className,
+	color: "#A847B7",
+	fileTypeClassName: "str-chat__file-icon--video",
+	label,
+	symbols: VIDEO_SYMBOLS
+});
+var FileFallbackIcon = ({ className = "", label = "", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandardFileTypeIcon, {
+	...props,
+	className,
+	color: "#888888",
+	fileTypeClassName: "str-chat__file-icon--other",
+	label,
+	symbols: OTHER_SYMBOLS
+});
+//#endregion
+//#region src/components/FileIcon/mimeTypes.ts
+var wordMimeTypes = [
+	"application/msword",
+	"application/msword-template",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.template",
+	"application/vnd.ms-word.document.macroEnabled.12",
+	"application/vnd.ms-word.template.macroEnabled.12",
+	"application/vnd.oasis.opendocument.text",
+	"application/vnd.oasis.opendocument.text-template",
+	"application/vnd.oasis.opendocument.text-flat-xml"
+];
+var excelMimeTypes = [
+	"text/csv",
+	"application/vnd.ms-excel",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.template",
+	"application/vnd.ms-excel.sheet.macroEnabled.12",
+	"application/vnd.ms-excel.template.macroEnabled.12",
+	"application/vnd.ms-excel.addin.macroEnabled.12",
+	"application/vnd.ms-excel.addin.macroEnabled.12",
+	"application/vnd.oasis.opendocument.spreadsheet",
+	"application/vnd.oasis.opendocument.spreadsheet-template",
+	"application/vnd.oasis.opendocument.spreadsheet-flat-xml"
+];
+var powerpointMimeTypes = [
+	"application/vnd.ms-powerpoint",
+	"application/vnd.openxmlformats-officedocument.presentationml.presentation",
+	"application/vnd.openxmlformats-officedocument.presentationml.template",
+	"application/vnd.openxmlformats-officedocument.presentationml.slideshow",
+	"application/vnd.ms-powerpoint.addin.macroEnabled.12",
+	"application/vnd.ms-powerpoint.presentation.macroEnabled.12",
+	"application/vnd.ms-powerpoint.template.macroEnabled.12",
+	"application/vnd.ms-powerpoint.slideshow.macroEnabled.12",
+	"application/vnd.oasis.opendocument.presentation",
+	"application/vnd.oasis.opendocument.presentation-template",
+	"application/vnd.oasis.opendocument.presentation-flat-xml"
+];
+var archiveFileTypes = [
+	"application/zip",
+	"application/x-7z-compressed",
+	"application/x-archive",
+	"application/x-tar",
+	"application/gzip",
+	"application/x-compress",
+	"application/x-bzip",
+	"application/x-lzip",
+	"application/x-lz4",
+	"application/x-lzma",
+	"application/x-lzop",
+	"application/x-xz",
+	"application/x-webarchive",
+	"application/vnd.rar"
+];
+var codeFileTypes = [
+	"text/html",
+	"text/css",
+	"application/x-javascript",
+	"text/javascript",
+	"application/json",
+	"text/x-python",
+	"text/x-go",
+	"text/x-csrc",
+	"text/x-c++src",
+	"application/x-ruby",
+	"text/rust",
+	"text/x-java",
+	"application/x-php",
+	"text/x-csharp",
+	"text/x-scala",
+	"text/x-erlang",
+	"application/x-shellscript"
+];
+var mimeTypeToExtensionMap = {
+	"application/epub+zip": "epub",
+	"application/gzip": "gz",
+	"application/java-archive": "jar",
+	"application/json": "json",
+	"application/ld+json": "jsonld",
+	"application/msword": "doc",
+	"application/msword-template": "dot",
+	"application/octet-stream": "bin",
+	"application/ogg": "ogx",
+	"application/pdf": "pdf",
+	"application/postscript": "ps",
+	"application/rtf": "rtf",
+	"application/vnd.amazon.ebook": "azw",
+	"application/vnd.apple.installer+xml": "mpkg",
+	"application/vnd.mozilla.xul+xml": "xul",
+	"application/vnd.ms-excel": "xls",
+	"application/vnd.ms-excel.addin.macroEnabled.12": "xlam",
+	"application/vnd.ms-excel.sheet.macroEnabled.12": "xlsm",
+	"application/vnd.ms-excel.template.macroEnabled.12": "xltm",
+	"application/vnd.ms-fontobject": "eot",
+	"application/vnd.ms-powerpoint": "ppt",
+	"application/vnd.ms-powerpoint.addin.macroEnabled.12": "ppam",
+	"application/vnd.ms-powerpoint.presentation.macroEnabled.12": "pptm",
+	"application/vnd.ms-powerpoint.slideshow.macroEnabled.12": "ppsm",
+	"application/vnd.ms-powerpoint.template.macroEnabled.12": "potm",
+	"application/vnd.ms-word.document.macroEnabled.12": "docm",
+	"application/vnd.ms-word.template.macroEnabled.12": "dotm",
+	"application/vnd.oasis.opendocument.presentation": "odp",
+	"application/vnd.oasis.opendocument.presentation-flat-xml": "fodp",
+	"application/vnd.oasis.opendocument.presentation-template": "otp",
+	"application/vnd.oasis.opendocument.spreadsheet": "ods",
+	"application/vnd.oasis.opendocument.spreadsheet-flat-xml": "fods",
+	"application/vnd.oasis.opendocument.spreadsheet-template": "ots",
+	"application/vnd.oasis.opendocument.text": "odt",
+	"application/vnd.oasis.opendocument.text-flat-xml": "fodt",
+	"application/vnd.oasis.opendocument.text-template": "ott",
+	"application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx",
+	"application/vnd.openxmlformats-officedocument.presentationml.slideshow": "ppsx",
+	"application/vnd.openxmlformats-officedocument.presentationml.template": "potx",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.template": "xltx",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.template": "dotx",
+	"application/vnd.rar": "rar",
+	"application/vnd.visio": "vsd",
+	"application/wasm": "wasm",
+	"application/x-7z-compressed": "7z",
+	"application/x-abiword": "abw",
+	"application/x-archive": "ar",
+	"application/x-bzip": "bz",
+	"application/x-bzip2": "bz2",
+	"application/x-cdf": "cda",
+	"application/x-compress": "Z",
+	"application/x-csh": "csh",
+	"application/x-dosexec": "exe",
+	"application/x-freearc": "arc",
+	"application/x-httpd-php": "php",
+	"application/x-iso9660-image": "iso",
+	"application/x-javascript": "js",
+	"application/x-lz4": "lz4",
+	"application/x-lzip": "lz",
+	"application/x-lzma": "lzma",
+	"application/x-lzop": "lzo",
+	"application/x-mobipocket-ebook": "mobi",
+	"application/x-msdownload": "exe",
+	"application/x-perl": "pl",
+	"application/x-php": "php",
+	"application/x-rar-compressed": "rar",
+	"application/x-ruby": "rb",
+	"application/x-sh": "sh",
+	"application/x-shellscript": "sh",
+	"application/x-shockwave-flash": "swf",
+	"application/x-sql": "sql",
+	"application/x-stuffit": "sit",
+	"application/x-tar": "tar",
+	"application/x-webarchive": "war",
+	"application/x-xz": "xz",
+	"application/x-yaml": "yaml",
+	"application/xhtml+xml": "xhtml",
+	"application/xml": "xml",
+	"application/zip": "zip",
+	"audio/aac": "aac",
+	"audio/flac": "flac",
+	"audio/midi": "midi",
+	"audio/mp4": "m4a",
+	"audio/mpeg": "mp3",
+	"audio/ogg": "oga",
+	"audio/opus": "opus",
+	"audio/wav": "wav",
+	"audio/webm": "weba",
+	"audio/x-aiff": "aiff",
+	"audio/x-m4a": "m4a",
+	"audio/x-midi": "midi",
+	"audio/x-ms-wma": "wma",
+	"audio/x-wav": "wav",
+	"font/otf": "otf",
+	"font/ttf": "ttf",
+	"font/woff": "woff",
+	"font/woff2": "woff2",
+	"image/apng": "apng",
+	"image/avif": "avif",
+	"image/bmp": "bmp",
+	"image/gif": "gif",
+	"image/heic": "heic",
+	"image/heif": "heif",
+	"image/jpeg": "jpg",
+	"image/png": "png",
+	"image/svg+xml": "svg",
+	"image/tiff": "tiff",
+	"image/vnd.microsoft.icon": "ico",
+	"image/webp": "webp",
+	"image/x-icon": "ico",
+	"text/calendar": "ics",
+	"text/css": "css",
+	"text/csv": "csv",
+	"text/html": "html",
+	"text/javascript": "js",
+	"text/markdown": "md",
+	"text/plain": "txt",
+	"text/rtf": "rtf",
+	"text/rust": "rs",
+	"text/tab-separated-values": "tsv",
+	"text/vcard": "vcf",
+	"text/x-c": "c",
+	"text/x-c++src": "cpp",
+	"text/x-csharp": "cs",
+	"text/x-csrc": "c",
+	"text/x-diff": "diff",
+	"text/x-erlang": "erl",
+	"text/x-go": "go",
+	"text/x-java": "java",
+	"text/x-java-source": "java",
+	"text/x-kotlin": "kt",
+	"text/x-lua": "lua",
+	"text/x-markdown": "md",
+	"text/x-objectivec": "m",
+	"text/x-pascal": "pas",
+	"text/x-perl": "pl",
+	"text/x-python": "py",
+	"text/x-ruby": "rb",
+	"text/x-rust": "rs",
+	"text/x-scala": "scala",
+	"text/x-sh": "sh",
+	"text/x-shellscript": "sh",
+	"text/x-sql": "sql",
+	"text/x-swift": "swift",
+	"text/x-typescript": "ts",
+	"text/x-yaml": "yaml",
+	"text/xml": "xml",
+	"text/yaml": "yaml",
+	"video/3gpp": "3gp",
+	"video/3gpp2": "3g2",
+	"video/mp2t": "ts",
+	"video/mp4": "mp4",
+	"video/mpeg": "mpeg",
+	"video/ogg": "ogv",
+	"video/quicktime": "mov",
+	"video/webm": "webm",
+	"video/x-flv": "flv",
+	"video/x-m4v": "m4v",
+	"video/x-matroska": "mkv",
+	"video/x-ms-wmv": "wmv",
+	"video/x-msvideo": "avi"
+};
+//#endregion
+//#region src/components/FileIcon/iconMap.ts
+function generateMimeTypeToIconMap({ FileArchiveIcon, FileCodeIcon, FileExcelIcon, FilePdfIcon, FilePowerPointIcon, FileWordIcon }) {
+	const mimeTypeToIconMap = { "application/pdf": FilePdfIcon };
+	for (const type of wordMimeTypes) mimeTypeToIconMap[type] = FileWordIcon;
+	for (const type of excelMimeTypes) mimeTypeToIconMap[type] = FileExcelIcon;
+	for (const type of powerpointMimeTypes) mimeTypeToIconMap[type] = FilePowerPointIcon;
+	for (const type of archiveFileTypes) mimeTypeToIconMap[type] = FileArchiveIcon;
+	for (const type of codeFileTypes) mimeTypeToIconMap[type] = FileCodeIcon;
+	return mimeTypeToIconMap;
+}
+function generateGeneralTypeToIconMap({ FileAltIcon, FileAudioIcon, FileFallbackIcon, FileVideoIcon }) {
+	return {
+		"audio/": FileAudioIcon,
+		"image/": FileFallbackIcon,
+		"text/": FileAltIcon,
+		"video/": FileVideoIcon
+	};
+}
+var iconMap = { standard: {
+	...generateMimeTypeToIconMap({
+		FileArchiveIcon,
+		FileCodeIcon,
+		FileExcelIcon,
+		FilePdfIcon,
+		FilePowerPointIcon,
+		FileWordIcon
+	}),
+	...generateGeneralTypeToIconMap({
+		FileAltIcon: FileFallbackIcon,
+		FileAudioIcon,
+		FileFallbackIcon,
+		FileVideoIcon
+	}),
+	fallback: FileFallbackIcon
+} };
+//#endregion
+//#region src/components/FileIcon/FileIcon.tsx
+function mimeTypeToIcon(mimeType) {
+	const theMap = iconMap["standard"];
+	if (!mimeType) return theMap.fallback;
+	const icon = theMap[mimeType];
+	if (icon) return icon;
+	if (mimeType.startsWith("audio/")) return theMap["audio/"] ?? theMap.fallback;
+	if (mimeType.startsWith("video/")) return theMap["video/"] ?? theMap.fallback;
+	if (mimeType.startsWith("image/")) return theMap["image/"] ?? theMap.fallback;
+	if (mimeType.startsWith("text/")) return theMap["text/"] ?? theMap.fallback;
+	return theMap.fallback;
+}
+var labelFromMimeType = ({ fileName, mimeType }) => {
+	let label;
+	if (mimeType) label = mimeTypeToExtensionMap[mimeType];
+	if (!label && fileName) label = fileName.split(".").slice(-1)[0];
+	return label;
+};
+var FileIcon = (props) => {
+	const { className, fileName, mimeType, size = "md", sizeConfig: sizeConfigOverride, ...rest } = props;
+	const sizeConfig = (0, react.useMemo)(() => mergeFileIconSizeConfig(sizeConfigOverride), [sizeConfigOverride]);
+	const Icon = mimeTypeToIcon(mimeType);
+	const label = fileName ? labelFromMimeType({
+		fileName,
+		mimeType
+	}) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+		...rest,
+		className,
+		label,
+		size,
+		sizeConfig
+	});
+};
+//#endregion
+//#region src/components/AudioPlayback/components/formatTime.ts
+var formatTime = (totalSeconds, rounding = "ceil") => {
+	if (totalSeconds == null || Number.isNaN(totalSeconds) || totalSeconds < 0) return null;
+	const roundedSeconds = rounding === "floor" ? Math.floor(totalSeconds) : Math.ceil(totalSeconds);
+	const hours = Math.floor(roundedSeconds / 3600);
+	const minutes = Math.floor(roundedSeconds % 3600 / 60);
+	const seconds = roundedSeconds % 60;
+	const minSec = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+	return hours ? `${String(hours).padStart(2, "0")}:${minSec}` : minSec;
+};
+//#endregion
+//#region src/components/BaseImage/ImagePlaceholder.tsx
+var ImagePlaceholder = ({ className }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-label": t("aria/Image failed to load"),
+		className: (0, clsx.default)("str-chat__image-placeholder", className),
+		"data-testid": "str-chat__base-image-placeholder",
+		role: "img",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconImage, {})
+	});
+};
+//#endregion
+//#region src/components/BaseImage/BaseImage.tsx
+var BaseImage = (0, react.forwardRef)(function BaseImage({ src, ...props }, ref) {
+	const { alt: propsAlt, className: propsClassName, onError: propsOnError, showDownloadButtonOnError = false, ...imgProps } = props;
+	const [failedSrc, setFailedSrc] = (0, react.useState)(null);
+	const { ImagePlaceholder: ImagePlaceholderComponent = ImagePlaceholder } = require_useNotificationApi.useComponentContext();
+	const sanitizedUrl = (0, react.useMemo)(() => (0, _braintree_sanitize_url.sanitizeUrl)(src), [src]);
+	const error = failedSrc === sanitizedUrl;
+	(0, react.useEffect)(() => () => {
+		setFailedSrc(null);
+	}, [sanitizedUrl]);
+	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImagePlaceholderComponent, { className: (0, clsx.default)(propsClassName, "str-chat__base-image--load-failed") }), showDownloadButtonOnError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DownloadButton, { assetUrl: sanitizedUrl })] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		"data-testid": "str-chat__base-image",
+		...imgProps,
+		alt: propsAlt ?? "",
+		className: (0, clsx.default)(propsClassName, "str-chat__base-image"),
+		onError: (e) => {
+			setFailedSrc(sanitizedUrl);
+			propsOnError?.(e);
+		},
+		ref,
+		src: sanitizedUrl
+	});
+});
+//#endregion
+//#region src/components/BaseImage/toBaseImageDescriptors.ts
+/**
+* Maps an attachment (or link preview) to image/video URLs and metadata for {@link BaseImage} or the gallery.
+*/
+var toBaseImageDescriptors = (attachment, options = {}) => {
+	if ((0, stream_chat.isGiphyAttachment)(attachment)) {
+		const giphyVersion = options?.giphyVersionName && attachment.giphy ? attachment.giphy[options.giphyVersionName] : void 0;
+		return {
+			alt: giphyVersion?.url || attachment.thumb_url,
+			dimensions: giphyVersion ? {
+				height: giphyVersion.height,
+				width: giphyVersion.width
+			} : void 0,
+			imageUrl: attachment.thumb_url,
+			title: attachment.title || attachment.thumb_url
+		};
+	}
+	if ((0, stream_chat.isScrapedContent)(attachment)) {
+		const imageUrl = attachment.image_url || attachment.thumb_url;
+		return {
+			alt: attachment.title || imageUrl,
+			imageUrl,
+			title: attachment.title
+		};
+	}
+	if ((0, stream_chat.isLocalVideoAttachment)(attachment)) return {
+		title: attachment.title,
+		videoThumbnailUrl: attachment.thumb_url ?? attachment.localMetadata.previewUri,
+		videoUrl: attachment.asset_url ?? attachment.localMetadata.previewUri
+	};
+	if ((0, stream_chat.isVideoAttachment)(attachment)) return {
+		title: attachment.title,
+		videoThumbnailUrl: attachment.thumb_url,
+		videoUrl: attachment.asset_url
+	};
+	if ((0, stream_chat.isLocalImageAttachment)(attachment)) {
+		const imageUrl = attachment.image_url || attachment.localMetadata.previewUri;
+		return {
+			alt: attachment.title || imageUrl,
+			imageUrl,
+			title: attachment.title
+		};
+	}
+	if ((0, stream_chat.isImageAttachment)(attachment)) {
+		const imageUrl = attachment.image_url;
+		return {
+			alt: attachment.title || imageUrl,
+			imageUrl,
+			title: attachment.title
+		};
+	}
+};
+//#endregion
+//#region src/components/Gallery/GalleryContext.tsx
+/**
+* Maps an attachment (or link preview) to gallery item fields.
+* Delegates to {@link toBaseImageDescriptors}.
+*/
+var toGalleryItemDescriptors = (...args) => toBaseImageDescriptors(...args);
+var GalleryContext = (0, react.createContext)(void 0);
+var useGalleryContext = () => {
+	const contextValue = (0, react.useContext)(GalleryContext);
+	if (!contextValue) {
+		console.warn(`The useGalleryContext hook was called outside of the GalleryContext provider. Make sure this hook is called within a child of the Gallery component.`);
+		return {};
+	}
+	return contextValue;
+};
+//#endregion
+//#region src/components/Gallery/GalleryHeader.tsx
+var GalleryHeader = ({ currentItem }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { MessageTimestamp: MessageTimestamp$1 = MessageTimestamp } = require_useNotificationApi.useComponentContext("GalleryUI");
+	const { isMyMessage, message } = useMessageContext("GalleryUI");
+	const modalContext = (0, react.useContext)(ModalContext);
+	const headerTitle = isMyMessage?.() && t("You") || message?.user?.name || message?.user?.id || currentItem.title || t("User uploaded content");
+	const downloadUrl = (0, react.useMemo)(() => {
+		const rawDownloadUrl = currentItem.videoUrl ?? currentItem.imageUrl;
+		if (!rawDownloadUrl) return void 0;
+		const sanitizedUrl = (0, _braintree_sanitize_url.sanitizeUrl)(rawDownloadUrl);
+		return sanitizedUrl === "about:blank" ? void 0 : sanitizedUrl;
+	}, [currentItem.imageUrl, currentItem.videoUrl]);
+	const downloadLabel = t("aria/Download attachment");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__gallery__header",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": "true",
+				className: "str-chat__gallery__header-spacer"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "str-chat__gallery__header-meta",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "str-chat__gallery__title",
+					children: headerTitle
+				}), message?.created_at ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageTimestamp$1, { customClass: "str-chat__gallery__timestamp" }) : null]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "str-chat__gallery__header-actions",
+				children: [downloadUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					"aria-label": downloadLabel,
+					className: "str-chat__gallery__action-button str-chat__gallery__action-button--download",
+					download: true,
+					href: downloadUrl,
+					rel: "noreferrer",
+					target: "_blank",
+					title: downloadLabel,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconArrowDownCircle, {})
+				}) : null, modalContext?.close ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+					"aria-label": t("Close"),
+					className: "str-chat__gallery__action-button str-chat__gallery__action-button--close",
+					onClick: modalContext.close,
+					title: t("Close"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconXmark, {})
+				}) : null]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/VideoPlayer/VideoPlayer.tsx
+var ReactPlayer = react.default.lazy(() => Promise.resolve().then(() => require("./ReactPlayerWrapper.30240f76.js")));
+var VideoPlayer = ({ isPlaying, thumbnailUrl, videoUrl }) => {
+	const { LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, VideoPlayer: VideoPlayerContext } = require_useNotificationApi.useComponentContext();
+	return VideoPlayerContext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoPlayerContext, {
+		thumbnailUrl,
+		videoUrl
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Suspense, {
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__video-player-loading",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingIndicator$1, {})
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReactPlayer, {
+			isPlaying,
+			thumbnailUrl,
+			videoUrl
+		})
+	});
+};
+//#endregion
+//#region src/components/VideoPlayer/VideoThumbnail.tsx
+var VideoThumbnail = ({ className, onPlay, ...imageProps }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__message-attachment__video-thumbnail",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseImage, {
+			className: (0, clsx.default)("str-chat__message-attachment__video-thumbnail-image", className),
+			...imageProps
+		}), onPlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+			appearance: "solid",
+			"aria-label": t("Play video"),
+			circular: true,
+			className: (0, clsx.default)("str-chat__message-attachment__video-thumbnail__play-indicator"),
+			onClick: onPlay,
+			size: "lg",
+			variant: "secondary",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconPlayFill, {})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__message-attachment__video-thumbnail__play-indicator",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconPlayFill, {})
+		})]
+	});
+};
+//#endregion
+//#region src/components/Gallery/GalleryUI.tsx
+var SWIPE_THRESHOLD = 50;
+var TRANSITION_DURATION = 300;
+var GalleryUI = () => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { closeOnBackgroundClick, currentIndex, currentItem, goToNext, goToPrevious, hasNext, hasPrevious, itemCount, onRequestClose } = useGalleryContext();
+	const modalContext = (0, react.useContext)(ModalContext);
+	const [showVideo, setShowVideo] = (0, react.useState)(false);
+	const isTransitioningRef = (0, react.useRef)(false);
+	const [slideOffset, setSlideOffset] = (0, react.useState)(0);
+	const [isDragging, setIsDragging] = (0, react.useState)(false);
+	const [slideDirection, setSlideDirection] = (0, react.useState)(null);
+	const ignoreNextClickRef = (0, react.useRef)(false);
+	const touchStartRef = (0, react.useRef)(null);
+	const isVerticalSwipeRef = (0, react.useRef)(false);
+	const containerRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		setShowVideo(false);
+	}, [currentIndex]);
+	const prevIndexRef = (0, react.useRef)(currentIndex);
+	(0, react.useEffect)(() => {
+		if (prevIndexRef.current === currentIndex) return;
+		setSlideDirection(currentIndex > prevIndexRef.current ? "forward" : "backward");
+		setSlideOffset(0);
+		setIsDragging(false);
+		isTransitioningRef.current = true;
+		const timer = setTimeout(() => {
+			setSlideDirection(null);
+			isTransitioningRef.current = false;
+		}, TRANSITION_DURATION);
+		prevIndexRef.current = currentIndex;
+		return () => clearTimeout(timer);
+	}, [currentIndex]);
+	const handleGoToNext = (0, react.useCallback)(() => {
+		if (isTransitioningRef.current) return;
+		goToNext();
+	}, [goToNext]);
+	const handleGoToPrevious = (0, react.useCallback)(() => {
+		if (isTransitioningRef.current) return;
+		goToPrevious();
+	}, [goToPrevious]);
+	const handleKeyDown = (0, react.useCallback)((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			handleGoToPrevious();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			handleGoToNext();
+		}
+	}, [handleGoToNext, handleGoToPrevious]);
+	(0, react.useEffect)(() => {
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [handleKeyDown]);
+	const handleTouchStart = (0, react.useCallback)((event) => {
+		if (isTransitioningRef.current) return;
+		const touch = event.touches[0];
+		ignoreNextClickRef.current = false;
+		touchStartRef.current = {
+			x: touch.clientX,
+			y: touch.clientY
+		};
+		isVerticalSwipeRef.current = false;
+	}, []);
+	const handleTouchMove = (0, react.useCallback)((event) => {
+		if (!touchStartRef.current || isTransitioningRef.current) return;
+		const touch = event.touches[0];
+		const deltaX = touch.clientX - touchStartRef.current.x;
+		const deltaY = touch.clientY - touchStartRef.current.y;
+		if (!isDragging && !isVerticalSwipeRef.current) {
+			if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 10) {
+				ignoreNextClickRef.current = true;
+				isVerticalSwipeRef.current = true;
+				return;
+			}
+			if (Math.abs(deltaX) > 10) {
+				ignoreNextClickRef.current = true;
+				setIsDragging(true);
+			}
+		}
+		if (isVerticalSwipeRef.current) return;
+		if (!hasNext && deltaX < 0 || !hasPrevious && deltaX > 0) setSlideOffset(deltaX * .3);
+		else setSlideOffset(deltaX);
+	}, [
+		isDragging,
+		hasNext,
+		hasPrevious
+	]);
+	const handleTouchEnd = (0, react.useCallback)(() => {
+		if (!touchStartRef.current || isVerticalSwipeRef.current) {
+			if (isVerticalSwipeRef.current) ignoreNextClickRef.current = true;
+			touchStartRef.current = null;
+			return;
+		}
+		const offset = slideOffset;
+		if (isDragging || Math.abs(offset) > 10) ignoreNextClickRef.current = true;
+		touchStartRef.current = null;
+		if (Math.abs(offset) >= SWIPE_THRESHOLD) if (offset < 0 && hasNext) goToNext();
+		else if (offset > 0 && hasPrevious) goToPrevious();
+		else setSlideOffset(0);
+		else setSlideOffset(0);
+		setIsDragging(false);
+	}, [
+		slideOffset,
+		hasNext,
+		hasPrevious,
+		goToNext,
+		goToPrevious,
+		isDragging
+	]);
+	const requestClose = modalContext?.close ?? onRequestClose;
+	const handleBackgroundClick = (0, react.useCallback)((event) => {
+		if (event.target !== event.currentTarget) return;
+		if (ignoreNextClickRef.current) {
+			ignoreNextClickRef.current = false;
+			return;
+		}
+		if (!closeOnBackgroundClick) return;
+		requestClose?.();
+	}, [closeOnBackgroundClick, requestClose]);
+	const mediaStyle = isDragging || slideOffset !== 0 && slideDirection === null ? { transform: `translateX(${slideOffset}px)` } : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__gallery",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "str-chat__gallery__main",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GalleryHeader, { currentItem }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavButton, {
+					"aria-label": t("Previous image"),
+					className: (0, clsx.default)("str-chat__gallery__nav-button--prev", !hasPrevious && "str-chat__gallery__nav-button--hidden"),
+					disabled: !hasPrevious,
+					onClick: handleGoToPrevious,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconChevronLeft, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "str-chat__gallery__slide-container",
+					onClick: handleBackgroundClick,
+					onTouchEnd: handleTouchEnd,
+					onTouchMove: handleTouchMove,
+					onTouchStart: handleTouchStart,
+					ref: containerRef,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, clsx.default)("str-chat__gallery__media-container", {
+							"str-chat__gallery__media--dragging": isDragging,
+							"str-chat__gallery__media--slide-backward": !isDragging && slideDirection === "backward",
+							"str-chat__gallery__media--slide-forward": !isDragging && slideDirection === "forward"
+						}),
+						style: mediaStyle,
+						children: currentItem.videoUrl && currentItem.videoThumbnailUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "str-chat__gallery__media str-chat__gallery__media--video",
+							children: showVideo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoPlayer, {
+								isPlaying: true,
+								videoUrl: currentItem.videoUrl
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoThumbnail, {
+								alt: currentItem.title ?? "",
+								onPlay: () => setShowVideo(true),
+								src: currentItem.videoThumbnailUrl
+							})
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "str-chat__gallery__media str-chat__gallery__media--image",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseImage, {
+								alt: currentItem.alt,
+								src: currentItem.imageUrl
+							})
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavButton, {
+					"aria-label": t("Next image"),
+					className: (0, clsx.default)("str-chat__gallery__nav-button--next", !hasNext && "str-chat__gallery__nav-button--hidden"),
+					disabled: !hasNext,
+					onClick: handleGoToNext,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconChevronRight, {})
+				})
+			]
+		}), itemCount > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "str-chat__gallery__position-indicator",
+			children: [
+				currentIndex + 1,
+				" of ",
+				itemCount
+			]
+		})]
+	});
+};
+var NavButton = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+	...props,
+	className: (0, clsx.default)("str-chat__gallery__nav-button", className)
+});
+//#endregion
+//#region src/components/Gallery/Gallery.tsx
+var Gallery = ({ closeOnBackgroundClick = true, GalleryUI: GalleryUI$1, initialIndex = 0, items, onIndexChange, onRequestClose }) => {
+	const { GalleryUI: ContextGalleryUI } = require_useNotificationApi.useComponentContext();
+	const ResolvedGalleryUI = GalleryUI$1 ?? ContextGalleryUI ?? GalleryUI;
+	const [currentIndex, setCurrentIndex] = (0, react.useState)(initialIndex);
+	const itemCount = items.length;
+	const goToIndex = (0, react.useCallback)((index) => {
+		if (index >= 0 && index < itemCount) setCurrentIndex(index);
+	}, [itemCount]);
+	const goToNext = (0, react.useCallback)(() => {
+		setCurrentIndex((prev) => prev < itemCount - 1 ? prev + 1 : prev);
+	}, [itemCount]);
+	const goToPrevious = (0, react.useCallback)(() => {
+		setCurrentIndex((prev) => prev > 0 ? prev - 1 : prev);
+	}, []);
+	(0, react.useEffect)(() => {
+		onIndexChange?.(currentIndex);
+	}, [currentIndex, onIndexChange]);
+	const hasNext = currentIndex < itemCount - 1;
+	const hasPrevious = currentIndex > 0;
+	const currentItem = items[currentIndex];
+	const contextValue = (0, react.useMemo)(() => ({
+		closeOnBackgroundClick,
+		currentIndex,
+		currentItem,
+		goToIndex,
+		goToNext,
+		goToPrevious,
+		hasNext,
+		hasPrevious,
+		itemCount,
+		items,
+		onRequestClose
+	}), [
+		closeOnBackgroundClick,
+		currentIndex,
+		currentItem,
+		goToIndex,
+		goToNext,
+		goToPrevious,
+		hasNext,
+		hasPrevious,
+		itemCount,
+		items,
+		onRequestClose
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GalleryContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResolvedGalleryUI, {})
+	});
+};
+//#endregion
+//#region src/components/Form/SwitchField.tsx
+var SwitchField = ({ children, description, fieldClassName, title, ...props }) => {
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, checked, defaultChecked, disabled, id, onChange, onKeyDown, ...rest } = props;
+	const generatedSwitchId = require_useNotificationApi.useStableId();
+	const switchId = id ?? `str-chat__switch-field-${generatedSwitchId}`;
+	const switchLabelId = `${switchId}-label`;
+	const inputRef = (0, react.useRef)(null);
+	const [uncontrolledChecked, setUncontrolledChecked] = (0, react.useState)(Boolean(defaultChecked));
+	const isControlled = checked !== void 0;
+	const isOn = isControlled ? checked : uncontrolledChecked;
+	const isReadOnly = isControlled && onChange === void 0;
+	const handleChange = (event) => {
+		if (!isControlled) setUncontrolledChecked(event.target.checked);
+		onChange?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== " ") return;
+		event.preventDefault();
+		event.currentTarget.click();
+	};
+	const handleSwitchClick = (event) => {
+		if (disabled || event.target === inputRef.current) return;
+		inputRef.current?.click();
+	};
+	const childLabelId = ((0, react.isValidElement)(children) ? children : void 0)?.props.id;
+	const resolvedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? title ? switchLabelId : childLabelId : void 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("str-chat__form__switch-field", fieldClassName, disabled && "str-chat__form__switch-field--disabled"),
+		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwitchFieldLabel, {
+			description,
+			htmlFor: switchId,
+			id: switchLabelId,
+			title
+		}) : children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Switch, {
+			...rest,
+			"aria-label": ariaLabel,
+			"aria-labelledby": resolvedAriaLabelledBy,
+			checked: isOn,
+			disabled,
+			id: switchId,
+			on: isOn,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			onSwitchClick: handleSwitchClick,
+			readOnly: isReadOnly,
+			switchRef: inputRef
+		})]
+	});
+};
+var Switch = ({ className, on, onSwitchClick, presentation, switchRef, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	"aria-hidden": presentation ? true : void 0,
+	className: (0, clsx.default)("str-chat__form__switch-field__switch", { "str-chat__form__switch-field__switch--on": on }),
+	onClick: presentation ? void 0 : onSwitchClick,
+	children: [!presentation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		className: (0, clsx.default)("str-chat__form__switch-field__input", className),
+		ref: switchRef,
+		role: "switch",
+		type: "checkbox"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "str-chat__form__switch-field__switch-handle" })]
+});
+var SwitchFieldLabel = ({ asError, children, className, description, title, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+	className: (0, clsx.default)("str-chat__form__switch-field__label", { "str-chat__form__switch-field__label--as-error": asError }, className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "str-chat__form__switch-field__label__content",
+		children: title ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwitchFieldTitle, { children: title }), description != null && description !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwitchFieldDescription, { children: description })] }) : children
+	})
+});
+var SwitchFieldTitle = ({ children, className, title, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, clsx.default)("str-chat__form__switch-field__label__text", className),
+	...props,
+	children: children ?? title
+});
+var SwitchFieldDescription = ({ children, className, description, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, clsx.default)("str-chat__form__switch-field__label__description", className),
+	...props,
+	children: children ?? description
+});
+//#endregion
+//#region src/components/Form/Checkbox.tsx
+var Checkbox = ({ checked, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...props,
+	className: (0, clsx.default)("str-chat__checkmark str-chat__checkbox", {
+		"str-chat__checkbox--checked": checked,
+		"str-chat__checkmark--checked": checked
+	})
+});
+var Checkmark = Checkbox;
+//#endregion
+//#region src/components/Form/TextInput.tsx
+var TextInputIconMessageLine = ({ icon, text }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	"aria-hidden": true,
+	className: "str-chat__form-text-input__message-icon",
+	children: icon
+}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: "str-chat__form-text-input__message-text",
+	children: text
+})] });
+var TextInputFieldMessage = (props) => {
+	if (props.kind === "neutral") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("str-chat__form-text-input__message", props.insidePlacement && "str-chat__form-text-input__message--field-message-inside"),
+		id: props.id,
+		children: props.text
+	});
+	else if (props.kind === "success") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("str-chat__form-text-input__message", "str-chat__form-text-input__message--success", props.insidePlacement && "str-chat__form-text-input__message--field-message-inside"),
+		id: props.id,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputIconMessageLine, {
+			icon: props.successMessageIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconCheckmark, {}),
+			text: props.text
+		})
+	});
+	else if (props.kind === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("str-chat__form-text-input__message", "str-chat__form-field-error", props.insidePlacement && "str-chat__form-text-input__message--field-message-inside"),
+		id: props.id,
+		role: "alert",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputIconMessageLine, {
+			icon: props.errorMessageIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconExclamationMark, {}),
+			text: props.text
+		})
+	});
+	return null;
+};
+var TextInput = (0, react.forwardRef)(function TextInput({ className, disabled, error = false, errorMessage, errorMessageIcon, fieldMessagePlacement = "outside", id: idProp, label, leading, message, successMessage, successMessageIcon, trailing, trailingText, variant = "outline", ...inputProps }, ref) {
+	const autoId = require_useNotificationApi.useStableId();
+	const id = idProp ?? autoId;
+	const hasError = error && (errorMessage != null || message != null);
+	const showSuccess = !hasError && successMessage != null;
+	const showNeutral = !hasError && !showSuccess && message != null;
+	const messageInside = fieldMessagePlacement === "inside" && (hasError || showSuccess || showNeutral);
+	const messageId = hasError ? `${id}-field-error` : showSuccess || showNeutral ? `${id}-message` : void 0;
+	const describedBy = [inputProps["aria-describedby"], messageId].filter((value) => !!value).join(" ");
+	const fieldMessage = hasError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputFieldMessage, {
+		errorMessageIcon,
+		id: messageId,
+		insidePlacement: messageInside,
+		kind: "error",
+		text: errorMessage ?? message
+	}) : showSuccess ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputFieldMessage, {
+		id: messageId,
+		insidePlacement: messageInside,
+		kind: "success",
+		successMessageIcon,
+		text: successMessage
+	}) : showNeutral ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputFieldMessage, {
+		id: messageId,
+		insidePlacement: messageInside,
+		kind: "neutral",
+		text: message
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("str-chat__form-text-input", error && "str-chat__form-text-input--error", showSuccess && "str-chat__form-text-input--success", disabled && "str-chat__form-text-input--disabled", messageInside && "str-chat__form-text-input--field-message-inside", className),
+		children: [
+			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				className: "str-chat__form-text-input__label",
+				htmlFor: id,
+				children: label
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("str-chat__form-text-input__wrapper", `str-chat__form-text-input__wrapper--${variant}`, messageInside && "str-chat__form-text-input__wrapper--field-message-inside"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "str-chat__form-text-input__control-row",
+					children: [
+						leading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							className: "str-chat__form-text-input__leading",
+							children: leading
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							"aria-describedby": describedBy,
+							"aria-invalid": error,
+							className: "str-chat__form-text-input__input",
+							disabled,
+							id,
+							ref,
+							...inputProps
+						}),
+						trailingText != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							className: "str-chat__form-text-input__suffix",
+							children: trailingText
+						}) : null,
+						trailing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							className: "str-chat__form-text-input__trailing",
+							children: trailing
+						}) : null
+					]
+				}), messageInside ? fieldMessage : null]
+			}),
+			messageInside ? null : fieldMessage
+		]
+	});
+});
+//#endregion
+//#region src/components/ListItemLayout/ListItemLayout.tsx
+var ListItemLayout = ({ ContentSlot = ListItemLayoutContent, contentClassName, description, descriptionClassName, destructive, LeadingIcon, LeadingSlot, RootElement, rootProps, selected, subtitle, subtitleClassName, title, titleClassName, TrailingIcon, TrailingSlot }) => {
+	const ContainerComponent = RootElement ?? "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "str-chat__list-item-layout",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContainerComponent, {
+			...ContainerComponent === "button" ? { type: "button" } : void 0,
+			...rootProps,
+			className: (0, clsx.default)("str-chat__list-item-layout__container", rootProps?.className, destructive && "str-chat__list-item-layout__container--destructive", selected && "str-chat__list-item-layout__container--selected"),
+			children: [
+				LeadingIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "str-chat__list-item-layout__leading-icon",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeadingIcon, {})
+				}),
+				LeadingSlot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeadingSlot, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentSlot, {
+					className: contentClassName,
+					description,
+					descriptionClassName,
+					subtitle,
+					subtitleClassName,
+					title,
+					titleClassName
+				}),
+				TrailingIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "str-chat__list-item-layout__trailing-icon",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrailingIcon, {})
+				}),
+				TrailingSlot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrailingSlot, {})
+			]
+		})
+	});
+};
+var ListItemLayoutContent = ({ className, description, descriptionClassName, subtitle, subtitleClassName, title, titleClassName, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	...props,
+	className: (0, clsx.default)("str-chat__list-item-layout__content", className, {
+		"str-chat__list-item-layout__content--withDescription": description,
+		"str-chat__list-item-layout__content--withSubtitle": subtitle,
+		"str-chat__list-item-layout__content--withTitle": title
+	}),
+	children: [
+		title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("str-chat__list-item-layout__title", titleClassName),
+			children: title
+		}),
+		subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("str-chat__list-item-layout__subtitle", subtitleClassName),
+			children: subtitle
+		}),
+		description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("str-chat__list-item-layout__description", descriptionClassName),
+			children: description
+		})
+	]
+});
+//#endregion
+//#region src/components/ChannelListItem/utils.tsx
+var remarkPlugins = [
+	htmlToTextPlugin,
+	[remark_gfm.default, { singleTilde: false }],
+	plusPlusToEmphasis,
+	imageToLink
+];
+var renderPreviewText = (text) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+	remarkPlugins,
+	skipHtml: true,
+	children: text
+});
+var getLatestPollVote = (latestVotesByOption) => {
+	let latestVote;
+	for (const optionVotes of Object.values(latestVotesByOption)) optionVotes.forEach((vote) => {
+		if (latestVote && new Date(latestVote.updated_at) >= new Date(vote.created_at)) return;
+		latestVote = vote;
+	});
+	return latestVote;
+};
+var getLatestMessagePreview = (channel, t, userLanguage = "en", isMessageAIGenerated) => {
+	const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
+	const previewTextToRender = getTranslatedMessageText({
+		language: userLanguage,
+		message: latestMessage
+	}) || latestMessage?.text;
+	const poll = latestMessage?.poll;
+	if (!latestMessage) return t("Nothing yet...");
+	if (require_useNotificationApi.isMessageDeleted(latestMessage)) return t("Message deleted");
+	if (poll) if (!poll.vote_count) return t("📊 {{createdBy}} created: {{ pollName}}", {
+		createdBy: poll.created_by?.id === channel.getClient().userID ? t("You") : poll.created_by?.name ?? t("Poll"),
+		pollName: poll.name
+	});
+	else {
+		const latestVote = getLatestPollVote(poll.latest_votes_by_option);
+		const option = latestVote && poll.options.find((opt) => opt.id === latestVote.option_id);
+		if (option && latestVote) return t("📊 {{votedBy}} voted: {{pollOptionText}}", {
+			pollOptionText: option.text,
+			votedBy: latestVote?.user?.id === channel.getClient().userID ? t("You") : latestVote.user?.name ?? t("Poll")
+		});
+	}
+	if (previewTextToRender) return isMessageAIGenerated?.(latestMessage) ? previewTextToRender : renderPreviewText(previewTextToRender);
+	if (latestMessage.command) return `/${latestMessage.command}`;
+	if (latestMessage.attachments?.length) return t("🏙 Attachment...");
+	if (latestMessage.shared_location) return t("📍Shared location");
+	return t("Empty message...");
+};
+/**
+* Channel display image: channel.data.image, or for DM (2 members) the other member's user.image.
+*/
+var getChannelDisplayImage = (channel, currentUserId) => {
+	const data = channel.data;
+	if (data?.image && typeof data.image === "string") return data.image;
+	const memberList = Object.values(channel.state.members);
+	if (memberList.length === 2) {
+		const image = memberList.find((m) => m.user?.id !== currentUserId)?.user?.image;
+		if (image && typeof image === "string") return image;
+	}
+};
+var getGroupChannelDisplayInfo = (channel) => {
+	const members = Object.values(channel.state.members);
+	if (members.length <= 2) return;
+	const memberList = [];
+	for (const member of members) {
+		const { user } = member;
+		if (!user?.name && !user?.image) continue;
+		memberList.push({
+			imageUrl: user.image,
+			userName: user.name
+		});
+	}
+	return { members: memberList };
+};
+//#endregion
+//#region src/components/ChannelListItem/hooks/useChannelDisplayName.ts
+/**
+* 1. channel.data.name
+* 2. DM (exactly 2 members): other member's name, then directMessageLabel
+* 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)
+* 4. undefined otherwise
+*/
+function computeChannelDisplayName(channel, directMessageLabel, currentUserId) {
+	const data = channel.data;
+	if (data?.name && typeof data.name === "string") return data.name;
+	const memberList = Object.values(channel.state.members);
+	const otherMembers = memberList.filter((m) => m.user?.id !== currentUserId);
+	if (memberList.length === 2 && otherMembers.length === 1) return otherMembers[0].user?.name || directMessageLabel;
+	if (otherMembers.length >= 2) {
+		const names = otherMembers.map((m) => m.user?.name).filter(Boolean).slice(0, 2);
+		if (names.length > 0) return names.join(", ");
+	}
+}
+/**
+* Channel display name with translation context.
+* 1. channel.data.name
+* 2. DM (exactly 2 members): other member's name, then translated "Direct message"
+* 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)
+* 4. undefined otherwise
+*/
+var useChannelDisplayName = (channel) => {
+	const { client } = require_useNotificationApi.useChatContext("useChannelDisplayName");
+	const { t } = require_useNotificationApi.useTranslationContext("useChannelDisplayName");
+	const directMessageLabel = t("Direct message");
+	const [displayName, setDisplayName] = (0, react.useState)(() => channel ? computeChannelDisplayName(channel, directMessageLabel, client.userID ?? void 0) : void 0);
+	(0, react.useEffect)(() => {
+		if (!channel) {
+			setDisplayName(void 0);
+			return;
+		}
+		const updateDisplayName = () => setDisplayName(computeChannelDisplayName(channel, directMessageLabel, client.userID ?? void 0));
+		updateDisplayName();
+		client.on("user.updated", updateDisplayName);
+		return () => {
+			client.off("user.updated", updateDisplayName);
+		};
+	}, [
+		channel,
+		channel?.data,
+		client,
+		directMessageLabel
+	]);
+	return displayName;
+};
+//#endregion
+//#region src/components/ChannelListItem/hooks/useChannelPreviewInfo.ts
+var emptyGroupInfo = {
+	members: [],
+	overflowCount: void 0
+};
+var useChannelPreviewInfo = (props) => {
+	const { channel, overrideImage, overrideTitle } = props;
+	const { client } = require_useNotificationApi.useChatContext();
+	const channelDisplayName = useChannelDisplayName(channel);
+	const displayTitle = overrideTitle ?? channelDisplayName;
+	const [displayImage, setDisplayImage] = (0, react.useState)(() => channel ? overrideImage ?? getChannelDisplayImage(channel, client.userID ?? void 0) : void 0);
+	const [groupChannelDisplayInfo, setGroupChannelDisplayInfo] = (0, react.useState)(() => channel ? getGroupChannelDisplayInfo(channel) ?? emptyGroupInfo : emptyGroupInfo);
+	(0, react.useEffect)(() => {
+		if (!channel) return;
+		if (overrideImage) return;
+		const updateInfo = () => {
+			setDisplayImage(getChannelDisplayImage(channel, client.userID ?? void 0));
+			setGroupChannelDisplayInfo(getGroupChannelDisplayInfo(channel) ?? emptyGroupInfo);
+		};
+		updateInfo();
+		const { unsubscribe: unsubscribeChannelUpdated } = channel.on("channel.updated", updateInfo);
+		const { unsubscribe: unsubscribeUserUpdated } = client.on("user.updated", updateInfo);
+		return () => {
+			unsubscribeChannelUpdated();
+			unsubscribeUserUpdated();
+		};
+	}, [
+		channel,
+		channel?.data,
+		client,
+		overrideImage
+	]);
+	return (0, react.useMemo)(() => ({
+		displayImage: overrideImage ?? displayImage,
+		displayTitle,
+		groupChannelDisplayInfo
+	}), [
+		displayImage,
+		displayTitle,
+		groupChannelDisplayInfo,
+		overrideImage
+	]);
+};
+//#endregion
+//#region src/utils/isDmChannel.ts
+var isDmChannel = ({ channel, ownUserId }) => {
+	const memberCount = channel.data?.member_count ?? 0;
+	return memberCount === 1 || memberCount === 2 && !!ownUserId && Object.values(channel.state?.members ?? {}).some(({ user }) => user?.id === ownUserId);
+};
+//#endregion
+//#region src/components/ChannelList/hooks/useSelectedChannelState.ts
+var noop = () => {};
+function useSelectedChannelState({ channel, selector, stateChangeEventKeys = ["all"] }) {
+	return (0, use_sync_external_store_shim.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
+		if (!channel) return noop;
+		const subscriptions = stateChangeEventKeys.map((et) => channel.on(et, () => {
+			onStoreChange(selector(channel));
+		}));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [
+		channel,
+		selector,
+		stateChangeEventKeys
+	]), (0, react.useCallback)(() => {
+		if (!channel) return void 0;
+		return selector(channel);
+	}, [channel, selector]));
+}
+//#endregion
+//#region src/components/ChannelList/hooks/useChannelMembershipState.ts
+var selector = (c) => c.state.membership;
+var keys = ["member.updated"];
+function useChannelMembershipState(channel) {
+	return useSelectedChannelState({
+		channel,
+		selector,
+		stateChangeEventKeys: keys
+	});
+}
+//#endregion
+//#region src/components/ChannelListItem/hooks/useIsChannelMuted.ts
+var useIsChannelMuted = (channel) => {
+	const { client } = require_useNotificationApi.useChatContext("useIsChannelMuted");
+	const [muted, setMuted] = (0, react.useState)(channel.muteStatus());
+	(0, react.useEffect)(() => {
+		const handleEvent = () => setMuted(channel.muteStatus());
+		client.on("notification.channel_mutes_updated", handleEvent);
+		return () => client.off("notification.channel_mutes_updated", handleEvent);
+	}, [muted]);
+	return muted;
+};
+//#endregion
+//#region src/components/ChannelListItem/hooks/useIsUserMuted.ts
+var useIsUserMuted = (targetUserId) => {
+	const { mutes } = require_useNotificationApi.useChatContext();
+	return (0, react.useMemo)(() => !!targetUserId && mutes.some((mute) => mute.target.id === targetUserId), [mutes, targetUserId]);
+};
+//#endregion
+//#region src/components/Notifications/Notification.tsx
+var IconsBySeverity = {
+	error: require_useNotificationApi.IconExclamationMark,
+	info: null,
+	loading: require_useNotificationApi.IconRefresh,
+	success: require_useNotificationApi.IconCheckmark,
+	warning: require_useNotificationApi.IconExclamationTriangleFill
+};
+var DefaultNotificationIcon = ({ notification }) => {
+	if (!notification.severity) return null;
+	const Icon = IconsBySeverity[notification.severity] ?? null;
+	return Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "str-chat__notification-icon",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+	});
+};
+var Notification = (0, react.forwardRef)(({ className, entryDirection, Icon = DefaultNotificationIcon, notification, onDismiss, showClose = false, transitionState }, ref) => {
+	const { removeNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const displayMessage = t("translationBuilderTopic/notification", {
+		notification,
+		value: notification.message
+	});
+	const handleDismiss = () => {
+		if (onDismiss) {
+			onDismiss();
+			return;
+		}
+		removeNotification(notification.id);
+	};
+	const isPersistent = !notification.duration;
+	const severity = notification.severity;
+	const livePriority = severity === "error" ? "assertive" : "polite";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("str-chat__notification", entryDirection && `str-chat__notification--enter-from-${entryDirection}`, transitionState === "enter" && "str-chat__notification--is-entering", transitionState === "exit" && "str-chat__notification--is-exiting", severity && `str-chat__notification--${severity}`, severity === "loading" && "str-chat__notification--loading", className),
+		"data-testid": "notification",
+		ref,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "str-chat__notification-content",
+				children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { notification }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"aria-atomic": "true",
+					"aria-live": livePriority,
+					className: "str-chat__notification-message",
+					role: livePriority === "assertive" ? "alert" : "status",
+					children: displayMessage
+				})]
+			}),
+			notification.actions && notification.actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "str-chat__notification-actions",
+				children: notification.actions.map((action, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+					appearance: "outline",
+					className: "str-chat__notification-action",
+					inverseTheme: true,
+					onClick: () => {
+						action.handler();
+					},
+					size: "sm",
+					variant: "secondary",
+					children: action.label
+				}, index))
+			}),
+			(showClose || isPersistent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+				appearance: "ghost",
+				"aria-label": t("aria/Dismiss notification"),
+				circular: true,
+				className: "str-chat__notification-close-button",
+				inverseTheme: true,
+				onClick: handleDismiss,
+				size: "sm",
+				variant: "secondary",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconXmark, {})
+			})
+		]
+	});
+});
+Notification.displayName = "Notification";
+//#endregion
+//#region src/components/Notifications/NotificationList.tsx
+var ENTER_TRANSLATION = {
+	bottom: {
+		x: "0%",
+		y: "100%"
+	},
+	left: {
+		x: "-100%",
+		y: "0%"
+	},
+	right: {
+		x: "100%",
+		y: "0%"
+	},
+	top: {
+		x: "0%",
+		y: "-100%"
+	}
+};
+var EXIT_ANIMATION_MS = 340;
+var DEFAULT_MIN_DISPLAY_MS = 1e3;
+var isEnterFrom = (value) => value === "bottom" || value === "left" || value === "right" || value === "top";
+var getNotificationEnterFrom = (notification, fallbackEnterFrom) => {
+	if (!notification) return fallbackEnterFrom;
+	const metadataEnterFrom = notification.metadata?.entryDirection;
+	if (isEnterFrom(metadataEnterFrom)) return metadataEnterFrom;
+	const originEnterFrom = notification.origin.context?.entryDirection;
+	if (isEnterFrom(originEnterFrom)) return originEnterFrom;
+	return fallbackEnterFrom;
+};
+var isPersistent = (notification) => !notification.duration;
+var haveSameType = (a, b) => !!a?.type && !!b?.type && a.type === b.type;
+/** FIFO queue selector — oldest `createdAt` other than `displayed` wins. */
+var pickOldest = (notifications, displayed) => {
+	const excludeId = displayed?.id ?? null;
+	let oldest = null;
+	for (const notification of notifications) {
+		if (notification.id === excludeId) continue;
+		if (!oldest || notification.createdAt < oldest.createdAt) oldest = notification;
+	}
+	return oldest;
+};
+/** LIFO queue selector — newest `createdAt` other than `displayed` wins. */
+var pickNewest = (notifications, displayed) => {
+	const excludeId = displayed?.id ?? null;
+	let newest = null;
+	for (const notification of notifications) {
+		if (notification.id === excludeId) continue;
+		if (!newest || notification.createdAt > newest.createdAt) newest = notification;
+	}
+	return newest;
+};
+var pickNewestPersistent = (notifications, excludeId) => {
+	let newest = null;
+	for (const notification of notifications) {
+		if (notification.id === excludeId) continue;
+		if (!isPersistent(notification)) continue;
+		if (!newest || notification.createdAt > newest.createdAt) newest = notification;
+	}
+	return newest;
+};
+var pickNewestOfType = (notifications, type, excludeId) => {
+	if (!type) return null;
+	let newest = null;
+	for (const notification of notifications) {
+		if (notification.id === excludeId) continue;
+		if (notification.type !== type) continue;
+		if (!newest || notification.createdAt > newest.createdAt) newest = notification;
+	}
+	return newest;
+};
+/**
+* Builds the default `PickNextNotification` selector with a configurable queue fallback.
+* Encodes the snackbar concurrency rules from the design spec — the scheduling effect
+* only decides *when* to swap, the returned function decides *what* to swap to.
+*
+* Rules, in order of precedence:
+*   1. **Persistent wins.** Persistent variants (no `duration`) jump ahead of any
+*      queued transient because they carry an action the user must acknowledge.
+*   2. **Persistent ↛ replaced by transient.** While a persistent is displayed it stays
+*      put until dismissed externally or a *newer* persistent arrives.
+*   3. **Same-type refresh.** While a transient is displayed, a repeated trigger of the
+*      same `type` collapses to its latest occurrence. (The scheduling effect detects
+*      this via `haveSameType` and bypasses the dwell window so the refresh feels
+*      instant; this function just makes sure the latest same-type is returned.)
+*   4. **Queue fallback.** Otherwise, `pickFromQueue` selects the next notification
+*      (default: `pickOldest` / FIFO).
+*
+* Exported so callers that want to layer behavior on top of the design rules can wrap
+* the result instead of rewriting it.
+*/
+var createDefaultPickNext = (pickFromQueue = pickOldest) => (notifications, displayed) => {
+	if (notifications.length === 0) return null;
+	const newestPersistent = pickNewestPersistent(notifications, null);
+	if (!displayed) return newestPersistent ?? pickFromQueue(notifications, null);
+	if (!notifications.some(({ id }) => id === displayed.id)) return newestPersistent ?? pickFromQueue(notifications, null);
+	if (isPersistent(displayed)) {
+		const newerPersistent = newestPersistent && newestPersistent.id !== displayed.id ? newestPersistent : pickNewestPersistent(notifications, displayed.id);
+		if (newerPersistent && newerPersistent.createdAt > displayed.createdAt) return newerPersistent;
+		return displayed;
+	}
+	const sameTypeNewest = pickNewestOfType(notifications, displayed.type, displayed.id);
+	if (sameTypeNewest) return sameTypeNewest;
+	if (newestPersistent) return newestPersistent;
+	return pickFromQueue(notifications, displayed) ?? displayed;
+};
+/** Default selector — design-spec rules with FIFO queue fallback (`pickOldest`). */
+var defaultPickNext = createDefaultPickNext(pickOldest);
+var NotificationList = ({ className, enterFrom = "bottom", fallbackPanel, filter, minDisplayMs = DEFAULT_MIN_DISPLAY_MS, panel, pickNext = defaultPickNext, verticalAlignment = "bottom" }) => {
+	const { Notification: NotificationComponent = Notification } = require_useNotificationApi.useComponentContext();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { removeNotification, startNotificationTimeout } = require_useNotificationApi.useNotificationApi();
+	const exitTimeoutRef = (0, react.useRef)(null);
+	const replacementTimeoutRef = (0, react.useRef)(null);
+	const candidateRef = (0, react.useRef)(null);
+	const displayedAtRef = (0, react.useRef)(null);
+	const listRef = (0, react.useRef)(null);
+	const observedElementRef = (0, react.useRef)(null);
+	const startedTimeoutIdsRef = (0, react.useRef)(null);
+	if (!startedTimeoutIdsRef.current) startedTimeoutIdsRef.current = /* @__PURE__ */ new Set();
+	const [displayedNotification, setDisplayedNotification] = (0, react.useState)(null);
+	const [transitionState, setTransitionState] = (0, react.useState)("enter");
+	const notifications = useNotifications({
+		applyDisplayFilter: true,
+		fallbackPanel,
+		filter: (0, react.useCallback)((notification) => {
+			if (require_useNotificationApi.hasSystemNotificationTag(notification)) return false;
+			return filter ? filter(notification) : true;
+		}, [filter]),
+		panel
+	});
+	const dismiss = (0, react.useCallback)((id) => {
+		startedTimeoutIdsRef.current?.delete(id);
+		removeNotification(id);
+	}, [removeNotification]);
+	(0, react.useEffect)(() => {
+		const notificationIds = new Set(notifications.map(({ id }) => id));
+		startedTimeoutIdsRef.current?.forEach((id) => {
+			if (!notificationIds.has(id)) startedTimeoutIdsRef.current?.delete(id);
+		});
+	}, [notifications]);
+	const clearReplacementTimeout = (0, react.useCallback)(() => {
+		if (replacementTimeoutRef.current !== null) {
+			window.clearTimeout(replacementTimeoutRef.current);
+			replacementTimeoutRef.current = null;
+		}
+	}, []);
+	(0, react.useEffect)(() => () => {
+		clearReplacementTimeout();
+		if (exitTimeoutRef.current !== null) {
+			window.clearTimeout(exitTimeoutRef.current);
+			exitTimeoutRef.current = null;
+		}
+	}, [clearReplacementTimeout]);
+	(0, react.useEffect)(() => {
+		candidateRef.current = pickNext(notifications, displayedNotification);
+	}, [
+		displayedNotification,
+		notifications,
+		pickNext
+	]);
+	(0, react.useEffect)(() => {
+		if (transitionState === "exit") return;
+		if (!displayedNotification) {
+			const candidate = pickNext(notifications, null);
+			if (candidate) {
+				displayedAtRef.current = Date.now();
+				setDisplayedNotification(candidate);
+				setTransitionState("enter");
+			}
+			return;
+		}
+		const candidate = pickNext(notifications, displayedNotification);
+		if (!candidate) {
+			clearReplacementTimeout();
+			setTransitionState("exit");
+			exitTimeoutRef.current = window.setTimeout(() => {
+				exitTimeoutRef.current = null;
+				displayedAtRef.current = null;
+				setDisplayedNotification(null);
+				setTransitionState("enter");
+			}, EXIT_ANIMATION_MS);
+			return;
+		}
+		if (candidate.id === displayedNotification.id) {
+			clearReplacementTimeout();
+			return;
+		}
+		const displayedInStore = notifications.some(({ id }) => id === displayedNotification.id);
+		const startSwap = () => {
+			replacementTimeoutRef.current = null;
+			setTransitionState("exit");
+			const previousId = displayedNotification.id;
+			const wasInStore = displayedInStore;
+			exitTimeoutRef.current = window.setTimeout(() => {
+				exitTimeoutRef.current = null;
+				if (wasInStore) {
+					startedTimeoutIdsRef.current?.delete(previousId);
+					removeNotification(previousId);
+				}
+				const next = candidateRef.current;
+				if (next && next.id !== previousId) {
+					displayedAtRef.current = Date.now();
+					setDisplayedNotification(next);
+					setTransitionState("enter");
+				} else {
+					displayedAtRef.current = null;
+					setDisplayedNotification(null);
+					setTransitionState("enter");
+				}
+			}, EXIT_ANIMATION_MS);
+		};
+		if (!displayedInStore) {
+			clearReplacementTimeout();
+			startSwap();
+			return;
+		}
+		if (haveSameType(displayedNotification, candidate)) {
+			clearReplacementTimeout();
+			startSwap();
+			return;
+		}
+		const elapsed = displayedAtRef.current ? Date.now() - displayedAtRef.current : 0;
+		const remaining = Math.max(0, minDisplayMs - elapsed);
+		if (remaining === 0) {
+			clearReplacementTimeout();
+			startSwap();
+		} else if (replacementTimeoutRef.current === null) replacementTimeoutRef.current = window.setTimeout(startSwap, remaining);
+	}, [
+		clearReplacementTimeout,
+		displayedNotification,
+		minDisplayMs,
+		notifications,
+		pickNext,
+		removeNotification,
+		transitionState
+	]);
+	const notification = displayedNotification;
+	const notificationEnterFrom = getNotificationEnterFrom(notification, enterFrom);
+	(0, react.useEffect)(() => {
+		const element = observedElementRef.current;
+		if (!element || !notification || transitionState === "exit") return;
+		const startTimeout = () => {
+			if (!startedTimeoutIdsRef.current || startedTimeoutIdsRef.current.has(notification.id)) return;
+			startedTimeoutIdsRef.current.add(notification.id);
+			startNotificationTimeout(notification.id);
+		};
+		if (typeof IntersectionObserver === "undefined") {
+			startTimeout();
+			return;
+		}
+		const observer = new IntersectionObserver((entries) => {
+			const [entry] = entries;
+			if (!entry?.isIntersecting) return;
+			startTimeout();
+			observer.disconnect();
+		}, {
+			root: listRef.current,
+			threshold: .5
+		});
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		notification,
+		startNotificationTimeout,
+		transitionState
+	]);
+	if (!notification) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"aria-label": t("aria/Notifications"),
+		className: (0, clsx.default)("str-chat__notification-list", `str-chat__notification-list--enter-from-${notificationEnterFrom}`, `str-chat__notification-list--position-${verticalAlignment}`, panel && `str-chat__notification-list--${panel}`, className),
+		"data-testid": "notification-list",
+		ref: listRef,
+		role: "region",
+		style: {
+			"--str-chat__notification-list-enter-x": ENTER_TRANSLATION[notificationEnterFrom].x,
+			"--str-chat__notification-list-enter-y": ENTER_TRANSLATION[notificationEnterFrom].y
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: "str-chat__notification-list__edge str-chat__notification-list__edge--top"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotificationComponent, {
+				entryDirection: notificationEnterFrom,
+				notification,
+				onDismiss: () => dismiss(notification.id),
+				ref: (element) => {
+					observedElementRef.current = element;
+				},
+				showClose: !notification.duration,
+				transitionState
+			}, notification.id),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: "str-chat__notification-list__edge str-chat__notification-list__edge--bottom"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/ChannelHeader/hooks/useChannelHasMembersOnline.ts
+var getOtherWatchers = (watchers, ownUserId) => {
+	const next = Object.assign({}, watchers ?? {});
+	if (ownUserId) delete next[ownUserId];
+	return next;
+};
+var useChannelHasMembersOnline = ({ channel: channelOverride, enabled = true } = {}) => {
+	const { channel: contextChannel } = require_useNotificationApi.useChannelStateContext();
+	const { client } = require_useNotificationApi.useChatContext();
+	const channel = channelOverride ?? contextChannel;
+	const ownUserId = client.user?.id;
+	const [watchers, setWatchers] = (0, react.useState)(() => getOtherWatchers(channel?.state?.watchers, ownUserId));
+	(0, react.useEffect)(() => {
+		setWatchers(getOtherWatchers(channel?.state?.watchers, ownUserId));
+	}, [channel, ownUserId]);
+	(0, react.useEffect)(() => {
+		if (!enabled || !channel) return;
+		const startSubscription = channel.on("user.watching.start", (event) => {
+			setWatchers((prev) => {
+				if (!event.user?.id || event.user.id === ownUserId) return prev;
+				if (prev[event.user.id]) return prev;
+				return Object.assign({ [event.user.id]: event.user }, prev);
+			});
+		});
+		const stopSubscription = channel.on("user.watching.stop", (event) => {
+			setWatchers((prev) => {
+				if (!event.user?.id || !prev[event.user.id]) return prev;
+				const next = Object.assign({}, prev);
+				delete next[event.user.id];
+				return next;
+			});
+		});
+		return () => {
+			startSubscription.unsubscribe();
+			stopSubscription.unsubscribe();
+		};
+	}, [
+		channel,
+		enabled,
+		ownUserId
+	]);
+	if (!enabled) return false;
+	return Object.keys(watchers).length > 0;
+};
+//#endregion
+//#region src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts
+/**
+* Returns the channel header online status text (e.g. "Online", "Offline", or "X members, Y online").
+* Returns null when the channel has no members (nothing to show).
+*/
+function useChannelHeaderOnlineStatus({ channel: channelOverride, watcherCount: watcherCountOverride } = {}) {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel: contextChannel, watcherCount: contextWatcherCount = 0 } = require_useNotificationApi.useChannelStateContext();
+	const channel = channelOverride ?? contextChannel;
+	const watcherCount = watcherCountOverride ?? contextWatcherCount;
+	const { member_count: memberCount = 0 } = channel?.data || {};
+	const isDirectMessagingChannel = isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+	const hasMembersOnline = useChannelHasMembersOnline({
+		channel,
+		enabled: isDirectMessagingChannel
+	});
+	if (!memberCount) return null;
+	if (isDirectMessagingChannel) return hasMembersOnline ? t("Online") : t("Offline");
+	return `${t("{{ memberCount }} members", { memberCount })} · ${t("{{ watcherCount }} online", { watcherCount })}`;
+}
+//#endregion
+Object.defineProperty(exports, "Alert", {
+	enumerable: true,
+	get: function() {
+		return Alert;
+	}
+});
+Object.defineProperty(exports, "Avatar", {
+	enumerable: true,
+	get: function() {
+		return Avatar;
+	}
+});
+Object.defineProperty(exports, "Badge", {
+	enumerable: true,
+	get: function() {
+		return Badge;
+	}
+});
+Object.defineProperty(exports, "BaseContextMenuButton", {
+	enumerable: true,
+	get: function() {
+		return BaseContextMenuButton;
+	}
+});
+Object.defineProperty(exports, "BaseImage", {
+	enumerable: true,
+	get: function() {
+		return BaseImage;
+	}
+});
+Object.defineProperty(exports, "ChannelAvatar", {
+	enumerable: true,
+	get: function() {
+		return ChannelAvatar;
+	}
+});
+Object.defineProperty(exports, "Checkbox", {
+	enumerable: true,
+	get: function() {
+		return Checkbox;
+	}
+});
+Object.defineProperty(exports, "Checkmark", {
+	enumerable: true,
+	get: function() {
+		return Checkmark;
+	}
+});
+Object.defineProperty(exports, "ContextMenu", {
+	enumerable: true,
+	get: function() {
+		return ContextMenu;
+	}
+});
+Object.defineProperty(exports, "ContextMenuBackButton", {
+	enumerable: true,
+	get: function() {
+		return ContextMenuBackButton;
+	}
+});
+Object.defineProperty(exports, "ContextMenuBody", {
+	enumerable: true,
+	get: function() {
+		return ContextMenuBody;
+	}
+});
+Object.defineProperty(exports, "ContextMenuButton", {
+	enumerable: true,
+	get: function() {
+		return ContextMenuButton;
+	}
+});
+Object.defineProperty(exports, "ContextMenuContent", {
+	enumerable: true,
+	get: function() {
+		return ContextMenuContent;
+	}
+});
+Object.defineProperty(exports, "ContextMenuHeader", {
+	enumerable: true,
+	get: function() {
+		return ContextMenuHeader;
+	}
+});
+Object.defineProperty(exports, "ContextMenuRoot", {
+	enumerable: true,
+	get: function() {
+		return ContextMenuRoot;
+	}
+});
+Object.defineProperty(exports, "DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR", {
+	enumerable: true,
+	get: function() {
+		return DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR;
+	}
+});
+Object.defineProperty(exports, "DialogAnchor", {
+	enumerable: true,
+	get: function() {
+		return DialogAnchor;
+	}
+});
+Object.defineProperty(exports, "DownloadButton", {
+	enumerable: true,
+	get: function() {
+		return DownloadButton;
+	}
+});
+Object.defineProperty(exports, "EmojiContextMenuButton", {
+	enumerable: true,
+	get: function() {
+		return EmojiContextMenuButton;
+	}
+});
+Object.defineProperty(exports, "ErrorBadge", {
+	enumerable: true,
+	get: function() {
+		return ErrorBadge;
+	}
+});
+Object.defineProperty(exports, "FILE_ICON_GRAPHIC_CLASSNAME", {
+	enumerable: true,
+	get: function() {
+		return FILE_ICON_GRAPHIC_CLASSNAME;
+	}
+});
+Object.defineProperty(exports, "FILE_ICON_NO_LABEL_CLASSNAME", {
+	enumerable: true,
+	get: function() {
+		return FILE_ICON_NO_LABEL_CLASSNAME;
+	}
+});
+Object.defineProperty(exports, "FileIcon", {
+	enumerable: true,
+	get: function() {
+		return FileIcon;
+	}
+});
+Object.defineProperty(exports, "FileSizeIndicator", {
+	enumerable: true,
+	get: function() {
+		return FileSizeIndicator;
+	}
+});
+Object.defineProperty(exports, "Gallery", {
+	enumerable: true,
+	get: function() {
+		return Gallery;
+	}
+});
+Object.defineProperty(exports, "GalleryContext", {
+	enumerable: true,
+	get: function() {
+		return GalleryContext;
+	}
+});
+Object.defineProperty(exports, "GalleryUI", {
+	enumerable: true,
+	get: function() {
+		return GalleryUI;
+	}
+});
+Object.defineProperty(exports, "GlobalModal", {
+	enumerable: true,
+	get: function() {
+		return GlobalModal;
+	}
+});
+Object.defineProperty(exports, "GroupAvatar", {
+	enumerable: true,
+	get: function() {
+		return GroupAvatar;
+	}
+});
+Object.defineProperty(exports, "Header", {
+	enumerable: true,
+	get: function() {
+		return Header;
+	}
+});
+Object.defineProperty(exports, "ImagePlaceholder", {
+	enumerable: true,
+	get: function() {
+		return ImagePlaceholder;
+	}
+});
+Object.defineProperty(exports, "ListItemLayout", {
+	enumerable: true,
+	get: function() {
+		return ListItemLayout;
+	}
+});
+Object.defineProperty(exports, "ListItemLayoutContent", {
+	enumerable: true,
+	get: function() {
+		return ListItemLayoutContent;
+	}
+});
+Object.defineProperty(exports, "LoadingIndicator", {
+	enumerable: true,
+	get: function() {
+		return LoadingIndicator;
+	}
+});
+Object.defineProperty(exports, "MessageContext", {
+	enumerable: true,
+	get: function() {
+		return MessageContext;
+	}
+});
+Object.defineProperty(exports, "MessageProvider", {
+	enumerable: true,
+	get: function() {
+		return MessageProvider;
+	}
+});
+Object.defineProperty(exports, "MessageTimestamp", {
+	enumerable: true,
+	get: function() {
+		return MessageTimestamp;
+	}
+});
+Object.defineProperty(exports, "MessageTranslationViewContext", {
+	enumerable: true,
+	get: function() {
+		return MessageTranslationViewContext;
+	}
+});
+Object.defineProperty(exports, "MessageTranslationViewProvider", {
+	enumerable: true,
+	get: function() {
+		return MessageTranslationViewProvider;
+	}
+});
+Object.defineProperty(exports, "ModalContext", {
+	enumerable: true,
+	get: function() {
+		return ModalContext;
+	}
+});
+Object.defineProperty(exports, "ModalContextProvider", {
+	enumerable: true,
+	get: function() {
+		return ModalContextProvider;
+	}
+});
+Object.defineProperty(exports, "Notification", {
+	enumerable: true,
+	get: function() {
+		return Notification;
+	}
+});
+Object.defineProperty(exports, "NotificationConfigurationProvider", {
+	enumerable: true,
+	get: function() {
+		return NotificationConfigurationProvider;
+	}
+});
+Object.defineProperty(exports, "NotificationList", {
+	enumerable: true,
+	get: function() {
+		return NotificationList;
+	}
+});
+Object.defineProperty(exports, "Prompt", {
+	enumerable: true,
+	get: function() {
+		return Prompt;
+	}
+});
+Object.defineProperty(exports, "Root", {
+	enumerable: true,
+	get: function() {
+		return Root;
+	}
+});
+Object.defineProperty(exports, "Switch", {
+	enumerable: true,
+	get: function() {
+		return Switch;
+	}
+});
+Object.defineProperty(exports, "SwitchField", {
+	enumerable: true,
+	get: function() {
+		return SwitchField;
+	}
+});
+Object.defineProperty(exports, "SwitchFieldDescription", {
+	enumerable: true,
+	get: function() {
+		return SwitchFieldDescription;
+	}
+});
+Object.defineProperty(exports, "SwitchFieldLabel", {
+	enumerable: true,
+	get: function() {
+		return SwitchFieldLabel;
+	}
+});
+Object.defineProperty(exports, "SwitchFieldTitle", {
+	enumerable: true,
+	get: function() {
+		return SwitchFieldTitle;
+	}
+});
+Object.defineProperty(exports, "TextInput", {
+	enumerable: true,
+	get: function() {
+		return TextInput;
+	}
+});
+Object.defineProperty(exports, "Timestamp", {
+	enumerable: true,
+	get: function() {
+		return Timestamp;
+	}
+});
+Object.defineProperty(exports, "UserContextMenuButton", {
+	enumerable: true,
+	get: function() {
+		return UserContextMenuButton;
+	}
+});
+Object.defineProperty(exports, "VideoPlayer", {
+	enumerable: true,
+	get: function() {
+		return VideoPlayer;
+	}
+});
+Object.defineProperty(exports, "VideoThumbnail", {
+	enumerable: true,
+	get: function() {
+		return VideoThumbnail;
+	}
+});
+Object.defineProperty(exports, "createDefaultPickNext", {
+	enumerable: true,
+	get: function() {
+		return createDefaultPickNext;
+	}
+});
+Object.defineProperty(exports, "createRovingFocusKeyDownHandler", {
+	enumerable: true,
+	get: function() {
+		return createRovingFocusKeyDownHandler;
+	}
+});
+Object.defineProperty(exports, "formatTime", {
+	enumerable: true,
+	get: function() {
+		return formatTime;
+	}
+});
+Object.defineProperty(exports, "getChannelDisplayImage", {
+	enumerable: true,
+	get: function() {
+		return getChannelDisplayImage;
+	}
+});
+Object.defineProperty(exports, "getGroupChannelDisplayInfo", {
+	enumerable: true,
+	get: function() {
+		return getGroupChannelDisplayInfo;
+	}
+});
+Object.defineProperty(exports, "getLatestMessagePreview", {
+	enumerable: true,
+	get: function() {
+		return getLatestMessagePreview;
+	}
+});
+Object.defineProperty(exports, "getTranslatedMessageText", {
+	enumerable: true,
+	get: function() {
+		return getTranslatedMessageText;
+	}
+});
+Object.defineProperty(exports, "htmlToTextPlugin", {
+	enumerable: true,
+	get: function() {
+		return htmlToTextPlugin;
+	}
+});
+Object.defineProperty(exports, "imageToLink", {
+	enumerable: true,
+	get: function() {
+		return imageToLink;
+	}
+});
+Object.defineProperty(exports, "isDmChannel", {
+	enumerable: true,
+	get: function() {
+		return isDmChannel;
+	}
+});
+Object.defineProperty(exports, "pickNewest", {
+	enumerable: true,
+	get: function() {
+		return pickNewest;
+	}
+});
+Object.defineProperty(exports, "pickOldest", {
+	enumerable: true,
+	get: function() {
+		return pickOldest;
+	}
+});
+Object.defineProperty(exports, "plusPlusToEmphasis", {
+	enumerable: true,
+	get: function() {
+		return plusPlusToEmphasis;
+	}
+});
+Object.defineProperty(exports, "renderPreviewText", {
+	enumerable: true,
+	get: function() {
+		return renderPreviewText;
+	}
+});
+Object.defineProperty(exports, "toBaseImageDescriptors", {
+	enumerable: true,
+	get: function() {
+		return toBaseImageDescriptors;
+	}
+});
+Object.defineProperty(exports, "toGalleryItemDescriptors", {
+	enumerable: true,
+	get: function() {
+		return toGalleryItemDescriptors;
+	}
+});
+Object.defineProperty(exports, "useAriaIdentifiers", {
+	enumerable: true,
+	get: function() {
+		return useAriaIdentifiers;
+	}
+});
+Object.defineProperty(exports, "useChannelDisplayName", {
+	enumerable: true,
+	get: function() {
+		return useChannelDisplayName;
+	}
+});
+Object.defineProperty(exports, "useChannelHasMembersOnline", {
+	enumerable: true,
+	get: function() {
+		return useChannelHasMembersOnline;
+	}
+});
+Object.defineProperty(exports, "useChannelHeaderOnlineStatus", {
+	enumerable: true,
+	get: function() {
+		return useChannelHeaderOnlineStatus;
+	}
+});
+Object.defineProperty(exports, "useChannelMembershipState", {
+	enumerable: true,
+	get: function() {
+		return useChannelMembershipState;
+	}
+});
+Object.defineProperty(exports, "useChannelPreviewInfo", {
+	enumerable: true,
+	get: function() {
+		return useChannelPreviewInfo;
+	}
+});
+Object.defineProperty(exports, "useContextMenuContext", {
+	enumerable: true,
+	get: function() {
+		return useContextMenuContext;
+	}
+});
+Object.defineProperty(exports, "useDialogAnchor", {
+	enumerable: true,
+	get: function() {
+		return useDialogAnchor;
+	}
+});
+Object.defineProperty(exports, "useGalleryContext", {
+	enumerable: true,
+	get: function() {
+		return useGalleryContext;
+	}
+});
+Object.defineProperty(exports, "useIsChannelMuted", {
+	enumerable: true,
+	get: function() {
+		return useIsChannelMuted;
+	}
+});
+Object.defineProperty(exports, "useIsUserMuted", {
+	enumerable: true,
+	get: function() {
+		return useIsUserMuted;
+	}
+});
+Object.defineProperty(exports, "useMessageContext", {
+	enumerable: true,
+	get: function() {
+		return useMessageContext;
+	}
+});
+Object.defineProperty(exports, "useMessageTranslationViewContext", {
+	enumerable: true,
+	get: function() {
+		return useMessageTranslationViewContext;
+	}
+});
+Object.defineProperty(exports, "useModalContext", {
+	enumerable: true,
+	get: function() {
+		return useModalContext;
+	}
+});
+Object.defineProperty(exports, "useNotificationConfigurationContext", {
+	enumerable: true,
+	get: function() {
+		return useNotificationConfigurationContext;
+	}
+});
+Object.defineProperty(exports, "useNotifications", {
+	enumerable: true,
+	get: function() {
+		return useNotifications;
+	}
+});
+Object.defineProperty(exports, "useSelectedChannelState", {
+	enumerable: true,
+	get: function() {
+		return useSelectedChannelState;
+	}
+});
+Object.defineProperty(exports, "useStableCallback", {
+	enumerable: true,
+	get: function() {
+		return useStableCallback;
+	}
+});
+
+//# sourceMappingURL=useChannelHeaderOnlineStatus.6546ac83.js.map