@manuscripts/body-editor 3.8.5 → 3.8.7

package/dist/cjs/components/ChangeHandlingForm.js

@@ -42,10 +42,11 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ChangeHandlingForm = (props) => {
     const { values } = (0, formik_1.useFormikContext)();
+    const { onChange, id, formRef, children, ...formProps } = props;
     (0, react_1.useEffect)(() => {
-        props.onChange?.(values);
-    }, [props.onChange, values]);
-    return (react_1.default.createElement(exports.FlexForm, { id: props.id, ref: props.formRef }, props.children));
+        onChange?.(values);
+    }, [onChange, values]);
+    return (react_1.default.createElement(exports.FlexForm, { id: id, ref: formRef, ...formProps }, children));
 };
 exports.ChangeHandlingForm = ChangeHandlingForm;
 exports.FlexForm = (0, styled_components_1.default)(formik_1.Form) `

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

@@ -42,10 +42,6 @@ const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
-const styled_components_2 = require("../references/ReferenceForm/styled-components");
-const Row = styled_components_1.default.div `
-  display: flex;
-`;
 const AffiliationsTextField = (0, styled_components_1.default)(style_guide_1.TextField) `
   border-radius: 0;
   background: transparent;
@@ -73,18 +69,6 @@ const DepartmentTextField = (0, styled_components_1.default)(style_guide_1.TextA
     background: transparent;
   }
 `;
-const FormLabel = styled_components_1.default.legend `
-  &:not(:first-child) {
-    margin-top: 24px;
-  }
-  margin-bottom: 12px;
-  font: ${(props) => props.theme.font.weight.normal}
-    ${(props) => props.theme.font.size.xlarge} /
-    ${(props) => props.theme.font.lineHeight.large}
-    ${(props) => props.theme.font.family.sans};
-  letter-spacing: -0.4px;
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
 const MarginRightTextField = (0, styled_components_1.default)(AffiliationsTextField) `
   margin-right: 4px;
 `;
@@ -97,32 +81,45 @@ const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
         };
     }
     const formRef = (0, react_1.useRef)(null);
