stream-chat-react 14.5.0 → 14.6.0

package/dist/cjs/channel-detail.js

@@ -0,0 +1,3007 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useNotificationApi = require("./useNotificationApi.eb753f31.js");
+const require_useChannelHeaderOnlineStatus = require("./useChannelHeaderOnlineStatus.6546ac83.js");
+let react = require("react");
+react = require_useNotificationApi.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let stream_chat = require("stream-chat");
+let clsx = require("clsx");
+clsx = require_useNotificationApi.__toESM(clsx);
+let lodash_debounce = require("lodash.debounce");
+lodash_debounce = require_useNotificationApi.__toESM(lodash_debounce);
+let lodash_uniqby = require("lodash.uniqby");
+lodash_uniqby = require_useNotificationApi.__toESM(lodash_uniqby);
+let react_virtuoso = require("react-virtuoso");
+//#region src/plugins/ChannelDetail/SectionNavigator/SectionNavigator.tsx
+var SECTION_NAVIGATOR_LAYOUT = {
+	inline: "inline",
+	tabs: "tabs"
+};
+var DEFAULT_TABS_LAYOUT_MIN_WIDTH = 640;
+var defaultCreateLayoutObserver = ({ element, setLayout, tabsLayoutMinWidth }) => {
+	if (typeof ResizeObserver === "undefined") return;
+	const observedElement = element.parentElement ?? element;
+	const updateLayout = (width) => {
+		if (width <= 0) return;
+		setLayout(width < tabsLayoutMinWidth ? SECTION_NAVIGATOR_LAYOUT.inline : SECTION_NAVIGATOR_LAYOUT.tabs);
+	};
+	const observer = new ResizeObserver(([entry]) => {
+		updateLayout(entry.contentRect.width);
+	});
+	updateLayout(observedElement.getBoundingClientRect().width);
+	observer.observe(observedElement);
+	return () => observer.disconnect();
+};
+var SectionNavigatorContext = (0, react.createContext)({
+	closeNavigation: () => void 0,
+	history: [],
+	historyPop: () => void 0,
+	historyPush: () => void 0,
+	isNavigationOpen: false,
+	layout: SECTION_NAVIGATOR_LAYOUT.tabs,
+	openNavigation: () => void 0
+});
+var useSectionNavigatorContext = () => (0, react.useContext)(SectionNavigatorContext);
+var getCurrentRoute = (history) => history[history.length - 1];
+var SectionNavigator = ({ className, createLayoutObserver = defaultCreateLayoutObserver, defaultLayout = SECTION_NAVIGATOR_LAYOUT.tabs, initialHistory, layout: controlledLayout, onLayoutChange, sections, tabsLayoutMinWidth = DEFAULT_TABS_LAYOUT_MIN_WIDTH, ...props }) => {
+	const rootRef = (0, react.useRef)(null);
+	const [internalLayout, setInternalLayout] = (0, react.useState)(defaultLayout);
+	const [history, setHistory] = (0, react.useState)(() => initialHistory ?? (sections[0] ? [{ id: sections[0].id }] : []));
+	const [isNavigationOpen, setIsNavigationOpen] = (0, react.useState)(false);
+	const layout = controlledLayout ?? internalLayout;
+	const currentRoute = getCurrentRoute(history);
+	const currentSection = sections.find((section) => section.id === currentRoute?.id);
+	const activeSection = currentSection ?? sections[0];
+	const isInlineLayout = layout === SECTION_NAVIGATOR_LAYOUT.inline;
+	const showDockedNavigation = !isInlineLayout || !currentSection;
+	const openNavigation = (0, react.useCallback)(() => setIsNavigationOpen(true), []);
+	const closeNavigation = (0, react.useCallback)(() => setIsNavigationOpen(false), []);
+	const historyPush = (0, react.useCallback)((route) => {
+		setHistory((history) => {
+			if (getCurrentRoute(history)?.id === route.id) return history;
+			if (layout === SECTION_NAVIGATOR_LAYOUT.tabs) return [route];
+			return [...history, route];
+		});
+	}, [layout]);
+	const historyPop = (0, react.useCallback)(() => {
+		setHistory((history) => history.length > 1 ? history.slice(0, -1) : history);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!isInlineLayout) setIsNavigationOpen(false);
+	}, [isInlineLayout]);
+	(0, react.useEffect)(() => {
+		if (!isNavigationOpen) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") closeNavigation();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [closeNavigation, isNavigationOpen]);
+	(0, react.useEffect)(() => {
+		onLayoutChange?.(layout);
+	}, [layout, onLayoutChange]);
+	(0, react.useEffect)(() => {
+		if (controlledLayout) return;
+		if (!rootRef.current) return;
+		return createLayoutObserver({
+			element: rootRef.current,
+			setLayout: setInternalLayout,
+			tabsLayoutMinWidth
+		});
+	}, [
+		controlledLayout,
+		createLayoutObserver,
+		tabsLayoutMinWidth
+	]);
+	(0, react.useEffect)(() => {
+		setHistory((history) => {
+			const currentRoute = getCurrentRoute(history);
+			const currentRouteHasSection = sections.some((section) => section.id === currentRoute?.id);
+			if (!currentRoute) return sections[0] ? [{ id: sections[0].id }] : [];
+			if (currentRouteHasSection) return history;
+			return sections[0] ? [{ id: sections[0].id }] : [];
+		});
+	}, [sections]);
+	const contextValue = (0, react.useMemo)(() => ({
+		closeNavigation,
+		history,
+		historyPop,
+		historyPush,
+		isNavigationOpen,
+		layout,
+		openNavigation
+	}), [
+		closeNavigation,
+		history,
+		historyPop,
+		historyPush,
+		isNavigationOpen,
+		layout,
+		openNavigation
+	]);
+	const Content = activeSection?.SectionContent;
+	const navigation = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "str-chat__section-navigator__navigation",
+		children: sections.map((section) => {
+			const NavButton = section.NavButton;
+			const selected = activeSection?.id === section.id;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "str-chat__section-navigator__navigation-item",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavButton, {
+					className: "str-chat__section-navigator__navigation-item__nav-button",
+					sectionId: section.id,
+					select: () => {
+						historyPush({ id: section.id });
+						closeNavigation();
+					},
+					selected
+				})
+			}, section.id);
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("str-chat__section-navigator", className, { "str-chat__section-navigator--inline": isInlineLayout }),
+			"data-layout": layout,
+			ref: rootRef,
+			...props,
+			children: [
+				showDockedNavigation && navigation,
+				Content && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "str-chat__section-navigator__content",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Content, { layout })
+				}),
+				isInlineLayout && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, clsx.default)("str-chat__section-navigator__navigation-overlay", { "str-chat__section-navigator__navigation-overlay--open": isNavigationOpen }),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						"aria-hidden": true,
+						className: "str-chat__section-navigator__navigation-scrim",
+						onClick: closeNavigation,
+						tabIndex: -1,
+						type: "button"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "str-chat__section-navigator__navigation-drawer",
+						children: navigation
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/SectionNavigator/SectionNavigatorHeader.tsx
+/**
+* Generic header for content rendered inside a `SectionNavigator`. It renders a
+* `Prompt.Header` and, in the inline layout (where the navigation sidebar is not
+* shown), prepends a hamburger button that opens the navigation drawer. The
+* hamburger is omitted on nested views that already show a back button
+* (`goBack`), where it would compete with the back affordance.
+*/
+var SectionNavigatorHeader = (props) => {
+	const { t } = require_useNotificationApi.useTranslationContext("SectionNavigatorHeader");
+	const { layout, openNavigation } = useSectionNavigatorContext();
+	const MenuButton = (0, react.useMemo)(() => {
+		if (layout !== SECTION_NAVIGATOR_LAYOUT.inline) return void 0;
+		if (props.goBack) return void 0;
+		return function SectionNavigatorHeaderMenuButton() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+				appearance: "ghost",
+				"aria-label": t("Open menu"),
+				circular: true,
+				className: "str-chat__section-navigator__header-menu-button",
+				onClick: openNavigation,
+				size: "md",
+				variant: "secondary",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconMenu, {})
+			});
+		};
+	}, [
+		layout,
+		openNavigation,
+		props.goBack,
+		t
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Header, {
+		...props,
+		LeadingContent: MenuButton
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/ChannelDetailNavButton.tsx
+/**
+* Underlying button shared by all ChannelDetail section nav buttons. Renders a
+* `ListItemLayout` as a `<button>` and wires the SectionNavigator selection
+* state into `aria-current` and the click handler.
+*/
+var ChannelDetailNavButton = ({ className, LeadingIcon, sectionId: _sectionId, select, selected, title, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	LeadingIcon,
+	RootElement: "button",
+	rootProps: {
+		...props,
+		"aria-current": selected ? "page" : void 0,
+		className: (0, clsx.default)("str-chat__channel-detail__nav-button", className),
+		onClick: select
+	},
+	selected,
+	title
+});
+//#endregion
+//#region src/plugins/ChannelDetail/ChannelDetailContext.tsx
+var ChannelDetailContext = react.default.createContext(void 0);
+var ChannelDetailProvider = ({ channel, children }) => {
+	const value = (0, react.useMemo)(() => ({ channel }), [channel]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailContext.Provider, {
+		value,
+		children
+	});
+};
+var useChannelDetailContext = () => {
+	const contextValue = (0, react.useContext)(ChannelDetailContext);
+	if (!contextValue) throw new Error("The useChannelDetailContext hook was called outside of ChannelDetailProvider.");
+	return contextValue;
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
+var ChannelFilesEmptyList = () => {
+	const { t } = require_useNotificationApi.useTranslationContext("ChannelFilesEmptyList");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__files-view__empty-state",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconFolder, { className: "str-chat__channel-detail__files-view__empty-state__icon" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "str-chat__channel-detail__files-view__empty-state__content",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "str-chat__channel-detail__files-view__empty-state__title",
+				children: t("No files")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "str-chat__channel-detail__files-view__empty-state__description",
+				children: t("Share a file to see it here")
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/ChannelDetailListLoadingIndicator.tsx
+var searchSourceFooterStateSelector = (state) => ({
+	hasNextPage: state.hasNext,
+	isLoading: state.isLoading
+});
+var ChannelDetailListLoadingIndicator = ({ searchSource }) => {
+	const { hasNextPage, isLoading } = require_useNotificationApi.useStateStore(searchSource.state, searchSourceFooterStateSelector);
+	if (!hasNextPage || !isLoading) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "str-chat__loading-indicator-placeholder",
+		children: isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.LoadingIndicator, {})
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesView.utils.ts
+/** Attachment types listed by the files view (everything that is not an image/video). */
+var FILE_ATTACHMENT_TYPES = ["file", "audio"];
+var FILE_ATTACHMENT_TYPE_SET = new Set(FILE_ATTACHMENT_TYPES);
+var normalizeTimestamp$1 = (timestamp) => {
+	if (!timestamp) return void 0;
+	return require_useNotificationApi.isDate(timestamp) ? timestamp.toISOString() : timestamp;
+};
+var isChannelFileAttachment = (attachment) => !(0, stream_chat.isScrapedContent)(attachment) && !!attachment.type && FILE_ATTACHMENT_TYPE_SET.has(attachment.type);
+var byCreatedAtDesc = (a, b) => (b.createdAt ?? "").localeCompare(a.createdAt ?? "");
+/**
+* Flattens messages into file/audio attachment items organized into descending
+* month/year sections (newest first), in a single pass over the attachments.
+*
+* The result is shaped for GroupedVirtuoso: a single flat `items` array (items
+* grouped contiguously by section) plus `groupCounts`/`sections` aligned with
+* it, so the view never has to re-flatten. The raw attachment is kept
+* untransformed; only the carrying message timestamp is captured for headers.
+*/
+var toChannelFileSections = (messages) => {
+	const groups = [];
+	const groupIndexByKey = /* @__PURE__ */ new Map();
+	messages.forEach((message) => {
+		const createdAt = normalizeTimestamp$1(message.created_at);
+		const key = createdAt ? createdAt.slice(0, 7) : "unknown";
+		message.attachments?.forEach((attachment, index) => {
+			if (!isChannelFileAttachment(attachment)) return;
+			const item = {
+				attachment,
+				createdAt,
+				id: `${message.id}-${index}`
+			};
+			const existingIndex = groupIndexByKey.get(key);
+			if (existingIndex === void 0) {
+				groupIndexByKey.set(key, groups.length);
+				groups.push({
+					items: [item],
+					key,
+					timestamp: createdAt
+				});
+			} else groups[existingIndex].items.push(item);
+		});
+	});
+	groups.forEach((group) => {
+		group.items.sort(byCreatedAtDesc);
+		group.timestamp = group.items[0]?.createdAt;
+	});
+	groups.sort((a, b) => (b.timestamp ?? "").localeCompare(a.timestamp ?? ""));
+	return {
+		groupCounts: groups.map((group) => group.items.length),
+		items: groups.flatMap((group) => group.items),
+		sections: groups.map(({ key, timestamp }) => ({
+			key,
+			timestamp
+		}))
+	};
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelFilesView/useChannelFilesSearch.ts
+var CHANNEL_FILES_SEARCH_PAGE_SIZE = 30;
+var channelFilesSearchSourceStateSelector = (state) => ({
+	isLoading: state.isLoading,
+	messages: state.items
+});
+var useChannelFilesSearch = () => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const channelFilesSearchSource = (0, react.useMemo)(() => {
+		const source = new stream_chat.MessageSearchSource(client, {
+			allowEmptySearchString: true,
+			pageSize: CHANNEL_FILES_SEARCH_PAGE_SIZE,
+			resetOnNewSearchQuery: false
+		});
+		source.messageSearchChannelFilters = { cid: channel.cid };
+		source.messageSearchFilters = { "attachments.type": { $in: [...FILE_ATTACHMENT_TYPES] } };
+		return source;
+	}, [channel.cid, client]);
+	const { isLoading, messages } = require_useNotificationApi.useStateStore(channelFilesSearchSource.state, channelFilesSearchSourceStateSelector);
+	const { groupCounts, items, sections } = (0, react.useMemo)(() => toChannelFileSections(messages ?? []), [messages]);
+	(0, react.useEffect)(() => {
+		channelFilesSearchSource.activate();
+		channelFilesSearchSource.search("");
+		return () => {
+			channelFilesSearchSource.cancelScheduledQuery();
+		};
+	}, [channelFilesSearchSource]);
+	return {
+		channelFilesSearchSource,
+		fileItems: items,
+		groupCounts,
+		hasResultsLoaded: Array.isArray(messages),
+		isLoading,
+		sections
+	};
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesView.tsx
+var ChannelFilesItem = (0, react.forwardRef)(function ChannelFilesItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: (0, clsx.default)("str-chat__channel-detail__files-view__item", className),
+		ref
+	});
+});
+var ChannelFilesGroup = (0, react.forwardRef)(function ChannelFilesGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: (0, clsx.default)("str-chat__channel-detail__files-view__group", className),
+		ref
+	});
+});
+var ChannelFilesSectionHeader = ({ timestamp }) => {
+	const { t, tDateTimeParser } = require_useNotificationApi.useTranslationContext("ChannelFilesView");
+	const label = require_useNotificationApi.getDateString({
+		format: "MMMM YYYY",
+		messageCreatedAt: timestamp,
+		t,
+		tDateTimeParser
+	});
+	if (!label) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "str-chat__channel-detail__files-view__section-header",
+		children: label
+	});
+};
+var getAttachmentFileName = (attachment) => attachment.title || attachment.fallback || "";
+var ChannelFileListItem = ({ item }) => {
+	const { attachment } = item;
+	const fileName = getAttachmentFileName(attachment);
+	const assetUrl = attachment.asset_url;
+	const LeadingSlot = (0, react.useMemo)(() => function FileListItemIcon() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.FileIcon, {
+			className: "str-chat__channel-detail__files-view__list-item__icon",
+			fileName,
+			mimeType: attachment.mime_type,
+			size: "md"
+		});
+	}, [attachment.mime_type, fileName]);
+	const sharedProps = (0, react.useMemo)(() => ({
+		LeadingSlot,
+		subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.FileSizeIndicator, { fileSize: attachment.file_size }),
+		subtitleClassName: "str-chat__channel-detail__files-view__list-item__size",
+		title: fileName,
+		titleClassName: "str-chat__channel-detail__files-view__list-item__name"
+	}), [
+		attachment.file_size,
+		fileName,
+		LeadingSlot
+	]);
+	const linkRootProps = (0, react.useMemo)(() => ({
+		className: "str-chat__channel-detail__files-view__list-item",
+		download: fileName || void 0,
+		href: assetUrl,
+		rel: "noopener noreferrer",
+		target: "_blank"
+	}), [assetUrl, fileName]);
+	const divRootProps = (0, react.useMemo)(() => ({ className: "str-chat__channel-detail__files-view__list-item" }), []);
+	if (assetUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		...sharedProps,
+		RootElement: "a",
+		rootProps: linkRootProps
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		...sharedProps,
+		RootElement: "div",
+		rootProps: divRootProps
+	});
+};
+var ChannelFilesView = () => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { channelFilesSearchSource, fileItems, groupCounts, hasResultsLoaded, sections } = useChannelFilesSearch();
+	const groupContent = (0, react.useCallback)((groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelFilesSectionHeader, { timestamp: sections[groupIndex]?.timestamp }), [sections]);
+	const itemContent = (0, react.useCallback)((index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelFileListItem, { item: fileItems[index] }), [fileItems]);
+	const atBottomStateChange = (0, react.useCallback)((atBottom) => {
+		if (atBottom) channelFilesSearchSource.search();
+	}, [channelFilesSearchSource]);
+	const EmptyPlaceholder = (0, react.useMemo)(() => function ChannelFilesEmptyPlaceholder() {
+		return hasResultsLoaded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelFilesEmptyList, {}) : null;
+	}, [hasResultsLoaded]);
+	const Footer = (0, react.useMemo)(() => function ChannelFilesListFooter() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailListLoadingIndicator, { searchSource: channelFilesSearchSource });
+	}, [channelFilesSearchSource]);
+	const components = (0, react.useMemo)(() => ({
+		EmptyPlaceholder,
+		Footer,
+		Group: ChannelFilesGroup,
+		Item: ChannelFilesItem
+	}), [EmptyPlaceholder, Footer]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__files-view",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
+			close,
+			title: t("Files")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+			className: "str-chat__channel-detail__files-view__body",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_virtuoso.GroupedVirtuoso, {
+				atBottomStateChange,
+				className: "str-chat__virtualized-list str-chat__channel-detail__files-view__list",
+				components,
+				groupContent,
+				groupCounts,
+				itemContent
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
+var toError$1 = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred");
+var getDisplayName = (name, fallback) => name || fallback || "";
+var BlockUserActionIcon$1 = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
+var DeleteChatActionIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconDelete, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--delete-chat" });
+var MuteActionIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+var MutedActionIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
+var LeaveChannelActionIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconLeave, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--leave-channel" });
+var channelManagementViewActionClassName = "str-chat__channel-management-view-action";
+var blockedUsersSelector$1 = ({ userIds }) => ({ userIds });
+var ChannelManagementConfirmationAlert = ({ action, cancelLabel, confirmLabel, description, isSubmitting, onCancel, onConfirm, testId, title }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Root, {
+	className: (0, clsx.default)("str-chat__channel-management-confirmation-alert", { [`str-chat__channel-management-confirmation-alert--${action}`]: action }),
+	"data-testid": testId,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Alert.Header, {
+		description,
+		title
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Actions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+		appearance: "solid",
+		"data-testid": `${testId}-confirm-button`,
+		disabled: isSubmitting,
+		onClick: onConfirm,
+		size: "md",
+		variant: "danger",
+		children: confirmLabel
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+		appearance: "outline",
+		autoFocus: true,
+		"data-testid": `${testId}-cancel-button`,
+		disabled: isSubmitting,
+		onClick: onCancel,
+		size: "md",
+		variant: "secondary",
+		children: cancelLabel
+	})] })]
+});
+var useOtherMember = () => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	return (0, react.useMemo)(() => {
+		const stateMembers = Object.values(channel.state?.members ?? {});
+		return (stateMembers.length ? stateMembers : channel.data?.members ?? []).find((member) => member.user?.id && member.user.id !== client.user?.id);
+	}, [channel, client.user?.id]);
+};
+var useChannelManagementActionFilterState = () => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const otherMember = useOtherMember();
+	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+	const isGroupChannel = !resolvedIsDmChannel;
+	const ownCapabilities = channel.data?.own_capabilities;
+	const isDmChannelWithOtherUser = resolvedIsDmChannel && !!otherMember;
+	return {
+		canBlockUser: isDmChannelWithOtherUser && ownCapabilities?.includes("ban-channel-members"),
+		canDeleteChat: ownCapabilities?.includes("delete-channel"),
+		canLeaveChannel: isGroupChannel && ownCapabilities?.includes("leave-channel"),
+		canMuteChannel: ownCapabilities?.includes("mute-channel"),
+		canMuteUser: isDmChannelWithOtherUser
+	};
+};
+var useBaseChannelManagementActionSetFilter = (channelManagementActionSet) => {
+	const { canBlockUser, canDeleteChat, canLeaveChannel, canMuteChannel, canMuteUser } = useChannelManagementActionFilterState();
+	return (0, react.useMemo)(() => channelManagementActionSet.filter((action) => {
+		switch (action.type) {
+			case "blockUser": return canBlockUser;
+			case "deleteChat": return canDeleteChat;
+			case "muteChannel": return canMuteChannel;
+			case "muteUser": return canMuteUser;
+			case "leaveChannel": return canLeaveChannel;
+			default: return true;
+		}
+	}), [
+		canBlockUser,
+		canDeleteChat,
+		canLeaveChannel,
+		canMuteChannel,
+		canMuteUser,
+		channelManagementActionSet
+	]);
+};
+var ChannelMuteAction = () => {
+	const { channel } = useChannelDetailContext();
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { muted: channelMuted } = require_useChannelHeaderOnlineStatus.useIsChannelMuted(channel);
+	const [optimisticChannelMuted, setOptimisticChannelMuted] = (0, react.useState)(channelMuted);
+	(0, react.useEffect)(() => {
+		setOptimisticChannelMuted(channelMuted);
+	}, [channelMuted]);
+	const toggleChannelMuteRequest = require_useChannelHeaderOnlineStatus.useStableCallback((nextMuted, targetChannel) => {
+		if (!nextMuted) return targetChannel.unmute().then(() => addNotification({
+			context: { channel: targetChannel },
+			emitter: "ChannelManagementView",
+			message: t("Channel unmuted"),
+			severity: "success",
+			type: "api:channel:unmute:success"
+		})).catch((error) => {
+			setOptimisticChannelMuted(channelMuted);
+			return addNotification({
+				context: { channel: targetChannel },
+				emitter: "ChannelManagementView",
+				error: toError$1(error),
+				message: t("Error unmuting channel"),
+				severity: "error",
+				type: "api:channel:unmute:failed"
+			});
+		});
+		return targetChannel.mute().then(() => addNotification({
+			context: { channel: targetChannel },
+			emitter: "ChannelManagementView",
+			message: t("Channel muted"),
+			severity: "success",
+			type: "api:channel:mute:success"
+		})).catch((error) => {
+			setOptimisticChannelMuted(channelMuted);
+			return addNotification({
+				context: { channel: targetChannel },
+				emitter: "ChannelManagementView",
+				error: toError$1(error),
+				message: t("Error muting channel"),
+				severity: "error",
+				type: "api:channel:mute:failed"
+			});
+		});
+	});
+	const toggleChannelMute = (0, react.useMemo)(() => (0, lodash_debounce.default)(toggleChannelMuteRequest, 1e3), [toggleChannelMuteRequest]);
+	(0, react.useEffect)(() => () => {
+		toggleChannelMute.cancel();
+	}, [toggleChannelMute]);
+	const toggleOptimisticChannelMute = (0, react.useCallback)(() => {
+		const nextMuted = !optimisticChannelMuted;
+		setOptimisticChannelMuted(nextMuted);
+		toggleChannelMute(nextMuted, channel);
+	}, [
+		channel,
+		optimisticChannelMuted,
+		toggleChannelMute
+	]);
+	const rootProps = (0, react.useMemo)(() => ({
+		"aria-pressed": optimisticChannelMuted,
+		className: (0, clsx.default)("str-chat__form__switch-field", channelManagementViewActionClassName),
+		onClick: toggleOptimisticChannelMute
+	}), [optimisticChannelMuted, toggleOptimisticChannelMute]);
+	const TrailingSlot = (0, react.useMemo)(() => {
+		function ChannelMuteSwitch() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Switch, {
+				on: optimisticChannelMuted,
+				presentation: true
+			});
+		}
+		return ChannelMuteSwitch;
+	}, [optimisticChannelMuted]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		LeadingIcon: optimisticChannelMuted ? MutedActionIcon : MuteActionIcon,
+		RootElement: "button",
+		rootProps,
+		title: optimisticChannelMuted ? t("Unmute chat") : t("Mute chat"),
+		TrailingSlot
+	});
+};
+var UserMuteAction$1 = () => {
+	const { client, mutes } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const otherMember = useOtherMember();
+	const userMuted = !!mutes.find((mute) => mute.target.id === otherMember?.user?.id);
+	const [optimisticUserMuted, setOptimisticUserMuted] = (0, react.useState)(userMuted);
+	(0, react.useEffect)(() => {
+		setOptimisticUserMuted(userMuted);
+	}, [userMuted]);
+	const otherMemberUserId = otherMember?.user?.id;
+	const toggleUserMuteRequest = require_useChannelHeaderOnlineStatus.useStableCallback((nextMuted, targetUserId) => {
+		if (!targetUserId) return;
+		if (!nextMuted) return client.unmuteUser(targetUserId).then(() => addNotification({
+			context: { channel },
+			emitter: "ChannelManagementView",
+			message: t("User unmuted"),
+			severity: "success",
+			type: "api:user:unmute:success"
+		})).catch((error) => {
+			setOptimisticUserMuted(userMuted);
+			return addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				error: toError$1(error),
+				message: t("Error unmuting user"),
+				severity: "error",
+				type: "api:user:unmute:failed"
+			});
+		});
+		return client.muteUser(targetUserId).then(() => addNotification({
+			context: { channel },
+			emitter: "ChannelManagementView",
+			message: t("User muted"),
+			severity: "success",
+			type: "api:user:mute:success"
+		})).catch((error) => {
+			setOptimisticUserMuted(userMuted);
+			return addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				error: toError$1(error),
+				message: t("Error muting user"),
+				severity: "error",
+				type: "api:user:mute:failed"
+			});
+		});
+	});
+	const toggleUserMute = (0, react.useMemo)(() => (0, lodash_debounce.default)(toggleUserMuteRequest, 1e3), [toggleUserMuteRequest]);
+	(0, react.useEffect)(() => () => {
+		toggleUserMute.cancel();
+	}, [toggleUserMute]);
+	const toggleOptimisticUserMute = (0, react.useCallback)(() => {
+		const nextMuted = !optimisticUserMuted;
+		setOptimisticUserMuted(nextMuted);
+		toggleUserMute(nextMuted, otherMemberUserId);
+	}, [
+		optimisticUserMuted,
+		otherMemberUserId,
+		toggleUserMute
+	]);
+	const rootProps = (0, react.useMemo)(() => ({
+		"aria-pressed": optimisticUserMuted,
+		className: (0, clsx.default)("str-chat__form__switch-field", channelManagementViewActionClassName),
+		onClick: toggleOptimisticUserMute
+	}), [optimisticUserMuted, toggleOptimisticUserMute]);
+	const TrailingSlot = (0, react.useMemo)(() => {
+		function UserMuteSwitch() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Switch, {
+				on: optimisticUserMuted,
+				presentation: true
+			});
+		}
+		return UserMuteSwitch;
+	}, [optimisticUserMuted]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		LeadingIcon: optimisticUserMuted ? MutedActionIcon : MuteActionIcon,
+		RootElement: "button",
+		rootProps,
+		title: optimisticUserMuted ? t("Unmute user") : t("Mute user"),
+		TrailingSlot
+	});
+};
+var BlockUserAction$1 = () => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const { channel } = useChannelDetailContext();
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const targetUserId = useOtherMember()?.user?.id;
+	const { userIds: blockedUserIds } = require_useNotificationApi.useStateStore(client.blockedUsers, blockedUsersSelector$1);
+	const isBlocked = (0, react.useMemo)(() => !!targetUserId && new Set(blockedUserIds).has(targetUserId), [blockedUserIds, targetUserId]);
+	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
+	const [userBlockInProgress, setUserBlockInProgress] = (0, react.useState)(false);
+	const closeBlockUserAlert = (0, react.useCallback)(() => {
+		setAlertOpen(false);
+	}, []);
+	const openBlockUserAlert = (0, react.useCallback)(() => {
+		setAlertOpen(true);
+	}, []);
+	const unblockUser = (0, react.useCallback)(async () => {
+		if (!targetUserId) return;
+		try {
+			setUserBlockInProgress(true);
+			await client.unBlockUser(targetUserId);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				message: t("User unblocked"),
+				severity: "success",
+				type: "api:user:unblock:success"
+			});
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				error: toError$1(error),
+				message: t("Error unblocking user"),
+				severity: "error",
+				type: "api:user:unblock:failed"
+			});
+		} finally {
+			setAlertOpen(false);
+			setUserBlockInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		client,
+		targetUserId,
+		t
+	]);
+	const blockUser = (0, react.useCallback)(async () => {
+		if (!targetUserId) return;
+		try {
+			setUserBlockInProgress(true);
+			await client.blockUser(targetUserId);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				message: t("User blocked"),
+				severity: "success",
+				type: "api:user:block:success"
+			});
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				error: toError$1(error),
+				message: t("Error blocking user"),
+				severity: "error",
+				type: "api:user:block:failed"
+			});
+		} finally {
+			setAlertOpen(false);
+			setUserBlockInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		client,
+		targetUserId,
+		t
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		destructive: true,
+		LeadingIcon: BlockUserActionIcon$1,
+		RootElement: "button",
+		rootProps: (0, react.useMemo)(() => ({
+			className: channelManagementViewActionClassName,
+			disabled: userBlockInProgress,
+			onClick: openBlockUserAlert
+		}), [openBlockUserAlert, userBlockInProgress]),
+		title: isBlocked ? t("Unblock") : t("Block user")
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
+		open: alertOpen,
+		role: "alertdialog",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelManagementConfirmationAlert, {
+			action: "blockUser",
+			cancelLabel: t("Cancel"),
+			confirmLabel: isBlocked ? t("Unblock") : t("Block User"),
+			description: isBlocked ? t("This user will be able to message you again.") : t("This user won't be able to message you anymore. You can unblock them anytime."),
+			isSubmitting: userBlockInProgress,
+			onCancel: closeBlockUserAlert,
+			onConfirm: isBlocked ? unblockUser : blockUser,
+			testId: "channel-detail-block-user-alert",
+			title: isBlocked ? t("Unblock") : t("Block User")
+		})
+	})] });
+};
+var LeaveChannelAction = () => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
+	const [leaveChannelInProgress, setLeaveChannelInProgress] = (0, react.useState)(false);
+	const closeLeaveChannelAlert = (0, react.useCallback)(() => {
+		setAlertOpen(false);
+	}, []);
+	const openLeaveChannelAlert = (0, react.useCallback)(() => {
+		setAlertOpen(true);
+	}, []);
+	const leaveChannel = (0, react.useCallback)(async () => {
+		if (!client.userID) return;
+		try {
+			setLeaveChannelInProgress(true);
+			await channel.removeMembers([client.userID]);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				message: t("Left channel"),
+				severity: "success",
+				type: "api:channel:leave:success"
+			});
+			setAlertOpen(false);
+			close();
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				error: toError$1(error),
+				message: t("Failed to leave channel"),
+				severity: "error",
+				type: "api:channel:leave:failed"
+			});
+		} finally {
+			setLeaveChannelInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		client.userID,
+		close,
+		t
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		destructive: true,
+		LeadingIcon: LeaveChannelActionIcon,
+		RootElement: "button",
+		rootProps: (0, react.useMemo)(() => ({
+			className: channelManagementViewActionClassName,
+			disabled: leaveChannelInProgress,
+			onClick: openLeaveChannelAlert
+		}), [leaveChannelInProgress, openLeaveChannelAlert]),
+		title: t("Leave chat")
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
+		open: alertOpen,
+		role: "alertdialog",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelManagementConfirmationAlert, {
+			action: "leaveChannel",
+			cancelLabel: t("Cancel"),
+			confirmLabel: t("Leave chat"),
+			description: t("Are you sure you want to leave this channel?"),
+			isSubmitting: leaveChannelInProgress,
+			onCancel: closeLeaveChannelAlert,
+			onConfirm: leaveChannel,
+			testId: "channel-detail-leave-channel-alert",
+			title: t("Leave chat")
+		})
+	})] });
+};
+var DeleteChatAction = () => {
+	const { channel } = useChannelDetailContext();
+	const { Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const { close: closeChannelDetail } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const otherMember = useOtherMember();
+	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
+	const [deleteChatInProgress, setDeleteChatInProgress] = (0, react.useState)(false);
+	const userName = getDisplayName(otherMember?.user?.name, otherMember?.user?.id);
+	const closeDeleteChatAlert = (0, react.useCallback)(() => {
+		setAlertOpen(false);
+	}, []);
+	const openDeleteChatAlert = (0, react.useCallback)(() => {
+		setAlertOpen(true);
+	}, []);
+	const deleteChat = (0, react.useCallback)(async () => {
+		try {
+			setDeleteChatInProgress(true);
+			await channel.delete();
+			addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				message: t("Chat deleted"),
+				severity: "success",
+				type: "api:channel:delete:success"
+			});
+			setAlertOpen(false);
+			closeChannelDetail();
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelManagementView",
+				error: toError$1(error),
+				message: t("Error deleting chat"),
+				severity: "error",
+				type: "api:channel:delete:failed"
+			});
+		} finally {
+			setDeleteChatInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		closeChannelDetail,
+		t
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		destructive: true,
+		LeadingIcon: DeleteChatActionIcon,
+		RootElement: "button",
+		rootProps: (0, react.useMemo)(() => ({
+			className: channelManagementViewActionClassName,
+			disabled: deleteChatInProgress,
+			onClick: openDeleteChatAlert
+		}), [deleteChatInProgress, openDeleteChatAlert]),
+		title: t("Delete chat")
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
+		open: alertOpen,
+		role: "alertdialog",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelManagementConfirmationAlert, {
+			action: "deleteChat",
+			cancelLabel: t("Cancel"),
+			confirmLabel: t("Delete chat"),
+			description: t("This permanently deletes your message history with {{ user }}. This can't be undone.", { user: userName }),
+			isSubmitting: deleteChatInProgress,
+			onCancel: closeDeleteChatAlert,
+			onConfirm: deleteChat,
+			testId: "channel-detail-delete-chat-alert",
+			title: t("Delete chat")
+		})
+	})] });
+};
+var DefaultChannelManagementActions = {
+	BlockUser: BlockUserAction$1,
+	DeleteChat: DeleteChatAction,
+	LeaveChannel: LeaveChannelAction,
+	MuteChannel: ChannelMuteAction,
+	MuteUser: UserMuteAction$1
+};
+var defaultChannelManagementActionSet = [
+	{
+		Component: DefaultChannelManagementActions.MuteChannel,
+		type: "muteChannel"
+	},
+	{
+		Component: DefaultChannelManagementActions.MuteUser,
+		type: "muteUser"
+	},
+	{
+		Component: DefaultChannelManagementActions.BlockUser,
+		type: "blockUser"
+	},
+	{
+		Component: DefaultChannelManagementActions.LeaveChannel,
+		type: "leaveChannel"
+	},
+	{
+		Component: DefaultChannelManagementActions.DeleteChat,
+		type: "deleteChat"
+	}
+];
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
+var ChannelManagementInfoBody = ({ actions }) => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_useNotificationApi.useComponentContext();
+	const { displayImage, displayTitle, groupChannelDisplayInfo } = require_useChannelHeaderOnlineStatus.useChannelPreviewInfo({ channel });
+	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+	const otherMemberUserId = (0, react.useMemo)(() => {
+		if (!resolvedIsDmChannel) return;
+		return Object.values(channel.state?.members ?? {}).find((member) => member.user?.id && member.user.id !== client.user?.id)?.user?.id;
+	}, [
+		channel,
+		client.user?.id,
+		resolvedIsDmChannel
+	]);
+	const isOnline = require_useChannelHeaderOnlineStatus.useChannelHasMembersOnline({ channel });
+	const { muted: channelMuted } = require_useChannelHeaderOnlineStatus.useIsChannelMuted(channel);
+	const userMuted = require_useChannelHeaderOnlineStatus.useIsUserMuted(otherMemberUserId);
+	const membership = require_useChannelHeaderOnlineStatus.useChannelMembershipState(channel);
+	const onlineStatusText = require_useChannelHeaderOnlineStatus.useChannelHeaderOnlineStatus({ channel });
+	const pinned = !!membership.pinned_at;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+		className: "str-chat__channel-detail__channel-management-view__body",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "str-chat__channel-detail__channel-management-view__profile",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+				displayMembers: groupChannelDisplayInfo.members,
+				imageUrl: displayImage,
+				isOnline: resolvedIsDmChannel ? isOnline : void 0,
+				size: "2xl",
+				userName: displayTitle
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "str-chat__channel-detail__channel-management-view__profile__details",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "str-chat__channel-detail__channel-management-view__profile__details__title",
+					children: [
+						displayTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: displayTitle }),
+						pinned && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconPin, {}),
+						resolvedIsDmChannel && userMuted || !resolvedIsDmChannel && channelMuted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconMute, {}) : null
+					]
+				}), onlineStatusText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "str-chat__channel-detail__channel-management-view__profile__details__connection-status",
+					children: onlineStatusText
+				})]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "str-chat__channel-detail__channel-management-view__actions str-chat__form__switch-fieldset",
+			children: actions.map(({ Component, type }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {}, type))
+		})]
+	});
+};
+var EDIT_BODY_EMITTER = "ChannelManagementEditBody";
+/**
+* Assembles the argument for `channel.updatePartial` from the pending edits,
+* or returns `null` when there is nothing to persist. `image` is a tri-state:
+* a string sets a new avatar, `null` clears it, `undefined` leaves it untouched.
+*/
+var buildChannelUpdatePayload = ({ image, name }) => {
+	const payload = {};
+	const set = {};
+	if (name !== void 0) set.name = name;
+	if (typeof image === "string") set.image = image;
+	if (Object.keys(set).length > 0) payload.set = set;
+	if (image === null) payload.unset = ["image"];
+	return Object.keys(payload).length > 0 ? payload : null;
+};
+/**
+* Owns the channel-edit form: field state, the local image preview lifecycle,
+* the derived "can save" flags, and the save orchestration (upload → persist →
+* notify). The component is left to render the values this returns.
+*/
+var useChannelManagementEditForm = ({ uploadImage }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { displayImage, displayTitle, groupChannelDisplayInfo } = require_useChannelHeaderOnlineStatus.useChannelPreviewInfo({ channel });
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+	const hasMembersOnline = require_useChannelHeaderOnlineStatus.useChannelHasMembersOnline({ channel });
+	const isOnline = resolvedIsDmChannel ? hasMembersOnline : void 0;
+	const nameLabel = resolvedIsDmChannel ? t("Contact name") : t("Group name");
+	const [baselineName, setBaselineName] = (0, react.useState)(channel.data?.name ?? "");
+	const [name, setName] = (0, react.useState)(baselineName);
+	const [imageEdit, setImageEdit] = (0, react.useState)(null);
+	const [isSaving, setIsSaving] = (0, react.useState)(false);
+	const fileInputRef = (0, react.useRef)(null);
+	const pickedFile = imageEdit instanceof File ? imageEdit : null;
+	const objectUrl = (0, react.useMemo)(() => pickedFile ? URL.createObjectURL(pickedFile) : null, [pickedFile]);
+	(0, react.useEffect)(() => () => {
+		if (objectUrl) URL.revokeObjectURL(objectUrl);
+	}, [objectUrl]);
+	const previewImageUrl = objectUrl ?? (imageEdit === "removed" ? void 0 : displayImage);
+	const trimmedName = name.trim();
+	const nameChanged = trimmedName !== baselineName.trim();
+	const imageChanged = imageEdit !== null;
+	const hasChanges = trimmedName.length > 0 && nameChanged || imageChanged;
+	const canSubmit = trimmedName.length > 0 && !isSaving && hasChanges;
+	const handleOpenFilePicker = (0, react.useCallback)(() => {
+		fileInputRef.current?.click();
+	}, []);
+	const handleFileChange = (0, react.useCallback)((event) => {
+		const file = event.target.files?.[0];
+		if (file) setImageEdit(file);
+		event.target.value = "";
+	}, []);
+	const handleDeleteImage = (0, react.useCallback)(() => setImageEdit("removed"), []);
+	const resolveImageUrl = (0, react.useCallback)(async (file) => {
+		const url = uploadImage ? await uploadImage(file) : (await channel.sendImage(file)).file;
+		if (!url) throw new Error("Image upload did not return a URL");
+		return url;
+	}, [channel, uploadImage]);
+	return {
+		canSubmit,
+		displayTitle,
+		fileInputRef,
+		groupChannelDisplayInfo,
+		handleDeleteImage,
+		handleFileChange,
+		handleOpenFilePicker,
+		handleSubmit: (0, react.useCallback)(async (event) => {
+			event.preventDefault();
+			if (!canSubmit) return;
+			setIsSaving(true);
+			try {
+				let image;
+				if (pickedFile) image = await resolveImageUrl(pickedFile);
+				else if (imageEdit === "removed") image = null;
+				const payload = buildChannelUpdatePayload({
+					image,
+					name: nameChanged ? trimmedName : void 0
+				});
+				if (payload) await channel.updatePartial(payload);
+				setImageEdit(null);
+				setBaselineName(trimmedName);
+				setName(trimmedName);
+				addNotification({
+					duration: 3e3,
+					emitter: EDIT_BODY_EMITTER,
+					incident: {
+						domain: "channel",
+						entity: "channel",
+						operation: "update",
+						status: "success"
+					},
+					message: t("Changes saved"),
+					severity: "success"
+				});
+			} catch (error) {
+				addNotification({
+					emitter: EDIT_BODY_EMITTER,
+					error: error instanceof Error ? error : void 0,
+					incident: {
+						domain: "api",
+						entity: "channel",
+						operation: "update",
+						status: "failed"
+					},
+					message: t("Failed to save changes"),
+					severity: "error"
+				});
+			} finally {
+				setIsSaving(false);
+			}
+		}, [
+			addNotification,
+			canSubmit,
+			channel,
+			imageEdit,
+			nameChanged,
+			pickedFile,
+			resolveImageUrl,
+			t,
+			trimmedName
+		]),
+		hasAvatarImage: !!previewImageUrl,
+		isOnline,
+		name,
+		nameLabel,
+		previewImageUrl,
+		setName,
+		t,
+		trimmedName
+	};
+};
+var ChannelManagementEditBody = (props) => {
+	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_useNotificationApi.useComponentContext();
+	const { canSubmit, displayTitle, fileInputRef, groupChannelDisplayInfo, handleDeleteImage, handleFileChange, handleOpenFilePicker, handleSubmit, hasAvatarImage, isOnline, name, nameLabel, previewImageUrl, setName, t, trimmedName } = useChannelManagementEditForm(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+		className: "str-chat__channel-detail__channel-management-view__form",
+		onSubmit: handleSubmit,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+			className: "str-chat__channel-detail__channel-management-view__body",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "str-chat__channel-detail__channel-management-view__avatar-row",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+					displayMembers: groupChannelDisplayInfo.members,
+					imageUrl: previewImageUrl,
+					isOnline,
+					size: "2xl",
+					userName: trimmedName || displayTitle
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "str-chat__channel-detail__channel-management-view__avatar-row__actions",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+							appearance: "outline",
+							onClick: handleOpenFilePicker,
+							size: "sm",
+							type: "button",
+							variant: "secondary",
+							children: t("Upload Picture")
+						}),
+						hasAvatarImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+							appearance: "outline",
+							onClick: handleDeleteImage,
+							size: "sm",
+							type: "button",
+							variant: "secondary",
+							children: t("Delete")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							accept: "image/*",
+							"aria-hidden": true,
+							className: "str-chat__channel-detail__channel-management-view__file-input",
+							onChange: handleFileChange,
+							ref: fileInputRef,
+							tabIndex: -1,
+							type: "file"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.TextInput, {
+				"aria-label": nameLabel,
+				autoFocus: true,
+				className: "str-chat__channel-detail__channel-management-view__name-input",
+				maxLength: 255,
+				onChange: (event) => setName(event.target.value),
+				placeholder: nameLabel,
+				value: name
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Footer, {
+			className: "str-chat__channel-detail__channel-management-view__footer",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.FooterControls, { children: canSubmit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.FooterControlsButtonPrimary, {
+				className: "str-chat__channel-detail__channel-management-view__footer__save-button",
+				type: "submit",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconCheckmark, {}), t("Save")]
+			}) })
+		})]
+	});
+};
+var ChannelManagementView = ({ channelManagementActionSet = defaultChannelManagementActionSet, EditModeComponent = ChannelManagementEditBody, uploadImage, ViewModeComponent = ChannelManagementInfoBody }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+	const actions = useBaseChannelManagementActionSetFilter(channelManagementActionSet);
+	const [isEditing, setIsEditing] = (0, react.useState)(false);
+	const canEditChannel = channel.data?.own_capabilities?.includes("update-channel");
+	const isEditMode = isEditing && canEditChannel;
+	(0, react.useEffect)(() => {
+		setIsEditing(false);
+	}, [channel.cid]);
+	const EditChannelButton = (0, react.useMemo)(() => function EditChannelButton() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+			appearance: "outline",
+			"aria-label": t("Edit chat data"),
+			className: "str-chat__channel-detail__channel-management-view__edit-button",
+			onClick: () => {
+				setIsEditing(true);
+			},
+			size: "md",
+			variant: "secondary",
+			children: t("Edit")
+		});
+	}, [t]);
+	const headerTitle = isEditMode ? resolvedIsDmChannel ? t("Edit contact") : t("Edit group") : resolvedIsDmChannel ? t("Contact info") : t("Group info");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__channel-management-view",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
+			close,
+			description: isEditMode ? void 0 : t("Manage channel"),
+			goBack: isEditMode ? () => setIsEditing(false) : void 0,
+			title: headerTitle,
+			TrailingContent: !isEditMode && canEditChannel ? EditChannelButton : void 0
+		}), isEditMode ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditModeComponent, { uploadImage }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewModeComponent, { actions })]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
+var ChannelMediaEmptyList = () => {
+	const { t } = require_useNotificationApi.useTranslationContext("ChannelMediaEmptyList");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__media-view__empty-state",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconImage, { className: "str-chat__channel-detail__media-view__empty-state__icon" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "str-chat__channel-detail__media-view__empty-state__content",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "str-chat__channel-detail__media-view__empty-state__title",
+				children: t("No photos or videos")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "str-chat__channel-detail__media-view__empty-state__description",
+				children: t("Share a photo or video to see it here")
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.utils.ts
+var getMemberDisplayName = (member) => getUserDisplayName(member.user) || member.user_id || "";
+var getMemberUserId = (member) => member.user?.id || member.user_id;
+var getUserDisplayName = (user) => user?.name || user?.username || user?.id || "";
+var getChannelMemberUserIds = (channel) => Object.values(channel.state?.members ?? {}).map((member) => member.user?.id || member.user_id).filter((userId) => !!userId);
+var canUpdateChannelMembers = (channel) => channel.data?.own_capabilities?.includes("update-channel-members") ?? false;
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.utils.ts
+/** Attachment types rendered by the media gallery. */
+var MEDIA_ATTACHMENT_TYPES = ["image", "video"];
+var getMediaAttachmentType = (attachment) => {
+	if ((0, stream_chat.isVideoAttachment)(attachment)) return "video";
+	if ((0, stream_chat.isImageAttachment)(attachment)) return "image";
+};
+/**
+* Flattens messages into one renderable media item per image/video attachment,
+* carrying over the gallery descriptor, posting user, and video duration.
+*/
+var toChannelMediaItems = (messages) => {
+	const items = [];
+	messages.forEach((message) => {
+		message.attachments?.forEach((attachment, index) => {
+			const type = getMediaAttachmentType(attachment);
+			if (!type) return;
+			const descriptor = require_useChannelHeaderOnlineStatus.toBaseImageDescriptors(attachment);
+			if (!descriptor) return;
+			if (!(type === "video" ? Boolean(descriptor.videoThumbnailUrl || descriptor.videoUrl) : Boolean(descriptor.imageUrl))) return;
+			items.push({
+				durationSeconds: typeof attachment.duration === "number" ? attachment.duration : void 0,
+				galleryItem: descriptor,
+				id: `${message.id}-${index}`,
+				type,
+				user: message.user ?? void 0
+			});
+		});
+	});
+	return items;
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMediaView/useChannelMediaSearch.ts
+var CHANNEL_MEDIA_SEARCH_PAGE_SIZE = 30;
+var channelMediaSearchSourceItemsStateSelector = (state) => ({
+	hasNext: state.hasNext,
+	isLoading: state.isLoading,
+	messages: state.items
+});
+var useChannelMediaSearch = () => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const channelMediaSearchSource = (0, react.useMemo)(() => {
+		const source = new stream_chat.MessageSearchSource(client, {
+			allowEmptySearchString: true,
+			pageSize: CHANNEL_MEDIA_SEARCH_PAGE_SIZE,
+			resetOnNewSearchQuery: false
+		});
+		source.messageSearchChannelFilters = { cid: channel.cid };
+		source.messageSearchFilters = { "attachments.type": { $in: [...MEDIA_ATTACHMENT_TYPES] } };
+		return source;
+	}, [channel.cid, client]);
+	const { hasNext, isLoading, messages } = require_useNotificationApi.useStateStore(channelMediaSearchSource.state, channelMediaSearchSourceItemsStateSelector);
+	const mediaItems = (0, react.useMemo)(() => toChannelMediaItems(messages ?? []), [messages]);
+	(0, react.useEffect)(() => {
+		channelMediaSearchSource.activate();
+		channelMediaSearchSource.search("");
+		return () => {
+			channelMediaSearchSource.cancelScheduledQuery();
+		};
+	}, [channelMediaSearchSource]);
+	return {
+		channelMediaSearchSource,
+		hasNext: Boolean(hasNext),
+		hasResultsLoaded: Array.isArray(messages),
+		isLoading,
+		mediaItems
+	};
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx
+var DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE = 30;
+var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
+	const { t } = require_useNotificationApi.useTranslationContext("ChannelMediaView");
+	const displayName = getUserDisplayName(item.user);
+	const mediaSrc = item.type === "video" ? item.galleryItem.videoThumbnailUrl : item.galleryItem.imageUrl;
+	const durationLabel = require_useChannelHeaderOnlineStatus.formatTime(item.durationSeconds, "floor");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		"aria-label": item.type === "video" ? t("aria/Open video shared by {{ name }}", { name: displayName }) : t("aria/Open image shared by {{ name }}", { name: displayName }),
+		className: "str-chat__channel-detail__media-view__item",
+		onClick,
+		type: "button",
+		children: [
+			mediaSrc ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseImage, {
+				alt: item.galleryItem.alt ?? item.galleryItem.title ?? "",
+				className: "str-chat__channel-detail__media-view__item__media",
+				src: mediaSrc
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": "true",
+				className: "str-chat__channel-detail__media-view__item__placeholder",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconImage, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Avatar, {
+				"aria-hidden": "true",
+				className: "str-chat__channel-detail__media-view__item__avatar",
+				imageUrl: item.user?.image,
+				size: "sm",
+				userName: displayName
+			}),
+			item.type === "video" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Badge, {
+				className: "str-chat__channel-detail__media-view__item__duration",
+				size: "sm",
+				variant: "inverse",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconVideoFill, { className: "str-chat__channel-detail__media-view__item__duration-icon" }), durationLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: durationLabel }) : null]
+			})
+		]
+	});
+};
+var ChannelMediaPagination = ({ nextDisabled, onNext, onPrevious, previousDisabled }) => {
+	const { t } = require_useNotificationApi.useTranslationContext("ChannelMediaView");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__media-view__pagination",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useNotificationApi.Button, {
+			appearance: "outline",
+			"aria-label": t("aria/Previous page"),
+			className: "str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--previous",
+			disabled: previousDisabled,
+			onClick: onPrevious,
+			size: "md",
+			variant: "secondary",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconChevronLeft, {}), t("Previous")]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useNotificationApi.Button, {
+			appearance: "outline",
+			"aria-label": t("aria/Next page"),
+			className: "str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--next",
+			disabled: nextDisabled,
+			onClick: onNext,
+			size: "md",
+			variant: "secondary",
+			children: [t("Next"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconChevronRight, {})]
+		})]
+	});
+};
+var ChannelMediaView = ({ itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { BaseImage: BaseImage$1 = require_useChannelHeaderOnlineStatus.BaseImage, Gallery: Gallery$1 = require_useChannelHeaderOnlineStatus.Gallery, Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const { channelMediaSearchSource, hasNext, hasResultsLoaded, isLoading, mediaItems } = useChannelMediaSearch();
+	const [viewerOpen, setViewerOpen] = (0, react.useState)(false);
+	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
+	const [page, setPage] = (0, react.useState)(0);
+	const gridRef = (0, react.useRef)(null);
+	const pendingNextRef = (0, react.useRef)(false);
+	const galleryItems = (0, react.useMemo)(() => mediaItems.map((item) => item.galleryItem), [mediaItems]);
+	const pageStart = page * itemsPerPage;
+	const pageItems = (0, react.useMemo)(() => mediaItems.slice(pageStart, pageStart + itemsPerPage), [
+		mediaItems,
+		itemsPerPage,
+		pageStart
+	]);
+	const canGoNext = mediaItems.length > pageStart + itemsPerPage || hasNext;
+	const showPagination = mediaItems.length > itemsPerPage || mediaItems.length > 0 && hasNext;
+	const openViewer = (0, react.useCallback)((index) => {
+		setSelectedIndex(index);
+		setViewerOpen(true);
+	}, []);
+	const closeViewer = (0, react.useCallback)(() => {
+		setViewerOpen(false);
+	}, []);
+	const goToPreviousPage = (0, react.useCallback)(() => {
+		pendingNextRef.current = false;
+		setPage((current) => Math.max(0, current - 1));
+	}, []);
+	const goToNextPage = (0, react.useCallback)(() => {
+		const nextPageStart = (page + 1) * itemsPerPage;
+		if (mediaItems.length > nextPageStart) setPage(page + 1);
+		else if (hasNext) {
+			pendingNextRef.current = true;
+			channelMediaSearchSource.search();
+		}
+	}, [
+		channelMediaSearchSource,
+		hasNext,
+		itemsPerPage,
+		mediaItems.length,
+		page
+	]);
+	(0, react.useEffect)(() => {
+		if (isLoading) return;
+		if (pendingNextRef.current) {
+			const nextPageStart = (page + 1) * itemsPerPage;
+			if (mediaItems.length > nextPageStart) {
+				pendingNextRef.current = false;
+				setPage((current) => current + 1);
+				return;
+			}
+			if (!hasNext) {
+				pendingNextRef.current = false;
+				return;
+			}
+			channelMediaSearchSource.search();
+			return;
+		}
+		const need = pageStart + itemsPerPage;
+		if (mediaItems.length < need && hasNext) channelMediaSearchSource.search();
+	}, [
+		channelMediaSearchSource,
+		hasNext,
+		isLoading,
+		itemsPerPage,
+		mediaItems.length,
+		page,
+		pageStart
+	]);
+	(0, react.useEffect)(() => {
+		const grid = gridRef.current;
+		if (typeof grid?.scrollTo === "function") grid.scrollTo({ top: 0 });
+		else if (grid) grid.scrollTop = 0;
+	}, [page]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__media-view",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
+				close,
+				title: t("Photos & videos")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+				className: "str-chat__channel-detail__media-view__body",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "str-chat__channel-detail__media-view__grid",
+					ref: gridRef,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "str-chat__channel-detail__media-view__grid__content",
+						children: [
+							pageItems.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "str-chat__channel-detail__media-view__grid__items",
+								children: pageItems.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMediaGridItem, {
+									BaseImage: BaseImage$1,
+									item,
+									onClick: () => openViewer(pageStart + index)
+								}, item.id))
+							}) : hasResultsLoaded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMediaEmptyList, {}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailListLoadingIndicator, { searchSource: channelMediaSearchSource }),
+							showPagination && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMediaPagination, {
+								nextDisabled: !canGoNext || isLoading,
+								onNext: goToNextPage,
+								onPrevious: goToPreviousPage,
+								previousDisabled: page === 0
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
+				className: (0, clsx.default)("str-chat__gallery-modal", "str-chat__channel-detail__media-view__viewer"),
+				onClose: closeViewer,
+				open: viewerOpen,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Gallery$1, {
+					GalleryUI: require_useChannelHeaderOnlineStatus.GalleryUI,
+					initialIndex: selectedIndex,
+					items: galleryItems,
+					onRequestClose: closeViewer
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersHeaderActions.defaults.tsx
+/**
+* First-pass filter applied by {@link DefaultHeaderActions}. The SDK's own
+* actions are gated internally by capability — `addMembers` requires
+* `update-channel-members`; any other action is shown by default. App-defined
+* actions may further narrow visibility via their own `filter` predicate (which
+* is what an app should use to gate, e.g., a custom member-removal action).
+*/
+var useBaseChannelMembersHeaderActionSetFilter = (channelMembersHeaderActionSet) => {
+	const { channel } = useChannelDetailContext();
+	const canManageChannelMembers = canUpdateChannelMembers(channel);
+	return (0, react.useMemo)(() => channelMembersHeaderActionSet.filter((action) => {
+		return (action.type !== "addMembers" || canManageChannelMembers) && (action.filter?.({ channel }) ?? true);
+	}), [
+		canManageChannelMembers,
+		channel,
+		channelMembersHeaderActionSet
+	]);
+};
+var AddMembersHeaderAction = ({ modeController }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	if (modeController.mode !== "browse") return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+		appearance: "outline",
+		"aria-label": t("Add channel members"),
+		className: "str-chat__channel-detail__channel-members-view__add-button",
+		onClick: () => modeController.setMode("add"),
+		size: "md",
+		variant: "secondary",
+		children: t("Add")
+	});
+};
+var AddMembersMenuAction = ({ closeMenu, modeController }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	if (modeController.mode !== "browse") return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ContextMenuButton, {
+		"aria-label": t("Add channel members"),
+		Icon: require_useNotificationApi.IconUserAdd,
+		onClick: () => {
+			modeController.setMode("add");
+			closeMenu?.();
+		},
+		children: t("Add")
+	});
+};
+var DefaultChannelMembersHeaderActions = {
+	AddMembers: AddMembersHeaderAction,
+	AddMembersMenu: AddMembersMenuAction
+};
+var defaultChannelMembersHeaderActionSet = [{
+	component: DefaultChannelMembersHeaderActions.AddMembers,
+	placement: "quick",
+	type: "addMembers"
+}];
+var DefaultHeaderActionsMenuTrigger = ({ referenceRef, ...props }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+		appearance: "outline",
+		"aria-label": t("Open members actions"),
+		className: "str-chat__channel-detail__channel-members-view__actions-button",
+		ref: referenceRef,
+		size: "md",
+		variant: "secondary",
+		...props,
+		children: t("Actions")
+	});
+};
+var getHeaderActionsDialogId = (channelId) => `channel-members-header-actions-${channelId ?? "unknown"}`;
+var DefaultHeaderActions = ({ headerActionSet, HeaderActionsMenuTrigger = DefaultHeaderActionsMenuTrigger, modeController }) => {
+	const { ContextMenu: ContextMenuComponent = require_useChannelHeaderOnlineStatus.ContextMenu } = require_useNotificationApi.useComponentContext();
+	const { channel } = useChannelDetailContext();
+	const actions = useBaseChannelMembersHeaderActionSetFilter(headerActionSet);
+	const [referenceElement, setReferenceElement] = (0, react.useState)(null);
+	const dialogId = getHeaderActionsDialogId(channel.id);
+	const { dialog, dialogManager } = require_useNotificationApi.useDialogOnNearestManager({ id: dialogId });
+	const dialogManagerId = dialogManager?.id;
+	const dialogIsOpen = require_useNotificationApi.useDialogIsOpen(dialogId, dialogManagerId);
+	if (!actions.length) return null;
+	const quickActions = actions.filter((action) => action.placement === "quick");
+	const menuActions = actions.filter((action) => action.placement === "menu");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__channel-members-view__header-actions",
+		children: [quickActions.map(({ component: QuickComponent, type }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickComponent, { modeController }, type)), menuActions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderActionsMenuTrigger, {
+			"aria-expanded": dialogIsOpen,
+			onClick: () => {
+				dialog.toggle();
+			},
+			referenceRef: setReferenceElement
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuComponent, {
+			"aria-label": "Members actions",
+			className: "str-chat__channel-detail__channel-members-view__header-actions-menu",
+			dialogManagerId,
+			id: dialog.id,
+			onClose: () => dialog.close(),
+			placement: "bottom-start",
+			referenceElement,
+			tabIndex: -1,
+			trapFocus: true,
+			children: menuActions.map(({ component: MenuComponent, type }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuComponent, {
+				closeMenu: () => dialog.close(),
+				modeController
+			}, type))
+		})] })]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/VirtualizedList/VirtualizedList.tsx
+var VirtualizedListContent = (0, react.forwardRef)(function VirtualizedListContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: (0, clsx.default)("str-chat__virtualized-list__content", className),
+		ref
+	});
+});
+/**
+* Thin wrapper around `react-virtuoso`'s `Virtuoso` for the simple,
+* append-only, flat lists used across the ChannelDetail views. It keeps the
+* call sites declarative (data + itemContent + empty/footer slots) and hides
+* the infinite-scroll wiring.
+*/
+var VirtualizedList = ({ className, computeItemKey, data, EmptyPlaceholder, Footer, itemContent, loadNext, virtuosoProps, ...rest }) => {
+	const atBottomStateChange = (0, react.useCallback)((atBottom) => {
+		if (atBottom) loadNext?.();
+	}, [loadNext]);
+	const components = (0, react.useMemo)(() => ({
+		EmptyPlaceholder,
+		Footer,
+		List: VirtualizedListContent
+	}), [EmptyPlaceholder, Footer]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_virtuoso.Virtuoso, {
+		atBottomStateChange,
+		className: (0, clsx.default)("str-chat__virtualized-list", className),
+		components,
+		computeItemKey,
+		data,
+		itemContent,
+		...rest,
+		...virtuosoProps
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberIds.ts
+var MEMBER_IDS_EVENTS = [
+	"member.added",
+	"member.removed",
+	"member.updated"
+];
+/** Reactive set of channel member user ids derived from real channel state. */
+var useChannelMemberIds = (channel) => {
+	const [memberIds, setMemberIds] = (0, react.useState)(() => getChannelMemberUserIds(channel));
+	(0, react.useEffect)(() => {
+		const syncMemberIds = () => setMemberIds(getChannelMemberUserIds(channel));
+		syncMemberIds();
+		const subscriptions = MEMBER_IDS_EVENTS.map((event) => channel.on(event, syncMemberIds));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [channel]);
+	return memberIds;
+};
+//#endregion
+//#region src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
+var ChannelDetailSearchInput = react.default.memo(({ autoFocus, onSearchChange, resetKey }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const [searchInput, setSearchInput] = (0, react.useState)("");
+	(0, react.useEffect)(() => {
+		setSearchInput("");
+	}, [resetKey]);
+	const handleSearchChange = (0, react.useCallback)((event) => {
+		const { value } = event.target;
+		setSearchInput(value);
+		onSearchChange(value);
+	}, [onSearchChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.TextInput, {
+		"aria-label": t("Search"),
+		autoComplete: "off",
+		autoFocus,
+		className: "str-chat__channel-detail__search-input",
+		leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconSearch, {}),
+		onChange: handleSearchChange,
+		placeholder: t("Search"),
+		type: "search",
+		value: searchInput
+	});
+});
+ChannelDetailSearchInput.displayName = "ChannelDetailSearchInput";
+//#endregion
+//#region src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
+var ChannelDetailEmptyList = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: "str-chat__channel-detail__channel-members-view__empty-state",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconSearch, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })]
+});
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
+var USER_SEARCH_PAGE_SIZE = 30;
+var searchSourceItemsStateSelector = (state) => ({
+	isLoading: state.isLoading,
+	users: state.items
+});
+var EMPTY_USERS = [];
+var computeUserItemKey = (_, user) => user.id;
+var MuteIndicator = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+var readOnlyRootProps = { className: "str-chat__channel-detail__channel-members-view__list-item" };
+var ChannelMembersAddViewItem = ({ canManageChannelMembers, isMember, isMuted, isSelected, toggleSelectedUser, user }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const displayName = getUserDisplayName(user);
+	const LeadingSlot = (0, react.useMemo)(() => function MemberAvatar() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Avatar, {
+			imageUrl: user.image,
+			isOnline: user.online,
+			size: "md",
+			userName: displayName
+		});
+	}, [
+		displayName,
+		user.image,
+		user.online
+	]);
+	const SelectableTrailingSlot = (0, react.useMemo)(() => function SelectCheckbox() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Checkbox, {
+			"aria-hidden": true,
+			checked: isSelected
+		});
+	}, [isSelected]);
+	const selectableRootProps = (0, react.useMemo)(() => ({
+		"aria-pressed": isSelected,
+		className: "str-chat__channel-detail__channel-members-view__list-item",
+		onClick: () => toggleSelectedUser(user.id)
+	}), [
+		isSelected,
+		toggleSelectedUser,
+		user.id
+	]);
+	if (canManageChannelMembers && !isMember) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		LeadingSlot,
+		RootElement: "button",
+		rootProps: selectableRootProps,
+		title: displayName,
+		TrailingSlot: SelectableTrailingSlot
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		LeadingSlot,
+		rootProps: readOnlyRootProps,
+		subtitle: isMember ? t("Already a member") : void 0,
+		title: displayName,
+		TrailingSlot: isMuted ? MuteIndicator : void 0
+	});
+};
+var ChannelMembersAddView = ({ modeController, searchSource }) => {
+	const { client, mutes } = require_useNotificationApi.useChatContext();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { channel } = useChannelDetailContext();
+	const canManageChannelMembers = canUpdateChannelMembers(channel);
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const memberUserIds = useChannelMemberIds(channel);
+	const memberIdSet = (0, react.useMemo)(() => new Set(memberUserIds), [memberUserIds]);
+	const userSearchSource = (0, react.useMemo)(() => searchSource ?? new stream_chat.UserSearchSource(client, {
+		allowEmptySearchString: true,
+		pageSize: USER_SEARCH_PAGE_SIZE,
+		resetOnNewSearchQuery: false
+	}), [client, searchSource]);
+	const { isLoading, users } = require_useNotificationApi.useStateStore(userSearchSource.state, searchSourceItemsStateSelector);
+	const [isSaving, setIsSaving] = (0, react.useState)(false);
+	const [selectedUserIds, setSelectedUserIds] = (0, react.useState)([]);
+	(0, react.useEffect)(() => {
+		userSearchSource.activate();
+		userSearchSource.search("");
+		return () => userSearchSource.cancelScheduledQuery();
+	}, [userSearchSource]);
+	const selectedUserIdSet = (0, react.useMemo)(() => new Set(selectedUserIds), [selectedUserIds]);
+	const mutedUserIdSet = (0, react.useMemo)(() => new Set(mutes.map((mute) => mute.target.id)), [mutes]);
+	const handleSearchChange = (0, react.useCallback)((query) => {
+		userSearchSource.search(query);
+	}, [userSearchSource]);
+	const toggleSelectedUser = (0, react.useCallback)((userId) => setSelectedUserIds((currentSelectedUserIds) => currentSelectedUserIds.includes(userId) ? currentSelectedUserIds.filter((id) => id !== userId) : [...currentSelectedUserIds, userId]), []);
+	const renderItem = (0, react.useCallback)((_, user) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMembersAddViewItem, {
+		canManageChannelMembers,
+		isMember: memberIdSet.has(user.id),
+		isMuted: mutedUserIdSet.has(user.id),
+		isSelected: selectedUserIdSet.has(user.id),
+		toggleSelectedUser,
+		user
+	}), [
+		canManageChannelMembers,
+		memberIdSet,
+		mutedUserIdSet,
+		selectedUserIdSet,
+		toggleSelectedUser
+	]);
+	const EmptyPlaceholder = (0, react.useMemo)(() => function ChannelMembersAddEmptyPlaceholder() {
+		if (isLoading || !users) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailEmptyList, { children: t("No user found") });
+	}, [
+		isLoading,
+		t,
+		users
+	]);
+	const Footer = (0, react.useMemo)(() => function ChannelMembersAddListFooter() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailListLoadingIndicator, { searchSource: userSearchSource });
+	}, [userSearchSource]);
+	const handleSave = async () => {
+		if (!canManageChannelMembers || !selectedUserIds.length || isSaving) return;
+		setIsSaving(true);
+		try {
+			await channel.addMembers(selectedUserIds);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMembersView",
+				message: t("{{ count }} members added", { count: selectedUserIds.length }),
+				severity: "success",
+				type: "api:channel:addMembers:success"
+			});
+			setSelectedUserIds([]);
+			setIsSaving(false);
+			modeController.setMode("browse");
+		} catch (error) {
+			setIsSaving(false);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMembersView",
+				error,
+				message: t("Error adding members"),
+				severity: "error",
+				type: "api:channel:addMembers:failed"
+			});
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+		className: "str-chat__channel-members-view__body",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailSearchInput, {
+			autoFocus: true,
+			onSearchChange: handleSearchChange
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VirtualizedList, {
+			className: "str-chat__channel-detail__channel-members-view__list",
+			computeItemKey: computeUserItemKey,
+			data: users ?? EMPTY_USERS,
+			EmptyPlaceholder,
+			Footer,
+			itemContent: renderItem,
+			loadNext: userSearchSource.search
+		})]
+	}), canManageChannelMembers && selectedUserIds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Footer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.FooterControls, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.FooterControlsButtonPrimary, {
+		disabled: isSaving,
+		onClick: handleSave,
+		children: t("Add {{ count }} members", { count: selectedUserIds.length })
+	}) }) })] });
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMemberCount.ts
+var MEMBER_COUNT_EVENTS = [
+	"member.added",
+	"member.removed",
+	"channel.updated"
+];
+/** Reactive channel member count derived from real channel state. */
+var useChannelMemberCount = (channel) => {
+	const [memberCount, setMemberCount] = (0, react.useState)(channel.data?.member_count ?? 0);
+	(0, react.useEffect)(() => {
+		const syncMemberCount = () => setMemberCount(channel.data?.member_count ?? 0);
+		syncMemberCount();
+		const subscriptions = MEMBER_COUNT_EVENTS.map((event) => channel.on(event, syncMemberCount));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [channel]);
+	return memberCount;
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/useChannelMembersSearch.ts
+var MEMBERS_SEARCH_DEBOUNCE_MS = 300;
+var membersSearchSourceItemsStateSelector = (state) => ({ members: state.items });
+var useChannelMembersSearch = () => {
+	const { channel } = useChannelDetailContext();
+	const fallbackMembers = (0, react.useMemo)(() => Object.values(channel.state?.members ?? {}), [channel]);
+	const memberCount = useChannelMemberCount(channel);
+	const hasMembers = channel.data?.member_count === void 0 || memberCount !== 0;
+	const membersSearchSource = (0, react.useMemo)(() => new stream_chat.ChannelMemberSearchSource(channel, {
+		allowEmptySearchString: true,
+		debounceMs: MEMBERS_SEARCH_DEBOUNCE_MS,
+		pageSize: 100,
+		resetOnNewSearchQuery: false
+	}), [channel]);
+	const { members } = require_useNotificationApi.useStateStore(membersSearchSource.state, membersSearchSourceItemsStateSelector);
+	const [searchInputResetKey, setSearchInputResetKey] = (0, react.useState)(0);
+	const resetMembersSearch = (0, react.useCallback)(() => {
+		membersSearchSource.cancelScheduledQuery();
+		setSearchInputResetKey((currentResetKey) => currentResetKey + 1);
+		membersSearchSource.resetState();
+		membersSearchSource.activate();
+		membersSearchSource.search("");
+	}, [membersSearchSource]);
+	const handleSearchChange = (0, react.useCallback)((query) => {
+		membersSearchSource.search(query.trim());
+	}, [membersSearchSource]);
+	(0, react.useEffect)(() => {
+		if (!hasMembers) return;
+		membersSearchSource.activate();
+		membersSearchSource.search("");
+	}, [hasMembers, membersSearchSource]);
+	(0, react.useEffect)(() => () => {
+		membersSearchSource.cancelScheduledQuery();
+	}, [membersSearchSource]);
+	return {
+		displayedMembers: members ?? fallbackMembers,
+		handleSearchChange,
+		hasMembers,
+		membersSearchSource,
+		resetMembersSearch,
+		searchInputResetKey
+	};
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
+var getMemberRoleTranslation = (member, t) => {
+	if ([member.user?.role, member.channel_role].includes("admin")) return t("Admin");
+	if (member.channel_role === "channel_moderator" || member.channel_role === "moderator") return t("Moderator");
+	if (member.role === "owner") return t("Owner");
+};
+var getPresenceStatusText$1 = (user, t) => {
+	if (user?.online) return t("Online");
+	if (user?.last_active) return t("Last seen {{ timestamp }}", { timestamp: t("timestamp/ChannelMembersLastActive", { timestamp: user.last_active }) });
+	return t("Offline");
+};
+var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const user = member.user;
+	const displayName = getMemberDisplayName(member);
+	const roleTranslation = getMemberRoleTranslation(member, t);
+	const LeadingSlot = (0, react.useMemo)(() => function MemberAvatar() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Avatar, {
+			imageUrl: user?.image,
+			isOnline: user?.online,
+			size: "md",
+			userName: getUserDisplayName(user)
+		});
+	}, [user]);
+	const TrailingSlot = (0, react.useMemo)(() => function MemberTrailingSlot() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "str-chat__channel-detail__channel-members-view__list-item__trailing-slot",
+			children: [roleTranslation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "str-chat__channel-detail__channel-members-view__role-label",
+				children: roleTranslation
+			}) : null, isMuted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconMute, { className: "str-chat__channel-detail__channel-members-view__list-item__indicator-icon str-chat__channel-detail__channel-members-view__list-item__indicator-icon--mute" }) : null]
+		});
+	}, [isMuted, roleTranslation]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		LeadingSlot,
+		RootElement: "button",
+		rootProps: (0, react.useMemo)(() => ({
+			"aria-label": t("View member details for {{ member }}", { member: displayName }),
+			className: "str-chat__channel-detail__channel-members-view__list-item",
+			onClick: () => onMemberSelect?.(member)
+		}), [
+			displayName,
+			member,
+			onMemberSelect,
+			t
+		]),
+		subtitle: getPresenceStatusText$1(user, t),
+		title: displayName,
+		TrailingSlot
+	});
+};
+var computeMemberItemKey = (_, member) => getMemberUserId(member);
+var ChannelMembersBrowseView = ({ onMemberSelect }) => {
+	const { mutes } = require_useNotificationApi.useChatContext();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { displayedMembers, handleSearchChange, hasMembers, membersSearchSource, searchInputResetKey } = useChannelMembersSearch();
+	const mutedUserIdSet = (0, react.useMemo)(() => new Set(mutes.map((mute) => mute.target.id)), [mutes]);
+	const renderableMembers = (0, react.useMemo)(() => displayedMembers.filter((member) => getMemberUserId(member)), [displayedMembers]);
+	const renderItem = (0, react.useCallback)((_, member) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMembersBrowseViewItem, {
+		isMuted: mutedUserIdSet.has(getMemberUserId(member)),
+		member,
+		onMemberSelect
+	}), [mutedUserIdSet, onMemberSelect]);
+	const EmptyPlaceholder = (0, react.useMemo)(() => function ChannelMembersEmptyPlaceholder() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailEmptyList, { children: t("No member found") });
+	}, [t]);
+	const Footer = (0, react.useMemo)(() => function ChannelMembersListFooter() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailListLoadingIndicator, { searchSource: membersSearchSource });
+	}, [membersSearchSource]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+		className: "str-chat__channel-members-view__body",
+		children: [hasMembers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailSearchInput, {
+			onSearchChange: handleSearchChange,
+			resetKey: searchInputResetKey
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VirtualizedList, {
+			className: "str-chat__channel-detail__channel-members-view__list",
+			computeItemKey: computeMemberItemKey,
+			data: renderableMembers,
+			EmptyPlaceholder,
+			Footer,
+			itemContent: renderItem,
+			loadNext: hasMembers ? membersSearchSource.search : void 0
+		})]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
+var ChannelMemberActionContext = (0, react.createContext)(void 0);
+var ChannelMemberActionProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberActionContext.Provider, {
+	value,
+	children
+});
+var useChannelMemberActionContext = () => {
+	const contextValue = (0, react.useContext)(ChannelMemberActionContext);
+	if (!contextValue) throw new Error("The useChannelMemberActionContext hook was called outside of ChannelMemberActionProvider.");
+	return contextValue;
+};
+var toError = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred");
+var MemberMuteActionIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+var MemberUnmuteActionIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
+var SendDirectMessageActionIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconMessageBubble, { className: "str-chat__channel-detail__action-icon" });
+var BlockUserActionIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
+var RemoveUserActionIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconUserRemove, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--remove-user" });
+var channelMemberDetailActionClassName = "str-chat__channel-member-detail-action";
+var blockedUsersSelector = ({ userIds }) => ({ userIds });
+var ChannelMemberConfirmationAlert = ({ action, cancelLabel, confirmLabel, description, isSubmitting, onCancel, onConfirm, testId, title }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Root, {
+	className: (0, clsx.default)("str-chat__channel-member-confirmation-alert", { [`str-chat__channel-member-confirmation-alert--${action}`]: action }),
+	"data-testid": testId,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Alert.Header, {
+		description,
+		title
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Actions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+		appearance: "solid",
+		"data-testid": `${testId}-confirm-button`,
+		disabled: isSubmitting,
+		onClick: onConfirm,
+		size: "md",
+		variant: "danger",
+		children: confirmLabel
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+		appearance: "outline",
+		autoFocus: true,
+		"data-testid": `${testId}-cancel-button`,
+		disabled: isSubmitting,
+		onClick: onCancel,
+		size: "md",
+		variant: "secondary",
+		children: cancelLabel
+	})] })]
+});
+var useChannelMemberActionFilterState = () => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { targetUserId } = useChannelMemberActionContext();
+	const ownCapabilities = channel.data?.own_capabilities;
+	const isCurrentUser = targetUserId === client.user?.id;
+	return {
+		canBlockUser: !isCurrentUser && !!targetUserId,
+		canMuteUser: !isCurrentUser && !!targetUserId,
+		canRemoveUser: !isCurrentUser && !!targetUserId && ownCapabilities?.includes("update-channel-members"),
+		canSendMessage: !isCurrentUser && !!targetUserId
+	};
+};
+var useBaseChannelMemberActionSetFilter = (channelMemberActionSet) => {
+	const { canBlockUser, canMuteUser, canRemoveUser, canSendMessage } = useChannelMemberActionFilterState();
+	return (0, react.useMemo)(() => channelMemberActionSet.filter((action) => {
+		switch (action.type) {
+			case "blockUser": return canBlockUser;
+			case "muteUser": return canMuteUser;
+			case "removeUser": return canRemoveUser;
+			case "sendMessage": return canSendMessage;
+			default: return true;
+		}
+	}), [
+		canBlockUser,
+		canMuteUser,
+		canRemoveUser,
+		canSendMessage,
+		channelMemberActionSet
+	]);
+};
+var SendDirectMessageAction = () => {
+	const { client, setActiveChannel } = require_useNotificationApi.useChatContext();
+	const { setChannels } = require_useNotificationApi.useChannelListContext();
+	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { channel } = useChannelDetailContext();
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { targetUserId } = useChannelMemberActionContext();
+	const [isSending, setIsSending] = (0, react.useState)(false);
+	const openDirectMessage = (0, react.useCallback)(async () => {
+		if (!client.userID || !targetUserId || isSending) return;
+		setIsSending(true);
+		try {
+			const directMessageChannel = client.channel(channel.type, { members: [client.userID, targetUserId] });
+			await directMessageChannel.watch();
+			setActiveChannel(directMessageChannel);
+			setChannels?.((channels) => (0, lodash_uniqby.default)([directMessageChannel, ...channels], "cid"));
+			close();
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("Error opening direct message"),
+				severity: "error",
+				type: "api:channel:watch:failed"
+			});
+		} finally {
+			setIsSending(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		client,
+		close,
+		isSending,
+		setActiveChannel,
+		setChannels,
+		t,
+		targetUserId
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		LeadingIcon: SendDirectMessageActionIcon,
+		RootElement: "button",
+		rootProps: (0, react.useMemo)(() => ({
+			className: channelMemberDetailActionClassName,
+			disabled: isSending,
+			onClick: openDirectMessage
+		}), [isSending, openDirectMessage]),
+		title: t("Send direct message")
+	});
+};
+var UserMuteAction = () => {
+	const { channel } = useChannelDetailContext();
+	const { client, mutes } = require_useNotificationApi.useChatContext();
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { targetUserId } = useChannelMemberActionContext();
+	const userMuted = !!targetUserId && mutes.some((mute) => mute.target.id === targetUserId);
+	const [optimisticUserMuted, setOptimisticUserMuted] = (0, react.useState)(userMuted);
+	(0, react.useEffect)(() => {
+		setOptimisticUserMuted(userMuted);
+	}, [userMuted]);
+	const toggleUserMuteRequest = require_useChannelHeaderOnlineStatus.useStableCallback((nextMuted, userId) => {
+		if (!userId) return;
+		if (!nextMuted) return client.unmuteUser(userId).then(() => addNotification({
+			context: { channel },
+			emitter: "ChannelMemberDetail",
+			message: t("User unmuted"),
+			severity: "success",
+			type: "api:user:unmute:success"
+		})).catch((error) => {
+			setOptimisticUserMuted(userMuted);
+			return addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("Error unmuting user"),
+				severity: "error",
+				type: "api:user:unmute:failed"
+			});
+		});
+		return client.muteUser(userId).then(() => addNotification({
+			context: { channel },
+			emitter: "ChannelMemberDetail",
+			message: t("User muted"),
+			severity: "success",
+			type: "api:user:mute:success"
+		})).catch((error) => {
+			setOptimisticUserMuted(userMuted);
+			return addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("Error muting user"),
+				severity: "error",
+				type: "api:user:mute:failed"
+			});
+		});
+	});
+	const toggleUserMute = (0, react.useMemo)(() => (0, lodash_debounce.default)(toggleUserMuteRequest, 1e3), [toggleUserMuteRequest]);
+	(0, react.useEffect)(() => () => {
+		toggleUserMute.cancel();
+	}, [toggleUserMute]);
+	const toggleOptimisticUserMute = (0, react.useCallback)(() => {
+		const nextMuted = !optimisticUserMuted;
+		setOptimisticUserMuted(nextMuted);
+		toggleUserMute(nextMuted, targetUserId);
+	}, [
+		optimisticUserMuted,
+		targetUserId,
+		toggleUserMute
+	]);
+	const rootProps = (0, react.useMemo)(() => ({
+		"aria-pressed": optimisticUserMuted,
+		className: (0, clsx.default)("str-chat__form__switch-field", channelMemberDetailActionClassName),
+		onClick: toggleOptimisticUserMute
+	}), [optimisticUserMuted, toggleOptimisticUserMute]);
+	const TrailingSlot = (0, react.useMemo)(() => {
+		function UserMuteSwitch() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Switch, {
+				on: optimisticUserMuted,
+				presentation: true
+			});
+		}
+		return UserMuteSwitch;
+	}, [optimisticUserMuted]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		LeadingIcon: optimisticUserMuted ? MemberUnmuteActionIcon : MemberMuteActionIcon,
+		RootElement: "button",
+		rootProps,
+		title: optimisticUserMuted ? t("Unmute user") : t("Mute user"),
+		TrailingSlot
+	});
+};
+var BlockUserAction = () => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const { channel } = useChannelDetailContext();
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { memberDisplayName, targetUserId } = useChannelMemberActionContext();
+	const { userIds: blockedUserIds } = require_useNotificationApi.useStateStore(client.blockedUsers, blockedUsersSelector);
+	const isBlocked = !!targetUserId && new Set(blockedUserIds).has(targetUserId);
+	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
+	const [userBlockInProgress, setUserBlockInProgress] = (0, react.useState)(false);
+	const closeBlockUserAlert = (0, react.useCallback)(() => {
+		setAlertOpen(false);
+	}, []);
+	const openBlockUserAlert = (0, react.useCallback)(() => {
+		setAlertOpen(true);
+	}, []);
+	const unblockUser = (0, react.useCallback)(async () => {
+		if (!targetUserId) return;
+		try {
+			setUserBlockInProgress(true);
+			await client.unBlockUser(targetUserId);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				message: t("User unblocked"),
+				severity: "success",
+				type: "api:user:unblock:success"
+			});
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("Error unblocking user"),
+				severity: "error",
+				type: "api:user:unblock:failed"
+			});
+		} finally {
+			setAlertOpen(false);
+			setUserBlockInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		client,
+		t,
+		targetUserId
+	]);
+	const blockUser = (0, react.useCallback)(async () => {
+		if (!targetUserId) return;
+		try {
+			setUserBlockInProgress(true);
+			await client.blockUser(targetUserId);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				message: t("User blocked"),
+				severity: "success",
+				type: "api:user:block:success"
+			});
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("Error blocking user"),
+				severity: "error",
+				type: "api:user:block:failed"
+			});
+		} finally {
+			setAlertOpen(false);
+			setUserBlockInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		client,
+		t,
+		targetUserId
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		destructive: true,
+		LeadingIcon: BlockUserActionIcon,
+		RootElement: "button",
+		rootProps: (0, react.useMemo)(() => ({
+			className: channelMemberDetailActionClassName,
+			disabled: userBlockInProgress,
+			onClick: openBlockUserAlert
+		}), [openBlockUserAlert, userBlockInProgress]),
+		title: isBlocked ? t("Unblock user") : t("Block user")
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
+		open: alertOpen,
+		role: "alertdialog",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberConfirmationAlert, {
+			action: "blockUser",
+			cancelLabel: t("Cancel"),
+			confirmLabel: isBlocked ? t("Unblock user") : t("Block user"),
+			description: isBlocked ? t("{{ member }} will be able to message you again.", { member: memberDisplayName }) : t("{{ member }} won't be able to message you anymore.", { member: memberDisplayName }),
+			isSubmitting: userBlockInProgress,
+			onCancel: closeBlockUserAlert,
+			onConfirm: isBlocked ? unblockUser : blockUser,
+			testId: "channel-detail-block-member-alert",
+			title: isBlocked ? t("Unblock user") : t("Block user")
+		})
+	})] });
+};
+var RemoveUserAction = () => {
+	const { Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const { channel } = useChannelDetailContext();
+	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { memberDisplayName, targetUserId } = useChannelMemberActionContext();
+	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
+	const [removeMemberInProgress, setRemoveMemberInProgress] = (0, react.useState)(false);
+	const closeRemoveUserAlert = (0, react.useCallback)(() => {
+		setAlertOpen(false);
+	}, []);
+	const openRemoveUserAlert = (0, react.useCallback)(() => {
+		setAlertOpen(true);
+	}, []);
+	const removeUser = (0, react.useCallback)(async () => {
+		if (!targetUserId) return;
+		try {
+			setRemoveMemberInProgress(true);
+			await channel.removeMembers([targetUserId]);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				message: t("User removed"),
+				severity: "success",
+				type: "api:channel:remove-members:success"
+			});
+			setAlertOpen(false);
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("Error removing user"),
+				severity: "error",
+				type: "api:channel:remove-members:failed"
+			});
+		} finally {
+			setRemoveMemberInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		t,
+		targetUserId
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		destructive: true,
+		LeadingIcon: RemoveUserActionIcon,
+		RootElement: "button",
+		rootProps: (0, react.useMemo)(() => ({
+			className: channelMemberDetailActionClassName,
+			disabled: removeMemberInProgress,
+			onClick: openRemoveUserAlert
+		}), [openRemoveUserAlert, removeMemberInProgress]),
+		title: t("Remove user")
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
+		open: alertOpen,
+		role: "alertdialog",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberConfirmationAlert, {
+			action: "removeUser",
+			cancelLabel: t("Cancel"),
+			confirmLabel: t("Remove user"),
+			description: t("Remove {{ member }} from this channel?", { member: memberDisplayName }),
+			isSubmitting: removeMemberInProgress,
+			onCancel: closeRemoveUserAlert,
+			onConfirm: removeUser,
+			testId: "channel-detail-remove-member-alert",
+			title: t("Remove user")
+		})
+	})] });
+};
+var DefaultChannelMemberActions = {
+	BlockUser: BlockUserAction,
+	MuteUser: UserMuteAction,
+	RemoveUser: RemoveUserAction,
+	SendDirectMessage: SendDirectMessageAction
+};
+var defaultChannelMemberActionSet = [
+	{
+		Component: DefaultChannelMemberActions.SendDirectMessage,
+		type: "sendMessage"
+	},
+	{
+		Component: DefaultChannelMemberActions.MuteUser,
+		type: "muteUser"
+	},
+	{
+		Component: DefaultChannelMemberActions.BlockUser,
+		type: "blockUser"
+	},
+	{
+		Component: DefaultChannelMemberActions.RemoveUser,
+		type: "removeUser"
+	}
+];
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.tsx
+var getPresenceStatusText = (user, t) => {
+	if (user?.online) return t("Online");
+	if (user?.last_active) return t("Last seen {{ timestamp }}", { timestamp: t("timestamp/ChannelMembersLastActive", { timestamp: user.last_active }) });
+	return t("Offline");
+};
+var ChannelMemberDetail = ({ channelMemberActionSet = defaultChannelMemberActionSet, member, onBack }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const memberDisplayName = getMemberDisplayName(member);
+	const memberStatusText = getPresenceStatusText(member.user, t);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberActionProvider, {
+		value: (0, react.useMemo)(() => ({
+			member,
+			memberDisplayName,
+			targetUserId: member.user?.id || member.user_id
+		}), [member, memberDisplayName]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberDetailContent, {
+			channelMemberActionSet,
+			memberDisplayName,
+			memberStatusText,
+			onBack
+		})
+	});
+};
+var ChannelMemberDetailContent = ({ channelMemberActionSet, memberDisplayName, memberStatusText, onBack }) => {
+	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_useNotificationApi.useComponentContext();
+	const { member } = useChannelMemberActionContext();
+	const filteredActions = useBaseChannelMemberActionSetFilter(channelMemberActionSet);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__channel-member-detail-view",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
+			close,
+			goBack: onBack,
+			title: t("Member detail")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+			className: "str-chat__channel-detail__channel-member-detail-view__body",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "str-chat__channel-detail__channel-member-detail-view__profile",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+					imageUrl: member.user?.image,
+					isOnline: member.user?.online,
+					size: "2xl",
+					userName: memberDisplayName
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "str-chat__channel-detail__channel-member-detail-view__profile__details",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "str-chat__channel-detail__channel-member-detail-view__profile__details__title",
+						children: memberDisplayName
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "str-chat__channel-detail__channel-member-detail-view__profile__details__connection-status",
+						children: memberStatusText
+					})]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "str-chat__channel-detail__channel-member-detail-view__actions str-chat__form__switch-fieldset",
+				children: filteredActions.map(({ Component, type }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {}, type))
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersView.tsx
+var RESERVED_MODES = ["browse", "memberDetail"];
+var isReservedMode = (mode) => RESERVED_MODES.includes(mode);
+var AddMembersModeTitle = () => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: t("Add members") });
+};
+/** Built-in mode descriptors. Merged with (and overridable by) the `modeViews` prop. */
+var defaultChannelMembersModeViews = { add: {
+	Body: ChannelMembersAddView,
+	Title: AddMembersModeTitle
+} };
+var ChannelMembersView = ({ HeaderActions = DefaultHeaderActions, headerActionSet = defaultChannelMembersHeaderActionSet, HeaderActionsMenuTrigger, layout, modeViews: customModeViews }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { channel } = useChannelDetailContext();
+	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const [mode, setMode] = (0, react.useState)("browse");
+	const [selectedMember, setSelectedMember] = (0, react.useState)();
+	const memberCount = useChannelMemberCount(channel);
+	const modeViews = (0, react.useMemo)(() => ({
+		...defaultChannelMembersModeViews,
+		...customModeViews
+	}), [customModeViews]);
+	const activeModeDescriptor = isReservedMode(mode) ? void 0 : modeViews[mode];
+	const isViewingMemberDetail = mode === "memberDetail";
+	const setViewMode = (0, react.useCallback)((nextMode) => {
+		setMode(nextMode);
+		if (nextMode !== "memberDetail") setSelectedMember(void 0);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!isReservedMode(mode) && !modeViews[mode]) setViewMode("browse");
+	}, [
+		mode,
+		modeViews,
+		setViewMode
+	]);
+	const goBack = (0, react.useCallback)(() => setViewMode("browse"), [setViewMode]);
+	const modeController = (0, react.useMemo)(() => ({
+		mode,
+		setMode: setViewMode
+	}), [mode, setViewMode]);
+	const HeaderTrailingActions = (0, react.useMemo)(() => function HeaderTrailingActions() {
+		if (mode !== "browse") return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderActions, {
+			headerActionSet,
+			HeaderActionsMenuTrigger,
+			modeController
+		});
+	}, [
+		HeaderActions,
+		HeaderActionsMenuTrigger,
+		modeController,
+		headerActionSet,
+		mode
+	]);
+	if (isViewingMemberDetail && selectedMember) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberDetail, {
+		layout,
+		member: selectedMember,
+		onBack: goBack
+	});
+	const ActiveModeTitle = activeModeDescriptor?.Title;
+	const ActiveModeBody = activeModeDescriptor?.Body;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__channel-members-view",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
+			close,
+			description: activeModeDescriptor ? void 0 : t("Browse channel members"),
+			goBack: activeModeDescriptor ? goBack : void 0,
+			title: ActiveModeTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveModeTitle, {}) : t("{{ count }} members", { count: memberCount }),
+			TrailingContent: HeaderTrailingActions
+		}), ActiveModeBody ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveModeBody, { modeController }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMembersBrowseView, { onMemberSelect: (member) => {
+			setSelectedMember(member);
+			setViewMode("memberDetail");
+		} })]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
+var PinnedMessagesEmptyList = () => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__pinned-messages-view__empty-state",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconPin, { className: "str-chat__channel-detail__pinned-messages-view__empty-state__icon" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "str-chat__channel-detail__pinned-messages-view__empty-state__content",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "str-chat__channel-detail__pinned-messages-view__empty-state__title",
+				children: t("No pinned messages")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "str-chat__channel-detail__pinned-messages-view__empty-state__description",
+				children: t("Pin a message to see it here")
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesCount.ts
+var PINNED_MESSAGES_EVENTS = [
+	"message.new",
+	"message.updated",
+	"message.deleted",
+	"message.undeleted"
+];
+var getPinnedMessagesCount = (channel) => channel.state?.pinnedMessages?.length ?? 0;
+/** Reactive count of the channel's pinned messages derived from channel state. */
+var usePinnedMessagesCount = (channel) => {
+	const [pinnedMessagesCount, setPinnedMessagesCount] = (0, react.useState)(() => getPinnedMessagesCount(channel));
+	(0, react.useEffect)(() => {
+		const syncPinnedMessagesCount = () => setPinnedMessagesCount(getPinnedMessagesCount(channel));
+		syncPinnedMessagesCount();
+		const subscriptions = PINNED_MESSAGES_EVENTS.map((event) => channel.on(event, syncPinnedMessagesCount));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [channel]);
+	return pinnedMessagesCount;
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/usePinnedMessagesSearch.ts
+var PINNED_MESSAGES_SEARCH_PAGE_SIZE = 30;
+var PINNED_MESSAGES_SEARCH_DEBOUNCE_MS = 300;
+var pinnedMessagesSearchSourceItemsStateSelector = (state) => ({ messages: state.items });
+var usePinnedMessagesSearch = ({ searchSource } = {}) => {
+	const { client } = require_useNotificationApi.useChatContext();
+	const { channel } = useChannelDetailContext();
+	const pinnedMessagesSearchSource = (0, react.useMemo)(() => {
+		const source = searchSource ?? new stream_chat.MessageSearchSource(client, {
+			allowEmptySearchString: true,
+			debounceMs: PINNED_MESSAGES_SEARCH_DEBOUNCE_MS,
+			pageSize: PINNED_MESSAGES_SEARCH_PAGE_SIZE,
+			resetOnNewSearchQuery: false
+		}, { messageSearch: { initialFilterConfig: { text: {
+			enabled: true,
+			generate: ({ searchQuery }) => searchQuery ? { text: { $autocomplete: searchQuery } } : null
+		} } } });
+		if (!searchSource) {
+			source.messageSearchChannelFilters = { cid: channel.cid };
+			source.messageSearchFilters = { pinned: true };
+		}
+		return source;
+	}, [
+		channel.cid,
+		client,
+		searchSource
+	]);
+	const { messages } = require_useNotificationApi.useStateStore(pinnedMessagesSearchSource.state, pinnedMessagesSearchSourceItemsStateSelector);
+	(0, react.useEffect)(() => {
+		pinnedMessagesSearchSource.activate();
+		return () => {
+			pinnedMessagesSearchSource.cancelScheduledQuery();
+		};
+	}, [pinnedMessagesSearchSource]);
+	const hasPinnedMessages = usePinnedMessagesCount(channel) > 0;
+	(0, react.useEffect)(() => {
+		if (!hasPinnedMessages) return;
+		pinnedMessagesSearchSource.search("");
+	}, [hasPinnedMessages, pinnedMessagesSearchSource]);
+	const handleSearchChange = (0, react.useCallback)((query) => {
+		const trimmedQuery = query.trim();
+		if (!trimmedQuery) {
+			pinnedMessagesSearchSource.cancelScheduledQuery();
+			pinnedMessagesSearchSource.resetState();
+			pinnedMessagesSearchSource.activate();
+			pinnedMessagesSearchSource.search("");
+			return;
+		}
+		pinnedMessagesSearchSource.search(trimmedQuery);
+	}, [pinnedMessagesSearchSource]);
+	return {
+		displayedMessages: messages ?? [],
+		handleSearchChange,
+		hasPinnedMessages,
+		hasSearchResultsLoaded: Array.isArray(messages),
+		pinnedMessagesSearchSource
+	};
+};
+//#endregion
+//#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesView.tsx
+var computeItemKey = (_, message) => message.id;
+var normalizeTimestamp = (timestamp) => {
+	if (!timestamp) return void 0;
+	return require_useNotificationApi.isDate(timestamp) ? timestamp.toISOString() : timestamp;
+};
+var getPinnedMessagePreview = (message, t) => {
+	const text = message.text?.trim();
+	if (text) return text;
+	const attachment = message.attachments?.[0];
+	return attachment?.title || attachment?.text || attachment?.fallback || attachment?.type || t("Pinned message");
+};
+var PinnedMessageDate = ({ message }) => {
+	const { t, tDateTimeParser } = require_useNotificationApi.useTranslationContext("PinnedMessageDate");
+	const normalizedTimestamp = normalizeTimestamp(message.created_at);
+	const when = (0, react.useMemo)(() => require_useNotificationApi.getDateString({
+		messageCreatedAt: normalizedTimestamp,
+		t,
+		tDateTimeParser,
+		timestampTranslationKey: "timestamp/ChannelDetailPinnedMessageTimestamp"
+	}), [
+		normalizedTimestamp,
+		t,
+		tDateTimeParser
+	]);
+	if (!when) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+		className: "str-chat__channel-detail__pinned-messages-view__list-item__date",
+		dateTime: normalizedTimestamp,
+		children: when
+	});
+};
+var PinnedMessagesViewItem = ({ message, onSelect }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const displayName = getUserDisplayName(message.user ?? void 0);
+	const LeadingSlot = (0, react.useMemo)(() => function MessageAuthorAvatar() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Avatar, {
+			imageUrl: message.user?.image,
+			size: "md",
+			userName: displayName
+		});
+	}, [displayName, message.user?.image]);
+	const TrailingSlot = (0, react.useMemo)(() => function MessageDate() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinnedMessageDate, { message });
+	}, [message]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+		LeadingSlot,
+		RootElement: "button",
+		rootProps: (0, react.useMemo)(() => ({
+			className: "str-chat__channel-detail__pinned-messages-view__list-item",
+			onClick: () => onSelect(message)
+		}), [message, onSelect]),
+		subtitle: getPinnedMessagePreview(message, t),
+		subtitleClassName: "str-chat__channel-detail__pinned-messages-view__list-item__message-preview",
+		title: displayName,
+		TrailingSlot
+	});
+};
+var PinnedMessagesView = ({ searchSource }) => {
+	const { setActiveChannel } = require_useNotificationApi.useChatContext();
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { jumpToMessage } = require_useNotificationApi.useChannelActionContext();
+	const { channel } = useChannelDetailContext();
+	const { displayedMessages, handleSearchChange, hasPinnedMessages, hasSearchResultsLoaded, pinnedMessagesSearchSource } = usePinnedMessagesSearch({ searchSource });
+	const handleSelectMessage = (0, react.useCallback)((message) => {
+		setActiveChannel(channel);
+		jumpToMessage(message.id);
+		close();
+	}, [
+		channel,
+		close,
+		jumpToMessage,
+		setActiveChannel
+	]);
+	const renderItem = (0, react.useCallback)((_, message) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinnedMessagesViewItem, {
+		message,
+		onSelect: handleSelectMessage
+	}), [handleSelectMessage]);
+	const EmptyPlaceholder = (0, react.useMemo)(() => function PinnedMessagesEmptyPlaceholder() {
+		if (!hasPinnedMessages) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinnedMessagesEmptyList, {});
+		if (hasSearchResultsLoaded) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailEmptyList, { children: t("No messages found") });
+		return null;
+	}, [
+		hasPinnedMessages,
+		hasSearchResultsLoaded,
+		t
+	]);
+	const Footer = (0, react.useMemo)(() => function PinnedMessagesListFooter() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailListLoadingIndicator, { searchSource: pinnedMessagesSearchSource });
+	}, [pinnedMessagesSearchSource]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__pinned-messages-view",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
+			close,
+			description: t("Browse pinned messages"),
+			title: t("Pinned messages")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+			className: "str-chat__channel-detail__pinned-messages-view__body",
+			children: [hasPinnedMessages && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailSearchInput, { onSearchChange: handleSearchChange }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VirtualizedList, {
+				className: "str-chat__channel-detail__pinned-messages-view__list",
+				computeItemKey,
+				data: displayedMessages,
+				EmptyPlaceholder,
+				Footer,
+				itemContent: renderItem,
+				loadNext: hasPinnedMessages ? pinnedMessagesSearchSource.search : void 0
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/ChannelDetail.tsx
+var ChannelManagementNavButtonIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconInfo, { className: "str-chat__channel-detail__action-icon" });
+var ChannelMembersNavButtonIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconUser, { className: "str-chat__channel-detail__action-icon" });
+var PinnedMessagesNavButtonIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconPin, { className: "str-chat__channel-detail__action-icon" });
+var ChannelMediaNavButtonIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconImage, { className: "str-chat__channel-detail__action-icon" });
+var ChannelFilesNavButtonIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconFolder, { className: "str-chat__channel-detail__action-icon" });
+var ChannelManagementNavButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: ChannelManagementNavButtonIcon,
+	title: "Channel info"
+});
+var ChannelMembersNavButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: ChannelMembersNavButtonIcon,
+	title: "Members"
+});
+var PinnedMessagesNavButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: PinnedMessagesNavButtonIcon,
+	title: "Pinned messages"
+});
+var ChannelMediaNavButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: ChannelMediaNavButtonIcon,
+	title: "Photos & videos"
+});
+var ChannelFilesNavButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailNavButton, {
+	...props,
+	LeadingIcon: ChannelFilesNavButtonIcon,
+	title: "Files"
+});
+var defaultChannelDetailSections = [
+	{
+		id: "channel-info",
+		NavButton: ChannelManagementNavButton,
+		SectionContent: ChannelManagementView
+	},
+	{
+		id: "channel-members",
+		NavButton: ChannelMembersNavButton,
+		SectionContent: ChannelMembersView
+	},
+	{
+		id: "pinned-messages",
+		NavButton: PinnedMessagesNavButton,
+		SectionContent: PinnedMessagesView
+	},
+	{
+		id: "channel-media",
+		NavButton: ChannelMediaNavButton,
+		SectionContent: ChannelMediaView
+	},
+	{
+		id: "channel-files",
+		NavButton: ChannelFilesNavButton,
+		SectionContent: ChannelFilesView
+	}
+];
+var ChannelDetail = ({ channel, className, defaultLayout = SECTION_NAVIGATOR_LAYOUT.tabs, sections = defaultChannelDetailSections, ...props }) => {
+	const [layout, setLayout] = (0, react.useState)(defaultLayout);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailProvider, {
+		channel,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Root, {
+			className: (0, clsx.default)("str-chat__channel-detail", { "str-chat__channel-detail--inline": layout === SECTION_NAVIGATOR_LAYOUT.inline }, className),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigator, {
+				...props,
+				defaultLayout,
+				onLayoutChange: setLayout,
+				sections
+			})
+		})
+	});
+};
+//#endregion
+//#region src/plugins/ChannelDetail/AvatarWithChannelDetail.tsx
+var avatarWithChannelDetailDialogRootProps = { className: "str-chat__channel-detail-modal" };
+var AvatarWithChannelDetail = ({ Avatar, ChannelDetail: ChannelDetail$1 = ChannelDetail, className, ...avatarProps }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const { channel } = require_useNotificationApi.useChannelStateContext();
+	const { Avatar: ContextAvatar, Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const [isModalOpen, setIsModalOpen] = (0, react.useState)(false);
+	const openModal = (0, react.useCallback)(() => setIsModalOpen(true), []);
+	const closeModal = (0, react.useCallback)(() => setIsModalOpen(false), []);
+	const AvatarComponent = Avatar ?? (ContextAvatar === AvatarWithChannelDetail ? void 0 : ContextAvatar) ?? require_useChannelHeaderOnlineStatus.ChannelAvatar;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": t("aria/Open channel details"),
+		className: "str-chat__avatar-with-channel-detail-button",
+		onClick: openModal,
+		type: "button",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarComponent, {
+			...avatarProps,
+			className: (0, clsx.default)("str-chat__avatar-with-channel-detail-button__avatar", className)
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Modal, {
+		"aria-label": t("aria/Channel details"),
+		dialogRootProps: avatarWithChannelDetailDialogRootProps,
+		onClose: closeModal,
+		open: isModalOpen,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetail$1, { channel })
+	})] });
+};
+//#endregion
+exports.AvatarWithChannelDetail = AvatarWithChannelDetail;
+exports.ChannelDetail = ChannelDetail;
+exports.ChannelDetailEmptyList = ChannelDetailEmptyList;
+exports.ChannelDetailListLoadingIndicator = ChannelDetailListLoadingIndicator;
+exports.ChannelDetailNavButton = ChannelDetailNavButton;
+exports.ChannelDetailProvider = ChannelDetailProvider;
+exports.ChannelDetailSearchInput = ChannelDetailSearchInput;
+exports.ChannelFilesEmptyList = ChannelFilesEmptyList;
+exports.ChannelFilesNavButton = ChannelFilesNavButton;
+exports.ChannelFilesView = ChannelFilesView;
+exports.ChannelManagementEditBody = ChannelManagementEditBody;
+exports.ChannelManagementInfoBody = ChannelManagementInfoBody;
+exports.ChannelManagementNavButton = ChannelManagementNavButton;
+exports.ChannelManagementView = ChannelManagementView;
+exports.ChannelMediaEmptyList = ChannelMediaEmptyList;
+exports.ChannelMediaNavButton = ChannelMediaNavButton;
+exports.ChannelMediaView = ChannelMediaView;
+exports.ChannelMemberActionProvider = ChannelMemberActionProvider;
+exports.ChannelMemberDetail = ChannelMemberDetail;
+exports.ChannelMembersAddView = ChannelMembersAddView;
+exports.ChannelMembersBrowseView = ChannelMembersBrowseView;
+exports.ChannelMembersNavButton = ChannelMembersNavButton;
+exports.ChannelMembersView = ChannelMembersView;
+exports.DefaultChannelManagementActions = DefaultChannelManagementActions;
+exports.DefaultChannelMemberActions = DefaultChannelMemberActions;
+exports.DefaultChannelMembersHeaderActions = DefaultChannelMembersHeaderActions;
+exports.DefaultHeaderActions = DefaultHeaderActions;
+exports.DefaultHeaderActionsMenuTrigger = DefaultHeaderActionsMenuTrigger;
+exports.FILE_ATTACHMENT_TYPES = FILE_ATTACHMENT_TYPES;
+exports.MEDIA_ATTACHMENT_TYPES = MEDIA_ATTACHMENT_TYPES;
+exports.PinnedMessagesEmptyList = PinnedMessagesEmptyList;
+exports.PinnedMessagesNavButton = PinnedMessagesNavButton;
+exports.PinnedMessagesView = PinnedMessagesView;
+exports.SECTION_NAVIGATOR_LAYOUT = SECTION_NAVIGATOR_LAYOUT;
+exports.SectionNavigator = SectionNavigator;
+exports.SectionNavigatorHeader = SectionNavigatorHeader;
+exports.defaultChannelDetailSections = defaultChannelDetailSections;
+exports.defaultChannelManagementActionSet = defaultChannelManagementActionSet;
+exports.defaultChannelMemberActionSet = defaultChannelMemberActionSet;
+exports.defaultChannelMembersHeaderActionSet = defaultChannelMembersHeaderActionSet;
+exports.defaultChannelMembersModeViews = defaultChannelMembersModeViews;
+exports.toChannelFileSections = toChannelFileSections;
+exports.toChannelMediaItems = toChannelMediaItems;
+exports.useBaseChannelManagementActionSetFilter = useBaseChannelManagementActionSetFilter;
+exports.useBaseChannelMemberActionSetFilter = useBaseChannelMemberActionSetFilter;
+exports.useBaseChannelMembersHeaderActionSetFilter = useBaseChannelMembersHeaderActionSetFilter;
+exports.useChannelDetailContext = useChannelDetailContext;
+exports.useChannelFilesSearch = useChannelFilesSearch;
+exports.useChannelMediaSearch = useChannelMediaSearch;
+exports.useChannelMemberActionContext = useChannelMemberActionContext;
+exports.useChannelMembersSearch = useChannelMembersSearch;
+exports.usePinnedMessagesSearch = usePinnedMessagesSearch;
+exports.useSectionNavigatorContext = useSectionNavigatorContext;
+
+//# sourceMappingURL=channel-detail.js.map