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

package/dist/cjs/index.js

@@ -4,8 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("clsx");
 const nanoid = require("nanoid");
 const React = require("react");
-const audioProcessing = require("../audioProcessing-BbOs2wMd.js");
-const WithAudioPlayback = require("../WithAudioPlayback-myzUS2m6.js");
+const audioProcessing = require("./audioProcessing.56e5db9d.js");
+const WithAudioPlayback = require("./WithAudioPlayback.236d404c.js");
 const streamChat = require("stream-chat");
 const throttle = require("lodash.throttle");
 const linkify = require("linkifyjs");
@@ -19,7 +19,6 @@ const unistUtilVisit = require("unist-util-visit");
 const i18n = require("i18next");
 const Dayjs = require("dayjs");
 const uniqBy = require("lodash.uniqby");
-const tsPattern = require("ts-pattern");
 const shim = require("use-sync-external-store/shim");
 const debounce = require("lodash.debounce");
 const fixWebmDuration = require("fix-webm-duration");
@@ -89,10 +88,11 @@ const useAIState = (channel) => {
   return { aiState };
 };
 class DialogManager {
-  constructor({ id } = {}) {
+  constructor({ closeOnClickOutside = true, id } = {}) {
     this.state = new streamChat.StateStore({
       dialogsById: {}
     });
+    this.closeOnClickOutside = closeOnClickOutside;
     this.id = id ?? nanoid.nanoid();
   }
   get openDialogCount() {
@@ -107,13 +107,14 @@ class DialogManager {
   get(id) {
     return this.state.getLatestValue().dialogsById[id];
   }
-  getOrCreate({ id }) {
+  getOrCreate({ closeOnClickOutside, id }) {
     let dialog = this.state.getLatestValue().dialogsById[id];
     if (!dialog) {
       dialog = {
         close: () => {
           this.close(id);
         },
+        closeOnClickOutside,
         id,
         isOpen: false,
         open: () => {
@@ -129,21 +130,22 @@ class DialogManager {
       };
       this.state.next((current) => ({
         ...current,
-        ...{ dialogsById: { ...current.dialogsById, [id]: dialog } }
+        dialogsById: { ...current.dialogsById, [id]: dialog }
       }));
     }
-    if (dialog.removalTimeout) {
-      clearTimeout(dialog.removalTimeout);
+    const shouldUpdateDialogSettings = dialog.closeOnClickOutside !== closeOnClickOutside || !!dialog.removalTimeout;
+    if (shouldUpdateDialogSettings) {
+      if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
+      dialog = {
+        ...dialog,
+        closeOnClickOutside,
+        removalTimeout: void 0
+      };
       this.state.next((current) => ({
         ...current,
-        ...{
-          dialogsById: {
-            ...current.dialogsById,
-            [id]: {
-              ...dialog,
-              removalTimeout: void 0
-            }
-          }
+        dialogsById: {
+          ...current.dialogsById,
+          [id]: dialog
         }
       }));
     }
@@ -220,7 +222,11 @@ class DialogManager {
     }));
   }
 }
-const useDialog = ({ dialogManagerId, id }) => {
+const useDialog = ({
+  closeOnClickOutside,
+  dialogManagerId,
+  id
+}) => {
   const { dialogManager } = useDialogManager({ dialogManagerId });
   React.useEffect(
     () => () => {
@@ -228,7 +234,7 @@ const useDialog = ({ dialogManagerId, id }) => {
     },
     [dialogManager, id]
   );
-  return dialogManager.getOrCreate({ id });
+  return dialogManager.getOrCreate({ closeOnClickOutside, id });
 };
 const useDialogOnNearestManager = ({ id }) => {
   const { dialogManager } = useNearestDialogManagerContext() ?? {};
@@ -275,9 +281,37 @@ const Portal = ({
   if (!portalDestination) return null;
   return reactDom.createPortal(children, portalDestination);
 };
+const shouldCloseOnOutsideClick = ({
+  dialog,
+  managerCloseOnClickOutside
+}) => dialog.closeOnClickOutside ?? managerCloseOnClickOutside;
 const DialogPortalDestination = () => {
   const { dialogManager } = useNearestDialogManagerContext() ?? {};
   const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });
+  const [destinationRoot, setDestinationRoot] = React.useState(null);
+  React.useEffect(() => {
+    if (!destinationRoot || !dialogManager) return;
+    const handleDocumentClick = (event) => {
+      if (destinationRoot.contains(event.target)) return;
+      setTimeout(() => {
+        Object.values(dialogManager.state.getLatestValue().dialogsById).forEach(
+          (dialog) => {
+            if (!dialog.isOpen) return;
+            if (!shouldCloseOnOutsideClick({
+              dialog,
+              managerCloseOnClickOutside: dialogManager.closeOnClickOutside
+            }))
+              return;
+            dialogManager.close(dialog.id);
+          }
+        );
+      }, 0);
+    };
+    document.addEventListener("click", handleDocumentClick, { capture: true });
+    return () => {
+      document.removeEventListener("click", handleDocumentClick, { capture: true });
+    };
+  }, [destinationRoot, dialogManager]);
   if (!openedDialogCount) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -285,7 +319,22 @@ const DialogPortalDestination = () => {
       className: "str-chat__dialog-overlay",
       "data-str-chat__portal-id": dialogManager?.id,
       "data-testid": "str-chat__dialog-overlay",
-      onClick: () => dialogManager?.closeAll(),
+      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"
       }
@@ -307,11 +356,16 @@ const DialogPortalEntry = ({
 };
 const dialogManagersRegistry = new streamChat.StateStore({});
 const getDialogManager = (id) => dialogManagersRegistry.getLatestValue()[id];
-const getOrCreateDialogManager = (id) => {
+const getOrCreateDialogManager = ({
+  closeOnClickOutside,
+  id
+}) => {
   let manager = getDialogManager(id);
   if (!manager) {
-    manager = new DialogManager({ id });
+    manager = new DialogManager({ closeOnClickOutside, id });
     dialogManagersRegistry.partialNext({ [id]: manager });
+  } else if (typeof closeOnClickOutside === "boolean") {
+    manager.closeOnClickOutside = closeOnClickOutside;
   }
   return manager;
 };
@@ -322,20 +376,21 @@ const removeDialogManager = (id) => {
 const DialogManagerProviderContext = React.createContext(void 0);
 const DialogManagerProvider = ({
   children,
+  closeOnClickOutside,
   id
 }) => {
   const [dialogManager, setDialogManager] = React.useState(() => {
     if (id) return getDialogManager(id) ?? null;
-    return new DialogManager();
+    return new DialogManager({ closeOnClickOutside });
   });
   React.useEffect(() => {
     if (!id) return;
-    setDialogManager(getOrCreateDialogManager(id));
+    setDialogManager(getOrCreateDialogManager({ closeOnClickOutside, id }));
     return () => {
       removeDialogManager(id);
       setDialogManager(null);
     };
-  }, [id]);
+  }, [closeOnClickOutside, id]);
   if (!dialogManager) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(DialogManagerProviderContext.Provider, { value: { dialogManager }, children: [
     children,
@@ -679,39 +734,37 @@ const IconGiphy = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
     className: clsx("str-chat__icon--giphy", className),
     viewBox: "0 0 16 16",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_4197_15218)", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            clipRule: "evenodd",
-            d: "M3.33674 1.82861H12.6639V14.171H3.33594L3.33674 1.82861Z",
-            fill: "black",
-            fillRule: "evenodd"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1.47217 1.37109H3.33697V14.6287H1.47217V1.37109Z", fill: "#04FF8E" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.6631 5.02881H14.5279V14.6288H12.6631V5.02881Z", fill: "#8E2EFF" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1.47217 14.1714H14.5282V16.0002H1.47217V14.1714Z", fill: "#00C5FF" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1.47217 0H8.93297V1.8288H1.47217V0Z", fill: "#FFF152" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M12.663 3.6568V1.8288H10.7974V0H8.93262V5.4856H14.5278V3.6568",
-            fill: "#FF5B5B"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.6631 7.31464V5.48584H14.5279", fill: "#551C99" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            clipRule: "evenodd",
-            d: "M8.93298 0V1.8288H7.06738",
-            fill: "#999131",
-            fillRule: "evenodd"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_4197_15218", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "16", width: "16" }) }) })
+      /* @__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"
+        }
+      )
     ]
   }
 );
@@ -725,7 +778,7 @@ const PlayButton = ({ className, isPlaying, ...props }) => /* @__PURE__ */ jsxRu
     size: "sm",
     variant: "secondary",
     ...props,
-    children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPause, {}) : /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlaySolid, {})
+    children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPauseFill, {}) : /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlayFill, {})
   }
 );
 const Anonymous$b = "Anonym";
@@ -8464,7 +8517,7 @@ const LoadingChannels = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className
   /* @__PURE__ */ jsxRuntime.jsx(LoadingItems, {}),
   /* @__PURE__ */ jsxRuntime.jsx(LoadingItems, {})
 ] });
-const LoadingIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconLoadingCircle, { ...props, className: "str-chat__loading-indicator" });
+const LoadingIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconLoading, { ...props, className: "str-chat__loading-indicator" });
 const UnMemoizedCustomNotification = (props) => {
   const { active, children, className, type } = props;
   if (!active) return null;
@@ -9054,6 +9107,7 @@ function useDialogAnchor({
     setPopperElement(null);
   }
   return {
+    placement: stabilisedChosenPlacement ?? chosenPlacement,
     setPopperElement,
     styles: {
       left: x ?? 0,
@@ -9066,6 +9120,8 @@ const DialogAnchor = ({
   allowFlip = true,
   children,
   className,
+  closeOnClickOutside,
+  closeTransitionMs = 0,
   dialogManagerId,
   focus: focus$1 = true,
   id,
@@ -9078,12 +9134,44 @@ const DialogAnchor = ({
   updatePositionOnContentResize,
   ...restDivProps
 }) => {
-  const dialog = useDialog({ dialogManagerId, id });
+  const dialog = useDialog({ closeOnClickOutside, dialogManagerId, id });
   const open = useDialogIsOpen(id, dialogManagerId);
-  const { setPopperElement, styles } = useDialogAnchor({
+  const [shouldRender, setShouldRender] = React.useState(open);
+  const closeTimeoutRef = React.useRef(null);
+  const isClosing = !open && shouldRender;
+  React.useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+      return;
+    }
+    if (!shouldRender) return;
+    if (!closeTransitionMs) {
+      setShouldRender(false);
+      return;
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      setShouldRender(false);
+      closeTimeoutRef.current = null;
+    }, closeTransitionMs);
+  }, [closeTransitionMs, open, shouldRender]);
+  React.useEffect(
+    () => () => {
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    },
+    []
+  );
+  const {
+    placement: chosenPlacement,
+    setPopperElement,
+    styles
+  } = useDialogAnchor({
     allowFlip,
     offset,
-    open,
+    open: shouldRender,
     placement,
     referenceElement,
     updateKey,
@@ -9100,7 +9188,7 @@ const DialogAnchor = ({
       document.removeEventListener("keyup", hideOnEscape);
     };
   }, [dialog, open]);
-  if (!open) {
+  if (!shouldRender) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPortalEntry, { dialogId: id, dialogManagerId, children: /* @__PURE__ */ jsxRuntime.jsx(focus.FocusScope, { autoFocus: focus$1, contain: trapFocus, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9108,6 +9196,8 @@ const DialogAnchor = ({
     {
       ...restDivProps,
       className: clsx("str-chat__dialog-contents", className),
+      "data-str-chat-dialog-state": isClosing ? "closing" : "open",
+      "data-str-chat-placement": chosenPlacement,
       "data-testid": "str-chat__dialog-contents",
       ref: setPopperElement,
       style: styles,
@@ -9139,7 +9229,7 @@ const DefaultCalloutDialog = ({ children, className, onClose }) => /* @__PURE__
       onClick: onClose,
       size: "sm",
       variant: "secondary",
-      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossMedium, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {})
     }
   )
 ] });
@@ -9209,7 +9299,7 @@ const Avatar = ({
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           !!sizeAwareInitials.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__avatar-initials", "data-testid": "avatar-fallback", children: sizeAwareInitials }),
-          !sizeAwareInitials.length && /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPeople, {})
+          !sizeAwareInitials.length && /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconUser, {})
         ] })
       ]
     }
@@ -9238,7 +9328,7 @@ const ErrorBadge = ({
   className,
   size = "sm",
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...rest, className, size, variant: "error", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamation, {}) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...rest, className, size, variant: "error", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMarkFill, {}) });
 function AvatarStack({
   badgeSize,
   component: Component = "div",
@@ -9450,16 +9540,152 @@ const EmojiContextMenuButton = ({
     ]
   }
 );
-const ContextMenuButton = ({
-  onBlur,
-  onFocus,
-  ...props
+const ContextMenuButtonWithSubmenu = ({
+  children,
+  className,
+  Submenu,
+  submenuContainerProps,
+  submenuPlacement = "right-start",
+  submenuRollAxis = "x",
+  ...buttonProps
 }) => {
+  const { className: submenuClassName, ...submenuContainerRestProps } = submenuContainerProps ?? {};
+  const buttonRef = React.useRef(null);
+  const [dialogContainer, setDialogContainer] = React.useState(null);
+  const keepSubmenuOpenFlag = React.useRef(false);
+  const dialogCloseTimeout = React.useRef(null);
+  const dialogId2 = React.useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+  const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+  const {
+    placement: chosenPlacement,
+    setPopperElement,
+    styles
+  } = useDialogAnchor({
+    open: dialogIsOpen,
+    placement: submenuPlacement,
+    referenceElement: buttonRef.current
+  });
+  const closeDialogLazily = React.useCallback(() => {
+    if (dialogCloseTimeout.current) clearTimeout(dialogCloseTimeout.current);
+    dialogCloseTimeout.current = setTimeout(() => {
+      if (keepSubmenuOpenFlag.current) return;
+      dialog.close();
+    }, 100);
+  }, [dialog]);
+  const keepSubmenuOpen = React.useCallback(() => {
+    keepSubmenuOpenFlag.current = true;
+  }, []);
+  const allowToCloseSubmenu = React.useCallback(() => {
+    keepSubmenuOpenFlag.current = false;
+  }, []);
+  const closeSubmenu = React.useCallback(() => {
+    allowToCloseSubmenu();
+    closeDialogLazily();
+  }, [allowToCloseSubmenu, closeDialogLazily]);
+  const handleClose = React.useCallback(
+    (event) => {
+      const parentButton = buttonRef.current;
+      if (!dialogIsOpen || !parentButton) return;
+      event.stopPropagation();
+      closeDialogLazily();
+      parentButton.focus();
+    },
+    [closeDialogLazily, dialogIsOpen, buttonRef]
+  );
+  const handleFocusParentButton = () => {
+    if (dialogIsOpen) return;
+    dialog.open();
+    keepSubmenuOpen();
+  };
+  React.useEffect(() => {
+    const parentButton = buttonRef.current;
+    if (!dialogIsOpen || !parentButton) return;
+    const hideOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      handleClose(event);
+      closeSubmenu();
+    };
+    document.addEventListener("keyup", hideOnEscape, { capture: true });
+    return () => {
+      document.removeEventListener("keyup", hideOnEscape, { capture: true });
+    };
+  }, [dialogIsOpen, handleClose, closeSubmenu]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BaseContextMenuButton,
+      {
+        "aria-selected": "false",
+        className: clsx(className, "str_chat__button-with-submenu", {
+          "str_chat__button-with-submenu--submenu-open": dialogIsOpen
+        }),
+        hasSubMenu: true,
+        onBlur: closeSubmenu,
+        onClick: (event) => {
+          event.stopPropagation();
+          dialog.toggle();
+        },
+        onFocus: handleFocusParentButton,
+        onMouseEnter: handleFocusParentButton,
+        onMouseLeave: closeSubmenu,
+        role: "option",
+        ...buttonProps,
+        ref: buttonRef,
+        children
+      }
+    ),
+    dialogIsOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx("str-chat__context-menu__submenu-container", submenuClassName),
+        "data-str-chat-placement": chosenPlacement,
+        "data-str-chat-roll-axis": submenuRollAxis,
+        onBlur: (event) => {
+          const isBlurredDescendant = event.relatedTarget instanceof Node && dialogContainer?.contains(event.relatedTarget);
+          if (isBlurredDescendant) return;
+          closeSubmenu();
+        },
+        onFocus: keepSubmenuOpen,
+        onMouseEnter: keepSubmenuOpen,
+        onMouseLeave: closeSubmenu,
+        ref: (element) => {
+          setPopperElement(element);
+          setDialogContainer(element);
+        },
+        style: styles,
+        tabIndex: -1,
+        ...submenuContainerRestProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Submenu, {})
+      }
+    )
+  ] });
+};
+const ContextMenuButton = (props) => {
+  const {
+    Submenu,
+    submenuContainerProps,
+    submenuPlacement,
+    submenuRollAxis,
+    ...buttonProps
+  } = props;
   const [isFocused, setIsFocused] = React.useState(false);
+  if (Submenu) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ContextMenuButtonWithSubmenu,
+      {
+        ...buttonProps,
+        Submenu,
+        submenuContainerProps,
+        submenuPlacement,
+        submenuRollAxis
+      }
+    );
+  }
+  const { onBlur, onFocus, ...baseButtonProps } = buttonProps;
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseContextMenuButton,
     {
-      ...props,
+      ...baseButtonProps,
       "aria-selected": isFocused ? "true" : "false",
       onBlur: (e) => {
         setIsFocused(false);
@@ -9508,12 +9734,14 @@ function ContextMenuContent({
   backLabel = "Back",
   children,
   className,
+  enableAnimations = true,
   Header: Header2,
   items,
   ItemsWrapper,
   menuClassName,
   onClose,
   onMenuLevelChange,
+  transitionDirection,
   ...props
 }) {
   const rootLevel = React.useMemo(
@@ -9526,6 +9754,7 @@ function ContextMenuContent({
     [Header2, items, ItemsWrapper, menuClassName]
   );
   const [menuStack, setMenuStack] = React.useState(() => [rootLevel]);
+  const [menuBodyAnimationKey, setMenuBodyAnimationKey] = React.useState(0);
   const activeMenu = menuStack[menuStack.length - 1];
   const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? React.Fragment;
   const closeMenu = React.useCallback(() => {
@@ -9549,10 +9778,9 @@ function ContextMenuContent({
     [ItemsWrapper]
   );
   const returnToParentMenu = React.useCallback(() => {
-    setMenuStack(
-      (current) => current.length > 1 ? current.slice(0, current.length - 1) : current
-    );
-  }, []);
+    if (menuStack.length <= 1) return;
+    setMenuStack((current) => current.slice(0, current.length - 1));
+  }, [menuStack.length]);
   React.useEffect(() => {
     setMenuStack((current) => {
       if (current.length === 1 && current[0] === rootLevel) return current;
@@ -9562,42 +9790,116 @@ function ContextMenuContent({
   React.useEffect(() => {
     onMenuLevelChange?.(menuStack.length);
   }, [menuStack.length, onMenuLevelChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuRoot, { className: clsx(className, activeMenu.menuClassName), ...props, children: [
-    activeMenu.Header ? /* @__PURE__ */ jsxRuntime.jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChevronLeft, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: backLabel })
-    ] }) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuBody, { children: activeMenu.Submenu ? /* @__PURE__ */ jsxRuntime.jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsxRuntime.jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsxRuntime.jsx(Item2, {}, `context-menu-item-${index}`)) }) })
-  ] }) });
+  React.useEffect(() => {
+    if (!transitionDirection) return;
+    setMenuBodyAnimationKey((value) => value + 1);
+  }, [transitionDirection, menuStack.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuContext.Provider, { value: { closeMenu, openSubmenu, returnToParentMenu }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    ContextMenuRoot,
+    {
+      className: clsx(className, activeMenu.menuClassName),
+      "data-str-chat-enable-animations": enableAnimations,
+      ...props,
+      children: [
+        activeMenu.Header ? /* @__PURE__ */ jsxRuntime.jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuBackButton, { onClick: returnToParentMenu, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChevronLeft, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: backLabel })
+        ] }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContextMenuBody,
+          {
+            className: clsx({
+              "str-chat__context-menu__body--submenu-backward": transitionDirection === "backward",
+              "str-chat__context-menu__body--submenu-forward": transitionDirection === "forward"
+            }),
+            children: activeMenu.Submenu ? /* @__PURE__ */ jsxRuntime.jsx(activeMenu.Submenu, {}) : /* @__PURE__ */ jsxRuntime.jsx(ActiveMenuItemsWrapper, { children: typeof children !== "undefined" ? children : activeMenu.items?.map((Item2, index) => /* @__PURE__ */ jsxRuntime.jsx(Item2, {}, `context-menu-item-${index}`)) })
+          },
+          `context-menu-body-${menuStack.length}-${menuBodyAnimationKey}`
+        )
+      ]
+    }
+  ) });
 }
 const ContextMenu = (props) => {
+  const { ContextMenuContent: ContextMenuContentComponent = ContextMenuContent } = WithAudioPlayback.useComponentContext();
   const {
     allowFlip,
+    closeOnClickOutside,
+    closeTransitionMs = 130,
     dialogManagerId,
     focus: focus2,
     id,
     placement,
     referenceElement,
+    submenuTransitionDurationMs,
     tabIndex,
     trapFocus,
     ...menuProps
   } = props;
+  const resolvedSubmenuTransitionDurationMs = submenuTransitionDurationMs ?? 460;
   const isAnchored = id != null;
   const [menuLevel, setMenuLevel] = React.useState(1);
+  const [transitionDirection, setTransitionDirection] = React.useState(void 0);
+  const [contentResetToken, setContentResetToken] = React.useState(0);
+  const transitionTimeoutRef = React.useRef(null);
+  const previousMenuLevelRef = React.useRef(1);
   const open = useDialogIsOpen(id ?? "", dialogManagerId);
+  const previousOpenRef = React.useRef(open);
   React.useEffect(() => {
-    if (isAnchored && !open) setMenuLevel(1);
+    if (!isAnchored) return;
+    if (previousOpenRef.current && !open) {
+      setMenuLevel(1);
+      setTransitionDirection(void 0);
+      setContentResetToken((value) => value + 1);
+      previousMenuLevelRef.current = 1;
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+        transitionTimeoutRef.current = null;
+      }
+    }
+    previousOpenRef.current = open;
   }, [isAnchored, open]);
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
-    ContextMenuContent,
+  React.useEffect(
+    () => () => {
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
+    },
+    []
+  );
+  const handleMenuLevelChange = React.useCallback(
+    (level) => {
+      if (isAnchored) {
+        const previousLevel = previousMenuLevelRef.current;
+        if (level !== previousLevel) {
+          setTransitionDirection(level > previousLevel ? "forward" : "backward");
+          if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
+          transitionTimeoutRef.current = setTimeout(() => {
+            setTransitionDirection(void 0);
+            transitionTimeoutRef.current = null;
+          }, resolvedSubmenuTransitionDurationMs);
+        }
+        previousMenuLevelRef.current = level;
+        setMenuLevel(level);
+        return;
+      }
+      menuProps.onMenuLevelChange?.(level);
+    },
+    [isAnchored, menuProps, resolvedSubmenuTransitionDurationMs]
+  );
+  const content = /* @__PURE__ */ React.createElement(
+    ContextMenuContentComponent,
     {
       ...menuProps,
-      onMenuLevelChange: isAnchored ? setMenuLevel : menuProps.onMenuLevelChange
+      key: `context-menu-content-${contentResetToken}`,
+      onMenuLevelChange: handleMenuLevelChange,
+      transitionDirection
     }
   );
   if (isAnchored) {
     const {
       backLabel: _b,
+      enableAnimations: _ea,
       Header: _h,
       items: _i,
       ItemsWrapper: _w,
@@ -9610,6 +9912,8 @@ const ContextMenu = (props) => {
       DialogAnchor,
       {
         allowFlip,
+        closeOnClickOutside,
+        closeTransitionMs,
         dialogManagerId,
         focus: focus2,
         id,
@@ -9640,7 +9944,7 @@ const PromptHeader = ({ className, close, description, title }) => /* @__PURE__
       onClick: close,
       size: "sm",
       variant: "secondary",
-      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossMedium, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {})
     }
   )
 ] });
@@ -9709,7 +10013,7 @@ const ViewerHeader = ({
       onClick: close,
       size: "sm",
       variant: "secondary",
-      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossMedium, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {})
     }
   )
 ] });
@@ -9846,7 +10150,7 @@ function MessageBouncePrompt({ children }) {
           Alert.Header,
           {
             className: "str-chat__message-bounce-alert-header",
-            Icon: WithAudioPlayback.IconExclamationCircle,
+            Icon: WithAudioPlayback.IconExclamationMark,
             title: !children ? t("This message did not meet our content guidelines") : void 0,
             children
           }
@@ -9897,7 +10201,7 @@ const MessageBubble = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.js
 const MessageDeletedBubble = () => {
   const { t } = WithAudioPlayback.useTranslationContext();
   return /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { "data-testid": "message-deleted-bubble", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-text", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCircleBanSign, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconNoSign, {}),
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("Message deleted") })
   ] }) });
 };
@@ -9947,7 +10251,9 @@ const useBaseMessageActionSetFilter = (messageActionSet, disable = false) => {
     if (isBounced || isInitialMessage || // not sure whether this thing even works anymore
     !message.type || message.type === "system" || message.type === "ephemeral" || message.status === "sending")
       return [];
-    return messageActionSet.filter(({ type }) => {
+    return messageActionSet.filter((action) => {
+      if (action.placement === "quick-dropdown-toggle") return true;
+      const type = action.type;
       if (WithAudioPlayback.ACTIONS_NOT_WORKING_IN_THREAD.includes(type) && isMessageThreadReply)
         return false;
       if (message.error) {
@@ -10038,7 +10344,7 @@ const MessageAlsoSentInChannelIndicator = () => {
   };
   if (!message?.show_in_channel) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-also-sent-in-channel", role: "status", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconArrowRightUp, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconArrowUpRight, {}),
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: threadList ? t("Also sent in channel") : t("Replied to a thread") }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: " · " }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -10252,7 +10558,7 @@ const UnMemoizedMessageStatus = (props) => {
               children: t("Delivered")
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDoubleCheckmark1Small, { className: "str-chat__message-status-delivered" })
+          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChecks, { className: "str-chat__message-status-delivered" })
         ] })),
         read && (MessageReadStatus ? /* @__PURE__ */ jsxRuntime.jsx(MessageReadStatus, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -10264,7 +10570,7 @@ const UnMemoizedMessageStatus = (props) => {
               children: WithAudioPlayback.getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDoubleCheckmark1Small, { className: "str-chat__message-status-read" }),
+          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChecks, { className: "str-chat__message-status-read" }),
           readersWithoutOwnUser.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
@@ -11756,7 +12062,7 @@ const ImagePlaceholder = ({ className }) => {
       className: clsx("str-chat__image-placeholder", className),
       "data-testid": "str-chat__base-image-placeholder",
       role: "img",
-      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconImages1Alt, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconImage, {})
     }
   );
 };
@@ -11855,6 +12161,7 @@ const toBaseImageDescriptors = (attachment, options = {}) => {
       title: attachment.title
     };
   }
