stream-chat-react 14.0.0-beta.4 → 14.0.0-beta.6

package/dist/cjs/index.js

@@ -5,7 +5,7 @@ const clsx = require("clsx");
 const nanoid = require("nanoid");
 const React = require("react");
 const audioProcessing = require("./audioProcessing.56e5db9d.js");
-const WithAudioPlayback = require("./WithAudioPlayback.236d404c.js");
+const WithAudioPlayback = require("./WithAudioPlayback.f9abf707.js");
 const streamChat = require("stream-chat");
 const throttle = require("lodash.throttle");
 const linkify = require("linkifyjs");
@@ -292,7 +292,8 @@ const DialogPortalDestination = () => {
   React.useEffect(() => {
     if (!destinationRoot || !dialogManager) return;
     const handleDocumentClick = (event) => {
-      if (destinationRoot.contains(event.target)) return;
+      const target = event.target;
+      if (target !== destinationRoot && destinationRoot.contains(target)) return;
       setTimeout(() => {
         Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
           (dialog) => {
@@ -319,21 +320,6 @@ const DialogPortalDestination = () => {
       className: "str-chat__dialog-overlay",
       "data-str-chat__portal-id": dialogManager?.id,
       "data-testid": "str-chat__dialog-overlay",
-      onClick: (event) => {
-        if (!dialogManager) return;
-        if (event.target !== event.currentTarget) return;
-        Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
-          (dialog) => {
-            if (!dialog.isOpen) return;
-            if (!shouldCloseOnOutsideClick({
-              dialog,
-              managerCloseOnClickOutside: dialogManager.closeOnClickOutside
-            }))
-              return;
-            dialogManager.close(dialog.id);
-          }
-        );
-      },
       ref: setDestinationRoot,
       style: {
         "--str-chat__dialog-overlay-height": openedDialogCount > 0 ? "100%" : "0"
@@ -491,6 +477,38 @@ const useMessageContext = (_componentName) => {
   }
   return contextValue;
 };
+const snapshots = /* @__PURE__ */ new WeakMap();
+const savePreEditSnapshot = (messageComposer) => {
+  if (snapshots.has(messageComposer)) return;
+  const composerState = messageComposer.state.getLatestValue();
+  const textState = messageComposer.textComposer.state.getLatestValue();
+  const attachmentState = messageComposer.attachmentManager.state.getLatestValue();
+  const linkPreviewState = messageComposer.linkPreviewsManager.state.getLatestValue();
+  const locationState = messageComposer.locationComposer.state.getLatestValue();
+  const pollState = messageComposer.pollComposer.state.getLatestValue();
+  const customDataState = messageComposer.customDataManager.state.getLatestValue();
+  snapshots.set(messageComposer, () => {
+    messageComposer.state.next(composerState);
+    messageComposer.textComposer.state.next(textState);
+    messageComposer.attachmentManager.state.next(attachmentState);
+    messageComposer.linkPreviewsManager.state.next(linkPreviewState);
+    messageComposer.locationComposer.state.next(locationState);
+    messageComposer.pollComposer.state.next(pollState);
+    messageComposer.customDataManager.state.next(customDataState);
+  });
+};
+const restorePreEditSnapshot = (messageComposer) => {
+  const restore = snapshots.get(messageComposer);
+  snapshots.delete(messageComposer);
+  if (restore) {
+    restore();
+  } else {
+    messageComposer.clear();
+  }
+};
+const discardPreEditSnapshot = (messageComposer) => {
+  snapshots.delete(messageComposer);
+};
 const MessageBounceContext = React.createContext(
   void 0
 );
@@ -519,6 +537,7 @@ function MessageBounceProvider({ children }) {
   const handleEdit = React.useCallback(
     (e) => {
       e.preventDefault();
+      savePreEditSnapshot(messageComposer);
       messageComposer.initState({ composition: message });
     },
     [message, messageComposer]
@@ -727,47 +746,6 @@ const useNotifications = (options) => {
   const { notifications } = WithAudioPlayback.useStateStore(client.notifications.store, selector2);
   return notifications;
 };
-const IconGiphy = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  WithAudioPlayback.BaseIcon,
-  {
-    ...props,
-    className: clsx("str-chat__icon--giphy", className),
-    viewBox: "0 0 16 16",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "black", height: "16", rx: "8", width: "16" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          clipRule: "evenodd",
-          d: "M5.27976 4.40015H10.7206V11.5999H5.2793L5.27976 4.40015Z",
-          fill: "black",
-          fillRule: "evenodd"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.19189 4.1333H5.27969V11.8669H4.19189V4.1333Z", fill: "#04FF8E" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.7202 6.26685H11.808V11.8668H10.7202V6.26685Z", fill: "#8E2EFF" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.19189 11.5999H11.8079V12.6667H4.19189V11.5999Z", fill: "#00C5FF" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.19189 3.33325H8.54403V4.40005H4.19189V3.33325Z", fill: "#FFF152" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M10.72 5.46638V4.40005H9.63174V3.33325H8.54395V6.53318H11.8078V5.46638",
-          fill: "#FF5B5B"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.7202 7.6V6.5332H11.808", fill: "#551C99" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          clipRule: "evenodd",
-          d: "M8.54432 3.33325V4.40005H7.45605",
-          fill: "#999131",
-          fillRule: "evenodd"
-        }
-      )
-    ]
-  }
-);
 const PlayButton = ({ className, isPlaying, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   WithAudioPlayback.Button,
   {
@@ -8925,7 +8903,7 @@ const useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
   const isOwner = channel.state.membership.role === "owner";
   const isModerator = client.user?.role === "channel_moderator" || channel.state.membership.role === "channel_moderator" || channel.state.membership.role === "moderator" || channel.state.membership.is_moderator === true || channel.state.membership.channel_role === "channel_moderator";
   const isMyMessage = client.userID === message.user?.id;
-  const canEdit = !message.poll && (!onlySenderCanEdit && channelCapabilities["update-any-message"] || isMyMessage && channelCapabilities["update-own-message"]);
+  const canEdit = !message.poll && message.command !== "giphy" && (!onlySenderCanEdit && channelCapabilities["update-any-message"] || isMyMessage && channelCapabilities["update-own-message"]);
   const canDelete = channelCapabilities["delete-any-message"] || isMyMessage && channelCapabilities["delete-own-message"];
   const canFlag = !isMyMessage && channelCapabilities["flag-message"];
   const canMute = !isMyMessage && channelCapabilities["mute-channel"];
@@ -9331,12 +9309,17 @@ const ErrorBadge = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...rest, className, size, variant: "error", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMarkFill, {}) });
 function AvatarStack({
   badgeSize,
+  capLimit = 3,
   component: Component = "div",
   displayInfo = [],
-  overflowCount,
   size
 }) {
   const { Avatar: Avatar$1 = Avatar } = WithAudioPlayback.useComponentContext(AvatarStack.name);
+  const displayInfoToRender = React.useMemo(
+    () => displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo,
+    [displayInfo, capLimit]
+  );
+  const overflowCount = displayInfo.length - displayInfoToRender.length;
   if (!displayInfo.length) {
     return null;
   }
@@ -9346,8 +9329,9 @@ function AvatarStack({
       className: clsx("str-chat__avatar-stack", {
         [`str-chat__avatar-stack--size-${size}`]: typeof size === "string"
       }),
+      "data-testid": "avatar-stack",
       children: [
-        displayInfo.map((info, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        displayInfoToRender.map((info, index) => /* @__PURE__ */ jsxRuntime.jsx(
           Avatar$1,
           {
             imageUrl: info.imageUrl,
@@ -9360,6 +9344,7 @@ function AvatarStack({
           Badge,
           {
             className: "str-chat__avatar-stack__count-badge",
+            "data-testid": "avatar-stack-count-badge",
             size: badgeSize ?? size,
             variant: "counter",
             children: [
@@ -9375,34 +9360,36 @@ function AvatarStack({
 const ChannelAvatar = ({
   displayMembers,
   imageUrl,
-  overflowCount,
   size,
   userName,
   ...sharedProps
 }) => {
-  if ((displayMembers?.length ?? 0) >= 2) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      GroupAvatar,
+  const displayInfo = React.useMemo(() => {
+    if (displayMembers && displayMembers.length > 0) {
+      return displayMembers;
+    }
+    return [
       {
-        displayMembers,
-        overflowCount,
-        size,
-        ...sharedProps
+        imageUrl,
+        userName
       }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { imageUrl, size, userName, ...sharedProps });
+    ];
+  }, [displayMembers, imageUrl, userName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupAvatar, { displayMembers: displayInfo, size, ...sharedProps });
 };
 const GroupAvatar = ({
   badgeSize,
   className,
   displayMembers = [],
   isOnline,
-  overflowCount,
   size,
   ...rest
 }) => {
-  const displayCountBadge = typeof overflowCount === "number" && overflowCount > 0;
+  const displayMembersToRender = React.useMemo(
+    () => displayMembers.length > 4 ? displayMembers.slice(0, 2) : displayMembers,
+    [displayMembers]
+  );
+  const overflowCount = displayMembers.length - displayMembersToRender.length;
   if (displayMembers.length < 2) {
     const firstUser = displayMembers[0];
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9440,19 +9427,20 @@ const GroupAvatar = ({
       role: "button",
       ...rest,
       children: [
-        displayMembers.slice(0, displayCountBadge ? 2 : 4).map(({ imageUrl, userName }, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        displayMembersToRender.map(({ id, imageUrl, userName }, index) => /* @__PURE__ */ jsxRuntime.jsx(
           Avatar,
           {
             imageUrl,
             size: avatarSize,
             userName
           },
-          `${userName}-${imageUrl}-${index}`
+          id || `${userName}-${imageUrl}-${index}`
         )),
-        displayCountBadge && /* @__PURE__ */ jsxRuntime.jsxs(
+        typeof overflowCount === "number" && overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
           Badge,
           {
             className: "str-chat__avatar-group__count-badge",
+            "data-testid": "group-avatar-count-badge",
             size: badgeSize,
             variant: "counter",
             children: [
@@ -11194,6 +11182,7 @@ const useSubmitHandler = (props) => {
       if (messageComposer.editedMessage && localMessage.type !== "error") {
         try {
           await editMessage(localMessage, sendOptions);
+          discardPreEditSnapshot(messageComposer);
           messageComposer.clear();
         } catch (err) {
           client.notifications.addError({
@@ -12049,7 +12038,7 @@ const RemoveAttachmentPreviewButton = ({
       "data-testid": "preview-item-delete-button",
       disabled: uploadState === "uploading",
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossSmall, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmarkSmall, {})
     }
   );
 };
@@ -13584,15 +13573,7 @@ const SwitchField = ({
             ref: inputRef
           }
         ),
-        title ? /* @__PURE__ */ jsxRuntime.jsx(
-          SwitchFieldLabel,
-          {
-            description,
-            htmlFor: id,
-            onClick: () => inputRef.current?.click(),
-            title
-          }
-        ) : children,
+        title ? /* @__PURE__ */ jsxRuntime.jsx(SwitchFieldLabel, { description, htmlFor: id, title }) : children,
         /* @__PURE__ */ jsxRuntime.jsx(
           Switch,
           {
@@ -14651,7 +14632,7 @@ const PollVoteTimestamp = ({ timestamp }) => {
 const PollVoteAuthor = ({ vote }) => {
   const { t } = WithAudioPlayback.useTranslationContext();
   const { client } = WithAudioPlayback.useChatContext();
-  const displayName = client.user?.id && client.user.id === vote.user?.id ? t("You") : vote.user?.name || t("Anonymous");
+  const displayName = client.user?.id && client.user.id === vote.user?.id ? t("You") : vote.user?.name || vote.user?.id || t("Anonymous");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__poll-vote__author", children: [
     vote.user && /* @__PURE__ */ jsxRuntime.jsx(
       Avatar,
@@ -15725,7 +15706,7 @@ const useAttachmentSelectorContext = () => React.useContext(AttachmentSelectorCo
 const icons = {
   ban: WithAudioPlayback.IconUserRemove,
   flag: WithAudioPlayback.IconFlag,
-  giphy: IconGiphy,
+  giphy: WithAudioPlayback.IconGiphy,
   mute: WithAudioPlayback.IconMute,
   unban: WithAudioPlayback.IconUserAdd,
   unmute: WithAudioPlayback.IconAudio
@@ -16273,7 +16254,7 @@ const FileAttachmentPreview = ({
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: hasSizeLimitError ? t("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })
             ] }),
             hasRetriableError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__attachment-preview-file__retriable-error", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationTriangle, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationTriangleFill, {}),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("Upload error") }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -16493,7 +16474,7 @@ const ProgressBar = ({ className, progress, seek }) => {
         {
           className: "str-chat__message-attachment-audio-widget--progress-indicator",
           ref: setProgressIndicator,
-          style: { left: `${indicatorLeft}px` }
+          style: { insetInlineStart: `${indicatorLeft}px` }
         }
       )
     }
@@ -16729,7 +16710,7 @@ const WaveProgressBar = ({
             "data-testid": "wave-progress-bar-progress-indicator",
             ref: setProgressIndicator,
             style: {
-              left: `${indicatorLeft}px`
+              insetInlineStart: `${indicatorLeft}px`
             }
           }
         )
@@ -16828,7 +16809,7 @@ const AudioAttachmentPreview = ({
               /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMark, {}),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: hasSizeLimitError ? t("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })
             ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__attachment-preview-file__retriable-error", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationTriangle, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationTriangleFill, {}),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("Upload error") }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
@@ -16871,7 +16852,7 @@ const MediaAttachmentPreview = ({
   removeAttachments
 }) => {
   const { t } = WithAudioPlayback.useTranslationContext();
-  const { BaseImage: BaseImage$1 = BaseImage, LoadingIndicator: LoadingIndicator2 = LoadingIndicatorIcon } = WithAudioPlayback.useComponentContext();
+  const { BaseImage: BaseImage$1 = BaseImage, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator } = WithAudioPlayback.useComponentContext();
   const [thumbnailPreviewError, setThumbnailPreviewError] = React.useState(false);
   const { id, uploadPermissionCheck, uploadState } = attachment.localMetadata ?? {};
   const isUploading = uploadState === "uploading";
@@ -16922,7 +16903,7 @@ const MediaAttachmentPreview = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("str-chat__attachment-preview-media__overlay"), children: [
-            isUploading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator2, {}),
+            isUploading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator$1, { "data-testid": "loading-indicator" }),
             streamChat.isVideoAttachment(attachment) && !hasUploadError && uploadState !== "uploading" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__attachment-preview-media__video-indicator", children: [
               /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconVideoFill, {}),
               attachment.duration && /* @__PURE__ */ jsxRuntime.jsx("div", { children: attachment.duration })
@@ -17473,7 +17454,7 @@ const CommandChip = ({ command }) => {
   const { textareaRef } = WithAudioPlayback.useMessageComposerContext();
   if (!command) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__command-chip", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconThunder, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconBolt, {}),
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: command.name }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -18778,7 +18759,7 @@ const MessageComposerPreviews = () => {
       {
         message: editedMessage,
         onCancel: () => {
-          messageComposer.clear();
+          restorePreEditSnapshot(messageComposer);
         }
       }
     ) }) : /* @__PURE__ */ jsxRuntime.jsx(QuotedMessagePreview$1, {}),
@@ -19014,8 +18995,7 @@ const getGroupChannelDisplayInfo = (channel) => {
     memberList.push({ imageUrl: user.image, userName: user.name });
   }
   return {
-    members: memberList,
-    overflowCount: memberList.length > 4 ? memberList.length - 2 : void 0
+    members: memberList
   };
 };
 function computeChannelDisplayName(channel, directMessageLabel) {
@@ -19221,7 +19201,7 @@ const useChat = ({
   };
   React.useEffect(() => {
     if (!client) return;
-    const version = "14.0.0-beta.4";
+    const version = "14.0.0-beta.6";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -19355,7 +19335,7 @@ const ThreadHeaderSubtitle = ({
   ) });
 };
 const ThreadHeader = (props) => {
-  const { closeThread, MenuIcon = WithAudioPlayback.IconLayoutAlignLeft, overrideTitle, thread } = props;
+  const { closeThread, MenuIcon = WithAudioPlayback.IconSidebar, overrideTitle, thread } = props;
   const { t } = WithAudioPlayback.useTranslationContext();
   const { channel } = WithAudioPlayback.useChannelStateContext();
   const { activeChatView } = WithAudioPlayback.useChatViewContext();
@@ -19365,7 +19345,7 @@ const ThreadHeader = (props) => {
   const replyCount = threadInstance ? replyCountThreadInstance : thread ? thread.reply_count ?? 0 : 0;
   const threadDisplayName = overrideTitle ?? channelDisplayTitle ?? displayNameFromParentMessage(thread) ?? void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__thread-header", children: [
-    activeChatView === "threads" && /* @__PURE__ */ jsxRuntime.jsx(ToggleSidebarButton, { canCollapse: !!threadInstance, mode: "expand", children: /* @__PURE__ */ jsxRuntime.jsx(MenuIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__thread-header__start", children: activeChatView === "threads" && /* @__PURE__ */ jsxRuntime.jsx(ToggleSidebarButton, { canCollapse: !!threadInstance, mode: "expand", children: /* @__PURE__ */ jsxRuntime.jsx(MenuIcon, {}) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__thread-header-details", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__thread-header-title", children: t("Thread") }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -19377,7 +19357,7 @@ const ThreadHeader = (props) => {
         }
       )
     ] }),
-    !threadInstance && /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__thread-header__end", children: !threadInstance && /* @__PURE__ */ jsxRuntime.jsx(
       WithAudioPlayback.Button,
       {
         appearance: "ghost",
@@ -19390,7 +19370,7 @@ const ThreadHeader = (props) => {
         variant: "secondary",
         children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {})
       }
-    )
+    ) })
   ] });
 };
 const threadStateSelector = ({ replyCount }) => ({
@@ -19980,6 +19960,7 @@ const DefaultMessageActionComponents = {
           className: msgActionsBoxButtonClassName,
           Icon: WithAudioPlayback.IconEdit,
           onClick: () => {
+            savePreEditSnapshot(messageComposer);
             messageComposer.initState({ composition: message });
             closeMenu();
           },
@@ -20355,9 +20336,9 @@ function MessageReactionsDetail({
   handleFetchReactions,
   onSelectedReactionTypeChange,
   reactionDetailsSort: propReactionDetailsSort,
+  reactionGroups,
   reactions,
   selectedReactionType,
-  sortReactionDetails: propSortReactionDetails,
   totalReactionCount
 }) {
   const { client } = WithAudioPlayback.useChatContext();
@@ -20369,10 +20350,8 @@ function MessageReactionsDetail({
   const { t } = WithAudioPlayback.useTranslationContext();
   const {
     handleReaction: contextHandleReaction,
-    reactionDetailsSort: contextReactionDetailsSort,
-    sortReactionDetails: contextSortReactionDetails
+    reactionDetailsSort: contextReactionDetailsSort
   } = useMessageContext(MessageReactionsDetail.name);
-  const legacySortReactionDetails = propSortReactionDetails ?? contextSortReactionDetails;
   const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
   const {
     isLoading: areReactionsLoading,
@@ -20384,10 +20363,6 @@ function MessageReactionsDetail({
     shouldFetch: true,
     sort: reactionDetailsSort
   });
-  const reactionDetailsWithLegacyFallback = React.useMemo(
-    () => legacySortReactionDetails ? [...reactionDetails].sort(legacySortReactionDetails) : reactionDetails,
-    [legacySortReactionDetails, reactionDetails]
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -20432,7 +20407,7 @@ function MessageReactionsDetail({
             "data-testid": "all-reacting-users",
             children: [
               areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator2, {}),
-              !areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactionDetailsWithLegacyFallback.map(({ type, user }) => {
+              !areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactionDetails.map(({ type, user }) => {
                 const belongsToCurrentUser = client.user?.id === user?.id;
                 const EmojiComponent = Array.isArray(reactionOptions) ? void 0 : reactionOptions.quick[type]?.Component ?? reactionOptions.extended?.[type]?.Component;
                 return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -20465,8 +20440,13 @@ function MessageReactionsDetail({
                             className: "str-chat__message-reactions-detail__user-list-item-button",
                             "data-testid": "remove-reaction-button",
                             onClick: async (e) => {
+                              const reactionCountBeforeRemoval = reactionGroups?.[type]?.count ?? 0;
                               await contextHandleReaction(type, e);
-                              refetch();
+                              if (reactionCountBeforeRemoval <= 1) {
+                                onSelectedReactionTypeChange?.(null);
+                              } else {
+                                refetch();
+                              }
                             },
                             children: t("Tap to remove")
                           }
@@ -20495,17 +20475,15 @@ const useProcessReactions = (params) => {
   const {
     own_reactions: propOwnReactions,
     reaction_groups: propReactionGroups,
-    reactionOptions: propReactionOptions,
     reactions: propReactions,
     sortReactions: propSortReactions
   } = params;
   const { message, sortReactions: contextSortReactions } = useMessageContext();
-  const { reactionOptions: contextReactionOptions = defaultReactionOptions } = WithAudioPlayback.useComponentContext();
-  const reactionOptions = propReactionOptions ?? contextReactionOptions;
+  const { reactionOptions = defaultReactionOptions } = WithAudioPlayback.useComponentContext();
   const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
-  const latestReactions = propReactions || message.latest_reactions;
-  const ownReactions = propOwnReactions || message?.own_reactions;
-  const reactionGroups = propReactionGroups || message?.reaction_groups;
+  const latestReactions = propReactions ?? message.latest_reactions;
+  const ownReactions = propOwnReactions ?? message?.own_reactions;
+  const reactionGroups = propReactionGroups ?? message?.reaction_groups ?? void 0;
   const isOwnReaction = React.useCallback(
     (reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false,
     [ownReactions]
@@ -20589,6 +20567,7 @@ const useProcessReactions = (params) => {
   return {
     existingReactions,
     hasReactions,
+    reactionGroups,
     totalReactionCount,
     uniqueReactionTypeCount
   };
@@ -20605,16 +20584,22 @@ const FragmentOrButton = ({
 };
 const UnMemoizedMessageReactions = (props) => {
   const {
+    capLimit: { clustered: capLimitClustered = 5, segmented: capLimitSegmented = 4 } = {},
     flipHorizontalPosition = false,
     handleFetchReactions,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     reactionDetailsSort,
-    sortReactionDetails,
     verticalPosition = "top",
     visualStyle = "clustered",
     ...rest
   } = props;
-  const { existingReactions, hasReactions, totalReactionCount, uniqueReactionTypeCount } = useProcessReactions(rest);
+  const {
+    existingReactions,
+    hasReactions,
+    reactionGroups,
+    totalReactionCount,
+    uniqueReactionTypeCount
+  } = useProcessReactions(rest);
   const [selectedReactionType, setSelectedReactionType] = React.useState(
     null
   );
@@ -20633,16 +20618,27 @@ const UnMemoizedMessageReactions = (props) => {
     dialog.open();
   };
   const cappedExistingReactions = React.useMemo(() => {
-    if (visualStyle !== "segmented" || verticalPosition !== "top") return null;
-    const sliced = existingReactions.slice(0, 4);
+    if (visualStyle === "segmented" && verticalPosition !== "top") return null;
+    const capLimit = visualStyle === "segmented" ? capLimitSegmented : capLimitClustered;
+    const sliced = existingReactions.slice(0, capLimit);
     return {
+      /**
+       * Accumulated reaction count of capped reaction types, first four in case of
+       * segmented(top) and first five in case of clustered(top/bottom) variations.
+       */
       reactionCountToDisplay: sliced.reduce(
         (accumulatedCount, { reactionCount }) => accumulatedCount + reactionCount,
         0
       ),
       reactionsToDisplay: sliced
     };
-  }, [existingReactions, verticalPosition, visualStyle]);
+  }, [
+    capLimitClustered,
+    capLimitSegmented,
+    existingReactions,
+    verticalPosition,
+    visualStyle
+  ]);
   if (!hasReactions) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -20663,7 +20659,7 @@ const UnMemoizedMessageReactions = (props) => {
             "aria-pressed": isDialogOpen,
             buttonIf: visualStyle === "clustered",
             className: "str-chat__message-reactions__list-button",
-            onClick: () => handleReactionButtonClick(existingReactions[0]?.reactionType ?? null),
+            onClick: () => handleReactionButtonClick(null),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "str-chat__message-reactions__list", children: [
                 (cappedExistingReactions?.reactionsToDisplay ?? existingReactions).map(
@@ -20694,7 +20690,7 @@ const UnMemoizedMessageReactions = (props) => {
                     reactionType
                   )
                 ),
-                uniqueReactionTypeCount > 4 && cappedExistingReactions && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more", children: /* @__PURE__ */ jsxRuntime.jsx(
+                uniqueReactionTypeCount > 4 && cappedExistingReactions && visualStyle === "segmented" && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more", children: /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     className: "str-chat__message-reactions__list-item-button",
@@ -20727,9 +20723,9 @@ const UnMemoizedMessageReactions = (props) => {
           {
             handleFetchReactions,
             onSelectedReactionTypeChange: setSelectedReactionType,
+            reactionGroups,
             reactions: existingReactions,
             selectedReactionType,
-            sortReactionDetails,
             totalReactionCount
           }
         )
@@ -21210,7 +21206,6 @@ const Message = (props) => {
     pinPermissions,
     reactionDetailsSort,
     retrySendMessage: propRetrySendMessage,
-    sortReactionDetails,
     sortReactions
   } = props;
   const { client } = WithAudioPlayback.useChatContext("Message");
@@ -21304,7 +21299,6 @@ const Message = (props) => {
       readBy: props.readBy,
       renderText: props.renderText,
       returnAllReadData: props.returnAllReadData,
-      sortReactionDetails,
       sortReactions,
       threadList: props.threadList,
       unsafeHTML: props.unsafeHTML,
@@ -22350,7 +22344,6 @@ const InfiniteScroll = (props) => {
     children
   ] });
 };
-const MAX_AVATARS = 3;
 const UnMemoizedTypingIndicator = (props) => {
   const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;
   const { channelConfig, thread } = WithAudioPlayback.useChannelStateContext("TypingIndicator");
@@ -22367,11 +22360,16 @@ const UnMemoizedTypingIndicator = (props) => {
   const typingUsers = threadList ? typingInThread : typingInChannel;
   const { displayUsers } = useDebouncedTypingActive(typingUsers);
   const showIndicator = displayUsers.length > 0;
-  const displayInfo = displayUsers.slice(0, MAX_AVATARS).map(({ user }) => ({
-    id: user?.id,
-    imageUrl: user?.image,
-    userName: user?.name ?? ""
-  }));
+  const displayInfo = React.useMemo(
+    () => displayUsers.map(
+      ({ user }) => ({
+        id: user?.id,
+        imageUrl: user?.image,
+        userName: user?.name
+      })
+    ),
+    [displayUsers]
+  );
   React.useEffect(() => {
     if (showIndicator && isMessageListScrolledToBottom) scrollToBottom();
   }, [scrollToBottom, isMessageListScrolledToBottom, showIndicator]);
@@ -22381,7 +22379,6 @@ const UnMemoizedTypingIndicator = (props) => {
   if (!showIndicator || !isMessageListScrolledToBottom) {
     return null;
   }
-  const overflowCount = displayUsers.length > MAX_AVATARS ? displayUsers.length - MAX_AVATARS : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -22394,15 +22391,7 @@ const UnMemoizedTypingIndicator = (props) => {
       ),
       "data-testid": "typing-indicator",
       children: [
-        displayInfo.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          AvatarStack,
-          {
-            badgeSize: "md",
-            displayInfo,
-            overflowCount: overflowCount > 0 ? overflowCount : void 0,
-            size: "md"
-          }
-        ),
+        displayInfo.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(AvatarStack, { badgeSize: "md", displayInfo, size: "md" }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__typing-indicator__bubble", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__typing-indicator__dots", children: /* @__PURE__ */ jsxRuntime.jsx(TypingIndicatorDots, {}) }) })
       ]
     }
@@ -22933,7 +22922,6 @@ const MessageListWithContext = (props) => {
     returnAllReadData = false,
     reviewProcessedMessage,
     showUnreadNotificationAlways,
-    sortReactionDetails,
     sortReactions,
     suppressAutoscroll,
     threadList = false,
@@ -23051,7 +23039,6 @@ const MessageListWithContext = (props) => {
       renderText: props.renderText,
       retrySendMessage: props.retrySendMessage,
       showAvatar: props.showAvatar,
-      sortReactionDetails,
       sortReactions,
       unsafeHTML
     },
@@ -23346,7 +23333,6 @@ const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     renderText: renderText2,
     returnAllReadData,
     showAvatar,
-    sortReactionDetails,
     sortReactions,
     threadList,
     unreadMessageCount = 0,
@@ -23396,7 +23382,6 @@ const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
         renderText: renderText2,
         returnAllReadData,
         showAvatar,
-        sortReactionDetails,
         sortReactions,
         threadList
       }
@@ -23481,7 +23466,6 @@ const VirtualizedMessageListWithContext = (props) => {
     shouldGroupByUser = false,
     showAvatar,
     showUnreadNotificationAlways,
-    sortReactionDetails,
     sortReactions,
     stickToBottomScrollBehavior = "smooth",
     suppressAutoscroll,
@@ -23750,7 +23734,6 @@ const VirtualizedMessageListWithContext = (props) => {
                     returnAllReadData,
                     shouldGroupByUser,
                     showAvatar,
-                    sortReactionDetails,
                     sortReactions,
                     threadList,
                     unreadMessageCount: channelUnreadUiState?.unread_messages,
@@ -25089,7 +25072,7 @@ const LoadMorePaginator = React.memo(
   UnMemoizedLoadMorePaginator
 );
 const ChannelListHeader = ({
-  ToggleButtonIcon = WithAudioPlayback.IconLayoutAlignLeft
+  ToggleButtonIcon = WithAudioPlayback.IconSidebar
 }) => {
   const { t } = WithAudioPlayback.useTranslationContext();
   const { channel, navOpen } = WithAudioPlayback.useChatContext();
@@ -25261,11 +25244,11 @@ const UnMemoizedChannelList = (props) => {
     }
   );
   const showChannelList = !searchIsActive;
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogManagerProvider, { id: `channel-list-dialog-manager-${stableId}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     WithAudioPlayback.ChannelListContextProvider,
     {
       value: { channels, hasNextPage, loadNextPage, setChannels },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className, ref: channelListRef, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, ref: channelListRef, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogManagerProvider, { id: `channel-list-dialog-manager-${stableId}`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(ChannelListHeader, {}),
         showChannelSearch && /* @__PURE__ */ jsxRuntime.jsx(Search$12, {}),
         showChannelList && /* @__PURE__ */ jsxRuntime.jsx(
@@ -25287,9 +25270,9 @@ const UnMemoizedChannelList = (props) => {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(NotificationList$1, { panel: "channel-list" })
-      ] })
+      ] }) })
     }
-  ) });
+  );
 };
 const ChannelList = React.memo(
   UnMemoizedChannelList
@@ -26016,11 +25999,13 @@ function ChannelListItemTimestamp({ lastMessage }) {
 function getAttachmentContentType(attachment) {
   if (!attachment) return "text";
   if (attachment.type === "giphy") return "giphy";
-  if (attachment.type === "image") return "image";
+  if (attachment.type === "image") {
+    if (attachment.og_scrape_url || attachment.title_link) return "link";
+    return "image";
+  }
   if (attachment.type === "video") return "video";
   if (attachment.type === "voiceRecording") return "voice";
   if (attachment.type === "file") return "file";
-  if (attachment.og_scrape_url || attachment.title_link) return "link";
   return "file";
 }
 function getAttachmentFallbackText(type, count, t) {
@@ -26100,13 +26085,13 @@ const useLatestMessagePreview = ({
       } else {
         contentType = "file";
       }
-      let text2 = contentType === "giphy" ? "Giphy" : (
+      let text2 = contentType === "giphy" ? `GIPHY ${firstAttachment.title ?? ""}`.trim() : (
         // prioritize message text content if available
         textContent || // then fallback text of the single attachment if only one attachment is present and it's not a voice recording (fallback text is generic for voice recordings, so not useful in the preview)
         (attachments.length === 1 && contentType !== "voice" ? firstAttachment.fallback || firstAttachment.title : "") || // then generic fallback text based on attachment type and count
         getAttachmentFallbackText(contentType, attachments.length, t)
       );
-      if (contentType !== "giphy" && attachments.length === 1 && typeof firstAttachment.duration === "number") {
+      if (attachments.length === 1 && typeof firstAttachment.duration === "number") {
         const minutes = Math.floor(firstAttachment.duration / 60);
         const seconds = Math.ceil(firstAttachment.duration) % 60;
         const durationString = `${minutes}:${seconds.toString().padStart(2, "0")}`;
@@ -26147,7 +26132,7 @@ const contentTypeIconMap = {
   deleted: WithAudioPlayback.IconNoSign,
   error: WithAudioPlayback.IconExclamationCircleFill,
   file: WithAudioPlayback.IconFile,
-  giphy: WithAudioPlayback.IconFile,
+  giphy: WithAudioPlayback.IconGiphy,
   image: WithAudioPlayback.IconCamera,
   link: WithAudioPlayback.IconLink,
   location: WithAudioPlayback.IconLocation,
@@ -26249,7 +26234,6 @@ const UnMemoizedChannelListItemUI = (props) => {
             {
               displayMembers: groupChannelDisplayInfo?.members,
               imageUrl: displayImage,
-              overflowCount: groupChannelDisplayInfo?.overflowCount,
               size: "xl",
               userName: avatarName
             }
@@ -26795,7 +26779,7 @@ const ThreadListLoadingIndicator = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__thread-list-loading-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator$1, {}) });
 };
 const ThreadListHeader = ({
-  ToggleButtonIcon = WithAudioPlayback.IconLayoutAlignLeft
+  ToggleButtonIcon = WithAudioPlayback.IconSidebar
 }) => {
   const { t } = WithAudioPlayback.useTranslationContext();
   const { navOpen } = WithAudioPlayback.useChatContext();
@@ -26928,10 +26912,9 @@ const ThreadList = ({ virtuosoProps }) => {
 const IconsBySeverity = {
   error: WithAudioPlayback.IconExclamationMark,
   info: null,
-  // IconInfo,
   loading: WithAudioPlayback.IconRefresh,
   success: WithAudioPlayback.IconCheckmark,
-  warning: WithAudioPlayback.IconExclamationTriangle
+  warning: WithAudioPlayback.IconExclamationTriangleFill
 };
 const DefaultNotificationIcon = ({ notification }) => {
   if (!notification.severity) return null;
@@ -27769,7 +27752,7 @@ const Giphy = ({ attachment }) => {
   ] });
 };
 const GiphyBadge = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__giphy-badge", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(IconGiphy, {}),
+  /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconGiphy, {}),
   "Giphy"
 ] });
 const Geolocation = ({
@@ -27871,7 +27854,7 @@ const UnsupportedAttachment = ({ attachment }) => {
 const VisibilityDisclaimer = () => {
   const { t } = WithAudioPlayback.useTranslationContext();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__visibility-disclaimer", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconEyeOpen, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconEyeFill, {}),
     t("Only visible to you")
   ] });
 };
@@ -28304,7 +28287,7 @@ const ChannelHeader = (props) => {
   const {
     Avatar: Avatar2 = ChannelAvatar,
     image: overrideImage,
-    MenuIcon = WithAudioPlayback.IconLayoutAlignLeft,
+    MenuIcon = WithAudioPlayback.IconSidebar,
     title: overrideTitle
   } = props;
   const { channel } = WithAudioPlayback.useChannelStateContext();
@@ -28321,22 +28304,21 @@ const ChannelHeader = (props) => {
         "str-chat__channel-header--sidebar-collapsed": !navOpen
       }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleSidebarButton, { mode: "expand", children: /* @__PURE__ */ jsxRuntime.jsx(MenuIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__channel-header__start", children: /* @__PURE__ */ jsxRuntime.jsx(ToggleSidebarButton, { mode: "expand", children: /* @__PURE__ */ jsxRuntime.jsx(MenuIcon, {}) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__channel-header__data", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__channel-header__data__title", children: displayTitle }),
           /* @__PURE__ */ jsxRuntime.jsx(ChannelHeaderSubtitle, {})
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__channel-header__end", children: /* @__PURE__ */ jsxRuntime.jsx(
           Avatar2,
           {
             className: "str-chat__avatar--channel-header",
             displayMembers: groupChannelDisplayInfo?.members,
             imageUrl: displayImage,
-            overflowCount: groupChannelDisplayInfo?.overflowCount,
             size: "lg",
             userName: displayTitle
           }
-        )
+        ) })
       ]
     }
   );
@@ -28379,15 +28361,13 @@ exports.IconArchive = WithAudioPlayback.IconArchive;
 exports.IconArrowDown = WithAudioPlayback.IconArrowDown;
 exports.IconArrowDownCircle = WithAudioPlayback.IconArrowDownCircle;
 exports.IconArrowLeft = WithAudioPlayback.IconArrowLeft;
-exports.IconArrowRight = WithAudioPlayback.IconArrowRight;
 exports.IconArrowUp = WithAudioPlayback.IconArrowUp;
 exports.IconArrowUpRight = WithAudioPlayback.IconArrowUpRight;
 exports.IconAttachment = WithAudioPlayback.IconAttachment;
 exports.IconAudio = WithAudioPlayback.IconAudio;
 exports.IconBell = WithAudioPlayback.IconBell;
 exports.IconBellOff = WithAudioPlayback.IconBellOff;
-exports.IconBubble3ChatMessage = WithAudioPlayback.IconBubble3ChatMessage;
-exports.IconBubbleText6SolidChatMessage = WithAudioPlayback.IconBubbleText6SolidChatMessage;
+exports.IconBolt = WithAudioPlayback.IconBolt;
 exports.IconCamera = WithAudioPlayback.IconCamera;
 exports.IconCheckmark = WithAudioPlayback.IconCheckmark;
 exports.IconCheckmark1Small = WithAudioPlayback.IconCheckmark1Small;
@@ -28398,31 +28378,26 @@ exports.IconChevronRight = WithAudioPlayback.IconChevronRight;
 exports.IconClock = WithAudioPlayback.IconClock;
 exports.IconCommand = WithAudioPlayback.IconCommand;
 exports.IconCopy = WithAudioPlayback.IconCopy;
-exports.IconCrossSmall = WithAudioPlayback.IconCrossSmall;
 exports.IconDelete = WithAudioPlayback.IconDelete;
 exports.IconEdit = WithAudioPlayback.IconEdit;
 exports.IconEmoji = WithAudioPlayback.IconEmoji;
 exports.IconExclamationCircleFill = WithAudioPlayback.IconExclamationCircleFill;
 exports.IconExclamationMark = WithAudioPlayback.IconExclamationMark;
 exports.IconExclamationMarkFill = WithAudioPlayback.IconExclamationMarkFill;
-exports.IconExclamationTriangle = WithAudioPlayback.IconExclamationTriangle;
-exports.IconEyeOpen = WithAudioPlayback.IconEyeOpen;
+exports.IconExclamationTriangleFill = WithAudioPlayback.IconExclamationTriangleFill;
+exports.IconEyeFill = WithAudioPlayback.IconEyeFill;
 exports.IconFile = WithAudioPlayback.IconFile;
 exports.IconFlag = WithAudioPlayback.IconFlag;
+exports.IconGiphy = WithAudioPlayback.IconGiphy;
 exports.IconImage = WithAudioPlayback.IconImage;
-exports.IconInfo = WithAudioPlayback.IconInfo;
-exports.IconLayoutAlignLeft = WithAudioPlayback.IconLayoutAlignLeft;
 exports.IconLeave = WithAudioPlayback.IconLeave;
-exports.IconLightBulbSimple = WithAudioPlayback.IconLightBulbSimple;
 exports.IconLink = WithAudioPlayback.IconLink;
 exports.IconLoading = WithAudioPlayback.IconLoading;
 exports.IconLocation = WithAudioPlayback.IconLocation;
 exports.IconMessageBubble = WithAudioPlayback.IconMessageBubble;
 exports.IconMessageBubbleFill = WithAudioPlayback.IconMessageBubbleFill;
 exports.IconMessageBubbles = WithAudioPlayback.IconMessageBubbles;
-exports.IconMinus = WithAudioPlayback.IconMinus;
 exports.IconMinusCircle = WithAudioPlayback.IconMinusCircle;
-exports.IconMinusSmall = WithAudioPlayback.IconMinusSmall;
 exports.IconMore = WithAudioPlayback.IconMore;
 exports.IconMute = WithAudioPlayback.IconMute;
 exports.IconNoSign = WithAudioPlayback.IconNoSign;
@@ -28441,10 +28416,9 @@ exports.IconRetry = WithAudioPlayback.IconRetry;
 exports.IconSave = WithAudioPlayback.IconSave;
 exports.IconSearch = WithAudioPlayback.IconSearch;
 exports.IconSend = WithAudioPlayback.IconSend;
-exports.IconSettingsGear2 = WithAudioPlayback.IconSettingsGear2;
+exports.IconSidebar = WithAudioPlayback.IconSidebar;
 exports.IconThread = WithAudioPlayback.IconThread;
 exports.IconThreadFill = WithAudioPlayback.IconThreadFill;
-exports.IconThunder = WithAudioPlayback.IconThunder;
 exports.IconTranslate = WithAudioPlayback.IconTranslate;
 exports.IconTrophy = WithAudioPlayback.IconTrophy;
 exports.IconUnpin = WithAudioPlayback.IconUnpin;
@@ -28457,9 +28431,9 @@ exports.IconUserRemove = WithAudioPlayback.IconUserRemove;
 exports.IconVideo = WithAudioPlayback.IconVideo;
 exports.IconVideoFill = WithAudioPlayback.IconVideoFill;
 exports.IconVoice = WithAudioPlayback.IconVoice;
-exports.IconVoiceFill = WithAudioPlayback.IconVoiceFill;
 exports.IconXCircle = WithAudioPlayback.IconXCircle;
 exports.IconXmark = WithAudioPlayback.IconXmark;
+exports.IconXmarkSmall = WithAudioPlayback.IconXmarkSmall;
 exports.LoadingChannel = WithAudioPlayback.LoadingChannel;
 exports.LoadingErrorIndicator = WithAudioPlayback.LoadingErrorIndicator;
 exports.MESSAGE_ACTIONS = WithAudioPlayback.MESSAGE_ACTIONS;
@@ -28625,7 +28599,6 @@ exports.GiphyPreviewMessage = GiphyPreviewMessage;
 exports.GlobalModal = GlobalModal;
 exports.GroupAvatar = GroupAvatar;
 exports.Header = Header$1;
-exports.IconGiphy = IconGiphy;
 exports.ImageComponent = ImageComponent;
 exports.ImageContainer = ImageContainer;
 exports.ImagePlaceholder = ImagePlaceholder;