@liveblocks/react-ui 3.9.1 → 3.9.2-tiptap2

package/dist/components/internal/Attachment.js

@@ -22,62 +22,61 @@ function splitFileName(name) {
 }
 function getAttachmentIconGlyph(mimeType) {
   if (mimeType === "application/zip" || mimeType === "application/gzip" || mimeType === "application/vnd.rar" || mimeType === "application/x-rar-compressed" || mimeType === "application/x-7z-compressed" || mimeType === "application/x-zip-compressed" || mimeType === "application/x-tar" || mimeType === "application/x-bzip" || mimeType === "application/x-bzip2") {
-    return /* @__PURE__ */ jsx("path", {
-      d: "M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z"
-    });
+    return /* @__PURE__ */ jsx("path", { d: "M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z" });
   }
   if (mimeType.startsWith("text/") || mimeType.startsWith("font/") || mimeType.startsWith("application/")) {
-    return /* @__PURE__ */ jsx("path", {
-      d: "M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z"
-    });
+    return /* @__PURE__ */ jsx("path", { d: "M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z" });
   }
   if (mimeType.startsWith("image/")) {
-    return /* @__PURE__ */ jsx("path", {
-      d: "M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-    });
+    return /* @__PURE__ */ jsx("path", { d: "M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" });
   }
   if (mimeType.startsWith("video/")) {
-    return /* @__PURE__ */ jsx("path", {
-      d: "M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z"
-    });
+    return /* @__PURE__ */ jsx("path", { d: "M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z" });
   }
   if (mimeType.startsWith("audio/")) {
-    return /* @__PURE__ */ jsx("path", {
-      d: "M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z"
-    });
+    return /* @__PURE__ */ jsx("path", { d: "M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z" });
   }
   return null;
 }
 const AttachmentFileIcon = memo(({ mimeType }) => {
   const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);
-  return /* @__PURE__ */ jsxs("svg", {
-    className: "lb-attachment-icon",
-    width: 30,
-    height: 30,
-    viewBox: "0 0 30 30",
-    fill: "currentColor",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ jsx("path", {
-        d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
-        className: "lb-attachment-icon-shadow"
-      }),
-      /* @__PURE__ */ jsx("path", {
-        d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
-        className: "lb-attachment-icon-background"
-      }),
-      /* @__PURE__ */ jsx("path", {
-        d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
-        className: "lb-attachment-icon-fold"
-      }),
-      iconGlyph && /* @__PURE__ */ jsx("g", {
-        className: "lb-attachment-icon-glyph",
-        children: iconGlyph
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "lb-attachment-icon",
+      width: 30,
+      height: 30,
+      viewBox: "0 0 30 30",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
+            className: "lb-attachment-icon-shadow"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
+            className: "lb-attachment-icon-background"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
+            className: "lb-attachment-icon-fold"
+          }
+        ),
+        iconGlyph && /* @__PURE__ */ jsx("g", { className: "lb-attachment-icon-glyph", children: iconGlyph })
+      ]
+    }
+  );
 });
 function AttachmentImagePreview({
   attachment,
@@ -89,21 +88,25 @@ function AttachmentImagePreview({
   const handleLoad = useCallback(() => {
     setLoaded(true);
   }, []);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      !isLoaded ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null,
-      url ? /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isLoaded ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null,
+    url ? /* @__PURE__ */ jsx(
+      "div",
+      {
         className: "lb-attachment-preview-media",
         "data-hidden": !isLoaded ? "" : void 0,
-        children: /* @__PURE__ */ jsx("img", {
-          src: url,
-          loading: "lazy",
-          onLoad: handleLoad,
-          onError: markPreviewAsUnsupported
-        })
-      }) : null
-    ]
-  });
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: url,
+            loading: "lazy",
+            onLoad: handleLoad,
+            onError: markPreviewAsUnsupported
+          }
+        )
+      }
+    ) : null
+  ] });
 }
 function AttachmentVideoPreview({
   attachment,
@@ -115,20 +118,24 @@ function AttachmentVideoPreview({
   const handleLoad = useCallback(() => {
     setLoaded(true);
   }, []);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      !isLoaded ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null,
-      url ? /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isLoaded ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null,
+    url ? /* @__PURE__ */ jsx(
+      "div",
+      {
         className: "lb-attachment-preview-media",
         "data-hidden": !isLoaded ? "" : void 0,
-        children: /* @__PURE__ */ jsx("video", {
-          src: url,
-          onLoadedData: handleLoad,
-          onError: markPreviewAsUnsupported
-        })
-      }) : null
-    ]
-  });
+        children: /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: url,
+            onLoadedData: handleLoad,
+            onError: markPreviewAsUnsupported
+          }
+        )
+      }
+    ) : null
+  ] });
 }
 function AttachmentPreview({
   attachment,
@@ -142,23 +149,27 @@ function AttachmentPreview({
   }
   if (!isUnsupportedPreview && allowMediaPreview && isUploaded && attachment.size <= MAX_DISPLAYED_MEDIA_SIZE) {
     if (attachment.mimeType.startsWith("image/")) {
-      return /* @__PURE__ */ jsx(AttachmentImagePreview, {
-        attachment,
-        markPreviewAsUnsupported,
-        roomId
-      });
+      return /* @__PURE__ */ jsx(
+        AttachmentImagePreview,
+        {
+          attachment,
+          markPreviewAsUnsupported,
+          roomId
+        }
+      );
     }
     if (attachment.mimeType.startsWith("video/")) {
-      return /* @__PURE__ */ jsx(AttachmentVideoPreview, {
-        attachment,
-        markPreviewAsUnsupported,
-        roomId
-      });
+      return /* @__PURE__ */ jsx(
+        AttachmentVideoPreview,
+        {
+          attachment,
+          markPreviewAsUnsupported,
+          roomId
+        }
+      );
     }
   }
-  return /* @__PURE__ */ jsx(AttachmentFileIcon, {
-    mimeType: attachment.mimeType
-  });
+  return /* @__PURE__ */ jsx(AttachmentFileIcon, { mimeType: attachment.mimeType });
 }
 function AttachmentName({
   attachment
@@ -166,20 +177,10 @@ function AttachmentName({
   const { base: fileBaseName, extension: fileExtension } = useMemo(() => {
     return splitFileName(attachment.name);
   }, [attachment.name]);
-  return /* @__PURE__ */ jsxs("span", {
-    className: "lb-attachment-name",
-    title: attachment.name,
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: "lb-attachment-name-base",
-        children: fileBaseName
-      }),
-      fileExtension && /* @__PURE__ */ jsx("span", {
-        className: "lb-attachment-name-extension",
-        children: fileExtension
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs("span", { className: "lb-attachment-name", title: attachment.name, children: [
+    /* @__PURE__ */ jsx("span", { className: "lb-attachment-name-base", children: fileBaseName }),
+    fileExtension && /* @__PURE__ */ jsx("span", { className: "lb-attachment-name-extension", children: fileExtension })
+  ] });
 }
 function useClickOnKeyDown(onKeyDown) {
   const handleKeyDown = useCallback(
@@ -256,49 +257,43 @@ function MediaAttachment({
     [preventFocusOnDelete]
   );
   const handleKeyDown = useClickOnKeyDown(onKeyDown);
-  return /* @__PURE__ */ jsxs("div", {
-    className: cn("lb-attachment lb-media-attachment", className),
-    "data-error": isError ? "" : void 0,
-    ...props,
-    role: onClick ? "button" : void 0,
-    onClick,
-    tabIndex: onClick ? 0 : -1,
-    onKeyDown: onClick ? handleKeyDown : void 0,
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        className: "lb-attachment-preview",
-        children: isUploading ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : isError ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(AttachmentPreview, {
-          attachment,
-          allowMediaPreview,
-          roomId
-        })
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "lb-attachment-details",
-        children: [
-          /* @__PURE__ */ jsx(AttachmentName, {
-            attachment
-          }),
-          /* @__PURE__ */ jsx("span", {
-            className: "lb-attachment-description",
-            title: description,
-            children: description
-          })
-        ]
-      }),
-      onDeleteClick && /* @__PURE__ */ jsx(Tooltip, {
-        content: deleteLabel,
-        children: /* @__PURE__ */ jsx("button", {
-          type: "button",
-          className: "lb-attachment-delete",
-          onClick: onDeleteClick,
-          onPointerDown: handleDeletePointerDown,
-          "aria-label": deleteLabel,
-          children: /* @__PURE__ */ jsx(CrossIcon, {})
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("lb-attachment lb-media-attachment", className),
+      "data-error": isError ? "" : void 0,
+      ...props,
+      role: onClick ? "button" : void 0,
+      onClick,
+      tabIndex: onClick ? 0 : -1,
+      onKeyDown: onClick ? handleKeyDown : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "lb-attachment-preview", children: isUploading ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : isError ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(
+          AttachmentPreview,
+          {
+            attachment,
+            allowMediaPreview,
+            roomId
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "lb-attachment-details", children: [
+          /* @__PURE__ */ jsx(AttachmentName, { attachment }),
+          /* @__PURE__ */ jsx("span", { className: "lb-attachment-description", title: description, children: description })
+        ] }),
+        onDeleteClick && /* @__PURE__ */ jsx(Tooltip, { content: deleteLabel, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "lb-attachment-delete",
+            onClick: onDeleteClick,
+            onPointerDown: handleDeletePointerDown,
+            "aria-label": deleteLabel,
+            children: /* @__PURE__ */ jsx(CrossIcon, {})
+          }
+        ) })
+      ]
+    }
+  );
 }
 function FileAttachment({
   attachment,
@@ -322,49 +317,43 @@ function FileAttachment({
     [preventFocusOnDelete]
   );
   const handleKeyDown = useClickOnKeyDown(onKeyDown);
-  return /* @__PURE__ */ jsxs("div", {
-    className: cn("lb-attachment lb-file-attachment", className),
-    "data-error": isError ? "" : void 0,
-    ...props,
-    role: onClick ? "button" : void 0,
-    onClick,
-    tabIndex: onClick ? 0 : -1,
-    onKeyDown: onClick ? handleKeyDown : void 0,
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        className: "lb-attachment-preview",
-        children: isUploading ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : isError ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(AttachmentPreview, {
-          attachment,
-          allowMediaPreview,
-          roomId
-        })
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: "lb-attachment-details",
-        children: [
-          /* @__PURE__ */ jsx(AttachmentName, {
-            attachment
-          }),
-          /* @__PURE__ */ jsx("span", {
-            className: "lb-attachment-description",
-            title: description,
-            children: description
-          })
-        ]
-      }),
-      onDeleteClick && /* @__PURE__ */ jsx(Tooltip, {
-        content: deleteLabel,
-        children: /* @__PURE__ */ jsx("button", {
-          type: "button",
-          className: "lb-attachment-delete",
-          onClick: onDeleteClick,
-          onPointerDown: handleDeletePointerDown,
-          "aria-label": deleteLabel,
-          children: /* @__PURE__ */ jsx(CrossIcon, {})
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("lb-attachment lb-file-attachment", className),
+      "data-error": isError ? "" : void 0,
+      ...props,
+      role: onClick ? "button" : void 0,
+      onClick,
+      tabIndex: onClick ? 0 : -1,
+      onKeyDown: onClick ? handleKeyDown : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "lb-attachment-preview", children: isUploading ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : isError ? /* @__PURE__ */ jsx(WarningIcon, {}) : /* @__PURE__ */ jsx(
+          AttachmentPreview,
+          {
+            attachment,
+            allowMediaPreview,
+            roomId
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "lb-attachment-details", children: [
+          /* @__PURE__ */ jsx(AttachmentName, { attachment }),
+          /* @__PURE__ */ jsx("span", { className: "lb-attachment-description", title: description, children: description })
+        ] }),
+        onDeleteClick && /* @__PURE__ */ jsx(Tooltip, { content: deleteLabel, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "lb-attachment-delete",
+            onClick: onDeleteClick,
+            onPointerDown: handleDeletePointerDown,
+            "aria-label": deleteLabel,
+            children: /* @__PURE__ */ jsx(CrossIcon, {})
+          }
+        ) })
+      ]
+    }
+  );
 }
 function separateMediaAttachments(attachments) {
   const mediaAttachments = [];

package/dist/components/internal/Attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.js","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useRoomAttachmentUrl } from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { cn } from \"../../utils/cn\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  roomId: string;\n  overrides?: Partial<Overrides>;\n  allowMediaPreview?: boolean;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img\n            src={url}\n            loading=\"lazy\"\n            onLoad={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video\n            src={url}\n            onLoadedData={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n  allowMediaPreview = true,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  allowMediaPreview?: boolean;\n  roomId: string;\n}) {\n  const [isUnsupportedPreview, setUnsupportedPreview] = useState(false);\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  function markPreviewAsUnsupported() {\n    setUnsupportedPreview(true);\n  }\n\n  if (\n    !isUnsupportedPreview &&\n    allowMediaPreview &&\n    isUploaded &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return (\n        <AttachmentImagePreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return (\n        <AttachmentVideoPreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      if (attachment.error.origin === \"server\") {\n        description = $.ATTACHMENT_TOO_LARGE();\n      } else {\n        description = $.ATTACHMENT_TOO_LARGE(\n          maxAttachmentSize\n            ? formatFileSize(maxAttachmentSize, $.locale)\n            : undefined\n        );\n      }\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={cn(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={cn(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;AAWA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AACG;AAAO;AAAoP;AAIhQ;AAKE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAEA;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEN;AAAC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AACC;AACG;AACQ;AACZ;AAEe;AAAY;AAA4B;AAAU;AAAA;AAGvE;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACG;AACA;AACC;AACX;AAEA;AAAA;AAGV;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AACE;AACG;AAA8B;AAE5B;AACW;AACoB;AAE7B;AACM;AACS;AACL;AACX;AAEA;AAAA;AAGV;AAEA;AAA2B;AACzB;AACoB;AAEtB;AAKE;AACA;AAGA;AACE;AAA0B;AAG5B;AAME;AACE;AACG;AACC;AACA;AACA;AACF;AAIJ;AACE;AACG;AACC;AACA;AACA;AACF;AAEJ;AAGF;AAAQ;AAAwC;AAClD;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AACG;AAAe;AAAuC;AACrD;AAAC;AAAe;AAA2B;AAAa;AAErD;AAAe;AAAgC;AAAc;AAAA;AAItE;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AACE;AAAqC;AAErC;AAAgB;AAGV;AACN;AACF;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AAC6D;AACjC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACG;AAC4D;AAChC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAAC;AAAc;AAMV;AACC;AACA;AACA;AACF;AAEJ;AACC;AAAc;AACb;AAAC;AAAe;AAAwB;AACvC;AAAe;AAAmC;AAChD;AACH;AAAA;AACF;AAEG;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAED;AACb;AACF;AAAA;AAIR;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;"}
+{"version":3,"file":"Attachment.js","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CommentMixedAttachment } from \"@liveblocks/core\";\nimport { useRoomAttachmentUrl } from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { Overrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { cn } from \"../../utils/cn\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\nconst MAX_DISPLAYED_MEDIA_SIZE = 60 * 1024 * 1024; // 60 MB\n\ninterface AttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  roomId: string;\n  overrides?: Partial<Overrides>;\n  allowMediaPreview?: boolean;\n}\n\nconst fileExtensionRegex = /^(.+?)(\\.[^.]+)?$/;\n\nfunction splitFileName(name: string) {\n  const match = name.match(fileExtensionRegex);\n\n  return { base: match?.[1] ?? name, extension: match?.[2] };\n}\n\nfunction getAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\n    mimeType === \"application/gzip\" ||\n    mimeType === \"application/vnd.rar\" ||\n    mimeType === \"application/x-rar-compressed\" ||\n    mimeType === \"application/x-7z-compressed\" ||\n    mimeType === \"application/x-zip-compressed\" ||\n    mimeType === \"application/x-tar\" ||\n    mimeType === \"application/x-bzip\" ||\n    mimeType === \"application/x-bzip2\"\n  ) {\n    return (\n      <path d=\"M13 15h2v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1H15v1h-1.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5V20h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 0-1H15v-1h1.5a.5.5 0 0 0 .5-.5V15a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Z\" />\n    );\n  }\n\n  if (\n    mimeType.startsWith(\"text/\") ||\n    mimeType.startsWith(\"font/\") ||\n    mimeType.startsWith(\"application/\")\n  ) {\n    return (\n      <path d=\"M10 16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"image/\")) {\n    return (\n      <path d=\"M12 16h6a1 1 0 0 1 1 1v3l-1.293-1.293a1 1 0 0 0-1.414 0L14.09 20.91l-.464-.386a1 1 0 0 0-1.265-.013l-1.231.985A.995.995 0 0 1 11 21v-4a1 1 0 0 1 1-1Zm-2 1a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3 2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"video/\")) {\n    return (\n      <path d=\"M12 15.71a1 1 0 0 1 1.49-.872l4.96 2.79a1 1 0 0 1 0 1.744l-4.96 2.79A1 1 0 0 1 12 21.29v-5.58Z\" />\n    );\n  }\n\n  if (mimeType.startsWith(\"audio/\")) {\n    return (\n      <path d=\"M15 15a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-.5-.5Zm-2.5 2.5a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3Zm-2 1a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm6-1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0v-3ZM19 16a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z\" />\n    );\n  }\n\n  return null;\n}\n\nconst AttachmentFileIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(() => getAttachmentIconGlyph(mimeType), [mimeType]);\n\n  return (\n    <svg\n      className=\"lb-attachment-icon\"\n      width={30}\n      height={30}\n      viewBox=\"0 0 30 30\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-shadow\"\n      />\n      <path\n        d=\"M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z\"\n        className=\"lb-attachment-icon-background\"\n      />\n      <path\n        d=\"M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z\"\n        className=\"lb-attachment-icon-fold\"\n      />\n\n      {iconGlyph && <g className=\"lb-attachment-icon-glyph\">{iconGlyph}</g>}\n    </svg>\n  );\n});\n\nfunction AttachmentImagePreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <img\n            src={url}\n            loading=\"lazy\"\n            onLoad={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentVideoPreview({\n  attachment,\n  markPreviewAsUnsupported,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  markPreviewAsUnsupported: () => void;\n  roomId: string;\n}) {\n  const { url } = useRoomAttachmentUrl(attachment.id, roomId);\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return (\n    <>\n      {!isLoaded ? <SpinnerIcon /> : null}\n      {url ? (\n        <div\n          className=\"lb-attachment-preview-media\"\n          data-hidden={!isLoaded ? \"\" : undefined}\n        >\n          <video\n            src={url}\n            onLoadedData={handleLoad}\n            onError={markPreviewAsUnsupported}\n          />\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nfunction AttachmentPreview({\n  attachment,\n  allowMediaPreview = true,\n  roomId,\n}: {\n  attachment: CommentMixedAttachment;\n  allowMediaPreview?: boolean;\n  roomId: string;\n}) {\n  const [isUnsupportedPreview, setUnsupportedPreview] = useState(false);\n  const isUploaded =\n    attachment.type === \"attachment\" || attachment.status === \"uploaded\";\n\n  function markPreviewAsUnsupported() {\n    setUnsupportedPreview(true);\n  }\n\n  if (\n    !isUnsupportedPreview &&\n    allowMediaPreview &&\n    isUploaded &&\n    attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n  ) {\n    if (attachment.mimeType.startsWith(\"image/\")) {\n      return (\n        <AttachmentImagePreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n\n    if (attachment.mimeType.startsWith(\"video/\")) {\n      return (\n        <AttachmentVideoPreview\n          attachment={attachment}\n          markPreviewAsUnsupported={markPreviewAsUnsupported}\n          roomId={roomId}\n        />\n      );\n    }\n  }\n\n  return <AttachmentFileIcon mimeType={attachment.mimeType} />;\n}\n\nfunction AttachmentName({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\n\n  return (\n    <span className=\"lb-attachment-name\" title={attachment.name}>\n      <span className=\"lb-attachment-name-base\">{fileBaseName}</span>\n      {fileExtension && (\n        <span className=\"lb-attachment-name-extension\">{fileExtension}</span>\n      )}\n    </span>\n  );\n}\n\nfunction useClickOnKeyDown(\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n) {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      if (event.isDefaultPrevented()) {\n        return;\n      }\n\n      // Simulate a click event on Enter or Space because it's a div\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n\n        const clickEvent = new MouseEvent(\"click\", {\n          bubbles: true,\n          cancelable: true,\n          view: window,\n        });\n        event.target.dispatchEvent(clickEvent);\n      }\n    },\n    [onKeyDown]\n  );\n\n  return handleKeyDown;\n}\n\nfunction useAttachmentContent(\n  attachment: CommentMixedAttachment,\n  overrides?: Partial<Overrides>\n) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n\n  const status =\n    attachment.type === \"localAttachment\" ? attachment.status : undefined;\n  const isUploading = status === \"uploading\";\n  const isError = status === \"error\";\n\n  let description: string;\n\n  if (attachment.type === \"localAttachment\" && attachment.status === \"error\") {\n    if (attachment.error instanceof AttachmentTooLargeError) {\n      if (attachment.error.origin === \"server\") {\n        description = $.ATTACHMENT_TOO_LARGE();\n      } else {\n        description = $.ATTACHMENT_TOO_LARGE(\n          maxAttachmentSize\n            ? formatFileSize(maxAttachmentSize, $.locale)\n            : undefined\n        );\n      }\n    } else {\n      description = $.ATTACHMENT_ERROR(attachment.error);\n    }\n  } else {\n    description = formatFileSize(attachment.size, $.locale);\n  }\n\n  const deleteLabel = isInComposer\n    ? $.COMPOSER_REMOVE_ATTACHMENT\n    : $.COMMENT_DELETE_ATTACHMENT;\n\n  return {\n    isUploading,\n    isError,\n    description,\n    deleteLabel,\n  };\n}\n\nexport function MediaAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={cn(\"lb-attachment lb-media-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  allowMediaPreview = true,\n  roomId,\n  className,\n  onKeyDown,\n  ...props\n}: AttachmentProps) {\n  const { isUploading, isError, description, deleteLabel } =\n    useAttachmentContent(attachment, overrides);\n\n  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useClickOnKeyDown(onKeyDown);\n\n  return (\n    <div\n      className={cn(\"lb-attachment lb-file-attachment\", className)}\n      data-error={isError ? \"\" : undefined}\n      {...props}\n      role={onClick ? \"button\" : undefined}\n      onClick={onClick}\n      tabIndex={onClick ? 0 : -1}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n    >\n      <div className=\"lb-attachment-preview\">\n        {isUploading ? (\n          <SpinnerIcon />\n        ) : isError ? (\n          <WarningIcon />\n        ) : (\n          <AttachmentPreview\n            attachment={attachment}\n            allowMediaPreview={allowMediaPreview}\n            roomId={roomId}\n          />\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\n        <AttachmentName attachment={attachment} />\n        <span className=\"lb-attachment-description\" title={description}>\n          {description}\n        </span>\n      </div>\n      {onDeleteClick && (\n        <Tooltip content={deleteLabel}>\n          <button\n            type=\"button\"\n            className=\"lb-attachment-delete\"\n            onClick={onDeleteClick}\n            onPointerDown={handleDeletePointerDown}\n            aria-label={deleteLabel}\n          >\n            <CrossIcon />\n          </button>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nexport function separateMediaAttachments<T extends CommentMixedAttachment>(\n  attachments: T[]\n) {\n  const mediaAttachments: T[] = [];\n  const fileAttachments: T[] = [];\n\n  for (const attachment of attachments) {\n    if (\n      (attachment.mimeType.startsWith(\"image/\") ||\n        attachment.mimeType.startsWith(\"video/\")) &&\n      attachment.size <= MAX_DISPLAYED_MEDIA_SIZE\n    ) {\n      mediaAttachments.push(attachment);\n    } else {\n      fileAttachments.push(attachment);\n    }\n  }\n\n  return {\n    mediaAttachments,\n    fileAttachments,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;AAWA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAWE;AAC8P;AAIhQ;AAKE;AAC2P;AAI7P;AACE;AAC2Q;AAI7Q;AACE;AAC2G;AAI7G;AACE;AACmQ;AAIrQ;AACF;AAEA;AACE;AAEA;AACE;AAAC;AAAA;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEN;AAAA;AAAC;AAAA;AACG;AACQ;AAAA;AACZ;AACA;AAAC;AAAA;AACG;AACQ;AAAA;AACZ;AACA;AAAC;AAAA;AACG;AACQ;AAAA;AACZ;AAEiE;AAAA;AAAA;AAGvE;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AAEK;AAA8B;AAE7B;AAAC;AAAA;AACW;AACoB;AAE9B;AAAC;AAAA;AACM;AACG;AACA;AACC;AAAA;AACX;AAAA;AAEA;AAGV;AAEA;AAAgC;AAC9B;AACA;AAEF;AAKE;AACA;AAEA;AACE;AAAc;AAGhB;AAEK;AAA8B;AAE7B;AAAC;AAAA;AACW;AACoB;AAE9B;AAAC;AAAA;AACM;AACS;AACL;AAAA;AACX;AAAA;AAEA;AAGV;AAEA;AAA2B;AACzB;AACoB;AAEtB;AAKE;AACA;AAGA;AACE;AAA0B;AAG5B;AAME;AACE;AACE;AAAC;AAAA;AACC;AACA;AACA;AAAA;AACF;AAIJ;AACE;AACE;AAAC;AAAA;AACC;AACA;AACA;AAAA;AACF;AAEJ;AAGF;AACF;AAEA;AAAwB;AAExB;AAGE;AACE;AAAoC;AAGtC;AAEI;AAAwD;AAEQ;AAItE;AAEA;AAGE;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AACF;AACU;AAGZ;AACF;AAEA;AAIE;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AAEA;AACE;AACE;AACE;AAAqC;AAErC;AAAgB;AAGV;AACN;AACF;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAO;AACL;AACA;AACA;AACA;AAEJ;AAEO;AAAyB;AAC9B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACE;AAAC;AAAA;AAC6D;AACjC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAMI;AAAC;AAAA;AACC;AACA;AACA;AAAA;AAGN;AAEE;AAAwC;AAGxC;AACF;AAGI;AAAC;AAAA;AACM;AACK;AACD;AACM;AACH;AAED;AAAA;AAEf;AAAA;AAAA;AAIR;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACoB;AACpB;AACA;AACA;AAEF;AACE;AAGA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEA;AACE;AAAC;AAAA;AAC4D;AAChC;AACvB;AACuB;AAC3B;AACwB;AACa;AAErC;AAMI;AAAC;AAAA;AACC;AACA;AACA;AAAA;AAGN;AAEE;AAAwC;AAGxC;AACF;AAGI;AAAC;AAAA;AACM;AACK;AACD;AACM;AACH;AAED;AAAA;AAEf;AAAA;AAAA;AAIR;AAEO;AAGL;AACA;AAEA;AACE;AAKE;AAAgC;AAEhC;AAA+B;AACjC;AAGF;AAAO;AACL;AACA;AAEJ;;"}

package/dist/components/internal/Attribution.cjs

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

package/dist/components/internal/Attribution.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Attribution.cjs","sources":["../../../src/components/internal/Attribution.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\nexport function Attribution({ className, ...props }: ComponentProps<\"a\">) {\n  return (\n    <a\n      href=\"https://liveblocks.io\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={cn(\"lb-composer-attribution\", className)}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 384 72\"\n        aria-label=\"Made with Liveblocks\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M86 10h-8v50h8V10Zm16 14h-8v36h8V24Zm0-15h-8v9h8V9Zm13 15h-9l12 36h10l13-36h-9l-9 28-8-28Zm44-1c-11 0-18 8-18 19s7 19 18 19c8 0 15-4 17-13h-8c-1 4-5 6-9 6-6 0-9-3-9-10h27c0-10-6-21-18-21Zm0 7c5 0 9 3 9 8h-18c0-5 4-8 9-8Zm42-7c-4 0-8 2-11 6V10h-8v50h8v-5c3 4 7 6 11 6 11 0 16-9 16-19s-5-19-16-19Zm-2 32c-7 0-9-7-9-13s2-13 9-13 9 7 9 13-2 13-9 13Zm32-45h-8v50h8V10Zm24 51c11 0 18-8 18-19s-8-19-18-19c-11 0-19 8-19 19s7 19 19 19Zm0-6c-8 0-10-7-10-13s2-13 10-13c7 0 9 7 9 13s-2 13-9 13Zm39 6c8 0 15-4 17-12l-8-1c-2 4-4 6-9 6-7 0-9-6-9-12s2-12 9-12c5 0 8 3 8 7l9-1c-2-8-9-13-17-13-11 0-18 9-18 19 0 11 7 19 18 19Zm30-14 4-4 10 17h10l-15-23 15-13h-11l-13 13V10h-9v50h9V47Zm39 14c8 0 16-3 16-12 0-8-8-10-15-11-2-1-7-1-7-5 0-3 3-4 6-4 4 0 7 3 7 7l8-1c-1-9-8-12-15-12s-15 3-15 11 9 10 15 11c3 1 8 2 8 5 0 4-4 5-7 5-5 0-8-3-9-7l-8 1c1 8 9 12 16 12ZM41 27H0l12 12v17l29-29ZM20 60h40L48 48V32L20 60Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </a>\n  );\n}\n"],"names":["jsx","cn"],"mappings":";;;;;AAIO,SAAS,WAAY,CAAA,EAAE,SAAc,EAAA,GAAA,KAAA,EAA8B,EAAA;AACxE,EAAA,uBACGA,cAAA,CAAA,GAAA,EAAA;AAAA,IACC,IAAK,EAAA,uBAAA;AAAA,IACL,MAAO,EAAA,QAAA;AAAA,IACP,GAAI,EAAA,qBAAA;AAAA,IACJ,SAAA,EAAWC,KAAG,CAAA,yBAAA,EAA2B,SAAS,CAAA;AAAA,IACjD,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,KAAM,EAAA,4BAAA;AAAA,MACN,OAAQ,EAAA,YAAA;AAAA,MACR,YAAW,EAAA,sBAAA;AAAA,MAEX,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,QACC,QAAS,EAAA,SAAA;AAAA,QACT,QAAS,EAAA,SAAA;AAAA,QACT,CAAE,EAAA,y3BAAA;AAAA,QACF,IAAK,EAAA,cAAA;AAAA,OACP,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Attribution.cjs","sources":["../../../src/components/internal/Attribution.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\nexport function Attribution({ className, ...props }: ComponentProps<\"a\">) {\n  return (\n    <a\n      href=\"https://liveblocks.io\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={cn(\"lb-composer-attribution\", className)}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 384 72\"\n        aria-label=\"Made with Liveblocks\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M86 10h-8v50h8V10Zm16 14h-8v36h8V24Zm0-15h-8v9h8V9Zm13 15h-9l12 36h10l13-36h-9l-9 28-8-28Zm44-1c-11 0-18 8-18 19s7 19 18 19c8 0 15-4 17-13h-8c-1 4-5 6-9 6-6 0-9-3-9-10h27c0-10-6-21-18-21Zm0 7c5 0 9 3 9 8h-18c0-5 4-8 9-8Zm42-7c-4 0-8 2-11 6V10h-8v50h8v-5c3 4 7 6 11 6 11 0 16-9 16-19s-5-19-16-19Zm-2 32c-7 0-9-7-9-13s2-13 9-13 9 7 9 13-2 13-9 13Zm32-45h-8v50h8V10Zm24 51c11 0 18-8 18-19s-8-19-18-19c-11 0-19 8-19 19s7 19 19 19Zm0-6c-8 0-10-7-10-13s2-13 10-13c7 0 9 7 9 13s-2 13-9 13Zm39 6c8 0 15-4 17-12l-8-1c-2 4-4 6-9 6-7 0-9-6-9-12s2-12 9-12c5 0 8 3 8 7l9-1c-2-8-9-13-17-13-11 0-18 9-18 19 0 11 7 19 18 19Zm30-14 4-4 10 17h10l-15-23 15-13h-11l-13 13V10h-9v50h9V47Zm39 14c8 0 16-3 16-12 0-8-8-10-15-11-2-1-7-1-7-5 0-3 3-4 6-4 4 0 7 3 7 7l8-1c-1-9-8-12-15-12s-15 3-15 11 9 10 15 11c3 1 8 2 8 5 0 4-4 5-7 5-5 0-8-3-9-7l-8 1c1 8 9 12 16 12ZM41 27H0l12 12v17l29-29ZM20 60h40L48 48V32L20 60Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </a>\n  );\n}\n"],"names":["jsx","cn"],"mappings":";;;;;AAIO,SAAS,WAAY,CAAA,EAAE,SAAW,EAAA,GAAG,OAA8B,EAAA;AACxE,EACE,uBAAAA,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,uBAAA;AAAA,MACL,MAAO,EAAA,QAAA;AAAA,MACP,GAAI,EAAA,qBAAA;AAAA,MACJ,SAAA,EAAWC,KAAG,CAAA,yBAAA,EAA2B,SAAS,CAAA;AAAA,MACjD,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,KAAM,EAAA,4BAAA;AAAA,UACN,OAAQ,EAAA,YAAA;AAAA,UACR,YAAW,EAAA,sBAAA;AAAA,UAEX,QAAA,kBAAAA,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAS,EAAA,SAAA;AAAA,cACT,QAAS,EAAA,SAAA;AAAA,cACT,CAAE,EAAA,y3BAAA;AAAA,cACF,IAAK,EAAA,cAAA;AAAA,aAAA;AAAA,WACP;AAAA,SAAA;AAAA,OACF;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/components/internal/Attribution.js

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