@manuscripts/style-guide 1.12.7-LEAN-3579.0 → 1.12.7

package/dist/cjs/components/AlertMessage.js

@@ -42,15 +42,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertMessage = exports.AlertMessageType = exports.TextButton = void 0;
-const AttentionBlue_1 = __importDefault(require("@manuscripts/assets/react/AttentionBlue"));
-const AttentionOrange_1 = __importDefault(require("@manuscripts/assets/react/AttentionOrange"));
-const AttentionRed_1 = __importDefault(require("@manuscripts/assets/react/AttentionRed"));
-const CloseIconDark_1 = __importDefault(require("@manuscripts/assets/react/CloseIconDark"));
-const SuccessGreen_1 = __importDefault(require("@manuscripts/assets/react/SuccessGreen"));
 const react_1 = __importDefault(require("react"));
 const react_sizeme_1 = require("react-sizeme");
 const styled_components_1 = __importStar(require("styled-components"));
 const Button_1 = require("./Button");
+const icons_1 = require("./icons");
 const buttonStyles = (0, styled_components_1.css) `
   color: inherit;
   margin-left: ${(props) => props.theme.grid.unit * 4}px;
@@ -123,13 +119,9 @@ const TextContainer = styled_components_1.default.div `
   align-items: center;
   word-break: break-word;
 `;
-const SuccessIcon = (0, styled_components_1.default)(SuccessGreen_1.default) `
+const SuccessIcon = (0, styled_components_1.default)(icons_1.AttentionGreenIcon) `
   transform: scale(0.75, 0.75);
 `;
-const CloseIcon = (0, styled_components_1.default)(CloseIconDark_1.default) `
-  width: 100%;
-  height: 100%;
-`;
 var AlertMessageType;
 (function (AlertMessageType) {
     AlertMessageType["success"] = "success";
@@ -139,9 +131,9 @@ var AlertMessageType;
 })(AlertMessageType = exports.AlertMessageType || (exports.AlertMessageType = {}));
 const alertIcons = {
     success: SuccessIcon,
-    error: AttentionRed_1.default,
-    info: AttentionBlue_1.default,
-    warning: AttentionOrange_1.default,
+    error: icons_1.AttentionRedIcon,
+    info: icons_1.AttentionBlueIcon,
+    warning: icons_1.AttentionOrangeIcon,
 };
 const alertContainers = {
     success: SuccessAlertContainer,
@@ -164,16 +156,13 @@ class AlertMessage extends react_1.default.Component {
         const { isOpen } = this.state;
         const AlertContainer = alertContainers[type];
         const AlertIcon = alertIcons[type];
-        return (isOpen && (react_1.default.createElement(react_sizeme_1.SizeMe, null, ({ size }) => (react_1.default.createElement(AlertContainer, { className: 'alert-message' },
+        return (isOpen && (react_1.default.createElement(react_sizeme_1.SizeMe, null, () => (react_1.default.createElement(AlertContainer, { className: 'alert-message' },
             react_1.default.createElement(InnerContainer, null,
                 react_1.default.createElement(InformativeIcon, null, react_1.default.createElement(AlertIcon, null)),
                 react_1.default.createElement(TextContainer, null, children),
                 dismissButton && (react_1.default.createElement(exports.TextButton, { onClick: dismissButton.action
                         ? dismissButton.action
-                        : this.handleClose }, dismissButton.text))),
-            !hideCloseButton &&
-                ((size.width && size.width >= 900) || !dismissButton) && (react_1.default.createElement(CloseIconButton, { onClick: this.handleClose },
-                react_1.default.createElement(CloseIcon, null))))))));
+                        : this.handleClose }, dismissButton.text))))))));
     }
 }
 exports.AlertMessage = AlertMessage;

package/dist/cjs/components/Avatar.js

