@manuscripts/style-guide 0.31.21 → 0.31.23

package/dist/cjs/components/Badge.js

@@ -0,0 +1,29 @@
+"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 });
+exports.Badge = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Badge = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 50px;
+`;

package/dist/cjs/components/Dropdown.js

@@ -13,7 +13,7 @@ exports.DropdownList = styled_components_1.default.div `
   border-radius: 4px;
   box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
   background: ${(props) => props.theme.colors.background.primary};
-  width: ${(props) => props.width}px;
+  width: ${(props) => (props.width ? props.width + 'px' : 'auto')};
   ${(props) => props.height && `height: ${props.height}px`};
   ${(props) => (props.direction === 'right' ? ' right: 0' : 'left : 0')};
   top: ${(props) => props.theme.grid.unit * (props.top || 3)}px;

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

@@ -0,0 +1,202 @@
+"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 __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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediumTextArea = exports.PrimaryButtonSmall = exports.EditorHeader = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const __1 = require("../..");
+const ProceedView_1 = require("./ProceedView");
+const Editing = { label: 'Editing...', icon: __1.EditIcon };
+const MapUserRole = {
+    Editor: Editing,
+    Owner: Editing,
+    Writer: Editing,
+    Annotator: { label: 'Suggesting...', icon: __1.AnnotatorIcon },
+    Viewer: { label: 'Reading...', icon: __1.ReadingIcon },
+};
+const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
+    var _a, _b, _c;
+    const [confirmationDialog, toggleConfirmationDialog] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [noteValue, setNoteValue] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)(undefined);
+    const [selectedTransitionIndex, setSelectedTransitionIndex] = (0, react_1.useState)();
+    const { complete: showComplete, error: submissionError, mutationError, submit, } = submitProceed;
+    (0, react_1.useEffect)(() => {
+        if (submissionError) {
+            setError(submissionError);
+        }
+    }, [submissionError]);
+    const continueDialogAction = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (submission && selectedTransitionIndex && handleSnapshot) {
+            const { status } = submission.currentStep.type.transitions[selectedTransitionIndex];
+            setLoading(true);
+            yield handleSnapshot();
+            yield submit(status.id, noteValue);
+            setLoading(false);
+        }
+    }), [
+        handleSnapshot,
+        selectedTransitionIndex,
+        submission,
+        noteValue,
+        submit,
+    ]);
+    const onTransitionClick = (0, react_1.useCallback)((event) => {
+        toggleConfirmationDialog(true);
+        setSelectedTransitionIndex(event.target.value);
+    }, [setSelectedTransitionIndex, toggleConfirmationDialog]);
+    const onCancelClick = (0, react_1.useCallback)(() => {
+        toggleConfirmationDialog(false);
+        setSelectedTransitionIndex(undefined);
+        setError(undefined);
+    }, [toggleConfirmationDialog, setSelectedTransitionIndex, setError]);
+    const onNoteChange = (0, react_1.useCallback)((event) => setNoteValue(event.target.value), [setNoteValue]);
+    const currentStepTransition = submission === null || submission === void 0 ? void 0 : submission.currentStep.type.transitions;
+    const disable = !currentStepTransition || !canCompleteTask;
+    const errorCode = (_c = (_b = (_a = mutationError === null || mutationError === void 0 ? void 0 : mutationError.graphQLErrors) === null || _a === void 0 ? void 0 : _a.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _b === void 0 ? void 0 : _b.extensions) === null || _c === void 0 ? void 0 : _c.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("span", null, "Dashboard"))),
+        handleSnapshot &&
+            typeof hasPendingSuggestions == 'boolean' &&
+            submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, loading: loading, showComplete: showComplete, noteValue: noteValue, currentStepTransition: currentStepTransition, error: error, nextStepType: submission.nextStep.type, currentStepType: submission.currentStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
+        status && (react_1.default.createElement(ChildWrapper, null,
+            react_1.default.createElement(__1.SaveStatus, { status: status }))),
+        react_1.default.createElement(Spacer, null),
+        react_1.default.createElement(CurrentStepLabel, null, submission.currentStep.type.label),
+        react_1.default.createElement(CurrentActionLablel, null,
+            userRole &&
+                MapUserRole[userRole] &&
+                react_1.default.createElement(MapUserRole[userRole].icon),
+            react_1.default.createElement("span", null, userRole && MapUserRole[userRole].label)),
+        react_1.default.createElement(HelpDropdown, null),
+        errorCode && react_1.default.createElement(ExceptionDialog, { errorCode: errorCode })));
+};
+exports.EditorHeader = EditorHeader;
+const HelpDropdown = () => {
+    const { isOpen, toggleOpen, wrapperRef } = (0, __1.useDropdown)();
+    return (react_1.default.createElement(HelpDropdownContainer, { ref: wrapperRef },
+        react_1.default.createElement(HelpDropdownButton, { onClick: toggleOpen },
+            react_1.default.createElement("span", null, "Help"),
+            react_1.default.createElement(__1.NavDropdownToggle, { className: isOpen ? 'open' : '' })),
+        isOpen && (react_1.default.createElement(__1.DropdownList, { top: 12, direction: "right" },
+            react_1.default.createElement(DropdownItem, null, "Documentation")))));
+};
+const SecondaryButtonSmall = (0, styled_components_1.default)(__1.SecondaryButton) `
+  font-size: inherit;
+  margin-right: ${(props) => props.theme.grid.unit * 2}px;
+  padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
+`;
+const HelpDropdownButton = styled_components_1.default.button `
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
+const HelpDropdownContainer = (0, styled_components_1.default)(__1.DropdownContainer) `
+  border-left: 1px solid #f2f2f2;
+  margin: -${(props) => props.theme.grid.unit * 3}px ${(props) => props.theme.grid.unit * 2}px -${(props) => props.theme.grid.unit * 3}px
+    ${(props) => props.theme.grid.unit * 6}px;
+  padding: ${(props) => props.theme.grid.unit * 4.75}px 0
+    ${(props) => props.theme.grid.unit * 5}px
+    ${(props) => props.theme.grid.unit * 4}px;
+`;
+const DropdownItem = styled_components_1.default.a `
+  color: inherit;
+  display: block;
+  cursor: pointer;
+  text-decoration: none;
+  padding: ${(props) => props.theme.grid.unit * 5}px;
+`;
+exports.PrimaryButtonSmall = (0, styled_components_1.default)(__1.PrimaryButton) `
+  padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
+  padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
+  font-size: inherit;
+`;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  padding: ${(props) => props.theme.grid.unit * 3}px
+    ${(props) => props.theme.grid.unit * 8}px;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  border-bottom: 1px solid #f2f2f2;
+  font-size: 14px;
+
+  ${__1.NavDropdownContainer} + ${__1.NavDropdownContainer} {
+    margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  }
+  ${exports.PrimaryButtonSmall} + ${__1.NavDropdownContainer} {
+    margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  }
+`;
+const CurrentStepLabel = styled_components_1.default.span `
+  background: #f2f2f2;
+  border-radius: ${(props) => props.theme.grid.unit * 1.5}px;
+  padding: ${(props) => props.theme.grid.unit}px;
+`;
+const CurrentActionLablel = styled_components_1.default.span `
+  display: flex;
+  padding: 0 ${(props) => props.theme.grid.unit * 6}px;
+  svg {
+    margin-right: ${(props) => props.theme.grid.unit * 2.5}px;
+  }
+`;
+const ChildWrapper = styled_components_1.default.div `
+  display: inline-flex;
+  margin: 0 2em;
+  flex-direction: row;
+  align-items: center;
+`;
+const Grid = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: max-content auto;
+  gap: 0 ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  background: ${(props) => props.theme.colors.background.secondary};
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`;
+const Line = styled_components_1.default.hr `
+  margin: 5px 0 0 0;
+  flex: 1;
+  border: 1px dashed #c9c9c9;
+`;
+const Spacer = styled_components_1.default.div `
+  flex: auto;
+`;
+exports.MediumTextArea = (0, styled_components_1.default)(__1.TextArea) `
+  padding: 8px;
+  font-size: 1em;
+`;

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

@@ -0,0 +1,172 @@
+"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.ProceedView = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const __1 = require("../..");
+const AlertMessage_1 = require("../AlertMessage");
+const EditorHeader_1 = require("./EditorHeader");
+const DropdownWrapper = ({ disabled, button, primary, children }) => {
+    const { isOpen, toggleOpen, wrapperRef } = (0, __1.useDropdown)();
+    return (react_1.default.createElement(__1.NavDropdownContainer, { id: 'user-dropdown', ref: wrapperRef },
+        react_1.default.createElement(__1.NavDropdownButton, { as: (primary && __1.PrimaryButton) || undefined, disabled: disabled, isOpen: isOpen, onClick: toggleOpen }, button),
+        isOpen && react_1.default.createElement(__1.NavDropdown, { direction: "left" }, children)));
+};
+const StepDetails = ({ icon, label, description, role }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    icon && react_1.default.createElement(TaskStatus, null, icon),
+    react_1.default.createElement(TaskContainer, null,
+        react_1.default.createElement(__1.PrimaryBoldHeading, null, label),
+        react_1.default.createElement(__1.SecondarySmallText, null, description),
+        react_1.default.createElement(__1.SecondarySmallText, null,
+            "Actor: ",
+            role.label))));
+const ProceedView = ({ currentStepTransition, onTransitionClick, disable, loading, showComplete, confirmationDialog, nextStepType, currentStepType, isAnnotator, hasPendingSuggestions, error, noteValue, onNoteChange, onCancelClick, continueDialogAction, message: Message, }) => {
+    const dialogMessages = (0, react_1.useMemo)(() => hasPendingSuggestions && !isAnnotator
+        ? {
+            header: 'The task can not be transitioned to the next step',
+            message: `There are still pending suggestions in the document.
+                It is not possible to complete the task without having them approved or rejected.`,
+            actions: {
+                primary: {
+                    action: onCancelClick,
+                    title: 'Ok',
+                },
+            },
+        }
+        : showComplete
+            ? {
+                header: 'Content reassigned successfully',
+                message: `to the ${nextStepType.label}`,
+                actions: {
+                    primary: {
+                        action: onCancelClick,
+                        title: 'Close',
+                    },
+                },
+            }
+            : {
+                header: 'Are you sure?',
+                message: 'You are about to complete your task. If you confirm, you will no longer be able to make any changes.',
+                actions: {
+                    primary: {
+                        action: continueDialogAction,
+                        title: 'Continue',
+                    },
+                    secondary: {
+                        action: onCancelClick,
+                        title: 'Cancel',
+                    },
+                },
+            }, [
+        showComplete,
+        continueDialogAction,
+        onCancelClick,
+        nextStepType,
+        hasPendingSuggestions,
+        isAnnotator,
+    ]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        (currentStepTransition && (currentStepTransition === null || currentStepTransition === void 0 ? void 0 : currentStepTransition.length) > 1 && (react_1.default.createElement(DropdownWrapper, { button: 'Complete task', disabled: disable, primary: true },
+            react_1.default.createElement(TaskDropdown, null, currentStepTransition &&
+                currentStepTransition.map((transition, index) => (react_1.default.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
+                    react_1.default.createElement("strong", null, transition.type.label),
+                    transition.type.description))))))) || (react_1.default.createElement(EditorHeader_1.PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
+        (loading && (react_1.default.createElement(__1.LoadingOverlay, null,
+            react_1.default.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026")))) || (react_1.default.createElement(__1.Dialog, { isOpen: confirmationDialog && !loading, category: __1.Category.confirmation, header: dialogMessages.header, message: dialogMessages.message, actions: dialogMessages.actions },
+            (showComplete && (react_1.default.createElement(Grid, null,
+                react_1.default.createElement(StepDetails, Object.assign({}, currentStepType, { icon: react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(__1.TaskStepDoneIcon, null),
+                        react_1.default.createElement(Line, null)) })),
+                react_1.default.createElement(StepDetails, Object.assign({}, nextStepType))))) ||
+                ((!hasPendingSuggestions || isAnnotator) && onNoteChange && (react_1.default.createElement(TextAreaWrapper, null,
+                    react_1.default.createElement(EditorHeader_1.MediumTextArea, { value: noteValue, onChange: onNoteChange, rows: 5, placeholder: 'Add any additional comment here...' })))),
+            error && (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.error, hideCloseButton: true }, error))))));
+};
+exports.ProceedView = ProceedView;
+const TaskDropdown = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.grid.unit * 2}px 0;
+`;
+const Task = styled_components_1.default.button `
+  background: transparent;
+  border: none;
+  color: ${(props) => props.theme.colors.text.secondary};
+  cursor: pointer;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.small} /
+    ${(props) => props.theme.font.lineHeight.normal}
+    ${(props) => props.theme.font.family.sans};
+  order: 1;
+  outline: none;
+  padding: ${(props) => props.theme.grid.unit * 2}px
+    ${(props) => props.theme.grid.unit * 4}px;
+  text-align: left;
+  width: ${(props) => props.theme.grid.unit * 66}px;
+
+  &:not([disabled]):hover,
+  &:not([disabled]):focus {
+    background-color: ${(props) => props.theme.colors.button.default.background.hover};
+  }
+
+  strong {
+    color: ${(props) => props.theme.colors.text.primary};
+    display: block;
+    font-size: ${(props) => props.theme.font.size.normal};
+    line-height: ${(props) => props.theme.font.lineHeight.normal};
+  }
+
+  &.happyPath {
+    border-bottom: 1px solid ${(props) => props.theme.colors.border.tertiary};
+    order: 0;
+  }
+`;
+const TextAreaWrapper = styled_components_1.default.div `
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+`;
+const Grid = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: max-content auto;
+  gap: 0 ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  background: ${(props) => props.theme.colors.background.secondary};
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`;
+const Line = styled_components_1.default.hr `
+  margin: 5px 0 0 0;
+  flex: 1;
+  border: 1px dashed #c9c9c9;
+`;
+const TaskStatus = styled_components_1.default.div `
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 5px;
+`;
+const TaskContainer = styled_components_1.default.div `
+  grid-column: 2;
+  margin-bottom: 8px;
+`;

package/dist/cjs/components/LoadingOverlay.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlay = void 0;
+const react_1 = __importDefault(require("react"));
+const react_modal_1 = __importDefault(require("react-modal"));
+const LoadingOverlay = ({ children }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(react_modal_1.default, { isOpen: true, style: {
+            overlay: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: 'white',
+                zIndex: 20,
+            },
+            content: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background: 'white',
+                display: 'flex',
+                flexDirection: 'column',
+                padding: 0,
+                overflow: 'auto',
+                border: 'none',
+            },
+        } },
+        react_1.default.createElement(react_1.default.Fragment, null, children))));
+exports.LoadingOverlay = LoadingOverlay;

package/dist/cjs/components/NavDropdown.js

@@ -0,0 +1,162 @@
+"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;
+    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.NavDropdownButton = exports.NavDropdownButtonContainer = exports.NotificationsBadge = exports.NavDropdownToggle = exports.NavDropdownButtonText = exports.NavDropdownSeparator = exports.NavDropdownElement = exports.NavDropdownLink = exports.InvitedBy = exports.PlaceholderTitle = exports.NavDropdown = exports.NavDropdownContainer = void 0;
+const ArrowDownUp_1 = __importDefault(require("@manuscripts/assets/react/ArrowDownUp"));
+const title_editor_1 = require("@manuscripts/title-editor");
+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");
+exports.NavDropdownContainer = styled_components_1.default.div `
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+`;
+exports.NavDropdown = styled_components_1.default.div `
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  box-shadow: ${(props) => props.theme.shadow.dropShadow};
+  background: ${(props) => props.theme.colors.background.primary};
+  color: ${(props) => props.theme.colors.text.primary};
+  display: flex;
+  flex-direction: column;
+  font-size: ${(props) => props.theme.font.size.normal};
+  font-weight: ${(props) => props.theme.font.weight.normal};
+  max-height: 80vh;
+  max-width: 300px;
+  ${(props) => props.minWidth && 'min-width: ' + props.minWidth + 'px;'}
+  ${(props) => (props.direction === 'right' ? ' right: 0' : 'left : 0')};
+  top: ${(props) => (props.top ? props.top : props.theme.grid.unit * 10)}px;
+  position: absolute;
+  z-index: 10;
+`;
+exports.PlaceholderTitle = (0, styled_components_1.default)(title_editor_1.Title) `
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+exports.InvitedBy = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  font-size: ${(props) => props.theme.font.size.normal};
+  letter-spacing: -0.3px;
+  color: ${(props) => props.theme.colors.text.secondary};
+  clear: both;
+  margin-top: ${(props) => props.theme.grid.unit * 2}px;
+`;
+const commonStyles = (0, styled_components_1.css) `
+  display: flex;
+  justify-content: space-between;
+  padding: ${(props) => props.theme.grid.unit * 3}px
+    ${(props) => props.theme.grid.unit * 3}px;
+  align-items: center;
+  text-decoration: none;
+  white-space: nowrap;
+  color: ${(props) => props.disabled
+    ? props.theme.colors.text.secondary
+    : props.theme.colors.text.primary};
+  pointer-events: ${(props) => (props.disabled ? 'none' : 'unset')};
+
+  &:hover,
+  &:hover ${exports.PlaceholderTitle} {
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+`;
+exports.NavDropdownLink = (0, styled_components_1.default)(react_router_dom_1.NavLink) `
+  ${commonStyles};
+`;
+exports.NavDropdownElement = styled_components_1.default.div `
+  ${commonStyles};
+
+  cursor: pointer;
+
+  &:hover .user-icon-path {
+    fill: ${(props) => props.theme.colors.text.onDark};
+  }
+`;
+exports.NavDropdownSeparator = styled_components_1.default.div `
+  height: 1px;
+  width: 100%;
+  opacity: 0.23;
+  background-color: ${(props) => props.theme.colors.border.primary};
+`;
+exports.NavDropdownButtonText = styled_components_1.default.div `
+  align-items: center;
+  display: flex;
+  margin-right: ${(props) => props.theme.grid.unit}px;
+`;
+exports.NavDropdownToggle = (0, styled_components_1.default)(ArrowDownUp_1.default) `
+  margin-left: 6px;
+  transform: rotate(180deg);
+
+  path {
+    stroke: currentColor;
+  }
+
+  &.open {
+    transform: rotate(0deg);
+  }
+`;
+exports.NotificationsBadge = (0, styled_components_1.default)(Badge_1.Badge) `
+  background-color: ${(props) => props.isOpen
+    ? props.theme.colors.background.success
+    : props.theme.colors.brand.default};
+  color: ${(props) => props.isOpen
+    ? props.theme.colors.text.success
+    : props.theme.colors.text.onDark};
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 9px;
+  margin-left: 4px;
+  max-height: 10px;
+  min-width: 10px;
+  min-height: 10px;
+`;
+exports.NavDropdownButtonContainer = (0, styled_components_1.default)(Button_1.SecondaryButton).attrs((props) => ({
+    selected: props.isOpen,
+})) `
+  .inheritColors path {
+    fill: currentColor;
+    stroke: currentColor;
+  }
+`;
+const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, }) => (react_1.default.createElement(exports.NavDropdownButtonContainer, { as: as, disabled: disabled, onClick: onClick, isOpen: isOpen, className: 'dropdown-toggle' },
+    react_1.default.createElement(exports.NavDropdownButtonText, null, children),
+    !!notificationsCount && (react_1.default.createElement(exports.NotificationsBadge, { isOpen: isOpen }, notificationsCount)),
+    !removeChevron && react_1.default.createElement(exports.NavDropdownToggle, { className: isOpen ? 'open' : '' })));
+exports.NavDropdownButton = NavDropdownButton;

package/dist/cjs/components/SubmissionInspector/BaseInformation.js

@@ -113,7 +113,7 @@ const BaseInformation = ({ submission, handleDateChange, userRole }) => {
         react_1.default.createElement(Label, null, "DOI:"),
         react_1.default.createElement(Value, null, submission.doi),
         react_1.default.createElement(Label, null, "Journal:"),
-        react_1.default.createElement(Value, null, submission.journal.title),
+        react_1.default.createElement(Value, { "data-journal": submission.journal.title }, submission.journal.title),
         react_1.default.createElement(Label, null, "Journal ID:"),
         react_1.default.createElement(Value, null, submission.journal.id),
         submission.author && (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -0,0 +1,11 @@
+"use strict";
+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 AnnotatorIcon = () => (react_1.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M5.5 6.5H12.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("path", { d: "M5.5 9.5H12.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("path", { d: "M16.5 8C16.5 4.41 13.142 1.5 9 1.5C4.858 1.5 1.5 4.41 1.5 8C1.5 11.59 4.858 14.5 9 14.5C9.525 14.5 10.037 14.452 10.532 14.363L14.5 16.5V12.409C15.738 11.25 16.5 9.704 16.5 8Z", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+exports.default = AnnotatorIcon;

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

@@ -0,0 +1,9 @@
+"use strict";
+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 EditIcon = () => (react_1.default.createElement("svg", { className: "inheritColors", viewBox: "0 0 18 18", width: 18, height: 18 },
+    react_1.default.createElement("path", { d: "M15.035 2.964a3.059 3.059 0 00-4.328 0L2.77 10.899a.397.397 0 00-.112.227l-.588 4.355a.396.396 0 00.112.334.402.402 0 00.28.119c.019 0 .036 0 .054-.004l2.624-.354a.4.4 0 00-.107-.792l-2.103.283.41-3.036 3.197 3.196a.39.39 0 00.561 0l7.936-7.933a3.042 3.042 0 00.899-2.166c0-.819-.32-1.587-.899-2.164zm-4.175.976l1.334 1.332-7.243 7.243-1.332-1.333 7.242-7.243v.001zM6.822 14.383L5.52 13.079l7.242-7.243 1.302 1.304-7.241 7.243zm7.797-7.814L11.43 3.381a2.26 2.26 0 011.442-.517 2.258 2.258 0 012.264 2.263 2.25 2.25 0 01-.518 1.442h.001z", fill: "#6E6E6E", stroke: "#6E6E6E", strokeWidth: ".533" })));
+exports.default = EditIcon;