-    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true }, () => (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "affiliation-form" },
-        react_1.default.createElement(FormLabel, null, "Institution*"),
-        react_1.default.createElement(Row, null,
-            react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(styled_components_2.Label, { htmlFor: "institution", className: "sr-only" }, "Institution Name"),
-                react_1.default.createElement(AffiliationsTextField, { id: "institution", placeholder: "Institution Name", ...props.field }))))),
-        react_1.default.createElement(FormLabel, null, "Details"),
-        react_1.default.createElement(Row, null,
+    const validateAffiliation = (values) => {
+        const errors = {};
+        if (!values.institution?.trim()) {
+            errors.institution = 'Institution Name is required';
+        }
+        return errors;
+    };
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
+        react_1.default.createElement(style_guide_1.FormLabel, null, "Institution*"),
+        react_1.default.createElement(style_guide_1.FormRow, null,
+            react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => {
+                const hasError = formik.touched.institution && formik.errors.institution;
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(style_guide_1.Label, { htmlFor: "institution" }, "Institution Name"),
+                    react_1.default.createElement(AffiliationsTextField, { id: "institution", ...props.field, error: hasError }),
+                    hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, formik.errors.institution))));
+            })),
+        react_1.default.createElement(style_guide_1.FormLabel, null, "Details"),
+        react_1.default.createElement(style_guide_1.FormRow, null,
             react_1.default.createElement(formik_1.Field, { name: "department" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(styled_components_2.Label, { htmlFor: "department", className: "sr-only" }, "Department"),
-                react_1.default.createElement(DepartmentTextField, { id: "department", placeholder: "Department", ...props.field }))))),
-        react_1.default.createElement(Row, null,
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: "department" }, "Department"),
+                react_1.default.createElement(DepartmentTextField, { id: "department", ...props.field }))))),
+        react_1.default.createElement(style_guide_1.FormRow, null,
             react_1.default.createElement(formik_1.Field, { name: "addressLine1" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(styled_components_2.Label, { htmlFor: "addressLine1", className: "sr-only" }, "Street Address"),
-                react_1.default.createElement(AffiliationsTextField, { 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(MarginRightTextField, { id: "city", placeholder: "City", "aria-label": "City", ...props.field }))),
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: "addressLine1" }, "Street Address"),
+                react_1.default.createElement(AffiliationsTextField, { id: "addressLine1", ...props.field }))))),
+        react_1.default.createElement(style_guide_1.FormRow, null,
+            react_1.default.createElement(formik_1.Field, { name: "city" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: "city" }, "City"),
+                react_1.default.createElement(MarginRightTextField, { id: "city", ...props.field })))),
             react_1.default.createElement(formik_1.Field, { name: "county" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(styled_components_2.Label, { htmlFor: "county", className: "sr-only" }, "State / Province"),
-                react_1.default.createElement(AffiliationsTextField, { id: "county", placeholder: "State / Province", ...props.field }))))),
-        react_1.default.createElement(Row, null,
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: "county" }, "State / Province"),
+                react_1.default.createElement(AffiliationsTextField, { id: "county", ...props.field }))))),
+        react_1.default.createElement(style_guide_1.FormRow, null,
             react_1.default.createElement(formik_1.Field, { name: "postCode" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(styled_components_2.Label, { htmlFor: "postCode", className: "sr-only" }, "Postal Code"),
-                react_1.default.createElement(MarginRightTextField, { id: "postCode", placeholder: "Postal Code", ...props.field })))),
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: "postCode" }, "Postal Code"),
+                react_1.default.createElement(MarginRightTextField, { id: "postCode", ...props.field })))),
             react_1.default.createElement(formik_1.Field, { name: "country" }, ({ field }) => (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(styled_components_2.Label, { htmlFor: "country", className: "sr-only" }, "Country"),
-                react_1.default.createElement(AffiliationsTextField, { id: "country", placeholder: "Country", ...field })))))))));
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: "country" }, "Country"),
+                react_1.default.createElement(AffiliationsTextField, { id: "country", ...field })))))))));
 };
 exports.AffiliationForm = AffiliationForm;

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

@@ -51,23 +51,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AuthorDetailsForm = exports.CheckboxContainer = exports.Fieldset = exports.LabelText = void 0;
+exports.AuthorDetailsForm = exports.CheckboxContainer = exports.Fieldset = 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");
-const styled_components_2 = require("../references/ReferenceForm/styled-components");
-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};
-  &::before {
-    margin-right: 8px !important;
-  }
-`;
 exports.Fieldset = styled_components_1.default.fieldset `
   padding: 0;
   margin: 0;
@@ -105,39 +94,56 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
             },
         };
     }
