@liveblocks/react-ui - npm Package Compare versions

Comparing version 2.14.0 to 2.15.0-debug1

dist/_private/index.d.ts

@@ -1,2 +0,4 @@
-import React, { ComponentProps, ElementType, ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as react from 'react';
+import { ComponentProps, ElementType, ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -8,3 +10,3 @@ interface ButtonProps extends ComponentProps<"button"> {
 }
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
@@ -25,3 +27,3 @@ declare type SlotProp = {
 }
-declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLSpanElement>>;
+declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLSpanElement>>;
 
@@ -38,40 +40,40 @@ interface UserProps extends ComponentProps<"span"> {
 }
-declare function User({ userId, replaceSelf, className, ...props }: UserProps): React.JSX.Element;
+declare function User({ userId, replaceSelf, className, ...props }: UserProps): react_jsx_runtime.JSX.Element;
 
-declare function ArrowDownIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function ArrowDownIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function ArrowUpIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function ArrowUpIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function AttachmentIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function AttachmentIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function CheckIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function CheckIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function CrossIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function CrossIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function DeleteIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function DeleteIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function EditIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function EditIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function EllipsisIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function EllipsisIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function EmojiIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function EmojiIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function EmojiAddIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function EmojiAddIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function MentionIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function MentionIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function ResolveIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function ResolveIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function ResolvedIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function ResolvedIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function RestoreIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function RestoreIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function SearchIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function SearchIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function SendIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function SendIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function SpinnerIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function SpinnerIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-declare function WarningIcon(props: ComponentProps<"svg">): React.JSX.Element;
+declare function WarningIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 export { ArrowDownIcon, ArrowUpIcon, AttachmentIcon, Button, CheckIcon, CrossIcon, DeleteIcon, EditIcon, EllipsisIcon, EmojiAddIcon, EmojiIcon, List, MentionIcon, ResolveIcon, ResolvedIcon, RestoreIcon, SearchIcon, SendIcon, SpinnerIcon, User, WarningIcon };

dist/components.js

@@ -1,34 +0,15 @@
-'use client';
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 const defaultComponents = {
   Anchor: "a"
 };
-const ComponentsContext = React.createContext(
+const ComponentsContext = react.createContext(
   void 0
 );
 function useComponents(components) {
-  const contextComponents = React.useContext(ComponentsContext);
-  return React.useMemo(
+  const contextComponents = react.useContext(ComponentsContext);
+  return react.useMemo(
     () => ({
@@ -46,4 +27,4 @@ ...defaultComponents,
 }) {
-  const contextComponents = React.useContext(ComponentsContext);
-  const components = React.useMemo(
+  const contextComponents = react.useContext(ComponentsContext);
+  const components = react.useMemo(
     () => ({
@@ -56,5 +37,6 @@ ...defaultComponents,
   );
-  return /* @__PURE__ */ React__namespace.createElement(ComponentsContext.Provider, {
-    value: components
-  }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(ComponentsContext.Provider, {
+    value: components,
+    children
+  });
 }
@@ -61,0 +43,0 @@

dist/components/Comment.js

@@ -1,7 +0,7 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var _private = require('@liveblocks/react/_private');
 var TogglePrimitive = require('@radix-ui/react-toggle');
-var React = require('react');
+var react = require('react');
 var Check = require('../icons/Check.js');
@@ -64,9 +64,13 @@ var Cross = require('../icons/Cross.js');
   const currentId = shared.useCurrentUserId();
-  return /* @__PURE__ */ React.createElement(index$1.Mention, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(index$1.Mention, {
     className: classNames.classNames("lb-comment-mention", className),
     "data-self": userId === currentId ? "" : void 0,
-    ...props
-  }, mentions.MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User.User, {
-    userId
-  }));
+    ...props,
+    children: [
+      mentions.MENTION_CHARACTER,
+      /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+        userId
+      })
+    ]
+  });
 }
@@ -79,7 +83,8 @@ function CommentLink({
 }) {
-  return /* @__PURE__ */ React.createElement(index$1.Link, {
+  return /* @__PURE__ */ jsxRuntime.jsx(index$1.Link, {
     className: classNames.classNames("lb-comment-link", className),
     href,
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
@@ -92,10 +97,11 @@ function CommentNonInteractiveLink({
 }) {
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
     className: classNames.classNames("lb-comment-link", className),
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
-const CommentReactionButton = React.forwardRef(({ reaction, overrides: overrides$1, className, ...props }, forwardedRef) => {
+const CommentReactionButton = react.forwardRef(({ reaction, overrides: overrides$1, className, ...props }, forwardedRef) => {
   const $ = overrides.useOverrides(overrides$1);
-  return /* @__PURE__ */ React.createElement(Button.Button, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, {
     className: classNames.classNames("lb-comment-reaction", className),
@@ -108,39 +114,45 @@ variant: "outline",
     ...props,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React.createElement(Emoji.Emoji, {
-    className: "lb-comment-reaction-emoji",
-    emoji: reaction.emoji
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "lb-comment-reaction-count"
-  }, reaction.users.length));
+    ref: forwardedRef,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, {
+        className: "lb-comment-reaction-emoji",
+        emoji: reaction.emoji
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: "lb-comment-reaction-count",
+        children: reaction.users.length
+      })
+    ]
+  });
 });
-const CommentReaction = React.forwardRef(({ comment, reaction, overrides: overrides$1, disabled, ...props }, forwardedRef) => {
+const CommentReaction = react.forwardRef(({ comment, reaction, overrides: overrides$1, disabled, ...props }, forwardedRef) => {
   const addReaction = _private.useAddRoomCommentReaction(comment.roomId);
   const removeReaction = _private.useRemoveRoomCommentReaction(comment.roomId);
   const currentId = shared.useCurrentUserId();
-  const isActive = React.useMemo(() => {
+  const isActive = react.useMemo(() => {
     return reaction.users.some((users) => users.id === currentId);
   }, [currentId, reaction]);
   const $ = overrides.useOverrides(overrides$1);
-  const tooltipContent = React.useMemo(
-    () => /* @__PURE__ */ React.createElement("span", null, $.COMMENT_REACTION_LIST(
-      /* @__PURE__ */ React.createElement(List.List, {
-        values: reaction.users.map((users) => /* @__PURE__ */ React.createElement(User.User, {
-          key: users.id,
-          userId: users.id,
-          replaceSelf: true
-        })),
-        formatRemaining: $.LIST_REMAINING_USERS,
-        truncate: REACTIONS_TRUNCATE,
-        locale: $.locale
-      }),
-      reaction.emoji,
-      reaction.users.length
-    )),
+  const tooltipContent = react.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx("span", {
+      children: $.COMMENT_REACTION_LIST(
+        /* @__PURE__ */ jsxRuntime.jsx(List.List, {
+          values: reaction.users.map((users) => /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+            userId: users.id,
+            replaceSelf: true
+          }, users.id)),
+          formatRemaining: $.LIST_REMAINING_USERS,
+          truncate: REACTIONS_TRUNCATE,
+          locale: $.locale
+        }),
+        reaction.emoji,
+        reaction.users.length
+      )
+    }),
     [$, reaction]
   );
-  const stopPropagation = React.useCallback((event) => {
+  const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  const handlePressedChange = React.useCallback(
+  const handlePressedChange = react.useCallback(
     (isPressed) => {
@@ -163,26 +175,28 @@ if (isPressed) {
   );
-  return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
     content: tooltipContent,
     multiline: true,
-    className: "lb-comment-reaction-tooltip"
-  }, /* @__PURE__ */ React.createElement(TogglePrimitive__namespace.Root, {
-    asChild: true,
-    pressed: isActive,
-    onPressedChange: handlePressedChange,
-    onClick: stopPropagation,
-    disabled,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React.createElement(CommentReactionButton, {
-    "data-self": isActive ? "" : void 0,
-    reaction,
-    overrides: overrides$1,
-    ...props
-  })));
+    className: "lb-comment-reaction-tooltip",
+    children: /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, {
+      asChild: true,
+      pressed: isActive,
+      onPressedChange: handlePressedChange,
+      onClick: stopPropagation,
+      disabled,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx(CommentReactionButton, {
+        "data-self": isActive ? "" : void 0,
+        reaction,
+        overrides: overrides$1,
+        ...props
+      })
+    })
+  });
 });
-const CommentNonInteractiveReaction = React.forwardRef(({ reaction, overrides, ...props }, forwardedRef) => {
+const CommentNonInteractiveReaction = react.forwardRef(({ reaction, overrides, ...props }, forwardedRef) => {
   const currentId = shared.useCurrentUserId();
-  const isActive = React.useMemo(() => {
+  const isActive = react.useMemo(() => {
     return reaction.users.some((users) => users.id === currentId);
   }, [currentId, reaction]);
-  return /* @__PURE__ */ React.createElement(CommentReactionButton, {
+  return /* @__PURE__ */ jsxRuntime.jsx(CommentReactionButton, {
     disableable: false,
@@ -212,3 +226,3 @@ "data-self": isActive ? "" : void 0,
   const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (event) => {
@@ -227,3 +241,3 @@ if (!url) {
   );
-  return /* @__PURE__ */ React.createElement(Attachment.MediaAttachment, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Attachment.MediaAttachment, {
     className: classNames.classNames("lb-comment-attachment", className),
@@ -246,3 +260,3 @@ ...props,
   const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (event) => {
@@ -261,3 +275,3 @@ if (!url) {
   );
-  return /* @__PURE__ */ React.createElement(Attachment.FileAttachment, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Attachment.FileAttachment, {
     className: classNames.classNames("lb-comment-attachment", className),
@@ -275,3 +289,3 @@ ...props,
 }) {
-  return /* @__PURE__ */ React.createElement(Attachment.FileAttachment, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Attachment.FileAttachment, {
     className: classNames.classNames("lb-comment-attachment", className),
@@ -300,3 +314,3 @@ allowMediaPreview: false,
 }
-const Comment = React.forwardRef(
+const Comment = react.forwardRef(
   ({
@@ -322,3 +336,3 @@ comment,
   }, forwardedRef) => {
-    const ref = React.useRef(null);
+    const ref = react.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
@@ -331,16 +345,16 @@ const currentUserId = shared.useCurrentUserId();
     const $ = overrides.useOverrides(overrides$1);
-    const [isEditing, setEditing] = React.useState(false);
-    const [isTarget, setTarget] = React.useState(false);
-    const [isMoreActionOpen, setMoreActionOpen] = React.useState(false);
-    const [isReactionActionOpen, setReactionActionOpen] = React.useState(false);
-    const { mediaAttachments, fileAttachments } = React.useMemo(() => {
+    const [isEditing, setEditing] = react.useState(false);
+    const [isTarget, setTarget] = react.useState(false);
+    const [isMoreActionOpen, setMoreActionOpen] = react.useState(false);
+    const [isReactionActionOpen, setReactionActionOpen] = react.useState(false);
+    const { mediaAttachments, fileAttachments } = react.useMemo(() => {
       return Attachment.separateMediaAttachments(comment.attachments);
     }, [comment.attachments]);
-    const stopPropagation = React.useCallback((event) => {
+    const stopPropagation = react.useCallback((event) => {
       event.stopPropagation();
     }, []);
-    const handleEdit = React.useCallback(() => {
+    const handleEdit = react.useCallback(() => {
       setEditing(true);
     }, []);
-    const handleEditCancel = React.useCallback(
+    const handleEditCancel = react.useCallback(
       (event) => {
@@ -352,3 +366,3 @@ event.stopPropagation();
     );
-    const handleEditSubmit = React.useCallback(
+    const handleEditSubmit = react.useCallback(
       ({ body, attachments }, event) => {
@@ -367,3 +381,3 @@ onCommentEdit?.(comment);
     );
-    const handleDelete = React.useCallback(() => {
+    const handleDelete = react.useCallback(() => {
       onCommentDelete?.(comment);
@@ -375,3 +389,3 @@ deleteComment({
     }, [comment, deleteComment, onCommentDelete]);
-    const handleAuthorClick = React.useCallback(
+    const handleAuthorClick = react.useCallback(
       (event) => {
@@ -382,3 +396,3 @@ onAuthorClick?.(comment.userId, event);
     );
-    const handleReactionSelect = React.useCallback(
+    const handleReactionSelect = react.useCallback(
       (emoji) => {
@@ -413,3 +427,3 @@ const reactionIndex = comment.reactions.findIndex(
     );
-    React.useEffect(() => {
+    react.useEffect(() => {
       const isWindowDefined = typeof window !== "undefined";
@@ -427,178 +441,265 @@ if (!isWindowDefined)
     }
-    return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, autoMarkReadThreadId && /* @__PURE__ */ React.createElement(AutoMarkReadThreadIdHandler, {
-      commentRef: ref,
-      threadId: autoMarkReadThreadId,
-      roomId: comment.roomId
-    }), /* @__PURE__ */ React.createElement("div", {
-      id: comment.id,
-      className: classNames.classNames(
-        "lb-root lb-comment",
-        indentContent && "lb-comment:indent-content",
-        showActions === "hover" && "lb-comment:show-actions-hover",
-        (isMoreActionOpen || isReactionActionOpen) && "lb-comment:action-open",
-        className
-      ),
-      "data-deleted": !comment.body ? "" : void 0,
-      "data-editing": isEditing ? "" : void 0,
-      "data-target": isTarget ? "" : void 0,
-      dir: $.dir,
-      ...props,
-      ref: mergedRefs
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-header"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-details"
-    }, /* @__PURE__ */ React.createElement(Avatar.Avatar, {
-      className: "lb-comment-avatar",
-      userId: comment.userId,
-      onClick: handleAuthorClick
-    }), /* @__PURE__ */ React.createElement("span", {
-      className: "lb-comment-details-labels"
-    }, /* @__PURE__ */ React.createElement(User.User, {
-      className: "lb-comment-author",
-      userId: comment.userId,
-      onClick: handleAuthorClick
-    }), /* @__PURE__ */ React.createElement("span", {
-      className: "lb-comment-date"
-    }, /* @__PURE__ */ React.createElement(Timestamp.Timestamp, {
-      locale: $.locale,
-      date: comment.createdAt,
-      className: "lb-date lb-comment-date-created"
-    }), comment.editedAt && comment.body && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement("span", {
-      className: "lb-comment-date-edited"
-    }, $.COMMENT_EDITED))))), showActions && !isEditing && /* @__PURE__ */ React.createElement("div", {
-      className: classNames.classNames(
-        "lb-comment-actions",
-        additionalActionsClassName
-      )
-    }, additionalActions ?? null, showReactions && /* @__PURE__ */ React.createElement(EmojiPicker.EmojiPicker, {
-      onEmojiSelect: handleReactionSelect,
-      onOpenChange: setReactionActionOpen
-    }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-      content: $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React.createElement(PopoverPrimitive.PopoverTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button.Button, {
-      className: "lb-comment-action",
-      onClick: stopPropagation,
-      "aria-label": $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React.createElement(EmojiAdd.EmojiAddIcon, {
-      className: "lb-button-icon"
-    }))))), comment.userId === currentUserId && /* @__PURE__ */ React.createElement(Dropdown.Dropdown, {
-      open: isMoreActionOpen,
-      onOpenChange: setMoreActionOpen,
-      align: "end",
-      content: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Dropdown.DropdownItem, {
-        onSelect: handleEdit,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React.createElement(Edit.EditIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.COMMENT_EDIT), /* @__PURE__ */ React.createElement(Dropdown.DropdownItem, {
-        onSelect: handleDelete,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React.createElement(Delete.DeleteIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.COMMENT_DELETE))
-    }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-      content: $.COMMENT_MORE
-    }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.DropdownMenuTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button.Button, {
-      className: "lb-comment-action",
-      disabled: !comment.body,
-      onClick: stopPropagation,
-      "aria-label": $.COMMENT_MORE
-    }, /* @__PURE__ */ React.createElement(Ellipsis.EllipsisIcon, {
-      className: "lb-button-icon"
-    }))))))), /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-content"
-    }, isEditing ? /* @__PURE__ */ React.createElement(Composer.Composer, {
-      className: "lb-comment-composer",
-      onComposerSubmit: handleEditSubmit,
-      defaultValue: comment.body,
-      defaultAttachments: comment.attachments,
-      autoFocus: true,
-      showAttribution: false,
-      showAttachments,
-      showFormattingControls: showComposerFormattingControls,
-      actions: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-        content: $.COMMENT_EDIT_COMPOSER_CANCEL,
-        "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL
-      }, /* @__PURE__ */ React.createElement(Button.Button, {
-        className: "lb-composer-action",
-        onClick: handleEditCancel
-      }, /* @__PURE__ */ React.createElement(Cross.CrossIcon, {
-        className: "lb-button-icon"
-      }))), /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltip, {
-        content: $.COMMENT_EDIT_COMPOSER_SAVE,
-        shortcut: /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-          name: "enter"
+    return /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive.TooltipProvider, {
+      children: [
+        autoMarkReadThreadId && /* @__PURE__ */ jsxRuntime.jsx(AutoMarkReadThreadIdHandler, {
+          commentRef: ref,
+          threadId: autoMarkReadThreadId,
+          roomId: comment.roomId
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          id: comment.id,
+          className: classNames.classNames(
+            "lb-root lb-comment",
+            indentContent && "lb-comment:indent-content",
+            showActions === "hover" && "lb-comment:show-actions-hover",
+            (isMoreActionOpen || isReactionActionOpen) && "lb-comment:action-open",
+            className
+          ),
+          "data-deleted": !comment.body ? "" : void 0,
+          "data-editing": isEditing ? "" : void 0,
+          "data-target": isTarget ? "" : void 0,
+          dir: $.dir,
+          ...props,
+          ref: mergedRefs,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              className: "lb-comment-header",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                  className: "lb-comment-details",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
+                      className: "lb-comment-avatar",
+                      userId: comment.userId,
+                      onClick: handleAuthorClick
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                      className: "lb-comment-details-labels",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+                          className: "lb-comment-author",
+                          userId: comment.userId,
+                          onClick: handleAuthorClick
+                        }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                          className: "lb-comment-date",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(Timestamp.Timestamp, {
+                              locale: $.locale,
+                              date: comment.createdAt,
+                              className: "lb-date lb-comment-date-created"
+                            }),
+                            comment.editedAt && comment.body && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                              children: [
+                                " ",
+                                /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                  className: "lb-comment-date-edited",
+                                  children: $.COMMENT_EDITED
+                                })
+                              ]
+                            })
+                          ]
+                        })
+                      ]
+                    })
+                  ]
+                }),
+                showActions && !isEditing && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                  className: classNames.classNames(
+                    "lb-comment-actions",
+                    additionalActionsClassName
+                  ),
+                  children: [
+                    additionalActions ?? null,
+                    showReactions && /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, {
+                      onEmojiSelect: handleReactionSelect,
+                      onOpenChange: setReactionActionOpen,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                        content: $.COMMENT_ADD_REACTION,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, {
+                          asChild: true,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                            className: "lb-comment-action",
+                            onClick: stopPropagation,
+                            "aria-label": $.COMMENT_ADD_REACTION,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {
+                              className: "lb-button-icon"
+                            })
+                          })
+                        })
+                      })
+                    }),
+                    comment.userId === currentUserId && /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown, {
+                      open: isMoreActionOpen,
+                      onOpenChange: setMoreActionOpen,
+                      align: "end",
+                      content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                            onSelect: handleEdit,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Edit.EditIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.COMMENT_EDIT
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                            onSelect: handleDelete,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.COMMENT_DELETE
+                            ]
+                          })
+                        ]
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                        content: $.COMMENT_MORE,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.DropdownMenuTrigger, {
+                          asChild: true,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                            className: "lb-comment-action",
+                            disabled: !comment.body,
+                            onClick: stopPropagation,
+                            "aria-label": $.COMMENT_MORE,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {
+                              className: "lb-button-icon"
+                            })
+                          })
+                        })
+                      })
+                    })
+                  ]
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: "lb-comment-content",
+              children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(Composer.Composer, {
+                className: "lb-comment-composer",
+                onComposerSubmit: handleEditSubmit,
+                defaultValue: comment.body,
+                defaultAttachments: comment.attachments,
+                autoFocus: true,
+                showAttribution: false,
+                showAttachments,
+                showFormattingControls: showComposerFormattingControls,
+                actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                      content: $.COMMENT_EDIT_COMPOSER_CANCEL,
+                      "aria-label": $.COMMENT_EDIT_COMPOSER_CANCEL,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                        className: "lb-composer-action",
+                        onClick: handleEditCancel,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {
+                          className: "lb-button-icon"
+                        })
+                      })
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
+                      content: $.COMMENT_EDIT_COMPOSER_SAVE,
+                      shortcut: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+                        name: "enter"
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(index.Submit, {
+                        asChild: true,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                          variant: "primary",
+                          className: "lb-composer-action",
+                          onClick: stopPropagation,
+                          "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {
+                            className: "lb-button-icon"
+                          })
+                        })
+                      })
+                    })
+                  ]
+                }),
+                overrides: {
+                  COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
+                },
+                roomId: comment.roomId
+              }) : comment.body ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(index$1.Body, {
+                    className: "lb-comment-body",
+                    body: comment.body,
+                    components: {
+                      Mention: ({ userId }) => /* @__PURE__ */ jsxRuntime.jsx(CommentMention, {
+                        userId,
+                        onClick: (event) => onMentionClick?.(userId, event)
+                      }),
+                      Link: CommentLink
+                    }
+                  }),
+                  showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    className: "lb-comment-attachments",
+                    children: [
+                      mediaAttachments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+                        className: "lb-attachments",
+                        children: mediaAttachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(CommentMediaAttachment, {
+                          attachment,
+                          overrides: overrides$1,
+                          onAttachmentClick,
+                          roomId: comment.roomId
+                        }, attachment.id))
+                      }) : null,
+                      fileAttachments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+                        className: "lb-attachments",
+                        children: fileAttachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(CommentFileAttachment, {
+                          attachment,
+                          overrides: overrides$1,
+                          onAttachmentClick,
+                          roomId: comment.roomId
+                        }, attachment.id))
+                      }) : null
+                    ]
+                  }) : null,
+                  showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    className: "lb-comment-reactions",
+                    children: [
+                      comment.reactions.map((reaction) => /* @__PURE__ */ jsxRuntime.jsx(CommentReaction, {
+                        comment,
+                        reaction,
+                        overrides: overrides$1
+                      }, reaction.emoji)),
+                      /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, {
+                        onEmojiSelect: handleReactionSelect,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                          content: $.COMMENT_ADD_REACTION,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, {
+                            asChild: true,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                              className: "lb-comment-reaction lb-comment-reaction-add",
+                              variant: "outline",
+                              onClick: stopPropagation,
+                              "aria-label": $.COMMENT_ADD_REACTION,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(EmojiAdd.EmojiAddIcon, {
+                                className: "lb-button-icon"
+                              })
+                            })
+                          })
+                        })
+                      })
+                    ]
+                  })
+                ]
+              }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-comment-body",
+                children: /* @__PURE__ */ jsxRuntime.jsx("p", {
+                  className: "lb-comment-deleted",
+                  children: $.COMMENT_DELETED
+                })
+              })
+            })
+          ]
         })
-      }, /* @__PURE__ */ React.createElement(index.Submit, {
-        asChild: true
-      }, /* @__PURE__ */ React.createElement(Button.Button, {
-        variant: "primary",
-        className: "lb-composer-action",
-        onClick: stopPropagation,
-        "aria-label": $.COMMENT_EDIT_COMPOSER_SAVE
-      }, /* @__PURE__ */ React.createElement(Check.CheckIcon, {
-        className: "lb-button-icon"
-      }))))),
-      overrides: {
-        COMPOSER_PLACEHOLDER: $.COMMENT_EDIT_COMPOSER_PLACEHOLDER
-      },
-      roomId: comment.roomId
-    }) : comment.body ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(index$1.Body, {
-      className: "lb-comment-body",
-      body: comment.body,
-      components: {
-        Mention: ({ userId }) => /* @__PURE__ */ React.createElement(CommentMention, {
-          userId,
-          onClick: (event) => onMentionClick?.(userId, event)
-        }),
-        Link: CommentLink
-      }
-    }), showAttachments && (mediaAttachments.length > 0 || fileAttachments.length > 0) ? /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-attachments"
-    }, mediaAttachments.length > 0 ? /* @__PURE__ */ React.createElement("div", {
-      className: "lb-attachments"
-    }, mediaAttachments.map((attachment) => /* @__PURE__ */ React.createElement(CommentMediaAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides: overrides$1,
-      onAttachmentClick,
-      roomId: comment.roomId
-    }))) : null, fileAttachments.length > 0 ? /* @__PURE__ */ React.createElement("div", {
-      className: "lb-attachments"
-    }, fileAttachments.map((attachment) => /* @__PURE__ */ React.createElement(CommentFileAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides: overrides$1,
-      onAttachmentClick,
-      roomId: comment.roomId
-    }))) : null) : null, showReactions && comment.reactions.length > 0 && /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-reactions"
-    }, comment.reactions.map((reaction) => /* @__PURE__ */ React.createElement(CommentReaction, {
-      key: reaction.emoji,
-      comment,
-      reaction,
-      overrides: overrides$1
-    })), /* @__PURE__ */ React.createElement(EmojiPicker.EmojiPicker, {
-      onEmojiSelect: handleReactionSelect
-    }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-      content: $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React.createElement(PopoverPrimitive.PopoverTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button.Button, {
-      className: "lb-comment-reaction lb-comment-reaction-add",
-      variant: "outline",
-      onClick: stopPropagation,
-      "aria-label": $.COMMENT_ADD_REACTION
-    }, /* @__PURE__ */ React.createElement(EmojiAdd.EmojiAddIcon, {
-      className: "lb-button-icon"
-    }))))))) : /* @__PURE__ */ React.createElement("div", {
-      className: "lb-comment-body"
-    }, /* @__PURE__ */ React.createElement("p", {
-      className: "lb-comment-deleted"
-    }, $.COMMENT_DELETED)))));
+      ]
+    });
   }
@@ -605,0 +706,0 @@ );

dist/components/Composer.js

@@ -1,9 +0,7 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
-var react = require('@liveblocks/react');
 var _private = require('@liveblocks/react/_private');
