@liveblocks/react-ui 2.18.3 → 2.18.4-uns1

package/dist/primitives/Composer/index.js

@@ -1,56 +1,35 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@liveblocks/core');
-var _private = require('@liveblocks/react/_private');
-var reactSlot = require('@radix-ui/react-slot');
-var TogglePrimitive = require('@radix-ui/react-toggle');
-var react = require('react');
-var slate = require('slate');
-var slateHistory = require('slate-history');
-var slateReact = require('slate-react');
-var config = require('../../config.js');
-var autoFormatting = require('../../slate/plugins/auto-formatting.js');
-var autoLinks = require('../../slate/plugins/auto-links.js');
-var customLinks = require('../../slate/plugins/custom-links.js');
-var emptyClearFormatting = require('../../slate/plugins/empty-clear-formatting.js');
-var mentions = require('../../slate/plugins/mentions.js');
-var normalize = require('../../slate/plugins/normalize.js');
-var paste = require('../../slate/plugins/paste.js');
-var getDomRange = require('../../slate/utils/get-dom-range.js');
-var isEmpty = require('../../slate/utils/is-empty.js');
-var marks = require('../../slate/utils/marks.js');
-var isKey = require('../../utils/is-key.js');
-var Persist = require('../../utils/Persist.js');
-var Portal = require('../../utils/Portal.js');
-var requestSubmit = require('../../utils/request-submit.js');
-var useIndex = require('../../utils/use-index.js');
-var useInitial = require('../../utils/use-initial.js');
-var useObservable = require('../../utils/use-observable.js');
-var useRefs = require('../../utils/use-refs.js');
-var utils = require('../Comment/utils.js');
-var contexts = require('./contexts.js');
-var utils$1 = require('./utils.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 TogglePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TogglePrimitive);
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createCommentAttachmentId, makeEventSource } from '@liveblocks/core';
+import { useLayoutEffect, useClientOrNull, useResolveMentionSuggestions, useMentionSuggestions, useRoomOrNull, useSyncSource } from '@liveblocks/react/_private';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { useMemo, useState, forwardRef, useRef, useCallback, useEffect, useId, useImperativeHandle } from 'react';
+import { createEditor, Range, Transforms, Editor, insertText } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact, useSelected, useSlateStatic, ReactEditor, Slate, Editable } from 'slate-react';
+import { useLiveblocksUIConfig } from '../../config.js';
+import { withAutoFormatting } from '../../slate/plugins/auto-formatting.js';
+import { withAutoLinks } from '../../slate/plugins/auto-links.js';
+import { withCustomLinks } from '../../slate/plugins/custom-links.js';
+import { withEmptyClearFormatting } from '../../slate/plugins/empty-clear-formatting.js';
+import { withMentions, getMentionDraftAtSelection, MENTION_CHARACTER, insertMention, insertMentionCharacter } from '../../slate/plugins/mentions.js';
+import { withNormalize } from '../../slate/plugins/normalize.js';
+import { withPaste } from '../../slate/plugins/paste.js';
+import { getDOMRange } from '../../slate/utils/get-dom-range.js';
+import { isEmpty } from '../../slate/utils/is-empty.js';
+import { leaveMarkEdge, toggleMark, getMarks } from '../../slate/utils/marks.js';
+import { isKey } from '../../utils/is-key.js';
+import { Persist, usePersist, useAnimationPersist } from '../../utils/Persist.js';
+import { Portal } from '../../utils/Portal.js';
+import { requestSubmit } from '../../utils/request-submit.js';
+import { useIndex } from '../../utils/use-index.js';
+import { useInitial } from '../../utils/use-initial.js';
+import { useObservable } from '../../utils/use-observable.js';
+import { useRefs } from '../../utils/use-refs.js';
+import { toAbsoluteUrl } from '../Comment/utils.js';
+import { useComposerEditorContext, useComposer, ComposerSuggestionsContext, ComposerFloatingToolbarContext, useComposerFloatingToolbarContext, useComposerSuggestionsContext, ComposerEditorContext, ComposerAttachmentsContext, ComposerContext, useComposerAttachmentsContext } from './contexts.js';
+import { useContentZIndex, useFloatingWithOptions, getSideAndAlignFromFloatingPlacement, commentBodyToComposerBody, useComposerAttachmentsManager, composerBodyToCommentBody, useComposerAttachmentsDropArea } from './utils.js';
 
 
 const MENTION_SUGGESTIONS_POSITION = "top";