@@ -42,9 +42,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
-const AvatarNormal_1 = __importDefault(require("@manuscripts/assets/react/AvatarNormal"));
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("./icons");
 const AvatarContainer = styled_components_1.default.div `
   display: flex;
   align-items: center;
@@ -58,7 +58,7 @@ const RoundedImage = styled_components_1.default.img `
   align-items: center;
   justify-content: center;
 `;
-const StyledAvatar = (0, styled_components_1.default)(AvatarNormal_1.default) `
+const StyledAvatar = (0, styled_components_1.default)(icons_1.AvatarIcon) `
   path {
     fill: ${(props) => props.color || props.theme.colors.text.secondary};
   }

package/dist/cjs/components/Button.js

@@ -248,7 +248,7 @@ exports.RoundIconButton = (0, styled_components_1.default)(exports.IconButton).a
   border-radius: 50%;
   box-sizing: border-box;
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
-  display: inline-block;
+  display: inline-flex;
   height: 40px;
   padding: 0;
   position: relative;
@@ -260,12 +260,6 @@ exports.RoundIconButton = (0, styled_components_1.default)(exports.IconButton).a
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth} !important;
   }
-
-  svg {
-    max-height: 16px;
-    max-width: 16px;
-    vertical-align: middle;
-  }
 `;
 exports.SecondaryIconButton = (0, styled_components_1.default)(exports.IconButton) `
   ${(props) => btnColors(props.theme.colors.text.secondary, props.theme.colors.background.primary, 'transparent', false)}

package/dist/cjs/components/Comments/CommentActions.js

@@ -47,7 +47,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const use_dropdown_1 = require("../../hooks/use-dropdown");
 const Button_1 = require("../Button");
 const Dropdown_1 = require("../Dropdown");
-const dots_icon_1 = __importDefault(require("../icons/dots-icon"));
+const icons_1 = require("../icons");
 const ResolveButton_1 = require("./ResolveButton");
 const CommentActions = ({ id, target, can, isResolved, handleSetResolved, deleteComment, setIsEditing, isOwnComment, isProdNote, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
@@ -71,7 +71,7 @@ const CommentActions = ({ id, target, can, isResolved, handleSetResolved, delete
         canResolve && handleSetResolved && (react_1.default.createElement(ResolveButton_1.ResolveButton, { id: id, resolved: isResolved, resolvedCallback: handleSetResolved, "aria-label": 'resolve comment' })),
         canHandle && (react_1.default.createElement(Dropdown_1.DropdownContainer, { ref: wrapperRef },
             react_1.default.createElement(ActionDropdownButton, { onClick: toggleOpen, className: "note-actions", "aria-label": 'actions list' },
-                react_1.default.createElement(dots_icon_1.default, null)),
+                react_1.default.createElement(icons_1.DotsIcon, null)),
             isOpen && (react_1.default.createElement(Dropdown_1.DropdownList, { direction: 'right', width: 125, height: 96, onClick: toggleOpen },
                 react_1.default.createElement(ActionButton, { onClick: handleRequestEdit }, "Edit"),
                 react_1.default.createElement(ActionButton, { onClick: handleRequestDelete }, "Delete")))))));

package/dist/cjs/components/Comments/CommentBody.js

@@ -1,4 +1,19 @@
 "use strict";
+/*!
+ * © 2020 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -27,12 +42,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommentBody = void 0;
-const AnnotationReply_1 = __importDefault(require("@manuscripts/assets/react/AnnotationReply"));
 const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button");
 const Form_1 = require("../Form");
+const icons_1 = require("../icons");
 const Tooltip_1 = require("../Tooltip");
 exports.CommentBody = react_1.default.memo(({ comment, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
     (0, react_1.useEffect)(() => {
@@ -67,7 +82,7 @@ exports.CommentBody = react_1.default.memo(({ comment, saveComment, deleteCommen
         !isReply && (react_1.default.createElement(CommentFooter, null,
             react_1.default.createElement("span", null,
                 react_1.default.createElement(ActionButton, { hidden: !isProdNote, "data-tooltip-id": `reply-${comment._id}`, onClick: () => handleCreateReply(comment._id), "aria-label": 'reply', className: "reply-button note-actions" },
-                    react_1.default.createElement(AnnotationReply_1.default, null))),
+                    react_1.default.createElement(icons_1.CommentReplyIcon, null))),
             react_1.default.createElement(Tooltip_1.Tooltip, { id: `reply-${comment._id}`, place: "bottom" }, "Reply")))))));
 });
 const CommentFooter = styled_components_1.default.div `

package/dist/cjs/components/Comments/ResolveButton.js

