@manuscripts/body-editor 3.8.4 → 3.8.6

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

@@ -1,12 +1,8 @@
-import { TextArea, TextField } from '@manuscripts/style-guide';
+import { FormLabel, FormRow, InputErrorText, Label, TextArea, TextField, } from '@manuscripts/style-guide';
 import { Field, Formik } from 'formik';
 import React, { useRef } from 'react';
 import styled from 'styled-components';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
-import { Label } from '../references/ReferenceForm/styled-components';
-const Row = styled.div `
-  display: flex;
-`;
 const AffiliationsTextField = styled(TextField) `
   border-radius: 0;
   background: transparent;
@@ -34,18 +30,6 @@ const DepartmentTextField = styled(TextArea) `
     background: transparent;
   }
 `;
-const FormLabel = styled.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 = styled(AffiliationsTextField) `
   margin-right: 4px;
 `;
@@ -58,31 +42,44 @@ export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
         };
     }
     const formRef = useRef(null);
-    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true }, () => (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form" },
+    const validateAffiliation = (values) => {
+        const errors = {};
+        if (!values.institution?.trim()) {
+            errors.institution = 'Institution Name is required';
+        }
+        return errors;
+    };
+    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
         React.createElement(FormLabel, null, "Institution*"),
-        React.createElement(Row, null,
-            React.createElement(Field, { name: "institution" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "institution", className: "sr-only" }, "Institution Name"),
-                React.createElement(AffiliationsTextField, { id: "institution", placeholder: "Institution Name", ...props.field }))))),
+        React.createElement(FormRow, null,
+            React.createElement(Field, { name: "institution" }, (props) => {
+                const hasError = formik.touched.institution && formik.errors.institution;
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(Label, { htmlFor: "institution" }, "Institution Name"),
+                    React.createElement(AffiliationsTextField, { id: "institution", ...props.field, error: hasError }),
+                    hasError && (React.createElement(InputErrorText, null, formik.errors.institution))));
+            })),
         React.createElement(FormLabel, null, "Details"),
-        React.createElement(Row, null,
+        React.createElement(FormRow, null,
             React.createElement(Field, { name: "department" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "department", className: "sr-only" }, "Department"),
-                React.createElement(DepartmentTextField, { id: "department", placeholder: "Department", ...props.field }))))),
-        React.createElement(Row, null,
+                React.createElement(Label, { htmlFor: "department" }, "Department"),
+                React.createElement(DepartmentTextField, { id: "department", ...props.field }))))),
+        React.createElement(FormRow, null,
             React.createElement(Field, { name: "addressLine1" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "addressLine1", className: "sr-only" }, "Street Address"),
-                React.createElement(AffiliationsTextField, { id: "addressLine1", placeholder: "Street Address", ...props.field }))))),
-        React.createElement(Row, null,
-            React.createElement(Field, { name: "city" }, (props) => (React.createElement(MarginRightTextField, { id: "city", placeholder: "City", "aria-label": "City", ...props.field }))),
+                React.createElement(Label, { htmlFor: "addressLine1" }, "Street Address"),
+                React.createElement(AffiliationsTextField, { id: "addressLine1", ...props.field }))))),
+        React.createElement(FormRow, null,
+            React.createElement(Field, { name: "city" }, (props) => (React.createElement(React.Fragment, null,
+                React.createElement(Label, { htmlFor: "city" }, "City"),
+                React.createElement(MarginRightTextField, { id: "city", ...props.field })))),
             React.createElement(Field, { name: "county" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "county", className: "sr-only" }, "State / Province"),
-                React.createElement(AffiliationsTextField, { id: "county", placeholder: "State / Province", ...props.field }))))),
-        React.createElement(Row, null,
+                React.createElement(Label, { htmlFor: "county" }, "State / Province"),
+                React.createElement(AffiliationsTextField, { id: "county", ...props.field }))))),
+        React.createElement(FormRow, null,
             React.createElement(Field, { name: "postCode" }, (props) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "postCode", className: "sr-only" }, "Postal Code"),
-                React.createElement(MarginRightTextField, { id: "postCode", placeholder: "Postal Code", ...props.field })))),
+                React.createElement(Label, { htmlFor: "postCode" }, "Postal Code"),
+                React.createElement(MarginRightTextField, { id: "postCode", ...props.field })))),
             React.createElement(Field, { name: "country" }, ({ field }) => (React.createElement(React.Fragment, null,
-                React.createElement(Label, { htmlFor: "country", className: "sr-only" }, "Country"),
-                React.createElement(AffiliationsTextField, { id: "country", placeholder: "Country", ...field })))))))));
+                React.createElement(Label, { htmlFor: "country" }, "Country"),
+                React.createElement(AffiliationsTextField, { id: "country", ...field })))))))));
 };

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

@@ -13,22 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { CheckboxField, CheckboxLabel, TextField, TextFieldGroupContainer, TextFieldLabel, } from '@manuscripts/style-guide';
-import { Field, Formik } from 'formik';
+import { CheckboxField, CheckboxLabel, TextField, InputErrorText, Label, FormRow, LabelText, } from '@manuscripts/style-guide';
+import { Field, Formik, getIn, } from 'formik';
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { ChangeHandlingForm } from '../ChangeHandlingForm';
-import { Label } from '../references/ReferenceForm/styled-components';
-export const LabelText = styled.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;
-  }
-`;
 export const Fieldset = styled.fieldset `
   padding: 0;
   margin: 0;
@@ -66,37 +55,54 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
             },
         };
     }
-    return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef }, () => {
-        return (React.createElement(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.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
+        return (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "author-details-form", formRef: authorFormRef, noValidate: true },
             React.createElement(Fieldset, null,
-                React.createElement(TextFieldGroupContainer, null,
+                React.createElement(FormRow, null,
                     React.createElement(Field, { name: 'prefix' }, (props) => (React.createElement(React.Fragment, null,
-                        React.createElement(Label, { htmlFor: "prefix", className: "sr-only" }, "Prefix"),
-                        React.createElement(TextField, { id: 'prefix', placeholder: 'Prefix', ...props.field })))),
+                        React.createElement(Label, { htmlFor: "prefix" }, "Prefix"),
+                        React.createElement(TextField, { id: 'prefix', ...props.field }))))),
+                React.createElement(FormRow, null,
                     React.createElement(Field, { name: 'bibliographicName.given' }, (props) => (React.createElement(React.Fragment, null,
-                        React.createElement(Label, { htmlFor: "given-name", className: "sr-only" }, "Given name"),
-                        React.createElement(TextField, { id: 'given-name', placeholder: 'Given name', ...props.field })))),
+                        React.createElement(Label, { htmlFor: "given-name" }, "Given name"),
+                        React.createElement(TextField, { id: 'given-name', ...props.field }))))),
+                React.createElement(FormRow, null,
                     React.createElement(Field, { name: 'bibliographicName.family' }, (props) => (React.createElement(React.Fragment, null,
-                        React.createElement(Label, { htmlFor: "family-name", className: "sr-only" }, "Family name"),
-                        React.createElement(TextField, { id: 'family-name', placeholder: 'Family name', ...props.field }))))),
-                React.createElement(Field, { name: 'email', type: 'email' }, (props) => {
-                    const placeholder = isEmailRequired
-                        ? '*Email address (required)'
-                        : 'Email address';
-                    return (React.createElement(React.Fragment, null,
-                        React.createElement(Label, { htmlFor: "email", className: "sr-only" }, "Email address"),
-                        React.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, placeholder: placeholder, ...props.field })));
-                }),
-                React.createElement(Field, { name: 'role' }, (props) => (React.createElement(React.Fragment, null,
-                    React.createElement(Label, { htmlFor: "role", className: "sr-only" }, "Job Title"),
-                    React.createElement(TextField, { id: 'role', placeholder: 'Job Title', ...props.field })))),
+                        React.createElement(Label, { htmlFor: "family-name" }, "Family name"),
+                        React.createElement(TextField, { id: 'family-name', ...props.field }))))),
+                React.createElement(FormRow, null,
+                    React.createElement(Field, { name: 'email', type: 'email' }, (props) => {
+                        const hasError = getIn(formik.touched, 'email') &&
+                            getIn(formik.errors, 'email');
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement(Label, { htmlFor: "email" }, isEmailRequired
+                                ? 'Email address (required)'
+                                : 'Email address'),
+                            React.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
+                            hasError && (React.createElement(InputErrorText, null, getIn(formik.errors, 'email')))));
+                    })),
+                React.createElement(FormRow, null,
+                    React.createElement(Field, { name: 'role' }, (props) => (React.createElement(React.Fragment, null,
+                        React.createElement(Label, { htmlFor: "role" }, "Job Title"),
+                        React.createElement(TextField, { id: 'role', ...props.field }))))),
                 React.createElement(CheckboxContainer, null,
                     React.createElement(CheckboxLabel, null,
                         React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
                         React.createElement(LabelText, null, "Corresponding Author"))),
                 React.createElement(OrcidContainer, null,
-                    React.createElement(TextFieldLabel, null,
-                        React.createElement(LabelText, null, "ORCID"),
+                    React.createElement(FormRow, null,
+                        React.createElement(Label, { htmlFor: "orcid" }, "ORCID"),
                         React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(React.Fragment, null,
                             React.createElement(Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
                             React.createElement(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/es/components/authors/AuthorsModal.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { buildBibliographicName, } from '@manuscripts/json-schema';
-import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, FormLabel, } from '@manuscripts/style-guide';
 import { generateNodeID, schema } from '@manuscripts/transform';
 import { cloneDeep, isEqual, omit } from 'lodash';
 import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
@@ -358,15 +358,6 @@ const AddAuthorButton = styled.div `
 const ActionTitle = styled.div `
   padding-left: ${(props) => props.theme.grid.unit * 2}px;
 `;