-var React = require('react');
-var index_js = require('use-sync-external-store/shim/index.js');
+var react = require('react');
 var config = require('../config.js');
@@ -26,3 +24,2 @@ var constants = require('../constants.js');
 var useControllableState = require('../utils/use-controllable-state.js');
-var useLayoutEffect = require('../utils/use-layout-effect.js');
 var Attachment$1 = require('./internal/Attachment.js');
@@ -46,6 +43,6 @@ var Attribution = require('./internal/Attribution.js');
   const { createMention } = contexts.useComposer();
-  const preventDefault = React.useCallback((event) => {
+  const preventDefault = react.useCallback((event) => {
     event.preventDefault();
   }, []);
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (event) => {
@@ -60,13 +57,15 @@ onClick?.(event);
   );
-  return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: tooltipLabel ?? label
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    className: classNames.classNames("lb-composer-editor-action", className),
-    onPointerDown: preventDefault,
-    onClick: handleClick,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React.createElement(Mention.MentionIcon, {
-    className: "lb-button-icon"
-  })));
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+    content: tooltipLabel ?? label,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+      className: classNames.classNames("lb-composer-editor-action", className),
+      onPointerDown: preventDefault,
+      onClick: handleClick,
+      "aria-label": label,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Mention.MentionIcon, {
+        className: "lb-button-icon"
+      })
+    })
+  });
 }
@@ -81,24 +80,28 @@ function ComposerInsertEmojiEditorAction({
   const { insertText } = contexts.useComposer();
-  const preventDefault = React.useCallback((event) => {
+  const preventDefault = react.useCallback((event) => {
     event.preventDefault();
   }, []);
-  const stopPropagation = React.useCallback((event) => {
+  const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React.createElement(EmojiPicker.EmojiPicker, {
+  return /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, {
     onEmojiSelect: insertText,
-    onOpenChange: onPickerOpenChange
-  }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: tooltipLabel ?? label
-  }, /* @__PURE__ */ React.createElement(PopoverPrimitive.PopoverTrigger, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    className: classNames.classNames("lb-composer-editor-action", className),
-    onPointerDown: preventDefault,
-    onClick: stopPropagation,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React.createElement(Emoji.EmojiIcon, {
-    className: "lb-button-icon"
-  })))));
+    onOpenChange: onPickerOpenChange,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+      content: tooltipLabel ?? label,
+      children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, {
+        asChild: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+          className: classNames.classNames("lb-composer-editor-action", className),
+          onPointerDown: preventDefault,
+          onClick: stopPropagation,
+          "aria-label": label,
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.EmojiIcon, {
+            className: "lb-button-icon"
+          })
+        })
+      })
+    })
+  });
 }
@@ -111,28 +114,35 @@ function ComposerAttachFilesEditorAction({
 }) {
-  const preventDefault = React.useCallback((event) => {
+  const preventDefault = react.useCallback((event) => {
     event.preventDefault();
   }, []);
-  const stopPropagation = React.useCallback((event) => {
+  const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: tooltipLabel ?? label
-  }, /* @__PURE__ */ React.createElement(index.AttachFiles, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    className: classNames.classNames("lb-composer-editor-action", className),
-    onPointerDown: preventDefault,
-    onClick: stopPropagation,
-    "aria-label": label,
-    ...props
-  }, /* @__PURE__ */ React.createElement(Attachment.AttachmentIcon, {
-    className: "lb-button-icon"
-  }))));
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+    content: tooltipLabel ?? label,
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.AttachFiles, {
+      asChild: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+        className: classNames.classNames("lb-composer-editor-action", className),
+        onPointerDown: preventDefault,
+        onClick: stopPropagation,
+        "aria-label": label,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {
+          className: "lb-button-icon"
+        })
+      })
+    })
+  });
 }
 function ComposerMention({ userId }) {
-  return /* @__PURE__ */ React.createElement(index.Mention, {
-    className: "lb-composer-mention"
-  }, mentions.MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User.User, {
-    userId
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Mention, {
+    className: "lb-composer-mention",
+    children: [
+      mentions.MENTION_CHARACTER,
+      /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+        userId
+      })
+    ]
+  });
 }
@@ -142,77 +152,118 @@ function ComposerMentionSuggestions({
 }) {
-  return userIds.length > 0 ? /* @__PURE__ */ React.createElement(index.Suggestions, {
-    className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions"
-  }, /* @__PURE__ */ React.createElement(index.SuggestionsList, {
-    className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list"
-  }, userIds.map((userId) => /* @__PURE__ */ React.createElement(index.SuggestionsListItem, {
-    key: userId,
-    className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
-    value: userId
-  }, /* @__PURE__ */ React.createElement(Avatar.Avatar, {
-    userId,
-    className: "lb-composer-mention-suggestion-avatar"
-  }), /* @__PURE__ */ React.createElement(User.User, {
-    userId,
-    className: "lb-composer-mention-suggestion-user"
-  }))))) : null;
+  return userIds.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.Suggestions, {
+    className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions",
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.SuggestionsList, {
+      className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list",
+      children: userIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsxs(index.SuggestionsListItem, {
+        className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
+        value: userId,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
+            userId,
+            className: "lb-composer-mention-suggestion-avatar"
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+            userId,
+            className: "lb-composer-mention-suggestion-user"
+          })
+        ]
+      }, userId))
+    })
+  }) : null;
 }
 function MarkToggle({ mark, shortcut, children, ...props }) {
   const $ = overrides.useOverrides();
-  const label = React.useMemo(() => {
+  const label = react.useMemo(() => {
     return $.COMPOSER_TOGGLE_MARK(mark);
   }, [$, mark]);
-  return /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltip, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
     content: label,
     shortcut,
-    sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET + 2
-  }, /* @__PURE__ */ React.createElement(index.MarkToggle, {
-    mark,
-    asChild: true,
-    ...props
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    "aria-label": label,
-    variant: "toggle"
-  }, children)));
+    sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET + 2,
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.MarkToggle, {
+      mark,
+      asChild: true,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+        "aria-label": label,
+        variant: "toggle",
+        children
+      })
+    })
+  });
 }
 const markToggles = {
-  bold: () => /* @__PURE__ */ React.createElement(MarkToggle, {
+  bold: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "bold",
-    shortcut: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React.createElement("span", null, "B"))
-  }, /* @__PURE__ */ React.createElement(Bold.BoldIcon, null)),
-  italic: () => /* @__PURE__ */ React.createElement(MarkToggle, {
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "B"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Bold.BoldIcon, {})
+  }),
+  italic: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "italic",
-    shortcut: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React.createElement("span", null, "I"))
-  }, /* @__PURE__ */ React.createElement(Italic.ItalicIcon, null)),
-  strikethrough: () => /* @__PURE__ */ React.createElement(MarkToggle, {
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "I"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Italic.ItalicIcon, {})
+  }),
+  strikethrough: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "strikethrough",
-    shortcut: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "shift"
-    }), /* @__PURE__ */ React.createElement("span", null, "S"))
-  }, /* @__PURE__ */ React.createElement(Strikethrough.StrikethroughIcon, null)),
-  code: () => /* @__PURE__ */ React.createElement(MarkToggle, {
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "shift"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "S"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough.StrikethroughIcon, {})
+  }),
+  code: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
     mark: "code",
-    shortcut: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "mod"
-    }), /* @__PURE__ */ React.createElement("span", null, "E"))
-  }, /* @__PURE__ */ React.createElement(Code.CodeIcon, null))
+    shortcut: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+          name: "mod"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          children: "E"
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(Code.CodeIcon, {})
+  })
 };
-const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ React.createElement(Toggle, {
-  key: mark
-}));
+const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ jsxRuntime.jsx(Toggle, {}, mark));
 function ComposerFloatingToolbar() {
-  return /* @__PURE__ */ React.createElement(index.FloatingToolbar, {
-    className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar"
-  }, markTogglesList);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.FloatingToolbar, {
+    className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar",
+    children: markTogglesList
+  });
 }
 function ComposerLink({ href, children }) {
-  return /* @__PURE__ */ React.createElement(index.Link, {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Link, {
     href,
-    className: "lb-composer-link"
-  }, children);
+    className: "lb-composer-link",
+    children
+  });
 }
@@ -227,6 +278,6 @@ function ComposerFileAttachment({
   const { roomId } = contexts.useComposerEditorContext();
-  const handleDeleteClick = React.useCallback(() => {
+  const handleDeleteClick = react.useCallback(() => {
     removeAttachment(attachment.id);
   }, [attachment.id, removeAttachment]);
-  return /* @__PURE__ */ React.createElement(Attachment$1.FileAttachment, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Attachment$1.FileAttachment, {
     className: classNames.classNames("lb-composer-attachment", className),
@@ -250,14 +301,15 @@ ...props,
   }
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-composer-attachments", className),
-    ...props
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachments"
-  }, attachments.map((attachment) => {
-    return /* @__PURE__ */ React.createElement(ComposerFileAttachment, {
-      key: attachment.id,
-      attachment,
-      overrides
-    });
-  })));
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: "lb-attachments",
+      children: attachments.map((attachment) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(ComposerFileAttachment, {
+          attachment,
+          overrides
+        }, attachment.id);
+      })
+    })
+  });
 }
@@ -287,3 +339,3 @@ const editorRequiredComponents = {
   const $ = overrides.useOverrides(overrides$1);
-  const components = React.useMemo(() => {
+  const components = react.useMemo(() => {
     return {
@@ -297,62 +349,89 @@ ...editorRequiredComponents,
   });
-  useLayoutEffect.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     onEmptyChange(isEmpty);
   }, [isEmpty, onEmptyChange]);
-  const preventDefault = React.useCallback((event) => {
+  const preventDefault = react.useCallback((event) => {
     event.preventDefault();
   }, []);
-  const stopPropagation = React.useCallback((event) => {
+  const stopPropagation = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: "lb-composer-editor-container",
-    ...dropAreaProps
-  }, /* @__PURE__ */ React.createElement(index.Editor, {
-    className: "lb-composer-editor",
-    onClick: onEditorClick,
-    placeholder: $.COMPOSER_PLACEHOLDER,
-    defaultValue,
-    autoFocus,
-    components,
-    disabled,
-    dir: $.dir
-  }), showAttachments && /* @__PURE__ */ React.createElement(ComposerAttachments, {
-    overrides: overrides$1
-  }), (!isCollapsed || isDraggingOver) && /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-footer"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-editor-actions"
-  }, hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(ComposerInsertMentionEditorAction, {
-    label: $.COMPOSER_INSERT_MENTION,
-    disabled
-  }), /* @__PURE__ */ React.createElement(ComposerInsertEmojiEditorAction, {
-    label: $.COMPOSER_INSERT_EMOJI,
-    onPickerOpenChange: onEmojiPickerOpenChange,
-    disabled
-  }), showAttachments && /* @__PURE__ */ React.createElement(ComposerAttachFilesEditorAction, {
-    label: $.COMPOSER_ATTACH_FILES,
-    disabled
-  })), showAttribution && /* @__PURE__ */ React.createElement(Attribution.Attribution, null), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-actions"
-  }, actions ?? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltip, {
-    content: $.COMPOSER_SEND,
-    shortcut: /* @__PURE__ */ React.createElement(Tooltip.ShortcutTooltipKey, {
-      name: "enter"
-    })
-  }, /* @__PURE__ */ React.createElement(index.Submit, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Button.Button, {
-    onPointerDown: preventDefault,
-    onClick: stopPropagation,
-    className: "lb-composer-action",
-    variant: "primary",
-    "aria-label": $.COMPOSER_SEND
-  }, /* @__PURE__ */ React.createElement(Send.SendIcon, null))))))), showAttachments && isDraggingOver && /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-attachments-drop-area"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-composer-attachments-drop-area-label"
-  }, /* @__PURE__ */ React.createElement(Attachment.AttachmentIcon, null), $.COMPOSER_ATTACH_FILES)));
+    ...dropAreaProps,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.Editor, {
+        className: "lb-composer-editor",
+        onClick: onEditorClick,
+        placeholder: $.COMPOSER_PLACEHOLDER,
+        defaultValue,
+        autoFocus,
+        components,
+        disabled,
+        dir: $.dir
+      }),
+      showAttachments && /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {
+        overrides: overrides$1
+      }),
+      (!isCollapsed || isDraggingOver) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: "lb-composer-footer",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            className: "lb-composer-editor-actions",
+            children: [
+              hasResolveMentionSuggestions && /* @__PURE__ */ jsxRuntime.jsx(ComposerInsertMentionEditorAction, {
+                label: $.COMPOSER_INSERT_MENTION,
+                disabled
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(ComposerInsertEmojiEditorAction, {
+                label: $.COMPOSER_INSERT_EMOJI,
+                onPickerOpenChange: onEmojiPickerOpenChange,
+                disabled
+              }),
+              showAttachments && /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachFilesEditorAction, {
+                label: $.COMPOSER_ATTACH_FILES,
+                disabled
+              })
+            ]
+          }),
+          showAttribution && /* @__PURE__ */ jsxRuntime.jsx(Attribution.Attribution, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-composer-actions",
+            children: actions ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
+                content: $.COMPOSER_SEND,
+                shortcut: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltipKey, {
+                  name: "enter"
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx(index.Submit, {
+                  asChild: true,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                    onPointerDown: preventDefault,
+                    onClick: stopPropagation,
+                    className: "lb-composer-action",
+                    variant: "primary",
+                    "aria-label": $.COMPOSER_SEND,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Send.SendIcon, {})
+                  })
+                })
+              })
+            })
+          })
+        ]
+      }),
+      showAttachments && isDraggingOver && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-composer-attachments-drop-area",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          className: "lb-composer-attachments-drop-area-label",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {}),
+            $.COMPOSER_ATTACH_FILES
+          ]
+        })
+      })
+    ]
+  });
 }
-React.createContext(null);
-const Composer = React.forwardRef(
+react.createContext(null);
+const Composer = react.forwardRef(
   ({
@@ -381,3 +460,2 @@ threadId,
   }, forwardedRef) => {
-    const client = react.useClient();
     const room = _private.useRoomOrNull();
@@ -394,5 +472,5 @@ const roomId = _roomId !== void 0 ? _roomId : room?.id;
     const { preventUnsavedComposerChanges } = config.useLiveblocksUIConfig();
-    const hasResolveMentionSuggestions = client[core.kInternal].resolveMentionSuggestions !== void 0;
-    const isEmptyRef = React.useRef(true);
-    const isEmojiPickerOpenRef = React.useRef(false);
+    const hasResolveMentionSuggestions = _private.useResolveMentionSuggestions() !== void 0;
+    const isEmptyRef = react.useRef(true);
+    const isEmojiPickerOpenRef = react.useRef(false);
     const $ = overrides.useOverrides(overrides$1);
@@ -404,4 +482,4 @@ const [isCollapsed, onCollapsedChange] = useControllableState.useControllableState(
     );
-    const canCommentFallback = index_js.useSyncExternalStore(
-      React.useCallback(
+    const canCommentFallback = react.useSyncExternalStore(
+      react.useCallback(
         (callback) => {
@@ -415,16 +493,16 @@ if (room === null)
       ),
-      React.useCallback(() => {
+      react.useCallback(() => {
         return room?.getSelf()?.canComment ?? true;
       }, [room]),
-      React.useCallback(() => true, [])
+      react.useCallback(() => true, [])
     );
     const permissions = _private.useRoomPermissions(roomId);
     const canComment = permissions.size > 0 ? permissions.has(core.Permission.CommentsWrite) || permissions.has(core.Permission.Write) : canCommentFallback;
-    const setEmptyRef = React.useCallback((isEmpty) => {
+    const setEmptyRef = react.useCallback((isEmpty) => {
       isEmptyRef.current = isEmpty;
     }, []);
-    const setEmojiPickerOpenRef = React.useCallback((isEmojiPickerOpen) => {
+    const setEmojiPickerOpenRef = react.useCallback((isEmojiPickerOpen) => {
       isEmojiPickerOpenRef.current = isEmojiPickerOpen;
     }, []);
-    const handleFocus = React.useCallback(
+    const handleFocus = react.useCallback(
       (event) => {
@@ -441,3 +519,3 @@ onFocus?.(event);
     );
-    const handleBlur = React.useCallback(
+    const handleBlur = react.useCallback(
       (event) => {
@@ -457,3 +535,3 @@ onBlur?.(event);
     );
-    const handleEditorClick = React.useCallback(
+    const handleEditorClick = react.useCallback(
       (event) => {
@@ -467,3 +545,3 @@ event.stopPropagation();
     );
-    const handleCommentSubmit = React.useCallback(
+    const handleCommentSubmit = react.useCallback(
       (comment, event) => {
@@ -505,34 +583,37 @@ onComposerSubmit?.(comment, event);
     );
-    return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, /* @__PURE__ */ React.createElement(index.Form, {
-      onComposerSubmit: handleCommentSubmit,
-      className: classNames.classNames(
-        "lb-root lb-composer lb-composer-form",
-        className
-      ),
-      dir: $.dir,
-      ...props,
-      ref: forwardedRef,
-      "data-collapsed": isCollapsed ? "" : void 0,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      disabled: disabled || !canComment,
-      defaultAttachments,
-      pasteFilesAsAttachments: showAttachments,
-      preventUnsavedChanges: preventUnsavedComposerChanges,
-      roomId
-    }, /* @__PURE__ */ React.createElement(ComposerEditorContainer, {
-      defaultValue,
-      actions,
-      overrides: overrides$1,
-      isCollapsed,
-      showAttachments,
-      showAttribution,
-      showFormattingControls,
-      hasResolveMentionSuggestions,
-      onEmptyChange: setEmptyRef,
-      onEmojiPickerOpenChange: setEmojiPickerOpenRef,
-      onEditorClick: handleEditorClick,
-      autoFocus,
-      disabled
-    })));
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(index.Form, {
+        onComposerSubmit: handleCommentSubmit,
+        className: classNames.classNames(
+          "lb-root lb-composer lb-composer-form",
+          className
+        ),
+        dir: $.dir,
+        ...props,
+        ref: forwardedRef,
+        "data-collapsed": isCollapsed ? "" : void 0,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        disabled: disabled || !canComment,
+        defaultAttachments,
+        pasteFilesAsAttachments: showAttachments,
+        preventUnsavedChanges: preventUnsavedComposerChanges,
+        roomId,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorContainer, {
+          defaultValue,
+          actions,
+          overrides: overrides$1,
+          isCollapsed,
+          showAttachments,
+          showAttribution,
+          showFormattingControls,
+          hasResolveMentionSuggestions,
+          onEmptyChange: setEmptyRef,
+          onEmojiPickerOpenChange: setEmojiPickerOpenRef,
+          onEditorClick: handleEditorClick,
+          autoFocus,
+          disabled
+        })
+      })
+    });
   }
@@ -539,0 +620,0 @@ );

dist/components/HistoryVersionSummary.js

@@ -1,5 +0,5 @@
-'use client';
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var overrides = require('../overrides.js');
@@ -12,3 +12,2 @@ require('../primitives/Comment/index.js');
 require('@liveblocks/react');
-require('use-sync-external-store/shim/index.js');
 require('slate');
@@ -23,25 +22,29 @@ require('../primitives/EmojiPicker/index.js');
 const AUTHORS_TRUNCATE = 3;
-const HistoryVersionSummary = React.forwardRef(({ version, selected, className, ...props }, forwardedRef) => {
+const HistoryVersionSummary = react.forwardRef(({ version, selected, className, ...props }, forwardedRef) => {
   const $ = overrides.useOverrides();
-  return /* @__PURE__ */ React.createElement("button", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
     ...props,
     className: classNames.classNames("lb-root lb-history-version-summary", className),
     ref: forwardedRef,
-    "data-selected": selected ? "" : void 0
-  }, /* @__PURE__ */ React.createElement(Timestamp.Timestamp, {
-    locale: $.locale,
-    date: version.createdAt,
-    className: "lb-date lb-history-version-summary-date"
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "lb-history-version-summary-authors"
-  }, /* @__PURE__ */ React.createElement(List.List, {
-    values: version.authors.map((author) => /* @__PURE__ */ React.createElement(User.User, {
-      key: author.id,
-      userId: author.id,
-      replaceSelf: true
-    })),
-    formatRemaining: $.LIST_REMAINING_USERS,
-    truncate: AUTHORS_TRUNCATE,
-    locale: $.locale
-  })));
+    "data-selected": selected ? "" : void 0,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Timestamp.Timestamp, {
+        locale: $.locale,
+        date: version.createdAt,
+        className: "lb-date lb-history-version-summary-date"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: "lb-history-version-summary-authors",
+        children: /* @__PURE__ */ jsxRuntime.jsx(List.List, {
+          values: version.authors.map((author) => /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+            userId: author.id,
+            replaceSelf: true
+          }, author.id)),
+          formatRemaining: $.LIST_REMAINING_USERS,
+          truncate: AUTHORS_TRUNCATE,
+          locale: $.locale
+        })
+      })
+    ]
+  });
 });
@@ -48,0 +51,0 @@

dist/components/HistoryVersionSummaryList.js

@@ -1,9 +0,9 @@
-'use client';
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var classNames = require('../utils/class-names.js');
 
-const HistoryVersionSummaryList = React.forwardRef(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement("ol", {
+const HistoryVersionSummaryList = react.forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", {
     className: classNames.classNames(
@@ -14,7 +14,8 @@ "lb-root lb-history-version-summary-list",
     ...props,
-    ref: forwardedRef
-  }, React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement("li", {
-    key: index,
-    className: "lb-history-version-summary-list-item"
-  }, child)));
+    ref: forwardedRef,
+    children: react.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx("li", {
+      className: "lb-history-version-summary-list-item",
+      children: child
+    }, index))
+  });
 });
@@ -21,0 +22,0 @@

dist/components/InboxNotification.js

@@ -1,9 +0,9 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
-var react = require('@liveblocks/react');
+var react$1 = require('@liveblocks/react');
 var reactSlot = require('@radix-ui/react-slot');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var React = require('react');
+var react = require('react');
 var components = require('../components.js');
@@ -29,3 +29,3 @@ var Check = require('../icons/Check.js');
 
-const InboxNotificationLayout = React.forwardRef(
+const InboxNotificationLayout = react.forwardRef(
   ({
@@ -51,6 +51,6 @@ inboxNotification,
     const Component = asChild ? reactSlot.Slot : Anchor;
-    const [isMoreActionOpen, setMoreActionOpen] = React.useState(false);
-    const markInboxNotificationAsRead = react.useMarkInboxNotificationAsRead();
-    const deleteInboxNotification = react.useDeleteInboxNotification();
-    const handleClick = React.useCallback(
+    const [isMoreActionOpen, setMoreActionOpen] = react.useState(false);
+    const markInboxNotificationAsRead = react$1.useMarkInboxNotificationAsRead();
+    const deleteInboxNotification = react$1.useDeleteInboxNotification();
+    const handleClick = react.useCallback(
       (event) => {
@@ -72,6 +72,6 @@ onClick?.(event);
     );
-    const stopPropagation = React.useCallback((event) => {
+    const stopPropagation = react.useCallback((event) => {
       event.stopPropagation();
     }, []);
-    const preventDefaultAndStopPropagation = React.useCallback(
+    const preventDefaultAndStopPropagation = react.useCallback(
       (event) => {
@@ -83,3 +83,3 @@ event.preventDefault();
     );
-    const handleMoreClick = React.useCallback((event) => {
+    const handleMoreClick = react.useCallback((event) => {
       event.preventDefault();
@@ -89,73 +89,114 @@ event.stopPropagation();
     }, []);
-    const handleMarkAsRead = React.useCallback(() => {
+    const handleMarkAsRead = react.useCallback(() => {
       markInboxNotificationAsRead(inboxNotification.id);
     }, [inboxNotification.id, markInboxNotificationAsRead]);
-    const handleDelete = React.useCallback(() => {
+    const handleDelete = react.useCallback(() => {
       deleteInboxNotification(inboxNotification.id);
     }, [inboxNotification.id, deleteInboxNotification]);
-    return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, /* @__PURE__ */ React.createElement(Component, {
-      className: classNames.classNames(
-        "lb-root lb-inbox-notification",
-        showActions === "hover" && "lb-inbox-notification:show-actions-hover",
-        isMoreActionOpen && "lb-inbox-notification:action-open",
-        className
-      ),
-      dir: $.dir,
-      "data-unread": unread ? "" : void 0,
-      "data-kind": inboxNotification.kind,
-      onClick: handleClick,
-      href,
-      ...props,
-      ref: forwardedRef
-    }, aside && /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-aside"
-    }, aside), /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-content"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-header"
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: "lb-inbox-notification-title"
-    }, title), /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-details"
-    }, /* @__PURE__ */ React.createElement("span", {
-      className: "lb-inbox-notification-details-labels"
-    }, /* @__PURE__ */ React.createElement(Timestamp.Timestamp, {
-      locale: $.locale,
-      date,
-      className: "lb-date lb-inbox-notification-date"
-    }), unread && /* @__PURE__ */ React.createElement("span", {
-      className: "lb-inbox-notification-unread-indicator",
-      role: "presentation"
-    }))), showActions && /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-actions"
-    }, /* @__PURE__ */ React.createElement(Dropdown.Dropdown, {
-      open: isMoreActionOpen,
-      onOpenChange: setMoreActionOpen,
-      align: "end",
-      content: /* @__PURE__ */ React.createElement(React.Fragment, null, unread ? /* @__PURE__ */ React.createElement(Dropdown.DropdownItem, {
-        onSelect: handleMarkAsRead,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React.createElement(Check.CheckIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.INBOX_NOTIFICATION_MARK_AS_READ) : null, /* @__PURE__ */ React.createElement(Dropdown.DropdownItem, {
-        onSelect: handleDelete,
-        onClick: stopPropagation
-      }, /* @__PURE__ */ React.createElement(Delete.DeleteIcon, {
-        className: "lb-dropdown-item-icon"
-      }), $.INBOX_NOTIFICATION_DELETE))
-    }, /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-      content: $.INBOX_NOTIFICATION_MORE
-    }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.DropdownMenuTrigger, {
-      asChild: true
-    }, /* @__PURE__ */ React.createElement(Button.Button, {
-      className: "lb-inbox-notification-action",
-      onClick: handleMoreClick,
-      onPointerDown: preventDefaultAndStopPropagation,
-      onPointerUp: preventDefaultAndStopPropagation,
-      "aria-label": $.INBOX_NOTIFICATION_MORE
-    }, /* @__PURE__ */ React.createElement(Ellipsis.EllipsisIcon, {
-      className: "lb-button-icon"
-    }))))))), /* @__PURE__ */ React.createElement("div", {
-      className: "lb-inbox-notification-body"
-    }, children))));
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Component, {
+        className: classNames.classNames(
+          "lb-root lb-inbox-notification",
+          showActions === "hover" && "lb-inbox-notification:show-actions-hover",
+          isMoreActionOpen && "lb-inbox-notification:action-open",
+          className
+        ),
+        dir: $.dir,
+        "data-unread": unread ? "" : void 0,
+        "data-kind": inboxNotification.kind,
+        onClick: handleClick,
+        href,
+        ...props,
+        ref: forwardedRef,
+        children: [
+          aside && /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-inbox-notification-aside",
+            children: aside
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            className: "lb-inbox-notification-content",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                className: "lb-inbox-notification-header",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    className: "lb-inbox-notification-title",
+                    children: title
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    className: "lb-inbox-notification-details",
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                      className: "lb-inbox-notification-details-labels",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Timestamp.Timestamp, {
+                          locale: $.locale,
+                          date,
+                          className: "lb-date lb-inbox-notification-date"
+                        }),
+                        unread && /* @__PURE__ */ jsxRuntime.jsx("span", {
+                          className: "lb-inbox-notification-unread-indicator",
+                          role: "presentation"
+                        })
+                      ]
+                    })
+                  }),
+                  showActions && /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    className: "lb-inbox-notification-actions",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown, {
+                      open: isMoreActionOpen,
+                      onOpenChange: setMoreActionOpen,
+                      align: "end",
+                      content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                          unread ? /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                            onSelect: handleMarkAsRead,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.INBOX_NOTIFICATION_MARK_AS_READ
+                            ]
+                          }) : null,
+                          /* @__PURE__ */ jsxRuntime.jsxs(Dropdown.DropdownItem, {
+                            onSelect: handleDelete,
+                            onClick: stopPropagation,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Delete.DeleteIcon, {
+                                className: "lb-dropdown-item-icon"
+                              }),
+                              $.INBOX_NOTIFICATION_DELETE
+                            ]
+                          })
+                        ]
+                      }),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                        content: $.INBOX_NOTIFICATION_MORE,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive.DropdownMenuTrigger, {
+                          asChild: true,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                            className: "lb-inbox-notification-action",
+                            onClick: handleMoreClick,
+                            onPointerDown: preventDefaultAndStopPropagation,
+                            onPointerUp: preventDefaultAndStopPropagation,
+                            "aria-label": $.INBOX_NOTIFICATION_MORE,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis.EllipsisIcon, {
+                              className: "lb-button-icon"
+                            })
+                          })
+                        })
+                      })
+                    })
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-inbox-notification-body",
+                children
+              })
+            ]
+          })
+        ]
+      })
+    });
   }