-    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef }, () => {
-        return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "author-details-form", formRef: authorFormRef },
+    const validateAuthor = (values) => {
+        const errors = {};
+        if (isEmailRequired && !values.email) {
+            errors.email = 'Email address is required';
+        }
+        else if (values.email &&
+            !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
+            errors.email = 'Invalid email address';
+        }
+        return errors;
+    };
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
+        return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "author-details-form", formRef: authorFormRef, noValidate: true },
             react_1.default.createElement(exports.Fieldset, null,
-                react_1.default.createElement(style_guide_1.TextFieldGroupContainer, null,
+                react_1.default.createElement(style_guide_1.FormRow, null,
                     react_1.default.createElement(formik_1.Field, { name: 'prefix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(styled_components_2.Label, { htmlFor: "prefix", className: "sr-only" }, "Prefix"),
-                        react_1.default.createElement(style_guide_1.TextField, { id: 'prefix', placeholder: 'Prefix', ...props.field })))),
+                        react_1.default.createElement(style_guide_1.Label, { htmlFor: "prefix" }, "Prefix"),
+                        react_1.default.createElement(style_guide_1.TextField, { id: 'prefix', ...props.field }))))),
+                react_1.default.createElement(style_guide_1.FormRow, null,
                     react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.given' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(styled_components_2.Label, { htmlFor: "given-name", className: "sr-only" }, "Given name"),
-                        react_1.default.createElement(style_guide_1.TextField, { id: 'given-name', placeholder: 'Given name', ...props.field })))),
+                        react_1.default.createElement(style_guide_1.Label, { htmlFor: "given-name" }, "Given name"),
+                        react_1.default.createElement(style_guide_1.TextField, { id: 'given-name', ...props.field }))))),
+                react_1.default.createElement(style_guide_1.FormRow, null,
                     react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.family' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(styled_components_2.Label, { htmlFor: "family-name", className: "sr-only" }, "Family name"),
-                        react_1.default.createElement(style_guide_1.TextField, { id: 'family-name', placeholder: 'Family name', ...props.field }))))),
-                react_1.default.createElement(formik_1.Field, { name: 'email', type: 'email' }, (props) => {
-                    const placeholder = isEmailRequired
-                        ? '*Email address (required)'
-                        : 'Email address';
-                    return (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(styled_components_2.Label, { htmlFor: "email", className: "sr-only" }, "Email address"),
-                        react_1.default.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, placeholder: placeholder, ...props.field })));
-                }),
-                react_1.default.createElement(formik_1.Field, { name: 'role' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(styled_components_2.Label, { htmlFor: "role", className: "sr-only" }, "Job Title"),
-                    react_1.default.createElement(style_guide_1.TextField, { id: 'role', placeholder: 'Job Title', ...props.field })))),
+                        react_1.default.createElement(style_guide_1.Label, { htmlFor: "family-name" }, "Family name"),
+                        react_1.default.createElement(style_guide_1.TextField, { id: 'family-name', ...props.field }))))),
+                react_1.default.createElement(style_guide_1.FormRow, null,
+                    react_1.default.createElement(formik_1.Field, { name: 'email', type: 'email' }, (props) => {
+                        const hasError = (0, formik_1.getIn)(formik.touched, 'email') &&
+                            (0, formik_1.getIn)(formik.errors, 'email');
+                        return (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(style_guide_1.Label, { htmlFor: "email" }, isEmailRequired
+                                ? 'Email address (required)'
+                                : 'Email address'),
+                            react_1.default.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
+                            hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'email')))));
+                    })),
+                react_1.default.createElement(style_guide_1.FormRow, null,
+                    react_1.default.createElement(formik_1.Field, { name: 'role' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(style_guide_1.Label, { htmlFor: "role" }, "Job Title"),
+                        react_1.default.createElement(style_guide_1.TextField, { id: 'role', ...props.field }))))),
                 react_1.default.createElement(exports.CheckboxContainer, null,
                     react_1.default.createElement(style_guide_1.CheckboxLabel, null,
                         react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
-                        react_1.default.createElement(exports.LabelText, null, "Corresponding Author"))),
+                        react_1.default.createElement(style_guide_1.LabelText, null, "Corresponding Author"))),
                 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(style_guide_1.FormRow, null,
+                        react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid" }, "ORCID"),
                         react_1.default.createElement(formik_1.Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(styled_components_2.Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
+                            react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
                             react_1.default.createElement(style_guide_1.TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field })))))))));
     }));
 };

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

@@ -355,7 +355,7 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
                                 (isCreatingNewAuthor &&
                                     !showConfirmationDialog &&
                                     !showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
-                        react_1.default.createElement(FormLabel, null, "Details"),
+                        react_1.default.createElement(style_guide_1.FormLabel, null, "Details"),
                         react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: (0, normalize_1.normalizeAuthor)(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles }),
                         react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: AffiliationDrawer_1.AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: react_1.default.createElement(style_guide_1.AddInstitutionIcon, { width: 16, height: 16 }) }),
                         react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: CreditDrawer_1.CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
