@manuscripts/body-editor 1.7.19-LEAN-3143-1 → 1.7.20

package/dist/cjs/assets.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteIcon = exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
+exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
 exports.editIcon = `
   <svg
     width="14"
@@ -118,49 +118,3 @@ exports.alertIcon = `
     />
   </svg>
 `;
-exports.deleteIcon = `
-  <svg 
-    width="13" 
-    height="15" 
-    viewBox="0 0 13 15" 
-    fill="none" 
-    xmlns="http://www.w3.org/2000/svg"
-  >
-  <path 
-    fill-rule="evenodd" 
-    clip-rule="evenodd" 
-    d="M2.00001 3C2 3.00135 2 3.00269 2 3.00404V13.004C2 13.5563 2.44772 14.004 3 14.004H10C10.5523 14.004 11 13.5563 11 13.004V3.00404C11 3.00269 11 3.00135 11 3C11.5978 3.34581 12 3.99215 12 4.73244V13.004C12 14.1086 11.1046 15.004 10 15.004H3C1.89543 15.004 1 14.1086 1 13.004V4.73244C1 3.99215 1.4022 3.34581 2.00001 3Z" 
-    fill="#C9C9C9"
-  />
-  <path 
-    fill-rule="evenodd" 
-    clip-rule="evenodd" 
-    d="M4.5 0C3.67157 0 3 0.671573 3 1.5V3.5C3 4.32843 3.67157 5 4.5 5H8.5C9.32843 5 10 4.32843 10 3.5V1.5C10 0.671573 9.32843 0 8.5 0H4.5ZM9 1.5C9 1.22386 8.77614 1 8.5 1H4.5C4.22386 1 4 1.22386 4 1.5C4 1.77614 4.22386 2 4.5 2H8.5C8.77614 2 9 1.77614 9 1.5Z" 
-    fill="#C9C9C9"
-  />
-  <rect 
-    y="2" 
-    width="13" 
-    height="3" 
-    rx="1.5" 
-    fill="#C9C9C9"
-  />
-  <path 
-    fill-rule="evenodd" 
-    clip-rule="evenodd" 
-    d="M8 7.5C8 7.22386 8.22386 7 8.5 7C8.77614 7 9 7.22386 9 7.5V11.5C9 11.7761 8.77614 12 8.5 12C8.22386 12 8 11.7761 8 11.5V7.5Z" 
-    fill="#C9C9C9"
-  />
-  <path 
-    fill-rule="evenodd" 
-    clip-rule="evenodd" 
-    d="M4 7.5C4 7.22386 4.22386 7 4.5 7C4.77614 7 5 7.22386 5 7.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V7.5Z" 
-    fill="#C9C9C9"
-  />
-  <path 
-    fill-rule="evenodd" 
-    clip-rule="evenodd" 
-    d="M11.5 3C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4L1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3L11.5 3Z" 
-    fill="white"
-  />
-</svg>`;

package/dist/cjs/components/authors/AffiliationButton.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (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.AffiliationButton = void 0;
+const ArrowDownBlue_1 = __importDefault(require("@manuscripts/assets/react/ArrowDownBlue"));
+const style_guide_1 = require("@manuscripts/style-guide");
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const authors_1 = require("../../lib/authors");
+const AffiliationForm_1 = require("./AffiliationForm");
+const Container = styled_components_1.default.div `
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  background: ${(props) => props.theme.colors.background.primary};
+  margin-bottom: 2px;
+  overflow: hidden;
+`;
+const AffiliationFormContainer = styled_components_1.default.div `
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  margin: 6px 12px 12px;
+  overflow: hidden;
+`;
+const AffiliationLabel = styled_components_1.default.div `
+  margin: 0;
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  padding-right: 0.5rem;
+`;
+const DropdownIndicator = (0, styled_components_1.default)(ArrowDownBlue_1.default) `
+  border: 0;
+  border-radius: 50%;
+  margin-right: 0.6em;
+  min-width: 20px;
+`;
+const ToggleButton = styled_components_1.default.button `
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 1rem;
+  padding: 0.6em 0.5em;
+  outline: none;
+
+  &.open svg {
+    transform: rotateX(180deg);
+  }
+`;
+const RemoveButton = styled_components_1.default.div `
+  cursor: pointer;
+`;
+const AffiliationButton = ({ affiliation, onSave, onRemove, }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(false);
+    const toggleOpen = () => {
+        setOpen((o) => !o);
+    };
+    const handleSave = (values) => {
+        if ((0, lodash_1.isEqual)(values, affiliation)) {
+            return;
+        }
+        const copy = Object.assign(Object.assign({}, affiliation), values);
+        onSave(copy);
+    };
+    return (react_1.default.createElement(Container, null,
+        react_1.default.createElement(AffiliationLabel, null,
+            react_1.default.createElement(ToggleButton, { type: "button", className: isOpen ? 'open' : '', onClick: toggleOpen },
+                react_1.default.createElement(DropdownIndicator, null),
+                (0, authors_1.affiliationLabel)(affiliation)),
+            react_1.default.createElement(RemoveButton, { onClick: onRemove },
+                react_1.default.createElement(style_guide_1.DeleteIcon, null))),
+        isOpen && (react_1.default.createElement(AffiliationFormContainer, null,
+            react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: affiliation, onSave: handleSave })))));
+};
+exports.AffiliationButton = AffiliationButton;

package/dist/cjs/components/authors/AffiliationForm.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AffiliationForm = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const formik_1 = require("formik");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ChangeHandlingForm_1 = require("./ChangeHandlingForm");
+const Row = styled_components_1.default.div `
+  display: flex;
+  border-top: 1px solid ${(props) => props.theme.colors.border.field.default};
+  &:first-child {
+    border-top: none;
+  }
+`;
+const AffiliationsTextField = (0, styled_components_1.default)(style_guide_1.TextField) `
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  &:not(:first-child) {
+    border-left: 1px solid ${(props) => props.theme.colors.border.field.default};
+  }
+
+  &[aria-invalid] {
+    background: ${(props) => props.theme.colors.background.warning};
+  }
+
+  &[aria-invalid]:focus {
+    background: transparent;
+  }
+`;
+const AffiliationForm = ({ values, onSave, }) => {
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave }, () => (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onSave },
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "institution", placeholder: "Institution Name" }, props.field))))),
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "department" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "department", placeholder: "Department" }, props.field))))),
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "addressLine1" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "addressLine1", placeholder: "Street Address" }, props.field))))),
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "city" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "city", placeholder: "City" }, props.field)))),
+            react_1.default.createElement(formik_1.Field, { name: "county" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "county", placeholder: "State / Province" }, props.field))))),
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "postCode" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "postCode", placeholder: "Postal Code" }, props.field)))),
+            react_1.default.createElement(formik_1.Field, { name: "country" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "country", placeholder: "Country" }, props.field)))))))));
+};
+exports.AffiliationForm = AffiliationForm;

package/dist/cjs/components/authors/AuthorActions.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (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.AuthorActions = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const DeleteAuthorConfirmationDialog_1 = require("./DeleteAuthorConfirmationDialog");
+const AuthorActionsContainer = styled_components_1.default.div `
+  display: flex;
+`;
+const RemoveButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+
+  svg {
+    cursor: pointer;
+  }
+`;
+const StyledButtonGroup = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
+  flex: 1;
+`;
+const AuthorActions = ({ author, onSave, onDelete, onCancel, }) => {
+    const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(AuthorActionsContainer, null,
+        react_1.default.createElement(DeleteAuthorConfirmationDialog_1.DeleteAuthorConfirmationDialog, { author: author, isOpen: showDeleteDialog, onDelete: () => {
+                setShowDeleteDialog(true);
+                onDelete();
+            }, onCancel: () => setShowDeleteDialog(false) }),
+        react_1.default.createElement(RemoveButton, { onClick: () => setShowDeleteDialog(true) },
+            react_1.default.createElement(style_guide_1.DeleteIcon, null)),
+        react_1.default.createElement(StyledButtonGroup, null,
+            react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
+            react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: onSave }, "Save"))));
+};
+exports.AuthorActions = AuthorActions;

package/dist/cjs/components/authors/AuthorAffiliations.js

@@ -0,0 +1,116 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (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.AuthorAffiliations = exports.AddAffiliationIndicator = void 0;
+const AddAuthor_1 = __importDefault(require("@manuscripts/assets/react/AddAuthor"));
+const json_schema_1 = require("@manuscripts/json-schema");
+const react_1 = __importStar(require("react"));
+const creatable_1 = __importDefault(require("react-select/creatable"));
+const styled_components_1 = __importStar(require("styled-components"));
+const authors_1 = require("../../lib/authors");
+const AffiliationButton_1 = require("./AffiliationButton");
+const AddAffiliation = (0, styled_components_1.default)(AddAuthor_1.default) `
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+
+  circle,
+  use {
+    fill: ${(props) => props.theme.colors.brand.default};
+  }
+
+  path {
+    mask: none;
+  }
+`;
+const AddAffiliationIndicator = () => react_1.default.createElement(AddAffiliation, null);
+exports.AddAffiliationIndicator = AddAffiliationIndicator;
+const getSelectStyles = (focus, theme) => ({
+    backgroundColor: focus
+        ? theme.colors.background.fifth
+        : theme.colors.background.primary,
+    borderColor: focus
+        ? theme.colors.border.field.active
+        : theme.colors.border.field.default,
+    '&:hover': {
+        backgroundColor: theme.colors.background.fifth,
+    },
+    borderRadius: theme.grid.radius.default,
+    boxShadow: 'none',
+    fontFamily: theme.font.family.sans,
+});
+const AuthorAffiliations = ({ author, affiliations, onSave, onAdd, onRemove, }) => {
+    const theme = (0, react_1.useContext)(styled_components_1.ThemeContext);
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const affiliationMap = (0, react_1.useMemo)(() => new Map(affiliations.map((a) => [a.id, a])), [affiliations]);
+    const authorAffiliations = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.map((i) => affiliationMap.get(i));
+    }, [affiliationMap, author]);
+    const otherAffiliations = (0, react_1.useMemo)(() => {
+        var _a;
+        const copy = new Map(affiliationMap);
+        (_a = author.affiliations) === null || _a === void 0 ? void 0 : _a.forEach((i) => copy.delete(i));
+        return Array.from(copy.values());
+    }, [affiliationMap, author]);
+    const options = otherAffiliations.map((a) => ({
+        value: a.id,
+        label: (0, authors_1.affiliationLabel)(a),
+    }));
+    const handleChange = (id) => {
+        const affiliation = affiliationMap.get(id);
+        if (!affiliation) {
+            return;
+        }
+        onAdd(affiliation);
+        setSearchText('');
+    };
+    const handleCreate = (institution) => {
+        const affiliation = {
+            id: (0, json_schema_1.generateID)(json_schema_1.ObjectTypes.Affiliation),
+            addressLine1: '',
+            city: '',
+            country: '',
+            county: '',
+            department: '',
+            institution: institution,
+            postCode: '',
+            priority: 0,
+        };
+        onSave(affiliation);
+        onAdd(affiliation);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        authorAffiliations.map((a) => (react_1.default.createElement(AffiliationButton_1.AffiliationButton, { key: `${author.id}-${a.id}`, affiliation: a, onSave: onSave, onRemove: () => onRemove(a) }))),
+        react_1.default.createElement(creatable_1.default, { options: options, isMulti: false, isClearable: true, value: null, inputValue: searchText, components: {
+                IndicatorsContainer: exports.AddAffiliationIndicator,
+            }, placeholder: "Begin typing to add affiliation", noOptionsMessage: () => 'Type the name of an institution', onChange: (i) => i && handleChange(i.value), onInputChange: setSearchText, onCreateOption: (v) => v && handleCreate(v), isValidNewOption: (t) => !!t, styles: {
+                control: (provided, state) => (Object.assign(Object.assign({}, provided), getSelectStyles(state.isFocused, theme))),
+            } })));
+};
+exports.AuthorAffiliations = AuthorAffiliations;

package/dist/cjs/components/authors/AuthorDetailsForm.js

@@ -0,0 +1,97 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (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.AuthorDetailsForm = exports.Fieldset = exports.LabelText = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const formik_1 = require("formik");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ChangeHandlingForm_1 = require("./ChangeHandlingForm");
+exports.LabelText = styled_components_1.default.div `
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal} / 1
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.2px;
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+exports.Fieldset = styled_components_1.default.fieldset `
+  padding: 0;
+  margin: 0;
+  border: none;
+`;
+const OrcidContainer = styled_components_1.default.div `
+  margin: 16px 0 0;
+`;
+const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, }) => {
+    const formRef = (0, react_1.useRef)(null);
+    if (actionsRef && !actionsRef.current) {
+        actionsRef.current = {
+            reset: () => {
+                var _a;
+                (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
+            },
+        };
+    }
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: false, innerRef: formRef }, (formik) => {
+        const isAuthor = formik.values.role === 'author';
+        return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange },
+            react_1.default.createElement(exports.Fieldset, null,
+                react_1.default.createElement(style_guide_1.TextFieldGroupContainer, null,
+                    react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.given' }, (props) => (react_1.default.createElement(style_guide_1.TextField, Object.assign({ id: 'given-name', placeholder: 'Given name' }, props.field)))),
+                    react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.family' }, (props) => (react_1.default.createElement(style_guide_1.TextField, Object.assign({ id: 'family-name', placeholder: 'Family name' }, props.field))))),
+                react_1.default.createElement(formik_1.Field, { name: 'email', type: 'email' }, (props) => (react_1.default.createElement(style_guide_1.TextField, Object.assign({ id: 'email', placeholder: 'Email address' }, props.field)))),
+                react_1.default.createElement(style_guide_1.CheckboxLabel, { disabled: !isAuthor },
+                    react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, Object.assign({ id: 'isCorresponding', checked: props.field.value, disabled: !isAuthor }, props.field)))),
+                    react_1.default.createElement(exports.LabelText, null, "Corresponding Author")),
+                react_1.default.createElement(style_guide_1.CheckboxLabel, null,
+                    react_1.default.createElement(formik_1.Field, { name: 'role', type: 'checkbox' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { name: 'role', checked: isAuthor, onChange: (e) => {
+                            formik.setFieldValue(props.field.name, e.target.checked ? 'author' : 'other', false);
+                        } }))),
+                    react_1.default.createElement(exports.LabelText, null, "Include in Authors List")),
+                react_1.default.createElement(OrcidContainer, null,
+                    react_1.default.createElement(style_guide_1.TextFieldLabel, null,
+                        react_1.default.createElement(exports.LabelText, null, "ORCID"),
+                        react_1.default.createElement(formik_1.Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (react_1.default.createElement(style_guide_1.TextField, Object.assign({ id: 'orcid', placeholder: 'https://orcid.org/...' }, props.field)))))))));
+    }));
+};
+exports.AuthorDetailsForm = AuthorDetailsForm;

