@manuscripts/body-editor 3.13.4 → 3.13.6

package/dist/cjs/components/LanguageDropdown/index.js

@@ -146,7 +146,7 @@ const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', s
                     "Document language ",
                     react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null)),
                 react_1.default.createElement(SelectedLanguage, null, selectedLanguageDisplay || getDisplayName(currentLanguage))))),
-        isOpen && (react_1.default.createElement(DropdownMenu, { ref: dropdownMenuRef, direction: "right", width: 231, height: 400, top: 18, onKeyDown: handleMenuKeyDown, role: "menu" },
+        isOpen && (react_1.default.createElement(DropdownMenu, { ref: dropdownMenuRef, "$direction": "right", "$width": 231, "$height": 400, "$top": 18, onKeyDown: handleMenuKeyDown, role: "menu" },
             !showButton && react_1.default.createElement(DropdownTitle, null, "Choose language"),
             languages.map((language) => (react_1.default.createElement(LanguageOptionItem, { key: language.code, language: language, isSelected: currentLanguage === language.code, onSelect: handleSelect })))))));
 };

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

@@ -86,7 +86,7 @@ const AffiliationForm = ({ values, onSave, onChange, actionsRef, newEntity = fal
                     react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "institution", showDot: showUnsavedDot('institution') },
                         "Institution Name",
                         react_1.default.createElement(style_guide_1.RequiredIndicator, null, "*")),
-                    react_1.default.createElement(style_guide_1.TextField, { id: "institution", ...props.field, error: showInstitutionError }),
+                    react_1.default.createElement(style_guide_1.TextField, { id: "institution", ...props.field, "$error": showInstitutionError }),
                     showInstitutionError && (react_1.default.createElement(style_guide_1.InputErrorText, null, formik.errors.institution)))))),
             react_1.default.createElement(style_guide_1.FormRow, null,
                 react_1.default.createElement(formik_1.Field, { name: "department", type: "textarea" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -110,7 +110,7 @@ const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, showSucce
                     affiliation.country ? ', ' : '')),
                 affiliation.country && react_1.default.createElement(react_1.default.Fragment, null, affiliation.country))),
         showSuccessIcon && (react_1.default.createElement(style_guide_1.CrclTickAnimation, { size: 36, style: { position: 'absolute', left: '10px' } })),
-        isSelected && (react_1.default.createElement(RemoveButton, { size: 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+        isSelected && (react_1.default.createElement(RemoveButton, { "$size": 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
             react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' })))));
 };
 exports.AffiliationItem = AffiliationItem;

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

@@ -142,7 +142,7 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
                         react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "given-name", showDot: showUnsavedDot('given') },
                             "Given name",
                             react_1.default.createElement(style_guide_1.RequiredIndicator, null, "*")),
-                        react_1.default.createElement(TextFieldWithError, { id: 'given-name', ...props.field, error: showNamePairError }),
+                        react_1.default.createElement(TextFieldWithError, { id: 'given-name', ...props.field, "$error": showNamePairError }),
                         showNamePairError && (react_1.default.createElement(style_guide_1.InputErrorText, null, NAME_PAIR_REQUIRED_MESSAGE))))))),
             react_1.default.createElement(exports.StyledFormGroup, null,
                 react_1.default.createElement(exports.StyledFormRow, null,
@@ -150,7 +150,7 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
                         react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "family-name", showDot: showUnsavedDot('family') },
                             "Family name",
                             react_1.default.createElement(style_guide_1.RequiredIndicator, null, "*")),
