@manuscripts/body-editor 3.13.5 → 3.13.7

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

@@ -157,6 +157,6 @@ export const DraggableAuthor = React.memo(({ author, isSelected, onClick, onDele
             React.createElement(AuthorNotes, { "data-cy": "author-notes" }, author.isCorresponding && (React.createElement(AuthorBadge, null,
                 React.createElement(CorrespondingAuthorIcon, null))))),
         React.createElement(AuthorName, { "data-cy": "author-name" }, authorLabel(author)),
-        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/awards/AwardForm.js

@@ -101,7 +101,7 @@ const SearchIconContainer = styled.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};
   }
@@ -112,10 +112,10 @@ const OptionWrapper = styled.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';
@@ -126,11 +126,11 @@ const OptionWrapper = styled.div `
   }
 `;
 const Option = ({ innerProps, innerRef, data, isFocused, isSelected, }) => {
-    return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
+    return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, "$focused": isFocused, "$selected": isSelected }, data.label));
 };
 const Control = ({ children, ...props }) => {
     return (React.createElement(components.Control, { ...props },
-        React.createElement(SearchIconContainer, { isFocused: props.isFocused },
+        React.createElement(SearchIconContainer, { "$isFocused": props.isFocused },
             React.createElement(SearchIcon, null)),
         children));
 };

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

@@ -28,7 +28,7 @@ export const AwardModal = ({ initialData, onSaveAward, }) => {
         React.createElement(ModalContainer, { "data-cy": "award-modal" },
             React.createElement(ModalHeader, null,
                 React.createElement(CloseButton, { onClick: handleClose, "data-cy": "modal-close-button" })),
-            React.createElement(ModalCardBody, { width: 480 },
+            React.createElement(ModalCardBody, { "$width": 480 },
                 React.createElement(ModalTitle, null, "Add Funder information"),
                 React.createElement(AwardForm, { values: normalizedValues, onSave: handleSave, onCancel: handleClose, onChange: handleChange })))));
 };

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

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

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

@@ -30,7 +30,7 @@ export const OutlineItem = styled.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;
@@ -38,7 +38,7 @@ export const OutlineItem = styled.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/es/components/references/CitationEditor.js

