@liveblocks/react-ui 2.7.0-beta1 → 2.7.0-versions

package/dist/components/internal/Attachment.js

@@ -1,226 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('@liveblocks/react');
-var React = require('react');
-var Cross = require('../../icons/Cross.js');
-var Spinner = require('../../icons/Spinner.js');
-var Warning = require('../../icons/Warning.js');
-var overrides = require('../../overrides.js');
-require('../../primitives/Comment/index.js');
-require('../../primitives/Composer/index.js');
-var contexts = require('../../primitives/Composer/contexts.js');
-var utils = require('../../primitives/Composer/utils.js');
-require('../../primitives/EmojiPicker/index.js');
-require('../../primitives/FileSize.js');
-require('../../primitives/Timestamp.js');
-var classNames = require('../../utils/class-names.js');
-var formatFileSize = require('../../utils/format-file-size.js');
-var Tooltip = require('./Tooltip.js');
-
-const IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024;
-const fileExtensionRegex = /^(.+?)(\.[^.]+)?$/;
-function splitFileName(name) {
-  const match = name.match(fileExtensionRegex);
-  return { base: match?.[1] ?? name, extension: match?.[2] };
-}
-function getFileAttachmentIconGlyph(mimeType) {
-  if (mimeType === "application/zip" || mimeType === "application/x-rar-compressed" || mimeType === "application/x-7z-compressed" || mimeType === "application/x-zip-compressed" || mimeType === "application/x-tar" || mimeType === "application/gzip") {
-    return /* @__PURE__ */ React.createElement("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/")) {
-    return /* @__PURE__ */ React.createElement("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__ */ React.createElement("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__ */ React.createElement("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__ */ React.createElement("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 FileAttachmentIcon = React.memo(({ mimeType }) => {
-  const iconGlyph = React.useMemo(
-    () => getFileAttachmentIconGlyph(mimeType),
-    [mimeType]
-  );
-  return /* @__PURE__ */ React.createElement("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"
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
-    className: "lb-attachment-icon-shadow"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
-    className: "lb-attachment-icon-background"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
-    className: "lb-attachment-icon-fold"
-  }), iconGlyph && /* @__PURE__ */ React.createElement("g", {
-    className: "lb-attachment-icon-glyph"
-  }, iconGlyph));
-});
-function FileAttachmentImagePreview({ url }) {
-  const [isLoaded, setLoaded] = React.useState(false);
-  const handleLoad = React.useCallback(() => {
-    setLoaded(true);
-  }, []);
-  return url ? /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachment-preview-image",
-    "data-hidden": !isLoaded ? "" : void 0
-  }, /* @__PURE__ */ React.createElement("img", {
-    src: url,
-    loading: "lazy",
-    onLoad: handleLoad
-  })) : null;
-}
-function FileAttachmentLocalImagePreview({
-  attachment
-}) {
-  const [url, setUrl] = React.useState();
-  React.useEffect(() => {
-    const url2 = URL.createObjectURL(attachment.file);
-    setUrl(url2);
-    return () => {
-      URL.revokeObjectURL(url2);
-    };
-  }, [attachment.file]);
-  return /* @__PURE__ */ React.createElement(FileAttachmentImagePreview, {
-    url
-  });
-}
-function FileAttachmentRemoteImagePreview({
-  attachment
-}) {
-  const { url } = react.useAttachmentUrl(attachment.id);
-  return /* @__PURE__ */ React.createElement(FileAttachmentImagePreview, {
-    url
-  });
-}
-function FileAttachmentPreview({
-  attachment
-}) {
-  const isInsideRoom = react.useIsInsideRoom();
-  const isLocal = attachment.type === "localAttachment";
-  if (attachment.mimeType.startsWith("image/") && attachment.size < IMAGE_PREVIEW_MAX_SIZE) {
-    if (isLocal) {
-      return /* @__PURE__ */ React.createElement(FileAttachmentLocalImagePreview, {
-        attachment
-      });
-    } else if (isInsideRoom) {
-      return /* @__PURE__ */ React.createElement(FileAttachmentRemoteImagePreview, {
-        attachment
-      });
-    }
-  }
-  return null;
-}
-function FileAttachment({
-  attachment,
-  overrides: overrides$1,
-  onClick,
-  onDeleteClick,
-  preventFocusOnDelete,
-  className,
-  ...props
-}) {
-  const $ = overrides.useOverrides(overrides$1);
-  const composerAttachmentsContext = contexts.useComposerAttachmentsContextOrNull();
-  const isInComposer = Boolean(composerAttachmentsContext);
-  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;
-  const { base: fileBaseName, extension: fileExtension } = React.useMemo(() => {
-    return splitFileName(attachment.name);
-  }, [attachment.name]);
-  const status = attachment.type === "localAttachment" ? attachment.status : void 0;
-  const isUploading = status === "uploading";
-  const isError = status === "error";
-  let description;
-  if (attachment.type === "localAttachment" && attachment.status === "error") {
-    if (attachment.error instanceof utils.AttachmentTooLargeError) {
-      description = $.ATTACHMENT_TOO_LARGE(
-        maxAttachmentSize ? formatFileSize.formatFileSize(maxAttachmentSize, $.locale) : void 0
-      );
-    } else {
-      description = $.ATTACHMENT_ERROR(attachment.error);
-    }
-  } else {
-    description = formatFileSize.formatFileSize(attachment.size, $.locale);
-  }
-  const deleteLabel = isInComposer ? $.COMPOSER_REMOVE_ATTACHMENT : $.COMMENT_DELETE_ATTACHMENT;
-  const handleDeletePointerDown = React.useCallback(
-    (event) => {
-      if (preventFocusOnDelete) {
-        event.preventDefault();
-      }
-    },
-    [preventFocusOnDelete]
-  );
-  const handleKeyDown = React.useCallback((event) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      const clickEvent = new MouseEvent("click", {
-        bubbles: true,
-        cancelable: true,
-        view: window
-      });
-      event.target.dispatchEvent(clickEvent);
-    }
-  }, []);
-  return /* @__PURE__ */ React.createElement("div", {
-    className: classNames.classNames("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
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachment-preview"
-  }, isUploading ? /* @__PURE__ */ React.createElement(Spinner.SpinnerIcon, null) : isError ? /* @__PURE__ */ React.createElement(Warning.WarningIcon, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, !isError ? /* @__PURE__ */ React.createElement(FileAttachmentPreview, {
-    attachment
-  }) : null, /* @__PURE__ */ React.createElement(FileAttachmentIcon, {
-    mimeType: attachment.mimeType
-  }))), /* @__PURE__ */ React.createElement("div", {
-    className: "lb-attachment-details"
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "lb-attachment-name",
-    title: attachment.name
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "lb-attachment-name-base"
-  }, fileBaseName), fileExtension && /* @__PURE__ */ React.createElement("span", {
-    className: "lb-attachment-name-extension"
-  }, fileExtension)), /* @__PURE__ */ React.createElement("span", {
-    className: "lb-attachment-description",
-    title: description
-  }, description)), onDeleteClick && /* @__PURE__ */ React.createElement(Tooltip.Tooltip, {
-    content: deleteLabel
-  }, /* @__PURE__ */ React.createElement("button", {
-    type: "button",
-    className: "lb-attachment-delete",
-    onClick: onDeleteClick,
-    onPointerDown: handleDeletePointerDown,
-    "aria-label": deleteLabel
-  }, /* @__PURE__ */ React.createElement(Cross.CrossIcon, null))));
-}
-
-exports.FileAttachment = FileAttachment;
-//# sourceMappingURL=Attachment.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Attachment.js","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  CommentAttachment,\n  CommentLocalAttachment,\n  CommentMixedAttachment,\n} from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\ninterface FileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nconst IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024; // 50 MB\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 getFileAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\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/gzip\"\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 (mimeType.startsWith(\"text/\")) {\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 FileAttachmentIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(\n    () => getFileAttachmentIconGlyph(mimeType),\n    [mimeType]\n  );\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 FileAttachmentImagePreview({ url }: { url?: string }) {\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return url ? (\n    <div\n      className=\"lb-attachment-preview-image\"\n      data-hidden={!isLoaded ? \"\" : undefined}\n    >\n      <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n    </div>\n  ) : null;\n}\n\nfunction FileAttachmentLocalImagePreview({\n  attachment,\n}: {\n  attachment: CommentLocalAttachment;\n}) {\n  const [url, setUrl] = useState<string>();\n\n  useEffect(() => {\n    const url = URL.createObjectURL(attachment.file);\n\n    setUrl(url);\n\n    return () => {\n      URL.revokeObjectURL(url);\n    };\n  }, [attachment.file]);\n\n  return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentRemoteImagePreview({\n  attachment,\n}: {\n  attachment: CommentAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n\n  return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const isInsideRoom = useIsInsideRoom();\n  const isLocal = attachment.type === \"localAttachment\";\n\n  if (\n    attachment.mimeType.startsWith(\"image/\") &&\n    attachment.size < IMAGE_PREVIEW_MAX_SIZE\n  ) {\n    if (isLocal) {\n      return <FileAttachmentLocalImagePreview attachment={attachment} />;\n    } else if (isInsideRoom) {\n      return <FileAttachmentRemoteImagePreview attachment={attachment} />;\n    }\n  }\n\n  return null;\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  ...props\n}: FileAttachmentProps) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\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      description = $.ATTACHMENT_TOO_LARGE(\n        maxAttachmentSize\n          ? formatFileSize(maxAttachmentSize, $.locale)\n          : undefined\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  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\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\n  return (\n    <div\n      className={classNames(\"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          <>\n            {!isError ? (\n              <FileAttachmentPreview attachment={attachment} />\n            ) : null}\n            <FileAttachmentIcon mimeType={attachment.mimeType} />\n          </>\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\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\">\n              {fileExtension}\n            </span>\n          )}\n        </span>\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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA;AAEA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAQE;AACG;AAAO;AAAoP;AAIhQ;AACE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAAkB;AACyB;AAChC;AAGX;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AACE;AAEA;AACE;AAAc;AAGhB;AACG;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAG5C;AAEA;AAAyC;AAEzC;AAGE;AAEA;AACE;AAEA;AAEA;AACE;AAAuB;AACzB;AAGF;AAAQ;AAA2B;AACrC;AAEA;AAA0C;AAE1C;AAGE;AAEA;AAAQ;AAA2B;AACrC;AAEA;AAA+B;AAE/B;AAGE;AACA;AAEA;AAIE;AACE;AAAQ;AAAgC;AAAwB;AAEhE;AAAQ;AAAiC;AAAwB;AACnE;AAGF;AACF;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACE;AAAoC;AAEtC;AAEA;AACA;AAEA;AAEA;AACE;AACE;AAAgB;AAGV;AACN;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEE;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AAGF;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAQN;AAAsB;AAExB;AAAwC;AAI9C;AAAc;AACZ;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAKnB;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;;"}