@@ -398,15 +398,6 @@ const AddAuthorButton = styled_components_1.default.div `
 const ActionTitle = styled_components_1.default.div `
   padding-left: ${(props) => props.theme.grid.unit * 2}px;
 `;
-const FormLabel = styled_components_1.default.legend `
-  margin-bottom: 12px;
-  font: ${(props) => props.theme.font.weight.normal}
-    ${(props) => props.theme.font.size.xlarge} /
-    ${(props) => props.theme.font.lineHeight.large}
-    ${(props) => props.theme.font.family.sans};
-  letter-spacing: -0.4px;
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
 const AuthorForms = styled_components_1.default.div `
   padding-left: ${(props) => props.theme.grid.unit * 3}px;
   padding-right: ${(props) => props.theme.grid.unit * 3}px;

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

@@ -15,7 +15,7 @@ const CreditDrawer = ({ items, selectedItems = [], onSelect, ...drawerProps }) =
                 react_1.default.createElement(style_guide_1.CheckboxField, { id: 'credit-role-' + i, name: item.id, checked: selectedItems?.map((a) => a.id).includes(item.id), onChange: () => {
                         onSelect(item.id);
                     } }),
-                react_1.default.createElement(AuthorDetailsForm_1.LabelText, null, item.vocabTerm))))))));
+                react_1.default.createElement(style_guide_1.LabelText, null, item.vocabTerm))))))));
 };
 exports.CreditDrawer = CreditDrawer;
 const TwoColumnContainer = (0, styled_components_1.default)(style_guide_1.DrawerItemsList) `

package/dist/cjs/components/awards/AwardForm.js

@@ -117,54 +117,36 @@ const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
         }, enableReinitialize: true, validate: validate, validateOnChange: false, innerRef: formRef }, (formik) => {
         return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange },
             react_1.default.createElement(formik_1.Field, { type: "hidden", name: "id" }),
-            react_1.default.createElement(LabelContainer, null,
-                react_1.default.createElement(Label, { htmlFor: 'source' }, "Funder name")),
-            react_1.default.createElement(SearchContainer, null,
-                react_1.default.createElement(SearchIconContainer, null,
-                    react_1.default.createElement(style_guide_1.SearchIcon, null)),
-                react_1.default.createElement(formik_1.Field, { name: "source" }, (props) => (react_1.default.createElement(StyledTextField, { id: "source", placeholder: "Search for funder...", onChange: (e) => {
-                        props.field.onChange(e);
-                        handleFunderSearch(e);
-                    }, value: props.field.value || '', autoFocus: true }))),
-                isLoading && react_1.default.createElement(LoadingText, null, "Loading..."),
-                funders.length > 0 && (react_1.default.createElement(SearchResults, null, funders.map((funder) => (react_1.default.createElement(SearchResultItem, { key: funder.value, onClick: () => {
-                        formik.setFieldValue('source', funder.value);
-                        setFunders([]);
-                    } }, funder.label)))))),
-            formik.errors.source && formik.touched.source && (react_1.default.createElement(ErrorText, null, formik.errors.source)),
-            react_1.default.createElement(LabelContainer, null,
-                react_1.default.createElement(Label, { htmlFor: 'code' }, "Grant number")),
-            react_1.default.createElement(style_guide_1.MultiValueInput, { id: "code", inputType: "text", placeholder: "Enter grant number and press enter", initialValues: values.code ? values.code.split(';') : [], onChange: (newValues) => {
-                    formik.setFieldValue('code', newValues.join(';'));
-                } }),
-            react_1.default.createElement(LabelContainer, null,
-                react_1.default.createElement(Label, { htmlFor: 'recipient' }, "Recipient name")),
-            react_1.default.createElement(formik_1.Field, { name: "recipient" }, (props) => (react_1.default.createElement(style_guide_1.TextField, { id: "recipient", placeholder: "Enter full name", ...props.field }))),
-            react_1.default.createElement(ButtonContainer, null,
-                react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: handleCancel }, "Cancel"),
-                react_1.default.createElement(style_guide_1.PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting }, primaryButtonText))));
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: 'source' }, "Funder name"),
+                react_1.default.createElement(SearchContainer, null,
+                    react_1.default.createElement(SearchIconContainer, null,
+                        react_1.default.createElement(style_guide_1.SearchIcon, null)),
+                    react_1.default.createElement(formik_1.Field, { name: "source" }, (props) => (react_1.default.createElement(StyledTextField, { id: "source", placeholder: "Search for funder...", onChange: (e) => {
+                            props.field.onChange(e);
+                            handleFunderSearch(e);
+                        }, value: props.field.value || '' }))),
+                    isLoading && react_1.default.createElement(LoadingText, null, "Loading..."),
+                    funders.length > 0 && (react_1.default.createElement(SearchResults, null, funders.map((funder) => (react_1.default.createElement(SearchResultItem, { key: funder.value, onClick: () => {
+                            formik.setFieldValue('source', funder.value);
+                            setFunders([]);
+                        } }, funder.label)))))),
+                formik.errors.source && formik.touched.source && (react_1.default.createElement(ErrorText, null, formik.errors.source))),
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: 'code' }, "Grant number"),
+                react_1.default.createElement(style_guide_1.MultiValueInput, { id: "code", inputType: "text", placeholder: "Enter grant number and press enter", initialValues: values.code ? values.code.split(';') : [], onChange: (newValues) => {
+                        formik.setFieldValue('code', newValues.join(';'));
+                    } })),
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: 'recipient' }, "Recipient name"),
+                react_1.default.createElement(formik_1.Field, { name: "recipient" }, (props) => (react_1.default.createElement(style_guide_1.TextField, { id: "recipient", placeholder: "Enter full name", ...props.field })))),
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(style_guide_1.FormActionsBar, null,
+                    react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: handleCancel }, "Cancel"),
+                    react_1.default.createElement(style_guide_1.PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting }, primaryButtonText)))));
     }));
 };
 exports.AwardForm = AwardForm;
