@manuscripts/style-guide 0.30.21 → 0.30.24

package/dist/cjs/components/AuthorsContainer.js

@@ -42,11 +42,11 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const AffiliationsList_1 = require("./AffiliationsList");
 const AuthorsList_1 = require("./AuthorsList");
-const AuthorsContainer = ({ authorData, showEditButton, startEditing, selectAuthor }) => {
+const AuthorsContainer = ({ authorData, showEditButton, startEditing, selectAuthor, disableEditButton, }) => {
     const authorAffiliations = (0, react_1.useMemo)(() => authorData.authors.filter((author) => author.role === 'author'), [authorData.authors]);
     const isThereJointContributor = (0, react_1.useMemo)(() => authorData.authors.find((contributor) => contributor.isJointContributor), [authorData.authors]);
     return (react_1.default.createElement(Container, { "data-cy": 'author-container' },
-        react_1.default.createElement(AuthorsList_1.AuthorsList, { authors: authorAffiliations, authorAffiliations: authorData.authorAffiliations, startEditing: startEditing, showEditButton: showEditButton, selectAuthor: selectAuthor }),
+        react_1.default.createElement(AuthorsList_1.AuthorsList, { authors: authorAffiliations, authorAffiliations: authorData.authorAffiliations, startEditing: startEditing, showEditButton: showEditButton, selectAuthor: selectAuthor, disableEditButton: disableEditButton }),
         react_1.default.createElement(AffiliationsList_1.AffiliationsList, { affiliations: authorData.affiliations }),
         isThereJointContributor && (react_1.default.createElement(LegendWrapper, null,
             react_1.default.createElement(Legend, null, "\u2020"),

package/dist/cjs/components/AuthorsList/AuthorsList.js

@@ -43,10 +43,10 @@ const AuthorsActions = styled_components_1.default.div `
   display: flex;
   margin-left: ${(props) => props.theme.grid.unit * 2}px;
 `;
-const AuthorsList = ({ authors, authorAffiliations, startEditing, showEditButton, selectAuthor, }) => (react_1.default.createElement(AuthorsContainer, { isEmpty: !authors.length },
+const AuthorsList = ({ authors, authorAffiliations, startEditing, showEditButton, disableEditButton, selectAuthor, }) => (react_1.default.createElement(AuthorsContainer, { isEmpty: !authors.length },
     react_1.default.createElement("div", null, authors.map((author, index) => (react_1.default.createElement(react_1.default.Fragment, { key: author._id },
         !!index && ', ',
         react_1.default.createElement(Author_1.Author, { author: author, jointFirstAuthor: (0, authors_1.isJointFirstAuthor)(authors, index), affiliations: authorAffiliations.get(author._id), selectAuthor: selectAuthor, startEditing: startEditing, showEditButton: showEditButton }))))),
     showEditButton && startEditing && (react_1.default.createElement(AuthorsActions, null,
-        react_1.default.createElement(Button_1.PrimaryButton, { mini: true, onClick: startEditing }, "Edit Authors")))));
+        react_1.default.createElement(Button_1.PrimaryButton, { mini: true, onClick: startEditing, className: 'edit_authors_button', disabled: disableEditButton }, "Edit Authors")))));
 exports.AuthorsList = AuthorsList;

package/dist/cjs/components/FileManager/FileManager.js

@@ -42,10 +42,11 @@ const DragLayer_1 = require("./FileSectionItem/DragLayer");
 const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
 const FileSectionState_1 = require("./FileSectionState");
 const FilesSection_1 = require("./FilesSection");
+const InlineFilesSection_1 = require("./InlineFilesSection");
 const TooltipDiv_1 = require("./TooltipDiv");
 const util_1 = require("./util");
 exports.PermissionsContext = (0, react_1.createContext)(null);
-const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
+const FileManager = ({ submissionId, externalFiles, modelMap, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
     const [state, dispatch] = (0, react_1.useReducer)(FileSectionState_1.reducer, (0, FileSectionState_1.getInitialState)());
     const handleReplaceFile = (0, react_1.useCallback)((submissionId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
         dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
@@ -147,7 +148,7 @@ const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, hand
                                 react_1.default.createElement("div", null, "Files excluded from the final submission.")))),
                     react_1.default.createElement(Inspector_1.InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
-                            react_1.default.createElement(FilesSection_1.FilesSection, { submissionId: submissionId, enableDragAndDrop: false, handleUpload: handleUploadFile, fileSection: util_1.FileSectionType.Inline, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Inline), state: state, dispatch: dispatch })),
+                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { modelMap: modelMap, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
                             react_1.default.createElement(FilesSection_1.FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: util_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,

package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileName = exports.FileNameContainer = exports.FileInfoContainer = exports.FileInfo = void 0;
+exports.FileDescription = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileInfo = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FileManager_1 = require("../FileManager");
@@ -35,8 +35,8 @@ const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissio
             showDesignationActions &&
             designation &&
             submissionId && (react_1.default.createElement(DesignationActions_1.DesignationActions, { designation: designation, fileExtension: fileExtension, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, fileName: submissionAttachmentName, dispatch: dispatch })),
-        react_1.default.createElement(FileNameTitleContainer, null,
-            react_1.default.createElement(FileTitle, null,
+        react_1.default.createElement(exports.FileNameTitleContainer, null,
+            react_1.default.createElement(exports.FileTitle, null,
                 !showAttachmentName ? fileName : title,
                 showAttachmentName && ':'),
             showAttachmentName && (react_1.default.createElement(exports.FileNameContainer, null,
@@ -44,7 +44,7 @@ const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissio
                 react_1.default.createElement("div", null,
                     ".",
                     fileExtension)))),
-        description && react_1.default.createElement(FileDescription, null, description)));
+        description && react_1.default.createElement(exports.FileDescription, null, description)));
 };
 exports.FileInfo = FileInfo;
 exports.FileInfoContainer = styled_components_1.default.div `
@@ -56,11 +56,11 @@ exports.FileInfoContainer = styled_components_1.default.div `
   align-items: start;
   width: 100%;
 `;
-const FileNameTitleContainer = styled_components_1.default.div `
+exports.FileNameTitleContainer = styled_components_1.default.div `
   display: flex;
   width: 100%;
 `;
-const FileTitle = styled_components_1.default.div `
+exports.FileTitle = styled_components_1.default.div `
   color: ${(props) => props.theme.colors.text.primary};
   font-weight: bold;
   font-size: 16px;
@@ -82,7 +82,7 @@ exports.FileName = styled_components_1.default.div `
   white-space: nowrap;
   overflow: hidden;
 `;
-const FileDescription = styled_components_1.default.div `
+exports.FileDescription = styled_components_1.default.div `
   color: ${(props) => props.theme.colors.text.secondary};
   font-size: 14px;
   line-height: 20px;

package/dist/cjs/components/FileManager/FileSectionItem/FileTypeIcon.js

@@ -7,46 +7,37 @@ exports.FileTypeIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const document_icon_with_dot_1 = __importDefault(require("../../icons/document-icon-with-dot"));
 const unknown_format_file_icon_1 = __importDefault(require("../../icons/unknown-format-file-icon"));
 const TooltipDiv_1 = require("../TooltipDiv");
 const util_1 = require("../util");
 const FileTypeIcon = ({ withDot, fileExtension, alt }) => {
     let fileIcon = react_1.default.createElement(unknown_format_file_icon_1.default, null);
+    if (withDot) {
+        return (react_1.default.createElement(Container, null,
+            react_1.default.createElement(document_icon_with_dot_1.default, null),
+            react_1.default.createElement(TooltipDiv_1.TooltipDiv, null,
+                react_1.default.createElement(react_tooltip_1.default, { id: "dot", place: "bottom", effect: "float", className: "tooltip" },
+                    react_1.default.createElement("div", null, "Main manuscript. Only one file per submission")))));
+    }
     if (fileExtension) {
         const fileType = util_1.extensionsWithFileTypesMap.get(fileExtension.toLowerCase());
         fileIcon = util_1.fileTypesWithIconMap.get(fileType);
     }
-    return (react_1.default.createElement(Container, null,
-        withDot && react_1.default.createElement(Dot, { "data-for": "dot", "data-tip": true }),
-        react_1.default.createElement(TooltipDiv_1.TooltipDiv, null,
-            react_1.default.createElement(react_tooltip_1.default, { id: "dot", place: "bottom", offset: { bottom: -7 }, effect: "solid", className: "tooltip" },
-                react_1.default.createElement("div", null, "Main manuscript. Only one file per submission"))),
-        fileIcon));
+    return react_1.default.createElement(Container, null, fileIcon);
 };
 exports.FileTypeIcon = FileTypeIcon;
 const Container = styled_components_1.default.div `
   width: 40px;
   min-width: 40px;
   height: 40px;
-  background-color: ${(props) => props.theme.colors.background.secondary};
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid #f2f2f2;
   box-sizing: border-box;
   border-radius: 4px;
   position: relative;
 `;
-const Dot = styled_components_1.default.div `
-  width: 12px;
-  height: 12px;
-  background: #1a9bc7;
-  border: 2px solid #ffffff;
-  border-radius: 50%;
-  position: absolute;
-  top: -8px;
-  left: -8px;
-`;
 const Img = styled_components_1.default.img `
   width: 100%;
   height: 100%;

package/dist/cjs/components/FileManager/FileSectionItem/ItemActions.js

@@ -25,7 +25,7 @@ const Dropdown_1 = require("../../Dropdown");
 const FileManager_1 = require("../FileManager");
 const FileSectionState_1 = require("../FileSectionState");
 const ItemsAction_1 = require("../ItemsAction");
-const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, fileName, designation, publicUrl, hideActionList, dispatch, }) => {
+const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, fileName, designation, publicUrl, hideActionList, dispatch, dropDownClassName, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
     const fileInputRef = (0, react_1.useRef)(null);
     const [selectedFile, setSelectedFile] = (0, react_1.useState)();
@@ -46,7 +46,7 @@ const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, subm
             fileInputRef.current.click();
         }
     };
-    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', width: 125, height: 96, top: 5, onClick: hideActionList },
+    return (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', className: dropDownClassName, width: 125, height: 96, top: 5, onClick: hideActionList },
         react_1.default.createElement(ItemsAction_1.ActionsItem, { onClick: () => {
                 publicUrl !== undefined ? downloadAttachmentHandler(publicUrl) : {};
             } }, "Download"),

package/dist/cjs/components/FileManager/InlineFilesSection.js

@@ -0,0 +1,156 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.InlineFilesSection = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const use_dropdown_1 = require("../../hooks/use-dropdown");
+const inlineFiles_1 = __importDefault(require("../../lib/inlineFiles"));
+const dots_icon_1 = __importDefault(require("../icons/dots-icon"));
+const FileInfo_1 = require("./FileSectionItem/FileInfo");
+const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
+const ItemActions_1 = require("./FileSectionItem/ItemActions");
+const util_1 = require("./util");
+const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, isEditor, dispatch, }) => {
+    const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap), [modelMap]);
+    const onElementClick = (0, react_1.useCallback)((e) => {
+        if (!isEditor) {
+            return;
+        }
+        const { id } = e.currentTarget;
+        const isSelected = id == window.location.hash.substr(1);
+        window.location.hash = !isSelected ? `#${id}` : '#';
+        if (isSelected) {
+            window.location.hash = `#${id}`;
+        }
+    }, [isEditor]);
+    return (react_1.default.createElement("div", null, inlineFiles.map((file, index) => {
+        var _a;
+        return (react_1.default.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
+            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.externalFileReferences) === null || _a === void 0 ? void 0 : _a.map((externalFile, index) => (react_1.default.createElement(FileReference, { key: index, externalFile: externalFile.ref, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, dispatch: dispatch })))),
+            react_1.default.createElement(Element, { className: 'element' },
+                util_1.fileTypesWithIconMap.get(file.type),
+                react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
+                    react_1.default.createElement(FileInfo_1.FileNameTitleContainer, null,
+                        react_1.default.createElement(FileInfo_1.FileTitle, null, file.label)),
+                    file.caption && (react_1.default.createElement(FileInfo_1.FileDescription, null, file.caption))))));
+    })));
+};
+exports.InlineFilesSection = InlineFilesSection;
+const FileReference = ({ externalFile, submissionId, handleReplace, handleDownload, dispatch, }) => {
+    const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
+    if (!externalFile || !externalFile.filename) {
+        return null;
+    }
+    const fileExtension = externalFile.filename.substring(externalFile.filename.lastIndexOf('.') + 1);
+    return (react_1.default.createElement(FileReferenceItem, { key: externalFile._id },
+        react_1.default.createElement(Container, null,
+            util_1.fileTypesWithIconMap.get(util_1.extensionsWithFileTypesMap.get(fileExtension)),
+            react_1.default.createElement(FileReferenceName, null, externalFile.filename)),
+        handleDownload && handleReplace && submissionId && (react_1.default.createElement(DropdownContainer, { ref: wrapperRef },
+            react_1.default.createElement(FileSectionItem_1.ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace", "aria-pressed": isOpen },
+                react_1.default.createElement(dots_icon_1.default, null)),
+            isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+};
+const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
+  display: flex;
+  // this will allow us to select the previous sibling node,
+  // to change the background on the hover for adjacent node
+  flex-direction: column-reverse;
+  padding: 0;
+
+  :hover {
+    background: #f2fbfc;
+  }
+
+  .refItems:hover ~ .element {
+    background: white !important;
+  }
+
+  .refItems:hover {
+    background: white !important;
+  }
+
+  border-bottom: 1px dashed #f0f0f0;
+
+  :last-child {
+    border-bottom: 0;
+  }
+`;
+const Container = styled_components_1.default.div `
+  display: flex;
+`;
+const Element = styled_components_1.default.div `
+  display: flex;
+  padding: 20px 15px;
+`;
+const FileReferences = styled_components_1.default.div ``;
+const FileReferenceItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  svg {
+    width: 14px;
+    height: 17px;
+  }
+
+  path {
+    fill: #6e6e6e;
+  }
+
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
+
+  :hover {
+    background: #f2fbfc;
+  }
+
+  .external_file_dropdown {
+    opacity: 0;
+  }
+  :hover .external_file_dropdown {
+    opacity: 1;
+  }
+
+  .ref_item_dropdown {
+    top: 65%;
+    right: 10px;
+    width: 180px;
+  }
+  :last-child {
+    margin-bottom: 25px;
+  }
+`;
+const FileReferenceName = styled_components_1.default.div `
+  font-family: ${(props) => props.theme.font.family.Lato};
+  font-size: ${(props) => props.theme.font.size.medium};
+  line-height: ${(props) => props.theme.font.lineHeight.large};
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  color: ${(props) => props.theme.colors.text.primary};
+  margin-left: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const DropdownContainer = styled_components_1.default.div `
+  position: relative;
+`;

package/dist/cjs/components/FileManager/util.js

@@ -10,6 +10,8 @@ const code_file_icon_1 = __importDefault(require("../icons/code-file-icon"));
 const compressed_file_icon_1 = __importDefault(require("../icons/compressed-file-icon"));
 const document_icon_1 = __importDefault(require("../icons/document-icon"));
 const figure_icon_1 = __importDefault(require("../icons/figure-icon"));
+const graphical_abstract_icon_1 = __importDefault(require("../icons/graphical_abstract_icon"));
+const image_icon_1 = __importDefault(require("../icons/image-icon"));
 const latex_icon_1 = __importDefault(require("../icons/latex-icon"));
 const pdf_file_icon_1 = __importDefault(require("../icons/pdf-file-icon"));
 const table_icon_1 = __importDefault(require("../icons/table-icon"));
@@ -33,6 +35,8 @@ var FileType;
     FileType[FileType["PdfFile"] = 7] = "PdfFile";
     FileType[FileType["CompressedFile"] = 8] = "CompressedFile";
     FileType[FileType["PlainText"] = 9] = "PlainText";
+    FileType[FileType["Figure"] = 10] = "Figure";
+    FileType[FileType["GraphicalAbstract"] = 11] = "GraphicalAbstract";
 })(FileType = exports.FileType || (exports.FileType = {}));
 var Designation;
 (function (Designation) {
@@ -340,7 +344,12 @@ exports.fileTypesWithIconMap = new Map([
         FileType.PlainText,
         react_1.default.createElement(document_icon_1.default, { key: FileType.PlainText, color: "#FFBD26" }),
     ],
-    [FileType.Image, react_1.default.createElement(figure_icon_1.default, { key: FileType.Image })],
+    [FileType.Image, react_1.default.createElement(image_icon_1.default, { key: FileType.Image })],
+    [FileType.Figure, react_1.default.createElement(figure_icon_1.default, { key: FileType.Figure })],
+    [
+        FileType.GraphicalAbstract,
+        react_1.default.createElement(graphical_abstract_icon_1.default, { key: FileType.GraphicalAbstract }),
+    ],
     [undefined, react_1.default.createElement(unknown_format_file_icon_1.default, { key: undefined })],
 ]);
 const generateExternalFilesTitles = (externalFiles, fileSectionType) => {

package/dist/cjs/components/icons/audio-icon.js

@@ -19,8 +19,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const AudioIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M8 14C7.73478 14 7.48043 13.8946 7.29289 13.7071C7.10536 13.5196 7 13.2652 7 13V3C7 2.73478 7.10536 2.48043 7.29289 2.29289C7.48043 2.10536 7.73478 2 8 2C8.26522 2 8.51957 2.10536 8.70711 2.29289C8.89464 2.48043 9 2.73478 9 3V13C9 13.2652 8.89464 13.5196 8.70711 13.7071C8.51957 13.8946 8.26522 14 8 14Z", fill: "#F474AE" }),
-    react_1.default.createElement("path", { d: "M4 12C3.73478 12 3.48043 11.8946 3.29289 11.7071C3.10536 11.5196 3 11.2652 3 11V5C3 4.73478 3.10536 4.48043 3.29289 4.29289C3.48043 4.10536 3.73478 4 4 4C4.26522 4 4.51957 4.10536 4.70711 4.29289C4.89464 4.48043 5 4.73478 5 5V11C5 11.2652 4.89464 11.5196 4.70711 11.7071C4.51957 11.8946 4.26522 12 4 12Z", fill: "#F474AE" }),
-    react_1.default.createElement("path", { d: "M12 10C11.7348 10 11.4804 9.89464 11.2929 9.70711C11.1054 9.51957 11 9.26522 11 9V7C11 6.73478 11.1054 6.48043 11.2929 6.29289C11.4804 6.10536 11.7348 6 12 6C12.2652 6 12.5196 6.10536 12.7071 6.29289C12.8946 6.48043 13 6.73478 13 7V9C13 9.26522 12.8946 9.51957 12.7071 9.70711C12.5196 9.89464 12.2652 10 12 10Z", fill: "#F474AE" })));
+const AudioIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M12 21.7197C11.6022 21.7197 11.2206 21.5617 10.9393 21.2804C10.658 20.9991 10.5 20.6176 10.5 20.2197V5.21973C10.5 4.8219 10.658 4.44037 10.9393 4.15907C11.2206 3.87776 11.6022 3.71973 12 3.71973C12.3978 3.71973 12.7794 3.87776 13.0607 4.15907C13.342 4.44037 13.5 4.8219 13.5 5.21973V20.2197C13.5 20.6176 13.342 20.9991 13.0607 21.2804C12.7794 21.5617 12.3978 21.7197 12 21.7197Z", fill: "#F474AE" }),
+    react_1.default.createElement("path", { d: "M6 18.7197C5.60218 18.7197 5.22064 18.5617 4.93934 18.2804C4.65804 17.9991 4.5 17.6176 4.5 17.2197V8.21973C4.5 7.8219 4.65804 7.44037 4.93934 7.15907C5.22064 6.87776 5.60218 6.71973 6 6.71973C6.39782 6.71973 6.77936 6.87776 7.06066 7.15907C7.34196 7.44037 7.5 7.8219 7.5 8.21973V17.2197C7.5 17.6176 7.34196 17.9991 7.06066 18.2804C6.77936 18.5617 6.39782 18.7197 6 18.7197Z", fill: "#F474AE" }),
+    react_1.default.createElement("path", { d: "M18 15.7197C17.6022 15.7197 17.2206 15.5617 16.9393 15.2804C16.658 14.9991 16.5 14.6176 16.5 14.2197V11.2197C16.5 10.8219 16.658 10.4404 16.9393 10.1591C17.2206 9.87776 17.6022 9.71973 18 9.71973C18.3978 9.71973 18.7794 9.87776 19.0607 10.1591C19.342 10.4404 19.5 10.8219 19.5 11.2197V14.2197C19.5 14.6176 19.342 14.9991 19.0607 15.2804C18.7794 15.5617 18.3978 15.7197 18 15.7197Z", fill: "#F474AE" })));
 exports.default = AudioIcon;

package/dist/cjs/components/icons/code-file-icon.js

@@ -19,8 +19,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const CodeFileIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M4.28492 11.6493L0.81779 8.18221L4.36914 4.63086", stroke: "#B3A1FC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-    react_1.default.createElement("path", { d: "M12.3684 11.6493L15.8355 8.18221L12.2842 4.63086", stroke: "#B3A1FC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-    react_1.default.createElement("path", { d: "M10 1L7 15", stroke: "#B3A1FC", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+const CodeFileIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M5.35566 15.2819L1.02175 10.948L5.46094 6.50879", stroke: "#B3A1FC", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("path", { d: "M15.4617 15.2819L19.7956 10.948L15.3564 6.50879", stroke: "#B3A1FC", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("path", { d: "M12.5 1.96973L8.75 19.4697", stroke: "#B3A1FC", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
 exports.default = CodeFileIcon;

package/dist/cjs/components/icons/compressed-file-icon.js

@@ -19,15 +19,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const CompressedFileIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("line", { x1: "8.75", y1: "2", x2: "8.75", y2: "3", stroke: "#353535", strokeWidth: "1.5" }),
-    react_1.default.createElement("line", { x1: "8.75", y1: "4", x2: "8.75", y2: "5", stroke: "#353535", strokeWidth: "1.5" }),
-    react_1.default.createElement("line", { x1: "8.75", y1: "6", x2: "8.75", y2: "7", stroke: "#353535", strokeWidth: "1.5" }),
-    react_1.default.createElement("line", { x1: "7.75", y1: "3", x2: "7.75", y2: "4", stroke: "#353535", strokeWidth: "1.5" }),
-    react_1.default.createElement("line", { x1: "7.75", y1: "5", x2: "7.75", y2: "6", stroke: "#353535", strokeWidth: "1.5" }),
-    react_1.default.createElement("line", { x1: "7.75", y1: "7", x2: "7.75", y2: "8", stroke: "#353535", strokeWidth: "1.5" }),
-    react_1.default.createElement("rect", { x: "1.25", y: "1.25", width: "13.5", height: "15.5", rx: "1.75", stroke: "#353535", strokeWidth: "1.5" }),
-    react_1.default.createElement("path", { d: "M5.98334 9V9.33493C5.98334 9.38252 5.97553 9.42919 5.95991 9.47495C5.94603 9.5207 5.92607 9.56372 5.90004 9.60398L4.1194 12.2862H5.92607V13H3V12.6431C3 12.601 3.00694 12.5598 3.02083 12.5196C3.03471 12.4775 3.0538 12.439 3.0781 12.4043L4.86394 9.7138H3.14578V9H5.98334Z", fill: "#353535" }),
-    react_1.default.createElement("path", { d: "M8.39059 13H7.50548V9H8.39059V13Z", fill: "#353535" }),
-    react_1.default.createElement("path", { d: "M11.0163 11.663V13H10.1364V9H11.4745C11.7418 9 11.9708 9.03386 12.1617 9.10158C12.3544 9.16747 12.5123 9.25898 12.6355 9.37612C12.7605 9.49325 12.8525 9.63143 12.9115 9.79067C12.9705 9.9499 13 10.1219 13 10.3068C13 10.5063 12.9696 10.6893 12.9089 10.8559C12.8481 11.0224 12.7553 11.1652 12.6303 11.2841C12.5054 11.4031 12.3466 11.4965 12.1539 11.5642C11.963 11.6301 11.7365 11.663 11.4745 11.663H11.0163ZM11.0163 10.9629H11.4745C11.7036 10.9629 11.8684 10.9053 11.9691 10.79C12.0698 10.6747 12.1201 10.5136 12.1201 10.3068C12.1201 10.2153 12.1071 10.132 12.081 10.057C12.055 9.98193 12.0151 9.91787 11.9613 9.86479C11.9092 9.80988 11.8424 9.76779 11.7608 9.7385C11.681 9.70922 11.5856 9.69458 11.4745 9.69458H11.0163V10.9629Z", fill: "#353535" })));
+const CompressedFileIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "22", height: "26", viewBox: "0 0 22 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("line", { x1: "11.75", y1: "2.21973", x2: "11.75", y2: "3.71973", stroke: "#6E6E6E", strokeWidth: "1.5" }),
+    react_1.default.createElement("line", { x1: "11.75", y1: "5.21973", x2: "11.75", y2: "6.71973", stroke: "#6E6E6E", strokeWidth: "1.5" }),
+    react_1.default.createElement("line", { x1: "11.75", y1: "8.21973", x2: "11.75", y2: "9.71973", stroke: "#6E6E6E", strokeWidth: "1.5" }),
+    react_1.default.createElement("line", { x1: "10.25", y1: "3.71973", x2: "10.25", y2: "5.21973", stroke: "#6E6E6E", strokeWidth: "1.5" }),
+    react_1.default.createElement("line", { x1: "10.25", y1: "6.71973", x2: "10.25", y2: "8.21973", stroke: "#6E6E6E", strokeWidth: "1.5" }),
+    react_1.default.createElement("line", { x1: "10.25", y1: "9.71973", x2: "10.25", y2: "11.2197", stroke: "#6E6E6E", strokeWidth: "1.5" }),
+    react_1.default.createElement("rect", { x: "1", y: "1.21973", width: "20", height: "23", rx: "2", stroke: "#6E6E6E", strokeWidth: "2" }),
+    react_1.default.createElement("path", { d: "M7.97502 12.7197V13.2221C7.97502 13.2935 7.9633 13.3635 7.93987 13.4321C7.91904 13.5008 7.88911 13.5653 7.85006 13.6257L5.17911 17.649H7.88911V18.7197H3.5V18.1844C3.5 18.1212 3.51041 18.0595 3.53124 17.9991C3.55207 17.9359 3.5807 17.8783 3.61715 17.8261L6.29591 13.7904H3.71867V12.7197H7.97502Z", fill: "#6E6E6E" }),
+    react_1.default.createElement("path", { d: "M11.5859 18.7197H10.2582V12.7197H11.5859V18.7197Z", fill: "#6E6E6E" }),
+    react_1.default.createElement("path", { d: "M15.5245 16.7142V18.7197H14.2046V12.7197H16.2117C16.6126 12.7197 16.9563 12.7705 17.2426 12.8721C17.5316 12.9709 17.7685 13.1082 17.9533 13.2839C18.1407 13.4596 18.2787 13.6669 18.3672 13.9057C18.4557 14.1446 18.5 14.4026 18.5 14.6799C18.5 14.9792 18.4544 15.2537 18.3633 15.5035C18.2722 15.7534 18.1329 15.9675 17.9455 16.1459C17.7581 16.3244 17.5199 16.4644 17.2309 16.566C16.9445 16.6648 16.6048 16.7142 16.2117 16.7142H15.5245ZM15.5245 15.6641H16.2117C16.5554 15.6641 16.8027 15.5777 16.9537 15.4047C17.1046 15.2317 17.1801 14.9901 17.1801 14.6799C17.1801 14.5427 17.1606 14.4177 17.1216 14.3052C17.0825 14.1926 17.0226 14.0965 16.9419 14.0169C16.8638 13.9346 16.7636 13.8714 16.6413 13.8275C16.5215 13.7836 16.3783 13.7616 16.2117 13.7616H15.5245V15.6641Z", fill: "#6E6E6E" })));
 exports.default = CompressedFileIcon;

package/dist/cjs/components/icons/document-icon-with-dot.js

@@ -0,0 +1,28 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const DocumentIconWithDot = (props) => (react_1.default.createElement("svg", { width: "28", height: "33", viewBox: "0 0 28 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-for": "dot", "data-tip": true },
+    react_1.default.createElement("rect", { x: "9", y: "9.71973", width: "18", height: "22", rx: "2", stroke: "#1A9BC7", strokeWidth: "2" }),
+    react_1.default.createElement("rect", { x: "13.167", y: "14.0771", width: "5.66667", height: "1.14286", rx: "0.5", fill: "#1A9BC7", stroke: "#1A9BC7" }),
+    react_1.default.createElement("rect", { x: "13.167", y: "19.791", width: "9.66667", height: "1.14286", rx: "0.5", fill: "#1A9BC7", stroke: "#1A9BC7" }),
+    react_1.default.createElement("rect", { x: "13.167", y: "25.5059", width: "9.66667", height: "1.14286", rx: "0.5", fill: "#1A9BC7", stroke: "#1A9BC7" }),
+    react_1.default.createElement("circle", { cx: "8", cy: "8.71973", r: "7", fill: "#1A9BC7", stroke: "white", strokeWidth: "2" })));
+exports.default = DocumentIconWithDot;

package/dist/cjs/components/icons/document-icon.js

@@ -19,9 +19,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const DocumentIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("rect", { x: "1.25", y: "1.25", width: "13.5", height: "15.5", rx: "1.75", stroke: props.color, strokeWidth: "1.5" }),
-    react_1.default.createElement("rect", { x: "4.375", y: "4.375", width: "4.25", height: "0.75", rx: "0.375", stroke: props.color, strokeWidth: "0.75" }),
-    react_1.default.createElement("rect", { x: "4.375", y: "8.375", width: "7.25", height: "0.75", rx: "0.375", stroke: props.color, strokeWidth: "0.75" }),
-    react_1.default.createElement("rect", { x: "4.375", y: "12.375", width: "7.25", height: "0.75", rx: "0.375", stroke: props.color, strokeWidth: "0.75" })));
+const DocumentIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "20", height: "25", viewBox: "0 0 20 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("rect", { x: "1", y: "1.71973", width: "18", height: "22", rx: "2", stroke: props.color, strokeWidth: "2" }),
+    react_1.default.createElement("rect", { x: "5.16699", y: "6.07715", width: "5.66667", height: "1.14286", rx: "0.5", fill: "#1A9BC7", stroke: props.color }),
+    react_1.default.createElement("rect", { x: "5.16699", y: "11.791", width: "9.66667", height: "1.14286", rx: "0.5", fill: "#1A9BC7", stroke: props.color }),
+    react_1.default.createElement("rect", { x: "5.16699", y: "17.5059", width: "9.66667", height: "1.14286", rx: "0.5", fill: "#1A9BC7", stroke: props.color })));
 exports.default = DocumentIcon;

package/dist/cjs/components/icons/figure-icon.js

@@ -19,8 +19,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const FigureIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "11", height: "14", viewBox: "0 0 11 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M8.25 1.25H2.75C1.64543 1.25 0.75 2.14543 0.75 3.25V10.75C0.75 11.8546 1.64543 12.75 2.75 12.75H8.25C9.35457 12.75 10.25 11.8546 10.25 10.75V3.25C10.25 2.14543 9.35457 1.25 8.25 1.25Z", stroke: "#8DD439", strokeWidth: "1.5" }),
-    react_1.default.createElement("path", { d: "M5 4.75C5 4.33579 4.66421 4 4.25 4C3.83579 4 3.5 4.33579 3.5 4.75V10.25C3.5 10.6642 3.83579 11 4.25 11C4.66421 11 5 10.6642 5 10.25V4.75Z", fill: "#8DD439" }),
-    react_1.default.createElement("path", { d: "M7.5 6.75C7.5 6.33579 7.16421 6 6.75 6C6.33579 6 6 6.33579 6 6.75V10.25C6 10.6642 6.33579 11 6.75 11C7.16421 11 7.5 10.6642 7.5 10.25V6.75Z", fill: "#8DD439" })));
+const FigureIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "19", height: "23", viewBox: "0 0 19 23", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M14.0435 1.71973H4.47826C2.55727 1.71973 1 3.277 1 5.19799V18.2415C1 20.1625 2.55727 21.7197 4.47826 21.7197H14.0435C15.9645 21.7197 17.5217 20.1625 17.5217 18.2415V5.19799C17.5217 3.277 15.9645 1.71973 14.0435 1.71973Z", stroke: "#8DD439", strokeWidth: "2" }),
+    react_1.default.createElement("path", { d: "M8.39092 7.8063C8.39092 7.08594 7.80694 6.50195 7.08657 6.50195C6.36621 6.50195 5.78223 7.08594 5.78223 7.8063V17.3715C5.78223 18.0919 6.36621 18.6759 7.08657 18.6759C7.80694 18.6759 8.39092 18.0919 8.39092 17.3715V7.8063Z", fill: "#8DD439" }),
+    react_1.default.createElement("path", { d: "M12.7396 11.2848C12.7396 10.5645 12.1556 9.98047 11.4352 9.98047C10.7148 9.98047 10.1309 10.5645 10.1309 11.2848V17.3718C10.1309 18.0921 10.7148 18.6761 11.4352 18.6761C12.1556 18.6761 12.7396 18.0921 12.7396 17.3718V11.2848Z", fill: "#8DD439" })));
 exports.default = FigureIcon;

package/dist/cjs/components/icons/graphical_abstract_icon.js

@@ -0,0 +1,26 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const GraphicalAbstractIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M18.5 12.7197C20.9853 12.7197 23 10.705 23 8.21973C23 5.73445 20.9853 3.71973 18.5 3.71973C16.0147 3.71973 14 5.73445 14 8.21973C14 10.705 16.0147 12.7197 18.5 12.7197Z", stroke: "#FFBD26", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("path", { d: "M13 14.7197H6V21.7197H13V14.7197Z", stroke: "#FFBD26", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("path", { d: "M2 9.71973L6 2.71973L10 9.71973H2Z", stroke: "#FFBD26", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+exports.default = GraphicalAbstractIcon;

package/dist/cjs/components/icons/image-icon.js

@@ -0,0 +1,24 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const ImageIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "20", height: "25", viewBox: "0 0 20 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17 0.719727H3C1.34315 0.719727 0 2.06287 0 3.71973V21.7197C0 23.3766 1.34315 24.7197 3 24.7197H17C18.6569 24.7197 20 23.3766 20 21.7197V3.71973C20 2.06287 18.6569 0.719727 17 0.719727ZM2 3.71973C2 3.16744 2.44772 2.71973 3 2.71973H17C17.5523 2.71973 18 3.16744 18 3.71973V16.4876L13.2952 11.5701C12.948 11.1982 12.3852 11.1982 12.0381 11.5701L2.27769 22.4113C2.10568 22.2317 2 21.988 2 21.7197V3.71973ZM4.46682 22.7197H17C17.5523 22.7197 18 22.272 18 21.7197V19.1483C18 19.1483 18 19.1483 18 19.1483L12.6666 13.5904L4.46682 22.7197ZM5.55552 10.815C5.55552 10.552 5.7545 10.3388 5.99996 10.3388C6.24542 10.3388 6.44441 10.552 6.44441 10.815C6.44441 11.078 6.24542 11.2912 5.99996 11.2912C5.7545 11.2912 5.55552 11.078 5.55552 10.815ZM5.99996 8.43401C4.77266 8.43401 3.77774 9.5 3.77774 10.815C3.77774 12.1299 4.77266 13.1959 5.99996 13.1959C7.22726 13.1959 8.22218 12.1299 8.22218 10.815C8.22218 9.5 7.22726 8.43401 5.99996 8.43401Z", fill: "#36B260" })));
+exports.default = ImageIcon;