@liveblocks/react-ui 3.9.1-tiptap1 → 3.9.2-tiptap1

package/dist/primitives/Composer/index.cjs

@@ -100,16 +100,10 @@ function ComposerEditorMentionWrapper({
 }) {
   const isSelected = slateReact.useSelected();
   const { children: _, ...mention } = element;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
-    ...attributes,
-    children: [
-      element.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, {
-        mention,
-        isSelected
-      }) : null,
-      children
-    ]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...attributes, children: [
+    element.id ? /* @__PURE__ */ jsxRuntime.jsx(Mention, { mention, isSelected }) : null,
+    children
+  ] });
 }
 function ComposerEditorLinkWrapper({
   Link,
@@ -118,13 +112,7 @@ function ComposerEditorLinkWrapper({
   children
 }) {
   const href = react.useMemo(() => core.sanitizeUrl(element.url) ?? "", [element.url]);
-  return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    ...attributes,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Link, {
-      href,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href, children }) });
 }
 function ComposerEditorMentionSuggestionsWrapper({
   id,
@@ -189,8 +177,9 @@ function ComposerEditorMentionSuggestionsWrapper({
       cancelAnimationFrame(animationFrame);
     };
   }, [mentions$1?.length, isOpen, elements.floating, update]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, {
-    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerSuggestionsContext.Provider, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, { children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+    contexts.ComposerSuggestionsContext.Provider,
+    {
       value: {
         id,
         itemId,
@@ -201,24 +190,30 @@ function ComposerEditorMentionSuggestionsWrapper({
         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, {
-          mentions: mentions$1,
-          selectedMentionId
-        })
-      })
-    }) : null
-  });
+      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,
+            {
+              mentions: mentions$1,
+              selectedMentionId
+            }
+          )
+        }
+      )
+    }
+  ) : null });
 }
 function ComposerEditorFloatingToolbarWrapper({
   id,
@@ -276,29 +271,33 @@ function ComposerEditorFloatingToolbarWrapper({
       }
     });
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Persist.Persist, {
-    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerFloatingToolbarContext.Provider, {
+  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
-  });
+      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 [isPresent] = Persist.usePersist();
@@ -324,26 +323,29 @@ const ComposerFloatingToolbar = react.forwardRef(({ children, onPointerDown, sty
     },
     [onPointerDown]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-    dir,
-    role: "toolbar",
-    id,
-    "aria-label": "Floating toolbar",
-    ...props,
-    onPointerDown: handlePointerDown,
-    "data-state": isPresent ? "open" : "closed",
-    "data-side": side,
-    "data-align": align,
-    style: {
-      display: "flex",
-      flexDirection: "row",
-      maxWidth: "var(--lb-composer-floating-available-width)",
-      overflowX: "auto",
-      ...style
-    },
-    ref: mergedRefs,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      dir,
+      role: "toolbar",
+      id,
+      "aria-label": "Floating toolbar",
+      ...props,
+      onPointerDown: handlePointerDown,
+      "data-state": isPresent ? "open" : "closed",
+      "data-side": side,
+      "data-align": align,
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        maxWidth: "var(--lb-composer-floating-available-width)",
+        overflowX: "auto",
+        ...style
+      },
+      ref: mergedRefs,
+      children
+    }
+  );
 });
 function ComposerEditorElement({
   Mention,
@@ -353,22 +355,24 @@ function ComposerEditorElement({
   const { attributes, children, element } = props;
   switch (element.type) {
     case "mention":
-      return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorMentionWrapper, {
-        Mention,
-        ...props
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ComposerEditorMentionWrapper,
+        {
+          Mention,
+          ...props
+        }
+      );
     case "auto-link":
     case "custom-link":
-      return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorLinkWrapper, {
-        Link,
-        ...props
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ComposerEditorLinkWrapper,
+        {
+          Link,
+          ...props
+        }
+      );
     case "paragraph":
-      return /* @__PURE__ */ jsxRuntime.jsx("p", {
-        ...attributes,
-        style: { position: "relative" },
-        children
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { ...attributes, style: { position: "relative" }, children });
     default:
       return null;
   }
@@ -379,64 +383,54 @@ function ComposerEditorLeaf({
   leaf
 }) {
   if (leaf.bold) {
-    children = /* @__PURE__ */ jsxRuntime.jsx("strong", {
-      children
-    });
+    children = /* @__PURE__ */ jsxRuntime.jsx("strong", { children });
   }
   if (leaf.italic) {
-    children = /* @__PURE__ */ jsxRuntime.jsx("em", {
-      children
-    });
+    children = /* @__PURE__ */ jsxRuntime.jsx("em", { children });
   }
   if (leaf.strikethrough) {
-    children = /* @__PURE__ */ jsxRuntime.jsx("s", {
-      children
-    });
+    children = /* @__PURE__ */ jsxRuntime.jsx("s", { children });
   }
   if (leaf.code) {
-    children = /* @__PURE__ */ jsxRuntime.jsx("code", {
-      children
-    });
+    children = /* @__PURE__ */ jsxRuntime.jsx("code", { children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    ...attributes,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, children });
 }
 function ComposerEditorPlaceholder({
   attributes,
   children
 }) {
   const { opacity: _opacity, ...style } = attributes.style;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    ...attributes,
-    style,
-    "data-placeholder": "",
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, style, "data-placeholder": "", children });
 }
 const ComposerMention = react.forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "span";
     const isSelected = slateReact.useSelected();
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      "data-selected": isSelected || void 0,
-      ...props,
-      ref: forwardedRef,
-      children
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        "data-selected": isSelected || void 0,
+        ...props,
+        ref: forwardedRef,
+        children
+      }
+    );
   }
 );
 const ComposerLink = react.forwardRef(
   ({ children, asChild, ...props }, forwardedRef) => {
     const Component = asChild ? reactSlot.Slot : "a";
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      target: "_blank",
-      rel: "noopener noreferrer nofollow",
-      ...props,
-      ref: forwardedRef,
-      children
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        target: "_blank",
+        rel: "noopener noreferrer nofollow",
+        ...props,
+        ref: forwardedRef,
+        children
+      }
+    );
   }
 );
 const ComposerSuggestions = react.forwardRef(({ children, style, asChild, ...props }, forwardedRef) => {
@@ -454,34 +448,40 @@ const ComposerSuggestions = react.forwardRef(({ children, style, asChild, ...pro
   );
   const Component = asChild ? reactSlot.Slot : "div";
   Persist.useAnimationPersist(ref);
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-    dir,
-    ...props,
-    "data-state": isPresent ? "open" : "closed",
-    "data-side": side,
-    "data-align": align,
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      maxHeight: "var(--lb-composer-floating-available-height)",
-      overflowY: "auto",
-      ...style
-    },
-    ref: mergedRefs,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      dir,
+      ...props,
+      "data-state": isPresent ? "open" : "closed",
+      "data-side": side,
+      "data-align": align,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        maxHeight: "var(--lb-composer-floating-available-height)",
+        overflowY: "auto",
+        ...style
+      },
+      ref: mergedRefs,
+      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, {
-    role: "listbox",
-    id,
-    "aria-label": "Suggestions list",
-    ...props,
-    ref: forwardedRef,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      role: "listbox",
+      id,
+      "aria-label": "Suggestions list",
+      ...props,
+      ref: forwardedRef,
+      children
+    }
+  );
 });
 const ComposerSuggestionsListItem = react.forwardRef(
   ({
@@ -536,44 +536,35 @@ const ComposerSuggestionsListItem = react.forwardRef(
       },
       [onClick, onItemSelect, value]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      role: "option",
-      id,
-      "data-selected": isSelected || void 0,
-      "aria-selected": isSelected || void 0,
-      onPointerMove: handlePointerMove,
-      onPointerDown: handlePointerDown,
-      onClick: handleClick,
-      ...props,
-      ref: mergedRefs,
-      children
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        role: "option",
+        id,
+        "data-selected": isSelected || void 0,
+        "aria-selected": isSelected || void 0,
+        onPointerMove: handlePointerMove,
+        onPointerDown: handlePointerDown,
+        onClick: handleClick,
+        ...props,
+        ref: mergedRefs,
+        children
+      }
+    );
   }
 );
 const defaultEditorComponents = {
   Link: ({ href, children }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(ComposerLink, {
-      href,
-      children
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(ComposerLink, { href, children });
   },
   Mention: ({ mention }) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(ComposerMention, {
-      children: [
-        core.MENTION_CHARACTER,
-        mention.id
-      ]
-    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(ComposerMention, { children: [
+      core.MENTION_CHARACTER,
+      mention.id
+    ] });
   },
   MentionSuggestions: ({ mentions }) => {
-    return mentions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestions, {
-      children: /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsList, {
-        children: mentions.map((mention) => /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsListItem, {
-          value: mention.id,
-          children: mention.id
-        }, mention.id))
-      })
-    }) : null;
+    return mentions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestions, { children: /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsList, { children: mentions.map((mention) => /* @__PURE__ */ jsxRuntime.jsx(ComposerSuggestionsListItem, { value: mention.id, children: mention.id }, mention.id)) }) }) : null;
   }
 };
 const ComposerEditor = react.forwardRef(
@@ -631,11 +622,7 @@ const ComposerEditor = react.forwardRef(
     );
     const renderElement = react.useCallback(
       (props2) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorElement, {
-          Mention,
-          Link,
-          ...props2
-        });
+        return /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorElement, { Mention, Link, ...props2 });
       },
       [Link, Mention]
     );