+  return void 0;
 };
 const BASE_FILE_ICON_CLASSNAME = "str-chat__file-icon";
 const FILE_ICON_GRAPHIC_CLASSNAME = "str-chat__file-icon__graphic";
@@ -12817,16 +13124,16 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
   };
   if (!groupedAttachments.total) return result;
   if (groupedAttachments.polls.length > 0)
-    return { ...result, Icon: WithAudioPlayback.IconChart5, previewType: "poll" };
+    return { ...result, Icon: WithAudioPlayback.IconPoll, previewType: "poll" };
   if (groupedAttachments.locations.length > 0)
-    return { ...result, Icon: WithAudioPlayback.IconMapPin, previewType: "location" };
+    return { ...result, Icon: WithAudioPlayback.IconLocation, previewType: "location" };
   if (groupedAttachments.giphies.length > 0 && groupedAttachments.giphies.length === groupedAttachments.total) {
     const giphyAttachment = groupedAttachments.giphies[0];
     const giphyVersion = giphyAttachment.giphy?.[giphyVersionName];
     const src = giphyVersion?.url || giphyAttachment.thumb_url || giphyAttachment.image_url || "";
     return {
       ...result,
-      Icon: WithAudioPlayback.IconFileBend,
+      Icon: WithAudioPlayback.IconFile,
       PreviewImage: /* @__PURE__ */ jsxRuntime.jsx(
         BaseImage,
         {
@@ -12843,7 +13150,7 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
     const fileAttachment = groupedAttachments.documents[0];
     return {
       ...result,
-      Icon: WithAudioPlayback.IconFileBend,
+      Icon: WithAudioPlayback.IconFile,
       PreviewImage: /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { fileName: fileAttachment.title, mimeType: fileAttachment.mime_type }),
       previewType: "file"
     };
@@ -12852,7 +13159,7 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
     const linkAttachment = groupedAttachments.links[0];
     return {
       ...result,
-      Icon: WithAudioPlayback.IconChainLink,
+      Icon: WithAudioPlayback.IconLink,
       PreviewImage: /* @__PURE__ */ jsxRuntime.jsx(
         BaseImage,
         {
@@ -12880,7 +13187,7 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
             title: videoAttachment.title
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__attachment-preview__thumbnail__play-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlaySolid, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__attachment-preview__thumbnail__play-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlayFill, {}) })
       ] }),
       previewType: "video"
     };