-const LabelContainer = styled_components_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: ${(props) => 4 * props.theme.grid.unit}px;
-  margin-bottom: ${(props) => props.theme.grid.unit}px;
-`;
-const Label = styled_components_1.default.label `
-  font-family: ${(props) => props.theme.font.family.sans};
-  font-size: ${(props) => props.theme.font.size.large};
-  display: block;
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
-const ButtonContainer = styled_components_1.default.div `
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-  gap: 8px;
-`;
 const SearchContainer = styled_components_1.default.div `
   position: relative;
   width: 100%;

package/dist/cjs/components/awards/AwardModal.js

@@ -32,30 +32,11 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AwardModal = 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 AwardForm_1 = require("./AwardForm");
-const ModalBody = styled_components_1.default.div `
-  box-sizing: border-box;
-  padding: ${(props) => 6 * props.theme.grid.unit}px;
-  background-color: ${(props) => props.theme.colors.background.primary};
-  width: 480px;
-  max-width: 60vw;
-  max-height: 80vh;
-`;
-const ModalTitle = styled_components_1.default.h2 `
-  font-family: ${(props) => props.theme.font.family.sans};
-  font-size: ${(props) => props.theme.font.size.medium};
-  font-weight: ${(props) => props.theme.font.weight.bold};
-  color: ${(props) => props.theme.colors.text.primary};
-  margin: 0;
-`;
 const normalizeData = (award) => ({
     id: award.id || '',
     source: award.source || '',
@@ -83,8 +64,8 @@ const AwardModal = ({ initialData, onSaveAward, onCancelAward, }) => {
         react_1.default.createElement(style_guide_1.ModalContainer, { "data-cy": "award-modal" },
             react_1.default.createElement(style_guide_1.ModalHeader, null,
                 react_1.default.createElement(style_guide_1.CloseButton, { onClick: handleCancel, "data-cy": "modal-close-button" })),
-            react_1.default.createElement(ModalBody, null,
-                react_1.default.createElement(ModalTitle, null, "Add Funder information"),
+            react_1.default.createElement(style_guide_1.ModalCardBody, { width: 480 },
+                react_1.default.createElement(style_guide_1.ModalTitle, null, "Add Funder information"),
                 react_1.default.createElement(AwardForm_1.AwardForm, { values: normalizedValues, onSave: handleSave, onCancel: handleCancel, onChange: handleChange })))));
 };
 exports.AwardModal = AwardModal;

package/dist/cjs/components/modal-drawer/GenericDrawerGroup.js

@@ -39,9 +39,11 @@ function DrawerGroup({ removeItem, selectedItems, onSelect, items, showDrawer, s
 }
 const DrawerSectionTitle = styled_components_1.default.h3 `
   margin: 0;