@@ -816,50 +803,62 @@ const ComposerEditor = react.forwardRef(
       },
       [createMention, mentionSuggestions]
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs(slateReact.Slate, {
-      editor,
-      initialValue: initialEditorValue,
-      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,
-          selectedMentionId,
-          setSelectedMentionId,
-          mentions: mentionSuggestions,
-          id: suggestionsListId,
-          itemId: suggestionsListItemId,
-          onItemSelect: handleMentionSelect,
-          MentionSuggestions
-        }),
-        FloatingToolbar && /* @__PURE__ */ jsxRuntime.jsx(ComposerEditorFloatingToolbarWrapper, {
-          dir,
-          id: floatingToolbarId,
-          hasFloatingToolbarRange,
-          setHasFloatingToolbarRange,
-          FloatingToolbar
-        })
-      ]
-    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      slateReact.Slate,
+      {
+        editor,
+        initialValue: initialEditorValue,
+        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,
+              selectedMentionId,
+              setSelectedMentionId,
+              mentions: mentionSuggestions,
+              id: suggestionsListId,
+              itemId: suggestionsListItemId,
+              onItemSelect: handleMentionSelect,
+              MentionSuggestions
+            }
+          ),
+          FloatingToolbar && /* @__PURE__ */ jsxRuntime.jsx(
+            ComposerEditorFloatingToolbarWrapper,
+            {
+              dir,
+              id: floatingToolbarId,
+              hasFloatingToolbarRange,
+              setHasFloatingToolbarRange,
+              FloatingToolbar
+            }
+          )
+        ]
+      }
+    );
   }
 );
 const MAX_ATTACHMENTS = 10;
