@manuscripts/style-guide 1.12.7-LEAN-3519.0 → 1.12.7-LEAN-2089.0

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

@@ -15,13 +15,12 @@
  */
 import React from 'react';
 import styled from 'styled-components';
-import { IconTextButton } from '../Button';
-import TickMark from '../icons/tick-mark';
+import { CommentResolveIcon } from '../icons';
 import { Tooltip } from '../Tooltip';
 export const ResolveButton = ({ id, resolved, resolvedCallback }) => {
     return (React.createElement(Container, null,
-        React.createElement(Button, { resolved: resolved, "data-tooltip-id": id, onClick: resolvedCallback },
-            React.createElement(TickMark, { color: '#353535' })),
+        React.createElement(Button, { className: resolved ? 'resolved' : '', "data-tooltip-id": id, onClick: resolvedCallback },
+            React.createElement(CommentResolveIcon, null)),
         React.createElement(Tooltip, { id: id, place: "bottom" }, (resolved && 'Unresolve') || 'Resolve')));
 };
 const Container = styled.div `
@@ -30,25 +29,27 @@ const Container = styled.div `
   align-items: center;
   margin-right: ${(props) => props.theme.grid.unit};
 `;
-const Button = styled(IconTextButton) `
+const Button = styled.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/es/components/ContextMenu.js

@@ -16,7 +16,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { IconButton, IconButtonGroup } from './Button';
-import { AddComment, EditIcon } from './icons';
+import { AddCommentIcon, EditIcon } from './icons';
 import { Tooltip } from './Tooltip';
 const ContextMenuIconButton = styled(IconButton) `
   color: #6e6e6e;
@@ -27,19 +27,13 @@ const ContextMenuIconButton = styled(IconButton) `
     border-color: #f2f2f2;
   }
 `;
-export const ContextMenu = ({ actions }) => {
-    const IconSelector = ({ iconName }) => {
-        const icons = {
-            AddComment: AddComment,
-            EditIcon: EditIcon,
-        };
-        const Icon = icons[iconName];
-        return React.createElement(Icon, null);
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(IconButtonGroup, null, actions.map((action) => {
-            return (React.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
-                React.createElement(IconSelector, { iconName: action.icon }),
-                React.createElement(Tooltip, { id: action.icon, place: "bottom" }, action.label)));
-        }))));
+const icons = {
+    AddComment: AddCommentIcon,
+    EditIcon: EditIcon,
 };
+export const ContextMenu = ({ actions }) => (React.createElement(IconButtonGroup, null, actions.map((action) => {
+    const Icon = icons[action.icon];
+    return (React.createElement(ContextMenuIconButton, { key: action.icon, "data-tooltip-id": action.icon, onClick: action.action },
+        React.createElement(Icon, null),
+        React.createElement(Tooltip, { id: action.icon, place: "bottom" }, action.label)));
+})));

package/dist/es/components/Dialog.js

@@ -22,10 +22,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import AttentionRed from '@manuscripts/assets/react/AttentionRed';
 import React from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, PrimaryButton, SecondaryButton } from './Button';
+import { AttentionRedIcon } from './icons';
 import { StyledModal } from './StyledModal';
 import { TextField } from './TextField';
 const Icon = styled.div `
