@manuscripts/body-editor 3.5.12 → 3.5.13

package/dist/types/views/image_element.d.ts

@@ -29,6 +29,8 @@ export declare class ImageElementView extends BlockView<Trackable<ImageElementNo
     private figurePosition;
     private isEditingExtLink;
     ignoreMutation: () => boolean;
+    upload: (file: File) => Promise<void>;
+    initialise(): void;
     createDOM(): void;
     createElement(): void;
     updateContents(): void;
@@ -38,6 +40,12 @@ export declare class ImageElementView extends BlockView<Trackable<ImageElementNo
     private getAllFigures;
     private showPositionMenu;
     private updateAllFiguresPosition;
+    private removeExtLink;
+    private setExtLink;
+    private setIsEditingExtLink;
+    private createDnDPlaceholder;
+    private createAddLinkButton;
+    private createLinkedFile;
     private addExternalLinkedFileEditor;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<ImageElementView>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.5.12",
+  "version": "3.5.13",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/styles/AdvancedEditor.css

@@ -254,6 +254,11 @@
   white-space: normal;
   font-size: 14px;
 }
+
+.ProseMirror .figure.placeholder p {
+  margin: 0;
+}
+
 .ProseMirror .block-embed .media-preview .placeholder {
   padding: 16px 32px;
 }
@@ -1553,6 +1558,56 @@ th:hover > .table-context-menu-button,
 
 .ProseMirror .ext-link-editor-container {
   position: static;
+  width: 100%;
+}
+.ProseMirror .ext-link-editor-placeholder-container {
+  font-size: 0;
+}
+.ProseMirror .ext-link-editor-placeholder-container {
+  position: relative;
+  font-size: initial;
+}
+
+.ProseMirror .ext-link-editor-placeholder-container .placeholder {
+  position: relative;
+  box-sizing: content-box;
+  max-width: 100%;
+  min-height: 0;
+  padding: 16px 0;
+}
+
+.ProseMirror .ext-link-editor-container .close-button {
+  border: 1px solid #f2f2f2;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
+  background-color: #ffffff;
+  
+  position: absolute;
+  top: -8px;
+  right: -8px;
+}
+.ProseMirror .ext-link-editor-container .linked-file-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  background-color: #f2f2f2;
+  color: #353535;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+}
+.ProseMirror .ext-link-editor-container .linked-file-info p {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+
+  font-family: Lato, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+}
+.ProseMirror .ext-link-editor-container .linked-file-info .icon-button {
+  margin-right: 8px;
 }
 
 .ProseMirror .accessibility_element_label {
@@ -1801,6 +1856,68 @@ th:hover > .table-context-menu-button,
   display: none;
 }
 
+.ProseMirror .icon-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  color: #353535;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 0;
+
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  outline: none;
+  transition: border 0.1s, color 0.1s, background-color 0.1s, color 0.1s,
+    filter 0.1s;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.ProseMirror .icon-button path,
+.ProseMirror .icon-button rect {
+  fill: #353535 !important;
+}
+.ProseMirror .icon-button:hover path,
+.ProseMirror .icon-button:hover rect {
+  fill: #1a9bc7 !important;
+}
+
+.ProseMirror .close-button {
+  cursor: pointer;
+  box-shadow: none;
+  text-indent: -99999px;
+  z-index: 2;
+
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+}
+
+.ProseMirror .close-button::before,
+.ProseMirror .close-button::after {
+  background-color: #6e6e6e;
+  border-radius: 2px;
+  content: ' ';
+  display: block;
+  height: 14px;
+  transform: rotate(-45deg);
+  width: 2px;
+  position: absolute;
+  top: calc(50% - 7px);
+  left: calc(50% - 1px);
+}
+.ProseMirror .close-button::after {
+  transform: rotate(45deg);
+}
+
 /* Attachment styles */
 .attachments-container .attachment-item {
   border: 1px solid #ddd;
@@ -1866,4 +1983,4 @@ th:hover > .table-context-menu-button,
 
 .ProseMirror a.link:empty::before {
   content: "\00a0";
-}
+}