@@ -1106,63 +1105,68 @@ const ComposerForm = react.forwardRef(
     useObservable.useObservable(onEditorChange, () => {
       setMarks(marks.getComposerBodyMarks(editor));
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerEditorContext.Provider, {
-      value: {
-        editor,
-        validate,
-        setFocused,
-        onEditorChange,
-        roomId
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(contexts.ComposerAttachmentsContext.Provider, {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      contexts.ComposerEditorContext.Provider,
+      {
         value: {
-          createAttachments,
-          isUploadingAttachments,
-          hasMaxAttachments,
-          maxAttachments,
-          maxAttachmentSize
+          editor,
+          validate,
+          setFocused,
+          onEditorChange,
+          roomId
         },
-        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
-              })
-            ]
-          })
-        })
-      })
-    });
+        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(
@@ -1170,13 +1174,16 @@ const ComposerSubmit = react.forwardRef(
     const Component = asChild ? reactSlot.Slot : "button";
     const { canSubmit, isDisabled: isComposerDisabled } = contexts.useComposer();
     const isDisabled = isComposerDisabled || disabled || !canSubmit;
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      type: "submit",
-      ...props,
-      ref: forwardedRef,
-      disabled: isDisabled,
-      children
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        type: "submit",
+        ...props,
+        ref: forwardedRef,
+        disabled: isDisabled,
+        children
+      }
+    );
   }
 );
 const ComposerAttachFiles = react.forwardRef(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {
@@ -1193,14 +1200,17 @@ const ComposerAttachFiles = react.forwardRef(({ children, onClick, disabled, asC
     },
     [attachFiles, onClick]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-    type: "button",
-    ...props,
-    onClick: handleClick,
-    ref: forwardedRef,
-    disabled: isDisabled,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      type: "button",
+      ...props,
+      onClick: handleClick,
+      ref: forwardedRef,
+      disabled: isDisabled,
+      children
+    }
+  );
 });
 const ComposerAttachmentsDropArea = react.forwardRef(
   ({
@@ -1222,12 +1232,15 @@ const ComposerAttachmentsDropArea = react.forwardRef(
       onDrop,
       disabled: isDisabled
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      ...dropAreaProps,
-      "data-disabled": isDisabled ? "" : void 0,
-      ...props,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ...dropAreaProps,
+        "data-disabled": isDisabled ? "" : void 0,
+        ...props,
+        ref: forwardedRef
+      }
+    );
   }
 );
 const ComposerMarkToggle = react.forwardRef(
@@ -1262,18 +1275,17 @@ const ComposerMarkToggle = react.forwardRef(
       },
       [mark, onClick, onValueChange, toggleMark]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, {
-      asChild: true,
-      pressed: marks[mark],
-      onClick: handleClick,
-      onPointerDown: handlePointerDown,
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TogglePrimitive__namespace.Root,
+      {
+        asChild: true,
+        pressed: marks[mark],
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
         ...props,
-        ref: forwardedRef,
-        children
-      })
-    });
+        children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, ref: forwardedRef, children })
+      }
+    );
   }
 );
 if (process.env.NODE_ENV !== "production") {