package/dist/components/internal/Attachment.mjs

@@ -1,224 +0,0 @@
-'use client';
-import { useIsInsideRoom, useAttachmentUrl } from '@liveblocks/react';
-import React__default, { memo, useMemo, useCallback, useState, useEffect } from 'react';
-import { CrossIcon } from '../../icons/Cross.mjs';
-import { SpinnerIcon } from '../../icons/Spinner.mjs';
-import { WarningIcon } from '../../icons/Warning.mjs';
-import { useOverrides } from '../../overrides.mjs';
-import '../../primitives/Comment/index.mjs';
-import '../../primitives/Composer/index.mjs';
-import { useComposerAttachmentsContextOrNull } from '../../primitives/Composer/contexts.mjs';
-import { AttachmentTooLargeError } from '../../primitives/Composer/utils.mjs';
-import '../../primitives/EmojiPicker/index.mjs';
-import '../../primitives/FileSize.mjs';
-import '../../primitives/Timestamp.mjs';
-import { classNames } from '../../utils/class-names.mjs';
-import { formatFileSize } from '../../utils/format-file-size.mjs';
-import { Tooltip } from './Tooltip.mjs';
-
-const IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024;
-const fileExtensionRegex = /^(.+?)(\.[^.]+)?$/;
-function splitFileName(name) {
-  const match = name.match(fileExtensionRegex);
-  return { base: match?.[1] ?? name, extension: match?.[2] };
-}
-function getFileAttachmentIconGlyph(mimeType) {
-  if (mimeType === "application/zip" || mimeType === "application/x-rar-compressed" || mimeType === "application/x-7z-compressed" || mimeType === "application/x-zip-compressed" || mimeType === "application/x-tar" || mimeType === "application/gzip") {
-    return /* @__PURE__ */ React__default.createElement("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/")) {
-    return /* @__PURE__ */ React__default.createElement("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__ */ React__default.createElement("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__ */ React__default.createElement("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__ */ React__default.createElement("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 FileAttachmentIcon = memo(({ mimeType }) => {
-  const iconGlyph = useMemo(
-    () => getFileAttachmentIconGlyph(mimeType),
-    [mimeType]
-  );
-  return /* @__PURE__ */ React__default.createElement("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"
-  }, /* @__PURE__ */ React__default.createElement("path", {
-    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
-    className: "lb-attachment-icon-shadow"
-  }), /* @__PURE__ */ React__default.createElement("path", {
-    d: "M6 5a2 2 0 0 1 2-2h5.843a4 4 0 0 1 2.829 1.172l6.156 6.156A4 4 0 0 1 24 13.157V25a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5Z",
-    className: "lb-attachment-icon-background"
-  }), /* @__PURE__ */ React__default.createElement("path", {
-    d: "M14.382 3.037a4 4 0 0 1 2.29 1.135l6.156 6.157a4 4 0 0 1 1.136 2.289A2 2 0 0 0 22 11h-4a2 2 0 0 1-2-2V5a2 2 0 0 0-1.618-1.963Z",
-    className: "lb-attachment-icon-fold"
-  }), iconGlyph && /* @__PURE__ */ React__default.createElement("g", {
-    className: "lb-attachment-icon-glyph"
-  }, iconGlyph));
-});
-function FileAttachmentImagePreview({ url }) {
-  const [isLoaded, setLoaded] = useState(false);
-  const handleLoad = useCallback(() => {
-    setLoaded(true);
-  }, []);
-  return url ? /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-attachment-preview-image",
-    "data-hidden": !isLoaded ? "" : void 0
-  }, /* @__PURE__ */ React__default.createElement("img", {
-    src: url,
-    loading: "lazy",
-    onLoad: handleLoad
-  })) : null;
-}
-function FileAttachmentLocalImagePreview({
-  attachment
-}) {
-  const [url, setUrl] = useState();
-  useEffect(() => {
-    const url2 = URL.createObjectURL(attachment.file);
-    setUrl(url2);
-    return () => {
-      URL.revokeObjectURL(url2);
-    };
-  }, [attachment.file]);
-  return /* @__PURE__ */ React__default.createElement(FileAttachmentImagePreview, {
-    url
-  });
-}
-function FileAttachmentRemoteImagePreview({
-  attachment
-}) {
-  const { url } = useAttachmentUrl(attachment.id);
-  return /* @__PURE__ */ React__default.createElement(FileAttachmentImagePreview, {
-    url
-  });
-}
-function FileAttachmentPreview({
-  attachment
-}) {
-  const isInsideRoom = useIsInsideRoom();
-  const isLocal = attachment.type === "localAttachment";
-  if (attachment.mimeType.startsWith("image/") && attachment.size < IMAGE_PREVIEW_MAX_SIZE) {
-    if (isLocal) {
-      return /* @__PURE__ */ React__default.createElement(FileAttachmentLocalImagePreview, {
-        attachment
-      });
-    } else if (isInsideRoom) {
-      return /* @__PURE__ */ React__default.createElement(FileAttachmentRemoteImagePreview, {
-        attachment
-      });
-    }
-  }
-  return null;
-}
-function FileAttachment({
-  attachment,
-  overrides,
-  onClick,
-  onDeleteClick,
-  preventFocusOnDelete,
-  className,
-  ...props
-}) {
-  const $ = useOverrides(overrides);
-  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();
-  const isInComposer = Boolean(composerAttachmentsContext);
-  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;
-  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {
-    return splitFileName(attachment.name);
-  }, [attachment.name]);
-  const status = attachment.type === "localAttachment" ? attachment.status : void 0;
-  const isUploading = status === "uploading";
-  const isError = status === "error";
-  let description;
-  if (attachment.type === "localAttachment" && attachment.status === "error") {
-    if (attachment.error instanceof AttachmentTooLargeError) {
-      description = $.ATTACHMENT_TOO_LARGE(
-        maxAttachmentSize ? formatFileSize(maxAttachmentSize, $.locale) : void 0
-      );
-    } else {
-      description = $.ATTACHMENT_ERROR(attachment.error);
-    }
-  } else {
-    description = formatFileSize(attachment.size, $.locale);
-  }
-  const deleteLabel = isInComposer ? $.COMPOSER_REMOVE_ATTACHMENT : $.COMMENT_DELETE_ATTACHMENT;
-  const handleDeletePointerDown = useCallback(
-    (event) => {
-      if (preventFocusOnDelete) {
-        event.preventDefault();
-      }
-    },
-    [preventFocusOnDelete]
-  );
-  const handleKeyDown = useCallback((event) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      const clickEvent = new MouseEvent("click", {
-        bubbles: true,
-        cancelable: true,
-        view: window
-      });
-      event.target.dispatchEvent(clickEvent);
-    }
-  }, []);
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: classNames("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
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-attachment-preview"
-  }, isUploading ? /* @__PURE__ */ React__default.createElement(SpinnerIcon, null) : isError ? /* @__PURE__ */ React__default.createElement(WarningIcon, null) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !isError ? /* @__PURE__ */ React__default.createElement(FileAttachmentPreview, {
-    attachment
-  }) : null, /* @__PURE__ */ React__default.createElement(FileAttachmentIcon, {
-    mimeType: attachment.mimeType
-  }))), /* @__PURE__ */ React__default.createElement("div", {
-    className: "lb-attachment-details"
-  }, /* @__PURE__ */ React__default.createElement("span", {
-    className: "lb-attachment-name",
-    title: attachment.name
-  }, /* @__PURE__ */ React__default.createElement("span", {
-    className: "lb-attachment-name-base"
-  }, fileBaseName), fileExtension && /* @__PURE__ */ React__default.createElement("span", {
-    className: "lb-attachment-name-extension"
-  }, fileExtension)), /* @__PURE__ */ React__default.createElement("span", {
-    className: "lb-attachment-description",
-    title: description
-  }, description)), onDeleteClick && /* @__PURE__ */ React__default.createElement(Tooltip, {
-    content: deleteLabel
-  }, /* @__PURE__ */ React__default.createElement("button", {
-    type: "button",
-    className: "lb-attachment-delete",
-    onClick: onDeleteClick,
-    onPointerDown: handleDeletePointerDown,
-    "aria-label": deleteLabel
-  }, /* @__PURE__ */ React__default.createElement(CrossIcon, null))));
-}
-
-export { FileAttachment };
-//# sourceMappingURL=Attachment.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Attachment.mjs","sources":["../../../src/components/internal/Attachment.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  CommentAttachment,\n  CommentLocalAttachment,\n  CommentMixedAttachment,\n} from \"@liveblocks/core\";\nimport { useAttachmentUrl, useIsInsideRoom } from \"@liveblocks/react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEventHandler,\n  PointerEvent,\n} from \"react\";\nimport React, { memo, useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { CrossIcon } from \"../../icons/Cross\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { WarningIcon } from \"../../icons/Warning\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { AttachmentTooLargeError } from \"../../primitives\";\nimport { useComposerAttachmentsContextOrNull } from \"../../primitives/Composer/contexts\";\nimport { classNames } from \"../../utils/class-names\";\nimport { formatFileSize } from \"../../utils/format-file-size\";\nimport { Tooltip } from \"./Tooltip\";\n\ninterface FileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  onDeleteClick?: MouseEventHandler<HTMLButtonElement>;\n  preventFocusOnDelete?: boolean;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nconst IMAGE_PREVIEW_MAX_SIZE = 50 * 1024 * 1024; // 50 MB\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 getFileAttachmentIconGlyph(mimeType: string) {\n  if (\n    mimeType === \"application/zip\" ||\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/gzip\"\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 (mimeType.startsWith(\"text/\")) {\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 FileAttachmentIcon = memo(({ mimeType }: { mimeType: string }) => {\n  const iconGlyph = useMemo(\n    () => getFileAttachmentIconGlyph(mimeType),\n    [mimeType]\n  );\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 FileAttachmentImagePreview({ url }: { url?: string }) {\n  const [isLoaded, setLoaded] = useState(false);\n\n  const handleLoad = useCallback(() => {\n    setLoaded(true);\n  }, []);\n\n  return url ? (\n    <div\n      className=\"lb-attachment-preview-image\"\n      data-hidden={!isLoaded ? \"\" : undefined}\n    >\n      <img src={url} loading=\"lazy\" onLoad={handleLoad} />\n    </div>\n  ) : null;\n}\n\nfunction FileAttachmentLocalImagePreview({\n  attachment,\n}: {\n  attachment: CommentLocalAttachment;\n}) {\n  const [url, setUrl] = useState<string>();\n\n  useEffect(() => {\n    const url = URL.createObjectURL(attachment.file);\n\n    setUrl(url);\n\n    return () => {\n      URL.revokeObjectURL(url);\n    };\n  }, [attachment.file]);\n\n  return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentRemoteImagePreview({\n  attachment,\n}: {\n  attachment: CommentAttachment;\n}) {\n  const { url } = useAttachmentUrl(attachment.id);\n\n  return <FileAttachmentImagePreview url={url} />;\n}\n\nfunction FileAttachmentPreview({\n  attachment,\n}: {\n  attachment: CommentMixedAttachment;\n}) {\n  const isInsideRoom = useIsInsideRoom();\n  const isLocal = attachment.type === \"localAttachment\";\n\n  if (\n    attachment.mimeType.startsWith(\"image/\") &&\n    attachment.size < IMAGE_PREVIEW_MAX_SIZE\n  ) {\n    if (isLocal) {\n      return <FileAttachmentLocalImagePreview attachment={attachment} />;\n    } else if (isInsideRoom) {\n      return <FileAttachmentRemoteImagePreview attachment={attachment} />;\n    }\n  }\n\n  return null;\n}\n\nexport function FileAttachment({\n  attachment,\n  overrides,\n  onClick,\n  onDeleteClick,\n  preventFocusOnDelete,\n  className,\n  ...props\n}: FileAttachmentProps) {\n  const $ = useOverrides(overrides);\n  const composerAttachmentsContext = useComposerAttachmentsContextOrNull();\n  const isInComposer = Boolean(composerAttachmentsContext);\n  const maxAttachmentSize = composerAttachmentsContext?.maxAttachmentSize;\n  const { base: fileBaseName, extension: fileExtension } = useMemo(() => {\n    return splitFileName(attachment.name);\n  }, [attachment.name]);\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      description = $.ATTACHMENT_TOO_LARGE(\n        maxAttachmentSize\n          ? formatFileSize(maxAttachmentSize, $.locale)\n          : undefined\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  const handleDeletePointerDown = useCallback(\n    (event: PointerEvent<HTMLButtonElement>) => {\n      if (preventFocusOnDelete) {\n        event.preventDefault();\n      }\n    },\n    [preventFocusOnDelete]\n  );\n\n  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\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\n  return (\n    <div\n      className={classNames(\"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          <>\n            {!isError ? (\n              <FileAttachmentPreview attachment={attachment} />\n            ) : null}\n            <FileAttachmentIcon mimeType={attachment.mimeType} />\n          </>\n        )}\n      </div>\n      <div className=\"lb-attachment-details\">\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\">\n              {fileExtension}\n            </span>\n          )}\n        </span>\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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkCA;AAEA;AAEA;AACE;AAEA;AACF;AAEA;AACE;AAQE;AACG;AAAO;AAAoP;AAIhQ;AACE;AACG;AAAO;AAAiP;AAI7P;AACE;AACG;AAAO;AAAiQ;AAI7Q;AACE;AACG;AAAO;AAAiG;AAI7G;AACE;AACG;AAAO;AAAyP;AAIrQ;AACF;AAEA;AACE;AAAkB;AACyB;AAChC;AAGX;AACG;AACW;AACH;AACC;AACA;AACH;AACI;AACA;AACH;AAEL;AACG;AACQ;AAEX;AACG;AACQ;AAEX;AACG;AACQ;AAGG;AAAY;AAGjC;AAEA;AACE;AAEA;AACE;AAAc;AAGhB;AACG;AACW;AACoB;AAE7B;AAAS;AAAa;AAAe;AAG5C;AAEA;AAAyC;AAEzC;AAGE;AAEA;AACE;AAEA;AAEA;AACE;AAAuB;AACzB;AAGF;AAAQ;AAA2B;AACrC;AAEA;AAA0C;AAE1C;AAGE;AAEA;AAAQ;AAA2B;AACrC;AAEA;AAA+B;AAE/B;AAGE;AACA;AAEA;AAIE;AACE;AAAQ;AAAgC;AAAwB;AAEhE;AAAQ;AAAiC;AAAwB;AACnE;AAGF;AACF;AAEO;AAAwB;AAC7B;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACE;AAAoC;AAEtC;AAEA;AACA;AAEA;AAEA;AACE;AACE;AAAgB;AAGV;AACN;AAEA;AAAiD;AACnD;AAEA;AAAsD;AAGxD;AAIA;AAAgC;AAE5B;AACE;AAAqB;AACvB;AACF;AACqB;AAGvB;AAEE;AACE;AAEA;AAA2C;AAChC;AACG;AACN;AAER;AAAqC;AACvC;AAGF;AACG;AACoE;AACxC;AACvB;AACuB;AAC3B;AACwB;AACa;AAEpC;AAAc;AAQN;AAAsB;AAExB;AAAwC;AAI9C;AAAc;AACZ;AAAe;AAAuC;AACpD;AAAe;AAEb;AAAe;AAKnB;AAAe;AAAmC;AAKlD;AAAiB;AACf;AACM;AACK;AACD;AACM;AACH;AAQxB;;"}