@@ -118,7 +118,7 @@ export class Dialog extends React.Component {
             React.createElement(DialogModalBody, null,
                 React.createElement(HeaderContainer, null,
                     category === Category.error && (React.createElement(Icon, null,
-                        React.createElement(AttentionRed, null))),
+                        React.createElement(AttentionRedIcon, null))),
                     header),
                 React.createElement(MessageContainer, null,
                     message,

package/dist/es/components/EditorHeader/EditorHeader.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
-import { AnnotatorIcon, DropdownContainer, DropdownList, EditIcon, LeftArrow, NavDropdownContainer, NavDropdownToggle, PrimaryButton, ReadingIcon, SaveStatus, SecondaryButton, TextArea, useDropdown, } from '../..';
+import { ArrowLeftIcon, DropdownContainer, DropdownList, EditIcon, NavDropdownContainer, NavDropdownToggle, PrimaryButton, RoleAnnotatingIcon, RoleReadingIcon, SaveStatus, SecondaryButton, TextArea, useDropdown, } from '../..';
 import { ProceedView } from './ProceedView';
 export var DialogState;
 (function (DialogState) {
@@ -24,9 +24,9 @@ const MapUserRole = {
     Editor: Editing,
     Owner: Editing,
     Writer: Editing,
-    Annotator: { label: 'Suggesting', icon: AnnotatorIcon },
-    Viewer: { label: 'Reading', icon: ReadingIcon },
-    Proofer: { label: 'Proofing', icon: AnnotatorIcon },
+    Annotator: { label: 'Suggesting', icon: RoleAnnotatingIcon },
+    Viewer: { label: 'Reading', icon: RoleReadingIcon },
+    Proofer: { label: 'Proofing', icon: RoleAnnotatingIcon },
 };
 export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
     var _a, _b, _c, _d, _e;
@@ -64,7 +64,7 @@ export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions
     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.createElement(Wrapper, null,
         goBack && (React.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
-            React.createElement(LeftArrow, null),
+            React.createElement(ArrowLeftIcon, null),
             React.createElement("span", null, "Dashboard"))),
         handleSnapshot &&
             typeof hasPendingSuggestions == 'boolean' &&

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

@@ -12,7 +12,7 @@ import styled from 'styled-components';
 import { useDropdown } from '../../hooks/use-dropdown';
 import { Category, Dialog } from '../Dialog';
 import { DropdownContainer, DropdownList } from '../Dropdown';
-import DotsIcon from '../icons/dots-icon';
+import { DotsIcon } from '../icons';
 import { PermissionsContext } from './FileManager';
 export const FileActions = ({ sectionType, handleDownload, handleReplace, handleDetach, move, className, }) => {
     const can = useContext(PermissionsContext);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { AlertMessage, AlertMessageType } from '../AlertMessage';
-import UnknownFormatFileIcon from '../icons/unknown-format-file-icon';
+import { FileUnknownIcon } from '../icons';
 import { FileContainer } from './FileContainer';
 import { FileNameText } from './FileName';
 export var FileSectionAlertType;
@@ -19,7 +19,7 @@ export const FileSectionAlert = ({ alert }) => {
 };
 const FileUploadInProgressAlert = ({ name }) => {
     return (React.createElement(FileUploadContainer, null,
-        React.createElement(UnknownFormatFileIcon, null),
+        React.createElement(FileUnknownIcon, null),
         React.createElement(FileUploadNameContainer, null,
             React.createElement(UploadFileNameText, null, name),
             React.createElement(FileUploadProgressBar, null))));

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

@@ -1,15 +1,13 @@
 import React from 'react';
-import CorruptedFileIcon from '../icons/corrupted-file-icon';
-import DocumentIconWithDot from '../icons/document-icon-with-dot';
-import UnknownFormatFileIcon from '../icons/unknown-format-file-icon';
+import { FileCorruptedIcon, FileMainDocumentIcon, FileUnknownIcon, } from '../icons';
 import { getFileIcon } from './util';
 export const FileTypeIcon = ({ file }) => {
     if (file.type.id === 'missing') {
-        return React.createElement(CorruptedFileIcon, { className: "file-icon" });
+        return React.createElement(FileCorruptedIcon, { className: "file-icon" });
     }
     if (file.type.id === 'main-manuscript') {
-        return React.createElement(DocumentIconWithDot, { className: "file-icon" });
+        return React.createElement(FileMainDocumentIcon, { className: "file-icon" });
     }
     const icon = getFileIcon(file);
-    return icon || React.createElement(UnknownFormatFileIcon, { className: "file-icon" });
+    return icon || React.createElement(FileUnknownIcon, { className: "file-icon" });
 };

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

@@ -1,16 +1,5 @@
 import React from 'react';
-import AudioIcon from '../icons/audio-icon';
-import CodeFileIcon from '../icons/code-file-icon';
-import CompressedFileIcon from '../icons/compressed-file-icon';
-import DocumentIcon from '../icons/document-icon';
-import FigureIcon from '../icons/figure-icon';
-import GraphicalAbstractIcon from '../icons/graphical_abstract_icon';
-import ImageIcon from '../icons/image-icon';
-import LatexIcon from '../icons/latex-icon';
-import PdfFileIcon from '../icons/pdf-file-icon';
-import TableIcon from '../icons/table-icon';
-import UnknownFormatFileIcon from '../icons/unknown-format-file-icon';
-import VideoIcon from '../icons/video-icon';
+import { FileAudioIcon, FileCodeIcon, FileCompressedIcon, FileDocumentIcon, FileFigureIcon, FileGraphicalAbstractIcon, FileImageIcon, FileLatexIcon, FilePdfIcon, FileTableIcon, FileUnknownIcon, FileVideoIcon, } from '../icons';
 export var FileSectionType;
 (function (FileSectionType) {
     FileSectionType["Inline"] = "Inline files";
@@ -69,43 +58,55 @@ const extension2type = new Map([
     ['txt', FileType.PlainText],
 ]);
 const type2icon = new Map([
-    [FileType.Audio, React.createElement(AudioIcon, { key: FileType.Audio, className: "file-icon" })],
-    [FileType.Video, React.createElement(VideoIcon, { key: FileType.Video, className: "file-icon" })],
+    [
+        FileType.Audio,
+        React.createElement(FileAudioIcon, { key: FileType.Audio, className: "file-icon" }),
+    ],
+    [
+        FileType.Video,
+        React.createElement(FileVideoIcon, { key: FileType.Video, className: "file-icon" }),
+    ],
     [
         FileType.PlainDocument,
-        React.createElement(DocumentIcon, { key: FileType.PlainDocument, color: "#1A9BC7", className: "file-icon" }),
+        React.createElement(FileDocumentIcon, { key: FileType.PlainDocument, color: "#1A9BC7", className: "file-icon" }),
     ],
     [
         FileType.SheetsWorkbooks,
-        React.createElement(TableIcon, { key: FileType.SheetsWorkbooks, className: "file-icon" }),
+        React.createElement(FileTableIcon, { key: FileType.SheetsWorkbooks, className: "file-icon" }),
     ],
     [
         FileType.Latex,
-        React.createElement(LatexIcon, { key: FileType.Latex, color: "#1A9BC7", className: "file-icon" }),
+        React.createElement(FileLatexIcon, { key: FileType.Latex, color: "#1A9BC7", className: "file-icon" }),
     ],
     [
         FileType.CodeFile,
-        React.createElement(CodeFileIcon, { key: FileType.CodeFile, className: "file-icon" }),
+        React.createElement(FileCodeIcon, { key: FileType.CodeFile, className: "file-icon" }),
     ],
     [
         FileType.PdfFile,
-        React.createElement(PdfFileIcon, { key: FileType.PdfFile, className: "file-icon" }),
+        React.createElement(FilePdfIcon, { key: FileType.PdfFile, className: "file-icon" }),
     ],
     [
         FileType.CompressedFile,
-        React.createElement(CompressedFileIcon, { key: FileType.CompressedFile, className: "file-icon" }),
+        React.createElement(FileCompressedIcon, { key: FileType.CompressedFile, className: "file-icon" }),
     ],
     [
         FileType.PlainText,
-        React.createElement(DocumentIcon, { key: FileType.PlainText, color: "#FFBD26", className: "file-icon" }),
+        React.createElement(FileDocumentIcon, { key: FileType.PlainText, color: "#FFBD26", className: "file-icon" }),
+    ],
+    [
+        FileType.Image,
+        React.createElement(FileImageIcon, { key: FileType.Image, className: "file-icon" }),
+    ],
+    [
+        FileType.Figure,
+        React.createElement(FileFigureIcon, { key: FileType.Figure, className: "file-icon" }),
     ],
-    [FileType.Image, React.createElement(ImageIcon, { key: FileType.Image, className: "file-icon" })],
-    [FileType.Figure, React.createElement(FigureIcon, { key: FileType.Figure, className: "file-icon" })],
     [
         FileType.GraphicalAbstract,
-        React.createElement(GraphicalAbstractIcon, { key: FileType.GraphicalAbstract, className: "file-icon" }),
+        React.createElement(FileGraphicalAbstractIcon, { key: FileType.GraphicalAbstract, className: "file-icon" }),
     ],
-    [undefined, React.createElement(UnknownFormatFileIcon, { key: undefined, className: "file-icon" })],
+    [undefined, React.createElement(FileUnknownIcon, { key: undefined, className: "file-icon" })],
 ]);
 export const getFileType = (file) => {
     const extension = getExtension(file.name);

package/dist/es/components/InspectorSection.js

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import ArrowDownBlue from '@manuscripts/assets/react/ArrowDownBlue';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { IconButton } from './Button';
+import { ArrowDownCircleIcon } from './icons';
 const Section = styled.div `
   font-size: ${(props) => props.theme.font.size.normal};
 `;
@@ -35,7 +35,7 @@ const HeadingText = styled.div `
   color: ${(props) => props.theme.colors.text.primary};
   flex: 1;
 `;
-export const ExpanderButton = styled(IconButton).attrs((props) => ({
+export const ExpanderButton = styled(IconButton).attrs(() => ({
     size: 20,
     defaultColor: true,
 })) `
@@ -74,7 +74,7 @@ export const InspectorSection = ({ title, contentStyles, children, }) => {
             React.createElement(ExpanderButton, { "aria-label": 'Toggle expand section', onClick: () => setExpanded(!expanded), style: {
                     transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
                 } },
-                React.createElement(ArrowDownBlue, null))),
+                React.createElement(ArrowDownCircleIcon, null))),
         expanded && children && React.createElement("div", { style: contentStyles }, children)));
 };
 const Line = styled.hr `

package/dist/es/components/ManuscriptNoteList.js

@@ -1,3 +1,18 @@
+/*!
+ * © 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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,7 +22,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import GutterAddIconNormal from '@manuscripts/assets/react/GutterAddIconNormal';
 import { ObjectTypes, } from '@manuscripts/json-schema';
 import { buildContribution, buildNote } from '@manuscripts/transform';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -18,6 +32,7 @@ import { IconTextButton } from './Button';
 import { CheckboxField, CheckboxLabel } from './Checkbox';
 import { CommentTarget } from './Comments/CommentTarget';
 import { CommentWrapper } from './Comments/CommentWrapper';
+import { AddIcon } from './icons';
 import { RelativeDate } from './RelativeDate';
 export const ManuscriptNoteList = React.memo(({ createKeyword, deleteModel, getCollaboratorById, currentUserId, displayName, getKeyword, listCollaborators, listKeywords, notes, noteSource, saveModel, selected, can, }) => {
     const [newComment, setNewComment] = useState();
@@ -75,7 +90,7 @@ export const ManuscriptNoteList = React.memo(({ createKeyword, deleteModel, getC
         React.createElement(ActionHeader, { withAddButton: can.createNotes },
             can.createNotes && (React.createElement(AddNoteButton, { onClick: handleAddNewNote },
                 "Add ",
-                React.createElement(GutterAddIconNormal, null))),
+                React.createElement(AddIcon, null))),
             items.length > 0 && (React.createElement(Checkbox, null,
                 React.createElement(CheckboxField, { checked: selectResolved, onChange: handleOnSelectChange }),
                 React.createElement(LabelText, null, "See resolved")))),

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

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import TriangleCollapsed from '@manuscripts/assets/react/TriangleCollapsed';
 import React from 'react';
 import styled from 'styled-components';
 import { isMenuSeparator } from '../../lib/menus';
+import { TriangleCollapsedIcon } from '../icons';
 import { Block, BlockItem, bulletListContextMenu, Label, ListContainer, orderedListContextMenu, StyleBlock, } from './Menus';
 import { Shortcut } from './Shortcut';
 export const Text = styled.div `
@@ -64,7 +64,7 @@ const Active = styled.div `
   justify-content: center;
   align-items: center;
 `;
-const Arrow = styled(TriangleCollapsed) `
+const Arrow = styled(TriangleCollapsedIcon) `
   margin-left: 8px;
 `;
 const Container = styled.div `

package/dist/es/components/NavDropdown.js

@@ -13,12 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import ArrowDownUp from '@manuscripts/assets/react/ArrowDownUp';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 import { Badge } from './Badge';
 import { SecondaryButton } from './Button';
+import { ArrowUpIcon } from './icons';
 export const NavDropdownContainer = styled.div `
   position: relative;
   display: inline-flex;
@@ -91,14 +91,10 @@ export const NavDropdownButtonText = styled.div `
   display: flex;
   margin-right: ${(props) => props.theme.grid.unit}px;
 `;
-export const NavDropdownToggle = styled(ArrowDownUp) `
+export const NavDropdownToggle = styled(ArrowUpIcon) `
   margin-left: 6px;
   transform: rotate(180deg);
 
-  path {
-    stroke: currentColor;
-  }
-
   &.open {
     transform: rotate(0deg);
   }

package/dist/es/components/SaveStatus.js

@@ -13,32 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import AttentionRed from '@manuscripts/assets/react/AttentionRed';
 import React from 'react';
 import styled from 'styled-components';
-import SaveIconOffline from './icons/save-icon-offline';
-import SaveIconSaved from './icons/save-icon-saved';
-import SaveIconSaving from './icons/save-icon-saving';
+import { AttentionRedIcon, SaveStatusOfflineIcon, SaveStatusSavedIcon, SaveStatusSavingIcon, } from './icons';
 export const SaveStatus = ({ status }) => {
     switch (status) {
         case 'offline':
             return (React.createElement(Container, null,
-                React.createElement(SaveIconOffline, null),
+                React.createElement(SaveStatusOfflineIcon, null),
                 React.createElement(Text, null, "Offline")));
         case 'saving':
             return (React.createElement(Container, null,
                 React.createElement(RotateContinuous, null,
-                    React.createElement(SaveIconSaving, null)),
+                    React.createElement(SaveStatusSavingIcon, null)),
                 React.createElement(Text, null, "Saving\u2026")));
         case 'saved':
             return (React.createElement(Container, null,
                 React.createElement(PopPop, null,
-                    React.createElement(SaveIconSaved, null)),
+                    React.createElement(SaveStatusSavedIcon, null)),
                 React.createElement(Text, null, "Saved")));
         case 'failed':
             return (React.createElement(FailedContainer, null,
                 React.createElement(PopPop, null,
-                    React.createElement(AttentionRed, { width: 20, height: 20 })),
+                    React.createElement(AttentionRedIcon, null)),
                 React.createElement(FailedText, null, "Failed To Save")));
         default:
             return null;

package/dist/es/components/TableFootnotesSelector.js

@@ -13,12 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import AddedIcon from '@manuscripts/assets/react/AddedIcon';
-import AddIcon from '@manuscripts/assets/react/AddIcon';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, } from './Button';
-import { TemplateIcon } from './icons/template-icon';
+import { AddedIcon, AddIcon, AddNewIcon } from './icons';
 const NotesContainer = styled.div `
   height: 90vh;
   max-height: 400px;
@@ -81,7 +79,7 @@ export const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert,
         React.createElement(Actions, null,
             React.createElement(AddNewFootnote, null,
                 React.createElement(IconTextButton, { onClick: onAdd },
-                    React.createElement(TemplateIcon, null),
+                    React.createElement(AddNewIcon, null),
                     "Add new")),
             React.createElement(ButtonGroup, null,
                 React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
@@ -108,7 +106,7 @@ const footnoteItem = (note, isSelected, onSelect) => {
     var _a;
     const { node, index } = note;
     return (React.createElement(FootnoteItem, { onClick: () => onSelect(node), key: node.attrs.id },
-        React.createElement(StatusIcon, null, isSelected(node) ? (React.createElement(AddedIcon, { "data-cy": 'plus-icon-ok', width: 24, height: 24 })) : (React.createElement(AddIcon, { "data-cy": 'plus-icon', width: 24, height: 24 }))),
+        React.createElement(StatusIcon, null, isSelected(node) ? (React.createElement(AddedIcon, { "data-cy": 'plus-icon-ok' })) : (React.createElement(AddIcon, { "data-cy": 'plus-icon' }))),
         React.createElement(NoteText, null, (index ? index + '. ' : '') + ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.textContent))));
 };
 const Separator = styled.div `

package/dist/es/components/icons/add-author.js

@@ -14,12 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-const AddAuthor = (props) => (React.createElement("svg", Object.assign({ width: props.size || 38, height: props.size || 38, viewBox: '0 0 38 38' }, props),
-    React.createElement("defs", null,
-        React.createElement("circle", { id: "add-author-a", cx: 18, cy: 18, r: 18 })),
-    React.createElement("g", { transform: "translate(1 1)", fill: "none", fillRule: "evenodd" },
-        React.createElement("mask", { id: "add-author-b", fill: "#fff" },
-            React.createElement("use", { xlinkHref: "#add-author-a" })),
-        React.createElement("use", { className: 'add-author-path', fill: props.color || '#FDCD47', xlinkHref: "#add-author-a" }),
-        React.createElement("path", { d: "M17.305 16.793v-5.6a.7.7 0 0 1 1.4 0v5.6h5.6a.7.7 0 0 1 0 1.4h-5.6v5.6a.7.7 0 0 1-1.4 0v-5.6h-5.6a.7.7 0 0 1 0-1.4h5.6z", stroke: "#FFF", fill: "#FFF", mask: "url(#add-author-b)" }))));
-export default AddAuthor;
+const AddAuthorIcon = (props) => (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("rect", { width: "24", height: "24", rx: "12", fill: "#0D79D0" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.5 8C12.2515 8 12.05 8.20147 12.05 8.45V12.05H8.45C8.20147 12.05 8 12.2515 8 12.5C8 12.7485 8.20147 12.95 8.45 12.95H12.05V16.55C12.05 16.7985 12.2515 17 12.5 17C12.7485 17 12.95 16.7985 12.95 16.55V12.95H16.55C16.7985 12.95 17 12.7485 17 12.5C17 12.2515 16.7985 12.05 16.55 12.05H12.95V8.45C12.95 8.20147 12.7485 8 12.5 8Z", fill: "white" }),
+    React.createElement("path", { d: "M12.05 12.05V12.55H12.55V12.05H12.05ZM12.05 12.95H12.55V12.45H12.05V12.95ZM12.95 12.95V12.45H12.45V12.95H12.95ZM12.95 12.05H12.45V12.55H12.95V12.05ZM12.55 8.45C12.55 8.47761 12.5276 8.5 12.5 8.5V7.5C11.9753 7.5 11.55 7.92533 11.55 8.45H12.55ZM12.55 12.05V8.45H11.55V12.05H12.55ZM8.45 12.55H12.05V11.55H8.45V12.55ZM8.5 12.5C8.5 12.5276 8.47761 12.55 8.45 12.55V11.55C7.92533 11.55 7.5 11.9753 7.5 12.5H8.5ZM8.45 12.45C8.47761 12.45 8.5 12.4724 8.5 12.5H7.5C7.5 13.0247 7.92533 13.45 8.45 13.45V12.45ZM12.05 12.45H8.45V13.45H12.05V12.45ZM12.55 16.55V12.95H11.55V16.55H12.55ZM12.5 16.5C12.5276 16.5 12.55 16.5224 12.55 16.55H11.55C11.55 17.0747 11.9753 17.5 12.5 17.5V16.5ZM12.45 16.55C12.45 16.5224 12.4724 16.5 12.5 16.5V17.5C13.0247 17.5 13.45 17.0747 13.45 16.55H12.45ZM12.45 12.95V16.55H13.45V12.95H12.45ZM16.55 12.45H12.95V13.45H16.55V12.45ZM16.5 12.5C16.5 12.4724 16.5224 12.45 16.55 12.45V13.45C17.0747 13.45 17.5 13.0247 17.5 12.5H16.5ZM16.55 12.55C16.5224 12.55 16.5 12.5276 16.5 12.5H17.5C17.5 11.9753 17.0747 11.55 16.55 11.55V12.55ZM12.95 12.55H16.55V11.55H12.95V12.55ZM12.45 8.45V12.05H13.45V8.45H12.45ZM12.5 8.5C12.4724 8.5 12.45 8.47761 12.45 8.45H13.45C13.45 7.92533 13.0247 7.5 12.5 7.5V8.5Z", fill: "white" })));
+export default AddAuthorIcon;

package/dist/es/components/icons/{add-comment-icon.js → add-comment.js}

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 import React from 'react';
-const AddComment = () => (React.createElement("svg", { width: "20", height: "15", viewBox: "0 0 20 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+const AddCommentIcon = (props) => (React.createElement("svg", Object.assign({ width: "20", height: "15", viewBox: "0 0 20 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.94841 4.18359C7.98238 3.96069 8 3.7324 8 3.5C8 3.22122 7.97465 2.94836 7.92613 2.68359H13.5C14.8854 2.68359 16.25 3.64298 16.25 5.10026V9.02502L19.1086 12.9954C19.2731 13.2238 19.2958 13.525 19.1675 13.7755C19.0392 14.026 18.7814 14.1836 18.5 14.1836H5.5C4.11463 14.1836 2.75 13.2242 2.75 11.7669V7.93778C2.9939 7.9787 3.24446 8 3.5 8C3.75553 8 4.00609 7.9787 4.25 7.93778V11.7669C4.25 12.1513 4.67537 12.6836 5.5 12.6836H17.0358L14.8913 9.70516C14.7994 9.57751 14.75 9.42421 14.75 9.26693V5.10026C14.75 4.71587 14.3246 4.18359 13.5 4.18359H7.94841Z", fill: "#FFBD26" }),
     React.createElement("path", { d: "M11.5 7H8.5", stroke: "#FFBD26", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M12 10H7", stroke: "#FFBD26", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M3.5 1L3.5 6", stroke: "#FFBD26", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
     React.createElement("path", { d: "M6 3.5L1 3.5", stroke: "#FFBD26", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
-export default AddComment;
+export default AddCommentIcon;

package/dist/es/components/icons/{template-icon.js → add-new.js}

@@ -1,4 +1,5 @@
 import React from 'react';
-export const TemplateIcon = () => (React.createElement("svg", { width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+const AddNewIcon = (props) => (React.createElement("svg", Object.assign({ width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React.createElement("rect", { x: "1.25", y: "1.25", width: "13.5", height: "15.5", rx: "1.75", fill: "white", stroke: "#6E6E6E", strokeWidth: "1.5" }),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 6.5C9 6.08579 8.66421 5.75 8.25 5.75H7.25V4.75C7.25 4.33579 6.91421 4 6.5 4C6.08579 4 5.75 4.33579 5.75 4.75V5.75H4.75C4.33579 5.75 4 6.08579 4 6.5C4 6.91421 4.33579 7.25 4.75 7.25H5.75V8.25C5.75 8.66421 6.08579 9 6.5 9C6.91421 9 7.25 8.66421 7.25 8.25V7.25H8.25C8.66421 7.25 9 6.91421 9 6.5Z", fill: "#6E6E6E" })));
+export default AddNewIcon;

package/dist/es/components/icons/add.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const AddIcon = (props) => (React.createElement("svg", Object.assign({ width: "22", height: "24", viewBox: "0 0 22 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.55064 0.720124C10.0717 -0.134581 11.9283 -0.134583 13.4494 0.720123L19.4494 4.0916C21.0248 4.97688 22 6.64341 22 8.45057V14.9612C22 16.7684 21.0248 18.4349 19.4494 19.3202L13.4494 22.6916C11.9283 23.5463 10.0717 23.5463 8.55064 22.6916L2.55064 19.3202C0.975165 18.4349 0 16.7684 0 14.9612L0 8.45057C0 6.64341 0.975162 4.97688 2.55064 4.0916L8.55064 0.720124Z", fill: "#FFBD26" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.0039 5.96533C10.7002 5.96533 10.4539 6.21158 10.4539 6.51533V10.783H6.0392C5.74357 10.783 5.50391 11.0226 5.50391 11.3183C5.50391 11.6139 5.74357 11.8536 6.0392 11.8536H10.4539V16.1212C10.4539 16.425 10.7002 16.6712 11.0039 16.6712C11.3077 16.6712 11.5539 16.425 11.5539 16.1212V11.8536H15.9686C16.2642 11.8536 16.5039 11.6139 16.5039 11.3183C16.5039 11.0226 16.2642 10.783 15.9686 10.783H11.5539V6.51533C11.5539 6.21158 11.3077 5.96533 11.0039 5.96533Z", fill: "white" }),
+    React.createElement("path", { d: "M10.4539 10.783V11.283H10.9539V10.783H10.4539ZM10.4539 11.8536H10.9539V11.3536H10.4539V11.8536ZM11.5539 11.8536V11.3536H11.0539V11.8536H11.5539ZM11.5539 10.783H11.0539V11.283H11.5539V10.783ZM10.9539 6.51533C10.9539 6.48772 10.9763 6.46533 11.0039 6.46533V5.46533C10.424 5.46533 9.95391 5.93543 9.95391 6.51533H10.9539ZM10.9539 10.783V6.51533H9.95391V10.783H10.9539ZM6.0392 11.283H10.4539V10.283H6.0392V11.283ZM6.00391 11.3183C6.00391 11.2988 6.01971 11.283 6.0392 11.283V10.283C5.46742 10.283 5.00391 10.7465 5.00391 11.3183H6.00391ZM6.0392 11.3536C6.01971 11.3536 6.00391 11.3378 6.00391 11.3183H5.00391C5.00391 11.89 5.46742 12.3536 6.0392 12.3536V11.3536ZM10.4539 11.3536H6.0392V12.3536H10.4539V11.3536ZM10.9539 16.1212V11.8536H9.95391V16.1212H10.9539ZM11.0039 16.1712C10.9763 16.1712 10.9539 16.1488 10.9539 16.1212H9.95391C9.95391 16.7011 10.424 17.1712 11.0039 17.1712V16.1712ZM11.0539 16.1212C11.0539 16.1488 11.0315 16.1712 11.0039 16.1712V17.1712C11.5838 17.1712 12.0539 16.7011 12.0539 16.1212H11.0539ZM11.0539 11.8536V16.1212H12.0539V11.8536H11.0539ZM15.9686 11.3536H11.5539V12.3536H15.9686V11.3536ZM16.0039 11.3183C16.0039 11.3378 15.9881 11.3536 15.9686 11.3536V12.3536C16.5404 12.3536 17.0039 11.89 17.0039 11.3183H16.0039ZM15.9686 11.283C15.9881 11.283 16.0039 11.2988 16.0039 11.3183H17.0039C17.0039 10.7465 16.5404 10.283 15.9686 10.283V11.283ZM11.5539 11.283H15.9686V10.283H11.5539V11.283ZM11.0539 6.51533V10.783H12.0539V6.51533H11.0539ZM11.0039 6.46533C11.0315 6.46533 11.0539 6.48772 11.0539 6.51533H12.0539C12.0539 5.93543 11.5838 5.46533 11.0039 5.46533V6.46533Z", fill: "white" })));
+export default AddIcon;

package/dist/es/components/icons/added.js

@@ -0,0 +1,5 @@
+import React from 'react';
+const AddedIcon = (props) => (React.createElement("svg", Object.assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.538 0.721074L18.6149 3.57386C20.1857 4.45652 21.1534 6.08774 21.1534 7.85305V13.5586C21.1534 15.3239 20.1857 16.9552 18.6149 17.8378L13.538 20.6906C11.9672 21.5733 10.0319 21.5733 8.46109 20.6906L3.38416 17.8378C1.81336 16.9552 0.845703 15.3239 0.845703 13.5586V7.85305C0.845703 6.08774 1.81336 4.45652 3.38416 3.57386L8.46109 0.721074C10.0319 -0.161582 11.9672 -0.161582 13.538 0.721074Z", fill: "#80BE86" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.83268 10.9309C7.49327 10.6199 6.94679 10.6344 6.62336 10.9522L6.53347 11.0406C6.20499 11.3634 6.21569 11.8788 6.55357 12.1884L9.46864 14.8597L16.5368 8.29962C16.8769 7.98396 16.8719 7.47082 16.5372 7.16418L16.4442 7.07895C16.1044 6.76753 15.5537 6.76749 15.2148 7.07833L9.42434 12.3895L7.83268 10.9309Z", fill: "white" })));
+export default AddedIcon;

package/dist/es/components/icons/arrow-down-circle.js

@@ -0,0 +1,5 @@
+import React from 'react';
+const ArrowDownCircleIcon = (props) => (React.createElement("svg", Object.assign({ width: "19", height: "19", viewBox: "0 0 19 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("path", { d: "M18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52944 18.5 0.5 14.4706 0.5 9.5C0.5 4.52944 4.52944 0.5 9.5 0.5C14.4706 0.5 18.5 4.52944 18.5 9.5Z", stroke: "#E2E2E2" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.3437 8.231C12.7604 7.88994 13.3921 7.93134 13.7545 8.32348C14.117 8.71562 14.073 9.31 13.6562 9.65106L9.56451 13L5.35969 9.70134C4.93548 9.36855 4.87828 8.77516 5.23193 8.37598C5.58557 7.97679 6.21615 7.92296 6.64035 8.25575L9.53703 10.5282L12.3437 8.231Z", fill: "#6E6E6E" })));
+export default ArrowDownCircleIcon;

package/dist/es/components/icons/arrow-down.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const ArrowDownIcon = (props) => (React.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.0625 6L12 6.9375L8 10.9375L4 6.9375L4.9375 6L8 9.0625L11.0625 6Z", fill: "#6E6E6E" })));
+export default ArrowDownIcon;

package/dist/es/components/icons/{left-arrow.js → arrow-left.js}

@@ -1,4 +1,4 @@
 import React from 'react';
-const LeftArrow = () => (React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+const ArrowLeftIcon = (props) => (React.createElement("svg", Object.assign({ width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.769 9.34373C8.11006 9.76045 8.06866 10.3921 7.67652 10.7545C7.28438 11.117 6.69 11.073 6.34894 10.6562L3 6.56451L6.29866 2.35969C6.63145 1.93548 7.22484 1.87828 7.62403 2.23193C8.02321 2.58557 8.07704 3.21615 7.74425 3.64035L5.47182 6.53703L7.769 9.34373Z", fill: "#6E6E6E" })));
-export default LeftArrow;
+export default ArrowLeftIcon;

package/dist/es/components/icons/arrow-up.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const ArrowUpIcon = (props) => (React.createElement("svg", Object.assign({ width: "9", height: "5", viewBox: "0 0 9 5", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.65627 4.769C1.23955 5.11006 0.607922 5.06866 0.24548 4.67652C-0.116961 4.28438 -0.0729634 3.69 0.343752 3.34894L4.43549 7.75526e-07L8.64031 3.29867C9.06452 3.63145 9.12172 4.22484 8.76807 4.62403C8.41443 5.02321 7.78385 5.07704 7.35965 4.74425L4.46297 2.47182L1.65627 4.769Z", fill: "#6E6E6E" })));
+export default ArrowUpIcon;

package/dist/es/components/icons/attach.js

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 import React from 'react';
-const AttachIcon = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+const AttachIcon = (props) => (React.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React.createElement("path", { d: "M8.85683 5.35715L5.85183 8.36215C5.16883 9.04515 5.16883 10.1531 5.85183 10.8371C6.53483 11.5201 7.64283 11.5201 8.32683 10.8371L12.3928 6.77115C13.7598 5.40415 13.7598 3.18815 12.3928 1.82115C11.0258 0.454148 8.80983 0.454148 7.44283 1.82115L3.02383 6.24115C0.973828 8.29115 0.973828 11.6151 3.02383 13.6661C5.07383 15.7161 8.39783 15.7161 10.4488 13.6661L14.5138 9.60015", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
 export default AttachIcon;

package/dist/es/components/icons/attention-blue.js

@@ -0,0 +1,8 @@
+import React from 'react';
+const AttentionBlueIcon = (props) => (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("g", { clipPath: "url(#clip0_62_49)" },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.201 17.799 1.5 12 1.5C6.201 1.5 1.5 6.201 1.5 12C1.5 17.799 6.2 22.5 12 22.5ZM12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.372 24 12 24ZM12 8C11.7348 8 11.4804 7.89464 11.2929 7.70711C11.1054 7.51957 11 7.26522 11 7C11 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 7C13 7.26522 12.8946 7.51957 12.7071 7.70711C12.5196 7.89464 12.2652 8 12 8ZM12.02 18.2C11.7813 18.2 11.5524 18.1052 11.3836 17.9364C11.2148 17.7676 11.12 17.5387 11.12 17.3V10.1C11.12 9.86131 11.2148 9.63239 11.3836 9.4636C11.5524 9.29482 11.7813 9.2 12.02 9.2C12.2587 9.2 12.4876 9.29482 12.6564 9.4636C12.8252 9.63239 12.92 9.86131 12.92 10.1V17.3C12.92 17.5387 12.8252 17.7676 12.6564 17.9364C12.4876 18.1052 12.2587 18.2 12.02 18.2Z", fill: "#1A9BC7" })),
+    React.createElement("defs", null,
+        React.createElement("clipPath", { id: "clip0_62_49" },
+            React.createElement("rect", { width: "24", height: "24", fill: "white" })))));
+export default AttentionBlueIcon;

package/dist/es/components/icons/attention-green.js

@@ -0,0 +1,5 @@
+import React from 'react';
+const AttentionGreenIcon = (props) => (React.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("path", { d: "M11.9998 0C5.38278 0 0 5.3832 0 12C0 18.6168 5.38278 24 11.9998 24C18.6167 24 24 18.6168 24 12C24 5.3832 18.6167 0 11.9998 0ZM11.9998 22.4262C6.2508 22.4262 1.5738 17.749 1.5738 12C1.5738 6.25098 6.25074 1.57386 11.9998 1.57386C17.7488 1.57386 22.426 6.25104 22.426 12C22.4261 17.749 17.7487 22.4262 11.9998 22.4262Z", fill: "#36B260" }),
+    React.createElement("path", { d: "M16.3444 8.07156L10.1565 14.2591L7.65515 11.7583C7.34777 11.4513 6.84983 11.4511 6.54245 11.7585C6.23495 12.066 6.23495 12.564 6.54245 12.8714L9.60023 15.9287C9.75389 16.0822 9.95519 16.159 10.1565 16.159C10.3578 16.159 10.5596 16.0822 10.7132 15.9284L10.7149 15.9263L17.457 9.18426C17.7645 8.87706 17.7645 8.3787 17.457 8.0715C17.1497 7.76412 16.6514 7.76412 16.3444 8.07156Z", fill: "#36B260" })));
+export default AttentionGreenIcon;