@liveblocks/react-ui 2.18.3 → 2.18.4-uns2

package/dist/components/Composer.js

@@ -1,36 +1,34 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@liveblocks/core');
-var _private = require('@liveblocks/react/_private');
-var react = require('react');
-var config = require('../config.js');
-var constants = require('../constants.js');
-var Attachment = require('../icons/Attachment.js');
-var Bold = require('../icons/Bold.js');
-var Code = require('../icons/Code.js');
-var Emoji = require('../icons/Emoji.js');
-var Italic = require('../icons/Italic.js');
-var Mention = require('../icons/Mention.js');
-var Send = require('../icons/Send.js');
-var Strikethrough = require('../icons/Strikethrough.js');
-var overrides = require('../overrides.js');
-var index = require('../primitives/Composer/index.js');
-var contexts = require('../primitives/Composer/contexts.js');
-var utils = require('../primitives/Composer/utils.js');
-var mentions = require('../slate/plugins/mentions.js');
-var classNames = require('../utils/class-names.js');
-var useControllableState = require('../utils/use-controllable-state.js');
-var Attachment$1 = require('./internal/Attachment.js');
-var Attribution = require('./internal/Attribution.js');
-var Avatar = require('./internal/Avatar.js');
-var Button = require('./internal/Button.js');
-var EmojiPicker = require('./internal/EmojiPicker.js');
-var Tooltip = require('./internal/Tooltip.js');
-var User = require('./internal/User.js');
-var PopoverPrimitive = require('@radix-ui/react-popover');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Permission } from '@liveblocks/core';
+import { useLayoutEffect, useRoomOrNull, useCreateRoomThread, useCreateRoomComment, useEditRoomComment, useResolveMentionSuggestions, useRoomPermissions } from '@liveblocks/react/_private';
+import { useCallback, useMemo, createContext, forwardRef, useRef, useSyncExternalStore } from 'react';
+import { useLiveblocksUIConfig } from '../config.js';
+import { FLOATING_ELEMENT_SIDE_OFFSET } from '../constants.js';
+import { AttachmentIcon } from '../icons/Attachment.js';
+import { BoldIcon } from '../icons/Bold.js';
+import { CodeIcon } from '../icons/Code.js';
+import { EmojiIcon } from '../icons/Emoji.js';
+import { ItalicIcon } from '../icons/Italic.js';
+import { MentionIcon } from '../icons/Mention.js';
+import { SendIcon } from '../icons/Send.js';
+import { StrikethroughIcon } from '../icons/Strikethrough.js';
+import { useOverrides } from '../overrides.js';
+import { AttachFiles as ComposerAttachFiles, Mention as ComposerMention$1, Suggestions as ComposerSuggestions, SuggestionsList as ComposerSuggestionsList, SuggestionsListItem as ComposerSuggestionsListItem, MarkToggle as ComposerMarkToggle, FloatingToolbar as ComposerFloatingToolbar$1, Link as ComposerLink$1, Editor as ComposerEditor, Submit as ComposerSubmit, Form as ComposerForm } from '../primitives/Composer/index.js';
+import { useComposer, useComposerEditorContext, useComposerAttachmentsContext } from '../primitives/Composer/contexts.js';
+import { useComposerAttachmentsDropArea } from '../primitives/Composer/utils.js';
+import { MENTION_CHARACTER } from '../slate/plugins/mentions.js';
+import { classNames } from '../utils/class-names.js';
+import { useControllableState } from '../utils/use-controllable-state.js';
+import { FileAttachment } from './internal/Attachment.js';
+import { Attribution } from './internal/Attribution.js';
+import { Avatar } from './internal/Avatar.js';
+import { Button } from './internal/Button.js';
+import { EmojiPicker } from './internal/EmojiPicker.js';
+import { Tooltip, ShortcutTooltip } from './internal/Tooltip.js';
+import { User } from './internal/User.js';
+import { PopoverTrigger } from '@radix-ui/react-popover';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
 
 
 function ComposerInsertMentionEditorAction({
@@ -40,11 +38,11 @@ function ComposerInsertMentionEditorAction({
   onClick,
   ...props
 }) {
-  const { createMention } = contexts.useComposer();
-  const preventDefault = react.useCallback((event) => {
+  const { createMention } = useComposer();
+  const preventDefault = useCallback((event) => {
     event.preventDefault();
   }, []);
-  const handleClick = react.useCallback(
+  const handleClick = useCallback(
     (event) => {
       onClick?.(event);
       if (!event.isDefaultPrevented()) {
@@ -54,14 +52,14 @@ function ComposerInsertMentionEditorAction({
     },
     [createMention, onClick]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+  return /* @__PURE__ */ jsx(Tooltip, {
     content: tooltipLabel ?? label,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
-      className: classNames.classNames("lb-composer-editor-action", className),
+    children: /* @__PURE__ */ jsx(Button, {
+      className: classNames("lb-composer-editor-action", className),
       onPointerDown: preventDefault,
       onClick: handleClick,
       "aria-label": label,
-      icon: /* @__PURE__ */ jsxRuntime.jsx(Mention.MentionIcon, {}),
+      icon: /* @__PURE__ */ jsx(MentionIcon, {}),
       ...props
     })
   });
@@ -73,26 +71,26 @@ function ComposerInsertEmojiEditorAction({
   className,
   ...props
 }) {
-  const { insertText } = contexts.useComposer();
-  const preventDefault = react.useCallback((event) => {
+  const { insertText } = useComposer();
+  const preventDefault = useCallback((event) => {
     event.preventDefault();
   }, []);
-  const stopPropagation = react.useCallback((event) => {
+  const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker.EmojiPicker, {
+  return /* @__PURE__ */ jsx(EmojiPicker, {
     onEmojiSelect: insertText,
     onOpenChange: onPickerOpenChange,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+    children: /* @__PURE__ */ jsx(Tooltip, {
       content: tooltipLabel ?? label,
-      children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive.PopoverTrigger, {
+      children: /* @__PURE__ */ jsx(PopoverTrigger, {
         asChild: true,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
-          className: classNames.classNames("lb-composer-editor-action", className),
+        children: /* @__PURE__ */ jsx(Button, {
+          className: classNames("lb-composer-editor-action", className),
           onPointerDown: preventDefault,
           onClick: stopPropagation,
           "aria-label": label,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Emoji.EmojiIcon, {}),
+          icon: /* @__PURE__ */ jsx(EmojiIcon, {}),
           ...props
         })
       })
@@ -105,33 +103,33 @@ function ComposerAttachFilesEditorAction({
   className,
   ...props
 }) {
-  const preventDefault = react.useCallback((event) => {
+  const preventDefault = useCallback((event) => {
     event.preventDefault();
   }, []);
-  const stopPropagation = react.useCallback((event) => {
+  const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+  return /* @__PURE__ */ jsx(Tooltip, {
     content: tooltipLabel ?? label,
-    children: /* @__PURE__ */ jsxRuntime.jsx(index.AttachFiles, {
+    children: /* @__PURE__ */ jsx(ComposerAttachFiles, {
       asChild: true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
-        className: classNames.classNames("lb-composer-editor-action", className),
+      children: /* @__PURE__ */ jsx(Button, {
+        className: classNames("lb-composer-editor-action", className),
         onPointerDown: preventDefault,
         onClick: stopPropagation,
         "aria-label": label,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {}),
+        icon: /* @__PURE__ */ jsx(AttachmentIcon, {}),
         ...props
       })
     })
   });
 }
 function ComposerMention({ userId }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Mention, {
+  return /* @__PURE__ */ jsxs(ComposerMention$1, {
     className: "lb-composer-mention",
     children: [
-      mentions.MENTION_CHARACTER,
-      /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+      MENTION_CHARACTER,
+      /* @__PURE__ */ jsx(User, {
         userId
       })
     ]
@@ -140,19 +138,19 @@ function ComposerMention({ userId }) {
 function ComposerMentionSuggestions({
   userIds
 }) {
-  return userIds.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index.Suggestions, {
+  return userIds.length > 0 ? /* @__PURE__ */ jsx(ComposerSuggestions, {
     className: "lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions",
-    children: /* @__PURE__ */ jsxRuntime.jsx(index.SuggestionsList, {
+    children: /* @__PURE__ */ jsx(ComposerSuggestionsList, {
       className: "lb-composer-suggestions-list lb-composer-mention-suggestions-list",
-      children: userIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsxs(index.SuggestionsListItem, {
+      children: userIds.map((userId) => /* @__PURE__ */ jsxs(ComposerSuggestionsListItem, {
         className: "lb-composer-suggestions-list-item lb-composer-mention-suggestion",
         value: userId,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
+          /* @__PURE__ */ jsx(Avatar, {
             userId,
             className: "lb-composer-mention-suggestion-avatar"
           }),
-          /* @__PURE__ */ jsxRuntime.jsx(User.User, {
+          /* @__PURE__ */ jsx(User, {
             userId,
             className: "lb-composer-mention-suggestion-user"
           })
@@ -168,19 +166,19 @@ function MarkToggle({
   children,
   ...props
 }) {
-  const $ = overrides.useOverrides();
-  const label = react.useMemo(() => {
+  const $ = useOverrides();
+  const label = useMemo(() => {
     return $.COMPOSER_TOGGLE_MARK(mark);
   }, [$, mark]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
+  return /* @__PURE__ */ jsx(ShortcutTooltip, {
     content: label,
     shortcut,
-    sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET + 2,
-    children: /* @__PURE__ */ jsxRuntime.jsx(index.MarkToggle, {
+    sideOffset: FLOATING_ELEMENT_SIDE_OFFSET + 2,
+    children: /* @__PURE__ */ jsx(ComposerMarkToggle, {
       mark,
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+      children: /* @__PURE__ */ jsx(Button, {
         "aria-label": label,
         variant: "toolbar",
         icon,
@@ -190,36 +188,36 @@ function MarkToggle({
   });
 }
 const markToggles = {
-  bold: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
+  bold: () => /* @__PURE__ */ jsx(MarkToggle, {
     mark: "bold",
     shortcut: "Mod-B",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Bold.BoldIcon, {})
+    icon: /* @__PURE__ */ jsx(BoldIcon, {})
   }),
-  italic: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
+  italic: () => /* @__PURE__ */ jsx(MarkToggle, {
     mark: "italic",
     shortcut: "Mod-I",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Italic.ItalicIcon, {})
+    icon: /* @__PURE__ */ jsx(ItalicIcon, {})
   }),
-  strikethrough: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
+  strikethrough: () => /* @__PURE__ */ jsx(MarkToggle, {
     mark: "strikethrough",
     shortcut: "Mod-Shift-S",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough.StrikethroughIcon, {})
+    icon: /* @__PURE__ */ jsx(StrikethroughIcon, {})
   }),
-  code: () => /* @__PURE__ */ jsxRuntime.jsx(MarkToggle, {
+  code: () => /* @__PURE__ */ jsx(MarkToggle, {
     mark: "code",
     shortcut: "Mod-E",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(Code.CodeIcon, {})
+    icon: /* @__PURE__ */ jsx(CodeIcon, {})
   })
 };
-const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ jsxRuntime.jsx(Toggle, {}, mark));
+const markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => /* @__PURE__ */ jsx(Toggle, {}, mark));
 function ComposerFloatingToolbar() {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.FloatingToolbar, {
+  return /* @__PURE__ */ jsx(ComposerFloatingToolbar$1, {
     className: "lb-root lb-portal lb-elevation lb-composer-floating-toolbar",
     children: markTogglesList
   });
 }
 function ComposerLink({ href, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Link, {
+  return /* @__PURE__ */ jsx(ComposerLink$1, {
     href,
     className: "lb-composer-link",
     children
@@ -231,13 +229,13 @@ function ComposerFileAttachment({
   overrides,
   ...props
 }) {
-  const { removeAttachment } = contexts.useComposer();
-  const { roomId } = contexts.useComposerEditorContext();
-  const handleDeleteClick = react.useCallback(() => {
+  const { removeAttachment } = useComposer();
+  const { roomId } = useComposerEditorContext();
+  const handleDeleteClick = useCallback(() => {
     removeAttachment(attachment.id);
   }, [attachment.id, removeAttachment]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Attachment$1.FileAttachment, {
-    className: classNames.classNames("lb-composer-attachment", className),
+  return /* @__PURE__ */ jsx(FileAttachment, {
+    className: classNames("lb-composer-attachment", className),
     ...props,
     attachment,
     onDeleteClick: handleDeleteClick,
@@ -251,17 +249,17 @@ function ComposerAttachments({
   className,
   ...props
 }) {
-  const { attachments } = contexts.useComposer();
+  const { attachments } = useComposer();
   if (attachments.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-composer-attachments", className),
+  return /* @__PURE__ */ jsx("div", {
+    className: classNames("lb-composer-attachments", className),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+    children: /* @__PURE__ */ jsx("div", {
       className: "lb-attachments",
       children: attachments.map((attachment) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(ComposerFileAttachment, {
+        return /* @__PURE__ */ jsx(ComposerFileAttachment, {
           attachment,
           overrides
         }, attachment.id);
@@ -280,7 +278,7 @@ function ComposerEditorContainer({
   showAttribution,
   defaultValue,
   isCollapsed,
-  overrides: overrides$1,
+  overrides,
   actions,
   autoFocus,
   disabled,
@@ -289,32 +287,32 @@ function ComposerEditorContainer({
   onEmptyChange,
   onEditorClick
 }) {
-  const { isEmpty } = contexts.useComposer();
-  const { hasMaxAttachments } = contexts.useComposerAttachmentsContext();
-  const $ = overrides.useOverrides(overrides$1);
-  const components = react.useMemo(() => {
+  const { isEmpty } = useComposer();
+  const { hasMaxAttachments } = useComposerAttachmentsContext();
+  const $ = useOverrides(overrides);
+  const components = useMemo(() => {
     return {
       ...editorRequiredComponents,
       FloatingToolbar: showFormattingControls ? ComposerFloatingToolbar : void 0
     };
   }, [showFormattingControls]);
-  const [isDraggingOver, dropAreaProps] = utils.useComposerAttachmentsDropArea({
+  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({
     disabled: disabled || hasMaxAttachments
   });
-  _private.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     onEmptyChange(isEmpty);
   }, [isEmpty, onEmptyChange]);
-  const preventDefault = react.useCallback((event) => {
+  const preventDefault = useCallback((event) => {
     event.preventDefault();
   }, []);
-  const stopPropagation = react.useCallback((event) => {
+  const stopPropagation = useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: "lb-composer-editor-container",
     ...dropAreaProps,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.Editor, {
+      /* @__PURE__ */ jsx(ComposerEditor, {
         className: "lb-composer-editor",
         onClick: onEditorClick,
         placeholder: $.COMPOSER_PLACEHOLDER,
@@ -324,46 +322,46 @@ function ComposerEditorContainer({
         disabled,
         dir: $.dir
       }),
-      showAttachments && /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {
-        overrides: overrides$1
+      showAttachments && /* @__PURE__ */ jsx(ComposerAttachments, {
+        overrides
       }),
-      (!isCollapsed || isDraggingOver) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      (!isCollapsed || isDraggingOver) && /* @__PURE__ */ jsxs("div", {
         className: "lb-composer-footer",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          /* @__PURE__ */ jsxs("div", {
             className: "lb-composer-editor-actions",
             children: [
-              hasResolveMentionSuggestions && /* @__PURE__ */ jsxRuntime.jsx(ComposerInsertMentionEditorAction, {
+              hasResolveMentionSuggestions && /* @__PURE__ */ jsx(ComposerInsertMentionEditorAction, {
                 label: $.COMPOSER_INSERT_MENTION,
                 disabled
               }),
-              /* @__PURE__ */ jsxRuntime.jsx(ComposerInsertEmojiEditorAction, {
+              /* @__PURE__ */ jsx(ComposerInsertEmojiEditorAction, {
                 label: $.COMPOSER_INSERT_EMOJI,
                 onPickerOpenChange: onEmojiPickerOpenChange,
                 disabled
               }),
-              showAttachments && /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachFilesEditorAction, {
+              showAttachments && /* @__PURE__ */ jsx(ComposerAttachFilesEditorAction, {
                 label: $.COMPOSER_ATTACH_FILES,
                 disabled
               })
             ]
           }),
-          showAttribution && /* @__PURE__ */ jsxRuntime.jsx(Attribution.Attribution, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
+          showAttribution && /* @__PURE__ */ jsx(Attribution, {}),
+          /* @__PURE__ */ jsx("div", {
             className: "lb-composer-actions",
-            children: actions ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-              children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.ShortcutTooltip, {
+            children: actions ?? /* @__PURE__ */ jsx(Fragment, {
+              children: /* @__PURE__ */ jsx(ShortcutTooltip, {
                 content: $.COMPOSER_SEND,
                 shortcut: "Enter",
-                children: /* @__PURE__ */ jsxRuntime.jsx(index.Submit, {
+                children: /* @__PURE__ */ jsx(ComposerSubmit, {
                   asChild: true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                  children: /* @__PURE__ */ jsx(Button, {
                     onPointerDown: preventDefault,
                     onClick: stopPropagation,
                     className: "lb-composer-action",
                     variant: "primary",
                     "aria-label": $.COMPOSER_SEND,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(Send.SendIcon, {})
+                    icon: /* @__PURE__ */ jsx(SendIcon, {})
                   })
                 })
               })
@@ -371,12 +369,12 @@ function ComposerEditorContainer({
           })
         ]
       }),
-      showAttachments && isDraggingOver && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      showAttachments && isDraggingOver && /* @__PURE__ */ jsx("div", {
         className: "lb-composer-attachments-drop-area",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        children: /* @__PURE__ */ jsxs("div", {
           className: "lb-composer-attachments-drop-area-label",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentIcon, {}),
+            /* @__PURE__ */ jsx(AttachmentIcon, {}),
             $.COMPOSER_ATTACH_FILES
           ]
         })
@@ -384,8 +382,8 @@ function ComposerEditorContainer({
     ]
   });
 }
-const ComposerRoomIdContext = react.createContext(null);
-const Composer = react.forwardRef(
+const ComposerRoomIdContext = createContext(null);
+const Composer = forwardRef(
   ({
     threadId,
     commentId,
@@ -396,7 +394,7 @@ const Composer = react.forwardRef(
     collapsed: controlledCollapsed,
     defaultCollapsed,
     onCollapsedChange: controlledOnCollapsedChange,
-    overrides: overrides$1,
+    overrides,
     actions,
     onBlur,
     className,
@@ -409,28 +407,28 @@ const Composer = react.forwardRef(
     roomId: _roomId,
     ...props
   }, forwardedRef) => {
-    const room = _private.useRoomOrNull();
+    const room = useRoomOrNull();
     const roomId = _roomId !== void 0 ? _roomId : room?.id;
     if (roomId === void 0) {
       throw new Error(
         "Composer must be a descendant of RoomProvider component"
       );
     }
-    const createThread = _private.useCreateRoomThread(roomId);
-    const createComment = _private.useCreateRoomComment(roomId);
-    const editComment = _private.useEditRoomComment(roomId);
-    const { preventUnsavedComposerChanges } = config.useLiveblocksUIConfig();
-    const hasResolveMentionSuggestions = _private.useResolveMentionSuggestions() !== void 0;
-    const isEmptyRef = react.useRef(true);
-    const isEmojiPickerOpenRef = react.useRef(false);
-    const $ = overrides.useOverrides(overrides$1);
-    const [isCollapsed, onCollapsedChange] = useControllableState.useControllableState(
+    const createThread = useCreateRoomThread(roomId);
+    const createComment = useCreateRoomComment(roomId);
+    const editComment = useEditRoomComment(roomId);
+    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();
+    const hasResolveMentionSuggestions = useResolveMentionSuggestions() !== void 0;
+    const isEmptyRef = useRef(true);
+    const isEmojiPickerOpenRef = useRef(false);
+    const $ = useOverrides(overrides);
+    const [isCollapsed, onCollapsedChange] = useControllableState(
       controlledCollapsed === void 0 && defaultCollapsed === void 0 ? false : controlledCollapsed,
       controlledOnCollapsedChange,
       defaultCollapsed
     );
-    const canCommentFallback = react.useSyncExternalStore(
-      react.useCallback(
+    const canCommentFallback = useSyncExternalStore(
+      useCallback(
         (callback) => {
           if (room === null)
             return () => {
@@ -439,20 +437,20 @@ const Composer = react.forwardRef(
         },
         [room]
       ),
-      react.useCallback(() => {
+      useCallback(() => {
         return room?.getSelf()?.canComment ?? true;
       }, [room]),
-      react.useCallback(() => true, [])
+      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 permissions = useRoomPermissions(roomId);
+    const canComment = permissions.size > 0 ? permissions.has(Permission.CommentsWrite) || permissions.has(Permission.Write) : canCommentFallback;
+    const setEmptyRef = useCallback((isEmpty) => {
       isEmptyRef.current = isEmpty;
     }, []);
-    const setEmojiPickerOpenRef = react.useCallback((isEmojiPickerOpen) => {
+    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen) => {
       isEmojiPickerOpenRef.current = isEmojiPickerOpen;
     }, []);
-    const handleFocus = react.useCallback(
+    const handleFocus = useCallback(
       (event) => {
         onFocus?.(event);
         if (event.isDefaultPrevented()) {
@@ -464,7 +462,7 @@ const Composer = react.forwardRef(
       },
       [onCollapsedChange, onFocus, canComment]
     );
-    const handleBlur = react.useCallback(
+    const handleBlur = useCallback(
       (event) => {
         onBlur?.(event);
         if (event.isDefaultPrevented()) {
@@ -479,7 +477,7 @@ const Composer = react.forwardRef(
       },
       [onBlur, onCollapsedChange]
     );
-    const handleEditorClick = react.useCallback(
+    const handleEditorClick = useCallback(
       (event) => {
         event.stopPropagation();
         if (isEmptyRef.current && canComment) {
@@ -488,7 +486,7 @@ const Composer = react.forwardRef(
       },
       [onCollapsedChange, canComment]
     );
-    const handleCommentSubmit = react.useCallback(
+    const handleCommentSubmit = useCallback(
       (comment, event) => {
         onComposerSubmit?.(comment, event);
         if (event.isDefaultPrevented()) {
@@ -525,10 +523,10 @@ const Composer = react.forwardRef(
         threadId
       ]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
-      children: /* @__PURE__ */ jsxRuntime.jsx(index.Form, {
+    return /* @__PURE__ */ jsx(TooltipProvider, {
+      children: /* @__PURE__ */ jsx(ComposerForm, {
         onComposerSubmit: handleCommentSubmit,
-        className: classNames.classNames(
+        className: classNames(
           "lb-root lb-composer lb-composer-form",
           className
         ),
@@ -543,10 +541,10 @@ const Composer = react.forwardRef(
         pasteFilesAsAttachments: showAttachments,
         preventUnsavedChanges: preventUnsavedComposerChanges,
         roomId,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorContainer, {
+        children: /* @__PURE__ */ jsx(ComposerEditorContainer, {
           defaultValue,
           actions,
-          overrides: overrides$1,
+          overrides,
           isCollapsed,
           showAttachments,
           showAttribution,
@@ -563,6 +561,5 @@ const Composer = react.forwardRef(
   }
 );
 
-exports.Composer = Composer;
-exports.ComposerRoomIdContext = ComposerRoomIdContext;
+export { Composer, ComposerRoomIdContext };
 //# sourceMappingURL=Composer.js.map