package/dist/cjs/components/authors/AuthorFormPlaceholder.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthorFormPlaceholder = void 0;
+const ContributorDetailsPlaceholder_1 = __importDefault(require("@manuscripts/assets/react/ContributorDetailsPlaceholder"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const OuterContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  overflow-y: auto;
+`;
+const InnerContainer = styled_components_1.default.div `
+  text-align: center;
+  max-width: 480px;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  line-height: ${(props) => props.theme.font.lineHeight.large};
+`;
+const Placeholder = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  margin-bottom: ${(props) => props.theme.grid.unit * 5}px;
+`;
+const Action = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  font-weight: ${(props) => props.theme.font.weight.medium};
+  letter-spacing: -0.5px;
+`;
+const Message = styled_components_1.default.div `
+  max-width: 400px;
+  font-size: ${(props) => props.theme.font.size.xlarge};
+  margin-top: ${(props) => props.theme.grid.unit * 6}px;
+  font-weight: ${(props) => props.theme.font.weight.light};
+  color: ${(props) => props.theme.colors.text.secondary};
+
+  @media (max-width: 850px) {
+    margin-right: ${(props) => props.theme.grid.unit * 5}px;
+    margin-left: ${(props) => props.theme.grid.unit * 5}px;
+    max-width: 350px;
+  }
+`;
+const AuthorFormPlaceholder = () => (react_1.default.createElement(OuterContainer, { "data-cy": 'author-details' },
+    react_1.default.createElement(InnerContainer, null,
+        react_1.default.createElement(Placeholder, null,
+            react_1.default.createElement(ContributorDetailsPlaceholder_1.default, null)),
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Action, null, "Author Details"),
+            react_1.default.createElement(Message, null, "Select an author from the list to display their details here.")))));
+exports.AuthorFormPlaceholder = AuthorFormPlaceholder;

package/dist/cjs/components/authors/AuthorList.js

@@ -0,0 +1,40 @@
+"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.AuthorList = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const react_dnd_1 = require("react-dnd");
+const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+const styled_components_1 = __importDefault(require("styled-components"));
+const DraggableAuthor_1 = require("./DraggableAuthor");
+const AuthorListContainer = styled_components_1.default.div `
+  flex: 1;
+  overflow-y: visible;
+`;
+const AuthorList = ({ author, authors, onSelect, moveAuthor, }) => {
+    return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend },
+        react_1.default.createElement(AuthorListContainer, null,
+            react_1.default.createElement(style_guide_1.DragLayer, null),
+            authors.map((a) => {
+                return (react_1.default.createElement(DraggableAuthor_1.DraggableAuthor, { key: a.id, author: a, isSelected: a.id === (author === null || author === void 0 ? void 0 : author.id), onClick: () => onSelect(a), moveAuthor: moveAuthor }));
+            }))));
+};
+exports.AuthorList = AuthorList;