@@ -167,3 +208,3 @@ );
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-inbox-notification-icon", className),
@@ -177,3 +218,3 @@ ...props
 }) {
-  return /* @__PURE__ */ React.createElement(Avatar.Avatar, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
     className: classNames.classNames("lb-inbox-notification-avatar", className),
@@ -183,3 +224,3 @@ ...props
 }
-const InboxNotificationThread = React.forwardRef(
+const InboxNotificationThread = react.forwardRef(
   ({
@@ -196,6 +237,6 @@ inboxNotification,
     const $ = overrides.useOverrides(overrides$1);
-    const thread = react.useInboxNotificationThread(inboxNotification.id);
+    const thread = react$1.useInboxNotificationThread(inboxNotification.id);
     const currentUserId = shared.useCurrentUserId();
-    const { info } = react.useRoomInfo(inboxNotification.roomId);
-    const contents = React.useMemo(() => {
+    const { info } = react$1.useRoomInfo(inboxNotification.roomId);
+    const contents = react.useMemo(() => {
       const contents2 = InboxNotificationThread$1.generateInboxNotificationThreadContents(
@@ -213,12 +254,11 @@ inboxNotification,
           const firstUserId = reversedUserIds[0];
-          const aside2 = /* @__PURE__ */ React.createElement(InboxNotificationAvatar, {
+          const aside2 = /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationAvatar, {
             userId: firstUserId
           });
           const title2 = $.INBOX_NOTIFICATION_THREAD_COMMENTS_LIST(
-            /* @__PURE__ */ React.createElement(List.List, {
-              values: reversedUserIds.map((userId) => /* @__PURE__ */ React.createElement(User.User, {
-                key: userId,
+            /* @__PURE__ */ jsxRuntime.jsx(List.List, {
+              values: reversedUserIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsx(User.User, {
                 userId,
                 replaceSelf: true
-              })),
+              }, userId)),
               formatRemaining: $.LIST_REMAINING_USERS,
@@ -228,3 +268,3 @@ truncate: InboxNotificationThread$1.INBOX_NOTIFICATION_THREAD_MAX_COMMENTS - 1,
             }),
-            showRoomName ? /* @__PURE__ */ React.createElement(Room.Room, {
+            showRoomName ? /* @__PURE__ */ jsxRuntime.jsx(Room.Room, {
               roomId: thread.roomId
@@ -234,12 +274,12 @@ }) : void 0,
           );
-          const content2 = /* @__PURE__ */ React.createElement("div", {
-            className: "lb-inbox-notification-comments"
-          }, contents2.comments.map((comment) => /* @__PURE__ */ React.createElement(InboxNotificationThread$1.InboxNotificationComment, {
-            key: comment.id,
-            comment,
-            showHeader: contents2.comments.length > 1,
-            showAttachments,
-            showReactions,
-            overrides: overrides$1
-          })));
+          const content2 = /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-inbox-notification-comments",
+            children: contents2.comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationThread$1.InboxNotificationComment, {
+              comment,
+              showHeader: contents2.comments.length > 1,
+              showAttachments,
+              showReactions,
+              overrides: overrides$1
+            }, comment.id))
+          });
           return {
@@ -258,24 +298,23 @@ unread: contents2.unread,
           const mentionComment = contents2.comments[0];
-          const aside2 = /* @__PURE__ */ React.createElement(InboxNotificationAvatar, {
+          const aside2 = /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationAvatar, {
             userId: mentionUserId
           });
           const title2 = $.INBOX_NOTIFICATION_THREAD_MENTION(
-            /* @__PURE__ */ React.createElement(User.User, {
-              key: mentionUserId,
+            /* @__PURE__ */ jsxRuntime.jsx(User.User, {
               userId: mentionUserId
-            }),
-            showRoomName ? /* @__PURE__ */ React.createElement(Room.Room, {
+            }, mentionUserId),
+            showRoomName ? /* @__PURE__ */ jsxRuntime.jsx(Room.Room, {
               roomId: thread.roomId
             }) : void 0
           );
-          const content2 = /* @__PURE__ */ React.createElement("div", {
-            className: "lb-inbox-notification-comments"
-          }, /* @__PURE__ */ React.createElement(InboxNotificationThread$1.InboxNotificationComment, {
-            key: mentionComment.id,
-            comment: mentionComment,
-            showHeader: false,
-            showAttachments,
-            showReactions,
-            overrides: overrides$1
-          }));
+          const content2 = /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-inbox-notification-comments",
+            children: /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationThread$1.InboxNotificationComment, {
+              comment: mentionComment,
+              showHeader: false,
+              showAttachments,
+              showReactions,
+              overrides: overrides$1
+            }, mentionComment.id)
+          });
           return {
@@ -307,3 +346,3 @@ unread: contents2.unread,
     ]);
-    const resolvedHref = React.useMemo(() => {
+    const resolvedHref = react.useMemo(() => {
       const resolvedHref2 = href ?? info?.url;
@@ -316,3 +355,3 @@ return resolvedHref2 ? url.generateURL(resolvedHref2, void 0, contents?.commentId) : void 0;
     const { aside, title, content, date, unread } = contents;
-    return /* @__PURE__ */ React.createElement(InboxNotificationLayout, {
+    return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationLayout, {
       inboxNotification,
@@ -328,7 +367,8 @@ aside,
       ...props,
-      ref: forwardedRef
-    }, content);
+      ref: forwardedRef,
+      children: content
+    });
   }
 );
-const InboxNotificationTextMention = React.forwardRef(
+const InboxNotificationTextMention = react.forwardRef(
   ({
@@ -342,16 +382,15 @@ inboxNotification,
     const $ = overrides.useOverrides(overrides$1);
-    const unread = React.useMemo(() => {
+    const unread = react.useMemo(() => {
       return !inboxNotification.readAt || inboxNotification.notifiedAt > inboxNotification.readAt;
     }, [inboxNotification.notifiedAt, inboxNotification.readAt]);
-    return /* @__PURE__ */ React.createElement(InboxNotificationLayout, {
+    return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationLayout, {
       inboxNotification,
-      aside: /* @__PURE__ */ React.createElement(InboxNotificationAvatar, {
+      aside: /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationAvatar, {
         userId: inboxNotification.createdBy
       }),
       title: $.INBOX_NOTIFICATION_TEXT_MENTION(
-        /* @__PURE__ */ React.createElement(User.User, {
-          key: inboxNotification.createdBy,
+        /* @__PURE__ */ jsxRuntime.jsx(User.User, {
           userId: inboxNotification.createdBy
-        }),
-        showRoomName ? /* @__PURE__ */ React.createElement(Room.Room, {
+        }, inboxNotification.createdBy),
+        showRoomName ? /* @__PURE__ */ jsxRuntime.jsx(Room.Room, {
           roomId: inboxNotification.roomId
@@ -369,3 +408,3 @@ }) : void 0
 );
-const InboxNotificationCustom = React.forwardRef(
+const InboxNotificationCustom = react.forwardRef(
   ({
@@ -380,6 +419,6 @@ inboxNotification,
   }, forwardedRef) => {
-    const unread = React.useMemo(() => {
+    const unread = react.useMemo(() => {
       return !inboxNotification.readAt || inboxNotification.notifiedAt > inboxNotification.readAt;
     }, [inboxNotification.notifiedAt, inboxNotification.readAt]);
-    return /* @__PURE__ */ React.createElement(InboxNotificationLayout, {
+    return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationLayout, {
       inboxNotification,
@@ -393,19 +432,38 @@ aside,
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
-const InboxNotificationCustomMissing = React.forwardRef(({ inboxNotification, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement(InboxNotificationCustom, {
+const InboxNotificationCustomMissing = react.forwardRef(({ inboxNotification, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(InboxNotificationCustom, {
     inboxNotification,
     ...props,
-    title: /* @__PURE__ */ React.createElement(React.Fragment, null, "Custom notification kind ", /* @__PURE__ */ React.createElement("code", null, inboxNotification.kind), " is not handled"),
-    aside: /* @__PURE__ */ React.createElement(InboxNotificationIcon, null, /* @__PURE__ */ React.createElement(Warning.WarningIcon, null)),
+    title: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        "Custom notification kind ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", {
+          children: inboxNotification.kind
+        }),
+        " is not handled"
+      ]
+    }),
+    aside: /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationIcon, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(Warning.WarningIcon, {})
+    }),
     ref: forwardedRef,
-    "data-missing": ""
-  }, "Notifications of this kind won\u2019t be displayed in production. Use the", " ", /* @__PURE__ */ React.createElement("code", null, "kinds"), " prop to define how they should be rendered.");
+    "data-missing": "",
+    children: [
+      "Notifications of this kind won\u2019t be displayed in production. Use the",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", {
+        children: "kinds"
+      }),
+      " prop to define how they should be rendered."
+    ]
+  });
 });
 const inboxNotificationKindsWarnings = /* @__PURE__ */ new Set();
 const InboxNotification = Object.assign(
-  React.forwardRef(
+  react.forwardRef(
     ({ inboxNotification, kinds, ...props }, forwardedRef) => {
@@ -415,3 +473,3 @@ switch (inboxNotification.kind) {
           const ResolvedInboxNotificationThread = kinds?.thread ?? InboxNotificationThread;
-          return /* @__PURE__ */ React.createElement(ResolvedInboxNotificationThread, {
+          return /* @__PURE__ */ jsxRuntime.jsx(ResolvedInboxNotificationThread, {
             inboxNotification,
@@ -424,3 +482,3 @@ ...props,
           const ResolvedInboxNotificationTextMention = kinds?.textMention ?? InboxNotificationTextMention;
-          return /* @__PURE__ */ React.createElement(ResolvedInboxNotificationTextMention, {
+          return /* @__PURE__ */ jsxRuntime.jsx(ResolvedInboxNotificationTextMention, {
             inboxNotification,
@@ -441,3 +499,3 @@ ...props,
               }
-              return /* @__PURE__ */ React.createElement(InboxNotificationCustomMissing, {
+              return /* @__PURE__ */ jsxRuntime.jsx(InboxNotificationCustomMissing, {
                 inboxNotification,
@@ -451,3 +509,3 @@ ...props,
           }
-          return /* @__PURE__ */ React.createElement(ResolvedInboxNotificationCustom, {
+          return /* @__PURE__ */ jsxRuntime.jsx(ResolvedInboxNotificationCustom, {
             inboxNotification,
@@ -454,0 +512,0 @@ ...props,

dist/components/InboxNotificationList.js

@@ -1,5 +0,5 @@
-'use client';
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var classNames = require('../utils/class-names.js');
@@ -12,7 +12,7 @@ var useVisible = require('../utils/use-visible.js');
 }) {
-  const markerRef = React.useRef(null);
+  const markerRef = react.useRef(null);
   useVisible.useVisibleCallback(markerRef, onReachEnd, {
     enabled
   });
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: markerRef,
@@ -22,14 +22,18 @@ style: { height: 0 }
 }
-const InboxNotificationList = React.forwardRef(({ onReachEnd, children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement("ol", {
+const InboxNotificationList = react.forwardRef(({ onReachEnd, children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("ol", {
     className: classNames.classNames("lb-root lb-inbox-notification-list", className),
     ...props,
-    ref: forwardedRef
-  }, React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement("li", {
-    key: index,
-    className: "lb-inbox-notification-list-item"
-  }, child)), onReachEnd && /* @__PURE__ */ React.createElement(ReachEndMarker, {
-    onReachEnd,
-    enabled: React.Children.count(children) > 0
-  }));
+    ref: forwardedRef,
+    children: [
+      react.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx("li", {
+        className: "lb-inbox-notification-list-item",
+        children: child
+      }, index)),
+      onReachEnd && /* @__PURE__ */ jsxRuntime.jsx(ReachEndMarker, {
+        onReachEnd,
+        enabled: react.Children.count(children) > 0
+      })
+    ]
+  });
 });
@@ -36,0 +40,0 @@

dist/components/internal/Attachment.js

@@ -1,6 +0,6 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var _private = require('@liveblocks/react/_private');
-var React = require('react');
+var react = require('react');
 var Cross = require('../../icons/Cross.js');
@@ -29,3 +29,3 @@ var Spinner = require('../../icons/Spinner.js');
   if (mimeType === "application/zip" || mimeType === "application/gzip" || mimeType === "application/vnd.rar" || mimeType === "application/x-rar-compressed" || mimeType === "application/x-7z-compressed" || mimeType === "application/x-zip-compressed" || mimeType === "application/x-tar" || mimeType === "application/x-bzip" || mimeType === "application/x-bzip2") {
-    return /* @__PURE__ */ React.createElement("path", {
+    return /* @__PURE__ */ jsxRuntime.jsx("path", {
       d: "M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z"
@@ -35,3 +35,3 @@ });
   if (mimeType.startsWith("text/") || mimeType.startsWith("font/") || mimeType.startsWith("application/")) {
-    return /* @__PURE__ */ React.createElement("path", {
+    return /* @__PURE__ */ jsxRuntime.jsx("path", {
       d: "M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z"
@@ -41,3 +41,3 @@ });
   if (mimeType.startsWith("image/")) {
-    return /* @__PURE__ */ React.createElement("path", {
+    return /* @__PURE__ */ jsxRuntime.jsx("path", {
       d: "M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
@@ -47,3 +47,3 @@ });
   if (mimeType.startsWith("video/")) {
-    return /* @__PURE__ */ React.createElement("path", {
+    return /* @__PURE__ */ jsxRuntime.jsx("path", {
       d: "M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z"
@@ -53,3 +53,3 @@ });
   if (mimeType.startsWith("audio/")) {
-    return /* @__PURE__ */ React.createElement("path", {
+    return /* @__PURE__ */ jsxRuntime.jsx("path", {
       d: "M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z"
@@ -60,5 +60,5 @@ });
 }
-const AttachmentFileIcon = React.memo(({ mimeType }) => {
-  const iconGlyph = React.useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);
-  return /* @__PURE__ */ React.createElement("svg", {
+const AttachmentFileIcon = react.memo(({ mimeType }) => {
+  const iconGlyph = react.useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", {
     className: "lb-attachment-icon",
@@ -71,15 +71,22 @@ width: 30,
     clipRule: "evenodd",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
-    className: "lb-attachment-icon-shadow"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
-    className: "lb-attachment-icon-background"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
-    className: "lb-attachment-icon-fold"
-  }), iconGlyph && /* @__PURE__ */ React.createElement("g", {
-    className: "lb-attachment-icon-glyph"
-  }, iconGlyph));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
+        className: "lb-attachment-icon-shadow"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
+        className: "lb-attachment-icon-background"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
+        className: "lb-attachment-icon-fold"
+      }),
+      iconGlyph && /* @__PURE__ */ jsxRuntime.jsx("g", {
+        className: "lb-attachment-icon-glyph",
+        children: iconGlyph
+      })
+    ]
+  });
 });
@@ -92,15 +99,21 @@ function AttachmentImagePreview({
   const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
-  const [isLoaded, setLoaded] = React.useState(false);
-  const handleLoad = React.useCallback(() => {
+  const [isLoaded, setLoaded] = react.useState(false);
+  const handleLoad = react.useCallback(() => {
     setLoaded(true);
   }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isLoaded ? /* @__PURE__ */ React.createElement(Spinner.SpinnerIcon, null) : null, url ? /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachment-preview-media",
-    "data-hidden": !isLoaded ? "" : void 0
-  }, /* @__PURE__ */ React.createElement("img", {
-    src: url,
-    loading: "lazy",
-    onLoad: handleLoad,
-    onError: markPreviewAsUnsupported
-  })) : null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      !isLoaded ? /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {}) : null,
+      url ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-attachment-preview-media",
+        "data-hidden": !isLoaded ? "" : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx("img", {
+          src: url,
+          loading: "lazy",
+          onLoad: handleLoad,
+          onError: markPreviewAsUnsupported
+        })
+      }) : null
+    ]
+  });
 }
@@ -113,14 +126,20 @@ function AttachmentVideoPreview({
   const { url } = _private.useRoomAttachmentUrl(attachment.id, roomId);
-  const [isLoaded, setLoaded] = React.useState(false);
-  const handleLoad = React.useCallback(() => {
+  const [isLoaded, setLoaded] = react.useState(false);
+  const handleLoad = react.useCallback(() => {
     setLoaded(true);
   }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isLoaded ? /* @__PURE__ */ React.createElement(Spinner.SpinnerIcon, null) : null, url ? /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachment-preview-media",
-    "data-hidden": !isLoaded ? "" : void 0
-  }, /* @__PURE__ */ React.createElement("video", {
-    src: url,
-    onLoadedData: handleLoad,
-    onError: markPreviewAsUnsupported
-  })) : null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      !isLoaded ? /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {}) : null,
+      url ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-attachment-preview-media",
+        "data-hidden": !isLoaded ? "" : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx("video", {
+          src: url,
+          onLoadedData: handleLoad,
+          onError: markPreviewAsUnsupported
+        })
+      }) : null
+    ]
+  });
 }
@@ -132,3 +151,3 @@ function AttachmentPreview({
 }) {
-  const [isUnsupportedPreview, setUnsupportedPreview] = React.useState(false);
+  const [isUnsupportedPreview, setUnsupportedPreview] = react.useState(false);
   const isUploaded = attachment.type === "attachment" || attachment.status === "uploaded";
@@ -140,3 +159,3 @@ function markPreviewAsUnsupported() {
     if (attachment.mimeType.startsWith("image/")) {
-      return /* @__PURE__ */ React.createElement(AttachmentImagePreview, {
+      return /* @__PURE__ */ jsxRuntime.jsx(AttachmentImagePreview, {
         attachment,
@@ -148,3 +167,3 @@ markPreviewAsUnsupported,
     if (attachment.mimeType.startsWith("video/")) {
-      return /* @__PURE__ */ React.createElement(AttachmentVideoPreview, {
+      return /* @__PURE__ */ jsxRuntime.jsx(AttachmentVideoPreview, {
         attachment,
@@ -156,3 +175,3 @@ markPreviewAsUnsupported,
   }
-  return /* @__PURE__ */ React.createElement(AttachmentFileIcon, {
+  return /* @__PURE__ */ jsxRuntime.jsx(AttachmentFileIcon, {
     mimeType: attachment.mimeType
@@ -164,16 +183,22 @@ });
 }) {
-  const { base: fileBaseName, extension: fileExtension } = React.useMemo(() => {
+  const { base: fileBaseName, extension: fileExtension } = react.useMemo(() => {
     return splitFileName(attachment.name);
   }, [attachment.name]);
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
     className: "lb-attachment-name",
-    title: attachment.name
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "lb-attachment-name-base"
-  }, fileBaseName), fileExtension && /* @__PURE__ */ React.createElement("span", {
-    className: "lb-attachment-name-extension"
-  }, fileExtension));
+    title: attachment.name,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: "lb-attachment-name-base",
+        children: fileBaseName
+      }),
+      fileExtension && /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: "lb-attachment-name-extension",
+        children: fileExtension
+      })
+    ]
+  });
 }
 function useClickOnKeyDown(onKeyDown) {
-  const handleKeyDown = React.useCallback(
+  const handleKeyDown = react.useCallback(
     (event) => {
@@ -243,3 +268,3 @@ onKeyDown?.(event);
   const { isUploading, isError, description, deleteLabel } = useAttachmentContent(attachment, overrides);
-  const handleDeletePointerDown = React.useCallback(
+  const handleDeletePointerDown = react.useCallback(
     (event) => {
@@ -253,3 +278,3 @@ if (preventFocusOnDelete) {
   const handleKeyDown = useClickOnKeyDown(onKeyDown);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: classNames.classNames("lb-attachment lb-media-attachment", className),
@@ -261,25 +286,38 @@ "data-error": isError ? "" : void 0,
     tabIndex: onClick ? 0 : -1,
-    onKeyDown: onClick ? handleKeyDown : void 0
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachment-preview"
-  }, isUploading ? /* @__PURE__ */ React.createElement(Spinner.SpinnerIcon, null) : isError ? /* @__PURE__ */ React.createElement(Warning.WarningIcon, null) : /* @__PURE__ */ React.createElement(AttachmentPreview, {
-    attachment,
-    allowMediaPreview,
-    roomId
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachment-details"
-  }, /* @__PURE__ */ React.createElement(AttachmentName, {
-    attachment
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "lb-attachment-description",
-    title: description
-  }, description)), onDeleteClick && /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: deleteLabel
-  }, /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "lb-attachment-delete",
-    onClick: onDeleteClick,
-    onPointerDown: handleDeletePointerDown,
-    "aria-label": deleteLabel
-  }, /* @__PURE__ */ React.createElement(Cross.CrossIcon, null))));
+    onKeyDown: onClick ? handleKeyDown : void 0,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-attachment-preview",
+        children: isUploading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(Warning.WarningIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, {
+          attachment,
+          allowMediaPreview,
+          roomId
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: "lb-attachment-details",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AttachmentName, {
+            attachment
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", {
+            className: "lb-attachment-description",
+            title: description,
+            children: description
+          })
+        ]
+      }),
+      onDeleteClick && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+        content: deleteLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx("button", {
+          type: "button",
+          className: "lb-attachment-delete",
+          onClick: onDeleteClick,
+          onPointerDown: handleDeletePointerDown,
+          "aria-label": deleteLabel,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {})
+        })
+      })
+    ]
+  });
 }
@@ -299,3 +337,3 @@ function FileAttachment({
   const { isUploading, isError, description, deleteLabel } = useAttachmentContent(attachment, overrides);
-  const handleDeletePointerDown = React.useCallback(
+  const handleDeletePointerDown = react.useCallback(
     (event) => {
@@ -309,3 +347,3 @@ if (preventFocusOnDelete) {
   const handleKeyDown = useClickOnKeyDown(onKeyDown);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: classNames.classNames("lb-attachment lb-file-attachment", className),
@@ -317,25 +355,38 @@ "data-error": isError ? "" : void 0,
     tabIndex: onClick ? 0 : -1,
-    onKeyDown: onClick ? handleKeyDown : void 0
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachment-preview"
-  }, isUploading ? /* @__PURE__ */ React.createElement(Spinner.SpinnerIcon, null) : isError ? /* @__PURE__ */ React.createElement(Warning.WarningIcon, null) : /* @__PURE__ */ React.createElement(AttachmentPreview, {
-    attachment,
-    allowMediaPreview,
-    roomId
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachment-details"
-  }, /* @__PURE__ */ React.createElement(AttachmentName, {
-    attachment
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "lb-attachment-description",
-    title: description
-  }, description)), onDeleteClick && /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: deleteLabel
-  }, /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "lb-attachment-delete",
-    onClick: onDeleteClick,
-    onPointerDown: handleDeletePointerDown,
-    "aria-label": deleteLabel
-  }, /* @__PURE__ */ React.createElement(Cross.CrossIcon, null))));
+    onKeyDown: onClick ? handleKeyDown : void 0,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-attachment-preview",
+        children: isUploading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(Warning.WarningIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, {
+          attachment,
+          allowMediaPreview,
+          roomId
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: "lb-attachment-details",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AttachmentName, {
+            attachment
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", {
+            className: "lb-attachment-description",
+            title: description,
+            children: description
+          })
+        ]
+      }),
+      onDeleteClick && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+        content: deleteLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx("button", {
+          type: "button",
+          className: "lb-attachment-delete",
+          onClick: onDeleteClick,
+          onPointerDown: handleDeletePointerDown,
+          "aria-label": deleteLabel,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Cross.CrossIcon, {})
+        })
+      })
+    ]
+  });
 }
@@ -342,0 +393,0 @@ function separateMediaAttachments(attachments) {

dist/components/internal/Attribution.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/class-names.js');
 
 function Attribution({ className, ...props }) {
-  return /* @__PURE__ */ React.createElement("a", {
+  return /* @__PURE__ */ jsxRuntime.jsx("a", {
     href: "https://liveblocks.io",
@@ -12,13 +12,15 @@ target: "_blank",
     className: classNames.classNames("lb-composer-attribution", className),
-    ...props
-  }, /* @__PURE__ */ React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 384 72",
-    "aria-label": "Made with Liveblocks"
-  }, /* @__PURE__ */ React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M86 10h-8v50h8V10Zm16 14h-8v36h8V24Zm0-15h-8v9h8V9Zm13 15h-9l12 36h10l13-36h-9l-9 28-8-28Zm44-1c-11 0-18 8-18 19s7 19 18 19c8 0 15-4 17-13h-8c-1 4-5 6-9 6-6 0-9-3-9-10h27c0-10-6-21-18-21Zm0 7c5 0 9 3 9 8h-18c0-5 4-8 9-8Zm42-7c-4 0-8 2-11 6V10h-8v50h8v-5c3 4 7 6 11 6 11 0 16-9 16-19s-5-19-16-19Zm-2 32c-7 0-9-7-9-13s2-13 9-13 9 7 9 13-2 13-9 13Zm32-45h-8v50h8V10Zm24 51c11 0 18-8 18-19s-8-19-18-19c-11 0-19 8-19 19s7 19 19 19Zm0-6c-8 0-10-7-10-13s2-13 10-13c7 0 9 7 9 13s-2 13-9 13Zm39 6c8 0 15-4 17-12l-8-1c-2 4-4 6-9 6-7 0-9-6-9-12s2-12 9-12c5 0 8 3 8 7l9-1c-2-8-9-13-17-13-11 0-18 9-18 19 0 11 7 19 18 19Zm30-14 4-4 10 17h10l-15-23 15-13h-11l-13 13V10h-9v50h9V47Zm39 14c8 0 16-3 16-12 0-8-8-10-15-11-2-1-7-1-7-5 0-3 3-4 6-4 4 0 7 3 7 7l8-1c-1-9-8-12-15-12s-15 3-15 11 9 10 15 11c3 1 8 2 8 5 0 4-4 5-7 5-5 0-8-3-9-7l-8 1c1 8 9 12 16 12ZM41 27H0l12 12v17l29-29ZM20 60h40L48 48V32L20 60Z",
-    fill: "currentColor"
-  })));
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 384 72",
+      "aria-label": "Made with Liveblocks",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M86 10h-8v50h8V10Zm16 14h-8v36h8V24Zm0-15h-8v9h8V9Zm13 15h-9l12 36h10l13-36h-9l-9 28-8-28Zm44-1c-11 0-18 8-18 19s7 19 18 19c8 0 15-4 17-13h-8c-1 4-5 6-9 6-6 0-9-3-9-10h27c0-10-6-21-18-21Zm0 7c5 0 9 3 9 8h-18c0-5 4-8 9-8Zm42-7c-4 0-8 2-11 6V10h-8v50h8v-5c3 4 7 6 11 6 11 0 16-9 16-19s-5-19-16-19Zm-2 32c-7 0-9-7-9-13s2-13 9-13 9 7 9 13-2 13-9 13Zm32-45h-8v50h8V10Zm24 51c11 0 18-8 18-19s-8-19-18-19c-11 0-19 8-19 19s7 19 19 19Zm0-6c-8 0-10-7-10-13s2-13 10-13c7 0 9 7 9 13s-2 13-9 13Zm39 6c8 0 15-4 17-12l-8-1c-2 4-4 6-9 6-7 0-9-6-9-12s2-12 9-12c5 0 8 3 8 7l9-1c-2-8-9-13-17-13-11 0-18 9-18 19 0 11 7 19 18 19Zm30-14 4-4 10 17h10l-15-23 15-13h-11l-13 13V10h-9v50h9V47Zm39 14c8 0 16-3 16-12 0-8-8-10-15-11-2-1-7-1-7-5 0-3 3-4 6-4 4 0 7 3 7 7l8-1c-1-9-8-12-15-12s-15 3-15 11 9 10 15 11c3 1 8 2 8 5 0 4-4 5-7 5-5 0-8-3-9-7l-8 1c1 8 9 12 16 12ZM41 27H0l12 12v17l29-29ZM20 60h40L48 48V32L20 60Z",
+        fill: "currentColor"
+      })
+    })
+  });
 }
@@ -25,0 +27,0 @@

dist/components/internal/Avatar.js

@@ -1,6 +0,6 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var react = require('@liveblocks/react');
-var React = require('react');
+var react$1 = require('react');
 var classNames = require('../../utils/class-names.js');
@@ -11,28 +11,34 @@ var getInitials = require('../../utils/get-initials.js');
   const { user, isLoading } = react.useUser(userId);
-  const resolvedUserName = React.useMemo(() => user?.name, [user]);
-  const resolvedUserAvatar = React.useMemo(() => user?.avatar, [user]);
-  const resolvedUserInitials = React.useMemo(
+  const resolvedUserName = react$1.useMemo(() => user?.name, [user]);
+  const resolvedUserAvatar = react$1.useMemo(() => user?.avatar, [user]);
+  const resolvedUserInitials = react$1.useMemo(
     () => resolvedUserName ? getInitials.getInitials(resolvedUserName) : void 0,
     [resolvedUserName]
   );
-  const resolvedUserIdInitials = React.useMemo(
+  const resolvedUserIdInitials = react$1.useMemo(
     () => !isLoading && !user ? getInitials.getInitials(userId) : void 0,
     [isLoading, user, userId]
   );
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: classNames.classNames("lb-avatar", className),
     "data-loading": isLoading ? "" : void 0,
-    ...props
-  }, resolvedUserAvatar && /* @__PURE__ */ React.createElement("img", {
-    className: "lb-avatar-image",
-    src: resolvedUserAvatar,
-    alt: resolvedUserName
-  }), resolvedUserInitials ? /* @__PURE__ */ React.createElement("span", {
-    className: "lb-avatar-fallback",
-    "aria-hidden": true
-  }, resolvedUserInitials) : resolvedUserIdInitials ? /* @__PURE__ */ React.createElement("span", {
-    className: "lb-avatar-fallback",
-    "aria-label": userId,
-    title: userId
-  }, resolvedUserIdInitials) : null);
+    ...props,
+    children: [
+      resolvedUserAvatar && /* @__PURE__ */ jsxRuntime.jsx("img", {
+        className: "lb-avatar-image",
+        src: resolvedUserAvatar,
+        alt: resolvedUserName
+      }),
+      resolvedUserInitials ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: "lb-avatar-fallback",
+        "aria-hidden": true,
+        children: resolvedUserInitials
+      }) : resolvedUserIdInitials ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: "lb-avatar-fallback",
+        "aria-label": userId,
+        title: userId,
+        children: resolvedUserIdInitials
+      }) : null
+    ]
+  });
 }
@@ -39,0 +45,0 @@

dist/components/internal/Button.js

@@ -1,8 +0,8 @@
-'use client';
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var classNames = require('../../utils/class-names.js');
 
-const Button = React.forwardRef(
+const Button = react.forwardRef(
   ({
@@ -15,3 +15,3 @@ variant = "default",
   }, forwardedRef) => {
-    return /* @__PURE__ */ React.createElement("button", {
+    return /* @__PURE__ */ jsxRuntime.jsx("button", {
       type: "button",
@@ -18,0 +18,0 @@ className: classNames.classNames(

dist/components/internal/Dropdown.js

@@ -1,6 +0,6 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var React = require('react');
+var react = require('react');
 var config = require('../../config.js');
@@ -41,25 +41,32 @@ var constants = require('../../constants.js');
   const { portalContainer } = config.useLiveblocksUIConfig();
-  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive__namespace.Root, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.Root, {
     defaultOpen,
     open,
     onOpenChange,
-    dir: $.dir
-  }, children, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive__namespace.Portal, {
-    container: portalContainer
-  }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive__namespace.Content, {
-    className: classNames.classNames(
-      "lb-root lb-portal lb-elevation lb-dropdown",
-      className
-    ),
-    sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
-    collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
-    ...props
-  }, content)));
+    dir: $.dir,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, {
+        container: portalContainer,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Content, {
+          className: classNames.classNames(
+            "lb-root lb-portal lb-elevation lb-dropdown",
+            className
+          ),
+          sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+          collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+          ...props,
+          children: content
+        })
+      })
+    ]
+  });
 }
-const DropdownItem = React.forwardRef(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive__namespace.DropdownMenuItem, {
+const DropdownItem = react.forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.DropdownMenuItem, {
     className: classNames.classNames("lb-dropdown-item", className),
     ...props,
-    ref: forwardedRef
-  }, children);
+    ref: forwardedRef,
+    children
+  });
 });
@@ -66,0 +73,0 @@

dist/components/internal/Emoji.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var Emoji$1 = require('../../primitives/internal/Emoji.js');
 var classNames = require('../../utils/class-names.js');
 
-const Emoji = React.forwardRef(
+const Emoji = react.forwardRef(
   ({ className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ React.createElement(Emoji$1.Emoji, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Emoji$1.Emoji, {
       className: classNames.classNames("lb-emoji", className),
@@ -11,0 +12,0 @@ ...props,

dist/components/internal/EmojiPicker.js

 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var PopoverPrimitive = require('@radix-ui/react-popover');
-var React = require('react');
+var react = require('react');
 var config = require('../../config.js');
@@ -37,6 +38,7 @@ var constants = require('../../constants.js');
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-loading lb-emoji-picker-loading", className),
-    ...props
-  }, /* @__PURE__ */ React.createElement(Spinner.SpinnerIcon, null));
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Spinner.SpinnerIcon, {})
+  });
 }
@@ -48,6 +50,7 @@ function EmojiPickerEmpty({
   const $ = overrides.useOverrides();
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-empty lb-emoji-picker-empty", className),
-    ...props
-  }, $.EMOJI_PICKER_EMPTY);
+    ...props,
+    children: $.EMOJI_PICKER_EMPTY
+  });
 }
@@ -60,6 +63,7 @@ function EmojiPickerError({
   const $ = overrides.useOverrides();
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-error lb-emoji-picker-error", className),
-    ...props
-  }, $.EMOJI_PICKER_ERROR(error));
+    ...props,
+    children: $.EMOJI_PICKER_ERROR(error)
+  });
 }
@@ -71,8 +75,10 @@ function EmojiPickerCategoryHeader({
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-emoji-picker-category-header", className),
-    ...props
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "lb-emoji-picker-category-header-title"
-  }, category));
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+      className: "lb-emoji-picker-category-header-title",
+      children: category
+    })
+  });
 }
@@ -84,6 +90,7 @@ function EmojiPickerGrid({
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-emoji-picker-grid", className),
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
@@ -96,16 +103,17 @@ function EmojiPickerRow({
 }) {
-  const isFirstRow = React.useMemo(
+  const isFirstRow = react.useMemo(
     () => attributes.categoryRowIndex === 0,
     [attributes.categoryRowIndex]
   );
-  const isLastRow = React.useMemo(
+  const isLastRow = react.useMemo(
     () => attributes.categoryRowIndex === attributes.categoryRowsCount - 1,
     [attributes.categoryRowIndex, attributes.categoryRowsCount]
   );
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: classNames.classNames("lb-emoji-picker-row", className),
     "data-first": isFirstRow ? "" : void 0,
     "data-last": isLastRow ? "" : void 0,
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
@@ -117,15 +125,16 @@ function EmojiPickerEmoji({
 }) {
-  return /* @__PURE__ */ React.createElement("button", {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", {
     className: classNames.classNames("lb-emoji-picker-emoji", className),
-    ...props
-  }, /* @__PURE__ */ React.createElement(Emoji.Emoji, {
-    emoji
-  }));
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, {
+      emoji
+    })
+  });
 }
-const EmojiPicker = React.forwardRef(
+const EmojiPicker = react.forwardRef(
   ({ onEmojiSelect, onOpenChange, children, className, ...props }, forwardedRef) => {
-    const [isOpen, setOpen] = React.useState(false);
+    const [isOpen, setOpen] = react.useState(false);
     const { portalContainer } = config.useLiveblocksUIConfig();
     const $ = overrides.useOverrides();
-    const handleOpenChange = React.useCallback(
+    const handleOpenChange = react.useCallback(
       (isOpen2) => {
@@ -137,3 +146,3 @@ setOpen(isOpen2);
     );
-    const handleEmojiSelect = React.useCallback(
+    const handleEmojiSelect = react.useCallback(
       (emoji) => {
@@ -145,43 +154,58 @@ setOpen(false);
     );
-    return /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Root, {
+    return /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, {
       open: isOpen,
-      onOpenChange: handleOpenChange
-    }, children, /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Portal, {
-      container: portalContainer
-    }, /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Content, {
-      side: "top",
-      align: "center",
-      sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
-      collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
-      className: classNames.classNames(
-        "lb-root lb-portal lb-elevation lb-emoji-picker",
-        className
-      ),
-      ...props,
-      ref: forwardedRef
-    }, /* @__PURE__ */ React.createElement(index.Root, {
-      onEmojiSelect: handleEmojiSelect,
-      locale: $.locale
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-emoji-picker-header"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-emoji-picker-search-container"
-    }, /* @__PURE__ */ React.createElement(index.Search, {
-      className: "lb-emoji-picker-search",
-      placeholder: $.EMOJI_PICKER_SEARCH_PLACEHOLDER,
-      autoFocus: true
-    }), /* @__PURE__ */ React.createElement(Search.SearchIcon, {
-      className: "lb-emoji-picker-search-icon"
-    }))), /* @__PURE__ */ React.createElement(index.Content, {
-      className: "lb-emoji-picker-content",
-      components: {
-        Loading: EmojiPickerLoading,
-        Empty: EmojiPickerEmpty,
-        Error: EmojiPickerError,
-        CategoryHeader: EmojiPickerCategoryHeader,
-        Grid: EmojiPickerGrid,
-        Row: EmojiPickerRow,
-        Emoji: EmojiPickerEmoji
-      }
-    })))));
+      onOpenChange: handleOpenChange,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, {
+          container: portalContainer,
+          children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, {
+            side: "top",
+            align: "center",
+            sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+            collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+            className: classNames.classNames(
+              "lb-root lb-portal lb-elevation lb-emoji-picker",
+              className
+            ),
+            ...props,
+            ref: forwardedRef,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(index.Root, {
+              onEmojiSelect: handleEmojiSelect,
+              locale: $.locale,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  className: "lb-emoji-picker-header",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    className: "lb-emoji-picker-search-container",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(index.Search, {
+                        className: "lb-emoji-picker-search",
+                        placeholder: $.EMOJI_PICKER_SEARCH_PLACEHOLDER,
+                        autoFocus: true
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Search.SearchIcon, {
+                        className: "lb-emoji-picker-search-icon"
+                      })
+                    ]
+                  })
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx(index.Content, {
+                  className: "lb-emoji-picker-content",
+                  components: {
+                    Loading: EmojiPickerLoading,
+                    Empty: EmojiPickerEmpty,
+                    Error: EmojiPickerError,
+                    CategoryHeader: EmojiPickerCategoryHeader,
+                    Grid: EmojiPickerGrid,
+                    Row: EmojiPickerRow,
+                    Emoji: EmojiPickerEmoji
+                  }
+                })
+              ]
+            })
+          })
+        })
+      ]
+    });
   }