package/dist/icons/Attachment.js

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

package/dist/icons/Attachment.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Attachment.js","sources":["../../src/icons/Attachment.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function AttachmentIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"m14.077 11.737-3.723 3.62c-1.55 1.507-4.128 1.507-5.678 0-1.543-1.5-1.543-4.02 0-5.52l5.731-5.573c1.034-1.006 2.754-1.007 3.789-.003 1.03 1 1.032 2.682.003 3.684l-5.744 5.572a1.377 1.377 0 0 1-1.893 0 1.283 1.283 0 0 1-.392-.92c0-.345.14-.676.392-.92L10.348 8\" />\n    </Icon>\n  );\n}\n"],"names":["Icon"],"mappings":";;;;;AAKO,SAAS,eAAe,KAA8B,EAAA;AAC3D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,SAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACP,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,qQAAA;AAAA,GAAsQ,CAChR,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/Attachment.mjs

@@ -1,13 +0,0 @@
-import React__default from 'react';
-import { Icon } from '../components/internal/Icon.mjs';
-
-function AttachmentIcon(props) {
-  return /* @__PURE__ */ React__default.createElement(Icon, {
-    ...props
-  }, /* @__PURE__ */ React__default.createElement("path", {
-    d: "m14.077 11.737-3.723 3.62c-1.55 1.507-4.128 1.507-5.678 0-1.543-1.5-1.543-4.02 0-5.52l5.731-5.573c1.034-1.006 2.754-1.007 3.789-.003 1.03 1 1.032 2.682.003 3.684l-5.744 5.572a1.377 1.377 0 0 1-1.893 0 1.283 1.283 0 0 1-.392-.92c0-.345.14-.676.392-.92L10.348 8"
-  }));
-}
-
-export { AttachmentIcon };
-//# sourceMappingURL=Attachment.mjs.map