@@ -12889,7 +13196,7 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
     const imageAttachment = groupedAttachments.images[0];
     return {
       ...result,
-      Icon: WithAudioPlayback.IconVideoSolid,
+      Icon: WithAudioPlayback.IconVideoFill,
       PreviewImage: /* @__PURE__ */ jsxRuntime.jsx(
         BaseImage,
         {
@@ -12903,8 +13210,8 @@ const getAttachmentIconWithType = (quotedMessage, giphyVersionName) => {
     };
   }
   if (groupedAttachments.voiceRecordings.length === groupedAttachments.total)
-    return { ...result, Icon: WithAudioPlayback.IconMicrophone, previewType: "voice" };
-  return { ...result, Icon: WithAudioPlayback.IconFileBend, previewType: "mixed" };
+    return { ...result, Icon: WithAudioPlayback.IconVoice, previewType: "voice" };
+  return { ...result, Icon: WithAudioPlayback.IconFile, previewType: "mixed" };
 };
 const QuotedMessagePreview = ({
   getQuotedMessageAuthor,
@@ -13055,7 +13362,7 @@ const reminderStateSelector = (state) => ({
 function SavedForLaterContent() {
   const { t } = WithAudioPlayback.useTranslationContext();
   return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "str-chat__message-saved-for-later", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconBookmark, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconSave, {}),
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("Saved for later") })
   ] });
 }
@@ -13099,7 +13406,7 @@ function RemindMeContent({ reminder }) {
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "str-chat__message-reminder", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconBellNotification, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconBell, {}),
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("Reminder set") }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { children: " · " }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__message-reminder__time-left", children: renderTime() })
@@ -13812,10 +14119,10 @@ const TextInput = React.forwardRef(function TextInput2({
   const displayMessage = displayError || displaySuccess || displayNeutralMessage;
   const messageId = displayMessage ? `${id}-message` : void 0;
   const messageContent = displayError ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: errorMessageIcon ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationCircle, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: errorMessageIcon ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMark, {}) }),
     errorMessage ?? message
   ] }) : displaySuccess ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: successMessageIcon ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCheckmark2, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__form-text-input__message-icon", children: successMessageIcon ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCheckmark, {}) }),
     successMessage
   ] }) : displayNeutralMessage ? message : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -14692,7 +14999,8 @@ const PollOptionWithVotes = ({
     "div",
     {
       className: clsx("str-chat__poll-option", {
-        "str-chat__poll-option--has-more-votes": isVotesPreview && voteCount > countVotesPreview
+        "str-chat__poll-option--has-more-votes": isVotesPreview && voteCount > countVotesPreview,
+        "str-chat__poll-option--has-votes": voteCount
       }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(PollOptionWithVotesHeader, { option, optionOrderNumber: orderNumber }),
@@ -15258,7 +15566,7 @@ const OptionFieldSet = () => {
                 className: "str-chat__form__input-field__value",
                 error: !!error,
                 id: option.id,
-                leading: draggable ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDotGrid2x3, { className: "str-chat__drag-handle" }) : void 0,
+                leading: draggable ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconReorder, { className: "str-chat__drag-handle" }) : void 0,
                 message: error ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "poll-option-input-field-error", children: knownValidationErrors[error] ?? t("Error") }) : void 0,
                 onBlur: () => {
                   pollComposer.handleFieldBlur("options");
@@ -15297,7 +15605,7 @@ const RemoveOptionButton = ({ className, ...props }) => /* @__PURE__ */ jsxRunti
     size: "sm",
     variant: "secondary",
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCircleMinus, {})
+    children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMinusCircle, {})
   }
 );
 const PollCreationDialogControls = ({
@@ -15333,7 +15641,7 @@ const PollCreationDialogControls = ({
         },
         type: "submit",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPaperPlane, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconSend, {}),
           t("Send poll")
         ]
       }
@@ -15415,12 +15723,12 @@ const AttachmentSelectorContextProvider = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(AttachmentSelectorContext.Provider, { value, children });
 const useAttachmentSelectorContext = () => React.useContext(AttachmentSelectorContext);
 const icons = {
-  ban: WithAudioPlayback.IconPeopleRemove,
-  flag: WithAudioPlayback.IconFlag2,
+  ban: WithAudioPlayback.IconUserRemove,
+  flag: WithAudioPlayback.IconFlag,
   giphy: IconGiphy,
   mute: WithAudioPlayback.IconMute,
-  unban: WithAudioPlayback.IconPeopleAdd,
-  unmute: WithAudioPlayback.IconVolumeFull
+  unban: WithAudioPlayback.IconUserAdd,
+  unmute: WithAudioPlayback.IconAudio
 };
 const CommandsMenuClassName = "str-chat__context-menu--commands";
 const CommandsSubmenuHeader = () => {
@@ -15512,7 +15820,7 @@ const AttachmentSelectorMenuInitButtonIcon = ({ className }) => {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentSelectorInitiationButtonContents, {}) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    WithAudioPlayback.IconPlusLarge,
+    WithAudioPlayback.IconPlus,
     {
       className: clsx("str-chat__attachment-selector__menu-button__icon", className)
     }
@@ -15575,7 +15883,7 @@ const DefaultAttachmentSelectorComponents = {
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button",
         hasSubMenu: hasSubmenu,
-        Icon: WithAudioPlayback.IconRunShortcut,
+        Icon: WithAudioPlayback.IconCommand,
         onClick: () => {
           if (!hasSubmenu) return;
           openSubmenu({
@@ -15596,7 +15904,7 @@ const DefaultAttachmentSelectorComponents = {
       ContextMenuButton,
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__upload-file-button",
-        Icon: WithAudioPlayback.IconPaperclip,
+        Icon: WithAudioPlayback.IconAttachment,
         onClick: () => {
           fileInput?.click();
           closeMenu();
@@ -15612,7 +15920,7 @@ const DefaultAttachmentSelectorComponents = {
       ContextMenuButton,
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__add-location-button",
-        Icon: WithAudioPlayback.IconMapPin,
+        Icon: WithAudioPlayback.IconLocation,
         onClick: () => {
           openModalForAction("addLocation");
           closeMenu();
@@ -15628,7 +15936,7 @@ const DefaultAttachmentSelectorComponents = {
       ContextMenuButton,
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button",
-        Icon: WithAudioPlayback.IconChart5,
+        Icon: WithAudioPlayback.IconPoll,
         onClick: () => {
           openModalForAction("createPoll");
           closeMenu();
@@ -15705,7 +16013,7 @@ const AttachmentSelector = ({
   getModalPortalDestination
 }) => {
   const { t } = WithAudioPlayback.useTranslationContext();
-  const { Modal = GlobalModal } = WithAudioPlayback.useComponentContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu, Modal = GlobalModal } = WithAudioPlayback.useComponentContext();
   const { channelCapabilities } = WithAudioPlayback.useChannelStateContext();
   const messageComposer = WithAudioPlayback.useMessageComposerController();
   const isCooldownActive = WithAudioPlayback.useIsCooldownActive();
@@ -15765,7 +16073,7 @@ const AttachmentSelector = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      ContextMenu,
+      ContextMenuComponent,
       {
         allowFlip: true,
         backLabel: t("Back"),
@@ -15961,7 +16269,7 @@ const FileAttachmentPreview = ({
             uploadState === "uploading" && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicatorIcon, {}),
             !hasError && /* @__PURE__ */ jsxRuntime.jsx(FileSizeIndicator, { fileSize: attachment.file_size }),
             hasFatalError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__attachment-preview-file__fatal-error", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationCircle, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMark, {}),
               /* @__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: [
@@ -16517,7 +16825,7 @@ const AudioAttachmentPreview = ({
                 }
               )
             ] }) : hasFatalError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__attachment-preview-file__fatal-error", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationCircle, {}),
+              /* @__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, {}),
@@ -16616,10 +16924,10 @@ const MediaAttachmentPreview = ({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("str-chat__attachment-preview-media__overlay"), children: [
             isUploading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator2, {}),
             streamChat.isVideoAttachment(attachment) && !hasUploadError && uploadState !== "uploading" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__attachment-preview-media__video-indicator", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconVideoSolid, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconVideoFill, {}),
               attachment.duration && /* @__PURE__ */ jsxRuntime.jsx("div", { children: attachment.duration })
             ] }),
-            hasFatalError && /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationCircle, {}),
+            hasFatalError && /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconExclamationMark, {}),
             hasRetriableError && /* @__PURE__ */ jsxRuntime.jsx(
               WithAudioPlayback.Button,
               {
@@ -16631,7 +16939,7 @@ const MediaAttachmentPreview = ({
                 onClick: retry,
                 size: "sm",
                 variant: "danger",
-                children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconArrowRotateClockwise, {})
+                children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconRetry, {})
               }
             )
           ] })
@@ -16702,7 +17010,7 @@ const GalleryHeader = ({ currentItem }) => {
           className: "str-chat__gallery__action-button str-chat__gallery__action-button--close",
           onClick: modalContext.close,
           title: t("Close"),
-          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossMedium, {})
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {})
         }
       ) : null
     ] })