package/dist/cjs/components/DragAndDropUploader.js

@@ -1,148 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DragAndDropUploader = void 0;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const DragAndDropUploader = ({ upload, onUploadError, allowedFileTypes, maxFileSizeMB, }) => {
-    const [isUploading, setIsUploading] = (0, react_1.useState)(false);
-    const fileInputRef = (0, react_1.useRef)(null);
-    const validateFile = (file) => {
-        if (!file) {
-            onUploadError('No file selected.');
-            return false;
-        }
-        if (allowedFileTypes && allowedFileTypes.length > 0) {
-            if (!allowedFileTypes.includes(file.type)) {
-                onUploadError(`Invalid file type. Allowed types: ${allowedFileTypes.join(', ')}`);
-                return false;
-            }
-        }
-        if (maxFileSizeMB && file.size > maxFileSizeMB * 1024 * 1024) {
-            onUploadError(`File size exceeds limit of ${maxFileSizeMB} MB.`);
-            return false;
-        }
-        return true;
-    };
-    const processFiles = async (files) => {
-        if (files && files.length > 0) {
-            const file = files[0];
-            if (validateFile(file)) {
-                try {
-                    setIsUploading(true);
-                    await upload(file);
-                }
-                catch (error) {
-                    onUploadError('Upload failed. Please try again.');
-                    console.error('Upload error:', error);
-                }
-                finally {
-                    setIsUploading(false);
-                }
-            }
-        }
-        else {
-            onUploadError('No file selected or dropped.');
-        }
-    };
-    const handleDragOver = (e) => {
-        if (e.dataTransfer && e.dataTransfer.items) {
-            for (const item of e.dataTransfer.items) {
-                if (item.kind === 'file' && item.type.startsWith('image/')) {
-                    e.preventDefault();
-                    e.dataTransfer.dropEffect = 'copy';
-                }
-            }
-        }
-    };
-    const handleDrop = async (e) => {
-        e.preventDefault();
-        await processFiles(e.dataTransfer.files);
-    };
-    const handleFileChange = async (e) => {
-        await processFiles(e.target.files);
-    };
-    const handleAreaClick = (event) => {
-        const target = event.target;
-        if (target.dataset && target.dataset.action) {
-            return;
-        }
-        fileInputRef.current?.click();
-    };
-    return (react_1.default.createElement(DragAndDropContainer, { onDragOver: handleDragOver, onDrop: !isUploading ? handleDrop : undefined, onClick: !isUploading ? handleAreaClick : undefined, tabIndex: isUploading ? -1 : 0, "aria-label": "Drag and drop area for file upload, or click to open file dialog.", role: "button", onKeyDown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                fileInputRef.current?.click();
-            }
-        } },
-        react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, "aria-hidden": "true" }),
-        react_1.default.createElement("p", null,
-            "Drag or click here to upload a file to link",
-            react_1.default.createElement("br", null),
-            "or drag items here from the file",
-            ' ',
-            react_1.default.createElement("span", { "data-action": "open-other-files" }, "'Other files'"),
-            " in the inspector.")));
-};
-exports.DragAndDropUploader = DragAndDropUploader;
-const DragAndDropContainer = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  border: 1px dashed ${(props) => props.theme.colors.border.secondary};
-  border-radius: 8px;
-  background-color: ${(props) => props.theme.colors.background.secondary};
-  color: ${(props) => props.theme.colors.text.primary};
-  font-size: ${(props) => props.theme.font.size.normal};
-
-  input[type='file'] {
-    display: none;
-  }
-
-  p {
-    margin: 0;
-    font-size: 14px;
-    text-align: center;
-  }
-  span {
-    text-decoration: underline;
-    cursor: pointer;
-  }
-`;

package/dist/cjs/components/views/ExtLinkEditor.js

@@ -1,137 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExtLinkEditor = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const DragAndDropUploader_1 = require("../DragAndDropUploader");
-const ExtLinkEditor = ({ node, nodePos, view, editorProps, isEditing, setIsEditing, }) => {
-    const [uploadError, setUploadError] = (0, react_1.useState)(null);
-    const fileManagement = editorProps.fileManagement;
-    const extLink = node.attrs.extLink;
-    const files = editorProps.getFiles();
-    const file = extLink ? files.find((f) => f.id === extLink) : undefined;
-    const onUpdate = (newAttrs) => {
-        const tr = view.state.tr.setNodeMarkup(nodePos, undefined, {
-            ...node.attrs,
-            ...newAttrs,
-        });
-        view.dispatch(tr);
-    };
-    const handleFileUpload = async (file) => {
-        setUploadError(null);
-        const result = await fileManagement.upload(file);
-        if (!result) {
-            handleUploadError('File upload failed');
-            return;
-        }
-        setIsEditing(false);
-        onUpdate({ extLink: result.id });
-    };
-    const handleUploadError = (message) => {
-        setUploadError(message);
-    };
-    const handleRemove = () => {
-        setUploadError(null);
-        onUpdate({ extLink: '' });
-        setIsEditing(false);
-    };
-    return (react_1.default.createElement("div", null,
-        !isEditing && !extLink && (react_1.default.createElement(style_guide_1.IconTextButton, { onClick: () => setIsEditing(true), "aria-label": "Add linked file" },
-            react_1.default.createElement(style_guide_1.LinkIcon, null),
-            "Add link")),
-        isEditing && !extLink && (react_1.default.createElement("div", null,
-            react_1.default.createElement(ExtLinkEditorLabel, null, "Link"),
-            react_1.default.createElement(ExtLinkEditorContainer, null,
-                react_1.default.createElement(DragAndDropUploader_1.DragAndDropUploader, { upload: handleFileUpload, onUploadError: handleUploadError }),
-                react_1.default.createElement(CloseUploaderButton, { onClick: () => setIsEditing(false) })))),
-        extLink && (react_1.default.createElement(LinkedFileInfoBox, null,
-            react_1.default.createElement("p", null,
-                react_1.default.createElement(style_guide_1.LinkIcon, null),
-                file ? file.name : 'File does not exist.'),
-            react_1.default.createElement(style_guide_1.IconButton, { onClick: handleRemove, "aria-label": "Remove linked file" },
-                react_1.default.createElement(style_guide_1.DeleteIcon, null)))),
-        uploadError && (react_1.default.createElement("div", null,
-            react_1.default.createElement("p", { className: "font-semibold" }, "Error:"),
-            react_1.default.createElement("p", null, uploadError)))));
-};
-exports.ExtLinkEditor = ExtLinkEditor;
-const ExtLinkEditorLabel = styled_components_1.default.div `
-  color: var(--label-color);
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: -0.369px;
-  margin-top: 12px;
-  cursor: pointer;
-`;
-const ExtLinkEditorContainer = styled_components_1.default.div `
-  position: relative;
-`;
-const LinkedFileInfoBox = styled_components_1.default.div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 8px;
-  background-color: ${(props) => props.theme.colors.background.secondary};
-  color: ${(props) => props.theme.colors.text.primary};
-  border: 1px solid ${(props) => props.theme.colors.border.secondary};
-  border-radius: 8px;
-
-  p {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 8px;
-
-    font-family: ${(props) => props.theme.font.family.sans};
-    font-weight: ${(props) => props.theme.font.weight.normal};
-    font-size: ${(props) => props.theme.font.size.medium};
-  }
-`;
-const CloseUploaderButton = (0, styled_components_1.default)(style_guide_1.CloseButton) `
-  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
-
-  position: absolute;
-  top: -8px;
-  right: -8px;
-`;