-                        react_1.default.createElement(TextFieldWithError, { id: 'family-name', ...props.field, error: showNamePairError }),
+                        react_1.default.createElement(TextFieldWithError, { id: 'family-name', ...props.field, "$error": showNamePairError }),
                         showNamePairError && (react_1.default.createElement(style_guide_1.InputErrorText, null, NAME_PAIR_REQUIRED_MESSAGE)))))),
                 react_1.default.createElement(style_guide_1.FormRow, null,
                     react_1.default.createElement(formik_1.Field, { name: 'suffix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
@@ -171,7 +171,7 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
                         react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "email", showDot: showUnsavedDot('email') }, isEmailRequired ? (react_1.default.createElement(style_guide_1.LabelText, null,
                             "Email address",
                             react_1.default.createElement(style_guide_1.RequiredIndicator, null, "*"))) : ('Email address')),
-                        react_1.default.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
+                        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,
@@ -183,7 +183,7 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
                     const hasError = (0, formik_1.getIn)(formik.touched, 'ORCID') && (0, formik_1.getIn)(formik.errors, 'ORCID');
                     return (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(UnsavedLabel_1.UnsavedLabel, { htmlFor: "orcid", showDot: showUnsavedDot('ORCID') }, "ORCID"),
-                        react_1.default.createElement(TextFieldWithError, { id: 'orcid', type: "url", placeholder: 'https://orcid.org/...', disabled: values.isAuthenticated, ...props.field, pattern: ORCID_INPUT_PATTERN, title: "Please enter a valid ORCID URL: https://orcid.org/xxxx-xxxx-xxxx-xxxx", error: hasError }),
+                        react_1.default.createElement(TextFieldWithError, { id: 'orcid', type: "url", placeholder: 'https://orcid.org/...', disabled: values.isAuthenticated, ...props.field, pattern: ORCID_INPUT_PATTERN, title: "Please enter a valid ORCID URL: https://orcid.org/xxxx-xxxx-xxxx-xxxx", "$error": hasError }),
                         hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'ORCID')))));
                 })),
             react_1.default.createElement(style_guide_1.FormRow, null,

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

@@ -196,6 +196,6 @@ exports.DraggableAuthor = react_1.default.memo(({ author, isSelected, onClick, o
             react_1.default.createElement(AuthorNotes, { "data-cy": "author-notes" }, author.isCorresponding && (react_1.default.createElement(AuthorBadge, null,
                 react_1.default.createElement(style_guide_1.CorrespondingAuthorIcon, null))))),
         react_1.default.createElement(AuthorName, { "data-cy": "author-name" }, (0, authors_1.authorLabel)(author)),
-        isSelected && (react_1.default.createElement(RemoveButton, { size: 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+        isSelected && (react_1.default.createElement(RemoveButton, { "$size": 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
             react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' })))));
 });

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

@@ -141,7 +141,7 @@ const SearchIconContainer = styled_components_1.default.span `
   padding-right: ${(props) => props.theme.grid.unit * 2}px;
 
   path {
-    stroke: ${(props) => props.isFocused
+    stroke: ${(props) => props.$isFocused
     ? props.theme.colors.brand.medium
     : props.theme.colors.text.primary};
   }
@@ -152,10 +152,10 @@ const OptionWrapper = styled_components_1.default.div `
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
   background-color: ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
         return props.theme.colors.background.selected;
     }
-    if (props.focused) {
+    if (props.$focused) {
         return props.theme.colors.background.fifth;
     }
     return 'transparent';
@@ -166,11 +166,11 @@ const OptionWrapper = styled_components_1.default.div `
   }
 `;
 const Option = ({ innerProps, innerRef, data, isFocused, isSelected, }) => {
-    return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
+    return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: innerRef, "$focused": isFocused, "$selected": isSelected }, data.label));
 };
 const Control = ({ children, ...props }) => {
     return (react_1.default.createElement(react_select_1.components.Control, { ...props },
-        react_1.default.createElement(SearchIconContainer, { isFocused: props.isFocused },
+        react_1.default.createElement(SearchIconContainer, { "$isFocused": props.isFocused },
             react_1.default.createElement(style_guide_1.SearchIcon, null)),
         children));
 };

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

@@ -67,7 +67,7 @@ const AwardModal = ({ initialData, onSaveAward, }) => {
         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: handleClose, "data-cy": "modal-close-button" })),
-            react_1.default.createElement(style_guide_1.ModalCardBody, { width: 480 },
+            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: handleClose, onChange: handleChange })))));
 };

package/dist/cjs/components/outline/DraggableTree.js