@@ -20,9 +20,9 @@ const CitedItemActions = styled.div `
   }
 `;
 const ActionButton = styled(IconButton).attrs({
-    size: 24,
+    $size: 24,
 }) `
-  :disabled {
+  &:disabled {
     background-color: transparent !important;
     border-color: transparent !important;
     color: rgb(255, 255, 255);
@@ -31,8 +31,8 @@ const ActionButton = styled(IconButton).attrs({
       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/es/components/references/ImportBibliographyForm.js

@@ -92,7 +92,7 @@ export const ImportBibliographyForm = ({ onCancel, onSave, }) => {
             React.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.createElement("input", { id: "file", name: "file", type: "file", ref: fileInputRef, onChange: handleFileChange, style: { display: 'none' } }),
                 React.createElement(Label, { htmlFor: "file" }, "Drag & Drop or Click here to upload a file."))),
         React.createElement(FormRow, null,
@@ -123,7 +123,7 @@ const DropContainer = styled.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/es/components/references/ImportBibliographyModal.js

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

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

@@ -10,10 +10,10 @@ export const PersonDropDown = (props) => {
     const prefix = `${type}.${index}`;
     return (React.createElement(Section, null,
         React.createElement(Title, null,
-            React.createElement(ToggleButton, { type: "button", onClick: () => setIsOpen(!isOpen), isOpen: isOpen },
+            React.createElement(ToggleButton, { type: "button", onClick: () => setIsOpen(!isOpen), "$isOpen": isOpen },
                 React.createElement(DropdownIndicator, null),
                 title),
-            React.createElement(RemoveButton, { size: 13, type: "button", "aria-label": "Delete this editor", onClick: () => remove(index) },
+            React.createElement(RemoveButton, { "$size": 13, type: "button", "aria-label": "Delete this editor", onClick: () => remove(index) },
                 React.createElement(DeleteIcon, null))),
         isOpen && (React.createElement(PersonForm, null,
             React.createElement(FormRow, null,

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

@@ -76,7 +76,7 @@ export const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel
                 React.createElement(ButtonGroup, null,
                     React.createElement(IconButton, { as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
                         React.createElement(LinkIcon, null)),
-                    React.createElement(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.createElement(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.createElement(DeleteIcon, null))),
                 React.createElement(ButtonGroup, null,
                     React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
@@ -94,7 +94,7 @@ export const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel
                 shouldRenderField('std', formik.values.type) && (React.createElement(FormRow, null,
                     React.createElement(Label, { htmlFor: 'std' }, "Standard"),
                     React.createElement(Field, { name: 'std' }, (props) => (React.createElement(ReferenceTextArea, { id: 'std', ...props.field }))))),
-                shouldRenderField('author', formik.values.type) && (React.createElement(FieldArray, { name: 'author', render: ({ push, remove }) => (React.createElement(FormRow, { direction: "row", justify: "space-between", align: "center" },
+                shouldRenderField('author', formik.values.type) && (React.createElement(FieldArray, { name: 'author', render: ({ push, remove }) => (React.createElement(FormRow, { "$direction": "row", "$justify": "space-between", "$align": "center" },
                         React.createElement(Label, null, "Authors"),
                         React.createElement(Button, { onClick: () => {
                                 setNewAuthorIndex(formik.values.author?.length);

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

@@ -1,8 +1,8 @@
 import { ArrowDownIcon, IconButton, outlineStyle, SecondaryIconButton, TextArea, TextField, } from '@manuscripts/style-guide';
 import styled from 'styled-components';
 export const Button = styled(IconButton).attrs({
-    defaultColor: true,
-    size: 24,
+    $defaultColor: true,
+    $size: 24,
 }) `
   circle,
   use {
@@ -66,8 +66,8 @@ export const Title = styled.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'};
 `;
 export const DropdownIndicator = styled(ArrowDownIcon) `
   border: 0;
@@ -94,7 +94,7 @@ export const ToggleButton = styled.button `
   }
 
   svg {
-    transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
+    transform: ${(props) => (props.$isOpen ? 'rotateX(180deg)' : 'initial')};
   }
   ${outlineStyle}
 `;

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

@@ -29,7 +29,7 @@ const ReferenceButton = withNavigableListItem(styled.div `
     fill: #c9c9c9;
   }
 
-  :hover {
+  &:hover {
     background: ${(props) => props.theme.colors.background.info};
   }
 

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

@@ -72,7 +72,7 @@ export const InsertEmbedDialog = ({ state, dispatch, pos, }) => {
                 " external media"),
             React.createElement(MessageContainer, null,
                 React.createElement(Container, null,
-                    React.createElement(FormRow, { direction: 'row' },
+                    React.createElement(FormRow, { "$direction": 'row' },
                         React.createElement(Label, { htmlFor: 'embed-link' }, "Media link"),
                         url && allowedHref(url) && (React.createElement(Open, { id: 'media-link', href: url, target: '_blank', rel: 'noopener' })),
                         React.createElement(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/es/components/toolbar/InsertTableDialog.js

@@ -39,10 +39,10 @@ const OptionWrapper = styled.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';
@@ -68,7 +68,7 @@ export const InsertTableDialog = ({ state, dispatch, }) => {
         label: `${index + 1}`,
     }));
     const OptionComponent = ({ innerProps, data, innerRef, isFocused, isSelected, }) => {
-        return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
+        return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, "$focused": isFocused, "$selected": isSelected }, data.label));
     };
     const actions = {
         primary: {

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

@@ -62,7 +62,7 @@ export const ListStyles = ({ styles, onClick, styleRefs, }) => {
                 onClick(style, index);
             }
         }, tabIndex: 0 }, styleItems[style].map((item, index) => (React.createElement(BlockItem, { key: index },
-        React.createElement(Label, { hide: item === '-' }, item),
+        React.createElement(Label, { "$hide": item === '-' }, item),
         React.createElement(Block, null)))))))));
 };
 const styleItems = {
@@ -119,5 +119,5 @@ export const Label = styled.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/es/components/toolbar/type-selector/OptionComponent.js

@@ -10,7 +10,7 @@ const OptionContainer = styled.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};
@@ -19,7 +19,7 @@ const OptionContainer = styled.div `
 const OptionLabel = styled.span ``;
 const TickIconWrapper = styled.div ``;
 export const OptionComponent = ({ innerProps, data, isFocused, innerRef, }) => {
-    return (React.createElement(OptionContainer, { ...innerProps, isFocused: isFocused, ref: innerRef },
+    return (React.createElement(OptionContainer, { ...innerProps, "$isFocused": isFocused, ref: innerRef },
         React.createElement(OptionLabel, null, titleCase(optionName(data.nodeType))),
         data.isSelected && (React.createElement(TickIconWrapper, null,
             React.createElement(TickIcon, null)))));

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

@@ -38,16 +38,16 @@ const Items = withListNavigation(styled.div `
 const CrossReferenceItem = withNavigableListItem(styled.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};
@@ -99,7 +99,7 @@ export const CrossReferenceItems = ({ targets, handleSelect, handleCancel, curre
     }, [currentTargetId]);
     return (React.createElement(Container, null,
         React.createElement(Heading, null, "Insert Cross-reference"),
-        React.createElement(Items, null, targets.length ? (targets.map((target) => (React.createElement(CrossReferenceItem, { key: target.id, isSelected: selectedItem === target.id, onClick: () => setSelectedItem(target.id) },
+        React.createElement(Items, null, targets.length ? (targets.map((target) => (React.createElement(CrossReferenceItem, { key: target.id, "$isSelected": selectedItem === target.id, onClick: () => setSelectedItem(target.id) },
             React.createElement(DefaultLabelWrapper, null,
                 React.createElement(Label, null, target.label),
                 React.createElement(Caption, null, target.caption && ': ' + trimmedCaption(target.caption, 200))),

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

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

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

@@ -40,7 +40,7 @@ const InsertSpecialCharacterDialog = ({ view }) => {
                         React.createElement(PrimaryButton, { onClick: handleClose }, "Close")))))));
 };
 const OptionComponent = ({ innerProps, innerRef, data, isFocused, isSelected, }) => {
-    return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
+    return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, "$focused": isFocused, "$selected": isSelected }, data.label));
 };
 const Container = styled(ModalContainer) `
   padding: 8px;
@@ -65,10 +65,10 @@ const OptionWrapper = styled.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';
@@ -94,13 +94,13 @@ const Character = withNavigableListItem(styled(IconButton) `
   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/es/components/views/LinkForm.js

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

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

@@ -115,10 +115,10 @@ const ActionButton = styled(IconTextButton) `
   padding: 8px 16px;
   justify-content: flex-start;
 
-  :hover {
+  &:hover {
     background: #f2fbfc;
   }
-  :disabled {
+  &:disabled {
     color: #353535;
     background-color: #ffffff;
     opacity: 0.4;

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

@@ -8,6 +8,7 @@ import sectionCategories from '../../testing/section-categories.json';
 import { PopperManager } from '../popper';
 import { getMatchingDescendant } from '../utils';
 import jsonDoc from './__fixtures__/doc.json';
+import { defaultTheme } from '@manuscripts/style-guide';
 const userProfile = {
     _id: 'MPUserProfile:1',
     userID: 'MPUser:1',
@@ -23,7 +24,7 @@ const buildProps = (doc) => ({
     setComment: () => undefined,
     setSelectedComment: () => undefined,
     setEditorSelectedSuggestion: () => undefined,
-    theme: {},
+    theme: defaultTheme,
     getFiles: () => [],
     fileManagement: {
         download: () => undefined,

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

@@ -19,6 +19,7 @@ import { PopperManager } from '../lib/popper';
 import { defaultCapabilities } from './default-capabilities';
 import emptyEditorDocJson from './empty-editor-doc.json';
 import sectionCategories from './section-categories.json';
+import { defaultTheme } from '@manuscripts/style-guide';
 export const defaultEditorProps = {
     attributes: {
         class: 'manuscript-editor',
@@ -36,7 +37,7 @@ export const defaultEditorProps = {
         userID: '',
     }),
     history: createBrowserHistory(),
-    theme: {},
+    theme: defaultTheme,
     getFiles: () => [],
     fileManagement: {
         upload: () => { },

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.13.5';
+export const VERSION = '3.13.7';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/components/ChangeHandlingForm.d.ts

@@ -5,4 +5,4 @@ export interface ChangeHandlingFormProps<Values> extends Omit<React.FormHTMLAttr
     formRef?: MutableRefObject<HTMLFormElement | null>;
 }
 export declare const ChangeHandlingForm: <Values>(props: PropsWithChildren<ChangeHandlingFormProps<Values>>) => React.JSX.Element;
-export declare const FlexForm: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>, any, {}, never>;
+export declare const FlexForm: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>, import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/authors/AuthorDetailsForm.d.ts

@@ -36,11 +36,11 @@ interface AuthorDetailsFormProps {
     requiredContinueActive?: boolean;
 }
 export declare const AuthorDetailsForm: React.FC<AuthorDetailsFormProps>;
-export declare const Fieldset: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
-export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledFormGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledFormRow: import("styled-components").StyledComponent<"div", any, {
-    direction?: "row" | "column";
-    justify?: string;
-    align?: string;
+export declare const Fieldset: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
+export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFormGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFormRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $direction?: "row" | "column";
+    $justify?: string;
+    $align?: string;
 }, never>;

package/dist/types/components/form/CreateModalStyles.d.ts

@@ -1,4 +1,4 @@
 export declare const MODAL_ON_CLOSE_NOTIFY_DELAY_MS = 220;
-export declare const StyledModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FormTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
-export declare const StyledScrollableModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FormTitle: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledScrollableModalContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/form/UnsavedLabel.d.ts

@@ -5,6 +5,6 @@ interface UnsavedLabelProps {
     children: React.ReactNode;
 }
 export declare const UnsavedLabel: React.FC<UnsavedLabelProps>;
-export declare const UnsavedLabelRow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FieldUnsavedDot: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const UnsavedLabelRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FieldUnsavedDot: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/types/components/modal-drawer/GenericDrawerGroup.d.ts

@@ -39,15 +39,14 @@ interface EmbeddedDrawerProps<T extends Base> {
     onSelect: (id: string) => void;
 }
 export declare function DrawerGroup<T extends Base>({ removeItem, selectedItems, onSelect, items, showDrawer, setShowDrawer, title, labelField, Drawer, cy, Icon, buttonText, }: DrawerGroupProps<T>): React.JSX.Element;
-export declare const AssignButton: import("styled-components").StyledComponent<"button", any, {
+export declare const AssignButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     type: "button" | "submit" | "reset";
 } & {
-    danger?: boolean;
-    disabled?: boolean;
-    mini?: boolean;
+    $danger?: boolean;
+    $mini?: boolean;
 } & {
-    defaultColor?: boolean;
-    size?: number;
-    iconColor?: string;
+    $defaultColor?: boolean;
+    $size?: number;
+    $iconColor?: string;
 }, "type">;
 export {};

package/dist/types/components/outline/Outline.d.ts

@@ -13,13 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const OutlineItemIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const OutlineItem: import("styled-components").StyledComponent<"div", any, {
-    depth: number;
+export declare const OutlineItemIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const OutlineItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $depth: number;
 }, never>;
-export declare const OutlineItemArrow: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const OutlineItemNoArrow: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const OutlineItemLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>>, any, {}, never>;
-export declare const OutlineItemLinkText: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Outline: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const OutlineItemPlaceholder: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const OutlineItemArrow: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const OutlineItemNoArrow: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const OutlineItemLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const OutlineItemLinkText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const Outline: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const OutlineItemPlaceholder: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/references/CitationViewer.d.ts

@@ -15,8 +15,8 @@
  */
 import { BibliographyItemAttrs } from '@manuscripts/transform';
 import React from 'react';
-export declare const CitedItems: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CitedItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CitedItems: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CitedItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export interface CitationViewerProps {
     rids: string[];
     items: BibliographyItemAttrs[];