@@ -16749,9 +17057,9 @@ const VideoThumbnail = ({
         onClick: onPlay,
         size: "lg",
         variant: "secondary",
-        children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlaySolid, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlayFill, {})
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-attachment__video-thumbnail__play-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlaySolid, {}) })
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-attachment__video-thumbnail__play-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlayFill, {}) })
   ] });
 };
 const SWIPE_THRESHOLD = 50;
@@ -17175,7 +17483,7 @@ const CommandChip = ({ command }) => {
           textComposer.setCommand(null);
           textareaRef.current?.focus();
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossMedium, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {})
       }
     )
   ] });
@@ -17240,7 +17548,7 @@ const LinkPreviewCard = ({ linkPreview }) => {
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__link-preview-card__content-title", children: linkPreview.title }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__link-preview-card__content-description", children: linkPreview.text }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__link-preview-card__content__url", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChainLink, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconLink, {}),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: linkPreview.og_scrape_url })
           ] })
         ] }),
@@ -17318,7 +17626,7 @@ const AudioRecordingPlayback = ({
             onClick: audioPlayer.togglePlay,
             size: "sm",
             variant: "secondary",
-            children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPause, {}) : /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlaySolid, {})
+            children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPauseFill, {}) : /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlayFill, {})
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -17436,7 +17744,7 @@ const AudioRecordingPreview = () => {
     };
   }, [recorder, startCounter, stopCounter]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__audio-recorder__recording-preview", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMicrophone, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconVoice, {}),
     /* @__PURE__ */ jsxRuntime.jsx(RecordingTimer, { durationSeconds: secondsElapsed }),
     /* @__PURE__ */ jsxRuntime.jsx(AudioRecordingWaveform, {})
   ] });
@@ -17456,7 +17764,7 @@ const ToggleRecordingButton = () => {
       onClick: () => isRecording(recordingState) ? recorder?.pause() : recorder?.resume(),
       size: "sm",
       variant: "secondary",
-      children: isRecording(recordingState) ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPause, {}) : /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMicrophone, {})
+      children: isRecording(recordingState) ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPauseFill, {}) : /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconVoice, {})
     }
   );
 };
@@ -17491,7 +17799,7 @@ const AudioRecorderRecordingControls = () => {
         },
         size: "sm",
         variant: "secondary",
-        children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconTrashBin, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDelete, {})
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(ToggleRecordingButton, {}),
@@ -17588,7 +17896,7 @@ const DefaultStartRecordingAudioButton = React.forwardRef(function StartRecordin
       variant: "secondary",
       ...props,
       ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMicrophone, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconVoice, {})
     }
   );
 });
@@ -17629,7 +17937,7 @@ const SendToChannelCheckbox = () => {
                 type: "checkbox"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__send-to-channel-checkbox__visual", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__send-to-channel-checkbox__checkmark", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCheckmark2, {}) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "str-chat__send-to-channel-checkbox__visual", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__send-to-channel-checkbox__checkmark", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCheckmark, {}) }) }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__send-to-channel-checkbox__label", children: labelText })
           ]
         }
@@ -17795,7 +18103,10 @@ const SuggestionList = ({
   setFocusedItemIndex,
   suggestionItemComponents = defaultComponents
 }) => {
-  const { AutocompleteSuggestionItem = SuggestionListItem } = WithAudioPlayback.useComponentContext();
+  const {
+    AutocompleteSuggestionItem = SuggestionListItem,
+    ContextMenu: ContextMenuComponent = ContextMenu
+  } = WithAudioPlayback.useComponentContext();
   const { textareaRef } = WithAudioPlayback.useMessageComposerContext();
   const messageComposer = WithAudioPlayback.useMessageComposerController();
   const { textComposer } = messageComposer;
@@ -17913,7 +18224,7 @@ const SuggestionList = ({
         zIndex: 1e3
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        ContextMenu,
+        ContextMenuComponent,
         {
           className: clsx("str-chat__suggestion-list", className),
           Header: suggestions.searchSource.type === "commands" ? CommandsMenuHeader : void 0,
@@ -18139,12 +18450,6 @@ const TextareaComposer = ({
     if (!textareaRef.current || textareaIsFocused || !focus2) return;
     textareaRef.current.focus();
   }, [attachments, focus2, quotedMessage, textareaRef]);
-  React.useEffect(
-    () => () => {
-      messageComposer.clear();
-    },
-    [messageComposer]
-  );
   React.useLayoutEffect(() => {
     const textarea = textareaRef.current;
     if (!textarea || isComposing) return;
@@ -18292,7 +18597,7 @@ const FileDragAndDropContent = ({
 }) => {
   const { t } = WithAudioPlayback.useTranslationContext();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__dropzone-container__content", children: isDragRejected ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("Some of the files will not be accepted") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconFileArrowLeftIn, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconUpload, {}),
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("Drag your files here") })
   ] }) });
 };
@@ -18328,7 +18633,7 @@ const SendButton = ({ children, sendMessage, ...rest }) => {
       size: "sm",
       variant: "primary",
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPaperPlane, {})
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconSend, {})
     }
   );
 };
@@ -18364,7 +18669,7 @@ const MessageComposerActions = () => {
   const stopGenerating = React.useCallback(() => channel?.stopAIResponse(), [channel]);
   const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton$1;
   const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices);
-  let content = SendButton$1 ? /* @__PURE__ */ jsxRuntime.jsx(SendButton$1, { sendMessage: handleSubmit }) : /* @__PURE__ */ jsxRuntime.jsx(SendButton, { sendMessage: handleSubmit, children: editedMessage || command ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCheckmark2, {}) : /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPaperPlane, {}) });
+  let content = SendButton$1 ? /* @__PURE__ */ jsxRuntime.jsx(SendButton$1, { sendMessage: handleSubmit }) : /* @__PURE__ */ jsxRuntime.jsx(SendButton, { sendMessage: handleSubmit, children: editedMessage || command ? /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCheckmark, {}) : /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconSend, {}) });
   if (shouldDisplayStopAIGeneration) {
     content = /* @__PURE__ */ jsxRuntime.jsx(StopAIGenerationButton$1, { onClick: stopGenerating });
   } else if (hideSendButton) return null;
@@ -18380,7 +18685,7 @@ const AdditionalMessageComposerActions = () => {
   const isCooldownActive = WithAudioPlayback.useIsCooldownActive();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-composer__additional-actions", children: !isCooldownActive && EmojiPicker ? /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker, {}) : null });
 };
-const GeolocationPreviewImage = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__location-preview-image", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMapPin, {}) });
+const GeolocationPreviewImage = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__location-preview-image", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconLocation, {}) });
 const GeolocationPreview = ({
   location,
   PreviewImage = GeolocationPreviewImage,
@@ -18598,7 +18903,7 @@ const MessageComposerProvider = (props) => {
   const messageComposer = WithAudioPlayback.useMessageComposerController();
   React.useEffect(
     () => () => {
-      messageComposer.createDraft();
+      messageComposer.createDraft().finally(() => messageComposer.clear());
     },
     [messageComposer]
   );
@@ -18916,7 +19221,7 @@ const useChat = ({
   };
   React.useEffect(() => {
     if (!client) return;
-    const version = "14.0.0-beta.2";
+    const version = "14.0.0-beta.4";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -19083,7 +19388,7 @@ const ThreadHeader = (props) => {
         onClick: closeThread,
         size: "md",
         variant: "secondary",
-        children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossMedium, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {})
       }
     )
   ] });
@@ -19391,7 +19696,7 @@ const ReactionSelector = (props) => {
           onClick: () => setExtendedListOpen(true),
           size: "sm",
           variant: "secondary",
-          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlusLarge, {})
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconPlus, {})
         }
       )
     ] }),
@@ -19417,10 +19722,10 @@ const ReactionSelector = (props) => {
     ) })
   ] });
 };