-const FormLabel = styled.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.div `
   padding-left: ${(props) => props.theme.grid.unit * 3}px;
   padding-right: ${(props) => props.theme.grid.unit * 3}px;

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

@@ -1,7 +1,7 @@
-import { CheckboxField, CheckboxLabel, Drawer, DrawerItemsList, } from '@manuscripts/style-guide';
+import { CheckboxField, CheckboxLabel, Drawer, DrawerItemsList, LabelText, } from '@manuscripts/style-guide';
 import React from 'react';
 import styled from 'styled-components';
-import { CheckboxContainer, LabelText } from './AuthorDetailsForm';
+import { CheckboxContainer } from './AuthorDetailsForm';
 export const CreditDrawer = ({ items, selectedItems = [], onSelect, ...drawerProps }) => {
     return (React.createElement(Drawer, { ...drawerProps },
         React.createElement(TwoColumnContainer, null, items.map((item, i) => (React.createElement(TwoColumnCheckbox, { key: item.id },

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { MultiValueInput, PrimaryButton, SearchIcon, SecondaryButton, TextField, } from '@manuscripts/style-guide';
+import { MultiValueInput, PrimaryButton, SearchIcon, SecondaryButton, TextField, FormRow, Label, FormActionsBar, } from '@manuscripts/style-guide';
 import { Field, Formik } from 'formik';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -78,53 +78,35 @@ export const AwardForm = ({ values, onSave, onCancel, onChange, }) => {
         }, enableReinitialize: true, validate: validate, validateOnChange: false, innerRef: formRef }, (formik) => {
         return (React.createElement(ChangeHandlingForm, { onChange: onChange },
             React.createElement(Field, { type: "hidden", name: "id" }),
-            React.createElement(LabelContainer, null,
-                React.createElement(Label, { htmlFor: 'source' }, "Funder name")),
-            React.createElement(SearchContainer, null,
-                React.createElement(SearchIconContainer, null,
-                    React.createElement(SearchIcon, null)),
-                React.createElement(Field, { name: "source" }, (props) => (React.createElement(StyledTextField, { id: "source", placeholder: "Search for funder...", onChange: (e) => {
-                        props.field.onChange(e);
-                        handleFunderSearch(e);
-                    }, value: props.field.value || '', autoFocus: true }))),
-                isLoading && React.createElement(LoadingText, null, "Loading..."),
-                funders.length > 0 && (React.createElement(SearchResults, null, funders.map((funder) => (React.createElement(SearchResultItem, { key: funder.value, onClick: () => {
-                        formik.setFieldValue('source', funder.value);
-                        setFunders([]);
-                    } }, funder.label)))))),
-            formik.errors.source && formik.touched.source && (React.createElement(ErrorText, null, formik.errors.source)),
-            React.createElement(LabelContainer, null,
-                React.createElement(Label, { htmlFor: 'code' }, "Grant number")),
-            React.createElement(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.createElement(LabelContainer, null,
-                React.createElement(Label, { htmlFor: 'recipient' }, "Recipient name")),
-            React.createElement(Field, { name: "recipient" }, (props) => (React.createElement(TextField, { id: "recipient", placeholder: "Enter full name", ...props.field }))),
-            React.createElement(ButtonContainer, null,
-                React.createElement(SecondaryButton, { onClick: handleCancel }, "Cancel"),
-                React.createElement(PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting }, primaryButtonText))));
+            React.createElement(FormRow, null,
+                React.createElement(Label, { htmlFor: 'source' }, "Funder name"),
+                React.createElement(SearchContainer, null,
+                    React.createElement(SearchIconContainer, null,
+                        React.createElement(SearchIcon, null)),
+                    React.createElement(Field, { name: "source" }, (props) => (React.createElement(StyledTextField, { id: "source", placeholder: "Search for funder...", onChange: (e) => {
+                            props.field.onChange(e);
+                            handleFunderSearch(e);
+                        }, value: props.field.value || '' }))),
+                    isLoading && React.createElement(LoadingText, null, "Loading..."),
+                    funders.length > 0 && (React.createElement(SearchResults, null, funders.map((funder) => (React.createElement(SearchResultItem, { key: funder.value, onClick: () => {
+                            formik.setFieldValue('source', funder.value);
+                            setFunders([]);
+                        } }, funder.label)))))),
+                formik.errors.source && formik.touched.source && (React.createElement(ErrorText, null, formik.errors.source))),
+            React.createElement(FormRow, null,
+                React.createElement(Label, { htmlFor: 'code' }, "Grant number"),
+                React.createElement(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.createElement(FormRow, null,
+                React.createElement(Label, { htmlFor: 'recipient' }, "Recipient name"),
+                React.createElement(Field, { name: "recipient" }, (props) => (React.createElement(TextField, { id: "recipient", placeholder: "Enter full name", ...props.field })))),
+            React.createElement(FormRow, null,
+                React.createElement(FormActionsBar, null,
+                    React.createElement(SecondaryButton, { onClick: handleCancel }, "Cancel"),
+                    React.createElement(PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting }, primaryButtonText)))));
     }));
 };
-const LabelContainer = styled.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.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.div `
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-  gap: 8px;
-`;
 const SearchContainer = styled.div `
   position: relative;
   width: 100%;

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