@@ -283,7 +283,7 @@ const DraggableTree = ({ tree, view, depth, can, getFiles, }) => {
         .filter(Boolean)
         .join(' ');
     return (react_1.default.createElement(Outline_1.Outline, { ref: ref, className: classNames },
-        !isTop && node.type.name != 'manuscript' && (react_1.default.createElement(Outline_1.OutlineItem, { depth: isHeroImage || isSupplements || isMainDocument ? 1 : depth, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, tabIndex: -1, "data-outline-item": true },
+        !isTop && node.type.name != 'manuscript' && (react_1.default.createElement(Outline_1.OutlineItem, { "$depth": isHeroImage || isSupplements || isMainDocument ? 1 : depth, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, tabIndex: -1, "data-outline-item": true },
             items.length ? (react_1.default.createElement(Outline_1.OutlineItemArrow, { "aria-label": `${isOpen ? 'Collapse' : 'Expand'} ${node.type.name}`, onClick: toggleOpen, tabIndex: -1 }, isOpen ? react_1.default.createElement(style_guide_1.TriangleExpandedIcon, null) : react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null))) : (react_1.default.createElement(Outline_1.OutlineItemNoArrow, null)),
             react_1.default.createElement(Outline_1.OutlineItemLink, { to: `#${node.attrs.id}`, tabIndex: -1 },
                 react_1.default.createElement(Outline_1.OutlineItemIcon, null, (0, node_type_icons_1.nodeTypeIcon)(node.type)),

package/dist/cjs/components/outline/Outline.js

@@ -36,7 +36,7 @@ exports.OutlineItem = styled_components_1.default.div `
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
-  font-size: ${(props) => props.depth === 0
+  font-size: ${(props) => props.$depth === 0
     ? props.theme.font.size.large
     : props.theme.font.size.medium};
   line-height: 30px;
@@ -44,7 +44,7 @@ exports.OutlineItem = styled_components_1.default.div `
   margin-right: -${(props) => props.theme.grid.unit * 5}px;
   overflow-x: hidden;
   padding-right: ${(props) => props.theme.grid.unit * 5}px;
-  padding-left: ${(props) => 20 + props.depth * 20}px;
+  padding-left: ${(props) => 20 + props.$depth * 20}px;
   white-space: nowrap;
 
   &:hover {

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

@@ -59,9 +59,9 @@ const CitedItemActions = styled_components_1.default.div `
   }
 `;
 const ActionButton = (0, styled_components_1.default)(style_guide_1.IconButton).attrs({
-    size: 24,
+    $size: 24,
 }) `
-  :disabled {
+  &:disabled {
     background-color: transparent !important;
     border-color: transparent !important;
     color: rgb(255, 255, 255);
@@ -70,8 +70,8 @@ const ActionButton = (0, styled_components_1.default)(style_guide_1.IconButton).
       fill: ${(props) => props.theme.colors.background.tertiary} !important;
     }
   }
-  :not(:disabled):focus,
-  :not(:disabled):hover {
+  &:not(:disabled):focus,
+  &:not(:disabled):hover {
     path,
     g {
       fill: ${(props) => props.theme.colors.brand.medium} !important;

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

@@ -128,7 +128,7 @@ const ImportBibliographyForm = ({ onCancel, onSave, }) => {
             react_1.default.createElement(DropContainer, { tabIndex: 0, role: "button", onDrop: handleDrop, onDragOver: (e) => {
                     e.preventDefault();
                     setDragging(true);
-                }, onDragLeave: () => setDragging(false), onKeyDown: handleOnKeyDown, active: dragging },
+                }, onDragLeave: () => setDragging(false), onKeyDown: handleOnKeyDown, "$active": dragging },
                 react_1.default.createElement("input", { id: "file", name: "file", type: "file", ref: fileInputRef, 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,
@@ -160,7 +160,7 @@ const DropContainer = styled_components_1.default.div `
   box-sizing: border-box;
   border-radius: ${(props) => props.theme.grid.radius.default};
   cursor: pointer;
-  ${({ active }) => active && activeBoxStyle};
+  ${({ $active }) => $active && activeBoxStyle};
 
   &:hover {
     ${activeBoxStyle}

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

@@ -94,7 +94,7 @@ 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(style_guide_1.ModalCardBody, { width: 640 },
+            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"),

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

@@ -46,10 +46,10 @@ const PersonDropDown = (props) => {
     const prefix = `${type}.${index}`;
     return (react_1.default.createElement(styled_components_1.Section, null,
         react_1.default.createElement(styled_components_1.Title, null,
-            react_1.default.createElement(styled_components_1.ToggleButton, { type: "button", onClick: () => setIsOpen(!isOpen), isOpen: isOpen },
+            react_1.default.createElement(styled_components_1.ToggleButton, { type: "button", onClick: () => setIsOpen(!isOpen), "$isOpen": isOpen },
                 react_1.default.createElement(styled_components_1.DropdownIndicator, null),
                 title),
-            react_1.default.createElement(styled_components_1.RemoveButton, { size: 13, type: "button", "aria-label": "Delete this editor", onClick: () => remove(index) },
+            react_1.default.createElement(styled_components_1.RemoveButton, { "$size": 13, 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(style_guide_1.FormRow, null,

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

@@ -112,7 +112,7 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
                 react_1.default.createElement(style_guide_1.ButtonGroup, null,
                     react_1.default.createElement(style_guide_1.IconButton, { as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
                         react_1.default.createElement(style_guide_1.LinkIcon, null)),
-                    react_1.default.createElement(styled_components_1.DeleteButton, { defaultColor: true, disabled: !showDelete, "data-tooltip-content": "Unable to delete because the item is used in the document", "data-tooltip-hidden": showDelete, onClick: () => setShowDeleteDialog(true) },
+                    react_1.default.createElement(styled_components_1.DeleteButton, { "$defaultColor": true, disabled: !showDelete, "data-tooltip-content": "Unable to delete because the item is used in the document", "data-tooltip-hidden": showDelete, onClick: () => setShowDeleteDialog(true) },
                         react_1.default.createElement(style_guide_1.DeleteIcon, null))),
                 react_1.default.createElement(style_guide_1.ButtonGroup, null,
                     react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
@@ -130,7 +130,7 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
                 (0, utils_1.shouldRenderField)('std', formik.values.type) && (react_1.default.createElement(style_guide_1.FormRow, null,
                     react_1.default.createElement(style_guide_1.Label, { htmlFor: 'std' }, "Standard"),
                     react_1.default.createElement(formik_1.Field, { name: 'std' }, (props) => (react_1.default.createElement(styled_components_1.ReferenceTextArea, { id: 'std', ...props.field }))))),
-                (0, utils_1.shouldRenderField)('author', formik.values.type) && (react_1.default.createElement(formik_1.FieldArray, { name: 'author', render: ({ push, remove }) => (react_1.default.createElement(style_guide_1.FormRow, { direction: "row", justify: "space-between", align: "center" },
+                (0, utils_1.shouldRenderField)('author', formik.values.type) && (react_1.default.createElement(formik_1.FieldArray, { name: 'author', render: ({ push, remove }) => (react_1.default.createElement(style_guide_1.FormRow, { "$direction": "row", "$justify": "space-between", "$align": "center" },
                         react_1.default.createElement(style_guide_1.Label, null, "Authors"),
                         react_1.default.createElement(styled_components_1.Button, { onClick: () => {
                                 setNewAuthorIndex(formik.values.author?.length);

package/dist/cjs/components/references/ReferenceForm/styled-components.js

@@ -7,8 +7,8 @@ exports.RemoveButton = exports.ToggleButton = exports.DropdownIndicator = export
 const style_guide_1 = require("@manuscripts/style-guide");
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.Button = (0, styled_components_1.default)(style_guide_1.IconButton).attrs({
-    defaultColor: true,
-    size: 24,
+    $defaultColor: true,
+    $size: 24,
 }) `
   circle,
   use {
@@ -72,8 +72,8 @@ exports.Title = styled_components_1.default.h4 `
   align-items: center;
   font-size: 0.875rem;
   padding-right: 0.5rem;
-  background: ${(props) => props.isInvalid ? props.theme.colors.background.warning : 'transparent'};
-  color: ${(props) => props.isInvalid ? props.theme.colors.text.warning : 'inherit'};
+  background: ${(props) => props.$isInvalid ? props.theme.colors.background.warning : 'transparent'};
+  color: ${(props) => props.$isInvalid ? props.theme.colors.text.warning : 'inherit'};
 `;
 exports.DropdownIndicator = (0, styled_components_1.default)(style_guide_1.ArrowDownIcon) `
   border: 0;
@@ -100,7 +100,7 @@ exports.ToggleButton = styled_components_1.default.button `
   }
 
   svg {
-    transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
+    transform: ${(props) => (props.$isOpen ? 'rotateX(180deg)' : 'initial')};
   }
   ${style_guide_1.outlineStyle}
 `;

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

@@ -68,7 +68,7 @@ const ReferenceButton = (0, style_guide_1.withNavigableListItem)(styled_componen
     fill: #c9c9c9;
   }
 
-  :hover {
+  &:hover {
     background: ${(props) => props.theme.colors.background.info};
   }
 

package/dist/cjs/components/toolbar/InsertEmbedDialog.js

@@ -111,7 +111,7 @@ const InsertEmbedDialog = ({ state, dispatch, pos, }) => {
                 " external media"),
             react_1.default.createElement(style_guide_1.MessageContainer, null,
                 react_1.default.createElement(Container, null,
-                    react_1.default.createElement(style_guide_1.FormRow, { direction: 'row' },
+                    react_1.default.createElement(style_guide_1.FormRow, { "$direction": 'row' },
                         react_1.default.createElement(style_guide_1.Label, { htmlFor: 'embed-link' }, "Media link"),
                         url && (0, url_1.allowedHref)(url) && (react_1.default.createElement(LinkForm_1.Open, { id: 'media-link', href: url, target: '_blank', rel: 'noopener' })),
                         react_1.default.createElement(style_guide_1.TextArea, { id: 'embed-link', rows: 2, cols: 2, defaultValue: url, autoFocus: true, required: true, placeholder: 'https://youtube.com/...', onChange: (e) => setUrl(e.target.value.trim()) }))),

package/dist/cjs/components/toolbar/InsertTableDialog.js

@@ -78,10 +78,10 @@ const OptionWrapper = styled_components_1.default.div `
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
   background-color: ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
         return props.theme.colors.background.selected;
     }
-    if (props.focused) {
+    if (props.$focused) {
         return props.theme.colors.background.fifth;
     }
     return 'transparent';
@@ -107,7 +107,7 @@ const InsertTableDialog = ({ state, dispatch, }) => {
         label: `${index + 1}`,
     }));
     const OptionComponent = ({ innerProps, data, innerRef, isFocused, isSelected, }) => {
-        return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
+        return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: innerRef, "$focused": isFocused, "$selected": isSelected }, data.label));
     };
     const actions = {
         primary: {

package/dist/cjs/components/toolbar/ListMenuItem.js

@@ -102,7 +102,7 @@ const ListStyles = ({ styles, onClick, styleRefs, }) => {
                 onClick(style, index);
             }
         }, tabIndex: 0 }, styleItems[style].map((item, index) => (react_1.default.createElement(exports.BlockItem, { key: index },
-        react_1.default.createElement(exports.Label, { hide: item === '-' }, item),
+        react_1.default.createElement(exports.Label, { "$hide": item === '-' }, item),
         react_1.default.createElement(exports.Block, null)))))))));
 };
 exports.ListStyles = ListStyles;
@@ -160,5 +160,5 @@ exports.Label = styled_components_1.default.div `
   font-weight: ${(props) => props.theme.font.weight.normal};
   line-height: ${(props) => props.theme.font.lineHeight.small};
   font-style: normal;
-  color: ${(props) => (props.hide && 'white') || 'initial'};
+  color: ${(props) => (props.$hide && 'white') || 'initial'};
 `;

package/dist/cjs/components/toolbar/type-selector/OptionComponent.js

@@ -49,7 +49,7 @@ const OptionContainer = styled_components_1.default.div `
   font-size: 14px;
   cursor: pointer;
   padding: 8px;
-  background: ${(props) => (props.isFocused ? '#f2fbfc' : 'transparent')};
+  background: ${(props) => (props.$isFocused ? '#f2fbfc' : 'transparent')};
 
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
@@ -58,7 +58,7 @@ const OptionContainer = styled_components_1.default.div `
 const OptionLabel = styled_components_1.default.span ``;
 const TickIconWrapper = styled_components_1.default.div ``;
 const OptionComponent = ({ innerProps, data, isFocused, innerRef, }) => {
-    return (react_1.default.createElement(OptionContainer, { ...innerProps, isFocused: isFocused, ref: innerRef },
+    return (react_1.default.createElement(OptionContainer, { ...innerProps, "$isFocused": isFocused, ref: innerRef },
         react_1.default.createElement(OptionLabel, null, (0, helpers_1.titleCase)((0, helpers_1.optionName)(data.nodeType))),
         data.isSelected && (react_1.default.createElement(TickIconWrapper, null,
             react_1.default.createElement(style_guide_1.TickIcon, null)))));

package/dist/cjs/components/views/CrossReferenceItems.js

@@ -77,16 +77,16 @@ const Items = (0, style_guide_1.withListNavigation)(styled_components_1.default.
 const CrossReferenceItem = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 4}px;
-  background-color: ${(props) => props.isSelected
+  background-color: ${(props) => props.$isSelected
     ? props.theme.colors.background.selected
     : props.theme.colors.background.primary};
   transition: background-color 0.1s;
   border: solid
-    ${(props) => props.isSelected
+    ${(props) => props.$isSelected
     ? props.theme.colors.brand.medium
     : props.theme.colors.border.secondary};
   border-width: 1px 0;
-  z-index: ${(props) => (props.isSelected ? '1' : '0')};
+  z-index: ${(props) => (props.$isSelected ? '1' : '0')};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.background.selected};
@@ -138,7 +138,7 @@ const CrossReferenceItems = ({ targets, handleSelect, handleCancel, currentTarge
     }, [currentTargetId]);
     return (react_1.default.createElement(Container, null,
         react_1.default.createElement(Heading, null, "Insert Cross-reference"),
-        react_1.default.createElement(Items, null, targets.length ? (targets.map((target) => (react_1.default.createElement(CrossReferenceItem, { key: target.id, isSelected: selectedItem === target.id, onClick: () => setSelectedItem(target.id) },
+        react_1.default.createElement(Items, null, targets.length ? (targets.map((target) => (react_1.default.createElement(CrossReferenceItem, { key: target.id, "$isSelected": selectedItem === target.id, onClick: () => setSelectedItem(target.id) },
             react_1.default.createElement(DefaultLabelWrapper, null,
                 react_1.default.createElement(Label, null, target.label),
                 react_1.default.createElement(Caption, null, target.caption && ': ' + trimmedCaption(target.caption, 200))),

package/dist/cjs/components/views/FigureDropdown.js

@@ -129,7 +129,7 @@ const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach,
                 }
             } },
             react_1.default.createElement(style_guide_1.DotsIcon, null)),
-        isOpen && (react_1.default.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5, ref: dropdownRef },
+        isOpen && (react_1.default.createElement(OptionsDropdownList, { "$direction": 'right', "$width": 128, "$top": 5, ref: dropdownRef },
             showReplace && isEmbedMode && (react_1.default.createElement(ListItemButton, { onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
             showReplace && !isEmbedMode && (react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
                     getSupplements(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
@@ -164,7 +164,7 @@ const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft
             } },
             react_1.default.createElement("div", null, buttonText),
             react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null)),
-        isOpen && (react_1.default.createElement(NestedListDropdownList, { direction: 'right', moveLeft: moveLeft, width: 192, ref: nestedListRef, onClick: (e) => {
+        isOpen && (react_1.default.createElement(NestedListDropdownList, { "$direction": 'right', "$moveLeft": moveLeft, "$width": 192, ref: nestedListRef, onClick: (e) => {
                 toggleOpen();
                 parentToggleOpen(e);
             } }, list))));
@@ -207,8 +207,8 @@ const ListItemButton = (0, styled_components_1.default)(style_guide_1.IconTextBu
   justify-content: space-between;
   align-items: center;
 
-  :hover,
-  :focus-visible {
+  &:hover,
+  &:focus-visible {
     background: #f2fbfc;
   }
 
@@ -237,7 +237,7 @@ const NestedListButton = (0, styled_components_1.default)(ListItemButton) `
 `;
 const NestedListDropdownList = (0, styled_components_1.default)(style_guide_1.DropdownList) `
   top: 0;
-  ${(props) => (props.moveLeft && 'right: 30%;') || 'left: 100%;'}
+  ${(props) => (props.$moveLeft && 'right: 30%;') || 'left: 100%;'}
 `;
 const UploadButton = (0, styled_components_1.default)(style_guide_1.IconTextButton) `
   border-top: 1px solid #f2f2f2;

package/dist/cjs/components/views/InsertSpecialCharacter.js

@@ -79,7 +79,7 @@ const InsertSpecialCharacterDialog = ({ view }) => {
                         react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleClose }, "Close")))))));
 };
 const OptionComponent = ({ innerProps, innerRef, data, isFocused, isSelected, }) => {
-    return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
+    return (react_1.default.createElement(OptionWrapper, { ...innerProps, ref: innerRef, "$focused": isFocused, "$selected": isSelected }, data.label));
 };
 const Container = (0, styled_components_1.default)(style_guide_1.ModalContainer) `
   padding: 8px;
@@ -104,10 +104,10 @@ const OptionWrapper = styled_components_1.default.div `
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
   background-color: ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
         return props.theme.colors.background.selected;
     }
-    if (props.focused) {
+    if (props.$focused) {
         return props.theme.colors.background.fifth;
     }
     return 'transparent';
@@ -133,13 +133,13 @@ const Character = (0, style_guide_1.withNavigableListItem)((0, styled_components
   border-right: 1px solid #ddd;
   border-radius: unset;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background-color: #f0f0f0 !important;
   }
 
-  :active,
-  :focus {
+  &:active,
+  &:focus {
     color: inherit !important;
     border-bottom: 1px solid #ddd !important;
     border-right: 1px solid #ddd !important;

package/dist/cjs/components/views/LinkForm.js

@@ -145,11 +145,11 @@ const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
                 react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
                     react_1.default.createElement(style_guide_1.Label, null, "URL*"),
                     href && (0, url_1.allowedHref)(href) && (react_1.default.createElement(exports.Open, { href: href, target: '_blank', rel: 'noopener' }))),
-                react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'href', value: href, autoComplete: 'off', error: !!errors.href, onChange: handleHrefChange }),
+                react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'href', value: href, autoComplete: 'off', "$error": !!errors.href, onChange: handleHrefChange }),
                 errors.href && react_1.default.createElement(style_guide_1.InputErrorText, null, errors.href)),
             react_1.default.createElement(style_guide_1.FormRow, null,
                 react_1.default.createElement(style_guide_1.Label, null, "Text"),
-                react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'text', value: text, autoComplete: 'off', error: !!errors.text, onChange: handleTextChange }),
+                react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'text', value: text, autoComplete: 'off', "$error": !!errors.text, onChange: handleTextChange }),
                 errors.text && react_1.default.createElement(style_guide_1.InputErrorText, null, errors.text)),
             react_1.default.createElement(style_guide_1.FormRow, null,
                 react_1.default.createElement(style_guide_1.Label, null, "Title"),

package/dist/cjs/components/views/TableCellContextMenu.js

@@ -155,10 +155,10 @@ const ActionButton = (0, styled_components_1.default)(style_guide_1.IconTextButt
   padding: 8px 16px;
   justify-content: flex-start;
 
-  :hover {
+  &:hover {
     background: #f2fbfc;
   }
-  :disabled {
+  &:disabled {
     color: #353535;
     background-color: #ffffff;
     opacity: 0.4;

package/dist/cjs/lib/__tests__/plugins.test.js

@@ -13,6 +13,7 @@ const section_categories_json_1 = __importDefault(require("../../testing/section
 const popper_1 = require("../popper");
 const utils_1 = require("../utils");
 const doc_json_1 = __importDefault(require("./__fixtures__/doc.json"));
+const style_guide_1 = require("@manuscripts/style-guide");
 const userProfile = {
     _id: 'MPUserProfile:1',
     userID: 'MPUser:1',
@@ -28,7 +29,7 @@ const buildProps = (doc) => ({
     setComment: () => undefined,
     setSelectedComment: () => undefined,
     setEditorSelectedSuggestion: () => undefined,
-    theme: {},
+    theme: style_guide_1.defaultTheme,
     getFiles: () => [],
     fileManagement: {
         download: () => undefined,

package/dist/cjs/testing/default-editor-data.js

@@ -25,6 +25,7 @@ const popper_1 = require("../lib/popper");
 const default_capabilities_1 = require("./default-capabilities");
 const empty_editor_doc_json_1 = __importDefault(require("./empty-editor-doc.json"));
 const section_categories_json_1 = __importDefault(require("./section-categories.json"));
+const style_guide_1 = require("@manuscripts/style-guide");
 exports.defaultEditorProps = {
     attributes: {
         class: 'manuscript-editor',
@@ -42,7 +43,7 @@ exports.defaultEditorProps = {
         userID: '',
     }),
     history: (0, history_1.createBrowserHistory)(),
-    theme: {},
+    theme: style_guide_1.defaultTheme,
     getFiles: () => [],
     fileManagement: {
         upload: () => { },

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.13.4';
+exports.VERSION = '3.13.6';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/es/components/LanguageDropdown/index.js

@@ -108,7 +108,7 @@ const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', s
                     "Document language ",
                     React.createElement(TriangleCollapsedIcon, null)),
                 React.createElement(SelectedLanguage, null, selectedLanguageDisplay || getDisplayName(currentLanguage))))),
-        isOpen && (React.createElement(DropdownMenu, { ref: dropdownMenuRef, direction: "right", width: 231, height: 400, top: 18, onKeyDown: handleMenuKeyDown, role: "menu" },
+        isOpen && (React.createElement(DropdownMenu, { ref: dropdownMenuRef, "$direction": "right", "$width": 231, "$height": 400, "$top": 18, onKeyDown: handleMenuKeyDown, role: "menu" },
             !showButton && React.createElement(DropdownTitle, null, "Choose language"),
             languages.map((language) => (React.createElement(LanguageOptionItem, { key: language.code, language: language, isSelected: currentLanguage === language.code, onSelect: handleSelect })))))));
 };

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

@@ -46,7 +46,7 @@ export const AffiliationForm = ({ values, onSave, onChange, actionsRef, newEntit
                     React.createElement(UnsavedLabel, { htmlFor: "institution", showDot: showUnsavedDot('institution') },
                         "Institution Name",
                         React.createElement(RequiredIndicator, null, "*")),
-                    React.createElement(TextField, { id: "institution", ...props.field, error: showInstitutionError }),
+                    React.createElement(TextField, { id: "institution", ...props.field, "$error": showInstitutionError }),
                     showInstitutionError && (React.createElement(InputErrorText, null, formik.errors.institution)))))),
             React.createElement(FormRow, null,
                 React.createElement(Field, { name: "department", type: "textarea" }, (props) => (React.createElement(React.Fragment, null,

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

@@ -71,6 +71,6 @@ export const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, sh
                     affiliation.country ? ', ' : '')),
                 affiliation.country && React.createElement(React.Fragment, null, affiliation.country))),
         showSuccessIcon && (React.createElement(CrclTickAnimation, { size: 36, style: { position: 'absolute', left: '10px' } })),
-        isSelected && (React.createElement(RemoveButton, { size: 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
+        isSelected && (React.createElement(RemoveButton, { "$size": 13, onClick: () => onDelete(), "data-tooltip-content": "Delete" },
             React.createElement(DeleteIcon, { fill: '#6E6E6E' })))));
 };

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

@@ -102,7 +102,7 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
                         React.createElement(UnsavedLabel, { htmlFor: "given-name", showDot: showUnsavedDot('given') },
                             "Given name",
                             React.createElement(RequiredIndicator, null, "*")),
-                        React.createElement(TextFieldWithError, { id: 'given-name', ...props.field, error: showNamePairError }),
+                        React.createElement(TextFieldWithError, { id: 'given-name', ...props.field, "$error": showNamePairError }),
                         showNamePairError && (React.createElement(InputErrorText, null, NAME_PAIR_REQUIRED_MESSAGE))))))),
             React.createElement(StyledFormGroup, null,
                 React.createElement(StyledFormRow, null,
@@ -110,7 +110,7 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
                         React.createElement(UnsavedLabel, { htmlFor: "family-name", showDot: showUnsavedDot('family') },
                             "Family name",
                             React.createElement(RequiredIndicator, null, "*")),
-                        React.createElement(TextFieldWithError, { id: 'family-name', ...props.field, error: showNamePairError }),
+                        React.createElement(TextFieldWithError, { id: 'family-name', ...props.field, "$error": showNamePairError }),
                         showNamePairError && (React.createElement(InputErrorText, null, NAME_PAIR_REQUIRED_MESSAGE)))))),
                 React.createElement(FormRow, null,
                     React.createElement(Field, { name: 'suffix' }, (props) => (React.createElement(React.Fragment, null,
@@ -131,7 +131,7 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
                         React.createElement(UnsavedLabel, { htmlFor: "email", showDot: showUnsavedDot('email') }, isEmailRequired ? (React.createElement(LabelText, null,
                             "Email address",
                             React.createElement(RequiredIndicator, null, "*"))) : ('Email address')),
-                        React.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
+                        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,
@@ -143,7 +143,7 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
                     const hasError = getIn(formik.touched, 'ORCID') && getIn(formik.errors, 'ORCID');
                     return (React.createElement(React.Fragment, null,
                         React.createElement(UnsavedLabel, { htmlFor: "orcid", showDot: showUnsavedDot('ORCID') }, "ORCID"),
-                        React.createElement(TextFieldWithError, { id: 'orcid', type: "url", placeholder: 'https://orcid.org/...', disabled: values.isAuthenticated, ...props.field, pattern: ORCID_INPUT_PATTERN, title: "Please enter a valid ORCID URL: https://orcid.org/xxxx-xxxx-xxxx-xxxx", error: hasError }),
+                        React.createElement(TextFieldWithError, { id: 'orcid', type: "url", placeholder: 'https://orcid.org/...', disabled: values.isAuthenticated, ...props.field, pattern: ORCID_INPUT_PATTERN, title: "Please enter a valid ORCID URL: https://orcid.org/xxxx-xxxx-xxxx-xxxx", "$error": hasError }),
                         hasError && (React.createElement(InputErrorText, null, getIn(formik.errors, 'ORCID')))));
                 })),
             React.createElement(FormRow, null,