@@ -188,0 +212,0 @@ );

dist/components/internal/Icon.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/class-names.js');
@@ -9,3 +9,3 @@
 function Icon({ children, className, ...props }) {
-  return /* @__PURE__ */ React.createElement("svg", {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -22,4 +22,5 @@ width: ICON_WIDTH,
     className: classNames.classNames("lb-icon", className),
-    ...props
-  }, children);
+    ...props,
+    children
+  });
 }
@@ -26,0 +27,0 @@

dist/components/internal/InboxNotificationThread.js

 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
-var React = require('react');
 var overrides = require('../../overrides.js');
@@ -22,3 +22,3 @@ var index = require('../../primitives/Comment/index.js');
   const $ = overrides.useOverrides(overrides$1);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     className: classNames.classNames(
@@ -28,38 +28,53 @@ "lb-root lb-inbox-notification-comment lb-comment",
     ),
-    ...props
-  }, showHeader && /* @__PURE__ */ React.createElement("div", {
-    className: "lb-comment-header"
-  }, /* @__PURE__ */ React.createElement(User.User, {
-    className: "lb-comment-author",
-    userId: comment.userId
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-comment-content"
-  }, comment.body ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(index.Body, {
-    className: "lb-comment-body",
-    body: comment.body,
-    components: {
-      Mention: Comment.CommentMention,
-      Link: Comment.CommentNonInteractiveLink
-    }
-  }), showReactions && comment.reactions.length > 0 && /* @__PURE__ */ React.createElement("div", {
-    className: "lb-comment-reactions"
-  }, comment.reactions.map((reaction) => /* @__PURE__ */ React.createElement(Comment.CommentNonInteractiveReaction, {
-    key: reaction.emoji,
-    reaction,
-    overrides: overrides$1,
-    disabled: true
-  }))), showAttachments && comment.attachments.length > 0 ? /* @__PURE__ */ React.createElement("div", {
-    className: "lb-comment-attachments"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachments"
-  }, comment.attachments.map((attachment) => /* @__PURE__ */ React.createElement(Comment.CommentNonInteractiveFileAttachment, {
-    key: attachment.id,
-    attachment,
-    overrides: overrides$1,
-    roomId: comment.roomId
-  })))) : null) : /* @__PURE__ */ React.createElement("div", {
-    className: "lb-comment-body"
-  }, /* @__PURE__ */ React.createElement("p", {
-    className: "lb-comment-deleted"
-  }, $.COMMENT_DELETED))));
+    ...props,
+    children: [
+      showHeader && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-comment-header",
+        children: /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+          className: "lb-comment-author",
+          userId: comment.userId
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "lb-comment-content",
+        children: comment.body ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(index.Body, {
+              className: "lb-comment-body",
+              body: comment.body,
+              components: {
+                Mention: Comment.CommentMention,
+                Link: Comment.CommentNonInteractiveLink
+              }
+            }),
+            showReactions && comment.reactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: "lb-comment-reactions",
+              children: comment.reactions.map((reaction) => /* @__PURE__ */ jsxRuntime.jsx(Comment.CommentNonInteractiveReaction, {
+                reaction,
+                overrides: overrides$1,
+                disabled: true
+              }, reaction.emoji))
+            }),
+            showAttachments && comment.attachments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: "lb-comment-attachments",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: "lb-attachments",
+                children: comment.attachments.map((attachment) => /* @__PURE__ */ jsxRuntime.jsx(Comment.CommentNonInteractiveFileAttachment, {
+                  attachment,
+                  overrides: overrides$1,
+                  roomId: comment.roomId
+                }, attachment.id))
+              })
+            }) : null
+          ]
+        }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: "lb-comment-body",
+          children: /* @__PURE__ */ jsxRuntime.jsx("p", {
+            className: "lb-comment-deleted",
+            children: $.COMMENT_DELETED
+          })
+        })
+      })
+    ]
+  });
 }
@@ -66,0 +81,0 @@ function findLastCommentWithMentionedId(comments, mentionedId) {

dist/components/internal/List.js

 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
-var React = require('react');
+var react = require('react');
 var overrides = require('../../overrides.js');
@@ -9,3 +10,3 @@ var classNames = require('../../utils/class-names.js');
 
-const List = React.forwardRef(
+const List = react.forwardRef(
   ({ values, formatRemaining, truncate, locale, className, asChild, ...props }, forwardedRef) => {
@@ -15,3 +16,3 @@ const Component = asChild ? reactSlot.Slot : "span";
     const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;
-    const formattedList = React.useMemo(() => {
+    const formattedList = react.useMemo(() => {
       const elements = truncate && truncate < values.length - 1 ? [
@@ -27,7 +28,8 @@ ...values.slice(0, truncate),
     }, [formatRemainingWithDefault, locale, truncate, values]);
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       className: classNames.classNames("lb-list", className),
       ...props,
-      ref: forwardedRef
-    }, formattedList);
+      ref: forwardedRef,
+      children: formattedList
+    });
   }
@@ -34,0 +36,0 @@ );

dist/components/internal/Room.js

@@ -1,6 +0,6 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var react = require('@liveblocks/react');
-var React = require('react');
+var react$1 = require('react');
 var classNames = require('../../utils/class-names.js');
@@ -10,10 +10,11 @@
   const { info, isLoading } = react.useRoomInfo(roomId);
-  const resolvedRoomName = React.useMemo(() => {
+  const resolvedRoomName = react$1.useMemo(() => {
     return info?.name ?? roomId;
   }, [info?.name, roomId]);
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
     className: classNames.classNames("lb-name lb-room", className),
     "data-loading": isLoading ? "" : void 0,
-    ...props
-  }, isLoading ? null : resolvedRoomName);
+    ...props,
+    children: isLoading ? null : resolvedRoomName
+  });
 }
@@ -20,0 +21,0 @@

dist/components/internal/Tooltip.js

@@ -1,6 +0,6 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var React = require('react');
+var react = require('react');
 var config = require('../../config.js');
@@ -40,34 +40,48 @@ var constants = require('../../constants.js');
 };
-const Tooltip = React.forwardRef(
+const Tooltip = react.forwardRef(
   ({ children, content, multiline, className, ...props }, forwardedRef) => {
     const { portalContainer } = config.useLiveblocksUIConfig();
-    return /* @__PURE__ */ React.createElement(TooltipPrimitive__namespace.Root, {
-      disableHoverableContent: true
-    }, /* @__PURE__ */ React.createElement(TooltipPrimitive__namespace.Trigger, {
-      asChild: true,
-      ref: forwardedRef
-    }, children), /* @__PURE__ */ React.createElement(TooltipPrimitive__namespace.Portal, {
-      container: portalContainer
-    }, /* @__PURE__ */ React.createElement(TooltipPrimitive__namespace.Content, {
-      className: classNames.classNames(
-        "lb-root lb-portal lb-tooltip",
-        multiline && "lb-tooltip:multiline",
-        className
-      ),
-      side: "top",
-      align: "center",
-      sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
-      collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
-      ...props
-    }, content)));
+    return /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, {
+      disableHoverableContent: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, {
+          asChild: true,
+          ref: forwardedRef,
+          children
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, {
+          container: portalContainer,
+          children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Content, {
+            className: classNames.classNames(
+              "lb-root lb-portal lb-tooltip",
+              multiline && "lb-tooltip:multiline",
+              className
+            ),
+            side: "top",
+            align: "center",
+            sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+            collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+            ...props,
+            children: content
+          })
+        })
+      ]
+    });
   }
 );
-const ShortcutTooltip = React.forwardRef(({ children, content, shortcut, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement(Tooltip, {
-    content: /* @__PURE__ */ React.createElement(React.Fragment, null, content, shortcut && /* @__PURE__ */ React.createElement("kbd", {
-      className: "lb-tooltip-shortcut"
-    }, shortcut)),
+const ShortcutTooltip = react.forwardRef(({ children, content, shortcut, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
+    content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        content,
+        shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", {
+          className: "lb-tooltip-shortcut",
+          children: shortcut
+        })
+      ]
+    }),
     ...props,
-    ref: forwardedRef
-  }, children);
+    ref: forwardedRef,
+    children
+  });
 });
@@ -78,7 +92,8 @@ function ShortcutTooltipKey({
 }) {
-  const { title, key } = React.useMemo(() => KEYS[name]?.(), [name]);
-  return /* @__PURE__ */ React.createElement("abbr", {
+  const { title, key } = react.useMemo(() => KEYS[name]?.(), [name]);
+  return /* @__PURE__ */ jsxRuntime.jsx("abbr", {
     title,
-    ...props
-  }, key);
+    ...props,
+    children: key
+  });
 }
@@ -85,0 +100,0 @@

dist/components/internal/User.js

@@ -1,6 +0,6 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var react = require('@liveblocks/react');
-var React = require('react');
+var react$1 = require('react');
 var overrides = require('../../overrides.js');
@@ -14,10 +14,11 @@ var shared = require('../../shared.js');
   const $ = overrides.useOverrides();
-  const resolvedUserName = React.useMemo(() => {
+  const resolvedUserName = react$1.useMemo(() => {
     return replaceSelf && currentId === userId ? $.USER_SELF : user?.name ?? $.USER_UNKNOWN;
   }, [replaceSelf, currentId, userId, $.USER_SELF, $.USER_UNKNOWN, user?.name]);
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
     className: classNames.classNames("lb-name lb-user", className),
     "data-loading": isLoading ? "" : void 0,
-    ...props
-  }, isLoading ? null : resolvedUserName);
+    ...props,
+    children: isLoading ? null : resolvedUserName
+  });
 }
@@ -24,0 +25,0 @@

dist/components/Thread.js

@@ -1,8 +0,8 @@
-'use client';
 'use strict';
 
-var react = require('@liveblocks/react');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@liveblocks/react');
 var _private = require('@liveblocks/react/_private');
 var TogglePrimitive = require('@radix-ui/react-toggle');
-var React = require('react');
+var react = require('react');
 var ArrowDown = require('../icons/ArrowDown.js');
@@ -39,3 +39,3 @@ var Resolve = require('../icons/Resolve.js');
 