@@ -21,13 +21,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResolveButton = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Button_1 = require("../Button");
-const tick_mark_1 = __importDefault(require("../icons/tick-mark"));
+const icons_1 = require("../icons");
 const Tooltip_1 = require("../Tooltip");
 const ResolveButton = ({ id, resolved, resolvedCallback }) => {
     return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(Button, { resolved: resolved, "data-tooltip-id": id, onClick: resolvedCallback },
-            react_1.default.createElement(tick_mark_1.default, { color: '#353535' })),
+        react_1.default.createElement(Button, { className: resolved ? 'resolved' : '', "data-tooltip-id": id, onClick: resolvedCallback },
+            react_1.default.createElement(icons_1.CommentResolveIcon, null)),
         react_1.default.createElement(Tooltip_1.Tooltip, { id: id, place: "bottom" }, (resolved && 'Unresolve') || 'Resolve')));
 };
 exports.ResolveButton = ResolveButton;
@@ -37,25 +36,27 @@ const Container = styled_components_1.default.div `
   align-items: center;
   margin-right: ${(props) => props.theme.grid.unit};
 `;
-const Button = (0, styled_components_1.default)(Button_1.IconTextButton) `
+const Button = styled_components_1.default.button `
+  display: flex;
+  align-items: center;
   width: 24px;
   height: 24px;
-  box-sizing: border-box;
-  border-radius: 16px;
-  background: ${(props) => (props.resolved && '#f2fbfc') || '#FFFFFF'};
-  border: ${(props) => (props.resolved && '1px solid #bce7f6') || 'none'};
-
-  svg {
-    max-height: 8.5px;
-    max-width: 12px;
-    margin-right: 0;
-  }
+  border-radius: 12px;
+  border: none;
+  background: #ffffff;
+  padding: 0;
+  cursor: pointer;
 