@@ -1,22 +1,6 @@
-import { CloseButton, ModalContainer, ModalHeader, StyledModal, } from '@manuscripts/style-guide';
+import { CloseButton, ModalCardBody, ModalContainer, ModalHeader, ModalTitle, StyledModal, } from '@manuscripts/style-guide';
 import React, { useRef, useState } from 'react';
-import styled from 'styled-components';
 import { AwardForm } from './AwardForm';
-const ModalBody = styled.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.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 || '',
@@ -44,7 +28,7 @@ export const AwardModal = ({ initialData, onSaveAward, onCancelAward, }) => {
         React.createElement(ModalContainer, { "data-cy": "award-modal" },
             React.createElement(ModalHeader, null,
                 React.createElement(CloseButton, { onClick: handleCancel, "data-cy": "modal-close-button" })),
-            React.createElement(ModalBody, null,
+            React.createElement(ModalCardBody, { width: 480 },
                 React.createElement(ModalTitle, null, "Add Funder information"),
                 React.createElement(AwardForm, { values: normalizedValues, onSave: handleSave, onCancel: handleCancel, onChange: handleChange })))));
 };

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

@@ -32,9 +32,11 @@ export function DrawerGroup({ removeItem, selectedItems, onSelect, items, showDr
 }
 const DrawerSectionTitle = styled.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};
 `;
 export const AssignButton = styled.button `

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { PrimaryButton, SecondaryButton, TextArea, } from '@manuscripts/style-guide';
+import { FormActionsBar, FormRow, Label, PrimaryButton, SecondaryButton, TextArea, } from '@manuscripts/style-guide';
 import { useFormik } from 'formik';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -81,19 +81,20 @@ export const ImportBibliographyForm = ({ onCancel, onSave, }) => {
         reader.readAsText(file);
     };
     return (React.createElement("form", { onSubmit: formik.handleSubmit, onReset: formik.handleReset },
-        React.createElement(DropContainer, { onDrop: handleDrop, onDragOver: (e) => {
-                e.preventDefault();
-                setDragging(true);
-            }, onDragLeave: () => setDragging(false), active: dragging },
-            React.createElement("input", { id: "file", name: "file", type: "file", onChange: handleFileChange, style: { display: 'none' } }),
-            React.createElement(Label, { htmlFor: "file" }, "Drag & Drop or Click here to upload a file.")),
-        React.createElement(LabelContainer, null,
-            React.createElement(Label, null, "Alternatively, you can directly Copy&Paste below, the text of the bibliography items.")),
-        React.createElement(TextArea, { name: "content", rows: 6, value: formik.values.content, onChange: formik.handleChange }),
+        React.createElement(FormRow, null,
+            React.createElement(DropContainer, { onDrop: handleDrop, onDragOver: (e) => {
+                    e.preventDefault();
+                    setDragging(true);
+                }, onDragLeave: () => setDragging(false), active: dragging },
+                React.createElement("input", { id: "file", name: "file", type: "file", onChange: handleFileChange, style: { display: 'none' } }),
+                React.createElement(Label, { htmlFor: "file" }, "Drag & Drop or Click here to upload a file."))),
+        React.createElement(FormRow, null,
+            React.createElement(Label, { htmlFor: "content" }, "Alternatively, you can directly Copy&Paste below, the text of the bibliography items."),
+            React.createElement(TextArea, { id: "content", name: "content", rows: 6, value: formik.values.content, onChange: formik.handleChange })),
         React.createElement(Preview, null,
             formik.values.err,
             formik.values.data.map((item) => (React.createElement(ReferenceLine, { item: item, key: item.id })))),
-        React.createElement(ButtonContainer, null,
+        React.createElement(FormActionsBar, null,
             React.createElement(SecondaryButton, { type: "reset" }, "Cancel"),
             React.createElement(PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting || !formik.values.data.length }, "Save"))));
 };
