stream-chat-react 14.9.0 → 14.11.0

package/dist/cjs/channel-detail.js

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_useNotificationApi = require("./useNotificationApi.bf76a16b.js");
-const require_useChannelHeaderOnlineStatus = require("./useChannelHeaderOnlineStatus.72753090.js");
+const require_NotificationList = require("./NotificationList.6abbee1c.js");
+const require_useChannelHeaderOnlineStatus = require("./useChannelHeaderOnlineStatus.7e17671e.js");
 let react = require("react");
-react = require_useNotificationApi.__toESM(react);
+react = require_NotificationList.__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);
+clsx = require_NotificationList.__toESM(clsx);
+let stream_chat = require("stream-chat");
 let lodash_debounce = require("lodash.debounce");
-lodash_debounce = require_useNotificationApi.__toESM(lodash_debounce);
+lodash_debounce = require_NotificationList.__toESM(lodash_debounce);
 let lodash_uniqby = require("lodash.uniqby");
-lodash_uniqby = require_useNotificationApi.__toESM(lodash_uniqby);
+lodash_uniqby = require_NotificationList.__toESM(lodash_uniqby);
 let react_virtuoso = require("react-virtuoso");
 //#region src/plugins/ChannelDetail/SectionNavigator/SectionNavigator.tsx
 var SECTION_NAVIGATOR_LAYOUT = {
@@ -179,13 +179,14 @@ var SectionNavigator = ({ className, createLayoutObserver = defaultCreateLayoutO
 * (`goBack`), where it would compete with the back affordance.
 */
 var SectionNavigatorHeader = (props) => {
-	const { t } = require_useNotificationApi.useTranslationContext("SectionNavigatorHeader");
+	const { IconMenu } = require_NotificationList.useComponentContextIcons();
+	const { t } = require_NotificationList.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, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 				appearance: "ghost",
 				"aria-label": t("Open menu"),
 				circular: true,
@@ -193,16 +194,17 @@ var SectionNavigatorHeader = (props) => {
 				onClick: openNavigation,
 				size: "md",
 				variant: "secondary",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconMenu, {})
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMenu, {})
 			});
 		};
 	}, [
+		IconMenu,
 		layout,
 		openNavigation,
 		props.goBack,
 		t
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Header, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.Header, {
 		...props,
 		LeadingContent: MenuButton
 	});