-  path {
-    fill: ${(props) => (props.resolved && '#1a9bc7') || '#353535'};
+  &.resolved {
+    background: #f2fbfc;
+    border: 1px solid #bce7f6;
+    path {
+      fill: #1a9bc7;
+    }
   }
 
-  &:not([disabled]):hover {
+  &:not([disabled]):hover,
+  &:not([disabled]):active {
     path {
       fill: #1a9bc7;
     }

package/dist/cjs/components/ContextMenu.js

@@ -33,20 +33,14 @@ const ContextMenuIconButton = (0, styled_components_1.default)(Button_1.IconButt
     border-color: #f2f2f2;
   }
 `;
-const ContextMenu = ({ actions }) => {
-    const IconSelector = ({ iconName }) => {
-        const icons = {
-            AddComment: icons_1.AddComment,
-            EditIcon: icons_1.EditIcon,
-        };
-        const Icon = icons[iconName];
-        return react_1.default.createElement(Icon, null);
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.IconButtonGroup, null, actions.map((action) => {
-            return (react_1.default.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
-                react_1.default.createElement(IconSelector, { iconName: action.icon }),
-                react_1.default.createElement(Tooltip_1.Tooltip, { id: action.icon, place: "bottom" }, action.label)));
-        }))));
+const icons = {
+    AddComment: icons_1.AddCommentIcon,
+    EditIcon: icons_1.EditIcon,
 };
+const ContextMenu = ({ actions }) => (react_1.default.createElement(Button_1.IconButtonGroup, null, actions.map((action) => {
+    const Icon = icons[action.icon];
+    return (react_1.default.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
+        react_1.default.createElement(Icon, null),
+        react_1.default.createElement(Tooltip_1.Tooltip, { id: action.icon, place: "bottom" }, action.label)));
+})));
 exports.ContextMenu = ContextMenu;

package/dist/cjs/components/Dialog.js

@@ -28,10 +28,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = exports.Category = exports.MessageContainer = exports.DialogModalBody = void 0;
-const AttentionRed_1 = __importDefault(require("@manuscripts/assets/react/AttentionRed"));
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("./Button");
+const icons_1 = require("./icons");
 const StyledModal_1 = require("./StyledModal");
 const TextField_1 = require("./TextField");
 const Icon = styled_components_1.default.div `
@@ -124,7 +124,7 @@ class Dialog extends react_1.default.Component {
             react_1.default.createElement(exports.DialogModalBody, null,
                 react_1.default.createElement(HeaderContainer, null,
                     category === Category.error && (react_1.default.createElement(Icon, null,
-                        react_1.default.createElement(AttentionRed_1.default, null))),
+                        react_1.default.createElement(icons_1.AttentionRedIcon, null))),
                     header),
                 react_1.default.createElement(exports.MessageContainer, null,
                     message,

package/dist/cjs/components/EditorHeader/EditorHeader.js

@@ -53,9 +53,9 @@ const MapUserRole = {
     Editor: Editing,
     Owner: Editing,
     Writer: Editing,
-    Annotator: { label: 'Suggesting', icon: __1.AnnotatorIcon },
-    Viewer: { label: 'Reading', icon: __1.ReadingIcon },
-    Proofer: { label: 'Proofing', icon: __1.AnnotatorIcon },
+    Annotator: { label: 'Suggesting', icon: __1.RoleAnnotatingIcon },
+    Viewer: { label: 'Reading', icon: __1.RoleReadingIcon },
+    Proofer: { label: 'Proofing', icon: __1.RoleAnnotatingIcon },
 };
 const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
     var _a, _b, _c, _d, _e;
@@ -93,7 +93,7 @@ const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userR
     const errorCode = (_d = (_c = (_b = (_a = dialogData.mutationError) === null || _a === void 0 ? void 0 : _a.graphQLErrors) === null || _b === void 0 ? void 0 : _b.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.code.name;
     return (react_1.default.createElement(Wrapper, null,
         goBack && (react_1.default.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
-            react_1.default.createElement(__1.LeftArrow, null),
+            react_1.default.createElement(__1.ArrowLeftIcon, null),
             react_1.default.createElement("span", null, "Dashboard"))),
         handleSnapshot &&
             typeof hasPendingSuggestions == 'boolean' &&

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

@@ -41,7 +41,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const use_dropdown_1 = require("../../hooks/use-dropdown");
 const Dialog_1 = require("../Dialog");
 const Dropdown_1 = require("../Dropdown");
-const dots_icon_1 = __importDefault(require("../icons/dots-icon"));
+const icons_1 = require("../icons");
 const FileManager_1 = require("./FileManager");
 const FileActions = ({ sectionType, handleDownload, handleReplace, handleDetach, move, className, }) => {
     const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
@@ -66,7 +66,7 @@ const FileActions = ({ sectionType, handleDownload, handleReplace, handleDetach,
     };
     return show ? (react_1.default.createElement(Dropdown_1.DropdownContainer, { ref: wrapperRef },
         react_1.default.createElement(exports.ActionsIcon, { onClick: toggleOpen, type: "button", className: "show-on-hover", "data-cy": "file-actions", "aria-label": "Actions", "aria-pressed": isOpen },
-            react_1.default.createElement(dots_icon_1.default, null)),
+            react_1.default.createElement(icons_1.DotsIcon, null)),
         isOpen && (react_1.default.createElement(exports.FileActionDropdownList, { "data-cy": "file-actions-dropdown", direction: "right", className: className, width: 192, top: 5, onClick: toggleOpen },
             showDownload && (react_1.default.createElement(exports.FileAction, { onClick: handleDownload }, "Download")),
             showReplace && (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -7,7 +7,7 @@ exports.FileSectionAlert = exports.FileSectionAlertType = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const AlertMessage_1 = require("../AlertMessage");
-const unknown_format_file_icon_1 = __importDefault(require("../icons/unknown-format-file-icon"));
+const icons_1 = require("../icons");
 const FileContainer_1 = require("./FileContainer");
 const FileName_1 = require("./FileName");
 var FileSectionAlertType;
@@ -26,7 +26,7 @@ const FileSectionAlert = ({ alert }) => {
 exports.FileSectionAlert = FileSectionAlert;
 const FileUploadInProgressAlert = ({ name }) => {
     return (react_1.default.createElement(FileUploadContainer, null,
-        react_1.default.createElement(unknown_format_file_icon_1.default, null),
+        react_1.default.createElement(icons_1.FileUnknownIcon, null),
         react_1.default.createElement(FileUploadNameContainer, null,
             react_1.default.createElement(UploadFileNameText, null, name),
             react_1.default.createElement(FileUploadProgressBar, null))));

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

@@ -5,18 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileTypeIcon = void 0;
 const react_1 = __importDefault(require("react"));
-const corrupted_file_icon_1 = __importDefault(require("../icons/corrupted-file-icon"));
-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 icons_1 = require("../icons");
 const util_1 = require("./util");
 const FileTypeIcon = ({ file }) => {
     if (file.type.id === 'missing') {
-        return react_1.default.createElement(corrupted_file_icon_1.default, { className: "file-icon" });
+        return react_1.default.createElement(icons_1.FileCorruptedIcon, { className: "file-icon" });
     }
     if (file.type.id === 'main-manuscript') {
-        return react_1.default.createElement(document_icon_with_dot_1.default, { className: "file-icon" });
+        return react_1.default.createElement(icons_1.FileMainDocumentIcon, { className: "file-icon" });
     }
     const icon = (0, util_1.getFileIcon)(file);
-    return icon || react_1.default.createElement(unknown_format_file_icon_1.default, { className: "file-icon" });
+    return icon || react_1.default.createElement(icons_1.FileUnknownIcon, { className: "file-icon" });
 };
 exports.FileTypeIcon = FileTypeIcon;

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

@@ -5,18 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isImageFile = exports.getFileTypeIcon = exports.getFileIcon = exports.getFileType = exports.FileType = exports.FileSectionType = void 0;
 const react_1 = __importDefault(require("react"));
-const audio_icon_1 = __importDefault(require("../icons/audio-icon"));
-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"));
-const unknown_format_file_icon_1 = __importDefault(require("../icons/unknown-format-file-icon"));
-const video_icon_1 = __importDefault(require("../icons/video-icon"));
+const icons_1 = require("../icons");
 var FileSectionType;
 (function (FileSectionType) {
     FileSectionType["Inline"] = "Inline files";
@@ -75,43 +64,55 @@ const extension2type = new Map([
     ['txt', FileType.PlainText],
 ]);
 const type2icon = new Map([
-    [FileType.Audio, react_1.default.createElement(audio_icon_1.default, { key: FileType.Audio, className: "file-icon" })],
-    [FileType.Video, react_1.default.createElement(video_icon_1.default, { key: FileType.Video, className: "file-icon" })],
+    [
+        FileType.Audio,
+        react_1.default.createElement(icons_1.FileAudioIcon, { key: FileType.Audio, className: "file-icon" }),
+    ],
+    [
+        FileType.Video,
+        react_1.default.createElement(icons_1.FileVideoIcon, { key: FileType.Video, className: "file-icon" }),
+    ],
     [
         FileType.PlainDocument,
-        react_1.default.createElement(document_icon_1.default, { key: FileType.PlainDocument, color: "#1A9BC7", className: "file-icon" }),
+        react_1.default.createElement(icons_1.FileDocumentIcon, { key: FileType.PlainDocument, color: "#1A9BC7", className: "file-icon" }),
     ],
     [
         FileType.SheetsWorkbooks,
-        react_1.default.createElement(table_icon_1.default, { key: FileType.SheetsWorkbooks, className: "file-icon" }),
+        react_1.default.createElement(icons_1.FileTableIcon, { key: FileType.SheetsWorkbooks, className: "file-icon" }),
     ],
     [
         FileType.Latex,
-        react_1.default.createElement(latex_icon_1.default, { key: FileType.Latex, color: "#1A9BC7", className: "file-icon" }),
+        react_1.default.createElement(icons_1.FileLatexIcon, { key: FileType.Latex, color: "#1A9BC7", className: "file-icon" }),
     ],
     [
         FileType.CodeFile,
-        react_1.default.createElement(code_file_icon_1.default, { key: FileType.CodeFile, className: "file-icon" }),
+        react_1.default.createElement(icons_1.FileCodeIcon, { key: FileType.CodeFile, className: "file-icon" }),
     ],
     [
         FileType.PdfFile,
-        react_1.default.createElement(pdf_file_icon_1.default, { key: FileType.PdfFile, className: "file-icon" }),
+        react_1.default.createElement(icons_1.FilePdfIcon, { key: FileType.PdfFile, className: "file-icon" }),
     ],
     [
         FileType.CompressedFile,
-        react_1.default.createElement(compressed_file_icon_1.default, { key: FileType.CompressedFile, className: "file-icon" }),
+        react_1.default.createElement(icons_1.FileCompressedIcon, { key: FileType.CompressedFile, className: "file-icon" }),
     ],
     [
         FileType.PlainText,
-        react_1.default.createElement(document_icon_1.default, { key: FileType.PlainText, color: "#FFBD26", className: "file-icon" }),
+        react_1.default.createElement(icons_1.FileDocumentIcon, { key: FileType.PlainText, color: "#FFBD26", className: "file-icon" }),
+    ],
+    [
+        FileType.Image,
+        react_1.default.createElement(icons_1.FileImageIcon, { key: FileType.Image, className: "file-icon" }),
+    ],
+    [
+        FileType.Figure,
+        react_1.default.createElement(icons_1.FileFigureIcon, { key: FileType.Figure, className: "file-icon" }),
     ],
-    [FileType.Image, react_1.default.createElement(image_icon_1.default, { key: FileType.Image, className: "file-icon" })],
-    [FileType.Figure, react_1.default.createElement(figure_icon_1.default, { key: FileType.Figure, className: "file-icon" })],
     [
         FileType.GraphicalAbstract,
-        react_1.default.createElement(graphical_abstract_icon_1.default, { key: FileType.GraphicalAbstract, className: "file-icon" }),
+        react_1.default.createElement(icons_1.FileGraphicalAbstractIcon, { key: FileType.GraphicalAbstract, className: "file-icon" }),
     ],
-    [undefined, react_1.default.createElement(unknown_format_file_icon_1.default, { key: undefined, className: "file-icon" })],
+    [undefined, react_1.default.createElement(icons_1.FileUnknownIcon, { key: undefined, className: "file-icon" })],
 ]);
 const getFileType = (file) => {
     const extension = getExtension(file.name);

package/dist/cjs/components/InspectorSection.js

@@ -42,10 +42,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InspectorSection = exports.Field = exports.Subheading = exports.ExpanderButton = void 0;
-const ArrowDownBlue_1 = __importDefault(require("@manuscripts/assets/react/ArrowDownBlue"));
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("./Button");
+const icons_1 = require("./icons");
 const Section = styled_components_1.default.div `
   font-size: ${(props) => props.theme.font.size.normal};
 `;
@@ -64,7 +64,7 @@ const HeadingText = styled_components_1.default.div `
   color: ${(props) => props.theme.colors.text.primary};
   flex: 1;
 `;
-exports.ExpanderButton = (0, styled_components_1.default)(Button_1.IconButton).attrs((props) => ({
+exports.ExpanderButton = (0, styled_components_1.default)(Button_1.IconButton).attrs(() => ({
     size: 20,
     defaultColor: true,
 })) `
@@ -103,7 +103,7 @@ const InspectorSection = ({ title, contentStyles, children, }) => {
             react_1.default.createElement(exports.ExpanderButton, { "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
                     transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
                 } },
-                react_1.default.createElement(ArrowDownBlue_1.default, null))),
+                react_1.default.createElement(icons_1.ArrowDownCircleIcon, null))),
         expanded && children && react_1.default.createElement("div", { style: contentStyles }, children)));
 };
 exports.InspectorSection = InspectorSection;

package/dist/cjs/components/ManuscriptNoteList.js

@@ -1,4 +1,19 @@
 "use strict";
+/*!
+ * © 2020 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -36,7 +51,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabelText = exports.LightRelativeDate = exports.ReplyBodyContainer = exports.NoteBodyContainer = exports.ManuscriptNoteList = void 0;
-const GutterAddIconNormal_1 = __importDefault(require("@manuscripts/assets/react/GutterAddIconNormal"));
 const json_schema_1 = require("@manuscripts/json-schema");
 const transform_1 = require("@manuscripts/transform");
 const react_1 = __importStar(require("react"));
@@ -47,6 +61,7 @@ const Button_1 = require("./Button");
 const Checkbox_1 = require("./Checkbox");
 const CommentTarget_1 = require("./Comments/CommentTarget");
 const CommentWrapper_1 = require("./Comments/CommentWrapper");
+const icons_1 = require("./icons");
 const RelativeDate_1 = require("./RelativeDate");
 exports.ManuscriptNoteList = react_1.default.memo(({ createKeyword, deleteModel, getCollaboratorById, currentUserId, displayName, getKeyword, listCollaborators, listKeywords, notes, noteSource, saveModel, selected, can, }) => {
     const [newComment, setNewComment] = (0, react_1.useState)();
@@ -104,7 +119,7 @@ exports.ManuscriptNoteList = react_1.default.memo(({ createKeyword, deleteModel,
         react_1.default.createElement(ActionHeader, { withAddButton: can.createNotes },
             can.createNotes && (react_1.default.createElement(AddNoteButton, { onClick: handleAddNewNote },
                 "Add ",
-                react_1.default.createElement(GutterAddIconNormal_1.default, null))),
+                react_1.default.createElement(icons_1.AddIcon, null))),
             items.length > 0 && (react_1.default.createElement(Checkbox, null,
                 react_1.default.createElement(Checkbox_1.CheckboxField, { checked: selectResolved, onChange: handleOnSelectChange }),
                 react_1.default.createElement(exports.LabelText, null, "See resolved")))),

package/dist/cjs/components/Menus/Submenu.js

@@ -19,10 +19,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Submenu = exports.SubmenusContainer = exports.Text = void 0;
-const TriangleCollapsed_1 = __importDefault(require("@manuscripts/assets/react/TriangleCollapsed"));
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const menus_1 = require("../../lib/menus");
+const icons_1 = require("../icons");
 const Menus_1 = require("./Menus");
 const Shortcut_1 = require("./Shortcut");
 exports.Text = styled_components_1.default.div `
@@ -70,7 +70,7 @@ const Active = styled_components_1.default.div `
   justify-content: center;
   align-items: center;
 `;
-const Arrow = (0, styled_components_1.default)(TriangleCollapsed_1.default) `
+const Arrow = (0, styled_components_1.default)(icons_1.TriangleCollapsedIcon) `
   margin-left: 8px;
 `;
 const Container = styled_components_1.default.div `

package/dist/cjs/components/NavDropdown.js

@@ -42,12 +42,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavDropdownButton = exports.NavDropdownButtonContainer = exports.NotificationsBadge = exports.NavDropdownToggle = exports.NavDropdownButtonText = exports.NavDropdownSeparator = exports.NavDropdownElement = exports.NavDropdownLink = exports.InvitedBy = exports.NavDropdown = exports.NavDropdownContainer = void 0;
-const ArrowDownUp_1 = __importDefault(require("@manuscripts/assets/react/ArrowDownUp"));
 const react_1 = __importDefault(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importStar(require("styled-components"));
 const Badge_1 = require("./Badge");
 const Button_1 = require("./Button");
+const icons_1 = require("./icons");
 exports.NavDropdownContainer = styled_components_1.default.div `
   position: relative;
   display: inline-flex;
@@ -120,14 +120,10 @@ exports.NavDropdownButtonText = styled_components_1.default.div `
   display: flex;
   margin-right: ${(props) => props.theme.grid.unit}px;
 `;
-exports.NavDropdownToggle = (0, styled_components_1.default)(ArrowDownUp_1.default) `
+exports.NavDropdownToggle = (0, styled_components_1.default)(icons_1.ArrowUpIcon) `
   margin-left: 6px;
   transform: rotate(180deg);
 
-  path {
-    stroke: currentColor;
-  }
-
   &.open {
     transform: rotate(0deg);
   }

package/dist/cjs/components/SaveStatus.js

@@ -19,32 +19,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SaveStatus = void 0;
-const AttentionRed_1 = __importDefault(require("@manuscripts/assets/react/AttentionRed"));
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const save_icon_offline_1 = __importDefault(require("./icons/save-icon-offline"));
-const save_icon_saved_1 = __importDefault(require("./icons/save-icon-saved"));
-const save_icon_saving_1 = __importDefault(require("./icons/save-icon-saving"));
+const icons_1 = require("./icons");
 const SaveStatus = ({ status }) => {
     switch (status) {
         case 'offline':
             return (react_1.default.createElement(Container, null,
-                react_1.default.createElement(save_icon_offline_1.default, null),
+                react_1.default.createElement(icons_1.SaveStatusOfflineIcon, null),
                 react_1.default.createElement(Text, null, "Offline")));
         case 'saving':
             return (react_1.default.createElement(Container, null,
                 react_1.default.createElement(RotateContinuous, null,
-                    react_1.default.createElement(save_icon_saving_1.default, null)),
+                    react_1.default.createElement(icons_1.SaveStatusSavingIcon, null)),
                 react_1.default.createElement(Text, null, "Saving\u2026")));
         case 'saved':
             return (react_1.default.createElement(Container, null,
                 react_1.default.createElement(PopPop, null,
-                    react_1.default.createElement(save_icon_saved_1.default, null)),
+                    react_1.default.createElement(icons_1.SaveStatusSavedIcon, null)),
                 react_1.default.createElement(Text, null, "Saved")));
         case 'failed':
             return (react_1.default.createElement(FailedContainer, null,
                 react_1.default.createElement(PopPop, null,
-                    react_1.default.createElement(AttentionRed_1.default, { width: 20, height: 20 })),
+                    react_1.default.createElement(icons_1.AttentionRedIcon, null)),
                 react_1.default.createElement(FailedText, null, "Failed To Save")));
         default:
             return null;