-ReactionSelector.getDialogId = (({ messageId, threadList }) => {
+ReactionSelector.getDialogId = ({ messageId, threadList }) => {
   const dialogIdNamespace = threadList ? "-thread" : "";
-  return `reaction-selector${dialogIdNamespace}--${messageId}`;
-});
+  return `reaction-selector${dialogIdNamespace}-${messageId}`;
+};
 ReactionSelector.displayName = "ReactionSelector";
 const ReactionSelectorWithButton = ({
   ReactionIcon
@@ -19505,6 +19810,7 @@ const QuickMessageActionsButton = ({ className, ...props }) => /* @__PURE__ */ j
     appearance: "ghost",
     circular: true,
     className: clsx("str-chat__message-actions-box-button", className),
+    size: "sm",
     variant: "secondary",
     ...props
   }
@@ -19571,7 +19877,7 @@ const DefaultMessageActionComponents = {
           "aria-label": t("aria/Open Thread"),
           className: msgActionsBoxButtonClassName,
           "data-testid": "thread-action",
-          Icon: WithAudioPlayback.IconBubbleText6ChatMessage,
+          Icon: WithAudioPlayback.IconThread,
           onClick: (e) => {
             handleOpenThread(e);
             closeMenu();
@@ -19598,7 +19904,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Quote Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconCloseQuote2,
+          Icon: WithAudioPlayback.IconQuote,
           onClick: () => {
             handleQuote();
             closeMenu();
@@ -19635,7 +19941,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Copy Message Text"),
           className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconSquareBehindSquare2_Copy,
+          Icon: WithAudioPlayback.IconCopy,
           onClick: () => {
             if (message.text) navigator.clipboard.writeText(message.text);
             closeMenu();
@@ -19653,7 +19959,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Resend Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconArrowRotateClockwise,
+          Icon: WithAudioPlayback.IconRetry,
           onClick: () => {
             handleRetry(message);
             closeMenu();
@@ -19672,7 +19978,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Edit Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconEditBig,
+          Icon: WithAudioPlayback.IconEdit,
           onClick: () => {
             messageComposer.initState({ composition: message });
             closeMenu();
@@ -19690,7 +19996,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Mark Message Unread"),
           className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconBubbleWideNotificationChatMessage,
+          Icon: WithAudioPlayback.IconNotification,
           onClick: (event) => {
             handleMarkUnread(event);
             closeMenu();
@@ -19713,7 +20019,7 @@ const DefaultMessageActionComponents = {
           "aria-label": reminder ? t("aria/Remind Me Message") : t("aria/Remove Reminder"),
           className: msgActionsBoxButtonClassName,
           hasSubMenu: !reminder,
-          Icon: reminder ? WithAudioPlayback.IconBellOff : WithAudioPlayback.IconBellNotification,
+          Icon: reminder ? WithAudioPlayback.IconBellOff : WithAudioPlayback.IconBell,
           onClick: () => {
             if (reminder) {
               client.reminders.deleteReminder(reminder.id);
@@ -19742,7 +20048,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": reminder ? t("aria/Remove Save For Later") : t("aria/Bookmark Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: reminder ? WithAudioPlayback.IconBookmarkRemove : WithAudioPlayback.IconBookmark,
+          Icon: reminder ? WithAudioPlayback.IconUnsave : WithAudioPlayback.IconSave,
           onClick: () => {
             if (reminder) client.reminders.deleteReminder(reminder.id);
             else client.reminders.createReminder({ messageId: message.id });
@@ -19761,7 +20067,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": t("aria/Flag Message"),
           className: msgActionsBoxButtonClassName,
-          Icon: WithAudioPlayback.IconFlag2,
+          Icon: WithAudioPlayback.IconFlag,
           onClick: (event) => {
             handleFlag(event);
             closeMenu();
@@ -19781,7 +20087,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": isMuted ? t("aria/Unmute User") : t("aria/Mute User"),
           className: msgActionsBoxButtonClassName,
-          Icon: isMuted ? WithAudioPlayback.IconVolumeFull : WithAudioPlayback.IconMute,
+          Icon: isMuted ? WithAudioPlayback.IconAudio : WithAudioPlayback.IconMute,
           onClick: (event) => {
             handleMute(event);
             closeMenu();
@@ -19804,7 +20110,7 @@ const DefaultMessageActionComponents = {
           {
             "aria-label": t("aria/Delete Message"),
             className: msgActionsBoxButtonClassName,
-            Icon: WithAudioPlayback.IconTrashBin,
+            Icon: WithAudioPlayback.IconDelete,
             onClick: () => {
               setOpenModal(true);
             },
@@ -19850,7 +20156,7 @@ const DefaultMessageActionComponents = {
         {
           "aria-label": isBlocked ? t("aria/Unblock User") : t("aria/Block User"),
           className: clsx(msgActionsBoxButtonClassName),
-          Icon: isBlocked ? WithAudioPlayback.IconPeopleAdded : WithAudioPlayback.IconCircleBanSign,
+          Icon: isBlocked ? WithAudioPlayback.IconUserCheck : WithAudioPlayback.IconNoSign,
           onClick: () => {
             const targetId = message.user?.id;
             if (targetId) {
@@ -19865,8 +20171,34 @@ const DefaultMessageActionComponents = {
     }
   },
   quick: {
+    // eslint-disable-next-line react/display-name
+    DropdownToggle: React.forwardRef((_, ref) => {
+      const { t } = WithAudioPlayback.useTranslationContext();
+      const { message } = useMessageContext();
+      const dropdownDialogIsOpen = useDialogIsOpen(
+        MessageActions.getDialogId({ messageId: message.id })
+      );
+      const { dialog } = useDialogOnNearestManager({
+        id: MessageActions.getDialogId({ messageId: message.id })
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        QuickMessageActionsButton,
+        {
+          "aria-expanded": dropdownDialogIsOpen,
+          "aria-haspopup": "true",
+          "aria-label": t("aria/Open Message Actions Menu"),
+          className: "str-chat__message-actions-box-button",
+          "data-testid": "message-actions-toggle-button",
+          onClick: () => {
+            dialog?.toggle();
+          },
+          ref,
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMore, { className: "str-chat__message-action-icon" })
+        }
+      );
+    }),
     React() {
-      return /* @__PURE__ */ jsxRuntime.jsx(ReactionSelectorWithButton, { ReactionIcon: WithAudioPlayback.IconEmojiSmile });
+      return /* @__PURE__ */ jsxRuntime.jsx(ReactionSelectorWithButton, { ReactionIcon: WithAudioPlayback.IconEmoji });
     },
     Reply() {
       const { handleOpenThread } = useMessageContext();
@@ -19878,14 +20210,17 @@ const DefaultMessageActionComponents = {
           className: "str-chat__message-reply-in-thread-button",
           "data-testid": "thread-action",
           onClick: handleOpenThread,
-          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconArrowShareLeft, { className: "str-chat__message-action-icon" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconReply, { className: "str-chat__message-action-icon" })
         }
       );
     }
   }
 };
 const defaultMessageActionSet = [
-  // { placement: 'dropdown', type: 'block' },
+  {
+    Component: DefaultMessageActionComponents.quick.DropdownToggle,
+    placement: "quick-dropdown-toggle"
+  },
   {
     Component: DefaultMessageActionComponents.quick.Reply,
     placement: "quick",
@@ -19975,14 +20310,14 @@ function useFetchReactions(options) {
   const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
   const [refetchNonce, setRefetchNonce] = React.useState(null);
   React.useEffect(() => {
-    if (!shouldFetch || !reactionType) {
+    if (!shouldFetch) {
       return;
     }
     let cancel = false;
     (async () => {
       try {
         setIsLoading(true);
-        const reactions2 = await handleFetchReactions(reactionType, sort);
+        const reactions2 = await handleFetchReactions(reactionType ?? void 0, sort);
         if (!cancel) {
           setReactions(reactions2);
         }
@@ -20006,6 +20341,16 @@ function useFetchReactions(options) {
   return { isLoading, reactions, refetch };
 }
 const defaultReactionDetailsSort = { created_at: -1 };
+const MessageReactionsDetailLoadingIndicator = () => {
+  const elements = React.useMemo(
+    () => Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
+    ] }, index)),
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: elements });
+};
 function MessageReactionsDetail({
   handleFetchReactions,
   onSelectedReactionTypeChange,
@@ -20016,7 +20361,11 @@ function MessageReactionsDetail({
   totalReactionCount
 }) {
   const { client } = WithAudioPlayback.useChatContext();
-  const { Avatar: Avatar$1 = Avatar } = WithAudioPlayback.useComponentContext(MessageReactionsDetail.name);
+  const {
+    Avatar: Avatar$1 = Avatar,
+    LoadingIndicator: LoadingIndicator2 = MessageReactionsDetailLoadingIndicator,
+    reactionOptions = defaultReactionOptions
+  } = WithAudioPlayback.useComponentContext(MessageReactionsDetail.name);
   const { t } = WithAudioPlayback.useTranslationContext();
   const {
     handleReaction: contextHandleReaction,
@@ -20043,7 +20392,7 @@ function MessageReactionsDetail({
     "div",
     {
       className: "str-chat__message-reactions-detail",
-      "data-testid": "reactions-list-modal",
+      "data-testid": "message-reactions-detail",
       children: [
         typeof totalReactionCount === "number" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__total-count", children: t("{{ count }} reactions", { count: totalReactionCount }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__reaction-type-list-container", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "str-chat__message-reactions-detail__reaction-type-list", children: reactions.map(
@@ -20056,7 +20405,9 @@ function MessageReactionsDetail({
                 {
                   "aria-pressed": reactionType === selectedReactionType,
                   className: "str-chat__message-reactions-detail__reaction-type-list-item-button",
-                  onClick: () => onSelectedReactionTypeChange?.(reactionType),
+                  onClick: () => onSelectedReactionTypeChange?.(
+                    selectedReactionType === reactionType ? null : reactionType
+                  ),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__message-reactions-detail__reaction-type-list-item-icon", children: /* @__PURE__ */ jsxRuntime.jsx(EmojiComponent, {}) }),
                     reactionCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -20080,22 +20431,10 @@ function MessageReactionsDetail({
             className: "str-chat__message-reactions-detail__user-list",
             "data-testid": "all-reacting-users",
             children: [
-              areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-reactions-detail__skeleton-item", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-avatar" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-reactions-detail__skeleton-line" })
-                ] })
-              ] }),
-              !areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactionDetailsWithLegacyFallback.map(({ user }) => {
+              areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator2, {}),
+              !areReactionsLoading && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactionDetailsWithLegacyFallback.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(
                   "div",
                   {
@@ -20120,23 +20459,23 @@ function MessageReactionsDetail({
                             children: belongsToCurrentUser ? t("You") : user?.name || user?.id
                           }
                         ),
-                        belongsToCurrentUser && selectedReactionType && /* @__PURE__ */ jsxRuntime.jsx(
+                        belongsToCurrentUser && /* @__PURE__ */ jsxRuntime.jsx(
                           "button",
                           {
                             className: "str-chat__message-reactions-detail__user-list-item-button",
                             "data-testid": "remove-reaction-button",
-                            onClick: (e) => {
-                              contextHandleReaction(selectedReactionType, e).then(() => {
-                                refetch();
-                              });
+                            onClick: async (e) => {
+                              await contextHandleReaction(type, e);
+                              refetch();
                             },
                             children: t("Tap to remove")
                           }
                         )
-                      ] })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "str-chat__message-reactions-detail__user-list-item-icon", children: EmojiComponent && !selectedReactionType && /* @__PURE__ */ jsxRuntime.jsx(EmojiComponent, {}) })
                     ]
                   },
-                  user?.id
+                  `${user?.id}-${type}`
                 );
               }) })
             ]
@@ -20285,6 +20624,7 @@ const UnMemoizedMessageReactions = (props) => {
   const divRef = React.useRef(null);
   const dialogId2 = `message-reactions-detail-${message.id}`;
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+  const isDialogOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
   const handleReactionButtonClick = (reactionType) => {
     if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
       return;
@@ -20319,6 +20659,8 @@ const UnMemoizedMessageReactions = (props) => {
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           FragmentOrButton,
           {
+            "aria-expanded": isDialogOpen,
+            "aria-pressed": isDialogOpen,
             buttonIf: visualStyle === "clustered",
             className: "str-chat__message-reactions__list-button",
             onClick: () => handleReactionButtonClick(existingReactions[0]?.reactionType ?? null),
@@ -20356,9 +20698,7 @@ const UnMemoizedMessageReactions = (props) => {
                   "button",
                   {
                     className: "str-chat__message-reactions__list-item-button",
-                    onClick: () => handleReactionButtonClick(
-                      existingReactions.at(-1)?.reactionType ?? null
-                    ),
+                    onClick: () => handleReactionButtonClick(null),
                     children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "str-chat__message-reactions__overflow-count", children: [
                       "+",
                       totalReactionCount - cappedExistingReactions.reactionCountToDisplay
@@ -20483,91 +20823,74 @@ const StreamEmoji = ({
 const useSplitActionSet = (actionSet) => React.useMemo(() => {
   const quickActionSet = [];
   const dropdownActionSet = [];
+  let quickDropdownToggleAction;
   for (const action of actionSet) {
     if (action.placement === "quick")
       quickActionSet.push(action);
     if (action.placement === "dropdown")
       dropdownActionSet.push(action);
+    if (action.placement === "quick-dropdown-toggle") {
+      quickDropdownToggleAction ?? (quickDropdownToggleAction = action);
+    }
   }
-  return { dropdownActionSet, quickActionSet };
+  return { dropdownActionSet, quickActionSet, quickDropdownToggleAction };
 }, [actionSet]);
 const MessageActions = ({
   disableBaseMessageActionSetFilter = false,
   messageActionSet = defaultMessageActionSet
 }) => {
-  const { theme } = WithAudioPlayback.useChatContext();
   const { isMyMessage, message, threadList } = useMessageContext();
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = WithAudioPlayback.useComponentContext();
   const { t } = WithAudioPlayback.useTranslationContext();
   const [actionsBoxButtonElement, setActionsBoxButtonElement] = React.useState(null);
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
     messageActionSet,
     disableBaseMessageActionSetFilter
   );
-  const { dropdownActionSet, quickActionSet } = useSplitActionSet(
-    filteredMessageActionSet
-  );
-  const dropdownDialogId = `message-actions--${message.id}`;
+  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(filteredMessageActionSet);
+  const messageActionsDialogId = MessageActions.getDialogId({ messageId: message.id });
   const reactionSelectorDialogId = ReactionSelector.getDialogId({
     messageId: message.id,
     threadList
   });
-  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dropdownDialogId });
-  const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId, dialogManager?.id);
+  const { dialog, dialogManager } = useDialogOnNearestManager({
+    id: messageActionsDialogId
+  });
+  const messageActionsDialogIsOpen = useDialogIsOpen(
+    messageActionsDialogId,
+    dialogManager?.id
+  );
   const reactionSelectorDialogIsOpen = useDialogIsOpen(
     reactionSelectorDialogId,
     dialogManager?.id
   );
-  const contextMenuItems = React.useMemo(
-    () => dropdownActionSet.map(({ Component }) => {
-      const ActionItem = (menuProps) => /* @__PURE__ */ jsxRuntime.jsx(Component, { ...menuProps });
-      return ActionItem;
-    }),
-    [dropdownActionSet]
-  );
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: clsx(`str-chat__message-${theme}__actions str-chat__message-options`, {
-        "str-chat__message-options--active": dropdownDialogIsOpen || reactionSelectorDialogIsOpen
+      className: clsx("str-chat__message-options", {
+        "str-chat__message-options--active": messageActionsDialogIsOpen || reactionSelectorDialogIsOpen
       }),
       children: [
-        dropdownActionSet.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            WithAudioPlayback.Button,
-            {
-              appearance: "ghost",
-              "aria-expanded": dropdownDialogIsOpen,
-              "aria-haspopup": "true",
-              "aria-label": t("aria/Open Message Actions Menu"),
-              circular: true,
-              className: "str-chat__message-actions-box-button",
-              "data-testid": "message-actions-toggle-button",
-              onClick: () => {
-                dialog?.toggle();
-              },
-              ref: setActionsBoxButtonElement,
-              variant: "secondary",
-              children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDotGrid1x3Horizontal, { className: "str-chat__message-action-icon" })
-            }
-          ),
+        quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(quickDropdownToggleAction.Component, { ref: setActionsBoxButtonElement }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            ContextMenu,
+            ContextMenuComponent,
             {
               backLabel: t("Back"),
               className: clsx("str-chat__message-actions-box", {
-                "str-chat__message-actions-box--open": dropdownDialogIsOpen
+                "str-chat__message-actions-box--open": messageActionsDialogIsOpen
               }),
               dialogManagerId: dialogManager?.id,
-              id: dropdownDialogId,
-              items: contextMenuItems,
+              id: messageActionsDialogId,
               onClose: dialog?.close,
               placement: isMyMessage() ? "top-end" : "top-start",
               referenceElement: actionsBoxButtonElement,
               tabIndex: -1,
-              trapFocus: true
+              trapFocus: true,
+              children: dropdownActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type))
             }
           )
         ] }),
@@ -20576,6 +20899,8 @@ const MessageActions = ({
     }
   );
 };
+MessageActions.getDialogId = ({ messageId }) => `message-actions-${messageId}`;
+MessageActions.displayName = "MessageActions";
 const MessageUIWithContext = ({
   endOfGroup,
   firstOfGroup,
@@ -21402,6 +21727,7 @@ const useScrollLocationLogic = (params) => {
   const closeToBottom = React.useRef(false);
   const closeToTop = React.useRef(false);
   const previousScrollTopRef = React.useRef(0);
+  const previousMessagesLengthRef = React.useRef(messages.length);
   const anchorRestoreCleanupRef = React.useRef(null);
   const captureAnchor = React.useCallback(() => {
     if (!listElement) return null;
@@ -21553,6 +21879,60 @@ const useScrollLocationLogic = (params) => {
       scrollToBottom();
     }
   }, [disableAutoScrollToBottom, justReachedLatestMessageSet, listElement, hasMoreNewer]);
+  React.useLayoutEffect(() => {
+    if (!listElement || disableAutoScrollToBottom || hasMoreNewer || suppressAutoscroll || justReachedLatestMessageSet || isRestoringOlderAnchorRef.current) {
+      return;
+    }
+    const initialDistanceToBottom = listElement.scrollHeight - (listElement.scrollTop + listElement.clientHeight);
+    const messagesHydrated = previousMessagesLengthRef.current === 0 && messages.length > 0;
+    if (initialDistanceToBottom > scrolledUpThreshold && !messagesHydrated) {
+      return;
+    }
+    let keepPinnedToBottom = true;
+    const maybeScrollToBottom = () => {
+      if (keepPinnedToBottom) {
+        scrollToBottom();
+      }
+    };
+    maybeScrollToBottom();
+    const settleDelays = [80, messagesHydrated ? 260 : 420, 900, 1700];
+    const settleTimeoutIds = settleDelays.map(
+      (delay) => setTimeout(maybeScrollToBottom, delay)
+    );
+    const stopKeepingPinnedToBottom = () => {
+      keepPinnedToBottom = false;
+    };
+    listElement.addEventListener("pointerdown", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("touchstart", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("wheel", stopKeepingPinnedToBottom, {
+      passive: true
+    });
+    listElement.addEventListener("keydown", stopKeepingPinnedToBottom);
+    const pinWindowTimeoutId = setTimeout(() => {
+      stopKeepingPinnedToBottom();
+    }, 2200);
+    return () => {
+      settleTimeoutIds.forEach(clearTimeout);
+      clearTimeout(pinWindowTimeoutId);
+      listElement.removeEventListener("pointerdown", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("touchstart", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("wheel", stopKeepingPinnedToBottom);
+      listElement.removeEventListener("keydown", stopKeepingPinnedToBottom);
+    };
+  }, [
+    disableAutoScrollToBottom,
+    hasMoreNewer,
+    justReachedLatestMessageSet,
+    listElement,
+    messages.length,
+    scrollToBottom,
+    scrolledUpThreshold,
+    suppressAutoscroll
+  ]);
   const updateScrollTop = useMessageListScrollManager({
     captureAnchor,
     disableScrollManagement: disableScrollManagement || isRestoringOlderAnchorRef.current,
@@ -21579,6 +21959,9 @@ const useScrollLocationLogic = (params) => {
   React.useLayoutEffect(() => {
     previousHasMoreNewerRef.current = hasMoreNewer;
   }, [hasMoreNewer]);
+  React.useLayoutEffect(() => {
+    previousMessagesLengthRef.current = messages.length;
+  }, [messages.length]);
   const onScroll = React.useCallback(
     (event) => {
       const element = event.target;
@@ -21587,8 +21970,10 @@ const useScrollLocationLogic = (params) => {
       updateScrollTop(scrollTop, captureAnchor);
       const offsetHeight = element.offsetHeight;
       const scrollHeight = element.scrollHeight;
+      const distanceToBottom = scrollHeight - (scrollTop + offsetHeight);
+      const bottomEnterThreshold = Math.max(Math.floor(scrolledUpThreshold * 0.6), 24);
       const prevCloseToBottom = closeToBottom.current;
-      closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
+      closeToBottom.current = prevCloseToBottom ? distanceToBottom < scrolledUpThreshold : distanceToBottom < bottomEnterThreshold;
       closeToTop.current = scrollTop < scrolledUpThreshold;
       if (closeToBottom.current) {
         setHasNewMessages(false);
@@ -21633,7 +22018,7 @@ const UnreadMessagesSeparator = ({
             onClick: () => markRead(),
             size: "sm",
             variant: "secondary",
-            children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossMedium, {})
+            children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {})
           }
         )
       ]
@@ -21853,7 +22238,7 @@ const UnreadMessagesNotification = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.Button, { appearance: "outline", onClick: () => markRead(), variant: "secondary", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossMedium, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.Button, { appearance: "outline", onClick: () => markRead(), variant: "secondary", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {}) })
       ]
     }
   );
@@ -23523,11 +23908,17 @@ const useConnectionRecoveredListener = (forceUpdate) => {
 const MOBILE_NAV_BREAKPOINT = 768;
 const useMobileNavigation = (channelListRef, navOpen, closeMobileNav) => {
   React.useEffect(() => {
+    const isClickInsideChannelList = (event) => {
+      const channelListElement = channelListRef.current;
+      if (!channelListElement) return false;
+      const eventPath = event.composedPath();
+      return eventPath.includes(channelListElement);
+    };
     const handleClickOutside = (event) => {
       if (typeof window !== "undefined" && window.innerWidth >= MOBILE_NAV_BREAKPOINT) {
         return;
       }
-      if (closeMobileNav && channelListRef.current && !channelListRef.current.contains(event.target) && navOpen) {
+      if (closeMobileNav && channelListRef.current && !isClickInsideChannelList(event) && navOpen) {
         closeMobileNav();
       }
     };
@@ -24220,7 +24611,7 @@ const SearchBar = () => {
           "str-chat__search-bar__input-wrapper--active": isActive
         }),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMagnifyingGlassSearch, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconSearch, {}),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -24264,7 +24655,7 @@ const SearchBar = () => {
               ref: clearButtonRef,
               size: "xs",
               variant: "secondary",
-              children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCircleX, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXCircle, {})
             }
           )
         ]
@@ -24657,7 +25048,7 @@ const UnMemoizedLoadMoreButton = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__load-more-button", children: /* @__PURE__ */ jsxRuntime.jsx(
     WithAudioPlayback.Button,
     {
-      appearance: "outline",
+      appearance: "ghost",
       "aria-label": t("aria/Load More Channels"),
       "data-testid": "load-more-button",
       disabled: loading,
@@ -25265,6 +25656,36 @@ const useArchiveActionButtonBehavior = () => {
   };
 };
 const defaultChannelActionSet = [
+  {
+    // eslint-disable-next-line react/display-name
+    Component: React.forwardRef((_, ref) => {
+      const { channel } = useChannelListItemContext();
+      const dialogId2 = ChannelListItemActionButtons.getDialogId({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        channelId: channel.id
+      });
+      const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
+      const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        WithAudioPlayback.Button,
+        {
+          appearance: "ghost",
+          "aria-expanded": dialogIsOpen,
+          "aria-pressed": dialogIsOpen,
+          circular: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            dialog.toggle();
+          },
+          ref,
+          size: "sm",
+          variant: "secondary",
+          children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMore, {})
+        }
+      );
+    }),
+    placement: "quick-dropdown-toggle"
+  },
   {
     Component() {
       const behaviorProps = useArchiveActionButtonBehavior();
@@ -25352,7 +25773,7 @@ const defaultChannelActionSet = [
         {
           "aria-label": title,
           disabled: inProgress,
-          Icon: WithAudioPlayback.IconCircleBanSign,
+          Icon: WithAudioPlayback.IconNoSign,
           onClick: async () => {
             try {
               setInProgress(true);
@@ -25397,7 +25818,7 @@ const defaultChannelActionSet = [
       const membership = useChannelMembershipState(channel);
       const dialogId2 = ChannelListItemActionButtons.getDialogId(
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        channel.id
+        { channelId: channel.id }
       );
       const { dialog } = useDialogOnNearestManager({ id: dialogId2 });
       const [inProgress, setInProgress] = React.useState(false);
@@ -25458,7 +25879,7 @@ const defaultChannelActionSet = [
         {
           "aria-label": title,
           disabled: inProgress,
-          Icon: WithAudioPlayback.IconArrowBoxLeft,
+          Icon: WithAudioPlayback.IconLeave,
           onClick: async (e) => {
             e.stopPropagation();
             try {
@@ -25499,59 +25920,23 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   const connectedUserIsMember = typeof membership.user !== "undefined";
   const ownCapabilities = channel.data?.own_capabilities;
   return React.useMemo(() => {
-    const filtered = channelActionSet.filter(
-      (action) => tsPattern.match({
-        action,
-        connectedUserIsMember,
-        isDirectMessageChannel,
-        memberCount,
-        ownCapabilities
-      }).returnType().with(
-        {
-          action: { connectedUserIsMember: true, placement: "quick", type: "archive" },
-          isDirectMessageChannel: true
-        },
-        {
-          action: {
-            connectedUserIsMember: true,
-            placement: "dropdown",
-            type: "archive"
-          },
-          isDirectMessageChannel: false
-        },
-        {
-          action: { placement: "dropdown", type: "mute" },
-          isDirectMessageChannel: true,
-          ownCapabilities: tsPattern.P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { placement: "quick", type: "mute" },
-          isDirectMessageChannel: false,
-          ownCapabilities: tsPattern.P.when(
-            (capabilities) => capabilities?.includes("mute-channel")
-          )
-        },
-        {
-          action: { type: "ban" },
-          memberCount: tsPattern.P.number.gt(0).and(tsPattern.P.number.lte(2)),
-          ownCapabilities: tsPattern.P.when(
-            (capabilities) => capabilities?.includes("ban-channel-members")
-          )
-        },
-        {
-          action: { type: "leave" },
-          ownCapabilities: tsPattern.P.when(
-            (capabilities) => capabilities?.includes("leave-channel")
-          )
-        },
-        {
-          action: { connectedUserIsMember: true, type: "pin" }
-        },
-        () => true
-      ).otherwise(() => false)
-    );
+    const filtered = channelActionSet.filter((action) => {
+      if (action.placement === "quick-dropdown-toggle") return true;
+      switch (action.type) {
+        case "archive":
+          return connectedUserIsMember && (action.placement === "quick" && isDirectMessageChannel || action.placement === "dropdown" && !isDirectMessageChannel);
+        case "mute":
+          return ownCapabilities?.includes("mute-channel") && (action.placement === "dropdown" && isDirectMessageChannel || action.placement === "quick" && !isDirectMessageChannel);
+        case "ban":
+          return memberCount > 0 && memberCount <= 2 && ownCapabilities?.includes("ban-channel-members");
+        case "leave":
+          return ownCapabilities?.includes("leave-channel");
+        case "pin":
+          return connectedUserIsMember;
+        default:
+          return true;
+      }
+    });
     return filtered;
   }, [
     channelActionSet,
@@ -25562,17 +25947,18 @@ const useBaseChannelActionSetFilter = (channelActionSet) => {
   ]);
 };
 const ChannelListItemActionButtons = () => {
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = WithAudioPlayback.useComponentContext();
   const { channel } = useChannelListItemContext();
   const [referenceElement, setReferenceElement] = React.useState(null);
-  const dialogId2 = ChannelListItemActionButtons.getDialogId(
+  const dialogId2 = ChannelListItemActionButtons.getDialogId({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    channel.id
-  );
+    channelId: channel.id
+  });
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId2 });
   const dialogIsOpen = useDialogIsOpen(dialogId2, dialogManager?.id);
   const filteredActionSet = useBaseChannelActionSetFilter(defaultChannelActionSet);
-  const splitActionSet = useSplitActionSet(filteredActionSet);
-  if (splitActionSet.quickActionSet.length + splitActionSet.dropdownActionSet.length === 0) {
+  const { dropdownActionSet, quickActionSet, quickDropdownToggleAction } = useSplitActionSet(filteredActionSet);
+  if (quickActionSet.length + dropdownActionSet.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -25582,26 +25968,10 @@ const ChannelListItemActionButtons = () => {
         "str-chat__channel-list-item__action-buttons--active": dialogIsOpen
       }),
       children: [
-        splitActionSet.dropdownActionSet.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          WithAudioPlayback.Button,
-          {
-            appearance: "ghost",
-            "aria-expanded": dialogIsOpen,
-            "aria-pressed": dialogIsOpen,
-            circular: true,
-            onClick: (e) => {
-              e.stopPropagation();
-              dialog.toggle();
-            },
-            ref: setReferenceElement,
-            size: "sm",
-            variant: "secondary",
-            children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconDotGrid1x3Horizontal, {})
-          }
-        ),
-        splitActionSet.quickActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type)),
+        quickDropdownToggleAction && dropdownActionSet.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(quickDropdownToggleAction.Component, { ref: setReferenceElement }),
+        quickActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type)),
         /* @__PURE__ */ jsxRuntime.jsx(
-          ContextMenu,
+          ContextMenuComponent,
           {
             className: "str-chat__channel-list-item__action-buttons-context-menu",
             dialogManagerId: dialogManager?.id,
@@ -25611,14 +25981,14 @@ const ChannelListItemActionButtons = () => {
             referenceElement,
             tabIndex: -1,
             trapFocus: true,
-            children: splitActionSet.dropdownActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type))
+            children: dropdownActionSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, {}, type))
           }
         )
       ]
     }
   );
 };
-ChannelListItemActionButtons.getDialogId = (channelId) => `channel-action-buttons-${channelId}`;
+ChannelListItemActionButtons.getDialogId = ({ channelId }) => `channel-action-buttons-${channelId}`;
 ChannelListItemActionButtons.displayName = "ChannelListItemActionButtons";
 function ChannelListItemTimestamp({ lastMessage }) {
   const { t, tDateTimeParser } = WithAudioPlayback.useTranslationContext("ChannelListItemTimestamp");
@@ -25768,21 +26138,21 @@ const useLatestMessagePreview = ({
   ]);
 };
 const deliveryStatusIconMap = {
-  delivered: WithAudioPlayback.IconDoubleCheckmark1Small,
-  read: WithAudioPlayback.IconDoubleCheckmark1Small,
+  delivered: WithAudioPlayback.IconChecks,
+  read: WithAudioPlayback.IconChecks,
   sending: WithAudioPlayback.IconClock,
   sent: WithAudioPlayback.IconCheckmark1Small
 };
 const contentTypeIconMap = {
-  deleted: WithAudioPlayback.IconCircleBanSign,
-  error: WithAudioPlayback.IconExclamationCircle1,
-  file: WithAudioPlayback.IconFileBend,
-  giphy: WithAudioPlayback.IconFileBend,
-  image: WithAudioPlayback.IconCamera1,
-  link: WithAudioPlayback.IconChainLink,
-  location: WithAudioPlayback.IconMapPin,
+  deleted: WithAudioPlayback.IconNoSign,
+  error: WithAudioPlayback.IconExclamationCircleFill,
+  file: WithAudioPlayback.IconFile,
+  giphy: WithAudioPlayback.IconFile,
+  image: WithAudioPlayback.IconCamera,
+  link: WithAudioPlayback.IconLink,
+  location: WithAudioPlayback.IconLocation,
   video: WithAudioPlayback.IconVideo,
-  voice: WithAudioPlayback.IconMicrophone
+  voice: WithAudioPlayback.IconVoice
 };
 const SummarizedMessagePreview = ({
   latestMessage,
@@ -26378,7 +26748,7 @@ const ThreadListItem = ({
 const ThreadListEmptyPlaceholder = () => {
   const { t } = WithAudioPlayback.useTranslationContext("ThreadListEmptyPlaceholder");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__thread-list-empty-placeholder", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconBubbles, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMessageBubbles, {}),
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("Reply to a message to start a thread") })
   ] });
 };
@@ -26401,7 +26771,7 @@ const ThreadListUnseenThreadsBanner = () => {
       onClick: () => client.threads.reload(),
       children: [
         !isLoading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconArrowRotateRightLeftRepeatRefresh, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconRefresh, {}),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("ThreadListUnseenThreadsBanner/unreadThreads", {
             count: unseenThreadIds.length
           }) })
@@ -26556,11 +26926,11 @@ const ThreadList = ({ virtuosoProps }) => {
   );
 };
 const IconsBySeverity = {
-  error: WithAudioPlayback.IconExclamationCircle,
+  error: WithAudioPlayback.IconExclamationMark,
   info: null,
-  // IconCircleInfoTooltip,
-  loading: WithAudioPlayback.IconArrowRotateRightLeftRepeatRefresh,
-  success: WithAudioPlayback.IconCheckmark2,
+  // IconInfo,
+  loading: WithAudioPlayback.IconRefresh,
+  success: WithAudioPlayback.IconCheckmark,
   warning: WithAudioPlayback.IconExclamationTriangle
 };
 const DefaultNotificationIcon = ({ notification }) => {
@@ -26639,7 +27009,7 @@ const Notification = React.forwardRef(
               onClick: handleDismiss,
               size: "sm",
               variant: "secondary",
-              children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconCrossMedium, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconXmark, {})
             }
           )
         ]
@@ -26944,7 +27314,7 @@ const VoiceRecordingPlayerUI = ({ audioPlayer }) => {
     secondsElapsed
   } = WithAudioPlayback.useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClassName, "data-testid": "voice-recording-widget", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__play-button-container", children: /* @__PURE__ */ jsxRuntime.jsx(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-attachment__voice-recording-widget__timer", children: durationSeconds ? /* @__PURE__ */ jsxRuntime.jsx(
         DurationDisplay,
@@ -27201,7 +27571,7 @@ const ThumbnailButton = ({
             "aria-hidden": "true",
             className: "str-chat__modal-gallery__image-load-failed-overlay",
             "data-testid": "str-chat__modal-gallery__image-load-failed-overlay",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__modal-gallery__image-retry-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconArrowRotateClockwise, {}) })
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__modal-gallery__image-retry-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconRetry, {}) })
           }
         ),
         showOverlay && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "str-chat__modal-gallery__placeholder", children: [
@@ -27292,7 +27662,7 @@ const CardContent = (props) => {
         className: "str-chat__message-attachment-card--source-link",
         "data-testid": "card-source-link",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconChainLink, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconLink, {}),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__message-attachment-card--url", children: url })
         ]
       }
@@ -27353,23 +27723,44 @@ const FileAttachment = ({ attachment }) => {
   );
 };
 const Giphy = ({ attachment }) => {
-  const { giphyVersion: giphyVersionName } = WithAudioPlayback.useChannelStateContext();
+  const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } = WithAudioPlayback.useChannelStateContext();
   const { BaseImage: BaseImage$1 = BaseImage } = WithAudioPlayback.useComponentContext();
   const { t } = WithAudioPlayback.useTranslationContext();
   const usesDefaultBaseImage = BaseImage$1 === BaseImage;
+  const imageElement = React.useRef(null);
+  const [attachmentConfiguration, setAttachmentConfiguration] = React.useState(void 0);
   const imageDescriptors = React.useMemo(
     () => toGalleryItemDescriptors(attachment, { giphyVersionName }),
     [attachment, giphyVersionName]
   );
-  if (!imageDescriptors?.imageUrl) return null;
-  const { alt, dimensions, imageUrl, title } = imageDescriptors;
+  const alt = imageDescriptors && imageDescriptors.alt;
+  const dimensions = imageDescriptors && imageDescriptors.dimensions;
+  const imageUrl = imageDescriptors && imageDescriptors.imageUrl;
+  const title = imageDescriptors && imageDescriptors.title;
+  const resolvedImageUrl = attachmentConfiguration?.url || imageUrl;
+  const imageStyleVariables = React.useMemo(() => {
+    const originalHeight = Number(dimensions?.height);
+    const originalWidth = Number(dimensions?.width);
+    return {
+      "--original-height": String(originalHeight > 1 ? originalHeight : 1e6),
+      "--original-width": String(originalWidth > 1 ? originalWidth : 1e6)
+    };
+  }, [dimensions?.height, dimensions?.width]);
+  React.useLayoutEffect(() => {
+    if (!imageElement.current || !imageAttachmentSizeHandler) return;
+    const config = imageAttachmentSizeHandler(attachment, imageElement.current);
+    setAttachmentConfiguration(config);
+  }, [attachment, imageAttachmentSizeHandler]);
+  if (!imageUrl) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx(`str-chat__message-attachment-giphy`), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       BaseImage$1,
       {
         alt: alt ?? title ?? t("User uploaded content"),
         height: dimensions?.height,
-        src: imageUrl,
+        ref: imageElement,
+        src: resolvedImageUrl,
+        style: imageStyleVariables,
         width: dimensions?.width,
         ...usesDefaultBaseImage ? { showDownloadButtonOnError: false } : {}
       }
@@ -27442,7 +27833,7 @@ const DefaultGeolocationAttachmentMapPlaceholder = ({
     className: "str-chat__message-attachment-geolocation__placeholder",
     "data-testid": "geolocation-attachment-map-placeholder",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconMapPin, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(WithAudioPlayback.IconLocation, {}),
       /* @__PURE__ */ jsxRuntime.jsx(
         "a",
         {
@@ -27984,162 +28375,91 @@ exports.ChatViewThreadsSelectorButton = WithAudioPlayback.ChatViewThreadsSelecto
 exports.ComponentContext = WithAudioPlayback.ComponentContext;
 exports.ComponentProvider = WithAudioPlayback.ComponentProvider;
 exports.EmptyStateIndicator = WithAudioPlayback.EmptyStateIndicator;
-exports.IconApiAggregate = WithAudioPlayback.IconApiAggregate;
-exports.IconApples = WithAudioPlayback.IconApples;
 exports.IconArchive = WithAudioPlayback.IconArchive;
-exports.IconArrowBoxLeft = WithAudioPlayback.IconArrowBoxLeft;
 exports.IconArrowDown = WithAudioPlayback.IconArrowDown;
 exports.IconArrowDownCircle = WithAudioPlayback.IconArrowDownCircle;
 exports.IconArrowLeft = WithAudioPlayback.IconArrowLeft;
 exports.IconArrowRight = WithAudioPlayback.IconArrowRight;
-exports.IconArrowRightUp = WithAudioPlayback.IconArrowRightUp;
-exports.IconArrowRotateClockwise = WithAudioPlayback.IconArrowRotateClockwise;
-exports.IconArrowRotateRightLeftRepeatRefresh = WithAudioPlayback.IconArrowRotateRightLeftRepeatRefresh;
-exports.IconArrowShareLeft = WithAudioPlayback.IconArrowShareLeft;
 exports.IconArrowUp = WithAudioPlayback.IconArrowUp;
-exports.IconArrowsRepeatLeftRight = WithAudioPlayback.IconArrowsRepeatLeftRight;
-exports.IconAt = WithAudioPlayback.IconAt;
-exports.IconAtSolid = WithAudioPlayback.IconAtSolid;
-exports.IconBellNotification = WithAudioPlayback.IconBellNotification;
+exports.IconArrowUpRight = WithAudioPlayback.IconArrowUpRight;
+exports.IconAttachment = WithAudioPlayback.IconAttachment;
+exports.IconAudio = WithAudioPlayback.IconAudio;
+exports.IconBell = WithAudioPlayback.IconBell;
 exports.IconBellOff = WithAudioPlayback.IconBellOff;
-exports.IconBookmark = WithAudioPlayback.IconBookmark;
-exports.IconBookmarkRemove = WithAudioPlayback.IconBookmarkRemove;
-exports.IconBrowserAISparkle = WithAudioPlayback.IconBrowserAISparkle;
-exports.IconBubble2ChatMessage = WithAudioPlayback.IconBubble2ChatMessage;
-exports.IconBubble2Solid = WithAudioPlayback.IconBubble2Solid;
 exports.IconBubble3ChatMessage = WithAudioPlayback.IconBubble3ChatMessage;
-exports.IconBubble3Solid = WithAudioPlayback.IconBubble3Solid;
-exports.IconBubbleAnnotation2ChatMessage = WithAudioPlayback.IconBubbleAnnotation2ChatMessage;
-exports.IconBubbleText6ChatMessage = WithAudioPlayback.IconBubbleText6ChatMessage;
-exports.IconBubbleText6Solid = WithAudioPlayback.IconBubbleText6Solid;
 exports.IconBubbleText6SolidChatMessage = WithAudioPlayback.IconBubbleText6SolidChatMessage;
-exports.IconBubbleWideNotificationChatMessage = WithAudioPlayback.IconBubbleWideNotificationChatMessage;
-exports.IconBubbleWideSparkleChatMessage = WithAudioPlayback.IconBubbleWideSparkleChatMessage;
-exports.IconBubbles = WithAudioPlayback.IconBubbles;
-exports.IconCalendar1 = WithAudioPlayback.IconCalendar1;
-exports.IconCallCancel = WithAudioPlayback.IconCallCancel;
-exports.IconCamera1 = WithAudioPlayback.IconCamera1;
-exports.IconCar1 = WithAudioPlayback.IconCar1;
-exports.IconCat = WithAudioPlayback.IconCat;
-exports.IconChainLink = WithAudioPlayback.IconChainLink;
-exports.IconChart5 = WithAudioPlayback.IconChart5;
+exports.IconCamera = WithAudioPlayback.IconCamera;
+exports.IconCheckmark = WithAudioPlayback.IconCheckmark;
 exports.IconCheckmark1Small = WithAudioPlayback.IconCheckmark1Small;
-exports.IconCheckmark2 = WithAudioPlayback.IconCheckmark2;
-exports.IconCheckmark2Small = WithAudioPlayback.IconCheckmark2Small;
+exports.IconChecks = WithAudioPlayback.IconChecks;
 exports.IconChevronDown = WithAudioPlayback.IconChevronDown;
-exports.IconChevronGrabberVerticalSelector = WithAudioPlayback.IconChevronGrabberVerticalSelector;
 exports.IconChevronLeft = WithAudioPlayback.IconChevronLeft;
 exports.IconChevronRight = WithAudioPlayback.IconChevronRight;
-exports.IconChevronTop = WithAudioPlayback.IconChevronTop;
-exports.IconCircleBanSign = WithAudioPlayback.IconCircleBanSign;
-exports.IconCircleCheck = WithAudioPlayback.IconCircleCheck;
-exports.IconCircleInfoTooltip = WithAudioPlayback.IconCircleInfoTooltip;
-exports.IconCircleMinus = WithAudioPlayback.IconCircleMinus;
-exports.IconCircleQuestionmark = WithAudioPlayback.IconCircleQuestionmark;
-exports.IconCircleQuestionmarkFilled = WithAudioPlayback.IconCircleQuestionmarkFilled;
-exports.IconCircleX = WithAudioPlayback.IconCircleX;
 exports.IconClock = WithAudioPlayback.IconClock;
-exports.IconClockSolid = WithAudioPlayback.IconClockSolid;
-exports.IconCloseQuote2 = WithAudioPlayback.IconCloseQuote2;
-exports.IconCode = WithAudioPlayback.IconCode;
-exports.IconCodeBrackets = WithAudioPlayback.IconCodeBrackets;
-exports.IconCodeEditorInsert = WithAudioPlayback.IconCodeEditorInsert;
-exports.IconCompass = WithAudioPlayback.IconCompass;
-exports.IconCreditCard2Billing = WithAudioPlayback.IconCreditCard2Billing;
-exports.IconCrossMedium = WithAudioPlayback.IconCrossMedium;
+exports.IconCommand = WithAudioPlayback.IconCommand;
+exports.IconCopy = WithAudioPlayback.IconCopy;
 exports.IconCrossSmall = WithAudioPlayback.IconCrossSmall;
-exports.IconDotGrid1x3Horizontal = WithAudioPlayback.IconDotGrid1x3Horizontal;
-exports.IconDotGrid2x3 = WithAudioPlayback.IconDotGrid2x3;
-exports.IconDotsGrid1x3Vertical = WithAudioPlayback.IconDotsGrid1x3Vertical;
-exports.IconDoubleCheckmark1Small = WithAudioPlayback.IconDoubleCheckmark1Small;
-exports.IconEditBig = WithAudioPlayback.IconEditBig;
-exports.IconEditBigSolid = WithAudioPlayback.IconEditBigSolid;
-exports.IconEmojiAddReaction = WithAudioPlayback.IconEmojiAddReaction;
-exports.IconEmojiSad = WithAudioPlayback.IconEmojiSad;
-exports.IconEmojiSmile = WithAudioPlayback.IconEmojiSmile;
-exports.IconExclamation = WithAudioPlayback.IconExclamation;
-exports.IconExclamationCircle = WithAudioPlayback.IconExclamationCircle;
-exports.IconExclamationCircle1 = WithAudioPlayback.IconExclamationCircle1;
+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.IconExclamationTriangle1 = WithAudioPlayback.IconExclamationTriangle1;
 exports.IconEyeOpen = WithAudioPlayback.IconEyeOpen;
-exports.IconFileArrowLeftIn = WithAudioPlayback.IconFileArrowLeftIn;
-exports.IconFileBend = WithAudioPlayback.IconFileBend;
-exports.IconFilledCircleInfoTooltip = WithAudioPlayback.IconFilledCircleInfoTooltip;
-exports.IconFilter1 = WithAudioPlayback.IconFilter1;
-exports.IconFlag2 = WithAudioPlayback.IconFlag2;
-exports.IconGauge = WithAudioPlayback.IconGauge;
-exports.IconGoogle = WithAudioPlayback.IconGoogle;
-exports.IconHashtagChannel = WithAudioPlayback.IconHashtagChannel;
-exports.IconHeart2 = WithAudioPlayback.IconHeart2;
-exports.IconHistory = WithAudioPlayback.IconHistory;
-exports.IconImages1Alt = WithAudioPlayback.IconImages1Alt;
-exports.IconInvite = WithAudioPlayback.IconInvite;
-exports.IconLayersBehind = WithAudioPlayback.IconLayersBehind;
+exports.IconFile = WithAudioPlayback.IconFile;
+exports.IconFlag = WithAudioPlayback.IconFlag;
+exports.IconImage = WithAudioPlayback.IconImage;
+exports.IconInfo = WithAudioPlayback.IconInfo;
 exports.IconLayoutAlignLeft = WithAudioPlayback.IconLayoutAlignLeft;
-exports.IconLayoutGrid1 = WithAudioPlayback.IconLayoutGrid1;
+exports.IconLeave = WithAudioPlayback.IconLeave;
 exports.IconLightBulbSimple = WithAudioPlayback.IconLightBulbSimple;
-exports.IconLimits = WithAudioPlayback.IconLimits;
-exports.IconLineChart3 = WithAudioPlayback.IconLineChart3;
-exports.IconLoadingCircle = WithAudioPlayback.IconLoadingCircle;
-exports.IconLock = WithAudioPlayback.IconLock;
-exports.IconMagnifyingGlassSearch = WithAudioPlayback.IconMagnifyingGlassSearch;
-exports.IconMapPin = WithAudioPlayback.IconMapPin;
-exports.IconMicrophone = WithAudioPlayback.IconMicrophone;
-exports.IconMicrophoneSolid = WithAudioPlayback.IconMicrophoneSolid;
-exports.IconMinusLarge = WithAudioPlayback.IconMinusLarge;
+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.IconNewspaper2 = WithAudioPlayback.IconNewspaper2;
-exports.IconOrganization = WithAudioPlayback.IconOrganization;
-exports.IconPaperPlane = WithAudioPlayback.IconPaperPlane;
-exports.IconPaperPlaneTopRight = WithAudioPlayback.IconPaperPlaneTopRight;
-exports.IconPaperclip = WithAudioPlayback.IconPaperclip;
-exports.IconParagraphsText = WithAudioPlayback.IconParagraphsText;
-exports.IconPause = WithAudioPlayback.IconPause;
-exports.IconPencil = WithAudioPlayback.IconPencil;
-exports.IconPeople = WithAudioPlayback.IconPeople;
-exports.IconPeople2 = WithAudioPlayback.IconPeople2;
-exports.IconPeopleAdd = WithAudioPlayback.IconPeopleAdd;
-exports.IconPeopleAdded = WithAudioPlayback.IconPeopleAdded;
-exports.IconPeopleCircle = WithAudioPlayback.IconPeopleCircle;
-exports.IconPeopleCopy = WithAudioPlayback.IconPeopleCopy;
-exports.IconPeopleEditUserRights = WithAudioPlayback.IconPeopleEditUserRights;
-exports.IconPeopleRemove = WithAudioPlayback.IconPeopleRemove;
-exports.IconPersona = WithAudioPlayback.IconPersona;
+exports.IconNoSign = WithAudioPlayback.IconNoSign;
+exports.IconNotification = WithAudioPlayback.IconNotification;
+exports.IconPauseFill = WithAudioPlayback.IconPauseFill;
 exports.IconPin = WithAudioPlayback.IconPin;
-exports.IconPlaySolid = WithAudioPlayback.IconPlaySolid;
-exports.IconPlusLarge = WithAudioPlayback.IconPlusLarge;
+exports.IconPlayFill = WithAudioPlayback.IconPlayFill;
+exports.IconPlus = WithAudioPlayback.IconPlus;
 exports.IconPlusSmall = WithAudioPlayback.IconPlusSmall;
-exports.IconRunShortcut = WithAudioPlayback.IconRunShortcut;
-exports.IconSearchText = WithAudioPlayback.IconSearchText;
+exports.IconPoll = WithAudioPlayback.IconPoll;
+exports.IconQuote = WithAudioPlayback.IconQuote;
+exports.IconRefresh = WithAudioPlayback.IconRefresh;
+exports.IconReorder = WithAudioPlayback.IconReorder;
+exports.IconReply = WithAudioPlayback.IconReply;
+exports.IconRetry = WithAudioPlayback.IconRetry;
+exports.IconSave = WithAudioPlayback.IconSave;
+exports.IconSearch = WithAudioPlayback.IconSearch;
+exports.IconSend = WithAudioPlayback.IconSend;
 exports.IconSettingsGear2 = WithAudioPlayback.IconSettingsGear2;
-exports.IconSettingsSliderVer = WithAudioPlayback.IconSettingsSliderVer;
-exports.IconShapesPlusCloseSquareCircle = WithAudioPlayback.IconShapesPlusCloseSquareCircle;
-exports.IconShapesTriangleSquareCircle = WithAudioPlayback.IconShapesTriangleSquareCircle;
-exports.IconShareRedirectLink = WithAudioPlayback.IconShareRedirectLink;
-exports.IconShield = WithAudioPlayback.IconShield;
-exports.IconSquareBehindSquare2_Copy = WithAudioPlayback.IconSquareBehindSquare2_Copy;
-exports.IconSquareCircleTopRightFeeds = WithAudioPlayback.IconSquareCircleTopRightFeeds;
-exports.IconStop = WithAudioPlayback.IconStop;
-exports.IconTable = WithAudioPlayback.IconTable;
-exports.IconTeam = WithAudioPlayback.IconTeam;
-exports.IconTennis = WithAudioPlayback.IconTennis;
-exports.IconTextToImageURLEnrichment = WithAudioPlayback.IconTextToImageURLEnrichment;
+exports.IconThread = WithAudioPlayback.IconThread;
+exports.IconThreadFill = WithAudioPlayback.IconThreadFill;
 exports.IconThunder = WithAudioPlayback.IconThunder;
 exports.IconTranslate = WithAudioPlayback.IconTranslate;
-exports.IconTrashBin = WithAudioPlayback.IconTrashBin;
-exports.IconTrending4 = WithAudioPlayback.IconTrending4;
 exports.IconTrophy = WithAudioPlayback.IconTrophy;
-exports.IconUnlocked = WithAudioPlayback.IconUnlocked;
 exports.IconUnpin = WithAudioPlayback.IconUnpin;
-exports.IconUsers = WithAudioPlayback.IconUsers;
+exports.IconUnsave = WithAudioPlayback.IconUnsave;
+exports.IconUpload = WithAudioPlayback.IconUpload;
+exports.IconUser = WithAudioPlayback.IconUser;
+exports.IconUserAdd = WithAudioPlayback.IconUserAdd;
+exports.IconUserCheck = WithAudioPlayback.IconUserCheck;
+exports.IconUserRemove = WithAudioPlayback.IconUserRemove;
 exports.IconVideo = WithAudioPlayback.IconVideo;
-exports.IconVideoSolid = WithAudioPlayback.IconVideoSolid;
-exports.IconVoiceAndVideo = WithAudioPlayback.IconVoiceAndVideo;
-exports.IconVoiceHigh = WithAudioPlayback.IconVoiceHigh;
-exports.IconVolumeFull = WithAudioPlayback.IconVolumeFull;
-exports.IconWebhook = WithAudioPlayback.IconWebhook;
+exports.IconVideoFill = WithAudioPlayback.IconVideoFill;
+exports.IconVoice = WithAudioPlayback.IconVoice;
+exports.IconVoiceFill = WithAudioPlayback.IconVoiceFill;
+exports.IconXCircle = WithAudioPlayback.IconXCircle;
+exports.IconXmark = WithAudioPlayback.IconXmark;
 exports.LoadingChannel = WithAudioPlayback.LoadingChannel;
 exports.LoadingErrorIndicator = WithAudioPlayback.LoadingErrorIndicator;
 exports.MESSAGE_ACTIONS = WithAudioPlayback.MESSAGE_ACTIONS;
@@ -28266,6 +28586,7 @@ exports.ContextMenu = ContextMenu;
 exports.ContextMenuBackButton = ContextMenuBackButton;
 exports.ContextMenuBody = ContextMenuBody;
 exports.ContextMenuButton = ContextMenuButton;
+exports.ContextMenuContent = ContextMenuContent;
 exports.ContextMenuHeader = ContextMenuHeader;
 exports.ContextMenuRoot = ContextMenuRoot;
 exports.CooldownTimer = CooldownTimer;
@@ -28338,6 +28659,7 @@ exports.MessageListContextProvider = MessageListContextProvider;
 exports.MessageProvider = MessageProvider;
 exports.MessageReactions = MessageReactions;
 exports.MessageReactionsDetail = MessageReactionsDetail;
+exports.MessageReactionsDetailLoadingIndicator = MessageReactionsDetailLoadingIndicator;
 exports.MessageRepliesCountButton = MessageRepliesCountButton;
 exports.MessageSearchResultItem = MessageSearchResultItem;
 exports.MessageStatus = MessageStatus;