-  font-weight: ${(props) => props.theme.font.weight.normal};
-  font-size: ${(props) => props.theme.font.size.large};
-  font-family: ${(props) => props.theme.font.family.sans};
+  padding-bottom: 12px;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.xlarge} /
+    ${(props) => props.theme.font.lineHeight.large}
+    ${(props) => props.theme.font.family.sans};
   color: ${(props) => props.theme.colors.text.secondary};
 `;
 exports.AssignButton = styled_components_1.default.button `

package/dist/cjs/components/references/ImportBibliographyForm.js

@@ -117,19 +117,20 @@ const ImportBibliographyForm = ({ onCancel, onSave, }) => {
         reader.readAsText(file);
     };
     return (react_1.default.createElement("form", { onSubmit: formik.handleSubmit, onReset: formik.handleReset },
-        react_1.default.createElement(DropContainer, { onDrop: handleDrop, onDragOver: (e) => {
-                e.preventDefault();
-                setDragging(true);
-            }, onDragLeave: () => setDragging(false), active: dragging },
-            react_1.default.createElement("input", { id: "file", name: "file", type: "file", onChange: handleFileChange, style: { display: 'none' } }),
-            react_1.default.createElement(Label, { htmlFor: "file" }, "Drag & Drop or Click here to upload a file.")),
-        react_1.default.createElement(LabelContainer, null,
-            react_1.default.createElement(Label, null, "Alternatively, you can directly Copy&Paste below, the text of the bibliography items.")),
-        react_1.default.createElement(style_guide_1.TextArea, { name: "content", rows: 6, value: formik.values.content, onChange: formik.handleChange }),
+        react_1.default.createElement(style_guide_1.FormRow, null,
+            react_1.default.createElement(DropContainer, { onDrop: handleDrop, onDragOver: (e) => {
+                    e.preventDefault();
+                    setDragging(true);
+                }, onDragLeave: () => setDragging(false), active: dragging },
+                react_1.default.createElement("input", { id: "file", name: "file", type: "file", onChange: handleFileChange, style: { display: 'none' } }),
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: "file" }, "Drag & Drop or Click here to upload a file."))),
+        react_1.default.createElement(style_guide_1.FormRow, null,
+            react_1.default.createElement(style_guide_1.Label, { htmlFor: "content" }, "Alternatively, you can directly Copy&Paste below, the text of the bibliography items."),
+            react_1.default.createElement(style_guide_1.TextArea, { id: "content", name: "content", rows: 6, value: formik.values.content, onChange: formik.handleChange })),
         react_1.default.createElement(Preview, null,
             formik.values.err,
             formik.values.data.map((item) => (react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item, key: item.id })))),
-        react_1.default.createElement(ButtonContainer, null,
+        react_1.default.createElement(style_guide_1.FormActionsBar, null,
             react_1.default.createElement(style_guide_1.SecondaryButton, { type: "reset" }, "Cancel"),
             react_1.default.createElement(style_guide_1.PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting || !formik.values.data.length }, "Save"))));
 };
@@ -142,26 +143,6 @@ const Preview = styled_components_1.default.div `
   margin-top: ${(props) => 4 * props.theme.grid.unit}px;
   margin-bottom: ${(props) => props.theme.grid.unit}px;
 `;