package/dist/icons/Attachment.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Attachment.mjs","sources":["../../src/icons/Attachment.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function AttachmentIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"m14.077 11.737-3.723 3.62c-1.55 1.507-4.128 1.507-5.678 0-1.543-1.5-1.543-4.02 0-5.52l5.731-5.573c1.034-1.006 2.754-1.007 3.789-.003 1.03 1 1.032 2.682.003 3.684l-5.744 5.572a1.377 1.377 0 0 1-1.893 0 1.283 1.283 0 0 1-.392-.92c0-.345.14-.676.392-.92L10.348 8\" />\n    </Icon>\n  );\n}\n"],"names":["React"],"mappings":";;;AAKO,SAAS,eAAe,KAA8B,EAAA;AAC3D,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACPA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,qQAAA;AAAA,GAAsQ,CAChR,CAAA,CAAA;AAEJ;;;;"}

package/dist/primitives/FileSize.js

@@ -1,33 +0,0 @@
-'use client';
-'use strict';
-
-var reactSlot = require('@radix-ui/react-slot');
-var React = require('react');
-var formatFileSize = require('../utils/format-file-size.js');
-
-const FILE_SIZE_NAME = "FileSize";
-const FileSize = React.forwardRef(
-  ({
-    size,
-    locale,
-    children: renderChildren = formatFileSize.formatFileSize,
-    asChild,
-    ...props
-  }, forwardedRef) => {
-    const Component = asChild ? reactSlot.Slot : "span";
-    const children = React.useMemo(
-      () => typeof renderChildren === "function" ? renderChildren(size, locale) : renderChildren,
-      [renderChildren, size]
-    );
-    return /* @__PURE__ */ React.createElement(Component, {
-      ...props,
-      ref: forwardedRef
-    }, children);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  FileSize.displayName = FILE_SIZE_NAME;
-}
-
-exports.FileSize = FileSize;
-//# sourceMappingURL=FileSize.js.map

package/dist/primitives/FileSize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileSize.js","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport React, { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;;;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAEe;AAGvB;AACG;AAAc;AAAY;AAE3B;AAGN;AAEA;AACE;AACF;;"}

package/dist/primitives/FileSize.mjs

@@ -1,31 +0,0 @@
-'use client';
-import { Slot } from '@radix-ui/react-slot';
-import React__default, { forwardRef, useMemo } from 'react';
-import { formatFileSize } from '../utils/format-file-size.mjs';
-
-const FILE_SIZE_NAME = "FileSize";
-const FileSize = forwardRef(
-  ({
-    size,
-    locale,
-    children: renderChildren = formatFileSize,
-    asChild,
-    ...props
-  }, forwardedRef) => {
-    const Component = asChild ? Slot : "span";
-    const children = useMemo(
-      () => typeof renderChildren === "function" ? renderChildren(size, locale) : renderChildren,
-      [renderChildren, size]
-    );
-    return /* @__PURE__ */ React__default.createElement(Component, {
-      ...props,
-      ref: forwardedRef
-    }, children);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  FileSize.displayName = FILE_SIZE_NAME;
-}
-
-export { FileSize };
-//# sourceMappingURL=FileSize.mjs.map

package/dist/primitives/FileSize.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileSize.mjs","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport React, { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAEe;AAGvB;AACG;AAAc;AAAY;AAE3B;AAGN;AAEA;AACE;AACF;;"}

package/dist/utils/download.js

@@ -1,14 +0,0 @@
-'use strict';
-
-function download(url, name) {
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = name;
-  a.style.display = "none";
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-}
-
-exports.download = download;
-//# sourceMappingURL=download.js.map

package/dist/utils/download.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"download.js","sources":["../../src/utils/download.ts"],"sourcesContent":["export function download(url: string, name: string) {\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = name;\n  a.style.display = \"none\";\n\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n}\n"],"names":[],"mappings":";;AAAgB,SAAA,QAAA,CAAS,KAAa,IAAc,EAAA;AAClD,EAAM,MAAA,CAAA,GAAI,QAAS,CAAA,aAAA,CAAc,GAAG,CAAA,CAAA;AACpC,EAAA,CAAA,CAAE,IAAO,GAAA,GAAA,CAAA;AACT,EAAA,CAAA,CAAE,QAAW,GAAA,IAAA,CAAA;AACb,EAAA,CAAA,CAAE,MAAM,OAAU,GAAA,MAAA,CAAA;AAElB,EAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA,CAAA;AAC3B,EAAA,CAAA,CAAE,KAAM,EAAA,CAAA;AACR,EAAS,QAAA,CAAA,IAAA,CAAK,YAAY,CAAC,CAAA,CAAA;AAC7B;;;;"}