@@ -105,26 +106,6 @@ const Preview = styled.div `
   margin-top: ${(props) => 4 * props.theme.grid.unit}px;
   margin-bottom: ${(props) => props.theme.grid.unit}px;
 `;
-const LabelContainer = styled.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.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.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 = css `
   background: #f2fbfc;
   border: 1px dashed #bce7f6;

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

@@ -1,4 +1,4 @@
-import { CloseButton, ModalContainer, ModalHeader, StyledModal, Tooltip, } from '@manuscripts/style-guide';
+import { CloseButton, ModalCardBody, ModalContainer, ModalHeader, ModalTitle, StyledModal, Tooltip, } from '@manuscripts/style-guide';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { ImportBibliographyForm } from './ImportBibliographyForm';
@@ -55,7 +55,7 @@ export const ImportBibliographyModal = ({ onCancel, onSave }) => {
         React.createElement(ModalContainer, { "data-cy": "import-bibliography-modal" },
             React.createElement(ModalHeader, null,
                 React.createElement(CloseButton, { onClick: onCancel, "data-cy": "modal-close-button" })),
-            React.createElement(ModalBody, null,
+            React.createElement(ModalCardBody, { width: 640 },
                 React.createElement(ModalTitle, null, "Import Bibliography"),
                 React.createElement("p", null,
                     React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleBibtex }, "BibTex"),
@@ -77,21 +77,6 @@ export const ImportBibliographyModal = ({ onCancel, onSave }) => {
                 React.createElement(ImportBibliographyForm, { onCancel: handleCancel, onSave: handleSave }),
                 React.createElement(Example, { id: "import-example-tooltip", place: "bottom", render: (s) => React.createElement("pre", null, s.content) })))));
 };
-const ModalBody = styled.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.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.span `
   text-decoration: underline dotted;
   text-underline-offset: 4px;

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