package/dist/cjs/views/figure_uploader.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.figureUploader = void 0;
-const figureUploader = (handler) => {
-    const handleFileChange = async (e) => {
-        const target = e.target;
-        if (target && target.files && target.files.length) {
-            await handler(target.files[0]);
-        }
-    };
-    const input = document.createElement('input');
-    input.accept = 'image/*';
-    input.type = 'file';
-    input.addEventListener('change', handleFileChange);
-    return () => input.click();
-};
-exports.figureUploader = figureUploader;

package/dist/es/components/DragAndDropUploader.js

@@ -1,108 +0,0 @@
-import React, { useRef, useState, } from 'react';
-import styled from 'styled-components';
-export const DragAndDropUploader = ({ upload, onUploadError, allowedFileTypes, maxFileSizeMB, }) => {
-    const [isUploading, setIsUploading] = useState(false);
-    const fileInputRef = useRef(null);
-    const validateFile = (file) => {
-        if (!file) {
-            onUploadError('No file selected.');
-            return false;
-        }
-        if (allowedFileTypes && allowedFileTypes.length > 0) {
-            if (!allowedFileTypes.includes(file.type)) {
-                onUploadError(`Invalid file type. Allowed types: ${allowedFileTypes.join(', ')}`);
-                return false;
-            }
-        }
-        if (maxFileSizeMB && file.size > maxFileSizeMB * 1024 * 1024) {
-            onUploadError(`File size exceeds limit of ${maxFileSizeMB} MB.`);
-            return false;
-        }
-        return true;
-    };
-    const processFiles = async (files) => {
-        if (files && files.length > 0) {
-            const file = files[0];
-            if (validateFile(file)) {
-                try {
-                    setIsUploading(true);
-                    await upload(file);
-                }
-                catch (error) {
-                    onUploadError('Upload failed. Please try again.');
-                    console.error('Upload error:', error);
-                }
-                finally {
-                    setIsUploading(false);
-                }
-            }
-        }
-        else {
-            onUploadError('No file selected or dropped.');
-        }
-    };
-    const handleDragOver = (e) => {
-        if (e.dataTransfer && e.dataTransfer.items) {
-            for (const item of e.dataTransfer.items) {
-                if (item.kind === 'file' && item.type.startsWith('image/')) {
-                    e.preventDefault();
-                    e.dataTransfer.dropEffect = 'copy';
-                }
-            }
-        }
-    };
-    const handleDrop = async (e) => {
-        e.preventDefault();
-        await processFiles(e.dataTransfer.files);
-    };
-    const handleFileChange = async (e) => {
-        await processFiles(e.target.files);
-    };
-    const handleAreaClick = (event) => {
-        const target = event.target;
-        if (target.dataset && target.dataset.action) {
-            return;
-        }
-        fileInputRef.current?.click();
-    };
-    return (React.createElement(DragAndDropContainer, { onDragOver: handleDragOver, onDrop: !isUploading ? handleDrop : undefined, onClick: !isUploading ? handleAreaClick : undefined, tabIndex: isUploading ? -1 : 0, "aria-label": "Drag and drop area for file upload, or click to open file dialog.", role: "button", onKeyDown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                fileInputRef.current?.click();
-            }
-        } },
-        React.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, "aria-hidden": "true" }),
-        React.createElement("p", null,
-            "Drag or click here to upload a file to link",
-            React.createElement("br", null),
-            "or drag items here from the file",
-            ' ',
-            React.createElement("span", { "data-action": "open-other-files" }, "'Other files'"),
-            " in the inspector.")));
-};
-const DragAndDropContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  border: 1px dashed ${(props) => props.theme.colors.border.secondary};
-  border-radius: 8px;
-  background-color: ${(props) => props.theme.colors.background.secondary};
-  color: ${(props) => props.theme.colors.text.primary};
-  font-size: ${(props) => props.theme.font.size.normal};
-
-  input[type='file'] {
-    display: none;
-  }
-
-  p {
-    margin: 0;
-    font-size: 14px;
-    text-align: center;
-  }
-  span {
-    text-decoration: underline;
-    cursor: pointer;
-  }
-`;

package/dist/es/components/views/ExtLinkEditor.js

@@ -1,97 +0,0 @@
-import { CloseButton, DeleteIcon, IconButton, IconTextButton, LinkIcon, } from '@manuscripts/style-guide';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { DragAndDropUploader } from '../DragAndDropUploader';
-export const ExtLinkEditor = ({ node, nodePos, view, editorProps, isEditing, setIsEditing, }) => {
-    const [uploadError, setUploadError] = useState(null);
-    const fileManagement = editorProps.fileManagement;
-    const extLink = node.attrs.extLink;
-    const files = editorProps.getFiles();
-    const file = extLink ? files.find((f) => f.id === extLink) : undefined;
-    const onUpdate = (newAttrs) => {
-        const tr = view.state.tr.setNodeMarkup(nodePos, undefined, {
-            ...node.attrs,
-            ...newAttrs,
-        });
-        view.dispatch(tr);
-    };
-    const handleFileUpload = async (file) => {
-        setUploadError(null);
-        const result = await fileManagement.upload(file);
-        if (!result) {
-            handleUploadError('File upload failed');
-            return;
-        }
-        setIsEditing(false);
-        onUpdate({ extLink: result.id });
-    };
-    const handleUploadError = (message) => {
-        setUploadError(message);
-    };
-    const handleRemove = () => {
-        setUploadError(null);
-        onUpdate({ extLink: '' });
-        setIsEditing(false);
-    };
-    return (React.createElement("div", null,
-        !isEditing && !extLink && (React.createElement(IconTextButton, { onClick: () => setIsEditing(true), "aria-label": "Add linked file" },
-            React.createElement(LinkIcon, null),
-            "Add link")),
-        isEditing && !extLink && (React.createElement("div", null,
-            React.createElement(ExtLinkEditorLabel, null, "Link"),
-            React.createElement(ExtLinkEditorContainer, null,
-                React.createElement(DragAndDropUploader, { upload: handleFileUpload, onUploadError: handleUploadError }),
-                React.createElement(CloseUploaderButton, { onClick: () => setIsEditing(false) })))),
-        extLink && (React.createElement(LinkedFileInfoBox, null,
-            React.createElement("p", null,
-                React.createElement(LinkIcon, null),
-                file ? file.name : 'File does not exist.'),
-            React.createElement(IconButton, { onClick: handleRemove, "aria-label": "Remove linked file" },
-                React.createElement(DeleteIcon, null)))),
-        uploadError && (React.createElement("div", null,
-            React.createElement("p", { className: "font-semibold" }, "Error:"),
-            React.createElement("p", null, uploadError)))));
-};
-const ExtLinkEditorLabel = styled.div `
-  color: var(--label-color);
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: -0.369px;
-  margin-top: 12px;
-  cursor: pointer;
-`;
-const ExtLinkEditorContainer = styled.div `
-  position: relative;
-`;
-const LinkedFileInfoBox = styled.div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 8px;
-  background-color: ${(props) => props.theme.colors.background.secondary};
-  color: ${(props) => props.theme.colors.text.primary};
-  border: 1px solid ${(props) => props.theme.colors.border.secondary};
-  border-radius: 8px;
-
-  p {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 8px;
-
-    font-family: ${(props) => props.theme.font.family.sans};
-    font-weight: ${(props) => props.theme.font.weight.normal};
-    font-size: ${(props) => props.theme.font.size.medium};
-  }
-`;
-const CloseUploaderButton = styled(CloseButton) `
-  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
-  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
-
-  position: absolute;
-  top: -8px;
-  right: -8px;
-`;