-const LabelContainer = styled_components_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: ${(props) => 4 * props.theme.grid.unit}px;
-  margin-bottom: ${(props) => props.theme.grid.unit}px;
-`;
-const Label = styled_components_1.default.label `
-  font-size: ${(props) => props.theme.font.size.normal};
-  line-height: ${(props) => props.theme.font.lineHeight.large};
-  font-family: ${(props) => props.theme.font.family.Lato};
-  display: block;
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
-const ButtonContainer = styled_components_1.default.div `
-  display: flex;
-  justify-content: flex-end;
-  margin-top: ${(props) => 4 * props.theme.grid.unit}px;
-  gap: ${(props) => 2 * props.theme.grid.unit}px;
-`;
 const activeBoxStyle = (0, styled_components_1.css) `
   background: #f2fbfc;
   border: 1px dashed #bce7f6;

package/dist/cjs/components/references/ImportBibliographyModal.js

@@ -94,8 +94,8 @@ const ImportBibliographyModal = ({ onCancel, onSave }) => {
         react_1.default.createElement(style_guide_1.ModalContainer, { "data-cy": "import-bibliography-modal" },
             react_1.default.createElement(style_guide_1.ModalHeader, null,
                 react_1.default.createElement(style_guide_1.CloseButton, { onClick: onCancel, "data-cy": "modal-close-button" })),
-            react_1.default.createElement(ModalBody, null,
-                react_1.default.createElement(ModalTitle, null, "Import Bibliography"),
+            react_1.default.createElement(style_guide_1.ModalCardBody, { width: 640 },
+                react_1.default.createElement(style_guide_1.ModalTitle, null, "Import Bibliography"),
                 react_1.default.createElement("p", null,
                     react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleBibtex }, "BibTex"),
                     ",",
@@ -117,21 +117,6 @@ const ImportBibliographyModal = ({ onCancel, onSave }) => {
                 react_1.default.createElement(Example, { id: "import-example-tooltip", place: "bottom", render: (s) => react_1.default.createElement("pre", null, s.content) })))));
 };
 exports.ImportBibliographyModal = ImportBibliographyModal;
-const ModalBody = styled_components_1.default.div `
-  box-sizing: border-box;
-  padding: ${(props) => 6 * props.theme.grid.unit}px;
-  background-color: ${(props) => props.theme.colors.background.primary};
-  width: 640px;
-  max-width: 60vw;
-  max-height: 80vh;
-`;
-const ModalTitle = styled_components_1.default.h2 `
-  font-family: ${(props) => props.theme.font.family.sans};
-  font-size: ${(props) => props.theme.font.size.medium};
-  font-weight: ${(props) => props.theme.font.weight.bold};
-  color: ${(props) => props.theme.colors.text.primary};
-  margin: 0;
-`;
 const SpanWithExample = styled_components_1.default.span `
   text-decoration: underline dotted;
   text-underline-offset: 4px;

package/dist/cjs/components/references/ReferenceForm/PersonDropDown.js

@@ -52,11 +52,11 @@ const PersonDropDown = (props) => {
             react_1.default.createElement(styled_components_1.RemoveButton, { type: "button", "aria-label": "Delete this editor", onClick: () => remove(index) },
                 react_1.default.createElement(style_guide_1.DeleteIcon, null))),
         isOpen && (react_1.default.createElement(styled_components_1.PersonForm, null,
-            react_1.default.createElement(formik_1.Field, { name: `${prefix}.given`, value: person.given, onChange: onChange }, ({ field }) => (react_1.default.createElement(styled_components_1.NameFieldContainer, null,
-                react_1.default.createElement(styled_components_1.NameField, { ...field, id: field.name, placeholder: 'Given', autoFocus: true }),
-                react_1.default.createElement(styled_components_1.FieldLabel, { htmlFor: field.name }, "Given")))),
-            react_1.default.createElement(formik_1.Field, { name: `${prefix}.family`, value: person.family, onChange: onChange }, ({ field }) => (react_1.default.createElement(styled_components_1.NameFieldContainer, null,
-                react_1.default.createElement(styled_components_1.NameField, { ...field, id: field.name, placeholder: 'Family', autoFocus: true }),
-                react_1.default.createElement(styled_components_1.FieldLabel, { htmlFor: field.name }, "Family"))))))));
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: `${prefix}.given` }, "Given Name"),
+                react_1.default.createElement(formik_1.Field, { name: `${prefix}.given`, id: `${prefix}.given`, value: person.given, onChange: onChange, component: style_guide_1.TextField })),
+            react_1.default.createElement(style_guide_1.FormRow, null,
+                react_1.default.createElement(style_guide_1.Label, { htmlFor: `${prefix}.family` }, "Family Name"),
+                react_1.default.createElement(formik_1.Field, { name: `${prefix}.family`, id: `${prefix}.family`, value: person.family, onChange: onChange, component: style_guide_1.TextField }))))));
 };
 exports.PersonDropDown = PersonDropDown;