@@ -75,13 +54,13 @@ function createComposerEditor({
   createAttachments,
   pasteFilesAsAttachments
 }) {
-  return normalize.withNormalize(
-    mentions.withMentions(
-      customLinks.withCustomLinks(
-        autoLinks.withAutoLinks(
-          autoFormatting.withAutoFormatting(
-            emptyClearFormatting.withEmptyClearFormatting(
-              paste.withPaste(slateHistory.withHistory(slateReact.withReact(slate.createEditor())), {
+  return withNormalize(
+    withMentions(
+      withCustomLinks(
+        withAutoLinks(
+          withAutoFormatting(
+            withEmptyClearFormatting(
+              withPaste(withHistory(withReact(createEditor())), {
                 createAttachments,
                 pasteFilesAsAttachments
               })
@@ -98,11 +77,11 @@ function ComposerEditorMentionWrapper({
   children,
   element
 }) {
-  const isSelected = slateReact.useSelected();
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
+  const isSelected = useSelected();
+  return /* @__PURE__ */ jsxs("span", {
     ...attributes,
     children: [
-      element.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
+      element.id ? /* @__PURE__ */ jsx(Mention, {
         userId: element.id,
         isSelected
       }) : null,
@@ -116,13 +95,13 @@ function ComposerEditorLinkWrapper({
   element,
   children
 }) {
-  const href = react.useMemo(
-    () => utils.toAbsoluteUrl(element.url) ?? element.url,
+  const href = useMemo(
+    () => toAbsoluteUrl(element.url) ?? element.url,
     [element.url]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+  return /* @__PURE__ */ jsx("span", {
     ...attributes,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Link, {
+    children: /* @__PURE__ */ jsx(Link, {
       href,
       children
     })
@@ -141,11 +120,11 @@ function ComposerEditorMentionSuggestionsWrapper({
   dir,
   MentionSuggestions
 }) {
-  const editor = slateReact.useSlateStatic();
-  const { onEditorChange } = contexts.useComposerEditorContext();
-  const { isFocused } = contexts.useComposer();
-  const { portalContainer } = config.useLiveblocksUIConfig();
-  const [contentRef, contentZIndex] = utils$1.useContentZIndex();
+  const editor = useSlateStatic();
+  const { onEditorChange } = useComposerEditorContext();
+  const { isFocused } = useComposer();
+  const { portalContainer } = useLiveblocksUIConfig();
+  const [contentRef, contentZIndex] = useContentZIndex();
   const isOpen = isFocused && mentionDraft?.range !== void 0 && userIds !== void 0;
   const {
     refs: { setReference, setFloating },
@@ -154,25 +133,25 @@ function ComposerEditorMentionSuggestionsWrapper({
     placement,
     x,
     y
-  } = utils$1.useFloatingWithOptions({
+  } = useFloatingWithOptions({
     position,
     dir,
     alignment: "start",
     open: isOpen
   });
-  useObservable.useObservable(onEditorChange, () => {
-    setMentionDraft(mentions.getMentionDraftAtSelection(editor));
+  useObservable(onEditorChange, () => {
+    setMentionDraft(getMentionDraftAtSelection(editor));
   });
-  _private.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!mentionDraft) {
       setReference(null);
       return;
     }
-    const domRange = getDomRange.getDOMRange(editor, mentionDraft.range);
+    const domRange = getDOMRange(editor, mentionDraft.range);
     setReference(domRange ?? null);
   }, [setReference, editor, mentionDraft]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, {
-    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerSuggestionsContext.Provider, {
+  return /* @__PURE__ */ jsx(Persist, {
+    children: isOpen ? /* @__PURE__ */ jsx(ComposerSuggestionsContext.Provider, {
       value: {
         id,
         itemId,
@@ -183,7 +162,7 @@ function ComposerEditorMentionSuggestionsWrapper({
         dir,
         ref: contentRef
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, {
+      children: /* @__PURE__ */ jsx(Portal, {
         ref: setFloating,
         container: portalContainer,
         style: {
@@ -194,7 +173,7 @@ function ComposerEditorMentionSuggestionsWrapper({
           minWidth: "max-content",
           zIndex: contentZIndex
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(MentionSuggestions, {
+        children: /* @__PURE__ */ jsx(MentionSuggestions, {
           userIds,
           selectedUserId
         })
@@ -210,12 +189,12 @@ function ComposerEditorFloatingToolbarWrapper({
   hasFloatingToolbarRange,
   setHasFloatingToolbarRange
 }) {
-  const editor = slateReact.useSlateStatic();
-  const { onEditorChange } = contexts.useComposerEditorContext();
-  const { isFocused } = contexts.useComposer();
-  const { portalContainer } = config.useLiveblocksUIConfig();
-  const [contentRef, contentZIndex] = utils$1.useContentZIndex();
-  const [isPointerDown, setPointerDown] = react.useState(false);
+  const editor = useSlateStatic();
+  const { onEditorChange } = useComposerEditorContext();
+  const { isFocused } = useComposer();
+  const { portalContainer } = useLiveblocksUIConfig();
+  const [contentRef, contentZIndex] = useContentZIndex();
+  const [isPointerDown, setPointerDown] = useState(false);
   const isOpen = isFocused && !isPointerDown && hasFloatingToolbarRange;
   const {
     refs: { setReference, setFloating },
@@ -224,14 +203,14 @@ function ComposerEditorFloatingToolbarWrapper({
     placement,
     x,
     y
-  } = utils$1.useFloatingWithOptions({
+  } = useFloatingWithOptions({
     type: "range",
     position,
     dir,
     alignment: "center",
     open: isOpen
   });
-  _private.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!isFocused) {
       return;
     }
@@ -244,11 +223,11 @@ function ComposerEditorFloatingToolbarWrapper({
       document.removeEventListener("pointerup", handlePointerUp);
     };
   }, [isFocused]);
-  useObservable.useObservable(onEditorChange, () => {
+  useObservable(onEditorChange, () => {
     setReference(null);
     requestAnimationFrame(() => {
       const domSelection = window.getSelection();
-      if (!editor.selection || slate.Range.isCollapsed(editor.selection) || !domSelection || !domSelection.rangeCount) {
+      if (!editor.selection || Range.isCollapsed(editor.selection) || !domSelection || !domSelection.rangeCount) {
         setHasFloatingToolbarRange(false);
         setReference(null);
       } else {
@@ -258,15 +237,15 @@ function ComposerEditorFloatingToolbarWrapper({
       }
     });
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, {
-    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerFloatingToolbarContext.Provider, {
+  return /* @__PURE__ */ jsx(Persist, {
+    children: isOpen ? /* @__PURE__ */ jsx(ComposerFloatingToolbarContext.Provider, {
       value: {
         id,
         placement,
         dir,
         ref: contentRef
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, {
+      children: /* @__PURE__ */ jsx(Portal, {
         ref: setFloating,
         container: portalContainer,
         style: {
@@ -277,28 +256,28 @@ function ComposerEditorFloatingToolbarWrapper({
           minWidth: "max-content",
           zIndex: contentZIndex
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(FloatingToolbar, {})
+        children: /* @__PURE__ */ jsx(FloatingToolbar, {})
       })
     }) : null
   });
 }
-const ComposerFloatingToolbar = react.forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
-  const [isPresent] = Persist.usePersist();
-  const ref = react.useRef(null);
+const ComposerFloatingToolbar = forwardRef(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {
+  const [isPresent] = usePersist();
+  const ref = useRef(null);
   const {
     id,
     ref: contentRef,
     placement,
     dir
-  } = contexts.useComposerFloatingToolbarContext(COMPOSER_FLOATING_TOOLBAR_NAME);
-  const mergedRefs = useRefs.useRefs(forwardedRef, contentRef, ref);
-  const [side, align] = react.useMemo(
-    () => utils$1.getSideAndAlignFromFloatingPlacement(placement),
+  } = useComposerFloatingToolbarContext(COMPOSER_FLOATING_TOOLBAR_NAME);
+  const mergedRefs = useRefs(forwardedRef, contentRef, ref);
+  const [side, align] = useMemo(
+    () => getSideAndAlignFromFloatingPlacement(placement),
     [placement]
   );
-  const Component = asChild ? reactSlot.Slot : "div";
-  Persist.useAnimationPersist(ref);
-  const handlePointerDown = react.useCallback(
+  const Component = asChild ? Slot : "div";
+  useAnimationPersist(ref);
+  const handlePointerDown = useCallback(
     (event) => {
       onPointerDown?.(event);
       event.preventDefault();
@@ -306,7 +285,7 @@ const ComposerFloatingToolbar = react.forwardRef(({ children, onPointerDown, sty
     },
     [onPointerDown]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+  return /* @__PURE__ */ jsx(Component, {
     dir,
     role: "toolbar",
     id,
@@ -335,18 +314,18 @@ function ComposerEditorElement({
   const { attributes, children, element } = props;
   switch (element.type) {
     case "mention":
-      return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorMentionWrapper, {
+      return /* @__PURE__ */ jsx(ComposerEditorMentionWrapper, {
         Mention,
         ...props
       });
     case "auto-link":
     case "custom-link":
-      return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorLinkWrapper, {
+      return /* @__PURE__ */ jsx(ComposerEditorLinkWrapper, {
         Link,
         ...props
       });
     case "paragraph":
-      return /* @__PURE__ */ jsxRuntime.jsx("p", {
+      return /* @__PURE__ */ jsx("p", {
         ...attributes,
         style: { position: "relative" },
         children
@@ -357,26 +336,26 @@ function ComposerEditorElement({
 }
 function ComposerEditorLeaf({ attributes, children, leaf }) {
   if (leaf.bold) {
-    children = /* @__PURE__ */ jsxRuntime.jsx("strong", {
+    children = /* @__PURE__ */ jsx("strong", {
       children
     });
   }
   if (leaf.italic) {
-    children = /* @__PURE__ */ jsxRuntime.jsx("em", {
+    children = /* @__PURE__ */ jsx("em", {
       children
     });
   }
   if (leaf.strikethrough) {
-    children = /* @__PURE__ */ jsxRuntime.jsx("s", {
+    children = /* @__PURE__ */ jsx("s", {
       children
     });
   }
   if (leaf.code) {
-    children = /* @__PURE__ */ jsxRuntime.jsx("code", {
+    children = /* @__PURE__ */ jsx("code", {
       children
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+  return /* @__PURE__ */ jsx("span", {
     ...attributes,
     children
   });
@@ -386,18 +365,18 @@ function ComposerEditorPlaceholder({
   children
 }) {
   const { opacity: _opacity, ...style } = attributes.style;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+  return /* @__PURE__ */ jsx("span", {
     ...attributes,
     style,
     "data-placeholder": "",
     children
   });
 }
-const ComposerMention = react.forwardRef(
+const ComposerMention = forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
-    const Component = asChild ? reactSlot.Slot : "span";
-    const isSelected = slateReact.useSelected();
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    const Component = asChild ? Slot : "span";
+    const isSelected = useSelected();
+    return /* @__PURE__ */ jsx(Component, {
       "data-selected": isSelected || void 0,
       ...props,
       ref: forwardedRef,
@@ -405,10 +384,10 @@ const ComposerMention = react.forwardRef(
     });
   }
 );
-const ComposerLink = react.forwardRef(
+const ComposerLink = forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
-    const Component = asChild ? reactSlot.Slot : "a";
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    const Component = asChild ? Slot : "a";
+    return /* @__PURE__ */ jsx(Component, {
       target: "_blank",
       rel: "noopener noreferrer nofollow",
       ...props,
@@ -417,22 +396,22 @@ const ComposerLink = react.forwardRef(
     });
   }
 );
-const ComposerSuggestions = react.forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
-  const [isPresent] = Persist.usePersist();
-  const ref = react.useRef(null);
+const ComposerSuggestions = forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
+  const [isPresent] = usePersist();
+  const ref = useRef(null);
   const {
     ref: contentRef,
     placement,
     dir
-  } = contexts.useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_NAME);
-  const mergedRefs = useRefs.useRefs(forwardedRef, contentRef, ref);
-  const [side, align] = react.useMemo(
-    () => utils$1.getSideAndAlignFromFloatingPlacement(placement),
+  } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_NAME);
+  const mergedRefs = useRefs(forwardedRef, contentRef, ref);
+  const [side, align] = useMemo(
+    () => getSideAndAlignFromFloatingPlacement(placement),
     [placement]
   );
-  const Component = asChild ? reactSlot.Slot : "div";
-  Persist.useAnimationPersist(ref);
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+  const Component = asChild ? Slot : "div";
+  useAnimationPersist(ref);
+  return /* @__PURE__ */ jsx(Component, {
     dir,
     ...props,
     "data-state": isPresent ? "open" : "closed",
@@ -449,10 +428,10 @@ const ComposerSuggestions = react.forwardRef(({ children, style, asChild, ...pro
     children
   });
 });
-const ComposerSuggestionsList = react.forwardRef(({ children, asChild, ...props }, forwardedRef) => {
-  const { id } = contexts.useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_NAME);
-  const Component = asChild ? reactSlot.Slot : "ul";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+const ComposerSuggestionsList = forwardRef(({ children, asChild, ...props }, forwardedRef) => {
+  const { id } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_NAME);
+  const Component = asChild ? Slot : "ul";
+  return /* @__PURE__ */ jsx(Component, {
     role: "listbox",
     id,
     "aria-label": "Suggestions list",
@@ -461,7 +440,7 @@ const ComposerSuggestionsList = react.forwardRef(({ children, asChild, ...props
     children
   });
 });
-const ComposerSuggestionsListItem = react.forwardRef(
+const ComposerSuggestionsListItem = forwardRef(
   ({
     value,
     children,
@@ -471,21 +450,21 @@ const ComposerSuggestionsListItem = react.forwardRef(
     asChild,
     ...props
   }, forwardedRef) => {
-    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 ref = useRef(null);
+    const mergedRefs = useRefs(forwardedRef, ref);
+    const { selectedValue, setSelectedValue, itemId, onItemSelect } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_ITEM_NAME);
+    const Component = asChild ? Slot : "li";
+    const isSelected = useMemo(
       () => selectedValue === value,
       [selectedValue, value]
     );
-    const id = react.useMemo(() => itemId(value), [itemId, value]);
-    react.useEffect(() => {
+    const id = useMemo(() => itemId(value), [itemId, value]);
+    useEffect(() => {
       if (ref?.current && isSelected) {
         ref.current.scrollIntoView({ block: "nearest" });
       }
     }, [isSelected]);
-    const handlePointerMove = react.useCallback(
+    const handlePointerMove = useCallback(
       (event) => {
         onPointerMove?.(event);
         if (!event.isDefaultPrevented()) {
@@ -494,7 +473,7 @@ const ComposerSuggestionsListItem = react.forwardRef(
       },
       [onPointerMove, setSelectedValue, value]
     );
-    const handlePointerDown = react.useCallback(
+    const handlePointerDown = useCallback(
       (event) => {
         onPointerDown?.(event);
         event.preventDefault();
@@ -502,7 +481,7 @@ const ComposerSuggestionsListItem = react.forwardRef(
       },
       [onPointerDown]
     );
-    const handleClick = react.useCallback(
+    const handleClick = useCallback(
       (event) => {
         onClick?.(event);
         const wasDefaultPrevented = event.isDefaultPrevented();
@@ -514,7 +493,7 @@ const ComposerSuggestionsListItem = react.forwardRef(
       },
       [onClick, onItemSelect, value]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       role: "option",
       id,
       "data-selected": isSelected || void 0,
@@ -530,23 +509,23 @@ const ComposerSuggestionsListItem = react.forwardRef(
 );
 const defaultEditorComponents = {
   Link: ({ href, children }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(ComposerLink, {
+    return /* @__PURE__ */ jsx(ComposerLink, {
       href,
       children
     });
   },
   Mention: ({ userId }) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(ComposerMention, {
+    return /* @__PURE__ */ jsxs(ComposerMention, {
       children: [
-        mentions.MENTION_CHARACTER,
+        MENTION_CHARACTER,
         userId
       ]
     });
   },
   MentionSuggestions: ({ userIds }) => {
-    return userIds.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestions, {
-      children: /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsList, {
-        children: userIds.map((userId) => /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsListItem, {
+    return userIds.length > 0 ? /* @__PURE__ */ jsx(ComposerSuggestions, {
+      children: /* @__PURE__ */ jsx(ComposerSuggestionsList, {
+        children: userIds.map((userId) => /* @__PURE__ */ jsx(ComposerSuggestionsListItem, {
           value: userId,
           children: userId
         }, userId))
@@ -554,7 +533,7 @@ const defaultEditorComponents = {
     }) : null;
   }
 };
-const ComposerEditor = react.forwardRef(
+const ComposerEditor = forwardRef(
   ({
     defaultValue,
     onKeyDown,
@@ -566,8 +545,8 @@ const ComposerEditor = react.forwardRef(
     dir,
     ...props
   }, forwardedRef) => {
-    const client = _private.useClientOrNull();
-    const { editor, validate, setFocused, onEditorChange, roomId } = contexts.useComposerEditorContext();
+    const client = useClientOrNull();
+    const { editor, validate, setFocused, onEditorChange, roomId } = useComposerEditorContext();
     const {
       submit,
       focus,
@@ -576,21 +555,21 @@ const ComposerEditor = react.forwardRef(
       canSubmit,
       isDisabled: isComposerDisabled,
       isFocused
-    } = contexts.useComposer();
+    } = useComposer();
     const isDisabled = isComposerDisabled || disabled;
-    const initialBody = useInitial.useInitial(defaultValue ?? emptyCommentBody);
-    const initialEditorValue = react.useMemo(() => {
-      return utils$1.commentBodyToComposerBody(initialBody);
+    const initialBody = useInitial(defaultValue ?? emptyCommentBody);
+    const initialEditorValue = useMemo(() => {
+      return commentBodyToComposerBody(initialBody);
     }, [initialBody]);
-    const { Link, Mention, MentionSuggestions, FloatingToolbar } = react.useMemo(
+    const { Link, Mention, MentionSuggestions, FloatingToolbar } = useMemo(
       () => ({ ...defaultEditorComponents, ...components }),
       [components]
     );
-    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] = react.useState(false);
-    const resolveMentionSuggestions = _private.useResolveMentionSuggestions();
+    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] = useState(false);
+    const resolveMentionSuggestions = useResolveMentionSuggestions();
     const hasResolveMentionSuggestions = client ? resolveMentionSuggestions : true;
-    const [mentionDraft, setMentionDraft] = react.useState();
-    const mentionSuggestions = _private.useMentionSuggestions(
+    const [mentionDraft, setMentionDraft] = useState();
+    const mentionSuggestions = useMentionSuggestions(
       roomId,
       mentionDraft?.text
     );
@@ -599,17 +578,17 @@ const ComposerEditor = react.forwardRef(
       setPreviousSelectedMentionSuggestionIndex,
       setNextSelectedMentionSuggestionIndex,
       setSelectedMentionSuggestionIndex
-    ] = useIndex.useIndex(0, mentionSuggestions?.length ?? 0);
-    const id = react.useId();
+    ] = useIndex(0, mentionSuggestions?.length ?? 0);
+    const id = useId();
     const floatingToolbarId = `liveblocks-floating-toolbar-${id}`;
     const suggestionsListId = `liveblocks-suggestions-list-${id}`;
-    const suggestionsListItemId = react.useCallback(
+    const suggestionsListItemId = useCallback(
       (userId) => userId ? `liveblocks-suggestions-list-item-${id}-${userId}` : void 0,
       [id]
     );
-    const renderElement = react.useCallback(
+    const renderElement = useCallback(
       (props2) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorElement, {
+        return /* @__PURE__ */ jsx(ComposerEditorElement, {
           Mention,
           Link,
           ...props2
@@ -617,91 +596,91 @@ const ComposerEditor = react.forwardRef(
       },
       [Link, Mention]
     );
-    const handleChange = react.useCallback(
+    const handleChange = useCallback(
       (value) => {
         validate(value);
         onEditorChange.notify();
       },
       [validate, onEditorChange]
     );
-    const createMention = react.useCallback(
+    const createMention = useCallback(
       (userId) => {
         if (!mentionDraft || !userId) {
           return;
         }
-        slate.Transforms.select(editor, mentionDraft.range);
-        mentions.insertMention(editor, userId);
+        Transforms.select(editor, mentionDraft.range);
+        insertMention(editor, userId);
         setMentionDraft(void 0);
         setSelectedMentionSuggestionIndex(0);
       },
       [editor, mentionDraft, setSelectedMentionSuggestionIndex]
     );
-    const handleKeyDown = react.useCallback(
+    const handleKeyDown = useCallback(
       (event) => {
         onKeyDown?.(event);
         if (event.isDefaultPrevented()) {
           return;
         }
-        if (isKey.isKey(event, "ArrowLeft")) {
-          marks.leaveMarkEdge(editor, "start");
+        if (isKey(event, "ArrowLeft")) {
+          leaveMarkEdge(editor, "start");
         }
-        if (isKey.isKey(event, "ArrowRight")) {
-          marks.leaveMarkEdge(editor, "end");
+        if (isKey(event, "ArrowRight")) {
+          leaveMarkEdge(editor, "end");
         }
         if (mentionDraft && mentionSuggestions?.length) {
-          if (isKey.isKey(event, "ArrowDown")) {
+          if (isKey(event, "ArrowDown")) {
             event.preventDefault();
             setNextSelectedMentionSuggestionIndex();
           }
-          if (isKey.isKey(event, "ArrowUp")) {
+          if (isKey(event, "ArrowUp")) {
             event.preventDefault();
             setPreviousSelectedMentionSuggestionIndex();
           }
-          if (isKey.isKey(event, "Enter") || isKey.isKey(event, "Tab")) {
+          if (isKey(event, "Enter") || isKey(event, "Tab")) {
             event.preventDefault();
             const userId = mentionSuggestions?.[selectedMentionSuggestionIndex];
             createMention(userId);
           }
-          if (isKey.isKey(event, "Escape")) {
+          if (isKey(event, "Escape")) {
             event.preventDefault();
             setMentionDraft(void 0);
             setSelectedMentionSuggestionIndex(0);
           }
         } else {
           if (hasFloatingToolbarRange) {
-            if (isKey.isKey(event, "Escape")) {
+            if (isKey(event, "Escape")) {
               event.preventDefault();
               setHasFloatingToolbarRange(false);
             }
           }
-          if (isKey.isKey(event, "Escape")) {
+          if (isKey(event, "Escape")) {
             blur();
           }
-          if (isKey.isKey(event, "Enter", { shift: false })) {
+          if (isKey(event, "Enter", { shift: false })) {
             event.preventDefault();
             if (canSubmit) {
               submit();
             }
           }
-          if (isKey.isKey(event, "Enter", { shift: true })) {
+          if (isKey(event, "Enter", { shift: true })) {
             event.preventDefault();
             editor.insertBreak();
           }
-          if (isKey.isKey(event, "b", { mod: true })) {
+          if (isKey(event, "b", { mod: true })) {
             event.preventDefault();
-            marks.toggleMark(editor, "bold");
+            toggleMark(editor, "bold");
           }
-          if (isKey.isKey(event, "i", { mod: true })) {
+          if (isKey(event, "i", { mod: true })) {
             event.preventDefault();
-            marks.toggleMark(editor, "italic");
+            toggleMark(editor, "italic");
           }
-          if (isKey.isKey(event, "s", { mod: true, shift: true })) {
+          if (isKey(event, "s", { mod: true, shift: true })) {
             event.preventDefault();
-            marks.toggleMark(editor, "strikethrough");
+            toggleMark(editor, "strikethrough");
           }
-          if (isKey.isKey(event, "e", { mod: true })) {
+          if (isKey(event, "e", { mod: true })) {
             event.preventDefault();
-            marks.toggleMark(editor, "code");
+            toggleMark(editor, "code");
           }
         }
       },
@@ -721,7 +700,7 @@ const ComposerEditor = react.forwardRef(
         submit
       ]
     );
-    const handleFocus = react.useCallback(
+    const handleFocus = useCallback(
       (event) => {
         onFocus?.(event);
         if (!event.isDefaultPrevented()) {
@@ -730,7 +709,7 @@ const ComposerEditor = react.forwardRef(
       },
       [onFocus, setFocused]
     );
-    const handleBlur = react.useCallback(
+    const handleBlur = useCallback(
       (event) => {
         onBlur?.(event);
         if (!event.isDefaultPrevented()) {
@@ -739,11 +718,11 @@ const ComposerEditor = react.forwardRef(
       },
       [onBlur, setFocused]
     );
-    const selectedMentionSuggestionUserId = react.useMemo(
+    const selectedMentionSuggestionUserId = useMemo(
       () => mentionSuggestions?.[selectedMentionSuggestionIndex],
       [selectedMentionSuggestionIndex, mentionSuggestions]
     );
-    const setSelectedMentionSuggestionUserId = react.useCallback(
+    const setSelectedMentionSuggestionUserId = useCallback(
       (userId) => {
         const index = mentionSuggestions?.indexOf(userId);
         if (index !== void 0 && index >= 0) {
@@ -752,7 +731,7 @@ const ComposerEditor = react.forwardRef(
       },
       [setSelectedMentionSuggestionIndex, mentionSuggestions]
     );
-    const additionalProps = react.useMemo(
+    const additionalProps = useMemo(
       () => mentionDraft ? {
         role: "combobox",
         "aria-autocomplete": "list",
@@ -774,25 +753,25 @@ const ComposerEditor = react.forwardRef(
         floatingToolbarId
       ]
     );
-    react.useImperativeHandle(forwardedRef, () => {
-      return slateReact.ReactEditor.toDOMNode(editor, editor);
+    useImperativeHandle(forwardedRef, () => {
+      return ReactEditor.toDOMNode(editor, editor);
     }, [editor]);
-    _private.useLayoutEffect(() => {
+    useLayoutEffect(() => {
       if (autoFocus) {
         focus();
       }
     }, [autoFocus, editor, focus]);
-    _private.useLayoutEffect(() => {
+    useLayoutEffect(() => {
       if (isFocused && editor.selection === null) {
         select();
       }
     }, [editor, select, isFocused]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(slateReact.Slate, {
+    return /* @__PURE__ */ jsxs(Slate, {
       editor,
       initialValue: initialEditorValue,
       onChange: handleChange,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, {
+        /* @__PURE__ */ jsx(Editable, {
           dir,
           enterKeyHint: mentionDraft ? "enter" : "send",
           autoCapitalize: "sentences",
@@ -810,7 +789,7 @@ const ComposerEditor = react.forwardRef(
           renderLeaf: ComposerEditorLeaf,
           renderPlaceholder: ComposerEditorPlaceholder
         }),
-        hasResolveMentionSuggestions && /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorMentionSuggestionsWrapper, {
+        hasResolveMentionSuggestions && /* @__PURE__ */ jsx(ComposerEditorMentionSuggestionsWrapper, {
           dir,
           mentionDraft,
           setMentionDraft,
@@ -822,7 +801,7 @@ const ComposerEditor = react.forwardRef(
           onItemSelect: createMention,
           MentionSuggestions
         }),
-        FloatingToolbar && /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorFloatingToolbarWrapper, {
+        FloatingToolbar && /* @__PURE__ */ jsx(ComposerEditorFloatingToolbarWrapper, {
           dir,
           id: floatingToolbarId,
           hasFloatingToolbarRange,
@@ -839,14 +818,14 @@ function prepareAttachment(file) {
   return {
     type: "localAttachment",
     status: "idle",
-    id: core.createCommentAttachmentId(),
+    id: createCommentAttachmentId(),
     name: file.name,
     size: file.size,
     mimeType: file.type,
     file
   };
 }
-const ComposerForm = react.forwardRef(
+const ComposerForm = forwardRef(
   ({
     children,
     onSubmit,
@@ -859,11 +838,11 @@ const ComposerForm = react.forwardRef(
     roomId: _roomId,
     ...props
   }, forwardedRef) => {
-    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 room = _private.useRoomOrNull();
+    const Component = asChild ? Slot : "form";
+    const [isEmpty$1, setEmpty] = useState(true);
+    const [isSubmitting, setSubmitting] = useState(false);
+    const [isFocused, setFocused] = useState(false);
+    const room = useRoomOrNull();
     const roomId = _roomId !== void 0 ? _roomId : room?.id;
     if (roomId === void 0) {
       throw new Error("Composer.Form must be a descendant of RoomProvider.");
@@ -876,30 +855,30 @@ const ComposerForm = react.forwardRef(
       addAttachments,
       removeAttachment,
       clearAttachments
-    } = utils$1.useComposerAttachmentsManager(defaultAttachments, {
+    } = useComposerAttachmentsManager(defaultAttachments, {
       maxFileSize: maxAttachmentSize,
       roomId
     });
     const numberOfAttachments = attachments.length;
     const hasMaxAttachments = numberOfAttachments >= maxAttachments;
-    const isDisabled = react.useMemo(() => {
+    const isDisabled = useMemo(() => {
       return isSubmitting || disabled === true;
     }, [isSubmitting, disabled]);
-    const canSubmit = react.useMemo(() => {
+    const canSubmit = useMemo(() => {
       return !isEmpty$1 && !isUploadingAttachments;
     }, [isEmpty$1, isUploadingAttachments]);
-    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 syncSource = _private.useSyncSource();
+    const [marks, setMarks] = useState(getMarks);
+    const ref = useRef(null);
+    const mergedRefs = useRefs(forwardedRef, ref);
+    const fileInputRef = useRef(null);
+    const syncSource = useSyncSource();
     const isPending = !preventUnsavedChanges ? false : !isEmpty$1 || isUploadingAttachments || attachments.length > 0;
-    react.useEffect(() => {
+    useEffect(() => {
       syncSource?.setSyncStatus(
         isPending ? "has-local-changes" : "synchronized"
       );
     }, [syncSource, isPending]);
-    const createAttachments = react.useCallback(
+    const createAttachments = useCallback(
       (files) => {
         if (!files.length) {
           return;
@@ -914,86 +893,86 @@ const ComposerForm = react.forwardRef(
       },
       [addAttachments, maxAttachments, numberOfAttachments]
     );
-    const createAttachmentsRef = react.useRef(createAttachments);
-    react.useEffect(() => {
+    const createAttachmentsRef = useRef(createAttachments);
+    useEffect(() => {
       createAttachmentsRef.current = createAttachments;
     }, [createAttachments]);
-    const stableCreateAttachments = react.useCallback((files) => {
+    const stableCreateAttachments = useCallback((files) => {
       createAttachmentsRef.current(files);
     }, []);
-    const editor = useInitial.useInitial(
+    const editor = useInitial(
       () => createComposerEditor({
         createAttachments: stableCreateAttachments,
         pasteFilesAsAttachments
       })
     );
-    const onEditorChange = useInitial.useInitial(core.makeEventSource);
-    const validate = react.useCallback(
+    const onEditorChange = useInitial(makeEventSource);
+    const validate = useCallback(
       (value) => {
-        setEmpty(isEmpty.isEmpty(editor, value));
+        setEmpty(isEmpty(editor, value));
       },
       [editor]
     );
-    const submit = react.useCallback(() => {
+    const submit = useCallback(() => {
       if (!canSubmit) {
         return;
       }
       requestAnimationFrame(() => {
         if (ref.current) {
-          requestSubmit.requestSubmit(ref.current);
+          requestSubmit(ref.current);
         }
       });
     }, [canSubmit]);
-    const clear = react.useCallback(() => {
-      slate.Transforms.delete(editor, {
+    const clear = useCallback(() => {
+      Transforms.delete(editor, {
         at: {
-          anchor: slate.Editor.start(editor, []),
-          focus: slate.Editor.end(editor, [])
+          anchor: Editor.start(editor, []),
+          focus: Editor.end(editor, [])
         }
       });
     }, [editor]);
-    const select = react.useCallback(() => {
-      slate.Transforms.select(editor, slate.Editor.end(editor, []));
+    const select = useCallback(() => {
+      Transforms.select(editor, Editor.end(editor, []));
     }, [editor]);
-    const focus = react.useCallback(
+    const focus = useCallback(
       (resetSelection = true) => {
         try {
-          if (!slateReact.ReactEditor.isFocused(editor)) {
-            slate.Transforms.select(
+          if (!ReactEditor.isFocused(editor)) {
+            Transforms.select(
               editor,
-              resetSelection || !editor.selection ? slate.Editor.end(editor, []) : editor.selection
+              resetSelection || !editor.selection ? Editor.end(editor, []) : editor.selection
             );
-            slateReact.ReactEditor.focus(editor);
+            ReactEditor.focus(editor);
           }
         } catch {
         }
       },
       [editor]
     );
-    const blur = react.useCallback(() => {
+    const blur = useCallback(() => {
       try {
-        slateReact.ReactEditor.blur(editor);
+        ReactEditor.blur(editor);
       } catch {
       }
     }, [editor]);
-    const createMention = react.useCallback(() => {
+    const createMention = useCallback(() => {
       if (disabled) {
         return;
       }
       focus();
-      mentions.insertMentionCharacter(editor);
+      insertMentionCharacter(editor);
     }, [disabled, editor, focus]);
-    const insertText = react.useCallback(
+    const insertText$1 = useCallback(
       (text) => {
         if (disabled) {
           return;
         }
         focus(false);
-        slate.insertText(editor, text);
+        insertText(editor, text);
       },
       [disabled, editor, focus]
     );
-    const attachFiles = react.useCallback(() => {
+    const attachFiles = useCallback(() => {
       if (disabled) {
         return;
       }
@@ -1001,7 +980,7 @@ const ComposerForm = react.forwardRef(
         fileInputRef.current.click();
       }
     }, [disabled]);
-    const handleAttachmentsInputChange = react.useCallback(
+    const handleAttachmentsInputChange = useCallback(
       (event) => {
         if (disabled) {
           return;
@@ -1013,18 +992,18 @@ const ComposerForm = react.forwardRef(
       },
       [createAttachments, disabled]
     );
-    const onSubmitEnd = react.useCallback(() => {
+    const onSubmitEnd = useCallback(() => {
       clear();
       blur();
       clearAttachments();
       setSubmitting(false);
     }, [blur, clear, clearAttachments]);
-    const handleSubmit = react.useCallback(
+    const handleSubmit = useCallback(
       (event) => {
         if (disabled) {
           return;
         }
-        const isEmpty2 = isEmpty.isEmpty(editor, editor.children);
+        const isEmpty2 = isEmpty(editor, editor.children);
         if (isEmpty2) {
           event.preventDefault();
           return;
@@ -1034,7 +1013,7 @@ const ComposerForm = react.forwardRef(
           event.preventDefault();
           return;
         }
-        const body = utils$1.composerBodyToCommentBody(
+        const body = composerBodyToCommentBody(
           editor.children
         );
         const commentAttachments = attachments.filter(
@@ -1062,19 +1041,19 @@ const ComposerForm = react.forwardRef(
       },
       [disabled, editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]
     );
-    const stopPropagation = react.useCallback((event) => {
+    const stopPropagation = useCallback((event) => {
       event.stopPropagation();
     }, []);
-    const toggleMark = react.useCallback(
+    const toggleMark$1 = useCallback(
       (mark) => {
-        marks.toggleMark(editor, mark);
+        toggleMark(editor, mark);
       },
       [editor]
     );
-    useObservable.useObservable(onEditorChange, () => {
-      setMarks(marks.getMarks(editor));
+    useObservable(onEditorChange, () => {
+      setMarks(getMarks(editor));
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerEditorContext.Provider, {
+    return /* @__PURE__ */ jsx(ComposerEditorContext.Provider, {
       value: {
         editor,
         validate,
@@ -1082,7 +1061,7 @@ const ComposerForm = react.forwardRef(
         onEditorChange,
         roomId
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerAttachmentsContext.Provider, {
+      children: /* @__PURE__ */ jsx(ComposerAttachmentsContext.Provider, {
         value: {
           createAttachments,
           isUploadingAttachments,
@@ -1090,7 +1069,7 @@ const ComposerForm = react.forwardRef(
           maxAttachments,
           maxAttachmentSize
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerContext.Provider, {
+        children: /* @__PURE__ */ jsx(ComposerContext.Provider, {
           value: {
             isDisabled,
             isFocused,
@@ -1102,19 +1081,19 @@ const ComposerForm = react.forwardRef(
             focus,
             blur,
             createMention,
-            insertText,
+            insertText: insertText$1,
             attachments,
             attachFiles,
             removeAttachment,
-            toggleMark,
-            marks: marks$1
+            toggleMark: toggleMark$1,
+            marks
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Component, {
+          children: /* @__PURE__ */ jsxs(Component, {
             ...props,
             onSubmit: handleSubmit,
             ref: mergedRefs,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("input", {
+              /* @__PURE__ */ jsx("input", {
                 type: "file",
                 multiple: true,
                 ref: fileInputRef,
@@ -1123,7 +1102,7 @@ const ComposerForm = react.forwardRef(
                 tabIndex: -1,
                 style: { display: "none" }
               }),
-              /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, {
+              /* @__PURE__ */ jsx(Slottable, {
                 children
               })
             ]
@@ -1133,12 +1112,12 @@ const ComposerForm = react.forwardRef(
     });
   }
 );
-const ComposerSubmit = react.forwardRef(
+const ComposerSubmit = forwardRef(
   ({ children, disabled, asChild, ...props }, forwardedRef) => {
-    const Component = asChild ? reactSlot.Slot : "button";
-    const { canSubmit, isDisabled: isComposerDisabled } = contexts.useComposer();
+    const Component = asChild ? Slot : "button";
+    const { canSubmit, isDisabled: isComposerDisabled } = useComposer();
     const isDisabled = isComposerDisabled || disabled || !canSubmit;
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       type: "submit",
       ...props,
       ref: forwardedRef,
@@ -1147,12 +1126,12 @@ const ComposerSubmit = react.forwardRef(
     });
   }
 );
-const ComposerAttachFiles = react.forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
-  const Component = asChild ? reactSlot.Slot : "button";
-  const { hasMaxAttachments } = contexts.useComposerAttachmentsContext();
-  const { isDisabled: isComposerDisabled, attachFiles } = contexts.useComposer();
+const ComposerAttachFiles = forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
+  const Component = asChild ? Slot : "button";
+  const { hasMaxAttachments } = useComposerAttachmentsContext();
+  const { isDisabled: isComposerDisabled, attachFiles } = useComposer();
   const isDisabled = isComposerDisabled || hasMaxAttachments || disabled;
-  const handleClick = react.useCallback(
+  const handleClick = useCallback(
     (event) => {
       onClick?.(event);
       if (!event.isDefaultPrevented()) {
@@ -1161,7 +1140,7 @@ const ComposerAttachFiles = react.forwardRef(({ children, onClick, disabled, asC
     },
     [attachFiles, onClick]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+  return /* @__PURE__ */ jsx(Component, {
     type: "button",
     ...props,
     onClick: handleClick,
@@ -1170,7 +1149,7 @@ const ComposerAttachFiles = react.forwardRef(({ children, onClick, disabled, asC
     children
   });
 });
-const ComposerAttachmentsDropArea = react.forwardRef(
+const ComposerAttachmentsDropArea = forwardRef(
   ({
     onDragEnter,
     onDragLeave,
@@ -1180,17 +1159,17 @@ const ComposerAttachmentsDropArea = react.forwardRef(
     asChild,
     ...props
   }, forwardedRef) => {
-    const Component = asChild ? reactSlot.Slot : "div";
-    const { isDisabled: isComposerDisabled } = contexts.useComposer();
+    const Component = asChild ? Slot : "div";
+    const { isDisabled: isComposerDisabled } = useComposer();
     const isDisabled = isComposerDisabled || disabled;
-    const [, dropAreaProps] = utils$1.useComposerAttachmentsDropArea({
+    const [, dropAreaProps] = useComposerAttachmentsDropArea({
       onDragEnter,
       onDragLeave,
       onDragOver,
       onDrop,
       disabled: isDisabled
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       ...dropAreaProps,
       "data-disabled": isDisabled ? "" : void 0,
       ...props,
@@ -1198,11 +1177,11 @@ const ComposerAttachmentsDropArea = react.forwardRef(
     });
   }
 );
-const ComposerMarkToggle = react.forwardRef(
+const ComposerMarkToggle = forwardRef(
   ({ children, mark, onValueChange, onClick, asChild, ...props }, forwardedRef) => {
-    const Component = asChild ? reactSlot.Slot : "button";
-    const { marks, toggleMark } = contexts.useComposer();
-    const handleClick = react.useCallback(
+    const Component = asChild ? Slot : "button";
+    const { marks, toggleMark } = useComposer();
+    const handleClick = useCallback(
       (event) => {
         onClick?.(event);
         if (!event.isDefaultPrevented()) {
@@ -1212,12 +1191,12 @@ const ComposerMarkToggle = react.forwardRef(
       },
       [mark, onClick, onValueChange, toggleMark]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, {
+    return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
       asChild: true,
       pressed: marks[mark],
       onClick: handleClick,
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Component, {
+      children: /* @__PURE__ */ jsx(Component, {
         ...props,
         ref: forwardedRef,
         children
@@ -1240,16 +1219,5 @@ if (process.env.NODE_ENV !== "production") {
   ComposerMarkToggle.displayName = COMPOSER_MARK_TOGGLE_NAME;
 }
 
-exports.AttachFiles = ComposerAttachFiles;
-exports.AttachmentsDropArea = ComposerAttachmentsDropArea;
-exports.Editor = ComposerEditor;
-exports.FloatingToolbar = ComposerFloatingToolbar;
-exports.Form = ComposerForm;
-exports.Link = ComposerLink;
-exports.MarkToggle = ComposerMarkToggle;
-exports.Mention = ComposerMention;
-exports.Submit = ComposerSubmit;
-exports.Suggestions = ComposerSuggestions;
-exports.SuggestionsList = ComposerSuggestionsList;
-exports.SuggestionsListItem = ComposerSuggestionsListItem;
+export { ComposerAttachFiles as AttachFiles, ComposerAttachmentsDropArea as AttachmentsDropArea, ComposerEditor as Editor, ComposerFloatingToolbar as FloatingToolbar, ComposerForm as Form, ComposerLink as Link, ComposerMarkToggle as MarkToggle, ComposerMention as Mention, ComposerSubmit as Submit, ComposerSuggestions as Suggestions, ComposerSuggestionsList as SuggestionsList, ComposerSuggestionsListItem as SuggestionsListItem };
 //# sourceMappingURL=index.js.map