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

package/dist/cjs/ListItemLayout.60c3b287.js

@@ -0,0 +1,2181 @@
+const require_useComponentContextIcons = require("./useComponentContextIcons.d16834d9.js");
+const require_Thread = require("./Thread.373af587.js");
+const require_useChannel = require("./useChannel.1004ed4c.js");
+let react = require("react");
+react = require_useComponentContextIcons.__toESM(react);
+let stream_chat = require("stream-chat");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = require_useComponentContextIcons.__toESM(clsx);
+let _react_aria_focus = require("@react-aria/focus");
+let _braintree_sanitize_url = require("@braintree/sanitize-url");
+let _stream_io_i18n = require("@stream-io/i18n");
+//#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/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 { IconArrowLeft, IconXmark } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.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_useComponentContextIcons.Button, {
+						appearance: "ghost",
+						"aria-label": t("dialog.prompt.goBack.ariaLabel", "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)(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_useComponentContextIcons.Button, {
+					appearance: "ghost",
+					"aria-label": t("common.close.ariaLabel", "Close"),
+					circular: true,
+					className: "str-chat__prompt__header__close-button",
+					onClick: close,
+					size: "md",
+					variant: "secondary",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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_useComponentContextIcons.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_useComponentContextIcons.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/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 || mantissa >= 10 ** precision ? 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/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/hooks/useIsDmChannel.ts
+var membersSelector = (nextValue) => ({
+	memberCount: nextValue.memberCount,
+	members: nextValue.members
+});
+/**
+* Reactively determines whether a channel is a direct-messaging channel.
+*
+* Subscribes to the channel's members state so the result recomputes when membership
+* changes, then delegates the actual check to the `isDmChannel` util. Defaults to the
+* channel from context; pass `channel` to check a specific one.
+*/
+var useIsDmChannel = ({ channel: channelOverride } = {}) => {
+	const contextChannel = require_useChannel.useChannel();
+	const channel = channelOverride ?? contextChannel;
+	const { client } = require_useComponentContextIcons.useChatContext();
+	require_useComponentContextIcons.useStateStore(channel.state, membersSelector);
+	return isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+};
+//#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, getInitialFocusElement, initialFocusStrategy, onClose, onCloseAttempt, open, role = "dialog" }) => {
+	const generatedDialogId = require_Thread.useStableId();
+	const resolvedDialogId = dialogId ?? `modal-dialog-${generatedDialogId}`;
+	const dialog = require_Thread.useModalDialog(resolvedDialogId);
+	const isOpen = require_Thread.useModalDialogIsOpen(resolvedDialogId);
+	const isTopmost = require_Thread.useModalDialogIsTopmost(resolvedDialogId);
+	const overlayRef = (0, react.useRef)(null);
+	const dialogRef = (0, react.useRef)(null);
+	const closeButtonRef = (0, react.useRef)(null);
+	const closingRef = (0, react.useRef)(false);
+	const { theme } = require_useComponentContextIcons.useChatContext();
+	const { NotificationList: NotificationList$1 = require_Thread.NotificationList } = require_useComponentContextIcons.useComponentContext();
+	const { className: dialogRootClassName, onKeyDown: dialogRootOnKeyDown, ...dialogRootPropsRest } = dialogRootProps ?? {};
+	const dialogLabelingBaseId = resolvedDialogId;
+	const resolvedInitialFocusStrategy = initialFocusStrategy ?? "firstElement";
+	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 || !isTopmost) return;
+		if (event.key === "Escape") {
+			maybeClose("escape", event);
+			return;
+		}
+		if (event.key === "Enter" && event.target === dialogRef.current) {
+			const target = dialogRef.current?.querySelector("[data-autofocus]");
+			if (target) {
+				event.preventDefault();
+				target.focus();
+			}
+		}
+	};
+	(0, react.useEffect)(() => {
+		if (!open) {
+			closingRef.current = false;
+			if (isOpen) dialog.close();
+			return;
+		}
+		if (open && !isOpen && !closingRef.current) dialog.open();
+	}, [
+		dialog,
+		isOpen,
+		open
+	]);
+	(0, react.useEffect)(() => {
+		if (!open || !isOpen || !isTopmost || !getInitialFocusElement && resolvedInitialFocusStrategy === "firstElement") return;
+		const frame = requestAnimationFrame(() => {
+			const dialogElement = dialogRef.current;
+			if (!dialogElement) return;
+			(getInitialFocusElement?.(dialogElement) ?? dialogElement).focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		getInitialFocusElement,
+		isOpen,
+		isTopmost,
+		open,
+		resolvedInitialFocusStrategy
+	]);
+	if (!open || !isOpen) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.DialogPortalEntry, {
+		dialogId: resolvedDialogId,
+		dialogManagerId: require_Thread.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 && !getInitialFocusElement && resolvedInitialFocusStrategy === "firstElement",
+						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,
+							ref: dialogRef,
+							role,
+							tabIndex: isTopmost ? 0 : -1,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Thread.DialogManagerProvider, {
+								id: `${resolvedDialogId}-floating-dialog-manager`,
+								portalDestinationProps: {
+									captureOutsideClicks: true,
+									className: "str-chat__modal__floating-dialog-overlay"
+								},
+								children: [children, isTopmost && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thread.AriaLiveOutlet, { layer: 1 })]
+							})
+						})
+					}),
+					/* @__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/Attachment/components/DownloadButton.tsx
+/**
+* Icon download control for {@link Audio} and {@link FileAttachment} rows.
+* (BaseImage defines its own small download link when `showDownloadButtonOnError` is used.)
+*/
+var DownloadButton = ({ assetUrl, className, suggestedFileName, tooltipTitle }) => {
+	const { IconDownload } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.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("common.downloadAttachment.ariaLabel", "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("common.downloadAttachment.title", "Download Attachment"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__button__content",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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_useComponentContextIcons.useTranslationContext();
+	const { IconImage } = require_useComponentContextIcons.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-label": t("baseImage.imagePlaceholder.imageFailedLoad.ariaLabel", "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)(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_useComponentContextIcons.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 = () => require_useComponentContextIcons.requireContext((0, react.useContext)(GalleryContext), "useGalleryContext", "Gallery");
+//#endregion
+//#region src/components/Gallery/GalleryHeader.tsx
+var normalizeTimestamp = (timestamp) => {
+	if (!timestamp) return void 0;
+	return (0, _stream_io_i18n.isDate)(timestamp) ? timestamp.toISOString() : timestamp;
+};
+/**
+* Reads the timestamp off the gallery item: the gallery renders outside any `MessageProvider`, and
+* channel media mixes items from many messages.
+*/
+var GalleryTimestamp = ({ createdAt }) => {
+	const { t, tDateTimeParser } = require_useComponentContextIcons.useTranslationContext();
+	const normalizedTimestamp = normalizeTimestamp(createdAt);
+	const when = (0, react.useMemo)(() => (0, _stream_io_i18n.getDateString)({
+		messageCreatedAt: normalizedTimestamp,
+		t,
+		tDateTimeParser,
+		timestampTranslationKey: "timestamp.GalleryTimestamp"
+	}), [
+		normalizedTimestamp,
+		t,
+		tDateTimeParser
+	]);
+	if (!when) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+		className: "str-chat__gallery__timestamp",
+		dateTime: normalizedTimestamp,
+		children: when
+	});
+};
+var GalleryHeader = ({ currentItem }) => {
+	const { IconArrowDownCircle, IconXmark } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const { client } = require_useComponentContextIcons.useChatContext();
+	const modalContext = (0, react.useContext)(ModalContext);
+	const { createdAt, user } = currentItem;
+	const headerTitle = !!user?.id && user.id === client.userID && t("common.you.label", "You") || user?.name || user?.id || currentItem.title || t("common.userUploadedContent.label", "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("common.downloadAttachment.ariaLabel", "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
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GalleryTimestamp, { createdAt })]
+			}),
+			/* @__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)(IconArrowDownCircle, {})
+				}) : null, modalContext?.close ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useComponentContextIcons.Button, {
+					"aria-label": t("common.close.ariaLabel", "Close"),
+					className: "str-chat__gallery__action-button str-chat__gallery__action-button--close",
+					onClick: modalContext.close,
+					title: t("common.close.ariaLabel", "Close"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconXmark, {})
+				}) : null]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/VideoPlayer/VideoPlayer.tsx
+var ReactPlayer = react.default.lazy(() => Promise.resolve().then(() => require("./ReactPlayerWrapper.f04b1d06.js")));
+var VideoPlayer = ({ controls = true, isPlaying, thumbnailUrl, videoUrl }) => {
+	const { LoadingIndicator: LoadingIndicator$1 = require_Thread.LoadingIndicator, VideoPlayer: VideoPlayerContext } = require_useComponentContextIcons.useComponentContext();
+	return VideoPlayerContext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoPlayerContext, {
+		controls,
+		isPlaying,
+		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, {
+			controls,
+			isPlaying,
+			thumbnailUrl,
+			videoUrl
+		})
+	});
+};
+//#endregion
+//#region src/components/VideoPlayer/VideoThumbnail.tsx
+var VideoThumbnail = ({ className, onPlay, ...imageProps }) => {
+	const { IconPlayFill } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.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_useComponentContextIcons.Button, {
+			appearance: "solid",
+			"aria-label": t("videoPlayer.videoThumbnail.playVideo.ariaLabel", "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)(IconPlayFill, {})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__message-attachment__video-thumbnail__play-indicator",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconPlayFill, {})
+		})]
+	});
+};
+//#endregion
+//#region src/components/Gallery/GalleryUI.tsx
+var SWIPE_THRESHOLD = 50;
+var TRANSITION_DURATION = 300;
+var GalleryUI = () => {
+	const { IconChevronLeft, IconChevronRight } = require_useComponentContextIcons.useComponentContextIcons();
+	const { t } = require_useComponentContextIcons.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("gallery.ui.previousImage.ariaLabel", "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)(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("gallery.ui.nextImage.ariaLabel", "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)(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_useComponentContextIcons.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_useComponentContextIcons.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/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/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_Thread.useStableId();
+	const switchId = id ?? `str-chat__switch-field-${generatedSwitchId}`;
+	const switchLabelId = `${switchId}-label`;
+	const inputRef = (0, react.useRef)(null);
+	const announce = (0, react.useContext)(require_Thread.AriaLiveAnnouncerContext)?.announce;
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	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 childLabelId = ((0, react.isValidElement)(children) ? children : void 0)?.props.id;
+	const resolvedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? title ? switchLabelId : childLabelId : void 0);
+	const resolveAnnouncementName = () => {
+		if (title) return title;
+		if (ariaLabel) return ariaLabel;
+		if (resolvedAriaLabelledBy) {
+			const labelEl = document.getElementById(resolvedAriaLabelledBy);
+			return ((labelEl?.querySelector(".str-chat__form__switch-field__label__text"))?.textContent || labelEl?.textContent || "").trim() || void 0;
+		}
+	};
+	const handleChange = (event) => {
+		if (!isControlled) setUncontrolledChecked(event.target.checked);
+		onChange?.(event);
+		const setting = resolveAnnouncementName();
+		if (!announce || !setting) return;
+		announce(event.target.checked ? t("form.switchField.enabled.ariaLabel", "{{ setting }} enabled", { setting }) : t("form.switchField.disabled.ariaLabel", "{{ setting }} disabled", { setting }), { priority: "polite" });
+	};
+	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();
+	};
+	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/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) => {
+	const { IconCheckmark, IconExclamationMark } = require_useComponentContextIcons.useComponentContextIcons();
+	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)(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)(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_Thread.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", {
+							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", {
+							className: "str-chat__form-text-input__trailing",
+							children: trailing
+						}) : null
+					]
+				}), messageInside ? fieldMessage : null]
+			}),
+			messageInside ? null : fieldMessage
+		]
+	});
+});
+//#endregion
+//#region src/components/ChannelListItem/hooks/useIsUserMuted.ts
+var useIsUserMuted = (targetUserId) => {
+	const { mutes } = require_useComponentContextIcons.useChatContext();
+	return (0, react.useMemo)(() => !!targetUserId && mutes.some((mute) => mute.target?.id === targetUserId), [mutes, targetUserId]);
+};
+//#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 NO_MODAL_FALLBACK = { close: () => void 0 };
+/**
+* Works outside a modal: `Alert`, `Prompt` and `Viewer` are usable standalone, reading only
+* `dialogId` for aria wiring, and get a no-op `close`.
+*/
+var useModalContext = () => (0, react.useContext)(ModalContext) ?? NO_MODAL_FALLBACK;
+//#endregion
+//#region src/components/ChannelHeader/hooks/useChannelHasMembersOnline.ts
+var watchersSelector = (nextValue) => ({ watchers: nextValue.watchers });
+/**
+* Reactively reports whether OTHER members are currently online (watching the channel).
+*
+* Subscribes to the channel's watcher state instead of manually tracking
+* `user.watching.start/stop` events. Watchers include the current user, but "are other
+* members online" must reflect only other users — otherwise (e.g. in a DM) the other
+* participant looks online as soon as the local user starts watching.
+*/
+var useChannelHasMembersOnline = ({ channel: channelOverride, enabled = true } = {}) => {
+	const contextChannel = require_useChannel.useChannel();
+	const channel = channelOverride ?? contextChannel;
+	const { client } = require_useComponentContextIcons.useChatContext();
+	const { watchers } = require_useComponentContextIcons.useStateStore(channel.state, watchersSelector);
+	if (!enabled) return false;
+	const ownUserId = client.user?.id;
+	return Object.keys(watchers).some((id) => id !== ownUserId);
+};
+//#endregion
+//#region src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts
+var memberCountSelector = (nextValue) => ({ memberCount: nextValue.memberCount });
+var watcherCountSelector = (nextValue) => ({ watcherCount: nextValue.watcherCount });
+/**
+* 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).
+*
+* Reactive counts come from the channel's unified reactive state; DM detection and
+* "others online" are delegated to `useIsDmChannel` / `useChannelHasMembersOnline`, which
+* subscribe to the state they each need.
+*/
+function useChannelHeaderOnlineStatus() {
+	const { t } = require_useComponentContextIcons.useTranslationContext();
+	const channel = require_useChannel.useChannel();
+	const { memberCount } = require_useComponentContextIcons.useStateStore(channel.state, memberCountSelector);
+	const { watcherCount } = require_useComponentContextIcons.useStateStore(channel.state, watcherCountSelector);
+	const isDirectMessagingChannel = useIsDmChannel();
+	const hasMembersOnline = useChannelHasMembersOnline({ enabled: isDirectMessagingChannel });
+	if (!memberCount) return null;
+	if (isDirectMessagingChannel) return hasMembersOnline ? t("common.online.label", "Online") : t("common.offline.label", "Offline");
+	return `${t("channelHeader.online.members.label", "{{ memberCount }} members", { memberCount })} · ${t("channelHeader.online.online.label", "{{ watcherCount }} online", { watcherCount })}`;
+}
+//#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
+Object.defineProperty(exports, "Alert", {
+	enumerable: true,
+	get: function() {
+		return Alert;
+	}
+});
+Object.defineProperty(exports, "BaseImage", {
+	enumerable: true,
+	get: function() {
+		return BaseImage;
+	}
+});
+Object.defineProperty(exports, "Checkbox", {
+	enumerable: true,
+	get: function() {
+		return Checkbox;
+	}
+});
+Object.defineProperty(exports, "Checkmark", {
+	enumerable: true,
+	get: function() {
+		return Checkmark;
+	}
+});
+Object.defineProperty(exports, "DownloadButton", {
+	enumerable: true,
+	get: function() {
+		return DownloadButton;
+	}
+});
+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, "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, "ModalContext", {
+	enumerable: true,
+	get: function() {
+		return ModalContext;
+	}
+});
+Object.defineProperty(exports, "ModalContextProvider", {
+	enumerable: true,
+	get: function() {
+		return ModalContextProvider;
+	}
+});
+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, "VideoPlayer", {
+	enumerable: true,
+	get: function() {
+		return VideoPlayer;
+	}
+});
+Object.defineProperty(exports, "VideoThumbnail", {
+	enumerable: true,
+	get: function() {
+		return VideoThumbnail;
+	}
+});
+Object.defineProperty(exports, "formatTime", {
+	enumerable: true,
+	get: function() {
+		return formatTime;
+	}
+});
+Object.defineProperty(exports, "isDmChannel", {
+	enumerable: true,
+	get: function() {
+		return isDmChannel;
+	}
+});
+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, "useChannelHasMembersOnline", {
+	enumerable: true,
+	get: function() {
+		return useChannelHasMembersOnline;
+	}
+});
+Object.defineProperty(exports, "useChannelHeaderOnlineStatus", {
+	enumerable: true,
+	get: function() {
+		return useChannelHeaderOnlineStatus;
+	}
+});
+Object.defineProperty(exports, "useGalleryContext", {
+	enumerable: true,
+	get: function() {
+		return useGalleryContext;
+	}
+});
+Object.defineProperty(exports, "useIsUserMuted", {
+	enumerable: true,
+	get: function() {
+		return useIsUserMuted;
+	}
+});
+Object.defineProperty(exports, "useModalContext", {
+	enumerable: true,
+	get: function() {
+		return useModalContext;
+	}
+});
+
+//# sourceMappingURL=ListItemLayout.60c3b287.js.map