@@ -214,7 +216,7 @@ var SectionNavigatorHeader = (props) => {
 * `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, {
+var ChannelDetailNavButton = ({ className, LeadingIcon, sectionId: _sectionId, select, selected, title, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 	LeadingIcon,
 	RootElement: "button",
 	rootProps: {
@@ -244,10 +246,11 @@ var useChannelDetailContext = () => {
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
 var ChannelFilesEmptyList = () => {
-	const { t } = require_useNotificationApi.useTranslationContext("ChannelFilesEmptyList");
+	const { IconFolder } = require_NotificationList.useComponentContextIcons();
+	const { t } = require_NotificationList.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", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(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",
@@ -266,11 +269,11 @@ var searchSourceFooterStateSelector = (state) => ({
 	isLoading: state.isLoading
 });
 var ChannelDetailListLoadingIndicator = ({ searchSource }) => {
-	const { hasNextPage, isLoading } = require_useNotificationApi.useStateStore(searchSource.state, searchSourceFooterStateSelector);
+	const { hasNextPage, isLoading } = require_NotificationList.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, {})
+		children: isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.LoadingIndicator, {})
 	});
 };
 //#endregion
@@ -280,7 +283,7 @@ 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;
+	return require_NotificationList.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 ?? "");
@@ -339,7 +342,7 @@ var channelFilesSearchSourceStateSelector = (state) => ({
 	messages: state.items
 });
 var useChannelFilesSearch = () => {
-	const { client } = require_useNotificationApi.useChatContext();
+	const { client } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const channelFilesSearchSource = (0, react.useMemo)(() => {
 		const source = new stream_chat.MessageSearchSource(client, {
@@ -351,7 +354,7 @@ var useChannelFilesSearch = () => {
 		source.messageSearchFilters = { "attachments.type": { $in: [...FILE_ATTACHMENT_TYPES] } };
 		return source;
 	}, [channel.cid, client]);
-	const { isLoading, messages } = require_useNotificationApi.useStateStore(channelFilesSearchSource.state, channelFilesSearchSourceStateSelector);
+	const { isLoading, messages } = require_NotificationList.useStateStore(channelFilesSearchSource.state, channelFilesSearchSourceStateSelector);
 	const { groupCounts, items, sections } = (0, react.useMemo)(() => toChannelFileSections(messages ?? []), [messages]);
 	(0, react.useEffect)(() => {
 		channelFilesSearchSource.activate();
@@ -386,8 +389,8 @@ var ChannelFilesGroup = (0, react.forwardRef)(function ChannelFilesGroup({ class
 	});
 });
 var ChannelFilesSectionHeader = ({ timestamp }) => {
-	const { t, tDateTimeParser } = require_useNotificationApi.useTranslationContext("ChannelFilesView");
-	const label = require_useNotificationApi.getDateString({
+	const { t, tDateTimeParser } = require_NotificationList.useTranslationContext("ChannelFilesView");
+	const label = require_NotificationList.getDateString({
 		format: "MMMM YYYY",
 		messageCreatedAt: timestamp,
 		t,
@@ -405,7 +408,7 @@ var ChannelFileListItem = ({ 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, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.FileIcon, {
 			className: "str-chat__channel-detail__files-view__list-item__icon",
 			fileName,
 			mimeType: attachment.mime_type,
@@ -414,7 +417,7 @@ var ChannelFileListItem = ({ item }) => {
 	}, [attachment.mime_type, fileName]);
 	const sharedProps = (0, react.useMemo)(() => ({
 		LeadingSlot,
-		subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.FileSizeIndicator, { fileSize: attachment.file_size }),
+		subtitle: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.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"
@@ -431,20 +434,20 @@ var ChannelFileListItem = ({ item }) => {
 		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, {
+	if (assetUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		...sharedProps,
 		RootElement: "a",
 		rootProps: linkRootProps
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		...sharedProps,
 		RootElement: "div",
 		rootProps: divRootProps
 	});
 };
 var ChannelFilesView = () => {
-	const { t } = require_useNotificationApi.useTranslationContext();
-	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { t } = require_NotificationList.useTranslationContext();
+	const { close } = require_NotificationList.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]);
@@ -468,7 +471,7 @@ var ChannelFilesView = () => {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionNavigatorHeader, {
 			close,
 			title: t("Files")
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.Body, {
 			className: "str-chat__channel-detail__files-view__body",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_virtuoso.GroupedVirtuoso, {
 				atBottomStateChange,
@@ -485,11 +488,26 @@ var ChannelFilesView = () => {
 //#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 BlockUserActionIcon$1 = () => {
+	const { IconNoSign } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
+};
+var DeleteChatActionIcon = () => {
+	const { IconDelete } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconDelete, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--delete-chat" });
+};
+var MuteActionIcon = () => {
+	const { IconMute } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+};
+var MutedActionIcon = () => {
+	const { IconAudio } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
+};
+var LeaveChannelActionIcon = () => {
+	const { IconLeave } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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, {
@@ -498,7 +516,7 @@ var ChannelManagementConfirmationAlert = ({ action, cancelLabel, confirmLabel, d
 	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, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Actions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 		appearance: "solid",
 		"data-testid": `${testId}-confirm-button`,
 		disabled: isSubmitting,
@@ -506,7 +524,7 @@ var ChannelManagementConfirmationAlert = ({ action, cancelLabel, confirmLabel, d
 		size: "md",
 		variant: "danger",
 		children: confirmLabel
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 		appearance: "outline",
 		autoFocus: true,
 		"data-testid": `${testId}-cancel-button`,
@@ -518,7 +536,7 @@ var ChannelManagementConfirmationAlert = ({ action, cancelLabel, confirmLabel, d
 	})] })]
 });
 var useOtherMember = () => {
-	const { client } = require_useNotificationApi.useChatContext();
+	const { client } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
 	return (0, react.useMemo)(() => {
 		const stateMembers = Object.values(channel.state?.members ?? {});
@@ -526,7 +544,7 @@ var useOtherMember = () => {
 	}, [channel, client.user?.id]);
 };
 var useChannelManagementActionFilterState = () => {
-	const { client } = require_useNotificationApi.useChatContext();
+	const { client } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const otherMember = useOtherMember();
 	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
@@ -566,8 +584,8 @@ var useBaseChannelManagementActionSetFilter = (channelManagementActionSet) => {
 };
 var ChannelMuteAction = () => {
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_useNotificationApi.useNotificationApi();
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { t } = require_NotificationList.useTranslationContext();
 	const { muted: channelMuted } = require_useChannelHeaderOnlineStatus.useIsChannelMuted(channel);
 	const [optimisticChannelMuted, setOptimisticChannelMuted] = (0, react.useState)(channelMuted);
 	(0, react.useEffect)(() => {
@@ -629,14 +647,14 @@ var ChannelMuteAction = () => {
 	}), [optimisticChannelMuted, toggleOptimisticChannelMute]);
 	const TrailingSlot = (0, react.useMemo)(() => {
 		function ChannelMuteSwitch() {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Switch, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Switch, {
 				on: optimisticChannelMuted,
 				presentation: true
 			});
 		}
 		return ChannelMuteSwitch;
 	}, [optimisticChannelMuted]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		LeadingIcon: optimisticChannelMuted ? MutedActionIcon : MuteActionIcon,
 		RootElement: "button",
 		rootProps,
@@ -645,10 +663,10 @@ var ChannelMuteAction = () => {
 	});
 };
 var UserMuteAction$1 = () => {
-	const { client, mutes } = require_useNotificationApi.useChatContext();
+	const { client, mutes } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_useNotificationApi.useNotificationApi();
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { t } = require_NotificationList.useTranslationContext();
 	const otherMember = useOtherMember();
 	const userMuted = !!mutes.find((mute) => mute.target.id === otherMember?.user?.id);
 	const [optimisticUserMuted, setOptimisticUserMuted] = (0, react.useState)(userMuted);
@@ -713,14 +731,14 @@ var UserMuteAction$1 = () => {
 	}), [optimisticUserMuted, toggleOptimisticUserMute]);
 	const TrailingSlot = (0, react.useMemo)(() => {
 		function UserMuteSwitch() {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Switch, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Switch, {
 				on: optimisticUserMuted,
 				presentation: true
 			});
 		}
 		return UserMuteSwitch;
 	}, [optimisticUserMuted]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		LeadingIcon: optimisticUserMuted ? MutedActionIcon : MuteActionIcon,
 		RootElement: "button",
 		rootProps,
@@ -729,13 +747,13 @@ var UserMuteAction$1 = () => {
 	});
 };
 var BlockUserAction$1 = () => {
-	const { client } = require_useNotificationApi.useChatContext();
-	const { Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const { client } = require_NotificationList.useChatContext();
+	const { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_useNotificationApi.useNotificationApi();
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { t } = require_NotificationList.useTranslationContext();
 	const targetUserId = useOtherMember()?.user?.id;
-	const { userIds: blockedUserIds } = require_useNotificationApi.useStateStore(client.blockedUsers, blockedUsersSelector$1);
+	const { userIds: blockedUserIds } = require_NotificationList.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);
@@ -809,7 +827,7 @@ var BlockUserAction$1 = () => {
 		targetUserId,
 		t
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: BlockUserActionIcon$1,
 		RootElement: "button",
@@ -836,12 +854,12 @@ var BlockUserAction$1 = () => {
 	})] });
 };
 var LeaveChannelAction = () => {
-	const { client } = require_useNotificationApi.useChatContext();
+	const { client } = require_NotificationList.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 { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
+	const { close } = require_NotificationList.useModalContext();
+	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { t } = require_NotificationList.useTranslationContext();
 	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
 	const [leaveChannelInProgress, setLeaveChannelInProgress] = (0, react.useState)(false);
 	const closeLeaveChannelAlert = (0, react.useCallback)(() => {
@@ -883,7 +901,7 @@ var LeaveChannelAction = () => {
 		close,
 		t
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: LeaveChannelActionIcon,
 		RootElement: "button",
@@ -911,10 +929,10 @@ var LeaveChannelAction = () => {
 };
 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 { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
+	const { close: closeChannelDetail } = require_NotificationList.useModalContext();
+	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { t } = require_NotificationList.useTranslationContext();
 	const otherMember = useOtherMember();
 	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
 	const [deleteChatInProgress, setDeleteChatInProgress] = (0, react.useState)(false);
@@ -956,7 +974,7 @@ var DeleteChatAction = () => {
 		closeChannelDetail,
 		t
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: DeleteChatActionIcon,
 		RootElement: "button",
@@ -1014,9 +1032,10 @@ var defaultChannelManagementActionSet = [
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
 var ChannelManagementInfoBody = ({ actions }) => {
-	const { client } = require_useNotificationApi.useChatContext();
+	const { IconMute, IconPin } = require_NotificationList.useComponentContextIcons();
+	const { client } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
-	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_useNotificationApi.useComponentContext();
+	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_NotificationList.useComponentContext();
 	const { displayImage, displayTitle, groupChannelDisplayInfo } = require_useChannelHeaderOnlineStatus.useChannelPreviewInfo({ channel });
 	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
 		channel,
@@ -1036,7 +1055,7 @@ var ChannelManagementInfoBody = ({ actions }) => {
 	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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.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",
@@ -1052,8 +1071,8 @@ var ChannelManagementInfoBody = ({ actions }) => {
 					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
+						pinned && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconPin, {}),
+						resolvedIsDmChannel && userMuted || !resolvedIsDmChannel && channelMuted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMute, {}) : null
 					]
 				}), onlineStatusText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "str-chat__channel-detail__channel-management-view__profile__details__connection-status",
@@ -1087,11 +1106,11 @@ var buildChannelUpdatePayload = ({ image, name }) => {
 * 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 { t } = require_NotificationList.useTranslationContext();
+	const { client } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const { displayImage, displayTitle, groupChannelDisplayInfo } = require_useChannelHeaderOnlineStatus.useChannelPreviewInfo({ channel });
-	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { addNotification } = require_NotificationList.useNotificationApi();
 	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
 		channel,
 		ownUserId: client.user?.id
@@ -1203,12 +1222,13 @@ var useChannelManagementEditForm = ({ uploadImage }) => {
 	};
 };
 var ChannelManagementEditBody = (props) => {
-	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_useNotificationApi.useComponentContext();
+	const { IconCheckmark } = require_NotificationList.useComponentContextIcons();
+	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_NotificationList.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, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.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",
@@ -1221,7 +1241,7 @@ var ChannelManagementEditBody = (props) => {
 				}), /* @__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, {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 							appearance: "outline",
 							onClick: handleOpenFilePicker,
 							size: "sm",
@@ -1229,7 +1249,7 @@ var ChannelManagementEditBody = (props) => {
 							variant: "secondary",
 							children: t("Upload Picture")
 						}),
-						hasAvatarImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+						hasAvatarImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 							appearance: "outline",
 							onClick: handleDeleteImage,
 							size: "sm",
@@ -1248,7 +1268,7 @@ var ChannelManagementEditBody = (props) => {
 						})
 					]
 				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.TextInput, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.TextInput, {
 				"aria-label": nameLabel,
 				autoFocus: true,
 				className: "str-chat__channel-detail__channel-management-view__name-input",
@@ -1257,21 +1277,21 @@ var ChannelManagementEditBody = (props) => {
 				placeholder: nameLabel,
 				value: name
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Footer, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.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, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.FooterControls, { children: canSubmit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.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")]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconCheckmark, {}), t("Save")]
 			}) })
 		})]
 	});
 };
 var ChannelManagementView = ({ channelManagementActionSet = defaultChannelManagementActionSet, EditModeComponent = ChannelManagementEditBody, uploadImage, ViewModeComponent = ChannelManagementInfoBody }) => {
-	const { t } = require_useNotificationApi.useTranslationContext();
-	const { client } = require_useNotificationApi.useChatContext();
+	const { t } = require_NotificationList.useTranslationContext();
+	const { client } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
-	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { close } = require_NotificationList.useModalContext();
 	const resolvedIsDmChannel = require_useChannelHeaderOnlineStatus.isDmChannel({
 		channel,
 		ownUserId: client.user?.id
@@ -1284,7 +1304,7 @@ var ChannelManagementView = ({ channelManagementActionSet = defaultChannelManage
 		setIsEditing(false);
 	}, [channel.cid]);
 	const EditChannelButton = (0, react.useMemo)(() => function EditChannelButton() {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 			appearance: "outline",
 			"aria-label": t("Edit chat data"),
 			className: "str-chat__channel-detail__channel-management-view__edit-button",
@@ -1311,10 +1331,11 @@ var ChannelManagementView = ({ channelManagementActionSet = defaultChannelManage
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
 var ChannelMediaEmptyList = () => {
-	const { t } = require_useNotificationApi.useTranslationContext("ChannelMediaEmptyList");
+	const { IconImage } = require_NotificationList.useComponentContextIcons();
+	const { t } = require_NotificationList.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", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(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",
@@ -1351,7 +1372,7 @@ var toChannelMediaItems = (messages) => {
 		message.attachments?.forEach((attachment, index) => {
 			const type = getMediaAttachmentType(attachment);
 			if (!type) return;
-			const descriptor = require_useChannelHeaderOnlineStatus.toBaseImageDescriptors(attachment);
+			const descriptor = require_NotificationList.toBaseImageDescriptors(attachment);
 			if (!descriptor) return;
 			if (!(type === "video" ? Boolean(descriptor.videoThumbnailUrl || descriptor.videoUrl) : Boolean(descriptor.imageUrl))) return;
 			items.push({
@@ -1374,7 +1395,7 @@ var channelMediaSearchSourceItemsStateSelector = (state) => ({
 	messages: state.items
 });
 var useChannelMediaSearch = () => {
-	const { client } = require_useNotificationApi.useChatContext();
+	const { client } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const channelMediaSearchSource = (0, react.useMemo)(() => {
 		const source = new stream_chat.MessageSearchSource(client, {
@@ -1386,7 +1407,7 @@ var useChannelMediaSearch = () => {
 		source.messageSearchFilters = { "attachments.type": { $in: [...MEDIA_ATTACHMENT_TYPES] } };
 		return source;
 	}, [channel.cid, client]);
-	const { hasNext, isLoading, messages } = require_useNotificationApi.useStateStore(channelMediaSearchSource.state, channelMediaSearchSourceItemsStateSelector);
+	const { hasNext, isLoading, messages } = require_NotificationList.useStateStore(channelMediaSearchSource.state, channelMediaSearchSourceItemsStateSelector);
 	const mediaItems = (0, react.useMemo)(() => toChannelMediaItems(messages ?? []), [messages]);
 	(0, react.useEffect)(() => {
 		channelMediaSearchSource.activate();
@@ -1407,10 +1428,12 @@ var useChannelMediaSearch = () => {
 //#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 { t } = require_NotificationList.useTranslationContext("ChannelMediaView");
+	const { Avatar: Avatar$4 = require_NotificationList.Avatar, extractDisplayInfo: extractDisplayInfo$4 = require_NotificationList.extractDisplayInfo } = require_NotificationList.useComponentContext();
+	const { IconImage, IconVideoFill } = require_NotificationList.useComponentContextIcons();
 	const displayName = getUserDisplayName(item.user);
 	const mediaSrc = item.type === "video" ? item.galleryItem.videoThumbnailUrl : item.galleryItem.imageUrl;
-	const durationLabel = require_useChannelHeaderOnlineStatus.formatTime(item.durationSeconds, "floor");
+	const durationLabel = require_NotificationList.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",
@@ -1424,29 +1447,29 @@ var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
 			}) : /* @__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, {})
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconImage, {})
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Avatar, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$4, {
+				...extractDisplayInfo$4({ user: item.user }),
 				"aria-hidden": "true",
 				className: "str-chat__channel-detail__media-view__item__avatar",
-				imageUrl: item.user?.image,
-				size: "sm",
-				userName: displayName
+				size: "sm"
 			}),
 			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]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(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");
+	const { t } = require_NotificationList.useTranslationContext("ChannelMediaView");
+	const { IconChevronLeft, IconChevronRight } = require_NotificationList.useComponentContextIcons();
 	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, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.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",
@@ -1454,8 +1477,8 @@ var ChannelMediaPagination = ({ nextDisabled, onNext, onPrevious, previousDisabl
 			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, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconChevronLeft, {}), t("Previous")]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.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",
@@ -1463,14 +1486,14 @@ var ChannelMediaPagination = ({ nextDisabled, onNext, onPrevious, previousDisabl
 			onClick: onNext,
 			size: "md",
 			variant: "secondary",
-			children: [t("Next"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconChevronRight, {})]
+			children: [t("Next"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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 { t } = require_NotificationList.useTranslationContext();
+	const { close } = require_NotificationList.useModalContext();
+	const { BaseImage: BaseImage$1 = require_NotificationList.BaseImage, Gallery: Gallery$1 = require_NotificationList.Gallery, Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
 	const { channelMediaSearchSource, hasNext, hasResultsLoaded, isLoading, mediaItems } = useChannelMediaSearch();
 	const [viewerOpen, setViewerOpen] = (0, react.useState)(false);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
@@ -1550,7 +1573,7 @@ var ChannelMediaView = ({ itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE })
 				close,
 				title: t("Photos & videos")
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.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",
@@ -1582,7 +1605,7 @@ var ChannelMediaView = ({ itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE })
 				onClose: closeViewer,
 				open: viewerOpen,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Gallery$1, {
-					GalleryUI: require_useChannelHeaderOnlineStatus.GalleryUI,
+					GalleryUI: require_NotificationList.GalleryUI,
 					initialIndex: selectedIndex,
 					items: galleryItems,
 					onRequestClose: closeViewer
@@ -1612,9 +1635,9 @@ var useBaseChannelMembersHeaderActionSetFilter = (channelMembersHeaderActionSet)
 	]);
 };
 var AddMembersHeaderAction = ({ modeController }) => {
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { t } = require_NotificationList.useTranslationContext();
 	if (modeController.mode !== "browse") return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 		appearance: "outline",
 		"aria-label": t("Add channel members"),
 		className: "str-chat__channel-detail__channel-members-view__add-button",
@@ -1625,11 +1648,12 @@ var AddMembersHeaderAction = ({ modeController }) => {
 	});
 };
 var AddMembersMenuAction = ({ closeMenu, modeController }) => {
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { t } = require_NotificationList.useTranslationContext();
+	const { IconUserAdd } = require_NotificationList.useComponentContextIcons();
 	if (modeController.mode !== "browse") return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ContextMenuButton, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ContextMenuButton, {
 		"aria-label": t("Add channel members"),
-		Icon: require_useNotificationApi.IconUserAdd,
+		Icon: IconUserAdd,
 		onClick: () => {
 			modeController.setMode("add");
 			closeMenu?.();
@@ -1647,8 +1671,8 @@ var defaultChannelMembersHeaderActionSet = [{
 	type: "addMembers"
 }];
 var DefaultHeaderActionsMenuTrigger = ({ referenceRef, ...props }) => {
-	const { t } = require_useNotificationApi.useTranslationContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+	const { t } = require_NotificationList.useTranslationContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 		appearance: "outline",
 		"aria-label": t("Open members actions"),
 		className: "str-chat__channel-detail__channel-members-view__actions-button",
@@ -1661,14 +1685,14 @@ var DefaultHeaderActionsMenuTrigger = ({ referenceRef, ...props }) => {
 };
 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 { ContextMenu: ContextMenuComponent = require_NotificationList.ContextMenu } = require_NotificationList.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 { dialog, dialogManager } = require_NotificationList.useDialogOnNearestManager({ id: dialogId });
 	const dialogManagerId = dialogManager?.id;
-	const dialogIsOpen = require_useNotificationApi.useDialogIsOpen(dialogId, dialogManagerId);
+	const dialogIsOpen = require_NotificationList.useDialogIsOpen(dialogId, dialogManagerId);
 	if (!actions.length) return null;
 	const quickActions = actions.filter((action) => action.placement === "quick");
 	const menuActions = actions.filter((action) => action.placement === "menu");
@@ -1753,7 +1777,8 @@ var useChannelMemberIds = (channel) => {
 //#endregion
 //#region src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
 var ChannelDetailSearchInput = react.default.memo(({ autoFocus, onSearchChange, resetKey }) => {
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { IconSearch } = require_NotificationList.useComponentContextIcons();
+	const { t } = require_NotificationList.useTranslationContext();
 	const [searchInput, setSearchInput] = (0, react.useState)("");
 	(0, react.useEffect)(() => {
 		setSearchInput("");
@@ -1763,12 +1788,12 @@ var ChannelDetailSearchInput = react.default.memo(({ autoFocus, onSearchChange,
 		setSearchInput(value);
 		onSearchChange(value);
 	}, [onSearchChange]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.TextInput, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.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, {}),
+		leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSearch, {}),
 		onChange: handleSearchChange,
 		placeholder: t("Search"),
 		type: "search",
@@ -1778,10 +1803,13 @@ var ChannelDetailSearchInput = react.default.memo(({ autoFocus, onSearchChange,
 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 })]
-});
+var ChannelDetailEmptyList = ({ children }) => {
+	const { IconSearch } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__channel-detail__channel-members-view__empty-state",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSearch, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })]
+	});
+};
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
 var USER_SEARCH_PAGE_SIZE = 30;
@@ -1791,22 +1819,25 @@ var searchSourceItemsStateSelector = (state) => ({
 });
 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 MuteIndicator = () => {
+	const { IconMute } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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 { t } = require_NotificationList.useTranslationContext();
+	const { Avatar: Avatar$3 = require_NotificationList.Avatar, extractDisplayInfo: extractDisplayInfo$3 = require_NotificationList.extractDisplayInfo } = require_NotificationList.useComponentContext();
 	const displayName = getUserDisplayName(user);
 	const LeadingSlot = (0, react.useMemo)(() => function MemberAvatar() {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Avatar, {
-			imageUrl: user.image,
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$3, {
+			...extractDisplayInfo$3({ user }),
 			isOnline: user.online,
-			size: "md",
-			userName: displayName
+			size: "md"
 		});
 	}, [
-		displayName,
-		user.image,
-		user.online
+		Avatar$3,
+		extractDisplayInfo$3,
+		user
 	]);
 	const SelectableTrailingSlot = (0, react.useMemo)(() => function SelectCheckbox() {
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Checkbox, {
@@ -1823,14 +1854,14 @@ var ChannelMembersAddViewItem = ({ canManageChannelMembers, isMember, isMuted, i
 		toggleSelectedUser,
 		user.id
 	]);
-	if (canManageChannelMembers && !isMember) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	if (canManageChannelMembers && !isMember) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		LeadingSlot,
 		RootElement: "button",
 		rootProps: selectableRootProps,
 		title: displayName,
 		TrailingSlot: SelectableTrailingSlot
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		LeadingSlot,
 		rootProps: readOnlyRootProps,
 		subtitle: isMember ? t("Already a member") : void 0,
@@ -1839,11 +1870,11 @@ var ChannelMembersAddViewItem = ({ canManageChannelMembers, isMember, isMuted, i
 	});
 };
 var ChannelMembersAddView = ({ modeController, searchSource }) => {
-	const { client, mutes } = require_useNotificationApi.useChatContext();
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { client, mutes } = require_NotificationList.useChatContext();
+	const { t } = require_NotificationList.useTranslationContext();
 	const { channel } = useChannelDetailContext();
 	const canManageChannelMembers = canUpdateChannelMembers(channel);
-	const { addNotification } = require_useNotificationApi.useNotificationApi();
+	const { addNotification } = require_NotificationList.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, {
@@ -1851,7 +1882,7 @@ var ChannelMembersAddView = ({ modeController, searchSource }) => {
 		pageSize: USER_SEARCH_PAGE_SIZE,
 		resetOnNewSearchQuery: false
 	}), [client, searchSource]);
-	const { isLoading, users } = require_useNotificationApi.useStateStore(userSearchSource.state, searchSourceItemsStateSelector);
+	const { isLoading, users } = require_NotificationList.useStateStore(userSearchSource.state, searchSourceItemsStateSelector);
 	const [isSaving, setIsSaving] = (0, react.useState)(false);
 	const [selectedUserIds, setSelectedUserIds] = (0, react.useState)([]);
 	(0, react.useEffect)(() => {
@@ -1917,7 +1948,7 @@ var ChannelMembersAddView = ({ modeController, searchSource }) => {
 			});
 		}
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Prompt.Body, {
 		className: "str-chat__channel-members-view__body",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailSearchInput, {
 			autoFocus: true,
@@ -1931,7 +1962,7 @@ var ChannelMembersAddView = ({ modeController, searchSource }) => {
 			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, {
+	}), canManageChannelMembers && selectedUserIds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.Footer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.FooterControls, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Prompt.FooterControlsButtonPrimary, {
 		disabled: isSaving,
 		onClick: handleSave,
 		children: t("Add {{ count }} members", { count: selectedUserIds.length })
@@ -1970,7 +2001,7 @@ var useChannelMembersSearch = () => {
 		pageSize: 100,
 		resetOnNewSearchQuery: false
 	}), [channel]);
-	const { members } = require_useNotificationApi.useStateStore(membersSearchSource.state, membersSearchSourceItemsStateSelector);
+	const { members } = require_NotificationList.useStateStore(membersSearchSource.state, membersSearchSourceItemsStateSelector);
 	const [searchInputResetKey, setSearchInputResetKey] = (0, react.useState)(0);
 	const resetMembersSearch = (0, react.useCallback)(() => {
 		membersSearchSource.cancelScheduledQuery();
@@ -2012,28 +2043,33 @@ var getPresenceStatusText$1 = (user, t) => {
 	return t("Offline");
 };
 var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { t } = require_NotificationList.useTranslationContext();
+	const { Avatar: Avatar$2 = require_NotificationList.Avatar, extractDisplayInfo: extractDisplayInfo$2 = require_NotificationList.extractDisplayInfo } = require_NotificationList.useComponentContext();
 	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,
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$2, {
+			...extractDisplayInfo$2({ user: user ?? void 0 }),
 			isOnline: user?.online,
-			size: "md",
-			userName: getUserDisplayName(user)
+			size: "md"
 		});
-	}, [user]);
+	}, [
+		Avatar$2,
+		extractDisplayInfo$2,
+		user
+	]);
 	const TrailingSlot = (0, react.useMemo)(() => function MemberTrailingSlot() {
+		const { IconMute } = require_NotificationList.useComponentContextIcons();
 		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]
+			}) : null, isMuted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		LeadingSlot,
 		RootElement: "button",
 		rootProps: (0, react.useMemo)(() => ({
@@ -2053,8 +2089,8 @@ var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
 };
 var computeMemberItemKey = (_, member) => getMemberUserId(member);
 var ChannelMembersBrowseView = ({ onMemberSelect }) => {
-	const { mutes } = require_useNotificationApi.useChatContext();
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { mutes } = require_NotificationList.useChatContext();
+	const { t } = require_NotificationList.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]);
@@ -2069,7 +2105,7 @@ var ChannelMembersBrowseView = ({ onMemberSelect }) => {
 	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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.Prompt.Body, {
 		className: "str-chat__channel-members-view__body",
 		children: [hasMembers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailSearchInput, {
 			onSearchChange: handleSearchChange,
@@ -2098,11 +2134,26 @@ var useChannelMemberActionContext = () => {
 	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 MemberMuteActionIcon = () => {
+	const { IconMute } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+};
+var MemberUnmuteActionIcon = () => {
+	const { IconAudio } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
+};
+var SendDirectMessageActionIcon = () => {
+	const { IconMessageBubble } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMessageBubble, { className: "str-chat__channel-detail__action-icon" });
+};
+var BlockUserActionIcon = () => {
+	const { IconNoSign } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
+};
+var RemoveUserActionIcon = () => {
+	const { IconUserRemove } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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, {
@@ -2111,7 +2162,7 @@ var ChannelMemberConfirmationAlert = ({ action, cancelLabel, confirmLabel, descr
 	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, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Alert.Actions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 		appearance: "solid",
 		"data-testid": `${testId}-confirm-button`,
 		disabled: isSubmitting,
@@ -2119,7 +2170,7 @@ var ChannelMemberConfirmationAlert = ({ action, cancelLabel, confirmLabel, descr
 		size: "md",
 		variant: "danger",
 		children: confirmLabel
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
 		appearance: "outline",
 		autoFocus: true,
 		"data-testid": `${testId}-cancel-button`,
@@ -2131,7 +2182,7 @@ var ChannelMemberConfirmationAlert = ({ action, cancelLabel, confirmLabel, descr
 	})] })]
 });
 var useChannelMemberActionFilterState = () => {
-	const { client } = require_useNotificationApi.useChatContext();
+	const { client } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const { targetUserId } = useChannelMemberActionContext();
 	const ownCapabilities = channel.data?.own_capabilities;
@@ -2162,12 +2213,12 @@ var useBaseChannelMemberActionSetFilter = (channelMemberActionSet) => {
 	]);
 };
 var SendDirectMessageAction = () => {
-	const { client, setActiveChannel } = require_useNotificationApi.useChatContext();
-	const { setChannels } = require_useNotificationApi.useChannelListContext();
-	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { client, setActiveChannel } = require_NotificationList.useChatContext();
+	const { setChannels } = require_NotificationList.useChannelListContext();
+	const { close } = require_NotificationList.useModalContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_useNotificationApi.useNotificationApi();
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { t } = require_NotificationList.useTranslationContext();
 	const { targetUserId } = useChannelMemberActionContext();
 	const [isSending, setIsSending] = (0, react.useState)(false);
 	const openDirectMessage = (0, react.useCallback)(async () => {
@@ -2202,7 +2253,7 @@ var SendDirectMessageAction = () => {
 		t,
 		targetUserId
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		LeadingIcon: SendDirectMessageActionIcon,
 		RootElement: "button",
 		rootProps: (0, react.useMemo)(() => ({
@@ -2215,9 +2266,9 @@ var SendDirectMessageAction = () => {
 };
 var UserMuteAction = () => {
 	const { channel } = useChannelDetailContext();
-	const { client, mutes } = require_useNotificationApi.useChatContext();
-	const { addNotification } = require_useNotificationApi.useNotificationApi();
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { client, mutes } = require_NotificationList.useChatContext();
+	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { t } = require_NotificationList.useTranslationContext();
 	const { targetUserId } = useChannelMemberActionContext();
 	const userMuted = !!targetUserId && mutes.some((mute) => mute.target.id === targetUserId);
 	const [optimisticUserMuted, setOptimisticUserMuted] = (0, react.useState)(userMuted);
@@ -2281,14 +2332,14 @@ var UserMuteAction = () => {
 	}), [optimisticUserMuted, toggleOptimisticUserMute]);
 	const TrailingSlot = (0, react.useMemo)(() => {
 		function UserMuteSwitch() {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Switch, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Switch, {
 				on: optimisticUserMuted,
 				presentation: true
 			});
 		}
 		return UserMuteSwitch;
 	}, [optimisticUserMuted]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		LeadingIcon: optimisticUserMuted ? MemberUnmuteActionIcon : MemberMuteActionIcon,
 		RootElement: "button",
 		rootProps,
@@ -2297,13 +2348,13 @@ var UserMuteAction = () => {
 	});
 };
 var BlockUserAction = () => {
-	const { client } = require_useNotificationApi.useChatContext();
-	const { Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const { client } = require_NotificationList.useChatContext();
+	const { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_useNotificationApi.useNotificationApi();
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { t } = require_NotificationList.useTranslationContext();
 	const { memberDisplayName, targetUserId } = useChannelMemberActionContext();
-	const { userIds: blockedUserIds } = require_useNotificationApi.useStateStore(client.blockedUsers, blockedUsersSelector);
+	const { userIds: blockedUserIds } = require_NotificationList.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);
@@ -2377,7 +2428,7 @@ var BlockUserAction = () => {
 		t,
 		targetUserId
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: BlockUserActionIcon,
 		RootElement: "button",
@@ -2404,10 +2455,10 @@ var BlockUserAction = () => {
 	})] });
 };
 var RemoveUserAction = () => {
-	const { Modal = require_useChannelHeaderOnlineStatus.GlobalModal } = require_useNotificationApi.useComponentContext();
+	const { Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
 	const { channel } = useChannelDetailContext();
-	const { addNotification } = require_useNotificationApi.useNotificationApi();
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { addNotification } = require_NotificationList.useNotificationApi();
+	const { t } = require_NotificationList.useTranslationContext();
 	const { memberDisplayName, targetUserId } = useChannelMemberActionContext();
 	const [alertOpen, setAlertOpen] = (0, react.useState)(false);
 	const [removeMemberInProgress, setRemoveMemberInProgress] = (0, react.useState)(false);
@@ -2448,7 +2499,7 @@ var RemoveUserAction = () => {
 		t,
 		targetUserId
 	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		destructive: true,
 		LeadingIcon: RemoveUserActionIcon,
 		RootElement: "button",
@@ -2506,7 +2557,7 @@ var getPresenceStatusText = (user, t) => {
 	return t("Offline");
 };
 var ChannelMemberDetail = ({ channelMemberActionSet = defaultChannelMemberActionSet, member, onBack }) => {
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { t } = require_NotificationList.useTranslationContext();
 	const memberDisplayName = getMemberDisplayName(member);
 	const memberStatusText = getPresenceStatusText(member.user, t);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelMemberActionProvider, {
@@ -2524,9 +2575,9 @@ var ChannelMemberDetail = ({ channelMemberActionSet = defaultChannelMemberAction
 	});
 };
 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 { close } = require_NotificationList.useModalContext();
+	const { t } = require_NotificationList.useTranslationContext();
+	const { Avatar = require_useChannelHeaderOnlineStatus.ChannelAvatar } = require_NotificationList.useComponentContext();
 	const { member } = useChannelMemberActionContext();
 	const filteredActions = useBaseChannelMemberActionSetFilter(channelMemberActionSet);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2535,7 +2586,7 @@ var ChannelMemberDetailContent = ({ channelMemberActionSet, memberDisplayName, m
 			close,
 			goBack: onBack,
 			title: t("Member detail")
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.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",
@@ -2566,7 +2617,7 @@ var ChannelMemberDetailContent = ({ channelMemberActionSet, memberDisplayName, m
 var RESERVED_MODES = ["browse", "memberDetail"];
 var isReservedMode = (mode) => RESERVED_MODES.includes(mode);
 var AddMembersModeTitle = () => {
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { t } = require_NotificationList.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. */
@@ -2575,9 +2626,9 @@ var defaultChannelMembersModeViews = { add: {
 	Title: AddMembersModeTitle
 } };
 var ChannelMembersView = ({ HeaderActions = DefaultHeaderActions, headerActionSet = defaultChannelMembersHeaderActionSet, HeaderActionsMenuTrigger, layout, modeViews: customModeViews }) => {
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { t } = require_NotificationList.useTranslationContext();
 	const { channel } = useChannelDetailContext();
-	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
+	const { close } = require_NotificationList.useModalContext();
 	const [mode, setMode] = (0, react.useState)("browse");
 	const [selectedMember, setSelectedMember] = (0, react.useState)();
 	const memberCount = useChannelMemberCount(channel);
@@ -2641,10 +2692,11 @@ var ChannelMembersView = ({ HeaderActions = DefaultHeaderActions, headerActionSe
 //#endregion
 //#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
 var PinnedMessagesEmptyList = () => {
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { IconPin } = require_NotificationList.useComponentContextIcons();
+	const { t } = require_NotificationList.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", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(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",
@@ -2682,7 +2734,7 @@ 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 { client } = require_NotificationList.useChatContext();
 	const { channel } = useChannelDetailContext();
 	const pinnedMessagesSearchSource = (0, react.useMemo)(() => {
 		const source = searchSource ?? new stream_chat.MessageSearchSource(client, {
@@ -2704,7 +2756,7 @@ var usePinnedMessagesSearch = ({ searchSource } = {}) => {
 		client,
 		searchSource
 	]);
-	const { messages } = require_useNotificationApi.useStateStore(pinnedMessagesSearchSource.state, pinnedMessagesSearchSourceItemsStateSelector);
+	const { messages } = require_NotificationList.useStateStore(pinnedMessagesSearchSource.state, pinnedMessagesSearchSourceItemsStateSelector);
 	(0, react.useEffect)(() => {
 		pinnedMessagesSearchSource.activate();
 		return () => {
@@ -2740,7 +2792,7 @@ var usePinnedMessagesSearch = ({ searchSource } = {}) => {
 var computeItemKey = (_, message) => message.id;
 var normalizeTimestamp = (timestamp) => {
 	if (!timestamp) return void 0;
-	return require_useNotificationApi.isDate(timestamp) ? timestamp.toISOString() : timestamp;
+	return require_NotificationList.isDate(timestamp) ? timestamp.toISOString() : timestamp;
 };
 var getPinnedMessagePreview = (message, t) => {
 	const text = message.text?.trim();
@@ -2749,9 +2801,9 @@ var getPinnedMessagePreview = (message, t) => {
 	return attachment?.title || attachment?.text || attachment?.fallback || attachment?.type || t("Pinned message");
 };
 var PinnedMessageDate = ({ message }) => {
-	const { t, tDateTimeParser } = require_useNotificationApi.useTranslationContext("PinnedMessageDate");
+	const { t, tDateTimeParser } = require_NotificationList.useTranslationContext("PinnedMessageDate");
 	const normalizedTimestamp = normalizeTimestamp(message.created_at);
-	const when = (0, react.useMemo)(() => require_useNotificationApi.getDateString({
+	const when = (0, react.useMemo)(() => require_NotificationList.getDateString({
 		messageCreatedAt: normalizedTimestamp,
 		t,
 		tDateTimeParser,
@@ -2769,19 +2821,23 @@ var PinnedMessageDate = ({ message }) => {
 	});
 };
 var PinnedMessagesViewItem = ({ message, onSelect }) => {
-	const { t } = require_useNotificationApi.useTranslationContext();
+	const { t } = require_NotificationList.useTranslationContext();
+	const { Avatar: Avatar$1 = require_NotificationList.Avatar, extractDisplayInfo: extractDisplayInfo$1 = require_NotificationList.extractDisplayInfo } = require_NotificationList.useComponentContext();
 	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
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$1, {
+			...extractDisplayInfo$1({ user: message.user ?? void 0 }),
+			size: "md"
 		});
-	}, [displayName, message.user?.image]);
+	}, [
+		Avatar$1,
+		extractDisplayInfo$1,
+		message.user
+	]);
 	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, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.ListItemLayout, {
 		LeadingSlot,
 		RootElement: "button",
 		rootProps: (0, react.useMemo)(() => ({
@@ -2795,10 +2851,10 @@ var PinnedMessagesViewItem = ({ message, onSelect }) => {
 	});
 };
 var PinnedMessagesView = ({ searchSource }) => {
-	const { setActiveChannel } = require_useNotificationApi.useChatContext();
-	const { t } = require_useNotificationApi.useTranslationContext();
-	const { close } = require_useChannelHeaderOnlineStatus.useModalContext();
-	const { jumpToMessage } = require_useNotificationApi.useChannelActionContext();
+	const { setActiveChannel } = require_NotificationList.useChatContext();
+	const { t } = require_NotificationList.useTranslationContext();
+	const { close } = require_NotificationList.useModalContext();
+	const { jumpToMessage } = require_NotificationList.useChannelActionContext();
 	const { channel } = useChannelDetailContext();
 	const { displayedMessages, handleSearchChange, hasPinnedMessages, hasSearchResultsLoaded, pinnedMessagesSearchSource } = usePinnedMessagesSearch({ searchSource });
 	const handleSelectMessage = (0, react.useCallback)((message) => {
@@ -2833,7 +2889,7 @@ var PinnedMessagesView = ({ searchSource }) => {
 			close,
 			description: t("Browse pinned messages"),
 			title: t("Pinned messages")
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useChannelHeaderOnlineStatus.Prompt.Body, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_NotificationList.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",
@@ -2849,11 +2905,26 @@ var PinnedMessagesView = ({ searchSource }) => {
 };
 //#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 ChannelManagementNavButtonIcon = () => {
+	const { IconInfo } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconInfo, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelMembersNavButtonIcon = () => {
+	const { IconUser } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconUser, { className: "str-chat__channel-detail__action-icon" });
+};
+var PinnedMessagesNavButtonIcon = () => {
+	const { IconPin } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconPin, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelMediaNavButtonIcon = () => {
+	const { IconImage } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconImage, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelFilesNavButtonIcon = () => {
+	const { IconFolder } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconFolder, { className: "str-chat__channel-detail__action-icon" });
+};
 var ChannelManagementNavButton = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelDetailNavButton, {
 	...props,
 	LeadingIcon: ChannelManagementNavButtonIcon,
@@ -2910,7 +2981,7 @@ var ChannelDetail = ({ channel, className, defaultLayout = SECTION_NAVIGATOR_LAY
 	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, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.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,
@@ -2925,9 +2996,9 @@ var ChannelDetail = ({ channel, className, defaultLayout = SECTION_NAVIGATOR_LAY
 //#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 { t } = require_NotificationList.useTranslationContext();
+	const { channel } = require_NotificationList.useChannelStateContext();
+	const { Avatar: ContextAvatar, Modal = require_NotificationList.GlobalModal } = require_NotificationList.useComponentContext();
 	const [isModalOpen, setIsModalOpen] = (0, react.useState)(false);
 	const openModal = (0, react.useCallback)(() => setIsModalOpen(true), []);
 	const closeModal = (0, react.useCallback)(() => setIsModalOpen(false), []);