stream-chat-react 12.14.0 → 13.0.0-rc.1

package/dist/experimental/index.node.cjs

@@ -326,30 +326,16 @@ __export(experimental_exports, {
 module.exports = __toCommonJS(experimental_exports);
 
 // src/experimental/MessageActions/MessageActions.tsx
-var import_clsx8 = __toESM(require("clsx"));
-var import_react37 = __toESM(require("react"));
-
-// src/context/ChannelActionContext.tsx
-var import_react = __toESM(require("react"));
-var ChannelActionContext = import_react.default.createContext(void 0);
-var useChannelActionContext = (componentName) => {
-  const contextValue = (0, import_react.useContext)(ChannelActionContext);
-  if (!contextValue) {
-    console.warn(
-      `The useChannelActionContext hook was called outside of the ChannelActionContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`
-    );
-    return {};
-  }
-  return contextValue;
-};
+var import_clsx9 = __toESM(require("clsx"));
+var import_react39 = __toESM(require("react"));
 
 // src/context/ChannelListContext.tsx
-var import_react2 = __toESM(require("react"));
-var ChannelListContext = (0, import_react2.createContext)(
+var import_react = __toESM(require("react"));
+var ChannelListContext = (0, import_react.createContext)(
   void 0
 );
 var useChannelListContext = (componentName) => {
-  const contextValue = (0, import_react2.useContext)(ChannelListContext);
+  const contextValue = (0, import_react.useContext)(ChannelListContext);
   if (!contextValue) {
     console.warn(
       `The useChannelListContext hook was called outside of the ChannelListContext provider. Make sure this hook is called within the ChannelList component. The errored call is located in the ${componentName} component.`
@@ -360,10 +346,10 @@ var useChannelListContext = (componentName) => {
 };
 
 // src/context/ChannelStateContext.tsx
-var import_react3 = __toESM(require("react"));
-var ChannelStateContext = import_react3.default.createContext(void 0);
+var import_react2 = __toESM(require("react"));
+var ChannelStateContext = import_react2.default.createContext(void 0);
 var useChannelStateContext = (componentName) => {
-  const contextValue = (0, import_react3.useContext)(ChannelStateContext);
+  const contextValue = (0, import_react2.useContext)(ChannelStateContext);
   if (!contextValue) {
     console.warn(
       `The useChannelStateContext hook was called outside of the ChannelStateContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`
@@ -374,10 +360,10 @@ var useChannelStateContext = (componentName) => {
 };
 
 // src/context/ChatContext.tsx
-var import_react4 = __toESM(require("react"));
-var ChatContext = import_react4.default.createContext(void 0);
+var import_react3 = __toESM(require("react"));
+var ChatContext = import_react3.default.createContext(void 0);
 var useChatContext = (componentName) => {
-  const contextValue = (0, import_react4.useContext)(ChatContext);
+  const contextValue = (0, import_react3.useContext)(ChatContext);
   if (!contextValue) {
     console.warn(
       `The useChatContext hook was called outside of the ChatContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`
@@ -388,33 +374,33 @@ var useChatContext = (componentName) => {
 };
 
 // src/context/ComponentContext.tsx
-var import_react5 = __toESM(require("react"));
-var ComponentContext = import_react5.default.createContext({});
-var useComponentContext = (_componentName) => (0, import_react5.useContext)(ComponentContext);
+var import_react4 = __toESM(require("react"));
+var ComponentContext = import_react4.default.createContext({});
+var useComponentContext = (_componentName) => (0, import_react4.useContext)(ComponentContext);
 
 // src/context/DialogManagerContext.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 
 // src/components/Dialog/DialogPortal.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/components/Dialog/hooks/useDialog.ts
-var import_react7 = require("react");
+var import_react6 = require("react");
 
 // src/store/hooks/useStateStore.ts
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_shim = require("use-sync-external-store/shim");
 var noop = () => {
 };
 function useStateStore(store, selector2) {
-  const wrappedSubscription = (0, import_react6.useCallback)(
+  const wrappedSubscription = (0, import_react5.useCallback)(
     (onStoreChange) => {
       const unsubscribe = store?.subscribeWithSelector(selector2, onStoreChange);
       return unsubscribe ?? noop;
     },
     [store, selector2]
   );
-  const wrappedSnapshot = (0, import_react6.useMemo)(() => {
+  const wrappedSnapshot = (0, import_react5.useMemo)(() => {
     let cachedTuple;
     return () => {
       const currentValue = store?.getLatestValue();
@@ -443,7 +429,7 @@ function useStateStore(store, selector2) {
 // src/components/Dialog/hooks/useDialog.ts
 var useDialog = ({ id }) => {
   const { dialogManager } = useDialogManager();
-  (0, import_react7.useEffect)(
+  (0, import_react6.useEffect)(
     () => () => {
       dialogManager.markForRemoval(id);
     },
@@ -453,7 +439,7 @@ var useDialog = ({ id }) => {
 };
 var useDialogIsOpen = (id) => {
   const { dialogManager } = useDialogManager();
-  const dialogIsOpenSelector = (0, import_react7.useCallback)(
+  const dialogIsOpenSelector = (0, import_react6.useCallback)(
     ({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }),
     [id]
   );
@@ -461,15 +447,15 @@ var useDialogIsOpen = (id) => {
 };
 
 // src/components/Portal/Portal.ts
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_react_dom = require("react-dom");
 var Portal = ({
   children,
   getPortalDestination,
   isOpen
 }) => {
-  const [portalDestination, setPortalDestination] = (0, import_react8.useState)(null);
-  (0, import_react8.useLayoutEffect)(() => {
+  const [portalDestination, setPortalDestination] = (0, import_react7.useState)(null);
+  (0, import_react7.useLayoutEffect)(() => {
     const destination = getPortalDestination();
     if (!destination || !isOpen) return;
     setPortalDestination(destination);
@@ -485,40 +471,35 @@ var DialogPortalEntry = ({
 }) => {
   const { dialogManager } = useDialogManager();
   const dialogIsOpen = useDialogIsOpen(dialogId);
-  const getPortalDestination = (0, import_react9.useCallback)(
+  const getPortalDestination = (0, import_react8.useCallback)(
     () => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`),
     [dialogManager.id]
   );
-  return /* @__PURE__ */ import_react9.default.createElement(Portal, { getPortalDestination, isOpen: dialogIsOpen }, children);
+  return /* @__PURE__ */ import_react8.default.createElement(Portal, { getPortalDestination, isOpen: dialogIsOpen }, children);
 };
 
 // src/context/DialogManagerContext.tsx
-var DialogManagerProviderContext = import_react10.default.createContext(void 0);
+var DialogManagerProviderContext = import_react9.default.createContext(void 0);
 var useDialogManager = () => {
-  const value = (0, import_react10.useContext)(DialogManagerProviderContext);
+  const value = (0, import_react9.useContext)(DialogManagerProviderContext);
   return value;
 };
 
 // src/context/MessageContext.tsx
-var import_react11 = __toESM(require("react"));
-var MessageContext = import_react11.default.createContext(
+var import_react10 = __toESM(require("react"));
+var MessageContext = import_react10.default.createContext(
   void 0
 );
 var useMessageContext = (_componentName) => {
-  const contextValue = (0, import_react11.useContext)(MessageContext);
+  const contextValue = (0, import_react10.useContext)(MessageContext);
   if (!contextValue) {
     return {};
   }
   return contextValue;
 };
 
-// src/constants/limits.ts
-var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
-var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
-var DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024;
-
 // src/context/TranslationContext.tsx
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_dayjs2 = __toESM(require("dayjs"));
 var import_calendar = __toESM(require("dayjs/plugin/calendar"));
 var import_localizedFormat = __toESM(require("dayjs/plugin/localizedFormat"));
@@ -531,13 +512,13 @@ var defaultDateTimeParser = (input) => (0, import_dayjs.default)(input);
 // src/context/TranslationContext.tsx
 import_dayjs2.default.extend(import_calendar.default);
 import_dayjs2.default.extend(import_localizedFormat.default);
-var TranslationContext = import_react12.default.createContext({
+var TranslationContext = import_react11.default.createContext({
   t: defaultTranslatorFunction,
   tDateTimeParser: defaultDateTimeParser,
   userLanguage: "en"
 });
 var useTranslationContext = (componentName) => {
-  const contextValue = (0, import_react12.useContext)(TranslationContext);
+  const contextValue = (0, import_react11.useContext)(TranslationContext);
   if (!contextValue) {
     console.warn(
       `The useTranslationContext hook was called outside of the TranslationContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`
@@ -547,408 +528,597 @@ var useTranslationContext = (componentName) => {
   return contextValue;
 };
 
-// node_modules/unist-util-is/lib/index.js
-var convert = (
-  // Note: overloads in JSDoc can’t yet use different `@template`s.
-  /**
-   * @type {(
-   *   (<Condition extends string>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & {type: Condition}) &
-   *   (<Condition extends Props>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Condition) &
-   *   (<Condition extends TestFunction>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Predicate<Condition, Node>) &
-   *   ((test?: null | undefined) => (node?: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node) &
-   *   ((test?: Test) => Check)
-   * )}
-   */
-  /**
-   * @param {Test} [test]
-   * @returns {Check}
-   */
-  function(test) {
-    if (test === null || test === void 0) {
-      return ok;
-    }
-    if (typeof test === "function") {
-      return castFactory(test);
-    }
-    if (typeof test === "object") {
-      return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
-    }
-    if (typeof test === "string") {
-      return typeFactory(test);
-    }
-    throw new Error("Expected function, string, or object as test");
-  }
-);
-function anyFactory(tests) {
-  const checks2 = [];
-  let index3 = -1;
-  while (++index3 < tests.length) {
-    checks2[index3] = convert(tests[index3]);
-  }
-  return castFactory(any);
-  function any(...parameters) {
-    let index4 = -1;
-    while (++index4 < checks2.length) {
-      if (checks2[index4].apply(this, parameters)) return true;
+// src/components/MessageInput/hooks/useMessageComposer.ts
+var import_react34 = require("react");
+var import_stream_chat = require("stream-chat");
+
+// src/components/Threads/ThreadContext.tsx
+var import_react12 = __toESM(require("react"));
+var ThreadContext = (0, import_react12.createContext)(void 0);
+var useThreadContext = () => (0, import_react12.useContext)(ThreadContext);
+
+// src/components/Avatar/Avatar.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_react14 = __toESM(require("react"));
+
+// src/components/Threads/icons.tsx
+var import_react13 = __toESM(require("react"));
+var Icon = {
+  MessageBubble: (props) => /* @__PURE__ */ import_react13.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--message-bubble",
+      fill: "none",
+      height: "14",
+      viewBox: "0 0 14 14",
+      width: "14",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react13.default.createElement(
+      "path",
+      {
+        d: "M1.66659 1.66665H12.3333V9.66665H2.44659L1.66659 10.4466V1.66665ZM1.66659 0.333313C0.933252 0.333313 0.339919 0.933313 0.339919 1.66665L0.333252 13.6666L2.99992 11H12.3333C13.0666 11 13.6666 10.4 13.6666 9.66665V1.66665C13.6666 0.933313 13.0666 0.333313 12.3333 0.333313H1.66659ZM2.99992 6.99998H10.9999V8.33331H2.99992V6.99998ZM2.99992 4.99998H10.9999V6.33331H2.99992V4.99998ZM2.99992 2.99998H10.9999V4.33331H2.99992V2.99998Z",
+        fill: "currentColor"
+      }
+    )
+  ),
+  MessageBubbleEmpty: (props) => /* @__PURE__ */ import_react13.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--message-bubble-empty",
+      fill: "none",
+      height: "20",
+      viewBox: "0 0 20 20",
+      width: "20",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react13.default.createElement(
+      "path",
+      {
+        d: "M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z",
+        fill: "currentColor"
+      }
+    )
+  ),
+  Reload: (props) => /* @__PURE__ */ import_react13.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--reload",
+      fill: "none",
+      height: "22",
+      viewBox: "0 0 16 22",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react13.default.createElement(
+      "path",
+      {
+        d: "M8 3V0L4 4L8 8V5C11.31 5 14 7.69 14 11C14 12.01 13.75 12.97 13.3 13.8L14.76 15.26C15.54 14.03 16 12.57 16 11C16 6.58 12.42 3 8 3ZM8 17C4.69 17 2 14.31 2 11C2 9.99 2.25 9.03 2.7 8.2L1.24 6.74C0.46 7.97 0 9.43 0 11C0 15.42 3.58 19 8 19V22L12 18L8 14V17Z",
+        fill: "currentColor"
+      }
+    )
+  ),
+  User: (props) => /* @__PURE__ */ import_react13.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--user",
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react13.default.createElement(
+      "path",
+      {
+        d: "M8 2C9.1 2 10 2.9 10 4C10 5.1 9.1 6 8 6C6.9 6 6 5.1 6 4C6 2.9 6.9 2 8 2ZM8 12C10.7 12 13.8 13.29 14 14H2C2.23 13.28 5.31 12 8 12ZM8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z",
+        fill: "currentColor"
+      }
+    )
+  )
+};
+
+// src/utils/getWholeChar.ts
+var getWholeChar = (str, i) => {
+  const code2 = str.charCodeAt(i);
+  if (Number.isNaN(code2)) return "";
+  if (code2 < 55296 || code2 > 57343) return str.charAt(i);
+  if (55296 <= code2 && code2 <= 56319) {
+    if (str.length <= i + 1) {
+      throw "High surrogate without following low surrogate";
     }
-    return false;
-  }
-}
-function propsFactory(check) {
-  const checkAsRecord = (
-    /** @type {Record<string, unknown>} */
-    check
-  );
-  return castFactory(all2);
-  function all2(node2) {
-    const nodeAsRecord = (
-      /** @type {Record<string, unknown>} */
-      /** @type {unknown} */
-      node2
-    );
-    let key;
-    for (key in check) {
-      if (nodeAsRecord[key] !== checkAsRecord[key]) return false;
+    const next = str.charCodeAt(i + 1);
+    if (56320 > next || next > 57343) {
+      throw "High surrogate without following low surrogate";
     }
-    return true;
+    return str.charAt(i) + str.charAt(i + 1);
   }
-}
-function typeFactory(check) {
-  return castFactory(type);
-  function type(node2) {
-    return node2 && node2.type === check;
+  if (i === 0) {
+    throw "Low surrogate without preceding high surrogate";
   }
-}
-function castFactory(testFunction) {
-  return check;
-  function check(value, index3, parent) {
-    return Boolean(
-      looksLikeANode(value) && testFunction.call(
-        this,
-        value,
-        typeof index3 === "number" ? index3 : void 0,
-        parent || void 0
-      )
-    );
+  const prev = str.charCodeAt(i - 1);
+  if (55296 > prev || prev > 56319) {
+    throw "Low surrogate without preceding high surrogate";
   }
-}
-function ok() {
-  return true;
-}
-function looksLikeANode(value) {
-  return value !== null && typeof value === "object" && "type" in value;
-}
-
-// node_modules/unist-util-visit-parents/lib/color.node.js
-function color(d) {
-  return "\x1B[33m" + d + "\x1B[39m";
-}
+  return "";
+};
 
-// node_modules/unist-util-visit-parents/lib/index.js
-var empty = [];
-var CONTINUE = true;
-var EXIT = false;
-var SKIP = "skip";
-function visitParents(tree, test, visitor, reverse) {
-  let check;
-  if (typeof test === "function" && typeof visitor !== "function") {
-    reverse = visitor;
-    visitor = test;
-  } else {
-    check = test;
-  }
-  const is2 = convert(check);
-  const step = reverse ? -1 : 1;
-  factory(tree, void 0, [])();
-  function factory(node2, index3, parents) {
-    const value = (
-      /** @type {Record<string, unknown>} */
-      node2 && typeof node2 === "object" ? node2 : {}
-    );
-    if (typeof value.type === "string") {
-      const name2 = (
-        // `hast`
-        typeof value.tagName === "string" ? value.tagName : (
-          // `xast`
-          typeof value.name === "string" ? value.name : void 0
-        )
-      );
-      Object.defineProperty(visit2, "name", {
-        value: "node (" + color(node2.type + (name2 ? "<" + name2 + ">" : "")) + ")"
-      });
-    }
-    return visit2;
-    function visit2() {
-      let result = empty;
-      let subresult;
-      let offset;
-      let grandparents;
-      if (!test || is2(node2, index3, parents[parents.length - 1] || void 0)) {
-        result = toResult(visitor(node2, parents));
-        if (result[0] === EXIT) {
-          return result;
-        }
-      }
-      if ("children" in node2 && node2.children) {
-        const nodeAsParent = (
-          /** @type {UnistParent} */
-          node2
-        );
-        if (nodeAsParent.children && result[0] !== SKIP) {
-          offset = (reverse ? nodeAsParent.children.length : -1) + step;
-          grandparents = parents.concat(nodeAsParent);
-          while (offset > -1 && offset < nodeAsParent.children.length) {
-            const child = nodeAsParent.children[offset];
-            subresult = factory(child, offset, grandparents)();
-            if (subresult[0] === EXIT) {
-              return subresult;
-            }
-            offset = typeof subresult[1] === "number" ? subresult[1] : offset + step;
-          }
-        }
+// src/components/Avatar/Avatar.tsx
+var Avatar = (props) => {
+  const {
+    className,
+    image: image2,
+    name: name2,
+    onClick = () => void 0,
+    onMouseOver = () => void 0
+  } = props;
+  const [error, setError] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
+    setError(false);
+  }, [image2]);
+  const nameStr = name2?.toString() || "";
+  const initials = getWholeChar(nameStr, 0);
+  const showImage = image2 && !error;
+  return /* @__PURE__ */ import_react14.default.createElement(
+    "div",
+    {
+      className: (0, import_clsx.default)(`str-chat__avatar str-chat__message-sender-avatar`, className, {
+        ["str-chat__avatar--multiple-letters"]: initials.length > 1,
+        ["str-chat__avatar--no-letters"]: !initials.length,
+        ["str-chat__avatar--one-letter"]: initials.length === 1
+      }),
+      "data-testid": "avatar",
+      onClick,
+      onMouseOver,
+      role: "button",
+      title: name2
+    },
+    showImage ? /* @__PURE__ */ import_react14.default.createElement(
+      "img",
+      {
+        alt: initials,
+        className: "str-chat__avatar-image",
+        "data-testid": "avatar-img",
+        onError: () => setError(true),
+        src: image2
       }
-      return result;
-    }
-  }
-}
-function toResult(value) {
-  if (Array.isArray(value)) {
-    return value;
-  }
-  if (typeof value === "number") {
-    return [CONTINUE, value];
-  }
-  return value === null || value === void 0 ? empty : [value];
-}
-
-// node_modules/unist-util-visit/lib/index.js
-function visit(tree, testOrVisitor, visitorOrReverse, maybeReverse) {
-  let reverse;
-  let test;
-  let visitor;
-  if (typeof testOrVisitor === "function" && typeof visitorOrReverse !== "function") {
-    test = void 0;
-    visitor = testOrVisitor;
-    reverse = visitorOrReverse;
-  } else {
-    test = testOrVisitor;
-    visitor = visitorOrReverse;
-    reverse = maybeReverse;
-  }
-  visitParents(tree, test, overload, reverse);
-  function overload(node2, parents) {
-    const parent = parents[parents.length - 1];
-    const index3 = parent ? parent.children.indexOf(node2) : void 0;
-    return visitor(node2, index3, parent);
-  }
-}
+    ) : /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, !!initials.length && /* @__PURE__ */ import_react14.default.createElement(
+      "div",
+      {
+        className: (0, import_clsx.default)("str-chat__avatar-fallback"),
+        "data-testid": "avatar-fallback"
+      },
+      initials
+    ), !initials.length && /* @__PURE__ */ import_react14.default.createElement(Icon.User, null))
+  );
+};
 
-// node_modules/devlop/lib/default.js
-function ok2() {
-}
-function unreachable() {
-}
+// src/components/ChannelPreview/ChannelPreview.tsx
+var import_lodash = __toESM(require("lodash.throttle"));
+var import_react23 = __toESM(require("react"));
 
-// node_modules/comma-separated-tokens/index.js
-function stringify(values, options) {
-  const settings = options || {};
-  const input = values[values.length - 1] === "" ? [...values, ""] : values;
-  return input.join(
-    (settings.padRight ? " " : "") + "," + (settings.padLeft === false ? "" : " ")
-  ).trim();
-}
+// src/components/ChannelPreview/ChannelPreviewMessenger.tsx
+var import_react18 = __toESM(require("react"));
+var import_clsx3 = __toESM(require("clsx"));
 
-// node_modules/estree-util-is-identifier-name/lib/index.js
-var nameRe = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
-var nameReJsx = /^[$_\p{ID_Start}][-$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
-var emptyOptions = {};
-function name(name2, options) {
-  const settings = options || emptyOptions;
-  const re2 = settings.jsx ? nameReJsx : nameRe;
-  return re2.test(name2);
-}
+// src/components/ChannelPreview/ChannelPreviewActionButtons.tsx
+var import_react17 = __toESM(require("react"));
+var import_clsx2 = __toESM(require("clsx"));
 
-// node_modules/hast-util-whitespace/lib/index.js
-var re = /[ \t\n\f\r]/g;
-function whitespace(thing) {
-  return typeof thing === "object" ? thing.type === "text" ? empty2(thing.value) : false : empty2(thing);
-}
-function empty2(value) {
-  return value.replace(re, "") === "";
-}
+// src/constants/limits.ts
+var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
+var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
+var DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024;
 
-// node_modules/property-information/lib/util/schema.js
-var Schema = class {
-  /**
-   * @constructor
-   * @param {Properties} property
-   * @param {Normal} normal
-   * @param {string} [space]
-   */
-  constructor(property, normal, space2) {
-    this.property = property;
-    this.normal = normal;
-    if (space2) {
-      this.space = space2;
-    }
-  }
+// src/components/ChannelList/hooks/useSelectedChannelState.ts
+var import_react15 = require("react");
+var import_shim2 = require("use-sync-external-store/shim");
+var noop2 = () => {
 };
-Schema.prototype.property = {};
-Schema.prototype.normal = {};
-Schema.prototype.space = null;
-
-// node_modules/property-information/lib/util/merge.js
-function merge(definitions, space2) {
-  const property = {};
-  const normal = {};
-  let index3 = -1;
-  while (++index3 < definitions.length) {
-    Object.assign(property, definitions[index3].property);
-    Object.assign(normal, definitions[index3].normal);
-  }
-  return new Schema(property, normal, space2);
+function useSelectedChannelState({
+  channel,
+  selector: selector2,
+  stateChangeEventKeys = ["all"]
+}) {
+  const subscribe = (0, import_react15.useCallback)(
+    (onStoreChange) => {
+      if (!channel) return noop2;
+      const subscriptions = stateChangeEventKeys.map(
+        (et) => channel.on(et, () => {
+          onStoreChange(selector2(channel));
+        })
+      );
+      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+    },
+    [channel, selector2, stateChangeEventKeys]
+  );
+  const getSnapshot = (0, import_react15.useCallback)(() => {
+    if (!channel) return void 0;
+    return selector2(channel);
+  }, [channel, selector2]);
+  return (0, import_shim2.useSyncExternalStore)(subscribe, getSnapshot);
 }
 
-// node_modules/property-information/lib/normalize.js
-function normalize(value) {
-  return value.toLowerCase();
+// src/components/ChannelList/hooks/useChannelMembershipState.ts
+var selector = (c) => c.state.membership;
+var keys = ["member.updated"];
+function useChannelMembershipState(channel) {
+  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
 }
 
-// node_modules/property-information/lib/util/info.js
-var Info = class {
-  /**
-   * @constructor
-   * @param {string} property
-   * @param {string} attribute
-   */
-  constructor(property, attribute) {
-    this.property = property;
-    this.attribute = attribute;
-  }
-};
-Info.prototype.space = null;
-Info.prototype.boolean = false;
-Info.prototype.booleanish = false;
-Info.prototype.overloadedBoolean = false;
-Info.prototype.number = false;
-Info.prototype.commaSeparated = false;
-Info.prototype.spaceSeparated = false;
-Info.prototype.commaOrSpaceSeparated = false;
-Info.prototype.mustUseProperty = false;
-Info.prototype.defined = false;
-
-// node_modules/property-information/lib/util/types.js
-var types_exports = {};
-__export(types_exports, {
-  boolean: () => boolean,
-  booleanish: () => booleanish,
-  commaOrSpaceSeparated: () => commaOrSpaceSeparated,
-  commaSeparated: () => commaSeparated,
-  number: () => number,
-  overloadedBoolean: () => overloadedBoolean,
-  spaceSeparated: () => spaceSeparated
-});
-var powers = 0;
-var boolean = increment();
-var booleanish = increment();
-var overloadedBoolean = increment();
-var number = increment();
-var spaceSeparated = increment();
-var commaSeparated = increment();
-var commaOrSpaceSeparated = increment();
-function increment() {
-  return 2 ** ++powers;
+// src/components/ChannelPreview/icons.tsx
+var import_react16 = __toESM(require("react"));
+var Icon2 = {
+  ArchiveBox: (props) => /* @__PURE__ */ import_react16.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--archive-box",
+      fill: "currentColor",
+      viewBox: "0 0 512 512",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react16.default.createElement("path", { d: "M32 32l448 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96L0 64C0 46.3 14.3 32 32 32zm0 128l448 0 0 256c0 35.3-28.7 64-64 64L96 480c-35.3 0-64-28.7-64-64l0-256zm128 80c0 8.8 7.2 16 16 16l160 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-160 0c-8.8 0-16 7.2-16 16z" })
+  ),
+  Pin: (props) => /* @__PURE__ */ import_react16.default.createElement(
+    "svg",
+    {
+      className: "str-chat__icon str-chat__icon--pin",
+      fill: "currentColor",
+      viewBox: "0 0 384 512",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ import_react16.default.createElement("path", { d: "M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z" })
+  )
+};
+
+// src/components/ChannelPreview/ChannelPreviewActionButtons.tsx
+function ChannelPreviewActionButtons({
+  channel
+}) {
+  const membership = useChannelMembershipState(channel);
+  const { t } = useTranslationContext();
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "str-chat__channel-preview__action-buttons" }, /* @__PURE__ */ import_react17.default.createElement(
+    "button",
+    {
+      "aria-label": membership.pinned_at ? t("Unpin") : t("Pin"),
+      className: (0, import_clsx2.default)(
+        "str-chat__channel-preview__action-button",
+        "str-chat__channel-preview__action-button--pin",
+        membership.pinned_at && "str-chat__channel-preview__action-button--active"
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (membership.pinned_at) {
+          channel.unpin();
+        } else {
+          channel.pin();
+        }
+      },
+      title: membership.pinned_at ? t("Unpin") : t("Pin")
+    },
+    /* @__PURE__ */ import_react17.default.createElement(Icon2.Pin, null)
+  ), /* @__PURE__ */ import_react17.default.createElement(
+    "button",
+    {
+      "aria-label": membership.archived_at ? t("Unarchive") : t("Archive"),
+      className: (0, import_clsx2.default)(
+        "str-chat__channel-preview__action-button",
+        "str-chat__channel-preview__action-button--archive",
+        membership.archived_at && "str-chat__channel-preview__action-button--active"
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (membership.archived_at) {
+          channel.unarchive();
+        } else {
+          channel.archive();
+        }
+      },
+      title: membership.archived_at ? t("Unarchive") : t("Archive")
+    },
+    /* @__PURE__ */ import_react17.default.createElement(Icon2.ArchiveBox, null)
+  ));
 }
 
-// node_modules/property-information/lib/util/defined-info.js
-var checks = Object.keys(types_exports);
-var DefinedInfo = class extends Info {
-  /**
-   * @constructor
-   * @param {string} property
-   * @param {string} attribute
-   * @param {number|null} [mask]
-   * @param {string} [space]
-   */
-  constructor(property, attribute, mask, space2) {
-    let index3 = -1;
-    super(property, attribute);
-    mark(this, "space", space2);
-    if (typeof mask === "number") {
-      while (++index3 < checks.length) {
-        const check = checks[index3];
-        mark(this, checks[index3], (mask & types_exports[check]) === types_exports[check]);
-      }
+// src/components/ChannelPreview/ChannelPreviewMessenger.tsx
+var UnMemoizedChannelPreviewMessenger = (props) => {
+  const {
+    active,
+    Avatar: Avatar2 = Avatar,
+    channel,
+    className: customClassName = "",
+    displayImage,
+    displayTitle,
+    groupChannelDisplayInfo,
+    latestMessagePreview,
+    onSelect: customOnSelectChannel,
+    setActiveChannel,
+    unread,
+    watchers
+  } = props;
+  const { ChannelPreviewActionButtons: ChannelPreviewActionButtons2 = ChannelPreviewActionButtons } = useComponentContext();
+  const channelPreviewButton = (0, import_react18.useRef)(null);
+  const avatarName = displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
+  const onSelectChannel = (e) => {
+    if (customOnSelectChannel) {
+      customOnSelectChannel(e);
+    } else if (setActiveChannel) {
+      setActiveChannel(channel, watchers);
     }
-  }
+    if (channelPreviewButton?.current) {
+      channelPreviewButton.current.blur();
+    }
+  };
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-container" }, /* @__PURE__ */ import_react18.default.createElement(ChannelPreviewActionButtons2, { channel }), /* @__PURE__ */ import_react18.default.createElement(
+    "button",
+    {
+      "aria-label": `Select Channel: ${displayTitle || ""}`,
+      "aria-selected": active,
+      className: (0, import_clsx3.default)(
+        `str-chat__channel-preview-messenger str-chat__channel-preview`,
+        active && "str-chat__channel-preview-messenger--active",
+        unread && unread >= 1 && "str-chat__channel-preview-messenger--unread",
+        customClassName
+      ),
+      "data-testid": "channel-preview-button",
+      onClick: onSelectChannel,
+      ref: channelPreviewButton,
+      role: "option"
+    },
+    /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-messenger--left" }, /* @__PURE__ */ import_react18.default.createElement(
+      Avatar2,
+      {
+        className: "str-chat__avatar--channel-preview",
+        groupChannelDisplayInfo,
+        image: displayImage,
+        name: avatarName
+      }
+    )),
+    /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-end" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-end-first-row" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-messenger--name" }, /* @__PURE__ */ import_react18.default.createElement("span", null, displayTitle)), !!unread && /* @__PURE__ */ import_react18.default.createElement(
+      "div",
+      {
+        className: "str-chat__channel-preview-unread-badge",
+        "data-testid": "unread-badge"
+      },
+      unread
+    )), /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-messenger--last-message" }, latestMessagePreview))
+  ));
 };
-DefinedInfo.prototype.defined = true;
-function mark(values, key, value) {
-  if (value) {
-    values[key] = value;
-  }
-}
+var ChannelPreviewMessenger = import_react18.default.memo(
+  UnMemoizedChannelPreviewMessenger
+);
 
-// node_modules/property-information/lib/util/create.js
-var own = {}.hasOwnProperty;
-function create(definition2) {
-  const property = {};
-  const normal = {};
-  let prop;
-  for (prop in definition2.properties) {
-    if (own.call(definition2.properties, prop)) {
-      const value = definition2.properties[prop];
-      const info = new DefinedInfo(
-        prop,
-        definition2.transform(definition2.attributes || {}, prop),
-        value,
-        definition2.space
-      );
-      if (definition2.mustUseProperty && definition2.mustUseProperty.includes(prop)) {
-        info.mustUseProperty = true;
-      }
-      property[prop] = info;
-      normal[normalize(prop)] = prop;
-      normal[normalize(info.attribute)] = prop;
-    }
-  }
-  return new Schema(property, normal, definition2.space);
-}
+// src/components/ChannelPreview/hooks/useIsChannelMuted.ts
+var import_react19 = require("react");
+var useIsChannelMuted = (channel) => {
+  const { client } = useChatContext("useIsChannelMuted");
+  const [muted, setMuted] = (0, import_react19.useState)(channel.muteStatus());
+  (0, import_react19.useEffect)(() => {
+    const handleEvent = () => setMuted(channel.muteStatus());
+    client.on("notification.channel_mutes_updated", handleEvent);
+    return () => client.off("notification.channel_mutes_updated", handleEvent);
+  }, [muted]);
+  return muted;
+};
 
-// node_modules/property-information/lib/xlink.js
-var xlink = create({
-  space: "xlink",
-  transform(_, prop) {
-    return "xlink:" + prop.slice(5).toLowerCase();
-  },
-  properties: {
-    xLinkActuate: null,
-    xLinkArcRole: null,
-    xLinkHref: null,
-    xLinkRole: null,
-    xLinkShow: null,
-    xLinkTitle: null,
-    xLinkType: null
-  }
-});
+// src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts
+var import_react21 = require("react");
 
-// node_modules/property-information/lib/xml.js
-var xml = create({
-  space: "xml",
-  transform(_, prop) {
-    return "xml:" + prop.slice(3).toLowerCase();
-  },
-  properties: { xmlLang: null, xmlBase: null, xmlSpace: null }
-});
+// src/components/ChannelPreview/utils.tsx
+var import_react20 = __toESM(require("react"));
 
-// node_modules/property-information/lib/util/case-sensitive-transform.js
-function caseSensitiveTransform(attributes, attribute) {
-  return attribute in attributes ? attributes[attribute] : attribute;
+// node_modules/devlop/lib/default.js
+function ok() {
+}
+function unreachable() {
 }
 
-// node_modules/property-information/lib/util/case-insensitive-transform.js
-function caseInsensitiveTransform(attributes, property) {
-  return caseSensitiveTransform(attributes, property.toLowerCase());
+// node_modules/comma-separated-tokens/index.js
+function stringify(values, options) {
+  const settings = options || {};
+  const input = values[values.length - 1] === "" ? [...values, ""] : values;
+  return input.join(
+    (settings.padRight ? " " : "") + "," + (settings.padLeft === false ? "" : " ")
+  ).trim();
+}
+
+// node_modules/estree-util-is-identifier-name/lib/index.js
+var nameRe = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
+var nameReJsx = /^[$_\p{ID_Start}][-$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
+var emptyOptions = {};
+function name(name2, options) {
+  const settings = options || emptyOptions;
+  const re2 = settings.jsx ? nameReJsx : nameRe;
+  return re2.test(name2);
+}
+
+// node_modules/hast-util-whitespace/lib/index.js
+var re = /[ \t\n\f\r]/g;
+function whitespace(thing) {
+  return typeof thing === "object" ? thing.type === "text" ? empty(thing.value) : false : empty(thing);
+}
+function empty(value) {
+  return value.replace(re, "") === "";
+}
+
+// node_modules/property-information/lib/util/schema.js
+var Schema = class {
+  /**
+   * @constructor
+   * @param {Properties} property
+   * @param {Normal} normal
+   * @param {string} [space]
+   */
+  constructor(property, normal, space2) {
+    this.property = property;
+    this.normal = normal;
+    if (space2) {
+      this.space = space2;
+    }
+  }
+};
+Schema.prototype.property = {};
+Schema.prototype.normal = {};
+Schema.prototype.space = null;
+
+// node_modules/property-information/lib/util/merge.js
+function merge(definitions, space2) {
+  const property = {};
+  const normal = {};
+  let index3 = -1;
+  while (++index3 < definitions.length) {
+    Object.assign(property, definitions[index3].property);
+    Object.assign(normal, definitions[index3].normal);
+  }
+  return new Schema(property, normal, space2);
+}
+
+// node_modules/property-information/lib/normalize.js
+function normalize(value) {
+  return value.toLowerCase();
+}
+
+// node_modules/property-information/lib/util/info.js
+var Info = class {
+  /**
+   * @constructor
+   * @param {string} property
+   * @param {string} attribute
+   */
+  constructor(property, attribute) {
+    this.property = property;
+    this.attribute = attribute;
+  }
+};
+Info.prototype.space = null;
+Info.prototype.boolean = false;
+Info.prototype.booleanish = false;
+Info.prototype.overloadedBoolean = false;
+Info.prototype.number = false;
+Info.prototype.commaSeparated = false;
+Info.prototype.spaceSeparated = false;
+Info.prototype.commaOrSpaceSeparated = false;
+Info.prototype.mustUseProperty = false;
+Info.prototype.defined = false;
+
+// node_modules/property-information/lib/util/types.js
+var types_exports = {};
+__export(types_exports, {
+  boolean: () => boolean,
+  booleanish: () => booleanish,
+  commaOrSpaceSeparated: () => commaOrSpaceSeparated,
+  commaSeparated: () => commaSeparated,
+  number: () => number,
+  overloadedBoolean: () => overloadedBoolean,
+  spaceSeparated: () => spaceSeparated
+});
+var powers = 0;
+var boolean = increment();
+var booleanish = increment();
+var overloadedBoolean = increment();
+var number = increment();
+var spaceSeparated = increment();
+var commaSeparated = increment();
+var commaOrSpaceSeparated = increment();
+function increment() {
+  return 2 ** ++powers;
+}
+
+// node_modules/property-information/lib/util/defined-info.js
+var checks = Object.keys(types_exports);
+var DefinedInfo = class extends Info {
+  /**
+   * @constructor
+   * @param {string} property
+   * @param {string} attribute
+   * @param {number|null} [mask]
+   * @param {string} [space]
+   */
+  constructor(property, attribute, mask, space2) {
+    let index3 = -1;
+    super(property, attribute);
+    mark(this, "space", space2);
+    if (typeof mask === "number") {
+      while (++index3 < checks.length) {
+        const check = checks[index3];
+        mark(this, checks[index3], (mask & types_exports[check]) === types_exports[check]);
+      }
+    }
+  }
+};
+DefinedInfo.prototype.defined = true;
+function mark(values, key, value) {
+  if (value) {
+    values[key] = value;
+  }
+}
+
+// node_modules/property-information/lib/util/create.js
+var own = {}.hasOwnProperty;
+function create(definition2) {
+  const property = {};
+  const normal = {};
+  let prop;
+  for (prop in definition2.properties) {
+    if (own.call(definition2.properties, prop)) {
+      const value = definition2.properties[prop];
+      const info = new DefinedInfo(
+        prop,
+        definition2.transform(definition2.attributes || {}, prop),
+        value,
+        definition2.space
+      );
+      if (definition2.mustUseProperty && definition2.mustUseProperty.includes(prop)) {
+        info.mustUseProperty = true;
+      }
+      property[prop] = info;
+      normal[normalize(prop)] = prop;
+      normal[normalize(info.attribute)] = prop;
+    }
+  }
+  return new Schema(property, normal, definition2.space);
+}
+
+// node_modules/property-information/lib/xlink.js
+var xlink = create({
+  space: "xlink",
+  transform(_, prop) {
+    return "xlink:" + prop.slice(5).toLowerCase();
+  },
+  properties: {
+    xLinkActuate: null,
+    xLinkArcRole: null,
+    xLinkHref: null,
+    xLinkRole: null,
+    xLinkShow: null,
+    xLinkTitle: null,
+    xLinkType: null
+  }
+});
+
+// node_modules/property-information/lib/xml.js
+var xml = create({
+  space: "xml",
+  transform(_, prop) {
+    return "xml:" + prop.slice(3).toLowerCase();
+  },
+  properties: { xmlLang: null, xmlBase: null, xmlSpace: null }
+});
+
+// node_modules/property-information/lib/util/case-sensitive-transform.js
+function caseSensitiveTransform(attributes, attribute) {
+  return attribute in attributes ? attributes[attribute] : attribute;
+}
+
+// node_modules/property-information/lib/util/case-insensitive-transform.js
+function caseInsensitiveTransform(attributes, property) {
+  return caseSensitiveTransform(attributes, property.toLowerCase());
 }
 
 // node_modules/property-information/lib/xmlns.js
@@ -2299,7 +2469,7 @@ function mdxExpression(state, node2) {
   if (node2.data && node2.data.estree && state.evaluater) {
     const program = node2.data.estree;
     const expression = program.body[0];
-    ok2(expression.type === "ExpressionStatement");
+    ok(expression.type === "ExpressionStatement");
     return (
       /** @type {Child | undefined} */
       state.evaluater.evaluateExpression(expression.expression)
@@ -2414,11 +2584,11 @@ function createJsxElementProps(state, node2) {
       if (attribute.data && attribute.data.estree && state.evaluater) {
         const program = attribute.data.estree;
         const expression = program.body[0];
-        ok2(expression.type === "ExpressionStatement");
+        ok(expression.type === "ExpressionStatement");
         const objectExpression = expression.expression;
-        ok2(objectExpression.type === "ObjectExpression");
+        ok(objectExpression.type === "ObjectExpression");
         const property = objectExpression.properties[0];
-        ok2(property.type === "SpreadElement");
+        ok(property.type === "SpreadElement");
         Object.assign(
           props,
           state.evaluater.evaluateExpression(property.argument)
@@ -2433,7 +2603,7 @@ function createJsxElementProps(state, node2) {
         if (attribute.value.data && attribute.value.data.estree && state.evaluater) {
           const program = attribute.value.data.estree;
           const expression = program.body[0];
-          ok2(expression.type === "ExpressionStatement");
+          ok(expression.type === "ExpressionStatement");
           value = state.evaluater.evaluateExpression(expression.expression);
         } else {
           crashEstree(state, node2.position);
@@ -2536,7 +2706,7 @@ function findComponentFromName(state, name2, allowExpression) {
         optional: false
       } : prop;
     }
-    ok2(node2, "always a result");
+    ok(node2, "always a result");
     result = node2;
   } else {
     result = name(name2) && !/^[a-z]/.test(name2) ? { type: "Identifier", name: name2 } : { type: "Literal", value: name2 };
@@ -10211,7 +10381,7 @@ var deserialize = (serialized) => deserializer(/* @__PURE__ */ new Map(), serial
 // node_modules/@ungap/structured-clone/esm/serialize.js
 var EMPTY = "";
 var { toString: toString2 } = {};
-var { keys } = Object;
+var { keys: keys2 } = Object;
 var typeOf = (value) => {
   const type = typeof value;
   if (type !== "object" || !value)
@@ -10300,7 +10470,7 @@ var serializer = (strict, json, $, _) => {
           return pair(value.toJSON());
         const entries = [];
         const index3 = as([TYPE, entries], value);
-        for (const key of keys(value)) {
+        for (const key of keys2(value)) {
           if (strict || !shouldSkip(typeOf(value[key])))
             entries.push([pair(key), pair(value[key])]);
         }
@@ -10457,52 +10627,248 @@ function footer(state) {
   };
 }
 
-// node_modules/mdast-util-to-hast/lib/state.js
-var own5 = {}.hasOwnProperty;
-var emptyOptions3 = {};
-function createState(tree, options) {
-  const settings = options || emptyOptions3;
-  const definitionById = /* @__PURE__ */ new Map();
-  const footnoteById = /* @__PURE__ */ new Map();
-  const footnoteCounts = /* @__PURE__ */ new Map();
-  const handlers2 = { ...handlers, ...settings.handlers };
-  const state = {
-    all: all2,
-    applyData,
-    definitionById,
-    footnoteById,
-    footnoteCounts,
-    footnoteOrder: [],
-    handlers: handlers2,
-    one: one3,
-    options: settings,
-    patch,
-    wrap
-  };
-  visit(tree, function(node2) {
-    if (node2.type === "definition" || node2.type === "footnoteDefinition") {
-      const map = node2.type === "definition" ? definitionById : footnoteById;
-      const id = String(node2.identifier).toUpperCase();
-      if (!map.has(id)) {
-        map.set(id, node2);
-      }
-    }
-  });
-  return state;
-  function one3(node2, parent) {
-    const type = node2.type;
-    const handle = state.handlers[type];
-    if (own5.call(state.handlers, type) && handle) {
-      return handle(state, node2, parent);
+// node_modules/unist-util-is/lib/index.js
+var convert = (
+  // Note: overloads in JSDoc can’t yet use different `@template`s.
+  /**
+   * @type {(
+   *   (<Condition extends string>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & {type: Condition}) &
+   *   (<Condition extends Props>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Condition) &
+   *   (<Condition extends TestFunction>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Predicate<Condition, Node>) &
+   *   ((test?: null | undefined) => (node?: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node) &
+   *   ((test?: Test) => Check)
+   * )}
+   */
+  /**
+   * @param {Test} [test]
+   * @returns {Check}
+   */
+  function(test) {
+    if (test === null || test === void 0) {
+      return ok2;
     }
-    if (state.options.passThrough && state.options.passThrough.includes(type)) {
-      if ("children" in node2) {
-        const { children, ...shallow } = node2;
-        const result = esm_default2(shallow);
-        result.children = state.all(node2);
-        return result;
-      }
-      return esm_default2(node2);
+    if (typeof test === "function") {
+      return castFactory(test);
+    }
+    if (typeof test === "object") {
+      return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
+    }
+    if (typeof test === "string") {
+      return typeFactory(test);
+    }
+    throw new Error("Expected function, string, or object as test");
+  }
+);
+function anyFactory(tests) {
+  const checks2 = [];
+  let index3 = -1;
+  while (++index3 < tests.length) {
+    checks2[index3] = convert(tests[index3]);
+  }
+  return castFactory(any);
+  function any(...parameters) {
+    let index4 = -1;
+    while (++index4 < checks2.length) {
+      if (checks2[index4].apply(this, parameters)) return true;
+    }
+    return false;
+  }
+}
+function propsFactory(check) {
+  const checkAsRecord = (
+    /** @type {Record<string, unknown>} */
+    check
+  );
+  return castFactory(all2);
+  function all2(node2) {
+    const nodeAsRecord = (
+      /** @type {Record<string, unknown>} */
+      /** @type {unknown} */
+      node2
+    );
+    let key;
+    for (key in check) {
+      if (nodeAsRecord[key] !== checkAsRecord[key]) return false;
+    }
+    return true;
+  }
+}
+function typeFactory(check) {
+  return castFactory(type);
+  function type(node2) {
+    return node2 && node2.type === check;
+  }
+}
+function castFactory(testFunction) {
+  return check;
+  function check(value, index3, parent) {
+    return Boolean(
+      looksLikeANode(value) && testFunction.call(
+        this,
+        value,
+        typeof index3 === "number" ? index3 : void 0,
+        parent || void 0
+      )
+    );
+  }
+}
+function ok2() {
+  return true;
+}
+function looksLikeANode(value) {
+  return value !== null && typeof value === "object" && "type" in value;
+}
+
+// node_modules/unist-util-visit-parents/lib/color.node.js
+function color(d) {
+  return "\x1B[33m" + d + "\x1B[39m";
+}
+
+// node_modules/unist-util-visit-parents/lib/index.js
+var empty2 = [];
+var CONTINUE = true;
+var EXIT = false;
+var SKIP = "skip";
+function visitParents(tree, test, visitor, reverse) {
+  let check;
+  if (typeof test === "function" && typeof visitor !== "function") {
+    reverse = visitor;
+    visitor = test;
+  } else {
+    check = test;
+  }
+  const is2 = convert(check);
+  const step = reverse ? -1 : 1;
+  factory(tree, void 0, [])();
+  function factory(node2, index3, parents) {
+    const value = (
+      /** @type {Record<string, unknown>} */
+      node2 && typeof node2 === "object" ? node2 : {}
+    );
+    if (typeof value.type === "string") {
+      const name2 = (
+        // `hast`
+        typeof value.tagName === "string" ? value.tagName : (
+          // `xast`
+          typeof value.name === "string" ? value.name : void 0
+        )
+      );
+      Object.defineProperty(visit2, "name", {
+        value: "node (" + color(node2.type + (name2 ? "<" + name2 + ">" : "")) + ")"
+      });
+    }
+    return visit2;
+    function visit2() {
+      let result = empty2;
+      let subresult;
+      let offset;
+      let grandparents;
+      if (!test || is2(node2, index3, parents[parents.length - 1] || void 0)) {
+        result = toResult(visitor(node2, parents));
+        if (result[0] === EXIT) {
+          return result;
+        }
+      }
+      if ("children" in node2 && node2.children) {
+        const nodeAsParent = (
+          /** @type {UnistParent} */
+          node2
+        );
+        if (nodeAsParent.children && result[0] !== SKIP) {
+          offset = (reverse ? nodeAsParent.children.length : -1) + step;
+          grandparents = parents.concat(nodeAsParent);
+          while (offset > -1 && offset < nodeAsParent.children.length) {
+            const child = nodeAsParent.children[offset];
+            subresult = factory(child, offset, grandparents)();
+            if (subresult[0] === EXIT) {
+              return subresult;
+            }
+            offset = typeof subresult[1] === "number" ? subresult[1] : offset + step;
+          }
+        }
+      }
+      return result;
+    }
+  }
+}
+function toResult(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (typeof value === "number") {
+    return [CONTINUE, value];
+  }
+  return value === null || value === void 0 ? empty2 : [value];
+}
+
+// node_modules/unist-util-visit/lib/index.js
+function visit(tree, testOrVisitor, visitorOrReverse, maybeReverse) {
+  let reverse;
+  let test;
+  let visitor;
+  if (typeof testOrVisitor === "function" && typeof visitorOrReverse !== "function") {
+    test = void 0;
+    visitor = testOrVisitor;
+    reverse = visitorOrReverse;
+  } else {
+    test = testOrVisitor;
+    visitor = visitorOrReverse;
+    reverse = maybeReverse;
+  }
+  visitParents(tree, test, overload, reverse);
+  function overload(node2, parents) {
+    const parent = parents[parents.length - 1];
+    const index3 = parent ? parent.children.indexOf(node2) : void 0;
+    return visitor(node2, index3, parent);
+  }
+}
+
+// node_modules/mdast-util-to-hast/lib/state.js
+var own5 = {}.hasOwnProperty;
+var emptyOptions3 = {};
+function createState(tree, options) {
+  const settings = options || emptyOptions3;
+  const definitionById = /* @__PURE__ */ new Map();
+  const footnoteById = /* @__PURE__ */ new Map();
+  const footnoteCounts = /* @__PURE__ */ new Map();
+  const handlers2 = { ...handlers, ...settings.handlers };
+  const state = {
+    all: all2,
+    applyData,
+    definitionById,
+    footnoteById,
+    footnoteCounts,
+    footnoteOrder: [],
+    handlers: handlers2,
+    one: one3,
+    options: settings,
+    patch,
+    wrap
+  };
+  visit(tree, function(node2) {
+    if (node2.type === "definition" || node2.type === "footnoteDefinition") {
+      const map = node2.type === "definition" ? definitionById : footnoteById;
+      const id = String(node2.identifier).toUpperCase();
+      if (!map.has(id)) {
+        map.set(id, node2);
+      }
+    }
+  });
+  return state;
+  function one3(node2, parent) {
+    const type = node2.type;
+    const handle = state.handlers[type];
+    if (own5.call(state.handlers, type) && handle) {
+      return handle(state, node2, parent);
+    }
+    if (state.options.passThrough && state.options.passThrough.includes(type)) {
+      if ("children" in node2) {
+        const { children, ...shallow } = node2;
+        const result = esm_default2(shallow);
+        result.children = state.all(node2);
+        return result;
+      }
+      return esm_default2(node2);
     }
     const unknown = state.options.unknownHandler || defaultUnknownHandler;
     return unknown(state, node2, parent);
@@ -10606,7 +10972,7 @@ function toHast(tree, options) {
   const foot = footer(state);
   const result = Array.isArray(node2) ? { type: "root", children: node2 } : node2 || { type: "root", children: [] };
   if (foot) {
-    ok2("children" in result);
+    ok("children" in result);
     result.children.push({ type: "text", value: "\n" }, foot);
   }
   return result;
@@ -11499,7 +11865,7 @@ var Processor = class _Processor extends CallableInstance {
         } else if (resolve) {
           resolve(file2);
         } else {
-          ok2(done, "`done` is defined if `resolve` is not");
+          ok(done, "`done` is defined if `resolve` is not");
           done(void 0, file2);
         }
       }
@@ -11544,7 +11910,7 @@ var Processor = class _Processor extends CallableInstance {
     assertCompiler("processSync", this.compiler || this.Compiler);
     this.process(file, realDone);
     assertDone("processSync", "process", complete);
-    ok2(result, "we either bailed on an error or have a tree");
+    ok(result, "we either bailed on an error or have a tree");
     return result;
     function realDone(error, file2) {
       complete = true;
@@ -11600,7 +11966,7 @@ var Processor = class _Processor extends CallableInstance {
     }
     return done ? executor(void 0, done) : new Promise(executor);
     function executor(resolve, reject) {
-      ok2(
+      ok(
         typeof file !== "function",
         "`file` can\u2019t be a `done` anymore, we checked"
       );
@@ -11616,7 +11982,7 @@ var Processor = class _Processor extends CallableInstance {
         } else if (resolve) {
           resolve(resultingTree);
         } else {
-          ok2(done, "`done` is defined if `resolve` is not");
+          ok(done, "`done` is defined if `resolve` is not");
           done(void 0, resultingTree, file2);
         }
       }
@@ -11644,7 +12010,7 @@ var Processor = class _Processor extends CallableInstance {
     let result;
     this.run(tree, file, realDone);
     assertDone("runSync", "run", complete);
-    ok2(result, "we either bailed on an error or have a tree");
+    ok(result, "we either bailed on an error or have a tree");
     return result;
     function realDone(error, tree2) {
       bail(error);
@@ -11980,445 +12346,51 @@ function Markdown(options) {
       }
       return index3;
     }
-    if (node2.type === "element") {
-      let key;
-      for (key in urlAttributes) {
-        if (Object.hasOwn(urlAttributes, key) && Object.hasOwn(node2.properties, key)) {
-          const value = node2.properties[key];
-          const test = urlAttributes[key];
-          if (test === null || test.includes(node2.tagName)) {
-            node2.properties[key] = urlTransform(String(value || ""), key, node2);
-          }
-        }
-      }
-    }
-    if (node2.type === "element") {
-      let remove = allowedElements ? !allowedElements.includes(node2.tagName) : disallowedElements ? disallowedElements.includes(node2.tagName) : false;
-      if (!remove && allowElement && typeof index3 === "number") {
-        remove = !allowElement(node2, index3, parent);
-      }
-      if (remove && parent && typeof index3 === "number") {
-        if (unwrapDisallowed && node2.children) {
-          parent.children.splice(index3, 1, ...node2.children);
-        } else {
-          parent.children.splice(index3, 1);
-        }
-        return index3;
-      }
-    }
-  }
-}
-function defaultUrlTransform(value) {
-  const colon = value.indexOf(":");
-  const questionMark = value.indexOf("?");
-  const numberSign = value.indexOf("#");
-  const slash = value.indexOf("/");
-  if (
-    // If there is no protocol, it’s relative.
-    colon === -1 || // If the first colon is after a `?`, `#`, or `/`, it’s not a protocol.
-    slash !== -1 && colon > slash || questionMark !== -1 && colon > questionMark || numberSign !== -1 && colon > numberSign || // It is a protocol, it should be allowed.
-    safeProtocol.test(value.slice(0, colon))
-  ) {
-    return value;
-  }
-  return "";
-}
-
-// src/components/Avatar/Avatar.tsx
-var import_clsx = __toESM(require("clsx"));
-var import_react14 = __toESM(require("react"));
-
-// src/components/Threads/icons.tsx
-var import_react13 = __toESM(require("react"));
-var Icon = {
-  MessageBubble: (props) => /* @__PURE__ */ import_react13.default.createElement(
-    "svg",
-    {
-      className: "str-chat__icon str-chat__icon--message-bubble",
-      fill: "none",
-      height: "14",
-      viewBox: "0 0 14 14",
-      width: "14",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ import_react13.default.createElement(
-      "path",
-      {
-        d: "M1.66659 1.66665H12.3333V9.66665H2.44659L1.66659 10.4466V1.66665ZM1.66659 0.333313C0.933252 0.333313 0.339919 0.933313 0.339919 1.66665L0.333252 13.6666L2.99992 11H12.3333C13.0666 11 13.6666 10.4 13.6666 9.66665V1.66665C13.6666 0.933313 13.0666 0.333313 12.3333 0.333313H1.66659ZM2.99992 6.99998H10.9999V8.33331H2.99992V6.99998ZM2.99992 4.99998H10.9999V6.33331H2.99992V4.99998ZM2.99992 2.99998H10.9999V4.33331H2.99992V2.99998Z",
-        fill: "currentColor"
-      }
-    )
-  ),
-  MessageBubbleEmpty: (props) => /* @__PURE__ */ import_react13.default.createElement(
-    "svg",
-    {
-      className: "str-chat__icon str-chat__icon--message-bubble-empty",
-      fill: "none",
-      height: "20",
-      viewBox: "0 0 20 20",
-      width: "20",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ import_react13.default.createElement(
-      "path",
-      {
-        d: "M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z",
-        fill: "currentColor"
-      }
-    )
-  ),
-  Reload: (props) => /* @__PURE__ */ import_react13.default.createElement(
-    "svg",
-    {
-      className: "str-chat__icon str-chat__icon--reload",
-      fill: "none",
-      height: "22",
-      viewBox: "0 0 16 22",
-      width: "16",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ import_react13.default.createElement(
-      "path",
-      {
-        d: "M8 3V0L4 4L8 8V5C11.31 5 14 7.69 14 11C14 12.01 13.75 12.97 13.3 13.8L14.76 15.26C15.54 14.03 16 12.57 16 11C16 6.58 12.42 3 8 3ZM8 17C4.69 17 2 14.31 2 11C2 9.99 2.25 9.03 2.7 8.2L1.24 6.74C0.46 7.97 0 9.43 0 11C0 15.42 3.58 19 8 19V22L12 18L8 14V17Z",
-        fill: "currentColor"
-      }
-    )
-  ),
-  User: (props) => /* @__PURE__ */ import_react13.default.createElement(
-    "svg",
-    {
-      className: "str-chat__icon str-chat__icon--user",
-      fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ import_react13.default.createElement(
-      "path",
-      {
-        d: "M8 2C9.1 2 10 2.9 10 4C10 5.1 9.1 6 8 6C6.9 6 6 5.1 6 4C6 2.9 6.9 2 8 2ZM8 12C10.7 12 13.8 13.29 14 14H2C2.23 13.28 5.31 12 8 12ZM8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z",
-        fill: "currentColor"
-      }
-    )
-  )
-};
-
-// src/utils/getWholeChar.ts
-var getWholeChar = (str, i) => {
-  const code2 = str.charCodeAt(i);
-  if (Number.isNaN(code2)) return "";
-  if (code2 < 55296 || code2 > 57343) return str.charAt(i);
-  if (55296 <= code2 && code2 <= 56319) {
-    if (str.length <= i + 1) {
-      throw "High surrogate without following low surrogate";
-    }
-    const next = str.charCodeAt(i + 1);
-    if (56320 > next || next > 57343) {
-      throw "High surrogate without following low surrogate";
-    }
-    return str.charAt(i) + str.charAt(i + 1);
-  }
-  if (i === 0) {
-    throw "Low surrogate without preceding high surrogate";
-  }
-  const prev = str.charCodeAt(i - 1);
-  if (55296 > prev || prev > 56319) {
-    throw "Low surrogate without preceding high surrogate";
-  }
-  return "";
-};
-
-// src/components/Avatar/Avatar.tsx
-var Avatar = (props) => {
-  const {
-    className,
-    image: image2,
-    name: name2,
-    onClick = () => void 0,
-    onMouseOver = () => void 0
-  } = props;
-  const [error, setError] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
-    setError(false);
-  }, [image2]);
-  const nameStr = name2?.toString() || "";
-  const initials = getWholeChar(nameStr, 0);
-  const showImage = image2 && !error;
-  return /* @__PURE__ */ import_react14.default.createElement(
-    "div",
-    {
-      className: (0, import_clsx.default)(`str-chat__avatar str-chat__message-sender-avatar`, className, {
-        ["str-chat__avatar--multiple-letters"]: initials.length > 1,
-        ["str-chat__avatar--no-letters"]: !initials.length,
-        ["str-chat__avatar--one-letter"]: initials.length === 1
-      }),
-      "data-testid": "avatar",
-      onClick,
-      onMouseOver,
-      role: "button",
-      title: name2
-    },
-    showImage ? /* @__PURE__ */ import_react14.default.createElement(
-      "img",
-      {
-        alt: initials,
-        className: "str-chat__avatar-image",
-        "data-testid": "avatar-img",
-        onError: () => setError(true),
-        src: image2
-      }
-    ) : /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, !!initials.length && /* @__PURE__ */ import_react14.default.createElement(
-      "div",
-      {
-        className: (0, import_clsx.default)("str-chat__avatar-fallback"),
-        "data-testid": "avatar-fallback"
-      },
-      initials
-    ), !initials.length && /* @__PURE__ */ import_react14.default.createElement(Icon.User, null))
-  );
-};
-
-// src/components/Message/utils.tsx
-var import_react_fast_compare = __toESM(require("react-fast-compare"));
-var import_emoji_regex = __toESM(require("emoji-regex"));
-var isUserMuted = (message, mutes) => {
-  if (!mutes || !message) return false;
-  const userMuted = mutes.filter((el) => el.target.id === message.user?.id);
-  return !!userMuted.length;
-};
-var MESSAGE_ACTIONS = {
-  delete: "delete",
-  edit: "edit",
-  flag: "flag",
-  markUnread: "markUnread",
-  mute: "mute",
-  pin: "pin",
-  quote: "quote",
-  react: "react",
-  reply: "reply"
-};
-var ACTIONS_NOT_WORKING_IN_THREAD = [
-  MESSAGE_ACTIONS.pin,
-  MESSAGE_ACTIONS.reply,
-  MESSAGE_ACTIONS.markUnread
-];
-
-// src/components/ChannelPreview/ChannelPreview.tsx
-var import_lodash = __toESM(require("lodash.throttle"));
-var import_react23 = __toESM(require("react"));
-
-// src/components/ChannelPreview/ChannelPreviewMessenger.tsx
-var import_react18 = __toESM(require("react"));
-var import_clsx3 = __toESM(require("clsx"));
-
-// src/components/ChannelPreview/ChannelPreviewActionButtons.tsx
-var import_react17 = __toESM(require("react"));
-var import_clsx2 = __toESM(require("clsx"));
-
-// src/components/ChannelList/hooks/useSelectedChannelState.ts
-var import_react15 = require("react");
-var import_shim2 = require("use-sync-external-store/shim");
-var noop2 = () => {
-};
-function useSelectedChannelState({
-  channel,
-  selector: selector2,
-  stateChangeEventKeys = ["all"]
-}) {
-  const subscribe = (0, import_react15.useCallback)(
-    (onStoreChange) => {
-      if (!channel) return noop2;
-      const subscriptions = stateChangeEventKeys.map(
-        (et) => channel.on(et, () => {
-          onStoreChange(selector2(channel));
-        })
-      );
-      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
-    },
-    [channel, selector2, stateChangeEventKeys]
-  );
-  const getSnapshot = (0, import_react15.useCallback)(() => {
-    if (!channel) return void 0;
-    return selector2(channel);
-  }, [channel, selector2]);
-  return (0, import_shim2.useSyncExternalStore)(subscribe, getSnapshot);
-}
-
-// src/components/ChannelList/hooks/useChannelMembershipState.ts
-var selector = (c) => c.state.membership;
-var keys2 = ["member.updated"];
-function useChannelMembershipState(channel) {
-  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys2 });
-}
-
-// src/components/ChannelPreview/icons.tsx
-var import_react16 = __toESM(require("react"));
-var Icon2 = {
-  ArchiveBox: (props) => /* @__PURE__ */ import_react16.default.createElement(
-    "svg",
-    {
-      className: "str-chat__icon str-chat__icon--archive-box",
-      fill: "currentColor",
-      viewBox: "0 0 512 512",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ import_react16.default.createElement("path", { d: "M32 32l448 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96L0 64C0 46.3 14.3 32 32 32zm0 128l448 0 0 256c0 35.3-28.7 64-64 64L96 480c-35.3 0-64-28.7-64-64l0-256zm128 80c0 8.8 7.2 16 16 16l160 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-160 0c-8.8 0-16 7.2-16 16z" })
-  ),
-  Pin: (props) => /* @__PURE__ */ import_react16.default.createElement(
-    "svg",
-    {
-      className: "str-chat__icon str-chat__icon--pin",
-      fill: "currentColor",
-      viewBox: "0 0 384 512",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ import_react16.default.createElement("path", { d: "M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z" })
-  )
-};
-
-// src/components/ChannelPreview/ChannelPreviewActionButtons.tsx
-function ChannelPreviewActionButtons({
-  channel
-}) {
-  const membership = useChannelMembershipState(channel);
-  const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "str-chat__channel-preview__action-buttons" }, /* @__PURE__ */ import_react17.default.createElement(
-    "button",
-    {
-      "aria-label": membership.pinned_at ? t("Unpin") : t("Pin"),
-      className: (0, import_clsx2.default)(
-        "str-chat__channel-preview__action-button",
-        "str-chat__channel-preview__action-button--pin",
-        membership.pinned_at && "str-chat__channel-preview__action-button--active"
-      ),
-      onClick: (e) => {
-        e.stopPropagation();
-        if (membership.pinned_at) {
-          channel.unpin();
-        } else {
-          channel.pin();
-        }
-      },
-      title: membership.pinned_at ? t("Unpin") : t("Pin")
-    },
-    /* @__PURE__ */ import_react17.default.createElement(Icon2.Pin, null)
-  ), /* @__PURE__ */ import_react17.default.createElement(
-    "button",
-    {
-      "aria-label": membership.archived_at ? t("Unarchive") : t("Archive"),
-      className: (0, import_clsx2.default)(
-        "str-chat__channel-preview__action-button",
-        "str-chat__channel-preview__action-button--archive",
-        membership.archived_at && "str-chat__channel-preview__action-button--active"
-      ),
-      onClick: (e) => {
-        e.stopPropagation();
-        if (membership.archived_at) {
-          channel.unarchive();
-        } else {
-          channel.archive();
-        }
-      },
-      title: membership.archived_at ? t("Unarchive") : t("Archive")
-    },
-    /* @__PURE__ */ import_react17.default.createElement(Icon2.ArchiveBox, null)
-  ));
-}
-
-// src/components/ChannelPreview/ChannelPreviewMessenger.tsx
-var UnMemoizedChannelPreviewMessenger = (props) => {
-  const {
-    active,
-    Avatar: Avatar2 = Avatar,
-    channel,
-    className: customClassName = "",
-    displayImage,
-    displayTitle,
-    groupChannelDisplayInfo,
-    latestMessagePreview,
-    onSelect: customOnSelectChannel,
-    setActiveChannel,
-    unread,
-    watchers
-  } = props;
-  const { ChannelPreviewActionButtons: ChannelPreviewActionButtons2 = ChannelPreviewActionButtons } = useComponentContext();
-  const channelPreviewButton = (0, import_react18.useRef)(null);
-  const avatarName = displayTitle || channel.state.messages[channel.state.messages.length - 1]?.user?.id;
-  const onSelectChannel = (e) => {
-    if (customOnSelectChannel) {
-      customOnSelectChannel(e);
-    } else if (setActiveChannel) {
-      setActiveChannel(channel, watchers);
-    }
-    if (channelPreviewButton?.current) {
-      channelPreviewButton.current.blur();
+    if (node2.type === "element") {
+      let key;
+      for (key in urlAttributes) {
+        if (Object.hasOwn(urlAttributes, key) && Object.hasOwn(node2.properties, key)) {
+          const value = node2.properties[key];
+          const test = urlAttributes[key];
+          if (test === null || test.includes(node2.tagName)) {
+            node2.properties[key] = urlTransform(String(value || ""), key, node2);
+          }
+        }
+      }
     }
-  };
-  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-container" }, /* @__PURE__ */ import_react18.default.createElement(ChannelPreviewActionButtons2, { channel }), /* @__PURE__ */ import_react18.default.createElement(
-    "button",
-    {
-      "aria-label": `Select Channel: ${displayTitle || ""}`,
-      "aria-selected": active,
-      className: (0, import_clsx3.default)(
-        `str-chat__channel-preview-messenger str-chat__channel-preview`,
-        active && "str-chat__channel-preview-messenger--active",
-        unread && unread >= 1 && "str-chat__channel-preview-messenger--unread",
-        customClassName
-      ),
-      "data-testid": "channel-preview-button",
-      onClick: onSelectChannel,
-      ref: channelPreviewButton,
-      role: "option"
-    },
-    /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-messenger--left" }, /* @__PURE__ */ import_react18.default.createElement(
-      Avatar2,
-      {
-        className: "str-chat__avatar--channel-preview",
-        groupChannelDisplayInfo,
-        image: displayImage,
-        name: avatarName
+    if (node2.type === "element") {
+      let remove = allowedElements ? !allowedElements.includes(node2.tagName) : disallowedElements ? disallowedElements.includes(node2.tagName) : false;
+      if (!remove && allowElement && typeof index3 === "number") {
+        remove = !allowElement(node2, index3, parent);
       }
-    )),
-    /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-end" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-end-first-row" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-messenger--name" }, /* @__PURE__ */ import_react18.default.createElement("span", null, displayTitle)), !!unread && /* @__PURE__ */ import_react18.default.createElement(
-      "div",
-      {
-        className: "str-chat__channel-preview-unread-badge",
-        "data-testid": "unread-badge"
-      },
-      unread
-    )), /* @__PURE__ */ import_react18.default.createElement("div", { className: "str-chat__channel-preview-messenger--last-message" }, latestMessagePreview))
-  ));
-};
-var ChannelPreviewMessenger = import_react18.default.memo(
-  UnMemoizedChannelPreviewMessenger
-);
-
-// src/components/ChannelPreview/hooks/useIsChannelMuted.ts
-var import_react19 = require("react");
-var useIsChannelMuted = (channel) => {
-  const { client } = useChatContext("useIsChannelMuted");
-  const [muted, setMuted] = (0, import_react19.useState)(channel.muteStatus());
-  (0, import_react19.useEffect)(() => {
-    const handleEvent = () => setMuted(channel.muteStatus());
-    client.on("notification.channel_mutes_updated", handleEvent);
-    return () => client.off("notification.channel_mutes_updated", handleEvent);
-  }, [muted]);
-  return muted;
-};
-
-// src/components/ChannelPreview/hooks/useChannelPreviewInfo.ts
-var import_react21 = require("react");
+      if (remove && parent && typeof index3 === "number") {
+        if (unwrapDisallowed && node2.children) {
+          parent.children.splice(index3, 1, ...node2.children);
+        } else {
+          parent.children.splice(index3, 1);
+        }
+        return index3;
+      }
+    }
+  }
+}
+function defaultUrlTransform(value) {
+  const colon = value.indexOf(":");
+  const questionMark = value.indexOf("?");
+  const numberSign = value.indexOf("#");
+  const slash = value.indexOf("/");
+  if (
+    // If there is no protocol, it’s relative.
+    colon === -1 || // If the first colon is after a `?`, `#`, or `/`, it’s not a protocol.
+    slash !== -1 && colon > slash || questionMark !== -1 && colon > questionMark || numberSign !== -1 && colon > numberSign || // It is a protocol, it should be allowed.
+    safeProtocol.test(value.slice(0, colon))
+  ) {
+    return value;
+  }
+  return "";
+}
 
 // src/components/ChannelPreview/utils.tsx
-var import_react20 = __toESM(require("react"));
 var renderPreviewText = (text5) => /* @__PURE__ */ import_react20.default.createElement(Markdown, { skipHtml: true }, text5);
 var getLatestPollVote = (latestVotesByOption) => {
   let latestVote;
@@ -12685,6 +12657,35 @@ var ChannelPreview = (props) => {
   );
 };
 
+// src/components/Thread/Thread.tsx
+var import_react33 = __toESM(require("react"));
+var import_clsx8 = __toESM(require("clsx"));
+
+// src/components/Message/utils.tsx
+var import_react_fast_compare = __toESM(require("react-fast-compare"));
+var import_emoji_regex = __toESM(require("emoji-regex"));
+var isUserMuted = (message, mutes) => {
+  if (!mutes || !message) return false;
+  const userMuted = mutes.filter((el) => el.target.id === message.user?.id);
+  return !!userMuted.length;
+};
+var MESSAGE_ACTIONS = {
+  delete: "delete",
+  edit: "edit",
+  flag: "flag",
+  markUnread: "markUnread",
+  mute: "mute",
+  pin: "pin",
+  quote: "quote",
+  react: "react",
+  reply: "reply"
+};
+var ACTIONS_NOT_WORKING_IN_THREAD = [
+  MESSAGE_ACTIONS.pin,
+  MESSAGE_ACTIONS.reply,
+  MESSAGE_ACTIONS.markUnread
+];
+
 // src/components/Message/hooks/useUserRole.ts
 var useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
   const { channel, channelCapabilities = {} } = useChannelStateContext("useUserRole");
@@ -12717,51 +12718,13 @@ var useUserRole = (message, onlySenderCanEdit, disableQuotedMessages) => {
   };
 };
 
-// src/components/Message/icons.tsx
-var import_react24 = __toESM(require("react"));
-var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react24.default.createElement(
-  "svg",
-  {
-    className,
-    height: "4",
-    viewBox: "0 0 11 4",
-    width: "11",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ import_react24.default.createElement(
-    "path",
-    {
-      d: "M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z",
-      fillRule: "nonzero"
-    }
-  )
-);
-var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react24.default.createElement(
-  "svg",
-  {
-    className,
-    height: "12",
-    viewBox: "0 0 12 12",
-    width: "12",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  /* @__PURE__ */ import_react24.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react24.default.createElement("path", { d: "M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" }), /* @__PURE__ */ import_react24.default.createElement("path", { d: "M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z" }))
-);
-var ThreadIcon = ({ className = "" }) => /* @__PURE__ */ import_react24.default.createElement("svg", { className, height: "10", width: "14", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react24.default.createElement(
-  "path",
-  {
-    d: "M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z",
-    fillRule: "evenodd"
-  }
-));
-
 // src/components/MessageActions/MessageActions.tsx
 var import_clsx5 = __toESM(require("clsx"));
 var import_react26 = __toESM(require("react"));
 
 // src/components/Dialog/DialogAnchor.tsx
 var import_clsx4 = __toESM(require("clsx"));
-var import_react25 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_focus = require("@react-aria/focus");
 var import_react_popper = require("react-popper");
 function useDialogAnchor({
@@ -12769,7 +12732,7 @@ function useDialogAnchor({
   placement,
   referenceElement
 }) {
-  const [popperElement, setPopperElement] = (0, import_react25.useState)(null);
+  const [popperElement, setPopperElement] = (0, import_react24.useState)(null);
   const { attributes, styles, update } = (0, import_react_popper.usePopper)(referenceElement, popperElement, {
     modifiers: [
       {
@@ -12784,7 +12747,7 @@ function useDialogAnchor({
     ],
     placement
   });
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (open && popperElement) {
       update?.();
     }
@@ -12805,6 +12768,7 @@ var DialogAnchor = ({
   id,
   placement = "auto",
   referenceElement = null,
+  tabIndex,
   trapFocus,
   ...restDivProps
 }) => {
@@ -12815,7 +12779,7 @@ var DialogAnchor = ({
     placement,
     referenceElement
   });
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!open) return;
     const hideOnEscape = (event) => {
       if (event.key !== "Escape") return;
@@ -12829,7 +12793,7 @@ var DialogAnchor = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ import_react25.default.createElement(DialogPortalEntry, { dialogId: id }, /* @__PURE__ */ import_react25.default.createElement(import_focus.FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true }, /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(DialogPortalEntry, { dialogId: id }, /* @__PURE__ */ import_react24.default.createElement(import_focus.FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true }, /* @__PURE__ */ import_react24.default.createElement(
     "div",
     {
       ...restDivProps,
@@ -12838,12 +12802,50 @@ var DialogAnchor = ({
       "data-testid": "str-chat__dialog-contents",
       ref: setPopperElement,
       style: styles.popper,
-      tabIndex: 0
+      tabIndex: typeof tabIndex !== "undefined" ? tabIndex : 0
     },
     children
   )));
 };
 
+// src/components/Message/icons.tsx
+var import_react25 = __toESM(require("react"));
+var ActionsIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default.createElement(
+  "svg",
+  {
+    className,
+    height: "4",
+    viewBox: "0 0 11 4",
+    width: "11",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  /* @__PURE__ */ import_react25.default.createElement(
+    "path",
+    {
+      d: "M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z",
+      fillRule: "nonzero"
+    }
+  )
+);
+var ReactionIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default.createElement(
+  "svg",
+  {
+    className,
+    height: "12",
+    viewBox: "0 0 12 12",
+    width: "12",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  /* @__PURE__ */ import_react25.default.createElement("g", { clipRule: "evenodd", fillRule: "evenodd" }, /* @__PURE__ */ import_react25.default.createElement("path", { d: "M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z" }), /* @__PURE__ */ import_react25.default.createElement("path", { d: "M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z" }))
+);
+var ThreadIcon = ({ className = "" }) => /* @__PURE__ */ import_react25.default.createElement("svg", { className, height: "10", width: "14", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react25.default.createElement(
+  "path",
+  {
+    d: "M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z",
+    fillRule: "evenodd"
+  }
+));
+
 // src/components/MessageActions/MessageActions.tsx
 var MessageActionsWrapper = (props) => {
   const { children, customWrapperClass, inline, toggleOpen } = props;
@@ -13258,18 +13260,87 @@ var InfiniteScrollPaginator = (props) => {
   );
 };
 
+// src/components/Thread/Thread.tsx
+var LegacyThreadContext = import_react33.default.createContext({ legacyThread: void 0 });
+var useLegacyThreadContext = () => (0, import_react33.useContext)(LegacyThreadContext);
+
+// src/components/MessageInput/hooks/useMessageComposer.ts
+var queueCache = new import_stream_chat.FixedSizeQueueCache(64);
+var useMessageComposer = () => {
+  const { client } = useChatContext();
+  const { channel } = useChannelStateContext();
+  const { editing, message: editedMessage } = useMessageContext();
+  const { legacyThread: parentMessage } = useLegacyThreadContext();
+  const threadInstance = useThreadContext();
+  const cachedEditedMessage = (0, import_react34.useMemo)(() => {
+    if (!editedMessage) return void 0;
+    return editedMessage;
+  }, [editedMessage?.id]);
+  const cachedParentMessage = (0, import_react34.useMemo)(() => {
+    if (!parentMessage) return void 0;
+    return parentMessage;
+  }, [parentMessage?.id]);
+  const messageComposer = (0, import_react34.useMemo)(() => {
+    if (editing && cachedEditedMessage) {
+      const tag = import_stream_chat.MessageComposer.constructTag(cachedEditedMessage);
+      const cachedComposer = queueCache.get(tag);
+      if (cachedComposer) return cachedComposer;
+      return new import_stream_chat.MessageComposer({
+        client,
+        composition: cachedEditedMessage,
+        compositionContext: cachedEditedMessage
+      });
+    } else if (threadInstance) {
+      return threadInstance.messageComposer;
+    } else if (cachedParentMessage) {
+      const compositionContext = {
+        ...cachedParentMessage,
+        legacyThreadId: cachedParentMessage.id
+      };
+      const tag = import_stream_chat.MessageComposer.constructTag(compositionContext);
+      const cachedComposer = queueCache.get(tag);
+      if (cachedComposer) return cachedComposer;
+      return new import_stream_chat.MessageComposer({
+        client,
+        compositionContext
+      });
+    } else {
+      return channel.messageComposer;
+    }
+  }, [
+    cachedEditedMessage,
+    cachedParentMessage,
+    channel,
+    client,
+    editing,
+    threadInstance
+  ]);
+  if (["legacy_thread", "message"].includes(
+    messageComposer.contextType
+  ) && !queueCache.peek(messageComposer.tag)) {
+    queueCache.add(messageComposer.tag, messageComposer);
+  }
+  (0, import_react34.useEffect)(() => {
+    const unsubscribe = messageComposer.registerSubscriptions();
+    return () => {
+      unsubscribe();
+    };
+  }, [messageComposer]);
+  return messageComposer;
+};
+
 // src/experimental/Search/hooks/useSearchQueriesInProgress.ts
-var import_react33 = require("react");
+var import_react35 = require("react");
 var searchControllerStateSelector = (value) => ({
   sources: value.sources
 });
 var useSearchQueriesInProgress = (searchController) => {
-  const [queriesInProgress, setQueriesInProgress] = (0, import_react33.useState)([]);
+  const [queriesInProgress, setQueriesInProgress] = (0, import_react35.useState)([]);
   const { sources } = useStateStore(
     searchController.state,
     searchControllerStateSelector
   );
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const subscriptions = sources.map(
       (source) => source.state.subscribeWithSelector(
         (value) => ({ isLoading: value.isLoading }),
@@ -13289,7 +13360,7 @@ var useSearchQueriesInProgress = (searchController) => {
 };
 
 // src/experimental/MessageActions/hooks/useBaseMessageActionSetFilter.ts
-var import_react34 = require("react");
+var import_react36 = require("react");
 var useBaseMessageActionSetFilter = (messageActionSet, disable2 = false) => {
   const { initialMessage: isInitialMessage, message } = useMessageContext();
   const {
@@ -13303,7 +13374,7 @@ var useBaseMessageActionSetFilter = (messageActionSet, disable2 = false) => {
     canReply
   } = useUserRole(message);
   const isMessageThreadReply = typeof message.parent_id === "string";
-  return (0, import_react34.useMemo)(() => {
+  return (0, import_react36.useMemo)(() => {
     if (disable2) return messageActionSet;
     if (isInitialMessage || // not sure whether this thing even works anymore
     !message.type || message.type === "error" || message.type === "system" || message.type === "ephemeral" || message.status === "failed" || message.status === "sending")
@@ -13334,8 +13405,8 @@ var useBaseMessageActionSetFilter = (messageActionSet, disable2 = false) => {
 };
 
 // src/experimental/MessageActions/hooks/useSplitMessageActionSet.ts
-var import_react35 = require("react");
-var useSplitMessageActionSet = (messageActionSet) => (0, import_react35.useMemo)(() => {
+var import_react37 = require("react");
+var useSplitMessageActionSet = (messageActionSet) => (0, import_react37.useMemo)(() => {
   const quickActionSet = [];
   const dropdownActionSet = [];
   for (const action of messageActionSet) {
@@ -13346,70 +13417,70 @@ var useSplitMessageActionSet = (messageActionSet) => (0, import_react35.useMemo)
 }, [messageActionSet]);
 
 // src/experimental/MessageActions/defaults.tsx
-var import_react36 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var DefaultDropdownActionButton = ({
   "aria-selected": ariaSelected = "false",
   children,
   className = "str-chat__message-actions-list-item-button",
   role = "option",
   ...rest
-}) => /* @__PURE__ */ import_react36.default.createElement("button", { "aria-selected": ariaSelected, className, role, ...rest }, children);
+}) => /* @__PURE__ */ import_react38.default.createElement("button", { "aria-selected": ariaSelected, className, role, ...rest }, children);
 var DefaultMessageActionComponents = {
   dropdown: {
     Quote() {
-      const { setQuotedMessage } = useChannelActionContext();
       const { message } = useMessageContext();
       const { t } = useTranslationContext();
+      const messageComposer = useMessageComposer();
       const handleQuote = () => {
-        setQuotedMessage(message);
+        messageComposer.setQuotedMessage(message);
         const elements = message.parent_id ? document.querySelectorAll(".str-chat__thread .str-chat__textarea__textarea") : document.getElementsByClassName("str-chat__textarea__textarea");
         const textarea = elements.item(0);
         if (textarea instanceof HTMLTextAreaElement) {
           textarea.focus();
         }
       };
-      return /* @__PURE__ */ import_react36.default.createElement(DefaultDropdownActionButton, { onClick: handleQuote }, t("Quote"));
+      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleQuote }, t("Quote"));
     },
     Pin() {
       const { handlePin, message } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react36.default.createElement(DefaultDropdownActionButton, { onClick: handlePin }, !message.pinned ? t("Pin") : t("Unpin"));
+      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handlePin }, !message.pinned ? t("Pin") : t("Unpin"));
     },
     MarkUnread() {
       const { handleMarkUnread } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react36.default.createElement(DefaultDropdownActionButton, { onClick: handleMarkUnread }, t("Mark as unread"));
+      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleMarkUnread }, t("Mark as unread"));
     },
     Flag() {
       const { handleFlag } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react36.default.createElement(DefaultDropdownActionButton, { onClick: handleFlag }, t("Flag"));
+      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleFlag }, t("Flag"));
     },
     Mute() {
       const { handleMute, message } = useMessageContext();
       const { mutes } = useChatContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react36.default.createElement(DefaultDropdownActionButton, { onClick: handleMute }, isUserMuted(message, mutes) ? t("Unmute") : t("Mute"));
+      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleMute }, isUserMuted(message, mutes) ? t("Unmute") : t("Mute"));
     },
     Edit() {
       const { handleEdit } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react36.default.createElement(DefaultDropdownActionButton, { onClick: handleEdit }, t("Edit Message"));
+      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleEdit }, t("Edit Message"));
     },
     Delete() {
       const { handleDelete } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react36.default.createElement(DefaultDropdownActionButton, { onClick: handleDelete }, t("Delete"));
+      return /* @__PURE__ */ import_react38.default.createElement(DefaultDropdownActionButton, { onClick: handleDelete }, t("Delete"));
     }
   },
   quick: {
     React() {
-      return /* @__PURE__ */ import_react36.default.createElement(ReactionSelectorWithButton, { ReactionIcon });
+      return /* @__PURE__ */ import_react38.default.createElement(ReactionSelectorWithButton, { ReactionIcon });
     },
     Reply() {
       const { handleOpenThread } = useMessageContext();
       const { t } = useTranslationContext();
-      return /* @__PURE__ */ import_react36.default.createElement(
+      return /* @__PURE__ */ import_react38.default.createElement(
         "button",
         {
           "aria-label": t("aria/Open Thread"),
@@ -13417,7 +13488,7 @@ var DefaultMessageActionComponents = {
           "data-testid": "thread-action",
           onClick: handleOpenThread
         },
-        /* @__PURE__ */ import_react36.default.createElement(ThreadIcon, { className: "str-chat__message-action-icon" })
+        /* @__PURE__ */ import_react38.default.createElement(ThreadIcon, { className: "str-chat__message-action-icon" })
       );
     }
   }
@@ -13479,7 +13550,7 @@ var MessageActions = ({
   const { theme } = useChatContext();
   const { isMyMessage, message } = useMessageContext();
   const { t } = useTranslationContext();
-  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react37.useState)(null);
+  const [actionsBoxButtonElement, setActionsBoxButtonElement] = (0, import_react39.useState)(null);
   const filteredMessageActionSet = useBaseMessageActionSetFilter(
     messageActionSet,
     disableBaseMessageActionSetFilter
@@ -13495,14 +13566,14 @@ var MessageActions = ({
   if (dropdownActionSet.length + quickActionSet.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     "div",
     {
-      className: (0, import_clsx8.default)(`str-chat__message-${theme}__actions str-chat__message-options`, {
+      className: (0, import_clsx9.default)(`str-chat__message-${theme}__actions str-chat__message-options`, {
         "str-chat__message-options--active": dropdownDialogIsOpen || reactionSelectorDialogIsOpen
       })
     },
-    dropdownActionSet.length > 0 && /* @__PURE__ */ import_react37.default.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle }, /* @__PURE__ */ import_react37.default.createElement(
+    dropdownActionSet.length > 0 && /* @__PURE__ */ import_react39.default.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle }, /* @__PURE__ */ import_react39.default.createElement(
       "button",
       {
         "aria-expanded": dropdownDialogIsOpen,
@@ -13512,30 +13583,31 @@ var MessageActions = ({
         "data-testid": "message-actions-toggle-button",
         ref: setActionsBoxButtonElement
       },
-      /* @__PURE__ */ import_react37.default.createElement(ActionsIcon, { className: "str-chat__message-action-icon" })
-    ), /* @__PURE__ */ import_react37.default.createElement(
+      /* @__PURE__ */ import_react39.default.createElement(ActionsIcon, { className: "str-chat__message-action-icon" })
+    ), /* @__PURE__ */ import_react39.default.createElement(
       DialogAnchor,
       {
         id: dropdownDialogId,
         placement: isMyMessage() ? "top-end" : "top-start",
         referenceElement: actionsBoxButtonElement,
+        tabIndex: -1,
         trapFocus: true
       },
-      /* @__PURE__ */ import_react37.default.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => /* @__PURE__ */ import_react37.default.createElement(DropdownActionComponent, { key: type })))
+      /* @__PURE__ */ import_react39.default.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => /* @__PURE__ */ import_react39.default.createElement(DropdownActionComponent, { key: type })))
     )),
-    quickActionSet.map(({ Component: QuickActionComponent, type }) => /* @__PURE__ */ import_react37.default.createElement(QuickActionComponent, { key: type }))
+    quickActionSet.map(({ Component: QuickActionComponent, type }) => /* @__PURE__ */ import_react39.default.createElement(QuickActionComponent, { key: type }))
   );
 };
 var DropdownBox = ({ children, open }) => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     "div",
     {
-      className: (0, import_clsx8.default)("str-chat__message-actions-box", {
+      className: (0, import_clsx9.default)("str-chat__message-actions-box", {
         "str-chat__message-actions-box--open": open
       })
     },
-    /* @__PURE__ */ import_react37.default.createElement(
+    /* @__PURE__ */ import_react39.default.createElement(
       "div",
       {
         "aria-label": t("aria/Message Options"),
@@ -13548,22 +13620,22 @@ var DropdownBox = ({ children, open }) => {
 };
 
 // src/experimental/Search/Search.tsx
-var import_clsx11 = __toESM(require("clsx"));
-var import_react50 = __toESM(require("react"));
+var import_clsx12 = __toESM(require("clsx"));
+var import_react52 = __toESM(require("react"));
 
 // src/experimental/Search/SearchBar/SearchBar.tsx
-var import_clsx9 = __toESM(require("clsx"));
-var import_react39 = __toESM(require("react"));
+var import_clsx10 = __toESM(require("clsx"));
+var import_react41 = __toESM(require("react"));
 
 // src/experimental/Search/SearchContext.tsx
-var import_react38 = __toESM(require("react"));
-var SearchContext = (0, import_react38.createContext)(void 0);
+var import_react40 = __toESM(require("react"));
+var SearchContext = (0, import_react40.createContext)(void 0);
 var SearchContextProvider = ({
   children,
   value
-}) => /* @__PURE__ */ import_react38.default.createElement(SearchContext.Provider, { value }, children);
+}) => /* @__PURE__ */ import_react40.default.createElement(SearchContext.Provider, { value }, children);
 var useSearchContext = () => {
-  const contextValue = (0, import_react38.useContext)(SearchContext);
+  const contextValue = (0, import_react40.useContext)(SearchContext);
   return contextValue;
 };
 
@@ -13576,12 +13648,12 @@ var SearchBar = () => {
   const { t } = useTranslationContext();
   const { disabled, exitSearchOnInputBlur, placeholder, searchController } = useSearchContext();
   const queriesInProgress = useSearchQueriesInProgress(searchController);
-  const [input, setInput] = (0, import_react39.useState)(null);
+  const [input, setInput] = (0, import_react41.useState)(null);
   const { isActive, searchQuery } = useStateStore(
     searchController.state,
     searchControllerStateSelector2
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!input) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -13594,15 +13666,15 @@ var SearchBar = () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [searchController, input]);
-  return /* @__PURE__ */ import_react39.default.createElement("div", { className: "str-chat__search-bar", "data-testid": "search-bar" }, /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement("div", { className: "str-chat__search-bar", "data-testid": "search-bar" }, /* @__PURE__ */ import_react41.default.createElement(
     "div",
     {
-      className: (0, import_clsx9.default)("str-chat__search-input--wrapper", {
+      className: (0, import_clsx10.default)("str-chat__search-input--wrapper", {
         "str-chat__search-input--wrapper-active": isActive
       })
     },
-    /* @__PURE__ */ import_react39.default.createElement("div", { className: "str-chat__search-input--icon" }),
-    /* @__PURE__ */ import_react39.default.createElement(
+    /* @__PURE__ */ import_react41.default.createElement("div", { className: "str-chat__search-input--icon" }),
+    /* @__PURE__ */ import_react41.default.createElement(
       "input",
       {
         className: "str-chat__search-input",
@@ -13625,7 +13697,7 @@ var SearchBar = () => {
         value: searchQuery
       }
     ),
-    searchQuery && /* @__PURE__ */ import_react39.default.createElement(
+    searchQuery && /* @__PURE__ */ import_react41.default.createElement(
       "button",
       {
         className: "str-chat__search-input--clear-button",
@@ -13636,12 +13708,12 @@ var SearchBar = () => {
           input?.focus();
         }
       },
-      /* @__PURE__ */ import_react39.default.createElement("div", { className: "str-chat__search-input--clear-button-icon" })
+      /* @__PURE__ */ import_react41.default.createElement("div", { className: "str-chat__search-input--clear-button-icon" })
     )
-  ), isActive ? /* @__PURE__ */ import_react39.default.createElement(
+  ), isActive ? /* @__PURE__ */ import_react41.default.createElement(
     "button",
     {
-      className: (0, import_clsx9.default)(
+      className: (0, import_clsx10.default)(
         "str-chat__search-bar-button str-chat__search-bar-button--exit-search"
       ),
       "data-testid": "search-bar-button",
@@ -13655,27 +13727,25 @@ var SearchBar = () => {
 };
 
 // src/experimental/Search/SearchResults/SearchResults.tsx
-var import_react49 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchSourceResults.tsx
-var import_react46 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchSourceResultList.tsx
-var import_react44 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchResultItem.tsx
+var import_react42 = __toESM(require("react"));
 var import_lodash3 = __toESM(require("lodash.uniqby"));
-var import_react40 = __toESM(require("react"));
-var ChannelSearchResultItem = ({
-  item
-}) => {
+var ChannelSearchResultItem = ({ item }) => {
   const { setActiveChannel } = useChatContext();
   const { setChannels } = useChannelListContext();
-  const onSelect = (0, import_react40.useCallback)(() => {
+  const onSelect = (0, import_react42.useCallback)(() => {
     setActiveChannel(item);
     setChannels?.((channels) => (0, import_lodash3.default)([item, ...channels], "cid"));
   }, [item, setActiveChannel, setChannels]);
-  return /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     ChannelPreview,
     {
       channel: item,
@@ -13694,13 +13764,13 @@ var MessageSearchResultItem = ({
     setActiveChannel
   } = useChatContext();
   const { setChannels } = useChannelListContext();
-  const channel = (0, import_react40.useMemo)(() => {
+  const channel = (0, import_react42.useMemo)(() => {
     const { channel: channelData } = item;
     const type = channelData?.type ?? "unknown";
     const id = channelData?.id ?? "unknown";
     return client.channel(type, id);
   }, [client, item]);
-  const onSelect = (0, import_react40.useCallback)(async () => {
+  const onSelect = (0, import_react42.useCallback)(async () => {
     if (!channel) return;
     await channel.state.loadMessageIntoState(
       item.id,
@@ -13711,9 +13781,9 @@ var MessageSearchResultItem = ({
     setActiveChannel(channel);
     setChannels?.((channels) => (0, import_lodash3.default)([channel, ...channels], "cid"));
   }, [channel, item, searchController, setActiveChannel, setChannels]);
-  const getLatestMessagePreview2 = (0, import_react40.useCallback)(() => item.text, [item]);
+  const getLatestMessagePreview2 = (0, import_react42.useCallback)(() => item.text, [item]);
   if (!channel) return;
-  return /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     ChannelPreview,
     {
       active: channel.cid === activeChannel?.cid && item.id === searchController._internalState.getLatestValue().focusedMessage?.id,
@@ -13724,13 +13794,11 @@ var MessageSearchResultItem = ({
     }
   );
 };
-var UserSearchResultItem = ({
-  item
-}) => {
+var UserSearchResultItem = ({ item }) => {
   const { client, setActiveChannel } = useChatContext();
   const { setChannels } = useChannelListContext();
   const { directMessagingChannelType } = useSearchContext();
-  const onClick = (0, import_react40.useCallback)(() => {
+  const onClick = (0, import_react42.useCallback)(() => {
     const newChannel = client.channel(directMessagingChannelType, {
       members: [client.userID, item.id]
     });
@@ -13738,7 +13806,7 @@ var UserSearchResultItem = ({
     setActiveChannel(newChannel);
     setChannels?.((channels) => (0, import_lodash3.default)([newChannel, ...channels], "cid"));
   }, [client, item, setActiveChannel, setChannels, directMessagingChannelType]);
-  return /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     "button",
     {
       "aria-label": `Select User Channel: ${item.name || ""}`,
@@ -13747,7 +13815,7 @@ var UserSearchResultItem = ({
       onClick,
       role: "option"
     },
-    /* @__PURE__ */ import_react40.default.createElement(
+    /* @__PURE__ */ import_react42.default.createElement(
       Avatar,
       {
         className: "str-chat__avatar--channel-preview",
@@ -13756,7 +13824,7 @@ var UserSearchResultItem = ({
         user: item
       }
     ),
-    /* @__PURE__ */ import_react40.default.createElement("div", { className: "str-chat__search-result--display-name" }, item.name || item.id)
+    /* @__PURE__ */ import_react42.default.createElement("div", { className: "str-chat__search-result--display-name" }, item.name || item.id)
   );
 };
 var DefaultSearchResultItems = {
@@ -13766,18 +13834,18 @@ var DefaultSearchResultItems = {
 };
 
 // src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx
-var import_react43 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 
 // src/experimental/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx
-var import_react42 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 
 // src/experimental/Search/SearchSourceResultsContext.tsx
-var import_react41 = __toESM(require("react"));
-var SearchSourceResultsContext = (0, import_react41.createContext)(void 0);
+var import_react43 = __toESM(require("react"));
+var SearchSourceResultsContext = (0, import_react43.createContext)(void 0);
 var SearchSourceResultsContextProvider = ({
   children,
   value
-}) => /* @__PURE__ */ import_react41.default.createElement(
+}) => /* @__PURE__ */ import_react43.default.createElement(
   SearchSourceResultsContext.Provider,
   {
     value
@@ -13785,7 +13853,7 @@ var SearchSourceResultsContextProvider = ({
   children
 );
 var useSearchSourceResultsContext = () => {
-  const contextValue = (0, import_react41.useContext)(SearchSourceResultsContext);
+  const contextValue = (0, import_react43.useContext)(SearchSourceResultsContext);
   return contextValue;
 };
 
@@ -13793,7 +13861,7 @@ var useSearchSourceResultsContext = () => {
 var SearchSourceResultsLoadingIndicator = () => {
   const { t } = useTranslationContext();
   const { searchSource } = useSearchSourceResultsContext();
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(
     "div",
     {
       className: "str-chat__search-source-results__loading-indicator",
@@ -13818,13 +13886,13 @@ var SearchSourceResultListFooter = () => {
     searchSource.state,
     searchSourceStateSelector
   );
-  return /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     "div",
     {
       className: "str-chat__search-source-result-list__footer",
       "data-testid": "search-footer"
     },
-    isLoading ? /* @__PURE__ */ import_react43.default.createElement(SearchSourceResultsLoadingIndicator2, null) : !hasNext ? /* @__PURE__ */ import_react43.default.createElement("div", { className: "str-chat__search-source-results---empty" }, t("All results loaded")) : null
+    isLoading ? /* @__PURE__ */ import_react45.default.createElement(SearchSourceResultsLoadingIndicator2, null) : !hasNext ? /* @__PURE__ */ import_react45.default.createElement("div", { className: "str-chat__search-source-results---empty" }, t("All results loaded")) : null
   );
 };
 
@@ -13842,36 +13910,36 @@ var SearchSourceResultList = ({
   const { items } = useStateStore(searchSource.state, searchSourceStateSelector2);
   const SearchResultItem = SearchResultItems[searchSource.type];
   if (!SearchResultItem) return null;
-  return /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     "div",
     {
       className: "str-chat__search-source-result-list",
       "data-testid": "search-source-result-list"
     },
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react46.default.createElement(
       InfiniteScrollPaginator,
       {
         loadNextDebounceMs: loadMoreDebounceMs,
         loadNextOnScrollToBottom: searchSource.search,
         threshold: loadMoreThresholdPx
       },
-      items?.map((item, i) => /* @__PURE__ */ import_react44.default.createElement(
+      items?.map((item, i) => /* @__PURE__ */ import_react46.default.createElement(
         SearchResultItem,
         {
           item,
           key: `source-search-result-${searchSource.type}-${i}`
         }
       )),
-      /* @__PURE__ */ import_react44.default.createElement(SearchSourceResultListFooter2, null)
+      /* @__PURE__ */ import_react46.default.createElement(SearchSourceResultListFooter2, null)
     )
   );
 };
 
 // src/experimental/Search/SearchResults/SearchSourceResultsEmpty.tsx
-var import_react45 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var SearchSourceResultsEmpty = () => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react45.default.createElement("div", { className: "str-chat__search-source-results-empty" }, t("No results found"));
+  return /* @__PURE__ */ import_react47.default.createElement("div", { className: "str-chat__search-source-results-empty" }, t("No results found"));
 };
 
 // src/experimental/Search/SearchResults/SearchSourceResultsHeader.tsx
@@ -13882,9 +13950,7 @@ var searchSourceStateSelector3 = (nextValue) => ({
   isLoading: nextValue.isLoading,
   items: nextValue.items
 });
-var SearchSourceResults = ({
-  searchSource
-}) => {
+var SearchSourceResults = ({ searchSource }) => {
   const {
     SearchSourceResultList: SearchSourceResultList2 = SearchSourceResultList,
     SearchSourceResultsEmpty: SearchSourceResultsEmpty2 = SearchSourceResultsEmpty,
@@ -13895,35 +13961,33 @@ var SearchSourceResults = ({
     searchSourceStateSelector3
   );
   if (!items && !isLoading) return null;
-  return /* @__PURE__ */ import_react46.default.createElement(SearchSourceResultsContextProvider, { value: { searchSource } }, /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(SearchSourceResultsContextProvider, { value: { searchSource } }, /* @__PURE__ */ import_react48.default.createElement(
     "div",
     {
       className: "str-chat__search-source-results",
       "data-testid": "search-source-results"
     },
-    /* @__PURE__ */ import_react46.default.createElement(SearchSourceResultsHeader2, null),
-    items?.length || isLoading ? /* @__PURE__ */ import_react46.default.createElement(SearchSourceResultList2, null) : /* @__PURE__ */ import_react46.default.createElement(SearchSourceResultsEmpty2, null)
+    /* @__PURE__ */ import_react48.default.createElement(SearchSourceResultsHeader2, null),
+    items?.length || isLoading ? /* @__PURE__ */ import_react48.default.createElement(SearchSourceResultList2, null) : /* @__PURE__ */ import_react48.default.createElement(SearchSourceResultsEmpty2, null)
   ));
 };
 
 // src/experimental/Search/SearchResults/SearchResultsHeader.tsx
-var import_clsx10 = __toESM(require("clsx"));
-var import_react47 = __toESM(require("react"));
+var import_clsx11 = __toESM(require("clsx"));
+var import_react49 = __toESM(require("react"));
 var searchSourceStateSelector4 = (nextValue) => ({
   isActive: nextValue.isActive
 });
-var SearchSourceFilterButton = ({
-  source
-}) => {
+var SearchSourceFilterButton = ({ source }) => {
   const { t } = useTranslationContext();
   const { searchController } = useSearchContext();
   const { isActive } = useStateStore(source.state, searchSourceStateSelector4);
   const label = `search-results-header-filter-source-button-label--${source.type}`;
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "button",
     {
       "aria-label": t("aria/Search results header filter button"),
-      className: (0, import_clsx10.default)("str-chat__search-results-header__filter-source-button", {
+      className: (0, import_clsx11.default)("str-chat__search-results-header__filter-source-button", {
         "str-chat__search-results-header__filter-source-button--active": isActive
       }),
       key: label,
@@ -13942,13 +14006,13 @@ var SearchSourceFilterButton = ({
 };
 var SearchResultsHeader = () => {
   const { searchController } = useSearchContext();
-  return /* @__PURE__ */ import_react47.default.createElement("div", { className: "str-chat__search-results-header", "data-testid": "search-results-header" }, /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement("div", { className: "str-chat__search-results-header", "data-testid": "search-results-header" }, /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       className: "str-chat__search-results-header__filter-source-buttons",
       "data-testid": "filter-source-buttons"
     },
-    searchController.sources.map((source) => /* @__PURE__ */ import_react47.default.createElement(
+    searchController.sources.map((source) => /* @__PURE__ */ import_react49.default.createElement(
       SearchSourceFilterButton,
       {
         key: `search-source-filter-button-${source.type}`,
@@ -13959,10 +14023,10 @@ var SearchResultsHeader = () => {
 };
 
 // src/experimental/Search/SearchResults/SearchResultsPresearch.tsx
-var import_react48 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var SearchResultsPresearch = () => {
   const { t } = useTranslationContext();
-  return /* @__PURE__ */ import_react48.default.createElement("div", { className: "str-chat__search-results-presearch" }, t("Start typing to search"));
+  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "str-chat__search-results-presearch" }, t("Start typing to search"));
 };
 
 // src/experimental/Search/SearchResults/SearchResults.tsx
@@ -13983,7 +14047,7 @@ var SearchResults = () => {
     searchController.state,
     searchControllerStateSelector3
   );
-  return !isActive ? null : /* @__PURE__ */ import_react49.default.createElement("div", { "aria-label": t("aria/Search results"), className: "str-chat__search-results" }, /* @__PURE__ */ import_react49.default.createElement(SearchResultsHeader2, null), !searchQuery ? /* @__PURE__ */ import_react49.default.createElement(SearchResultsPresearch2, { activeSources }) : activeSources.map((source) => /* @__PURE__ */ import_react49.default.createElement(SearchSourceResults2, { key: source.type, searchSource: source })));
+  return !isActive ? null : /* @__PURE__ */ import_react51.default.createElement("div", { "aria-label": t("aria/Search results"), className: "str-chat__search-results" }, /* @__PURE__ */ import_react51.default.createElement(SearchResultsHeader2, null), !searchQuery ? /* @__PURE__ */ import_react51.default.createElement(SearchResultsPresearch2, { activeSources }) : activeSources.map((source) => /* @__PURE__ */ import_react51.default.createElement(SearchSourceResults2, { key: source.type, searchSource: source })));
 };
 
 // src/experimental/Search/Search.tsx
@@ -13997,7 +14061,7 @@ var Search = ({
   const { SearchBar: SearchBar2 = SearchBar, SearchResults: SearchResults2 = SearchResults } = useComponentContext();
   const { searchController } = useChatContext();
   const { isActive } = useStateStore(searchController.state, searchControllerStateSelector4);
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     SearchContextProvider,
     {
       value: {
@@ -14008,16 +14072,16 @@ var Search = ({
         searchController
       }
     },
-    /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       "div",
       {
-        className: (0, import_clsx11.default)("str-chat__search", {
+        className: (0, import_clsx12.default)("str-chat__search", {
           "str-chat__search--active": isActive
         }),
         "data-testid": "search"
       },
-      /* @__PURE__ */ import_react50.default.createElement(SearchBar2, null),
-      /* @__PURE__ */ import_react50.default.createElement(SearchResults2, null)
+      /* @__PURE__ */ import_react52.default.createElement(SearchBar2, null),
+      /* @__PURE__ */ import_react52.default.createElement(SearchResults2, null)
     )
   );
 };