-const Thread = React.forwardRef(
+const Thread = react.forwardRef(
   ({
@@ -66,12 +66,12 @@ thread,
     const $ = overrides.useOverrides(overrides$1);
-    const firstCommentIndex = React.useMemo(() => {
+    const firstCommentIndex = react.useMemo(() => {
       return showDeletedComments ? 0 : thread.comments.findIndex((comment) => comment.body);
     }, [showDeletedComments, thread.comments]);
-    const lastCommentIndex = React.useMemo(() => {
+    const lastCommentIndex = react.useMemo(() => {
       return showDeletedComments ? thread.comments.length - 1 : findLastIndex.findLastIndex(thread.comments, (comment) => comment.body);
     }, [showDeletedComments, thread.comments]);
-    const { status: subscriptionStatus, unreadSince } = react.useThreadSubscription(
+    const { status: subscriptionStatus, unreadSince } = react$1.useThreadSubscription(
       thread.id
     );
-    const unreadIndex = React.useMemo(() => {
+    const unreadIndex = react.useMemo(() => {
       if (subscriptionStatus !== "subscribed") {
@@ -94,5 +94,5 @@ return;
     ]);
-    const [newIndex, setNewIndex] = React.useState();
+    const [newIndex, setNewIndex] = react.useState();
     const newIndicatorIndex = newIndex === void 0 ? unreadIndex : newIndex;
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (unreadIndex) {
@@ -104,6 +104,6 @@ setNewIndex(
     }, [unreadIndex]);
-    const stopPropagation = React.useCallback((event) => {
+    const stopPropagation = react.useCallback((event) => {
       event.stopPropagation();
     }, []);
-    const handleResolvedChange = React.useCallback(
+    const handleResolvedChange = react.useCallback(
       (resolved) => {
@@ -124,3 +124,3 @@ onResolvedChange?.(resolved);
     );
-    const handleCommentDelete = React.useCallback(
+    const handleCommentDelete = react.useCallback(
       (comment) => {
@@ -137,75 +137,92 @@ onCommentDelete?.(comment);
     );
-    return /* @__PURE__ */ React.createElement(TooltipPrimitive.TooltipProvider, null, /* @__PURE__ */ React.createElement("div", {
-      className: classNames.classNames(
-        "lb-root lb-thread",
-        showActions === "hover" && "lb-thread:show-actions-hover",
-        className
-      ),
-      "data-resolved": thread.resolved ? "" : void 0,
-      "data-unread": unreadIndex !== void 0 ? "" : void 0,
-      dir: $.dir,
-      ...props,
-      ref: forwardedRef
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "lb-thread-comments"
-    }, thread.comments.map((comment, index) => {
-      const isFirstComment = index === firstCommentIndex;
-      const isUnread = unreadIndex !== void 0 && index >= unreadIndex;
-      const children = /* @__PURE__ */ React.createElement(Comment.Comment, {
-        key: comment.id,
-        className: "lb-thread-comment",
-        "data-unread": isUnread ? "" : void 0,
-        comment,
-        indentContent: indentCommentContent,
-        showDeleted: showDeletedComments,
-        showActions,
-        showReactions,
-        showAttachments,
-        showComposerFormattingControls,
-        onCommentEdit,
-        onCommentDelete: handleCommentDelete,
-        onAuthorClick,
-        onMentionClick,
-        onAttachmentClick,
-        autoMarkReadThreadId: index === lastCommentIndex && isUnread ? thread.id : void 0,
-        additionalActionsClassName: isFirstComment ? "lb-thread-actions" : void 0,
-        additionalActions: isFirstComment && showResolveAction ? /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-          content: thread.resolved ? $.THREAD_UNRESOLVE : $.THREAD_RESOLVE
-        }, /* @__PURE__ */ React.createElement(TogglePrimitive__namespace.Root, {
-          pressed: thread.resolved,
-          onPressedChange: handleResolvedChange,
-          asChild: true
-        }, /* @__PURE__ */ React.createElement(Button.Button, {
-          className: "lb-comment-action",
-          onClick: stopPropagation,
-          "aria-label": thread.resolved ? $.THREAD_UNRESOLVE : $.THREAD_RESOLVE
-        }, thread.resolved ? /* @__PURE__ */ React.createElement(Resolved.ResolvedIcon, {
-          className: "lb-button-icon"
-        }) : /* @__PURE__ */ React.createElement(Resolve.ResolveIcon, {
-          className: "lb-button-icon"
-        })))) : null
-      });
-      return index === newIndicatorIndex && newIndicatorIndex !== firstCommentIndex && newIndicatorIndex <= lastCommentIndex ? /* @__PURE__ */ React.createElement(React.Fragment, {
-        key: comment.id
-      }, /* @__PURE__ */ React.createElement("div", {
-        className: "lb-thread-new-indicator",
-        "aria-label": $.THREAD_NEW_INDICATOR_DESCRIPTION
-      }, /* @__PURE__ */ React.createElement("span", {
-        className: "lb-thread-new-indicator-label"
-      }, /* @__PURE__ */ React.createElement(ArrowDown.ArrowDownIcon, {
-        className: "lb-thread-new-indicator-label-icon"
-      }), $.THREAD_NEW_INDICATOR)), children) : children;
-    })), showComposer && /* @__PURE__ */ React.createElement(Composer.Composer, {
-      className: "lb-thread-composer",
-      threadId: thread.id,
-      defaultCollapsed: showComposer === "collapsed" ? true : void 0,
-      showAttachments,
-      showFormattingControls: showComposerFormattingControls,
-      onComposerSubmit,
-      overrides: {
-        COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,
-        COMPOSER_SEND: $.THREAD_COMPOSER_SEND
-      },
-      roomId: thread.roomId
-    })));
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: classNames.classNames(
+          "lb-root lb-thread",
+          showActions === "hover" && "lb-thread:show-actions-hover",
+          className
+        ),
+        "data-resolved": thread.resolved ? "" : void 0,
+        "data-unread": unreadIndex !== void 0 ? "" : void 0,
+        dir: $.dir,
+        ...props,
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: "lb-thread-comments",
+            children: thread.comments.map((comment, index) => {
+              const isFirstComment = index === firstCommentIndex;
+              const isUnread = unreadIndex !== void 0 && index >= unreadIndex;
+              const children = /* @__PURE__ */ jsxRuntime.jsx(Comment.Comment, {
+                className: "lb-thread-comment",
+                "data-unread": isUnread ? "" : void 0,
+                comment,
+                indentContent: indentCommentContent,
+                showDeleted: showDeletedComments,
+                showActions,
+                showReactions,
+                showAttachments,
+                showComposerFormattingControls,
+                onCommentEdit,
+                onCommentDelete: handleCommentDelete,
+                onAuthorClick,
+                onMentionClick,
+                onAttachmentClick,
+                autoMarkReadThreadId: index === lastCommentIndex && isUnread ? thread.id : void 0,
+                additionalActionsClassName: isFirstComment ? "lb-thread-actions" : void 0,
+                additionalActions: isFirstComment && showResolveAction ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                  content: thread.resolved ? $.THREAD_UNRESOLVE : $.THREAD_RESOLVE,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, {
+                    pressed: thread.resolved,
+                    onPressedChange: handleResolvedChange,
+                    asChild: true,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                      className: "lb-comment-action",
+                      onClick: stopPropagation,
+                      "aria-label": thread.resolved ? $.THREAD_UNRESOLVE : $.THREAD_RESOLVE,
+                      children: thread.resolved ? /* @__PURE__ */ jsxRuntime.jsx(Resolved.ResolvedIcon, {
+                        className: "lb-button-icon"
+                      }) : /* @__PURE__ */ jsxRuntime.jsx(Resolve.ResolveIcon, {
+                        className: "lb-button-icon"
+                      })
+                    })
+                  })
+                }) : null
+              }, comment.id);
+              return index === newIndicatorIndex && newIndicatorIndex !== firstCommentIndex && newIndicatorIndex <= lastCommentIndex ? /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, {
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    className: "lb-thread-new-indicator",
+                    "aria-label": $.THREAD_NEW_INDICATOR_DESCRIPTION,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                      className: "lb-thread-new-indicator-label",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDownIcon, {
+                          className: "lb-thread-new-indicator-label-icon"
+                        }),
+                        $.THREAD_NEW_INDICATOR
+                      ]
+                    })
+                  }),
+                  children
+                ]
+              }, comment.id) : children;
+            })
+          }),
+          showComposer && /* @__PURE__ */ jsxRuntime.jsx(Composer.Composer, {
+            className: "lb-thread-composer",
+            threadId: thread.id,
+            defaultCollapsed: showComposer === "collapsed" ? true : void 0,
+            showAttachments,
+            showFormattingControls: showComposerFormattingControls,
+            onComposerSubmit,
+            overrides: {
+              COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,
+              COMPOSER_SEND: $.THREAD_COMPOSER_SEND
+            },
+            roomId: thread.roomId
+          })
+        ]
+      })
+    });
   }
@@ -212,0 +229,0 @@ );

dist/config.js

@@ -1,11 +0,11 @@
-'use client';
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var components = require('./components.js');
 var overrides = require('./overrides.js');
 
-const LiveblocksUIConfigContext = React.createContext({});
+const LiveblocksUIConfigContext = react.createContext({});
 function useLiveblocksUIConfig() {
-  return React.useContext(LiveblocksUIConfigContext);
+  return react.useContext(LiveblocksUIConfigContext);
 }
@@ -19,13 +19,16 @@ function LiveblocksUIConfig({
 }) {
-  const liveblocksUIConfig = React.useMemo(
+  const liveblocksUIConfig = react.useMemo(
     () => ({ portalContainer, preventUnsavedComposerChanges }),
     [portalContainer, preventUnsavedComposerChanges]
   );
-  return /* @__PURE__ */ React.createElement(LiveblocksUIConfigContext.Provider, {
-    value: liveblocksUIConfig
-  }, /* @__PURE__ */ React.createElement(overrides.OverridesProvider, {
-    overrides: overrides$1
-  }, /* @__PURE__ */ React.createElement(components.ComponentsProvider, {
-    components: components$1
-  }, children)));
+  return /* @__PURE__ */ jsxRuntime.jsx(LiveblocksUIConfigContext.Provider, {
+    value: liveblocksUIConfig,
+    children: /* @__PURE__ */ jsxRuntime.jsx(overrides.OverridesProvider, {
+      overrides: overrides$1,
+      children: /* @__PURE__ */ jsxRuntime.jsx(components.ComponentsProvider, {
+        components: components$1,
+        children
+      })
+    })
+  });
 }
@@ -32,0 +35,0 @@

dist/icons/ArrowDown.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function ArrowDownIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M10 4v12m6-6-6 6-6-6"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M10 4v12m6-6-6 6-6-6"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/ArrowUp.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function ArrowUpIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M10 16V4m-6 6 6-6 6 6"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M10 16V4m-6 6 6-6 6 6"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Attachment.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function AttachmentIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "m14.077 11.737-3.723 3.62c-1.55 1.507-4.128 1.507-5.678 0-1.543-1.5-1.543-4.02 0-5.52l5.731-5.573c1.034-1.006 2.754-1.007 3.789-.003 1.03 1 1.032 2.682.003 3.684l-5.744 5.572a1.377 1.377 0 0 1-1.893 0 1.283 1.283 0 0 1-.392-.92c0-.345.14-.676.392-.92L10.348 8"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "m14.077 11.737-3.723 3.62c-1.55 1.507-4.128 1.507-5.678 0-1.543-1.5-1.543-4.02 0-5.52l5.731-5.573c1.034-1.006 2.754-1.007 3.789-.003 1.03 1 1.032 2.682.003 3.684l-5.744 5.572a1.377 1.377 0 0 1-1.893 0 1.283 1.283 0 0 1-.392-.92c0-.345.14-.676.392-.92L10.348 8"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Bold.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function BoldIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M5.5 10h6.63m0 5.75H5.5V4.25h5.63M11.125 10a2.875 2.875 0 0 0 0-5.75m1 11.5a2.875 2.875 0 0 0 0-5.75"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M5.5 10h6.63m0 5.75H5.5V4.25h5.63M11.125 10a2.875 2.875 0 0 0 0-5.75m1 11.5a2.875 2.875 0 0 0 0-5.75"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Check.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function CheckIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M16 6L8 14L4 10"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M16 6L8 14L4 10"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Code.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function CodeIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "m7.5 6-4 4 4 4m5-8 4 4-4 4"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "m7.5 6-4 4 4 4m5-8 4 4-4 4"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Cross.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function CrossIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M15 5L5 15"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M5 5L15 15"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M15 5L5 15"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M5 5L15 15"
+      })
+    ]
+  });
 }
@@ -15,0 +19,0 @@

dist/icons/Delete.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function DeleteIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M4.5 6.5h11M14 6.5V14a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 6 14V6.5M7.5 6.5V5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1.5"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M4.5 6.5h11M14 6.5V14a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 6 14V6.5M7.5 6.5V5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1.5"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Edit.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function EditIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "m11.784 5.797-6.13 6.138a4 4 0 0 0-1.03 1.775L4 16l2.285-.624a4 4 0 0 0 1.776-1.032l6.145-6.152m-2.422-2.395 1.244-1.246c.608-.608 1.826-.81 2.53-.104.7.7.499 1.893-.122 2.515l-1.23 1.23m-2.422-2.395 2.422 2.395"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "m11.784 5.797-6.13 6.138a4 4 0 0 0-1.03 1.775L4 16l2.285-.624a4 4 0 0 0 1.776-1.032l6.145-6.152m-2.422-2.395 1.244-1.246c.608-.608 1.826-.81 2.53-.104.7.7.499 1.893-.122 2.515l-1.23 1.23m-2.422-2.395 2.422 2.395"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Ellipsis.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function EllipsisIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, {
     fill: "currentColor",
-    ...props
-  }, /* @__PURE__ */ React.createElement("circle", {
-    cx: 5,
-    cy: 10,
-    r: 0.75
-  }), /* @__PURE__ */ React.createElement("circle", {
-    cx: 10,
-    cy: 10,
-    r: 0.75
-  }), /* @__PURE__ */ React.createElement("circle", {
-    cx: 15,
-    cy: 10,
-    r: 0.75
-  }));
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: 5,
+        cy: 10,
+        r: 0.75
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: 10,
+        cy: 10,
+        r: 0.75
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: 15,
+        cy: 10,
+        r: 0.75
+      })
+    ]
+  });
 }
@@ -24,0 +29,0 @@

dist/icons/Emoji.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function EmojiIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M7.5 11.5S8.25 13 10 13s2.5-1.5 2.5-1.5M8 8h.007"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M12 8h.007"
-  }), /* @__PURE__ */ React.createElement("circle", {
-    cx: 8,
-    cy: 8,
-    r: 0.25
-  }), /* @__PURE__ */ React.createElement("circle", {
-    cx: 12,
-    cy: 8,
-    r: 0.25
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M7.5 11.5S8.25 13 10 13s2.5-1.5 2.5-1.5M8 8h.007"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M12 8h.007"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: 8,
+        cy: 8,
+        r: 0.25
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: 12,
+        cy: 8,
+        r: 0.25
+      })
+    ]
+  });
 }
@@ -25,0 +32,0 @@

dist/icons/EmojiAdd.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function EmojiAddIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M11 3.07A7 7 0 1 0 16.93 9"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M7.5 11.5S8.25 13 10 13s2.5-1.5 2.5-1.5M8 8h0"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M12 8h0"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M13 5h4m-2-2v4"
-  }), /* @__PURE__ */ React.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: ".25"
-  }), /* @__PURE__ */ React.createElement("circle", {
-    cx: "12",
-    cy: "8",
-    r: ".25"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M11 3.07A7 7 0 1 0 16.93 9"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M7.5 11.5S8.25 13 10 13s2.5-1.5 2.5-1.5M8 8h0"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M12 8h0"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M13 5h4m-2-2v4"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: "8",
+        cy: "8",
+        r: ".25"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: "12",
+        cy: "8",
+        r: ".25"
+      })
+    ]
+  });
 }
@@ -27,0 +35,0 @@

dist/icons/Italic.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function ItalicIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M15 4.25H8m4 11.5H5m6.75-11.5-3.5 11.5"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M15 4.25H8m4 11.5H5m6.75-11.5-3.5 11.5"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Mention.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function MentionIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M13 7v3.7c0 1.105.855 2.1 1.9 2.1a2.12 2.12 0 0 0 2.1-2.1V10a7 7 0 1 0-2.8 5.6"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M13 7v3.7c0 1.105.855 2.1 1.9 2.1a2.12 2.12 0 0 0 2.1-2.1V10a7 7 0 1 0-2.8 5.6"
+      })
+    ]
+  });
 }
@@ -15,0 +19,0 @@

dist/icons/Resolve.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function ResolveIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("circle", {
-    cx: 10,
-    cy: 10,
-    r: 7
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "m13 8-4 4-2-2"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: 10,
+        cy: 10,
+        r: 7
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "m13 8-4 4-2-2"
+      })
+    ]
+  });
 }
@@ -17,0 +21,0 @@

dist/icons/Resolved.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function ResolvedIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("circle", {
-    cx: 10,
-    cy: 10,
-    r: 7,
-    fill: "currentColor"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "m13 8-4 4-2-2",
-    stroke: "var(--lb-icon-background)"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: 10,
+        cy: 10,
+        r: 7,
+        fill: "currentColor"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "m13 8-4 4-2-2",
+        stroke: "var(--lb-icon-background)"
+      })
+    ]
+  });
 }
@@ -19,0 +23,0 @@

dist/icons/Restore.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function RestoreIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M3.674 7a7 7 0 1 1-.603 4"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M3.5 3.5V7H7m3-.5V10l2.5 1.5"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M3.674 7a7 7 0 1 1-.603 4"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M3.5 3.5V7H7m3-.5V10l2.5 1.5"
+      })
+    ]
+  });
 }
@@ -15,0 +19,0 @@

dist/icons/Search.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function SearchIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M9 15A6 6 0 1 0 9 3a6 6 0 0 0 0 12Zm7.5 1.5-3.25-3.25"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M9 15A6 6 0 1 0 9 3a6 6 0 0 0 0 12Zm7.5 1.5-3.25-3.25"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Send.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function SendIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "m5 16 12-6L5 4l2 6-2 6ZM7 10h10"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "m5 16 12-6L5 4l2 6-2 6ZM7 10h10"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Spinner.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function SpinnerIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M3 10a7 7 0 0 1 7-7",
-    className: "lb-icon-spinner"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M3 10a7 7 0 0 1 7-7",
+      className: "lb-icon-spinner"
+    })
+  });
 }
@@ -14,0 +15,0 @@

dist/icons/Strikethrough.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function StrikethroughIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M15.5 10h-11m4.669 0C7.599 9.44 6.5 8.484 6.5 7.125 6.5 5.537 7.79 4.25 10 4.25c1.654 0 2.793.721 3.261 1.75M6.74 14c.468 1.029 1.607 1.75 3.261 1.75 2 0 3.5-1 3.5-2.5 0-.085-.004-.169-.013-.25"
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M15.5 10h-11m4.669 0C7.599 9.44 6.5 8.484 6.5 7.125 6.5 5.537 7.79 4.25 10 4.25c1.654 0 2.793.721 3.261 1.75M6.74 14c.468 1.029 1.607 1.75 3.261 1.75 2 0 3.5-1 3.5-2.5 0-.085-.004-.169-.013-.25"
+    })
+  });
 }
@@ -13,0 +14,0 @@

dist/icons/Warning.js

 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../components/internal/Icon.js');
 
 function WarningIcon(props) {
-  return /* @__PURE__ */ React.createElement(Icon.Icon, {
-    ...props
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "m3.794 13.526 5.326-9.89a1 1 0 0 1 1.76 0l5.326 9.89a1 1 0 0 1-.88 1.474H4.674a1 1 0 0 1-.88-1.474ZM10 7.5v2m0 2.5h.007"
-  }), /* @__PURE__ */ React.createElement("circle", {
-    cx: 10,
-    cy: 12,
-    r: 0.25
-  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "m3.794 13.526 5.326-9.89a1 1 0 0 1 1.76 0l5.326 9.89a1 1 0 0 1-.88 1.474H4.674a1 1 0 0 1-.88-1.474ZM10 7.5v2m0 2.5h.007"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", {
+        cx: 10,
+        cy: 12,
+        r: 0.25
+      })
+    ]
+  });
 }
@@ -17,0 +21,0 @@

dist/index.d.ts

@@ -0,3 +1,5 @@
+import * as react from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, FormEvent, ComponentType, RefAttributes, MouseEvent, ComponentProps, PropsWithChildren } from 'react';
 import { CommentAttachment, CommentBody, BaseMetadata, DM, CommentData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD, ThreadData } from '@liveblocks/core';
-import React, { ElementType, ComponentPropsWithoutRef, ReactNode, FormEvent, ComponentType, RefAttributes, MouseEvent, ComponentProps, PropsWithChildren } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -364,3 +366,3 @@ declare type Direction = "ltr" | "rtl";
  */
-declare const Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLDivElement>>;
+declare const Comment: react.ForwardRefExoticComponent<CommentProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -377,3 +379,3 @@ interface HistoryVersionSummaryProps extends ComponentPropsWithoutRef<"button"> {
  */
-declare const HistoryVersionSummary: React.ForwardRefExoticComponent<HistoryVersionSummaryProps & React.RefAttributes<HTMLButtonElement>>;
+declare const HistoryVersionSummary: react.ForwardRefExoticComponent<HistoryVersionSummaryProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -391,3 +393,3 @@ declare type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<"ol">;
  */
-declare const HistoryVersionSummaryList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const HistoryVersionSummaryList: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & react.RefAttributes<HTMLOListElement>>;
 
@@ -499,4 +501,4 @@ interface GlobalComponents {
 declare type InboxNotificationAvatarProps = AvatarProps;
-declare function InboxNotificationIcon({ className, ...props }: InboxNotificationIconProps): React.JSX.Element;
-declare function InboxNotificationAvatar({ className, ...props }: InboxNotificationAvatarProps): React.JSX.Element;
+declare function InboxNotificationIcon({ className, ...props }: InboxNotificationIconProps): react_jsx_runtime.JSX.Element;
+declare function InboxNotificationAvatar({ className, ...props }: InboxNotificationAvatarProps): react_jsx_runtime.JSX.Element;
 /**
@@ -516,6 +518,6 @@ * Displays a single inbox notification.
  */
-declare const InboxNotification: React.ForwardRefExoticComponent<InboxNotificationProps & React.RefAttributes<HTMLAnchorElement>> & {
-    Thread: React.ForwardRefExoticComponent<InboxNotificationThreadProps & React.RefAttributes<HTMLAnchorElement>>;
-    TextMention: React.ForwardRefExoticComponent<InboxNotificationTextMentionProps & React.RefAttributes<HTMLAnchorElement>>;
-    Custom: React.ForwardRefExoticComponent<InboxNotificationCustomProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const InboxNotification: react.ForwardRefExoticComponent<InboxNotificationProps & react.RefAttributes<HTMLAnchorElement>> & {
+    Thread: react.ForwardRefExoticComponent<InboxNotificationThreadProps & react.RefAttributes<HTMLAnchorElement>>;
+    TextMention: react.ForwardRefExoticComponent<InboxNotificationTextMentionProps & react.RefAttributes<HTMLAnchorElement>>;
+    Custom: react.ForwardRefExoticComponent<InboxNotificationCustomProps & react.RefAttributes<HTMLAnchorElement>>;
     Icon: typeof InboxNotificationIcon;
@@ -544,3 +546,3 @@ Avatar: typeof InboxNotificationAvatar;
  */
-declare const InboxNotificationList: React.ForwardRefExoticComponent<InboxNotificationListProps & React.RefAttributes<HTMLOListElement>>;
+declare const InboxNotificationList: react.ForwardRefExoticComponent<InboxNotificationListProps & react.RefAttributes<HTMLOListElement>>;
 
@@ -669,4 +671,4 @@ interface ThreadProps<M extends BaseMetadata = DM> extends ComponentPropsWithoutRef<"div"> {
  */
-declare function LiveblocksUIConfig({ overrides, components, portalContainer, preventUnsavedComposerChanges, children, }: LiveblocksUIConfigProps): React.JSX.Element;
+declare function LiveblocksUIConfig({ overrides, components, portalContainer, preventUnsavedComposerChanges, children, }: LiveblocksUIConfigProps): react_jsx_runtime.JSX.Element;
 
 export { Comment, CommentAttachmentArgs, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUIConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };

dist/overrides.js

@@ -1,28 +0,9 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
-var React = require('react');
+var react = require('react');
 var Emoji = require('./components/internal/Emoji.js');
 var pluralize = require('./utils/pluralize.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 const defaultOverrides = {
@@ -71,5 +52,11 @@ locale: "en",
   COMMENT_ADD_REACTION: "Add reaction",
-  COMMENT_REACTION_LIST: (list, emoji) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, list, " reacted with ", /* @__PURE__ */ React__namespace.createElement(Emoji.Emoji, {
-    emoji
-  })),
+  COMMENT_REACTION_LIST: (list, emoji) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      list,
+      " reacted with ",
+      /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, {
+        emoji
+      })
+    ]
+  }),
   COMMENT_REACTION_DESCRIPTION: (emoji, count) => `${count} ${pluralize.pluralize(count, "reaction")}, react with ${emoji}`,
@@ -85,6 +72,46 @@ THREAD_RESOLVE: "Resolve thread",
   INBOX_NOTIFICATION_DELETE: "Delete notification",
-  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (list, room) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, list, " commented", room ? /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, " in ", room) : /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, " in a thread")),
-  INBOX_NOTIFICATION_THREAD_MENTION: (user, room) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, user, " mentioned you", room ? /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, " in ", room) : null),
-  INBOX_NOTIFICATION_TEXT_MENTION: (user, room) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, user, " mentioned you", room ? /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, " in ", room) : null),
-  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, "Edits from ", list),
+  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (list, room) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      list,
+      " commented",
+      room ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          " in ",
+          room
+        ]
+      }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: " in a thread"
+      })
+    ]
+  }),
+  INBOX_NOTIFICATION_THREAD_MENTION: (user, room) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      user,
+      " mentioned you",
+      room ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          " in ",
+          room
+        ]
+      }) : null
+    ]
+  }),
+  INBOX_NOTIFICATION_TEXT_MENTION: (user, room) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      user,
+      " mentioned you",
+      room ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          " in ",
+          room
+        ]
+      }) : null
+    ]
+  }),
+  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      "Edits from ",
+      list
+    ]
+  }),
   HISTORY_VERSION_PREVIEW_RESTORE: "Restore",