@@ -1,7 +1,7 @@
-import { DeleteIcon } from '@manuscripts/style-guide';
+import { DeleteIcon, FormRow, Label, TextField } from '@manuscripts/style-guide';
 import { Field } from 'formik';
 import React, { useState } from 'react';
-import { DropdownIndicator, FieldLabel, NameField, NameFieldContainer, PersonForm, RemoveButton, Section, Title, ToggleButton, } from './styled-components';
+import { DropdownIndicator, PersonForm, RemoveButton, Section, Title, ToggleButton, } from './styled-components';
 export const PersonDropDown = (props) => {
     const { person, isNew, index, remove, onChange, type } = props;
     const [isOpen, setIsOpen] = useState(isNew);
@@ -16,10 +16,10 @@ export const PersonDropDown = (props) => {
             React.createElement(RemoveButton, { type: "button", "aria-label": "Delete this editor", onClick: () => remove(index) },
                 React.createElement(DeleteIcon, null))),
         isOpen && (React.createElement(PersonForm, null,
-            React.createElement(Field, { name: `${prefix}.given`, value: person.given, onChange: onChange }, ({ field }) => (React.createElement(NameFieldContainer, null,
-                React.createElement(NameField, { ...field, id: field.name, placeholder: 'Given', autoFocus: true }),
-                React.createElement(FieldLabel, { htmlFor: field.name }, "Given")))),
-            React.createElement(Field, { name: `${prefix}.family`, value: person.family, onChange: onChange }, ({ field }) => (React.createElement(NameFieldContainer, null,
-                React.createElement(NameField, { ...field, id: field.name, placeholder: 'Family', autoFocus: true }),
-                React.createElement(FieldLabel, { htmlFor: field.name }, "Family"))))))));
+            React.createElement(FormRow, null,
+                React.createElement(Label, { htmlFor: `${prefix}.given` }, "Given Name"),
+                React.createElement(Field, { name: `${prefix}.given`, id: `${prefix}.given`, value: person.given, onChange: onChange, component: TextField })),
+            React.createElement(FormRow, null,
+                React.createElement(Label, { htmlFor: `${prefix}.family` }, "Family Name"),
+                React.createElement(Field, { name: `${prefix}.family`, id: `${prefix}.family`, value: person.family, onChange: onChange, component: TextField }))))));
 };