@@ -94,6 +121,6 @@ HISTORY_VERSION_PREVIEW_EMPTY: "No content.",
 };
-const OverridesContext = React.createContext(void 0);
+const OverridesContext = react.createContext(void 0);
 function useOverrides(overrides) {
-  const contextOverrides = React.useContext(OverridesContext);
-  return React.useMemo(
+  const contextOverrides = react.useContext(OverridesContext);
+  return react.useMemo(
     () => ({
@@ -111,4 +138,4 @@ ...defaultOverrides,
 }) {
-  const contextOverrides = React.useContext(OverridesContext);
-  const overrides = React.useMemo(
+  const contextOverrides = react.useContext(OverridesContext);
+  const overrides = react.useMemo(
     () => ({
@@ -121,5 +148,6 @@ ...defaultOverrides,
   );
-  return /* @__PURE__ */ React__namespace.createElement(OverridesContext.Provider, {
-    value: overrides
-  }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(OverridesContext.Provider, {
+    value: overrides,
+    children
+  });
 }
@@ -126,0 +154,0 @@

dist/primitives/Comment/index.js

 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
-var React = require('react');
+var react = require('react');
 var mentions = require('../../slate/plugins/mentions.js');
@@ -11,20 +12,22 @@ var utils = require('./utils.js');
 const COMMENT_LINK_NAME = "CommentLink";
-const CommentMention = React.forwardRef(
+const CommentMention = react.forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "span";
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
-const CommentLink = React.forwardRef(
+const CommentLink = react.forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "a";
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       target: "_blank",
       rel: "noopener noreferrer nofollow",
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
@@ -34,14 +37,20 @@ );
   Mention: ({ userId }) => {
-    return /* @__PURE__ */ React.createElement(CommentMention, null, mentions.MENTION_CHARACTER, userId);
+    return /* @__PURE__ */ jsxRuntime.jsxs(CommentMention, {
+      children: [
+        mentions.MENTION_CHARACTER,
+        userId
+      ]
+    });
   },
   Link: ({ href, children }) => {
-    return /* @__PURE__ */ React.createElement(CommentLink, {
-      href
-    }, children);
+    return /* @__PURE__ */ jsxRuntime.jsx(CommentLink, {
+      href,
+      children
+    });
   }
 };
-const CommentBody = React.forwardRef(
+const CommentBody = react.forwardRef(
   ({ body, components, style, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "div";
-    const { Mention, Link } = React.useMemo(
+    const { Mention, Link } = react.useMemo(
       () => ({ ...defaultBodyComponents, ...components }),
@@ -53,55 +62,55 @@ [components]
     }
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       ...props,
       style: { whiteSpace: "break-spaces", ...style },
-      ref: forwardedRef
-    }, body.content.map((block, index) => {
-      switch (block.type) {
-        case "paragraph":
-          return /* @__PURE__ */ React.createElement("p", {
-            key: index,
-            style: { minHeight: "1lh" }
-          }, block.children.map((inline, index2) => {
-            if (utils.isCommentBodyMention(inline)) {
-              return inline.id ? /* @__PURE__ */ React.createElement(Mention, {
-                userId: inline.id,
-                key: index2
-              }) : null;
-            }
-            if (utils.isCommentBodyLink(inline)) {
-              const href = utils.toAbsoluteUrl(inline.url) ?? inline.url;
-              return /* @__PURE__ */ React.createElement(Link, {
-                href,
-                key: index2
-              }, inline.text ?? inline.url);
-            }
-            let children = inline.text;
-            if (inline.bold) {
-              children = /* @__PURE__ */ React.createElement("strong", {
-                key: index2
-              }, children);
-            }
-            if (inline.italic) {
-              children = /* @__PURE__ */ React.createElement("em", {
-                key: index2
-              }, children);
-            }
-            if (inline.strikethrough) {
-              children = /* @__PURE__ */ React.createElement("s", {
-                key: index2
-              }, children);
-            }
-            if (inline.code) {
-              children = /* @__PURE__ */ React.createElement("code", {
-                key: index2
-              }, children);
-            }
-            return /* @__PURE__ */ React.createElement("span", {
-              key: index2
-            }, children);
-          }));
-        default:
-          return null;
-      }
-    }));
+      ref: forwardedRef,
+      children: body.content.map((block, index) => {
+        switch (block.type) {
+          case "paragraph":
+            return /* @__PURE__ */ jsxRuntime.jsx("p", {
+              style: { minHeight: "1lh" },
+              children: block.children.map((inline, index2) => {
+                if (utils.isCommentBodyMention(inline)) {
+                  return inline.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
+                    userId: inline.id
+                  }, index2) : null;
+                }
+                if (utils.isCommentBodyLink(inline)) {
+                  const href = utils.toAbsoluteUrl(inline.url) ?? inline.url;
+                  return /* @__PURE__ */ jsxRuntime.jsx(Link, {
+                    href,
+                    children: inline.text ?? inline.url
+                  }, index2);
+                }
+                let children = inline.text;
+                if (inline.bold) {
+                  children = /* @__PURE__ */ jsxRuntime.jsx("strong", {
+                    children
+                  }, index2);
+                }
+                if (inline.italic) {
+                  children = /* @__PURE__ */ jsxRuntime.jsx("em", {
+                    children
+                  }, index2);
+                }
+                if (inline.strikethrough) {
+                  children = /* @__PURE__ */ jsxRuntime.jsx("s", {
+                    children
+                  }, index2);
+                }
+                if (inline.code) {
+                  children = /* @__PURE__ */ jsxRuntime.jsx("code", {
+                    children
+                  }, index2);
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx("span", {
+                  children
+                }, index2);
+              })
+            }, index);
+          default:
+            return null;
+        }
+      })
+    });
   }
@@ -108,0 +117,0 @@ );

dist/primitives/Composer/contexts.js

 'use strict';
 
 var core = require('@liveblocks/core');
-var React = require('react');
+var react = require('react');
 
-const ComposerContext = React.createContext(null);
-const ComposerEditorContext = React.createContext(null);
-const ComposerAttachmentsContext = React.createContext(null);
-const ComposerSuggestionsContext = React.createContext(null);
-const ComposerFloatingToolbarContext = React.createContext(null);
+const ComposerContext = react.createContext(null);
+const ComposerEditorContext = react.createContext(null);
+const ComposerAttachmentsContext = react.createContext(null);
+const ComposerSuggestionsContext = react.createContext(null);
+const ComposerFloatingToolbarContext = react.createContext(null);
 function useComposerEditorContext() {
-  const composerEditorContext = React.useContext(ComposerEditorContext);
+  const composerEditorContext = react.useContext(ComposerEditorContext);
   return core.nn(
@@ -19,3 +19,3 @@ composerEditorContext,
 function useComposerAttachmentsContextOrNull() {
-  return React.useContext(ComposerAttachmentsContext);
+  return react.useContext(ComposerAttachmentsContext);
 }
@@ -30,3 +30,3 @@ function useComposerAttachmentsContext() {
 function useComposerSuggestionsContext(source = "useComposerSuggestionsContext") {
-  const composerSuggestionsContext = React.useContext(ComposerSuggestionsContext);
+  const composerSuggestionsContext = react.useContext(ComposerSuggestionsContext);
   return core.nn(
@@ -38,3 +38,3 @@ composerSuggestionsContext,
 function useComposerFloatingToolbarContext(source = "useComposerFloatingToolbarContext") {
-  const composerFloatingToolbarContext = React.useContext(
+  const composerFloatingToolbarContext = react.useContext(
     ComposerFloatingToolbarContext
@@ -48,3 +48,3 @@ );
 function useComposer() {
-  const composerContext = React.useContext(ComposerContext);
+  const composerContext = react.useContext(ComposerContext);
   return core.nn(composerContext, "Composer.Form is missing from the React tree.");
@@ -51,0 +51,0 @@ }

dist/primitives/Composer/index.js

@@ -1,4 +0,4 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
@@ -8,3 +8,3 @@ var _private = require('@liveblocks/react/_private');
 var TogglePrimitive = require('@radix-ui/react-toggle');
-var React = require('react');
+var react = require('react');
 var slate = require('slate');
@@ -28,6 +28,4 @@ var slateHistory = require('slate-history');
 var requestSubmit = require('../../utils/request-submit.js');
-var useId = require('../../utils/use-id.js');
 var useIndex = require('../../utils/use-index.js');
 var useInitial = require('../../utils/use-initial.js');
-var useLayoutEffect = require('../../utils/use-layout-effect.js');
 var useObservable = require('../../utils/use-observable.js');
@@ -104,8 +102,12 @@ var useRefs = require('../../utils/use-refs.js');
   const isSelected = slateReact.useSelected();
-  return /* @__PURE__ */ React.createElement("span", {
-    ...attributes
-  }, element.id ? /* @__PURE__ */ React.createElement(Mention, {
-    userId: element.id,
-    isSelected
-  }) : null, children);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
+    ...attributes,
+    children: [
+      element.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
+        userId: element.id,
+        isSelected
+      }) : null,
+      children
+    ]
+  });
 }
@@ -118,11 +120,13 @@ function ComposerEditorLinkWrapper({
 }) {
-  const href = React.useMemo(
+  const href = react.useMemo(
     () => utils$1.toAbsoluteUrl(element.url) ?? element.url,
     [element.url]
   );
-  return /* @__PURE__ */ React.createElement("span", {
-    ...attributes
-  }, /* @__PURE__ */ React.createElement(Link, {
-    href
-  }, children));
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+    ...attributes,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Link, {
+      href,
+      children
+    })
+  });
 }
@@ -164,3 +168,3 @@ function ComposerEditorMentionSuggestionsWrapper({
   });
-  useLayoutEffect.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     if (!mentionDraft) {
@@ -173,28 +177,32 @@ setReference(null);
   }, [setReference, editor, mentionDraft]);
-  return /* @__PURE__ */ React.createElement(Persist.Persist, null, isOpen ? /* @__PURE__ */ React.createElement(contexts.ComposerSuggestionsContext.Provider, {
-    value: {
-      id,
-      itemId,
-      selectedValue: selectedUserId,
-      setSelectedValue: setSelectedUserId,
-      onItemSelect,
-      placement,
-      dir,
-      ref: contentRef
-    }
-  }, /* @__PURE__ */ React.createElement(Portal.Portal, {
-    ref: setFloating,
-    container: portalContainer,
-    style: {
-      position: strategy,
-      top: 0,
-      left: 0,
-      transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
-      minWidth: "max-content",
-      zIndex: contentZIndex
-    }
-  }, /* @__PURE__ */ React.createElement(MentionSuggestions, {
-    userIds,
-    selectedUserId
-  }))) : null);
+  return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, {
+    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerSuggestionsContext.Provider, {
+      value: {
+        id,
+        itemId,
+        selectedValue: selectedUserId,
+        setSelectedValue: setSelectedUserId,
+        onItemSelect,
+        placement,
+        dir,
+        ref: contentRef
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, {
+        ref: setFloating,
+        container: portalContainer,
+        style: {
+          position: strategy,
+          top: 0,
+          left: 0,
+          transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
+          minWidth: "max-content",
+          zIndex: contentZIndex
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(MentionSuggestions, {
+          userIds,
+          selectedUserId
+        })
+      })
+    }) : null
+  });
 }
@@ -214,3 +222,3 @@ function ComposerEditorFloatingToolbarWrapper({
   const [contentRef, contentZIndex] = utils.useContentZIndex();
-  const [isPointerDown, setPointerDown] = React.useState(false);
+  const [isPointerDown, setPointerDown] = react.useState(false);
   const isOpen = isFocused && !isPointerDown && hasFloatingToolbarRange;
@@ -231,3 +239,3 @@ const {
   });
-  useLayoutEffect.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     if (!isFocused) {
@@ -259,25 +267,29 @@ return;
   });
-  return /* @__PURE__ */ React.createElement(Persist.Persist, null, isOpen ? /* @__PURE__ */ React.createElement(contexts.ComposerFloatingToolbarContext.Provider, {
-    value: {
-      id,
-      placement,
-      dir,
-      ref: contentRef
-    }
-  }, /* @__PURE__ */ React.createElement(Portal.Portal, {
-    ref: setFloating,
-    container: portalContainer,
-    style: {
-      position: strategy,
-      top: 0,
-      left: 0,
-      transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
-      minWidth: "max-content",
-      zIndex: contentZIndex
-    }
-  }, /* @__PURE__ */ React.createElement(FloatingToolbar, null))) : null);
+  return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, {
+    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerFloatingToolbarContext.Provider, {
+      value: {
+        id,
+        placement,
+        dir,
+        ref: contentRef
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, {
+        ref: setFloating,
+        container: portalContainer,
+        style: {
+          position: strategy,
+          top: 0,
+          left: 0,
+          transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)",
+          minWidth: "max-content",
+          zIndex: contentZIndex
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbar, {})
+      })
+    }) : null
+  });
 }
-const ComposerFloatingToolbar = React.forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
+const ComposerFloatingToolbar = react.forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
   const [isPresent] = Persist.usePersist();
-  const ref = React.useRef(null);
+  const ref = react.useRef(null);
   const {
@@ -290,3 +302,3 @@ id,
   const mergedRefs = useRefs.useRefs(forwardedRef, contentRef, ref);
-  const [side, align] = React.useMemo(
+  const [side, align] = react.useMemo(
     () => utils.getSideAndAlignFromFloatingPlacement(placement),
@@ -297,3 +309,3 @@ [placement]
   Persist.useAnimationPersist(ref);
-  const handlePointerDown = React.useCallback(
+  const handlePointerDown = react.useCallback(
     (event) => {
@@ -306,3 +318,3 @@ onPointerDown?.(event);
   );
-  return /* @__PURE__ */ React.createElement(Component, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     dir,
@@ -324,4 +336,5 @@ role: "toolbar",
     },
-    ref: mergedRefs
-  }, children);
+    ref: mergedRefs,
+    children
+  });
 });
@@ -336,3 +349,3 @@ function ComposerEditorElement({
     case "mention":
-      return /* @__PURE__ */ React.createElement(ComposerEditorMentionWrapper, {
+      return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorMentionWrapper, {
         Mention,
@@ -343,3 +356,3 @@ ...props
     case "custom-link":
-      return /* @__PURE__ */ React.createElement(ComposerEditorLinkWrapper, {
+      return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorLinkWrapper, {
         Link,
@@ -349,6 +362,7 @@ ...props
     case "paragraph":
-      return /* @__PURE__ */ React.createElement("p", {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", {
         ...attributes,
-        style: { position: "relative" }
-      }, children);
+        style: { position: "relative" },
+        children
+      });
     default:
@@ -360,16 +374,25 @@ return null;
   if (leaf.bold) {
-    children = /* @__PURE__ */ React.createElement("strong", null, children);
+    children = /* @__PURE__ */ jsxRuntime.jsx("strong", {
+      children
+    });
   }
   if (leaf.italic) {
-    children = /* @__PURE__ */ React.createElement("em", null, children);
+    children = /* @__PURE__ */ jsxRuntime.jsx("em", {
+      children
+    });
   }
   if (leaf.strikethrough) {
-    children = /* @__PURE__ */ React.createElement("s", null, children);
+    children = /* @__PURE__ */ jsxRuntime.jsx("s", {
+      children
+    });
   }
   if (leaf.code) {
-    children = /* @__PURE__ */ React.createElement("code", null, children);
+    children = /* @__PURE__ */ jsxRuntime.jsx("code", {
+      children
+    });
   }
-  return /* @__PURE__ */ React.createElement("span", {
-    ...attributes
-  }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+    ...attributes,
+    children
+  });
 }
@@ -381,33 +404,36 @@ function ComposerEditorPlaceholder({
   const { opacity: _opacity, ...style } = attributes.style;
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
     ...attributes,
     style,
-    "data-placeholder": ""
-  }, children);
+    "data-placeholder": "",
+    children
+  });
 }
-const ComposerMention = React.forwardRef(
+const ComposerMention = react.forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "span";
     const isSelected = slateReact.useSelected();
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       "data-selected": isSelected || void 0,
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
-const ComposerLink = React.forwardRef(
+const ComposerLink = react.forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "a";
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       target: "_blank",
       rel: "noopener noreferrer nofollow",
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
-const ComposerSuggestions = React.forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
+const ComposerSuggestions = react.forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
   const [isPresent] = Persist.usePersist();
-  const ref = React.useRef(null);
+  const ref = react.useRef(null);
   const {
@@ -419,3 +445,3 @@ ref: contentRef,
   const mergedRefs = useRefs.useRefs(forwardedRef, contentRef, ref);
-  const [side, align] = React.useMemo(
+  const [side, align] = react.useMemo(
     () => utils.getSideAndAlignFromFloatingPlacement(placement),
@@ -426,3 +452,3 @@ [placement]
   Persist.useAnimationPersist(ref);
-  return /* @__PURE__ */ React.createElement(Component, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     dir,
@@ -440,9 +466,10 @@ ...props,
     },
-    ref: mergedRefs
-  }, children);
+    ref: mergedRefs,
+    children
+  });
 });
-const ComposerSuggestionsList = React.forwardRef(({ children, asChild, ...props }, forwardedRef) => {
+const ComposerSuggestionsList = react.forwardRef(({ children, asChild, ...props }, forwardedRef) => {
   const { id } = contexts.useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_NAME);
   const Component = asChild ? reactSlot.Slot : "ul";
-  return /* @__PURE__ */ React.createElement(Component, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     role: "listbox",
@@ -452,6 +479,7 @@ id,
     ...props,
-    ref: forwardedRef
-  }, children);
+    ref: forwardedRef,
+    children
+  });
 });
-const ComposerSuggestionsListItem = React.forwardRef(
+const ComposerSuggestionsListItem = react.forwardRef(
   ({
@@ -466,12 +494,12 @@ value,
   }, forwardedRef) => {
-    const ref = React.useRef(null);
+    const ref = react.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
     const { selectedValue, setSelectedValue, itemId, onItemSelect } = contexts.useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_ITEM_NAME);
     const Component = asChild ? reactSlot.Slot : "li";
-    const isSelected = React.useMemo(
+    const isSelected = react.useMemo(
       () => selectedValue === value,
       [selectedValue, value]
     );
-    const id = React.useMemo(() => itemId(value), [itemId, value]);
-    React.useEffect(() => {
+    const id = react.useMemo(() => itemId(value), [itemId, value]);
+    react.useEffect(() => {
       if (ref?.current && isSelected) {
@@ -481,3 +509,3 @@ ref.current.scrollIntoView({ block: "nearest" });
     }, [isSelected]);
-    const handlePointerMove = React.useCallback(
+    const handlePointerMove = react.useCallback(
       (event) => {
@@ -491,3 +519,3 @@ onPointerMove?.(event);
     );
-    const handlePointerDown = React.useCallback(
+    const handlePointerDown = react.useCallback(
       (event) => {
@@ -500,3 +528,3 @@ onPointerDown?.(event);
     );
-    const handleClick = React.useCallback(
+    const handleClick = react.useCallback(
       (event) => {
@@ -513,3 +541,3 @@ onClick?.(event);
     );
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       role: "option",
@@ -523,4 +551,5 @@ id,
       ...props,
-      ref: mergedRefs
-    }, children);
+      ref: mergedRefs,
+      children
+    });
   }
@@ -530,17 +559,27 @@ );
   Link: ({ href, children }) => {
-    return /* @__PURE__ */ React.createElement(ComposerLink, {
-      href
-    }, children);
+    return /* @__PURE__ */ jsxRuntime.jsx(ComposerLink, {
+      href,
+      children
+    });
   },
   Mention: ({ userId }) => {
-    return /* @__PURE__ */ React.createElement(ComposerMention, null, mentions.MENTION_CHARACTER, userId);
+    return /* @__PURE__ */ jsxRuntime.jsxs(ComposerMention, {
+      children: [
+        mentions.MENTION_CHARACTER,
+        userId
+      ]
+    });
   },
   MentionSuggestions: ({ userIds }) => {
-    return userIds.length > 0 ? /* @__PURE__ */ React.createElement(ComposerSuggestions, null, /* @__PURE__ */ React.createElement(ComposerSuggestionsList, null, userIds.map((userId) => /* @__PURE__ */ React.createElement(ComposerSuggestionsListItem, {
-      key: userId,
-      value: userId
-    }, userId)))) : null;
+    return userIds.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestions, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsList, {
+        children: userIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsListItem, {
+          value: userId,
+          children: userId
+        }, userId))
+      })
+    }) : null;
   }
 };
-const ComposerEditor = React.forwardRef(
+const ComposerEditor = react.forwardRef(
   ({
@@ -570,12 +609,13 @@ defaultValue,
     const initialBody = useInitial.useInitial(defaultValue ?? emptyCommentBody);
-    const initialEditorValue = React.useMemo(() => {
+    const initialEditorValue = react.useMemo(() => {
       return utils.commentBodyToComposerBody(initialBody);
     }, [initialBody]);
-    const { Link, Mention, MentionSuggestions, FloatingToolbar } = React.useMemo(
+    const { Link, Mention, MentionSuggestions, FloatingToolbar } = react.useMemo(
       () => ({ ...defaultEditorComponents, ...components }),
       [components]
     );
-    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] = React.useState(false);
-    const hasResolveMentionSuggestions = client ? client[core.kInternal].resolveMentionSuggestions !== void 0 : true;
-    const [mentionDraft, setMentionDraft] = React.useState();
+    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] = react.useState(false);
+    const resolveMentionSuggestions = _private.useResolveMentionSuggestions();
+    const hasResolveMentionSuggestions = client ? resolveMentionSuggestions : true;
+    const [mentionDraft, setMentionDraft] = react.useState();
     const mentionSuggestions = _private.useMentionSuggestions(
@@ -591,18 +631,18 @@ roomId,
     ] = useIndex.useIndex(0, mentionSuggestions?.length ?? 0);
-    const id = useId.useId();
-    const floatingToolbarId = React.useMemo(
+    const id = react.useId();
+    const floatingToolbarId = react.useMemo(
       () => `liveblocks-floating-toolbar-${id}`,
       [id]
     );
-    const suggestionsListId = React.useMemo(
+    const suggestionsListId = react.useMemo(
       () => `liveblocks-suggestions-list-${id}`,
       [id]
     );
-    const suggestionsListItemId = React.useCallback(
+    const suggestionsListItemId = react.useCallback(
       (userId) => userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : void 0,
       [id]
     );
-    const renderElement = React.useCallback(
+    const renderElement = react.useCallback(
       (props2) => {
-        return /* @__PURE__ */ React.createElement(ComposerEditorElement, {
+        return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorElement, {
           Mention,
@@ -615,3 +655,3 @@ Link,
     );
-    const handleChange = React.useCallback(
+    const handleChange = react.useCallback(
       (value) => {
@@ -623,3 +663,3 @@ validate(value);
     );
-    const createMention = React.useCallback(
+    const createMention = react.useCallback(
       (userId) => {
@@ -636,3 +676,3 @@ if (!mentionDraft || !userId) {
     );
-    const handleKeyDown = React.useCallback(
+    const handleKeyDown = react.useCallback(
       (event) => {
@@ -723,3 +763,3 @@ onKeyDown?.(event);
     );
-    const handleFocus = React.useCallback(
+    const handleFocus = react.useCallback(
       (event) => {
@@ -733,3 +773,3 @@ onFocus?.(event);
     );
-    const handleBlur = React.useCallback(
+    const handleBlur = react.useCallback(
       (event) => {
@@ -743,7 +783,7 @@ onBlur?.(event);
     );
-    const selectedMentionSuggestionUserId = React.useMemo(
+    const selectedMentionSuggestionUserId = react.useMemo(
       () => mentionSuggestions?.[selectedMentionSuggestionIndex],
       [selectedMentionSuggestionIndex, mentionSuggestions]
     );
-    const setSelectedMentionSuggestionUserId = React.useCallback(
+    const setSelectedMentionSuggestionUserId = react.useCallback(
       (userId) => {
@@ -757,3 +797,3 @@ const index = mentionSuggestions?.indexOf(userId);
     );
-    const additionalProps = React.useMemo(
+    const additionalProps = react.useMemo(
       () => mentionDraft ? {
@@ -780,6 +820,6 @@ role: "combobox",
     );
-    React.useImperativeHandle(forwardedRef, () => {
+    react.useImperativeHandle(forwardedRef, () => {
       return slateReact.ReactEditor.toDOMNode(editor, editor);
     }, [editor]);
-    useLayoutEffect.useLayoutEffect(() => {
+    react.useLayoutEffect(() => {
       if (autoFocus) {
@@ -789,3 +829,3 @@ focus();
     }, [autoFocus, editor, focus]);
-    useLayoutEffect.useLayoutEffect(() => {
+    react.useLayoutEffect(() => {
       if (isFocused && editor.selection === null) {
@@ -795,41 +835,46 @@ select();
     }, [editor, select, isFocused]);
-    return /* @__PURE__ */ React.createElement(slateReact.Slate, {
+    return /* @__PURE__ */ jsxRuntime.jsxs(slateReact.Slate, {
       editor,
       initialValue: initialEditorValue,
-      onChange: handleChange
-    }, /* @__PURE__ */ React.createElement(slateReact.Editable, {
-      dir,
-      enterKeyHint: mentionDraft ? "enter" : "send",
-      autoCapitalize: "sentences",
-      "aria-label": "Composer editor",
-      "data-focused": isFocused || void 0,
-      "data-disabled": isDisabled || void 0,
-      ...additionalProps,
-      ...props,
-      readOnly: isDisabled,
-      disabled: isDisabled,
-      onKeyDown: handleKeyDown,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      renderElement,
-      renderLeaf: ComposerEditorLeaf,
-      renderPlaceholder: ComposerEditorPlaceholder
-    }), hasResolveMentionSuggestions && /* @__PURE__ */ React.createElement(ComposerEditorMentionSuggestionsWrapper, {
-      dir,
-      mentionDraft,
-      setMentionDraft,
-      selectedUserId: selectedMentionSuggestionUserId,
-      setSelectedUserId: setSelectedMentionSuggestionUserId,
-      userIds: mentionSuggestions,
-      id: suggestionsListId,
-      itemId: suggestionsListItemId,
-      onItemSelect: createMention,
-      MentionSuggestions
-    }), FloatingToolbar && /* @__PURE__ */ React.createElement(ComposerEditorFloatingToolbarWrapper, {
-      dir,
-      id: floatingToolbarId,
-      hasFloatingToolbarRange,
-      setHasFloatingToolbarRange,
-      FloatingToolbar
-    }));
+      onChange: handleChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, {
+          dir,
+          enterKeyHint: mentionDraft ? "enter" : "send",
+          autoCapitalize: "sentences",
+          "aria-label": "Composer editor",
+          "data-focused": isFocused || void 0,
+          "data-disabled": isDisabled || void 0,
+          ...additionalProps,
+          ...props,
+          readOnly: isDisabled,
+          disabled: isDisabled,
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          renderElement,
+          renderLeaf: ComposerEditorLeaf,
+          renderPlaceholder: ComposerEditorPlaceholder
+        }),
+        hasResolveMentionSuggestions && /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorMentionSuggestionsWrapper, {
+          dir,
+          mentionDraft,
+          setMentionDraft,
+          selectedUserId: selectedMentionSuggestionUserId,
+          setSelectedUserId: setSelectedMentionSuggestionUserId,
+          userIds: mentionSuggestions,
+          id: suggestionsListId,
+          itemId: suggestionsListItemId,
+          onItemSelect: createMention,
+          MentionSuggestions
+        }),
+        FloatingToolbar && /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorFloatingToolbarWrapper, {
+          dir,
+          id: floatingToolbarId,
+          hasFloatingToolbarRange,
+          setHasFloatingToolbarRange,
+          FloatingToolbar
+        })
+      ]
+    });
   }
@@ -850,3 +895,3 @@ );
 }
-const ComposerForm = React.forwardRef(
+const ComposerForm = react.forwardRef(
   ({
@@ -865,5 +910,5 @@ children,
     const Component = asChild ? reactSlot.Slot : "form";
-    const [isEmpty$1, setEmpty] = React.useState(true);
-    const [isSubmitting, setSubmitting] = React.useState(false);
-    const [isFocused, setFocused] = React.useState(false);
+    const [isEmpty$1, setEmpty] = react.useState(true);
+    const [isSubmitting, setSubmitting] = react.useState(false);
+    const [isFocused, setFocused] = react.useState(false);
     const room = _private.useRoomOrNull();
@@ -888,15 +933,15 @@ const roomId = _roomId !== void 0 ? _roomId : room?.id;
     const hasMaxAttachments = numberOfAttachments >= maxAttachments;
-    const isDisabled = React.useMemo(() => {
+    const isDisabled = react.useMemo(() => {
       return isSubmitting || disabled === true;
     }, [isSubmitting, disabled]);
-    const canSubmit = React.useMemo(() => {
+    const canSubmit = react.useMemo(() => {
       return !isEmpty$1 && !isUploadingAttachments;
     }, [isEmpty$1, isUploadingAttachments]);
-    const [marks$1, setMarks] = React.useState(marks.getMarks);
-    const ref = React.useRef(null);
+    const [marks$1, setMarks] = react.useState(marks.getMarks);
+    const ref = react.useRef(null);
     const mergedRefs = useRefs.useRefs(forwardedRef, ref);
-    const fileInputRef = React.useRef(null);
+    const fileInputRef = react.useRef(null);
     const syncSource = _private.useSyncSource();
     const isPending = !preventUnsavedChanges ? false : !isEmpty$1 || isUploadingAttachments || attachments.length > 0;
-    React.useEffect(() => {
+    react.useEffect(() => {
       syncSource?.setSyncStatus(
@@ -906,3 +951,3 @@ isPending ? "has-local-changes" : "synchronized"
     }, [syncSource, isPending]);
-    const createAttachments = React.useCallback(
+    const createAttachments = react.useCallback(
       (files) => {
@@ -922,7 +967,7 @@ if (!files.length) {
     );
-    const createAttachmentsRef = React.useRef(createAttachments);
-    React.useEffect(() => {
+    const createAttachmentsRef = react.useRef(createAttachments);
+    react.useEffect(() => {
       createAttachmentsRef.current = createAttachments;
     }, [createAttachments]);
-    const stableCreateAttachments = React.useCallback((files) => {
+    const stableCreateAttachments = react.useCallback((files) => {
       createAttachmentsRef.current(files);
@@ -937,3 +982,3 @@ }, []);
     const onEditorChange = useInitial.useInitial(core.makeEventSource);
-    const validate = React.useCallback(
+    const validate = react.useCallback(
       (value) => {
@@ -944,3 +989,3 @@ setEmpty(isEmpty.isEmpty(editor, value));
     );
-    const submit = React.useCallback(() => {
+    const submit = react.useCallback(() => {
       if (!canSubmit) {
@@ -955,3 +1000,3 @@ return;
     }, [canSubmit]);
-    const clear = React.useCallback(() => {
+    const clear = react.useCallback(() => {
       slate.Transforms.delete(editor, {
@@ -964,6 +1009,6 @@ at: {
     }, [editor]);
-    const select = React.useCallback(() => {
+    const select = react.useCallback(() => {
       slate.Transforms.select(editor, slate.Editor.end(editor, []));
     }, [editor]);
-    const focus = React.useCallback(
+    const focus = react.useCallback(
       (resetSelection = true) => {
@@ -980,6 +1025,6 @@ if (!slateReact.ReactEditor.isFocused(editor)) {
     );
-    const blur = React.useCallback(() => {
+    const blur = react.useCallback(() => {
       slateReact.ReactEditor.blur(editor);
     }, [editor]);
-    const createMention = React.useCallback(() => {
+    const createMention = react.useCallback(() => {
       if (disabled) {
@@ -991,3 +1036,3 @@ return;
     }, [disabled, editor, focus]);
-    const insertText = React.useCallback(
+    const insertText = react.useCallback(
       (text) => {
@@ -1002,3 +1047,3 @@ if (disabled) {
     );
-    const attachFiles = React.useCallback(() => {
+    const attachFiles = react.useCallback(() => {
       if (disabled) {
@@ -1011,3 +1056,3 @@ return;
     }, [disabled]);
-    const handleAttachmentsInputChange = React.useCallback(
+    const handleAttachmentsInputChange = react.useCallback(
       (event) => {
@@ -1024,3 +1069,3 @@ if (disabled) {
     );
-    const onSubmitEnd = React.useCallback(() => {
+    const onSubmitEnd = react.useCallback(() => {
       clear();
@@ -1031,3 +1076,3 @@ blur();
     }, [blur, clear, clearAttachments]);
-    const handleSubmit = React.useCallback(
+    const handleSubmit = react.useCallback(
       (event) => {
@@ -1075,6 +1120,6 @@ if (disabled) {
     );
-    const stopPropagation = React.useCallback((event) => {
+    const stopPropagation = react.useCallback((event) => {
       event.stopPropagation();
     }, []);
-    const toggleMark = React.useCallback(
+    const toggleMark = react.useCallback(
       (mark) => {
@@ -1088,3 +1133,3 @@ marks.toggleMark(editor, mark);
     });
-    return /* @__PURE__ */ React.createElement(contexts.ComposerEditorContext.Provider, {
+    return /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerEditorContext.Provider, {
       value: {
@@ -1096,46 +1141,55 @@ editor,
         roomId
-      }
-    }, /* @__PURE__ */ React.createElement(contexts.ComposerAttachmentsContext.Provider, {
-      value: {
-        createAttachments,
-        isUploadingAttachments,
-        hasMaxAttachments,
-        maxAttachments,
-        maxAttachmentSize
-      }
-    }, /* @__PURE__ */ React.createElement(contexts.ComposerContext.Provider, {
-      value: {
-        isDisabled,
-        isFocused,
-        isEmpty: isEmpty$1,
-        canSubmit,
-        submit,
-        clear,
-        select,
-        focus,
-        blur,
-        createMention,
-        insertText,
-        attachments,
-        attachFiles,
-        removeAttachment,
-        toggleMark,
-        marks: marks$1
-      }
-    }, /* @__PURE__ */ React.createElement(Component, {
-      ...props,
-      onSubmit: handleSubmit,
-      ref: mergedRefs
-    }, /* @__PURE__ */ React.createElement("input", {
-      type: "file",
-      multiple: true,
-      ref: fileInputRef,
-      onChange: handleAttachmentsInputChange,
-      onClick: stopPropagation,
-      tabIndex: -1,
-      style: { display: "none" }
-    }), /* @__PURE__ */ React.createElement(reactSlot.Slottable, null, children)))));
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerAttachmentsContext.Provider, {
+        value: {
+          createAttachments,
+          isUploadingAttachments,
+          hasMaxAttachments,
+          maxAttachments,
+          maxAttachmentSize
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerContext.Provider, {
+          value: {
+            isDisabled,
+            isFocused,
+            isEmpty: isEmpty$1,
+            canSubmit,
+            submit,
+            clear,
+            select,
+            focus,
+            blur,
+            createMention,
+            insertText,
+            attachments,
+            attachFiles,
+            removeAttachment,
+            toggleMark,
+            marks: marks$1
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Component, {
+            ...props,
+            onSubmit: handleSubmit,
+            ref: mergedRefs,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("input", {
+                type: "file",
+                multiple: true,
+                ref: fileInputRef,
+                onChange: handleAttachmentsInputChange,
+                onClick: stopPropagation,
+                tabIndex: -1,
+                style: { display: "none" }
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, {
+                children
+              })
+            ]
+          })
+        })
+      })
+    });
   }
 );
-const ComposerSubmit = React.forwardRef(
+const ComposerSubmit = react.forwardRef(
   ({ children, disabled, asChild, ...props }, forwardedRef) => {
@@ -1145,11 +1199,12 @@ const Component = asChild ? reactSlot.Slot : "button";
     const isDisabled = isComposerDisabled || disabled || !canSubmit;
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       type: "submit",
       ...props,
       ref: forwardedRef,
-      disabled: isDisabled
-    }, children);
+      disabled: isDisabled,
+      children
+    });
   }
 );
-const ComposerAttachFiles = React.forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
+const ComposerAttachFiles = react.forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
   const Component = asChild ? reactSlot.Slot : "button";
@@ -1159,3 +1214,3 @@ const { hasMaxAttachments } = contexts.useComposerAttachmentsContext();
   const isDisabled = isComposerDisabled || hasMaxAttachments || disabled;
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (event) => {
@@ -1169,3 +1224,3 @@ onClick?.(event);
   );
-  return /* @__PURE__ */ React.createElement(Component, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     type: "button",
@@ -1175,6 +1230,7 @@ ...props,
     ref: forwardedRef,
-    disabled: isDisabled
-  }, children);
+    disabled: isDisabled,
+    children
+  });
 });
-const ComposerAttachmentsDropArea = React.forwardRef(
+const ComposerAttachmentsDropArea = react.forwardRef(
   ({
@@ -1199,3 +1255,3 @@ onDragEnter,
     });
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       ...dropAreaProps,
@@ -1208,7 +1264,7 @@ "data-disabled": isDisabled ? "" : void 0,
 );
-const ComposerMarkToggle = React.forwardRef(
+const ComposerMarkToggle = react.forwardRef(
   ({ children, mark, onValueChange, onClick, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "button";
     const { marks, toggleMark } = contexts.useComposer();
-    const handleClick = React.useCallback(
+    const handleClick = react.useCallback(
       (event) => {
@@ -1223,11 +1279,13 @@ onClick?.(event);
     );
-    return /* @__PURE__ */ React.createElement(TogglePrimitive__namespace.Root, {
+    return /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, {
       asChild: true,
       pressed: marks[mark],
       onClick: handleClick,
-      ...props
-    }, /* @__PURE__ */ React.createElement(Component, {
       ...props,
-      ref: forwardedRef
-    }, children));
+      children: /* @__PURE__ */ jsxRuntime.jsx(Component, {
+        ...props,
+        ref: forwardedRef,
+        children
+      })
+    });
   }
@@ -1234,0 +1292,0 @@ );

dist/primitives/Composer/utils.js

@@ -5,5 +5,4 @@ 'use strict';
 var core = require('@liveblocks/core');
-var react = require('@liveblocks/react');
-var React = require('react');
-var index_js = require('use-sync-external-store/shim/index.js');
+var react$1 = require('@liveblocks/react');
+var react = require('react');
 var constants = require('../../constants.js');
@@ -18,3 +17,2 @@ var autoLinks = require('../../slate/plugins/auto-links.js');
 var useLatest = require('../../utils/use-latest.js');
-var useLayoutEffect = require('../../utils/use-layout-effect.js');
 var utils = require('../Comment/utils.js');
@@ -135,6 +133,6 @@ var contexts = require('./contexts.js');
 function useContentZIndex() {
-  const [content, setContent] = React.useState(null);
-  const contentRef = React.useCallback(setContent, [setContent]);
-  const [contentZIndex, setContentZIndex] = React.useState();
-  useLayoutEffect.useLayoutEffect(() => {
+  const [content, setContent] = react.useState(null);
+  const contentRef = react.useCallback(setContent, [setContent]);
+  const [contentZIndex, setContentZIndex] = react.useState();
+  react.useLayoutEffect(() => {
     if (content) {
@@ -153,3 +151,3 @@ setContentZIndex(window.getComputedStyle(content).zIndex);
 }) {
-  const floatingOptions = React.useMemo(() => {
+  const floatingOptions = react.useMemo(() => {
     const detectOverflowOptions = {
@@ -207,5 +205,5 @@ padding: constants.FLOATING_ELEMENT_COLLISION_PADDING
   const { createAttachments } = contexts.useComposerAttachmentsContext();
-  const [isDraggingOver, setDraggingOver] = React.useState(false);
+  const [isDraggingOver, setDraggingOver] = react.useState(false);
   const latestIsDraggingOver = useLatest.useLatest(isDraggingOver);
-  const handleDragEnter = React.useCallback(
+  const handleDragEnter = react.useCallback(
     (event) => {
@@ -226,3 +224,3 @@ onDragEnter?.(event);
   );
-  const handleDragLeave = React.useCallback(
+  const handleDragLeave = react.useCallback(
     (event) => {
@@ -242,3 +240,3 @@ onDragLeave?.(event);
   );
-  const handleDragOver = React.useCallback(
+  const handleDragOver = react.useCallback(
     (event) => {
@@ -254,3 +252,3 @@ onDragOver?.(event);
   );
-  const handleDrop = React.useCallback(
+  const handleDrop = react.useCallback(
     (event) => {
@@ -386,3 +384,3 @@ onDrop?.(event);
 function useComposerAttachmentsManager(defaultAttachments, options) {
-  const client = react.useClient();
+  const client = react$1.useClient();
   const frozenDefaultAttachments = useInitial.useInitial(defaultAttachments);
@@ -392,6 +390,6 @@ const frozenAttachmentsManager = useInitial.useInitial(
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     frozenAttachmentsManager.addAttachments(frozenDefaultAttachments);
   }, [frozenDefaultAttachments, frozenAttachmentsManager]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     return () => {
@@ -401,3 +399,3 @@ frozenAttachmentsManager.clear();
   }, [frozenAttachmentsManager]);
-  const attachments = index_js.useSyncExternalStore(
+  const attachments = react.useSyncExternalStore(
     frozenAttachmentsManager.subscribe,
@@ -407,3 +405,3 @@ frozenAttachmentsManager.getSnapshot,
   );
-  const isUploadingAttachments = React.useMemo(() => {
+  const isUploadingAttachments = react.useMemo(() => {
     return attachments.some(
@@ -413,3 +411,3 @@ (attachment) => attachment.type === "localAttachment" && attachment.status === "uploading"
   }, [attachments]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!isUploadingAttachments) {
@@ -416,0 +414,0 @@ return;

dist/primitives/EmojiPicker/contexts.js

 'use strict';
 
 var core = require('@liveblocks/core');
-var React = require('react');
+var react = require('react');
 
-const EmojiPickerContext = React.createContext(
+const EmojiPickerContext = react.createContext(
   null
 );
 function useEmojiPicker() {
-  const emojiPickerContext = React.useContext(EmojiPickerContext);
+  const emojiPickerContext = react.useContext(EmojiPickerContext);
   return core.nn(
@@ -12,0 +12,0 @@ emojiPickerContext,

dist/primitives/EmojiPicker/index.js

@@ -1,11 +0,9 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
-var React = require('react');
+var react = require('react');
 var reactVirtuoso = require('react-virtuoso');
 var isKey = require('../../utils/is-key.js');
 var requestIdleCallback = require('../../utils/request-idle-callback.js');
-var useLayoutEffect = require('../../utils/use-layout-effect.js');
-var useTransition = require('../../utils/use-transition.js');
 var visuallyHidden = require('../../utils/visually-hidden.js');
@@ -28,11 +26,11 @@ var Emoji = require('../internal/Emoji.js');
 }) {
-  const emojiData = React.useRef();
-  const search = React.useRef("");
-  const [, startEmojisTransition] = useTransition.useTransition();
-  const [data, setData] = React.useState();
-  const [error, setError] = React.useState();
-  const [selectedColumnIndex, setSelectedColumnIndex] = React.useState(0);
-  const [selectedRowIndex, setSelectedRowIndex] = React.useState(0);
-  const [interaction, setInteraction] = React.useState("none");
-  const selectCurrentEmoji = React.useCallback(() => {
+  const emojiData = react.useRef();
+  const search = react.useRef("");
+  const [, startEmojisTransition] = react.useTransition();
+  const [data, setData] = react.useState();
+  const [error, setError] = react.useState();
+  const [selectedColumnIndex, setSelectedColumnIndex] = react.useState(0);
+  const [selectedRowIndex, setSelectedRowIndex] = react.useState(0);
+  const [interaction, setInteraction] = react.useState("none");
+  const selectCurrentEmoji = react.useCallback(() => {
     if (onEmojiSelect) {
@@ -45,7 +43,7 @@ const emoji = data?.rows[selectedRowIndex]?.[selectedColumnIndex];
   }, [data?.rows, onEmojiSelect, selectedColumnIndex, selectedRowIndex]);
-  const resetSelection = React.useCallback(() => {
+  const resetSelection = react.useCallback(() => {
     setSelectedColumnIndex(0);
     setSelectedRowIndex(0);
   }, []);
-  const setPointerSelection = React.useCallback(
+  const setPointerSelection = react.useCallback(
     (columnIndex, rowIndex) => {
@@ -58,3 +56,3 @@ setInteraction("pointer");
   );
-  const moveSelection = React.useCallback(
+  const moveSelection = react.useCallback(
     (direction, event) => {
@@ -125,3 +123,3 @@ if (!data) {
   );
-  const updateEmojis = React.useCallback(() => {
+  const updateEmojis = react.useCallback(() => {
     if (!emojiData.current) {
@@ -148,3 +146,3 @@ return;
   }, [columns, resetSelection]);
-  const handleSearch = React.useCallback(
+  const handleSearch = react.useCallback(
     (value) => {
@@ -156,3 +154,3 @@ search.current = value;
   );
-  const initializeEmojiData = React.useCallback(
+  const initializeEmojiData = react.useCallback(
     async (locale2) => {
@@ -168,3 +166,3 @@ try {
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     let idleCallbackId;
@@ -181,3 +179,3 @@ const timeoutId = setTimeout(() => {
   }, [locale]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (interaction === "none") {
@@ -187,3 +185,3 @@ resetSelection();
   }, [interaction]);
-  return /* @__PURE__ */ React.createElement(contexts.EmojiPickerContext.Provider, {
+  return /* @__PURE__ */ jsxRuntime.jsx(contexts.EmojiPickerContext.Provider, {
     value: {
@@ -203,6 +201,7 @@ data,
       setInteraction
-    }
-  }, children);
+    },
+    children
+  });
 }
-const EmojiPickerSearch = React.forwardRef(
+const EmojiPickerSearch = react.forwardRef(
   ({ asChild, value, defaultValue, onChange, ...props }, forwardedRef) => {
@@ -217,3 +216,3 @@ const Component = asChild ? reactSlot.Slot : "input";
     } = contexts.useEmojiPicker();
-    const handleChange = React.useCallback(
+    const handleChange = react.useCallback(
       (event) => {
@@ -230,3 +229,3 @@ onChange?.(event);
     );
-    const handleKeyDown = React.useCallback(
+    const handleKeyDown = react.useCallback(
       (event) => {
@@ -253,3 +252,3 @@ if (event.isDefaultPrevented()) {
     );
-    React.useEffect(() => {
+    react.useEffect(() => {
       onSearch(
@@ -259,3 +258,3 @@ value ? String(value) : defaultValue ? String(defaultValue) : ""
     }, []);
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       type: "search",
@@ -272,23 +271,26 @@ value,
 const defaultContentComponents = {
-  CategoryHeader: ({ category, ...props }) => /* @__PURE__ */ React.createElement("div", {
+  CategoryHeader: ({ category, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ...props,
+    children: category
+  }),
+  Row: ({ children, attributes, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ...props,
+    children
+  }),
+  Emoji: ({ emoji, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("button", {
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, {
+      emoji
+    })
+  }),
+  Loading: (props) => /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...props
-  }, category),
-  Row: ({ children, attributes, ...props }) => /* @__PURE__ */ React.createElement("div", {
-    ...props
-  }, children),
-  Emoji: ({ emoji, ...props }) => /* @__PURE__ */ React.createElement("button", {
-    ...props
-  }, /* @__PURE__ */ React.createElement(Emoji.Emoji, {
-    emoji
-  })),
-  Loading: (props) => /* @__PURE__ */ React.createElement("div", {
-    ...props
   }),
-  Empty: (props) => /* @__PURE__ */ React.createElement("div", {
+  Empty: (props) => /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...props
   }),
-  Grid: (props) => /* @__PURE__ */ React.createElement("div", {
+  Grid: (props) => /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...props
   }),
-  Error: ({ error, ...props }) => /* @__PURE__ */ React.createElement("div", {
+  Error: ({ error, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
     ...props
@@ -302,29 +304,31 @@ })
 };
-const VirtuosoScroller = React.forwardRef(
+const VirtuosoScroller = react.forwardRef(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
       ...props,
       tabIndex: -1,
       "data-testid": void 0,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
-const VirtuosoTopList = React.forwardRef(
+const VirtuosoTopList = react.forwardRef(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
       ...props,
       "data-testid": void 0,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
 );
-const EmojiPickerContent = React.forwardRef(
+const EmojiPickerContent = react.forwardRef(
   ({ components, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "div";
-    const virtuosoRef = React.useRef(null);
-    const placeholderContainerRef = React.useRef(null);
-    const rowScrollMarginTopRef = React.useRef(0);
-    const rowScrollMarginBottomRef = React.useRef(0);
-    const categoryHeaderHeightRef = React.useRef(0);
+    const virtuosoRef = react.useRef(null);
+    const placeholderContainerRef = react.useRef(null);
+    const rowScrollMarginTopRef = react.useRef(0);
+    const rowScrollMarginBottomRef = react.useRef(0);
+    const categoryHeaderHeightRef = react.useRef(0);
     const {
@@ -342,14 +346,14 @@ data,
     } = contexts.useEmojiPicker();
-    const selectedEmoji = React.useMemo(
+    const selectedEmoji = react.useMemo(
       () => data?.rows[selectedRowIndex]?.[selectedColumnIndex],
       [data?.rows, selectedColumnIndex, selectedRowIndex]
     );
-    const { Loading, Empty, Error, CategoryHeader, Grid, Row, Emoji } = React.useMemo(
+    const { Loading, Empty, Error, CategoryHeader, Grid, Row, Emoji } = react.useMemo(
       () => ({ ...defaultContentComponents, ...components }),
       [components]
     );
-    const VirtuosoList = React.useMemo(
-      () => React.forwardRef(
+    const VirtuosoList = react.useMemo(
+      () => react.forwardRef(
         ({ children, ...props2 }, forwardedRef2) => {
-          return /* @__PURE__ */ React.createElement("div", {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", {
             role: "grid",
@@ -359,4 +363,5 @@ "aria-colcount": columns,
             "data-testid": void 0,
-            ref: forwardedRef2
-          }, children);
+            ref: forwardedRef2,
+            children
+          });
         }
@@ -366,10 +371,10 @@ ),
     );
-    const placeholderColumns = React.useMemo(
+    const placeholderColumns = react.useMemo(
       () => Array(columns).fill("\u{1F32B}\uFE0F"),
       [columns]
     );
-    const preventDefault = React.useCallback((event) => {
+    const preventDefault = react.useCallback((event) => {
       event.preventDefault();
     }, []);
-    const handleEmojiPointerLeave = React.useCallback(() => {
+    const handleEmojiPointerLeave = react.useCallback(() => {
       if (interaction === "pointer") {
@@ -379,3 +384,3 @@ setInteraction("none");
     }, [interaction, setInteraction]);
-    useLayoutEffect.useLayoutEffect(() => {
+    react.useLayoutEffect(() => {
       if (!placeholderContainerRef.current) {
@@ -395,3 +400,3 @@ return;
     }, []);
-    const calculateViewLocation = React.useCallback(
+    const calculateViewLocation = react.useCallback(
       ({
@@ -423,3 +428,3 @@ itemTop,
     );
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (interaction === "keyboard") {
@@ -433,76 +438,88 @@ virtuosoRef.current?.scrollIntoView({
     }, [interaction, selectedRowIndex, calculateViewLocation]);
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Component, {
       ...props,
-      ref: forwardedRef
-    }, /* @__PURE__ */ React.createElement("div", {
-      style: {
-        visibility: "hidden",
-        height: 0
-      },
-      ref: placeholderContainerRef
-    }, /* @__PURE__ */ React.createElement(Row, {
-      attributes: placeholderRowAttributes
-    }, placeholderColumns.map((placeholder, index) => /* @__PURE__ */ React.createElement(Emoji, {
-      emoji: placeholder,
-      key: index
-    }))), /* @__PURE__ */ React.createElement(CategoryHeader, {
-      category: "Category"
-    })), isLoading ? /* @__PURE__ */ React.createElement(Loading, null) : error ? /* @__PURE__ */ React.createElement(Error, {
-      error
-    }) : data.count === 0 ? /* @__PURE__ */ React.createElement(Empty, null) : /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(reactVirtuoso.GroupedVirtuoso, {
-      ref: virtuosoRef,
-      components: {
-        Scroller: VirtuosoScroller,
-        List: VirtuosoList,
-        TopItemList: VirtuosoTopList
-      },
-      groupCounts: data.categoriesRowCounts,
-      groupContent: (groupIndex) => {
-        const category = data.categories[groupIndex];
-        if (!category) {
-          return null;
-        }
-        return /* @__PURE__ */ React.createElement(CategoryHeader, {
-          category
-        });
-      },
-      itemContent: (rowIndex, groupIndex) => {
-        const categoryRow = data.rows[rowIndex];
-        const categoryRowIndex = data.categoriesRowIndices[groupIndex]?.indexOf(rowIndex);
-        const categoryRowsCount = data.categoriesRowCounts[groupIndex];
-        if (categoryRow === void 0 || categoryRowIndex === void 0 || categoryRowsCount === void 0) {
-          return null;
-        }
-        return /* @__PURE__ */ React.createElement(Row, {
-          attributes: {
-            rowIndex,
-            categoryRowIndex,
-            categoryRowsCount
-          }
-        }, categoryRow.map((emoji, columnIndex) => {
-          const isSelected = interaction !== "none" && selectedColumnIndex === columnIndex && selectedRowIndex === rowIndex;
-          return /* @__PURE__ */ React.createElement(Emoji, {
-            key: emoji.emoji,
-            role: "gridcell",
-            "aria-colindex": columnIndex,
-            "aria-selected": isSelected || void 0,
-            "data-selected": isSelected || void 0,
-            onMouseDown: preventDefault,
-            tabIndex: -1,
-            onPointerEnter: () => {
-              setPointerSelection(columnIndex, rowIndex);
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          style: {
+            visibility: "hidden",
+            height: 0
+          },
+          ref: placeholderContainerRef,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Row, {
+              attributes: placeholderRowAttributes,
+              children: placeholderColumns.map((placeholder, index) => /* @__PURE__ */ jsxRuntime.jsx(Emoji, {
+                emoji: placeholder
+              }, index))
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(CategoryHeader, {
+              category: "Category"
+            })
+          ]
+        }),
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Loading, {}) : error ? /* @__PURE__ */ jsxRuntime.jsx(Error, {
+          error
+        }) : data.count === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Empty, {}) : /* @__PURE__ */ jsxRuntime.jsx(Grid, {
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactVirtuoso.GroupedVirtuoso, {
+            ref: virtuosoRef,
+            components: {
+              Scroller: VirtuosoScroller,
+              List: VirtuosoList,
+              TopItemList: VirtuosoTopList
             },
-            onPointerLeave: handleEmojiPointerLeave,
-            onClick: (event) => {
-              onEmojiSelect?.(emoji.emoji);
-              event.stopPropagation();
+            groupCounts: data.categoriesRowCounts,
+            groupContent: (groupIndex) => {
+              const category = data.categories[groupIndex];
+              if (!category) {
+                return null;
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx(CategoryHeader, {
+                category
+              });
             },
-            emoji: emoji.emoji
-          });
-        }));
-      }
-    })), selectedEmoji && interaction !== "none" && /* @__PURE__ */ React.createElement("div", {
-      "aria-live": "polite",
-      style: visuallyHidden.visuallyHidden
-    }, selectedEmoji.name));
+            itemContent: (rowIndex, groupIndex) => {
+              const categoryRow = data.rows[rowIndex];
+              const categoryRowIndex = data.categoriesRowIndices[groupIndex]?.indexOf(rowIndex);
+              const categoryRowsCount = data.categoriesRowCounts[groupIndex];
+              if (categoryRow === void 0 || categoryRowIndex === void 0 || categoryRowsCount === void 0) {
+                return null;
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx(Row, {
+                attributes: {
+                  rowIndex,
+                  categoryRowIndex,
+                  categoryRowsCount
+                },
+                children: categoryRow.map((emoji, columnIndex) => {
+                  const isSelected = interaction !== "none" && selectedColumnIndex === columnIndex && selectedRowIndex === rowIndex;
+                  return /* @__PURE__ */ jsxRuntime.jsx(Emoji, {
+                    role: "gridcell",
+                    "aria-colindex": columnIndex,
+                    "aria-selected": isSelected || void 0,
+                    "data-selected": isSelected || void 0,
+                    onMouseDown: preventDefault,
+                    tabIndex: -1,
+                    onPointerEnter: () => {
+                      setPointerSelection(columnIndex, rowIndex);
+                    },
+                    onPointerLeave: handleEmojiPointerLeave,
+                    onClick: (event) => {
+                      onEmojiSelect?.(emoji.emoji);
+                      event.stopPropagation();
+                    },
+                    emoji: emoji.emoji
+                  }, emoji.emoji);
+                })
+              });
+            }
+          })
+        }),
+        selectedEmoji && interaction !== "none" && /* @__PURE__ */ jsxRuntime.jsx("div", {
+          "aria-live": "polite",
+          style: visuallyHidden.visuallyHidden,
+          children: selectedEmoji.name
+        })
+      ]
+    });
   }
@@ -509,0 +526,0 @@ );

dist/primitives/FileSize.js

@@ -1,10 +0,10 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
-var React = require('react');
+var react = require('react');
 var formatFileSize = require('../utils/format-file-size.js');
 
 const FILE_SIZE_NAME = "FileSize";
-const FileSize = React.forwardRef(
+const FileSize = react.forwardRef(
   ({
@@ -18,10 +18,11 @@ size,
     const Component = asChild ? reactSlot.Slot : "span";
-    const children = React.useMemo(
+    const children = react.useMemo(
       () => typeof renderChildren === "function" ? renderChildren(size, locale) : renderChildren,
       [renderChildren, size]
     );
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       ...props,
-      ref: forwardedRef
-    }, children);
+      ref: forwardedRef,
+      children
+    });
   }
@@ -28,0 +29,0 @@ );

dist/primitives/index.d.ts

@@ -1,4 +0,5 @@
-import * as React from 'react';
-import React__default, { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEvent, PropsWithChildren } from 'react';
+import * as react from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentType, FormEvent, PropsWithChildren } from 'react';
 import { CommentBody as CommentBody$1, CommentAttachment, CommentMixedAttachment } from '@liveblocks/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -75,3 +76,3 @@ declare type Direction = "ltr" | "rtl";
  */
-declare const CommentMention: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLSpanElement>>;
+declare const CommentMention: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SlotProp & react.RefAttributes<HTMLSpanElement>>;
 /**
@@ -83,3 +84,3 @@ * Displays links within `Comment.Body`.
  */
-declare const CommentLink: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLAnchorElement>>;
+declare const CommentLink: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & SlotProp & react.RefAttributes<HTMLAnchorElement>>;
 /**
@@ -91,3 +92,3 @@ * Displays a comment body.
  */
-declare const CommentBody: React__default.ForwardRefExoticComponent<CommentBodyProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const CommentBody: react.ForwardRefExoticComponent<CommentBodyProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -257,3 +258,3 @@ declare namespace index$2 {
  */
-declare const ComposerFloatingToolbar: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLDivElement>>;
+declare const ComposerFloatingToolbar: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & react.RefAttributes<HTMLDivElement>>;
 /**
@@ -265,3 +266,3 @@ * Displays mentions within `Composer.Editor`.
  */
-declare const ComposerMention: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLSpanElement>>;
+declare const ComposerMention: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SlotProp & react.RefAttributes<HTMLSpanElement>>;
 /**
@@ -273,7 +274,7 @@ * Displays links within `Composer.Editor`.
  */
-declare const ComposerLink: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLAnchorElement>>;
+declare const ComposerLink: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & SlotProp & react.RefAttributes<HTMLAnchorElement>>;
 /**
  * Contains suggestions within `Composer.Editor`.
  */
-declare const ComposerSuggestions: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLDivElement>>;
+declare const ComposerSuggestions: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SlotProp & react.RefAttributes<HTMLDivElement>>;
 /**
@@ -291,3 +292,3 @@ * Displays a list of suggestions within `Composer.Editor`.
  */
-declare const ComposerSuggestionsList: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLUListElement>>;
+declare const ComposerSuggestionsList: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & SlotProp & react.RefAttributes<HTMLUListElement>>;
 /**
@@ -301,3 +302,3 @@ * Displays a suggestion within `Composer.SuggestionsList`.
  */
-declare const ComposerSuggestionsListItem: React__default.ForwardRefExoticComponent<ComposerSuggestionsListItemProps & React__default.RefAttributes<HTMLLIElement>>;
+declare const ComposerSuggestionsListItem: react.ForwardRefExoticComponent<ComposerSuggestionsListItemProps & react.RefAttributes<HTMLLIElement>>;
 /**
@@ -309,3 +310,3 @@ * Displays the composer's editor.
  */
-declare const ComposerEditor: React__default.ForwardRefExoticComponent<ComposerEditorProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const ComposerEditor: react.ForwardRefExoticComponent<ComposerEditorProps & react.RefAttributes<HTMLDivElement>>;
 /**
@@ -320,3 +321,3 @@ * Surrounds the composer's content and handles submissions.
  */
-declare const ComposerForm: React__default.ForwardRefExoticComponent<ComposerFormProps & React__default.RefAttributes<HTMLFormElement>>;
+declare const ComposerForm: react.ForwardRefExoticComponent<ComposerFormProps & react.RefAttributes<HTMLFormElement>>;
 /**
@@ -328,3 +329,3 @@ * A button to submit the composer.
  */
-declare const ComposerSubmit: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLButtonElement>>;
+declare const ComposerSubmit: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
 /**
@@ -336,3 +337,3 @@ * A button which opens a file picker to create attachments.
  */
-declare const ComposerAttachFiles: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLButtonElement>>;
+declare const ComposerAttachFiles: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & SlotProp & react.RefAttributes<HTMLButtonElement>>;
 /**
@@ -346,3 +347,3 @@ * A drop area which accepts files to create attachments.
  */
-declare const ComposerAttachmentsDropArea: React__default.ForwardRefExoticComponent<ComposerAttachmentsDropAreaProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const ComposerAttachmentsDropArea: react.ForwardRefExoticComponent<ComposerAttachmentsDropAreaProps & react.RefAttributes<HTMLDivElement>>;
 /**
@@ -356,3 +357,3 @@ * A toggle button which toggles a specific text mark.
  */
-declare const ComposerMarkToggle: React__default.ForwardRefExoticComponent<ComposerMarkToggleProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const ComposerMarkToggle: react.ForwardRefExoticComponent<ComposerMarkToggleProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -442,3 +443,3 @@ declare namespace index$1 {
 };
-declare const ComposerContext: React.Context<ComposerContext | null>;
+declare const ComposerContext: react.Context<ComposerContext | null>;
 declare function useComposer(): ComposerContext;
@@ -561,3 +562,3 @@
  */
-declare function EmojiPickerRoot({ columns, locale, onEmojiSelect, children, }: EmojiPickerRootProps): React__default.JSX.Element;
+declare function EmojiPickerRoot({ columns, locale, onEmojiSelect, children, }: EmojiPickerRootProps): react_jsx_runtime.JSX.Element;
 declare namespace EmojiPickerRoot {
@@ -579,3 +580,3 @@ var displayName: string;
  */
-declare const EmojiPickerSearch: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & SlotProp & React__default.RefAttributes<HTMLInputElement>>;
+declare const EmojiPickerSearch: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & SlotProp & react.RefAttributes<HTMLInputElement>>;
 /**
@@ -604,3 +605,3 @@ * @private
  */
-declare const EmojiPickerContent: React__default.ForwardRefExoticComponent<EmojiPickerContentProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const EmojiPickerContent: react.ForwardRefExoticComponent<EmojiPickerContentProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -635,3 +636,3 @@ declare namespace index {
  */
-declare const FileSize: React__default.ForwardRefExoticComponent<FileSizeProps & React__default.RefAttributes<HTMLSpanElement>>;
+declare const FileSize: react.ForwardRefExoticComponent<FileSizeProps & react.RefAttributes<HTMLSpanElement>>;
 
@@ -674,4 +675,4 @@ interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children" | "title"> {
  */
-declare const Timestamp: React__default.ForwardRefExoticComponent<TimestampProps & React__default.RefAttributes<HTMLTimeElement>>;
+declare const Timestamp: react.ForwardRefExoticComponent<TimestampProps & react.RefAttributes<HTMLTimeElement>>;
 
 export { AttachmentTooLargeError, index$2 as Comment, CommentBodyComponents, CommentBodyLinkProps, CommentBodyMentionProps, CommentBodyProps, CommentLinkProps, CommentMentionProps, index$1 as Composer, ComposerAttachFilesProps, ComposerAttachmentsDropAreaProps, ComposerBodyMark, ComposerBodyMarks, ComposerContext, ComposerEditorComponents, ComposerEditorFloatingToolbarProps, ComposerEditorLinkProps, ComposerEditorMentionProps, ComposerEditorMentionSuggestionsProps, ComposerEditorProps, ComposerFloatingToolbarProps, ComposerFormProps, ComposerLinkProps, ComposerMarkToggleProps, ComposerMentionProps, ComposerSubmitComment, ComposerSubmitProps, ComposerSuggestionsListItemProps, ComposerSuggestionsListProps, index as EmojiPicker, EmojiPickerContentCategoryHeaderProps, EmojiPickerContentComponents, EmojiPickerContentEmojiProps, EmojiPickerContentEmptyProps, EmojiPickerContentErrorProps, EmojiPickerContentGridProps, EmojiPickerContentLoadingProps, EmojiPickerContentProps, EmojiPickerContentRowProps, EmojiPickerRootProps, EmojiPickerSearchProps, FileSize, FileSizeProps, Timestamp, TimestampProps, useComposer };

dist/primitives/internal/Emoji.js

 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
-var React = require('react');
+var react = require('react');
 var constants = require('../../constants.js');
 
-const Emoji = React.forwardRef(
+const Emoji = react.forwardRef(
   ({ emoji, style, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "span";
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       role: "img",
@@ -24,4 +25,5 @@ "aria-label": emoji,
       ...props,
-      ref: forwardedRef
-    }, emoji);
+      ref: forwardedRef,
+      children: emoji
+    });
   }
@@ -28,0 +30,0 @@ );

dist/primitives/Timestamp.js

@@ -1,6 +0,6 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
-var React = require('react');
+var react = require('react');
 var capitalize = require('../utils/capitalize.js');
@@ -81,3 +81,3 @@ var intl = require('../utils/intl.js');
 }
-const Timestamp = React.forwardRef(
+const Timestamp = react.forwardRef(
   ({
@@ -95,12 +95,12 @@ date,
     const [rerender, key] = useRerender.useRerender();
-    const parsedDate = React.useMemo(() => new Date(date), [date]);
-    const normalizedDate = React.useMemo(
+    const parsedDate = react.useMemo(() => new Date(date), [date]);
+    const normalizedDate = react.useMemo(
       () => parsedDate.toISOString(),
       [parsedDate]
     );
-    const title = React.useMemo(
+    const title = react.useMemo(
       () => typeof renderTitle === "function" ? renderTitle(parsedDate, locale) : renderTitle,
       [renderTitle, parsedDate, key]
     );
-    const children = React.useMemo(
+    const children = react.useMemo(
       () => typeof renderChildren === "function" ? renderChildren(parsedDate, locale) : renderChildren,
@@ -110,8 +110,9 @@ [renderChildren, parsedDate, key]
     useInterval.useInterval(rerender, interval);
-    return /* @__PURE__ */ React.createElement(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
       ...props,
       ref: forwardedRef,
       dateTime: dateTime ?? normalizedDate,
-      title
-    }, children);
+      title,
+      children
+    });
   }
@@ -118,0 +119,0 @@ );

dist/shared.js

@@ -5,12 +5,7 @@ 'use strict';
 var react = require('@liveblocks/react');
-var index_js = require('use-sync-external-store/shim/index.js');
+var _private = require('@liveblocks/react/_private');
 
 function useCurrentUserId() {
   const client = react.useClient();
-  const currentUserIdStore = client[core.kInternal].currentUserIdStore;
-  return index_js.useSyncExternalStore(
-    currentUserIdStore.subscribe,
-    currentUserIdStore.get,
-    currentUserIdStore.get
-  ) ?? null;
+  return _private.useSignal(client[core.kInternal].currentUserId) ?? null;
 }
@@ -17,0 +12,0 @@

dist/utils/Persist.js

@@ -1,24 +0,23 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
-var React = require('react');
+var react = require('react');
 var flushSync = require('./flush-sync.js');
-var useLayoutEffect = require('./use-layout-effect.js');
 
 const PERSIST_NAME = "Persist";
-const PersistContext = React.createContext(null);
+const PersistContext = react.createContext(null);
 function usePersist() {
-  const persistContext = React.useContext(PersistContext);
+  const persistContext = react.useContext(PersistContext);
   return core.nn(persistContext, "Persist is missing from the React tree.");
 }
 function getChild(children) {
-  const child = Array.isArray(children) ? React.Children.only(children) : children;
-  return React.isValidElement(child) ? child : void 0;
+  const child = Array.isArray(children) ? react.Children.only(children) : children;
+  return react.isValidElement(child) ? child : void 0;
 }
 function useAnimationPersist(ref) {
   const [isPresent, unmount] = usePersist();
-  const previousAnimationName = React.useRef(null);
-  const unmountAnimationName = React.useRef(null);
-  useLayoutEffect.useLayoutEffect(() => {
+  const previousAnimationName = react.useRef(null);
+  const unmountAnimationName = react.useRef(null);
+  react.useLayoutEffect(() => {
     const element = ref.current;
@@ -41,3 +40,3 @@ if (!element) {
   }, [ref, unmount]);
-  useLayoutEffect.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     const element = ref.current;
@@ -63,9 +62,9 @@ let animationFrameId;
 function Persist({ children }) {
-  const [isPersisting, setPersisting] = React.useState(true);
-  const lastPresentChild = React.useRef(null);
+  const [isPersisting, setPersisting] = react.useState(true);
+  const lastPresentChild = react.useRef(null);
   const child = getChild(children);
-  const unmount = React.useCallback(() => {
+  const unmount = react.useCallback(() => {
     flushSync.flushSync(() => setPersisting(false));
   }, []);
-  useLayoutEffect.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     if (child) {
@@ -76,5 +75,6 @@ setPersisting(true);
   }, [child]);
-  return /* @__PURE__ */ React.createElement(PersistContext.Provider, {
-    value: [Boolean(child), unmount]
-  }, child ?? (isPersisting ? lastPresentChild.current : null));
+  return /* @__PURE__ */ jsxRuntime.jsx(PersistContext.Provider, {
+    value: [Boolean(child), unmount],
+    children: child ?? (isPersisting ? lastPresentChild.current : null)
+  });
 }
@@ -81,0 +81,0 @@ if (process.env.NODE_ENV !== "production") {

dist/utils/Portal.js

@@ -1,14 +0,14 @@
-'use client';
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
-var React = require('react');
+var react = require('react');
 var ReactDOM = require('react-dom');
 
 const PORTAL_NAME = "Portal";
-const Portal = React.forwardRef(
+const Portal = react.forwardRef(
   ({ container = document?.body, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "div";
     return container ? ReactDOM.createPortal(
-      /* @__PURE__ */ React.createElement(Component, {
+      /* @__PURE__ */ jsxRuntime.jsx(Component, {
         "data-liveblocks-portal": "",
@@ -15,0 +15,0 @@ ...props,

dist/utils/use-controllable-state.js

 'use strict';
 
 var core = require('@liveblocks/core');
-var React = require('react');
+var react = require('react');
 
 function useControllableState(value, onChange, defaultValue) {
-  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
   const isControlled = value !== void 0;
-  const wasControlled = React.useRef(isControlled);
-  React.useEffect(() => {
+  const wasControlled = react.useRef(isControlled);
+  react.useEffect(() => {
     if (process.env.NODE_ENV !== "production" && wasControlled.current !== isControlled) {
@@ -19,3 +19,3 @@ core.console.warn(
   const currentValue = isControlled ? value : uncontrolledValue;
-  const setValue = React.useCallback(
+  const setValue = react.useCallback(
     (value2) => {
@@ -22,0 +22,0 @@ if (isControlled) {

dist/utils/use-index.js

 'use strict';
 
-var React = require('react');
+var react = require('react');
 var clamp = require('./clamp.js');
@@ -11,3 +11,3 @@ var wrap = require('./wrap.js');
 function useIndex(initial, length, options) {
-  const { wrap: shouldWrap } = React.useMemo(() => {
+  const { wrap: shouldWrap } = react.useMemo(() => {
     return {
@@ -18,11 +18,11 @@ ...defaultOptions,
   }, [options]);
-  const transform = React.useMemo(() => shouldWrap ? wrap.wrap : clamp.clamp, [shouldWrap]);
-  const [index, setIndex] = React.useState(initial);
-  React.useEffect(() => {
+  const transform = react.useMemo(() => shouldWrap ? wrap.wrap : clamp.clamp, [shouldWrap]);
+  const [index, setIndex] = react.useState(initial);
+  react.useEffect(() => {
     setIndex((index2) => clamp.clamp(index2, 0, Math.max(length - 1, 0)));
   }, [length]);
-  const previousIndex = React.useCallback(() => {
+  const previousIndex = react.useCallback(() => {
     setIndex((index2) => transform(index2 - 1, 0, Math.max(length, 0)));
   }, [length, transform]);
-  const nextIndex = React.useCallback(() => {
+  const nextIndex = react.useCallback(() => {
     setIndex((index2) => transform(index2 + 1, 0, Math.max(length, 0)));
@@ -29,0 +29,0 @@ }, [length, transform]);

dist/utils/use-initial.js

 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 function useInitial(value) {
-  const [initialValue] = React.useState(value);
+  const [initialValue] = react.useState(value);
   return initialValue;
@@ -8,0 +8,0 @@ }

dist/utils/use-interval.js

 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 function useInterval(callback, delay) {
-  const latestCallback = React.useRef(callback);
-  React.useEffect(() => {
+  const latestCallback = react.useRef(callback);
+  react.useEffect(() => {
     latestCallback.current = callback;
   }, [callback]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!delay && delay !== 0) {
@@ -12,0 +12,0 @@ return;

dist/utils/use-latest.js

 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 function useLatest(value) {
-  const ref = React.useRef(value);
-  React.useEffect(() => {
+  const ref = react.useRef(value);
+  react.useEffect(() => {
     ref.current = value;
@@ -9,0 +9,0 @@ }, [value]);

dist/utils/use-observable.js

 'use strict';
 
-var React = require('react');
+var react = require('react');
 var useLatest = require('./use-latest.js');
@@ -8,3 +8,3 @@
   const latestCallback = useLatest.useLatest(callback);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const unsubscribe = observable.subscribe(() => latestCallback.current());
@@ -11,0 +11,0 @@ return unsubscribe;

dist/utils/use-refs.js

 'use strict';
 
-var React = require('react');
+var react = require('react');
 
@@ -20,3 +20,3 @@ function applyRef(ref, value) {
 function useRefs(...refs) {
-  return React.useCallback((value) => mergeRefs(value, ...refs), [refs]);
+  return react.useCallback((value) => mergeRefs(value, ...refs), [refs]);
 }
@@ -23,0 +23,0 @@

dist/utils/use-rerender.js

 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 function useRerender() {
-  const [key, update] = React.useReducer(
+  const [key, update] = react.useReducer(
     (key2) => key2 + 1,
@@ -8,0 +8,0 @@ 0

dist/utils/use-visible.js

 'use strict';
 
-var React = require('react');
+var react = require('react');
 var useLatest = require('./use-latest.js');
@@ -27,3 +27,3 @@
   const latestCallback = useLatest.useLatest(callback);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const element = ref.current;
@@ -30,0 +30,0 @@ if (!element) {

dist/utils/use-window-focus.js

 'use strict';
 
-var index_js = require('use-sync-external-store/shim/index.js');
+var react = require('react');
 
@@ -20,3 +20,3 @@ function subscribe(callback) {
 function useWindowFocus() {
-  return index_js.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
@@ -23,0 +23,0 @@

dist/version.js

 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.14.0";
+const PKG_VERSION = "2.15.0-debug1";
 const PKG_FORMAT = "cjs";
@@ -6,0 +6,0 @@

package.json

 {
   "name": "@liveblocks/react-ui",
-  "version": "2.14.0",
+  "version": "2.15.0-debug1",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
@@ -78,5 +78,5 @@ "license": "Apache-2.0",
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.14.0",
-    "@liveblocks/core": "2.14.0",
-    "@liveblocks/react": "2.14.0",
+    "@liveblocks/client": "2.15.0-debug1",
+    "@liveblocks/core": "2.15.0-debug1",
+    "@liveblocks/react": "2.15.0-debug1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
@@ -91,7 +91,6 @@ "@radix-ui/react-popover": "^1.1.2",
     "slate-hyperscript": "^0.100.0",
-    "slate-react": "^0.110.3",
-    "use-sync-external-store": "^1.2.2"
+    "slate-react": "^0.110.3"
   },
   "peerDependencies": {
-    "react": "^16.14.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+    "react": "^18 || ^19 || ^19.0.0-rc"
   },
@@ -105,3 +104,2 @@ "devDependencies": {
     "@testing-library/react": "^13.1.1",
-    "@types/use-sync-external-store": "^0.0.6",
     "emojibase": "^15.3.0",
@@ -108,0 +106,0 @@ "eslint-plugin-react": "^7.33.2",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1953929

increased by13.53%

Dependency count

15

decreased by-6.25%

Dev dependency count

27

decreased by-3.57%

Lines of code

19555

increased by5.63%

Worsened metrics

Number of package files

463

decreased by-2.53%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@liveblocks/client@2.15.0-debug1(transitive)

• + Added@liveblocks/core@2.15.0-debug1(transitive)

• + Added@liveblocks/react@2.15.0-debug1(transitive)

• - Removeduse-sync-external-store@^1.2.2

• - Removed@liveblocks/client@2.14.0(transitive)

• - Removed@liveblocks/core@2.14.0(transitive)

• - Removed@liveblocks/react@2.14.0(transitive)

• - Removeduse-sync-external-store@1.4.0(transitive)

• Updated@liveblocks/client@2.15.0-debug1

• Updated@liveblocks/core@2.15.0-debug1

• Updated@liveblocks/react@2.15.0-debug1