@manuscripts/body-editor 3.18.1 → 3.18.2

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

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CitationEditor = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const transform_1 = require("@manuscripts/transform");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -52,33 +53,6 @@ const CitedItemActions = styled_components_1.default.div `
   display: flex;
   align-items: center;
   margin-left: 12px;
-
-  svg.remove-icon {
-    color: #6e6e6e;
-  }
-`;
-const ActionButton = (0, styled_components_1.default)(style_guide_1.IconButton).attrs({
-    $size: 24,
-}) `
-  &:disabled {
-    background-color: transparent !important;
-    border-color: transparent !important;
-    color: rgb(255, 255, 255);
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.background.tertiary} !important;
-    }
-  }
-  &:not(:disabled):focus,
-  &:not(:disabled):hover {
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.brand.medium} !important;
-    }
-  }
-`;
-const EditReferenceButton = (0, styled_components_1.default)(ActionButton) `
-  margin-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
 const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   margin: ${(props) => props.theme.grid.unit * 4}px;
@@ -182,15 +156,15 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
                     title: 'Cancel',
                 },
             } }),
-        react_1.default.createElement(CitationViewer_1.CitedItems, null, cited.map((item) => (react_1.default.createElement(CitationViewer_1.CitedItem, { key: item.id },
+        react_1.default.createElement(CitationViewer_1.CitedItems, null, cited.map((item) => (react_1.default.createElement(CitationViewer_1.CitedItem, { key: item.id, "data-cy": "cited-item" },
             react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item }),
             react_1.default.createElement(CitedItemActions, null,
-                react_1.default.createElement(EditReferenceButton, { value: item.id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
-                    react_1.default.createElement(style_guide_1.EditIcon, null)),
-                react_1.default.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
-                    react_1.default.createElement(style_guide_1.DeleteSolidIcon, { className: 'remove-icon' }))))))),
+                react_1.default.createElement(mui_1.IconButton, { value: item.id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
+                    react_1.default.createElement(style_guide_1.EditIcon, { fill: 'currentColor' })),
+                react_1.default.createElement(mui_1.IconButton, { "data-cy": "remove-citation", disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
+                    react_1.default.createElement(style_guide_1.DeleteSolidIcon, { fill: 'currentColor' }))))))),
         react_1.default.createElement(Actions, null,
-            react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Done"),
-            react_1.default.createElement(style_guide_1.PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
+            react_1.default.createElement(mui_1.Button, { variant: "secondary", onClick: onCancel }, "Done"),
+            react_1.default.createElement(mui_1.Button, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
 };
 exports.CitationEditor = CitationEditor;

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

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FigureOptions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const files_1 = require("../../lib/files");
@@ -138,20 +139,20 @@ 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 },
-            showReplace && isEmbedMode && (react_1.default.createElement(ListItemButton, { onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
+            showReplace && isEmbedMode && (react_1.default.createElement(ListItemButton, { variant: "tertiary", 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) },
+                    getSupplements(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (react_1.default.createElement(ListItemButton, { variant: "tertiary", key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
                         (0, style_guide_1.getFileIcon)(file.name),
                         react_1.default.createElement(ListItemText, null, file.name)))),
-                    getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                    getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (react_1.default.createElement(ListItemButton, { variant: "tertiary", key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         (0, style_guide_1.getFileIcon)(file.name),
                         react_1.default.createElement(ListItemText, null, file.name)))),
-                    showUpload && (react_1.default.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
+                    showUpload && (react_1.default.createElement(UploadButton, { variant: "tertiary", onClick: onUpload, disabled: !showUpload },
                         react_1.default.createElement(style_guide_1.UploadIcon, null),
                         " Upload new..."))) })),
-            showDownload && (react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download")),
-            showDetach && (react_1.default.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")),
-            showDelete() && (react_1.default.createElement(ListItemButton, { onClick: onDelete }, "Delete"))))));
+            showDownload && (react_1.default.createElement(ListItemButton, { variant: "tertiary", onClick: onDownload, disabled: !showDownload }, "Download")),
+            showDetach && (react_1.default.createElement(ListItemButton, { variant: "tertiary", onClick: onDetach, disabled: !showDetach }, "Detach")),
+            showDelete() && (react_1.default.createElement(ListItemButton, { variant: "tertiary", onClick: onDelete }, "Delete"))))));
 };
 exports.FigureOptions = FigureOptions;
 const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {
@@ -164,7 +165,7 @@ const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft
     }, [toggleOpen, wrapperRef]);
     useDropdownKeyboardNav(isOpen, nestedListRef, handleArrowLeft, handleArrowLeft);
     return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
-        react_1.default.createElement(NestedListButton, { className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
+        react_1.default.createElement(NestedListButton, { variant: "tertiary", className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
                 if (e.key === 'ArrowRight') {
                     e.preventDefault();
                     toggleOpen();
@@ -181,26 +182,18 @@ const DropdownWrapper = styled_components_1.default.div ``;
 const OptionsDropdownList = (0, styled_components_1.default)(style_guide_1.DropdownList) `
   right: 4%;
 `;
-const OptionsButton = (0, styled_components_1.default)(style_guide_1.IconButton) `
-  border: 1px solid #e2e2e2 !important;
-  box-sizing: border-box;
-  border-radius: 50%;
-  width: ${(props) => props.theme.grid.unit * 6}px;
-  height: ${(props) => props.theme.grid.unit * 6}px;
-  margin: ${(props) => props.theme.grid.unit}px;
-  visibility: hidden;
-  background: #ffffff;
-
-  &:hover {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
+const OptionsButton = (0, styled_components_1.default)(mui_1.IconButton).attrs({
+    size: 'small',
+    bordered: true,
+}) `
+  && {
+    margin: ${(props) => props.theme.grid.unit}px;
+    visibility: hidden;
+    background: #ffffff;
   }
 
   &:active,
   &:focus {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
-
     circle {
       fill: #1a9bc7;
     }
@@ -210,14 +203,12 @@ const OptionsButton = (0, styled_components_1.default)(style_guide_1.IconButton)
     fill: #6e6e6e;
   }
 `;
-const ListItemButton = (0, styled_components_1.default)(style_guide_1.IconTextButton) `
-  padding: 16px 14px;
-  justify-content: space-between;
-  align-items: center;
-
-  &:hover,
-  &:focus-visible {
-    background: #f2fbfc;
+const ListItemButton = (0, styled_components_1.default)(mui_1.Button) `
+  && {
+    padding: 16px 14px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
   }
 
   &:is([disabled]) {
@@ -247,12 +238,12 @@ const NestedListDropdownList = (0, styled_components_1.default)(style_guide_1.Dr
   top: 0;
   ${(props) => (props.$moveLeft && 'right: 30%;') || 'left: 100%;'}
 `;
-const UploadButton = (0, styled_components_1.default)(style_guide_1.IconTextButton) `
-  border-top: 1px solid #f2f2f2;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-  justify-content: flex-start;
-
-  &:focus-visible {
-    background: #f2fbfc;
+const UploadButton = (0, styled_components_1.default)(mui_1.Button) `
+  && {
+    border-top: 1px solid #f2f2f2;
+    padding: ${(props) => props.theme.grid.unit * 4}px;
+    justify-content: flex-start;
+    width: 100%;
+    border-radius: 0;
   }
 `;

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

@@ -53,6 +53,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FootnotesSelector = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -117,12 +118,10 @@ const FootnotesSelector = ({ footnotes, inlineFootnote, labels, onAdd, onInsert,
             react_1.default.createElement(FootnotesList, { footnotes: footnotes, inlineFootnote: inlineFootnote, labels: labels, isSelected: isSelected, onSelect: toggleSelection })),
         react_1.default.createElement(Actions, null,
             react_1.default.createElement(AddNewFootnote, null,
-                react_1.default.createElement(style_guide_1.IconTextButton, { onClick: onAdd },
-                    react_1.default.createElement(style_guide_1.AddNewIcon, null),
-                    "Add new")),
+                react_1.default.createElement(mui_1.Button, { variant: "tertiary", onClick: onAdd, startIcon: react_1.default.createElement(style_guide_1.AddNewIcon, null) }, "Add new")),
             react_1.default.createElement(style_guide_1.ButtonGroup, null,
-                react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
-                react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
+                react_1.default.createElement(mui_1.Button, { variant: "secondary", onClick: onCancel }, "Cancel"),
+                react_1.default.createElement(mui_1.Button, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
 };
 exports.FootnotesSelector = FootnotesSelector;
 const FootnotesList = ({ footnotes, inlineFootnote, labels, isSelected, onSelect }) => {

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

@@ -53,6 +53,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkForm = exports.Open = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const url_1 = require("../../lib/url");
@@ -70,7 +71,7 @@ const ActionGroup = styled_components_1.default.span `
     margin-right: 4px;
   }
 `;
-const RemoveButton = (0, styled_components_1.default)(style_guide_1.SecondaryButton) `
+const RemoveButton = (0, styled_components_1.default)(mui_1.Button) `
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -156,11 +157,11 @@ const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
                 react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'title', value: title, autoComplete: 'off', required: false, onChange: (e) => setTitle(e.target.value) })),
             react_1.default.createElement(Actions, null,
                 react_1.default.createElement(ActionGroup, null,
-                    react_1.default.createElement(RemoveButton, { type: 'button', onClick: onRemove },
+                    react_1.default.createElement(RemoveButton, { variant: "secondary", type: 'button', onClick: onRemove },
                         react_1.default.createElement(style_guide_1.DeleteIcon, null),
                         react_1.default.createElement("span", null, "Remove Link"))),
                 react_1.default.createElement(ActionGroup, null,
-                    react_1.default.createElement(style_guide_1.SecondaryButton, { type: 'button', onClick: onCancel }, "Cancel"),
-                    react_1.default.createElement(style_guide_1.PrimaryButton, { type: 'submit' }, "Save"))))));
+                    react_1.default.createElement(mui_1.Button, { variant: "secondary", type: 'button', onClick: onCancel }, "Cancel"),
+                    react_1.default.createElement(mui_1.Button, { type: 'submit' }, "Save"))))));
 };
 exports.LinkForm = LinkForm;

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

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_tables_1 = require("prosemirror-tables");
@@ -91,45 +92,45 @@ const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
         }
     };
     return (react_1.default.createElement(MenuDropdownList, { className: 'table-ctx' },
-        react_1.default.createElement(ActionButton, { disabled: isHeaderCellSelected(view.state), onClick: () => runCommand((0, commands_1.addRows)('top')) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", disabled: isHeaderCellSelected(view.state), onClick: () => runCommand((0, commands_1.addRows)('top')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
             rows,
             " above"),
-        react_1.default.createElement(ActionButton, { onClick: () => runCommand((0, commands_1.addRows)('bottom')) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand((0, commands_1.addRows)('bottom')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
             rows,
             " below"),
-        react_1.default.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => (0, commands_1.addColumns)('left')) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => (0, commands_1.addColumns)('left')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
             columns,
             " to the left"),
-        react_1.default.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => (0, commands_1.addColumns)('right')) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => (0, commands_1.addColumns)('right')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
             columns,
             " to the right"),
         react_1.default.createElement(Separator, null),
-        react_1.default.createElement(ActionButton, { disabled: count.rows !== 1, onClick: () => runCommand((0, commands_1.addHeaderRow)(headerPosition)) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", disabled: count.rows !== 1, onClick: () => runCommand((0, commands_1.addHeaderRow)(headerPosition)) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert header row ",
             headerPosition),
         react_1.default.createElement(Separator, null),
-        react_1.default.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setRowDeleteAction, () => prosemirror_tables_1.deleteRow) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setRowDeleteAction, () => prosemirror_tables_1.deleteRow) },
             react_1.default.createElement(GrayDeleteIcon, null),
             " Delete",
             isHeaderCellSelected(view.state) ? ' header ' : '',
             " ",
             rows),
-        react_1.default.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => prosemirror_tables_1.deleteColumn) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => prosemirror_tables_1.deleteColumn) },
             react_1.default.createElement(GrayDeleteIcon, null),
             " Delete ",
             columns),
         (isCellSelectionMerged || isCellSelectionSplittable) && react_1.default.createElement(Separator, null),
-        isCellSelectionMerged && (react_1.default.createElement(ActionButton, { onClick: () => runCommand(prosemirror_tables_1.mergeCells, true) }, "Merge cells")),
-        isCellSelectionSplittable && (react_1.default.createElement(ActionButton, { onClick: () => runCommand(prosemirror_tables_1.splitCell, true) }, "Split cells")),
+        isCellSelectionMerged && (react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(prosemirror_tables_1.mergeCells, true) }, "Merge cells")),
+        isCellSelectionSplittable && (react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(prosemirror_tables_1.splitCell, true) }, "Split cells")),
         react_1.default.createElement(TableChangeWarningDialog, { isOpen: !!rowDeleteAction, primaryAction: () => {
                 if (rowDeleteAction) {
                     runCommand(rowDeleteAction, true);
@@ -151,12 +152,11 @@ const MenuDropdownList = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
 `;
-const ActionButton = (0, styled_components_1.default)(style_guide_1.IconTextButton) `
-  padding: 8px 16px;
-  justify-content: flex-start;
-
-  &:hover {
-    background: #f2fbfc;
+const ActionButton = (0, styled_components_1.default)(mui_1.Button) `
+  && {
+    padding: 8px 16px;
+    justify-content: flex-start;
+    width: 100%;
   }
   &:disabled {
     color: #353535;

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.18.1';
+exports.VERSION = '3.18.2';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/ReactSubView.js

@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSubViewAsync = createSubViewAsync;
+const mui_1 = require("@manuscripts/style-guide/mui");
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = require("react-dom");
 const client_1 = require("react-dom/client");
@@ -46,8 +47,9 @@ function createView(props, Component, componentProps, node, getPos, view, classN
             }).setSelection(selection.map(tr.doc, tr.mapping));
             view.dispatch(tr);
         };
-        return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: props.theme },
-            react_1.default.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps })));
+        return (react_1.default.createElement(mui_1.MuiThemeProvider, { theme: mui_1.muiTheme },
+            react_1.default.createElement(styled_components_1.ThemeProvider, { theme: props.theme },
+                react_1.default.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps }))));
     };
     return Wrapped;
 }

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

@@ -1,4 +1,5 @@
-import { ButtonGroup, Category, DeleteSolidIcon, Dialog, EditIcon, IconButton, PrimaryButton, SecondaryButton, withFocusTrap, } from '@manuscripts/style-guide';
+import { ButtonGroup, Category, DeleteSolidIcon, Dialog, EditIcon, withFocusTrap, } from '@manuscripts/style-guide';
+import { Button, IconButton } from '@manuscripts/style-guide/mui';
 import { generateNodeID, schema, } from '@manuscripts/transform';
 import React, { useMemo, useReducer, useState } from 'react';
 import styled from 'styled-components';
@@ -13,33 +14,6 @@ const CitedItemActions = styled.div `
   display: flex;
   align-items: center;
   margin-left: 12px;
-
-  svg.remove-icon {
-    color: #6e6e6e;
-  }
-`;
-const ActionButton = styled(IconButton).attrs({
-    $size: 24,
-}) `
-  &:disabled {
-    background-color: transparent !important;
-    border-color: transparent !important;
-    color: rgb(255, 255, 255);
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.background.tertiary} !important;
-    }
-  }
-  &:not(:disabled):focus,
-  &:not(:disabled):hover {
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.brand.medium} !important;
-    }
-  }
-`;
-const EditReferenceButton = styled(ActionButton) `
-  margin-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
 const Actions = styled(ButtonGroup) `
   margin: ${(props) => props.theme.grid.unit * 4}px;
@@ -143,14 +117,14 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
                     title: 'Cancel',
                 },
             } }),
-        React.createElement(CitedItems, null, cited.map((item) => (React.createElement(CitedItem, { key: item.id },
+        React.createElement(CitedItems, null, cited.map((item) => (React.createElement(CitedItem, { key: item.id, "data-cy": "cited-item" },
             React.createElement(ReferenceLine, { item: item }),
             React.createElement(CitedItemActions, null,
-                React.createElement(EditReferenceButton, { value: item.id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
-                    React.createElement(EditIcon, null)),
-                React.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
-                    React.createElement(DeleteSolidIcon, { className: 'remove-icon' }))))))),
+                React.createElement(IconButton, { value: item.id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
+                    React.createElement(EditIcon, { fill: 'currentColor' })),
+                React.createElement(IconButton, { "data-cy": "remove-citation", disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
+                    React.createElement(DeleteSolidIcon, { fill: 'currentColor' }))))))),
         React.createElement(Actions, null,
-            React.createElement(SecondaryButton, { onClick: onCancel }, "Done"),
-            React.createElement(PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
+            React.createElement(Button, { variant: "secondary", onClick: onCancel }, "Done"),
+            React.createElement(Button, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
 };

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

@@ -1,4 +1,5 @@
-import { DotsIcon, DropdownList, getFileIcon, IconButton, IconTextButton, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
+import { DotsIcon, DropdownList, getFileIcon, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
+import { Button, IconButton } from '@manuscripts/style-guide/mui';
 import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { memoGroupFiles, } from '../../lib/files';
@@ -99,20 +100,20 @@ 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 },
-            showReplace && isEmbedMode && (React.createElement(ListItemButton, { onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
+            showReplace && isEmbedMode && (React.createElement(ListItemButton, { variant: "tertiary", 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) },
+                    getSupplements(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (React.createElement(ListItemButton, { variant: "tertiary", key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
                         getFileIcon(file.name),
                         React.createElement(ListItemText, null, file.name)))),
-                    getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                    getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (React.createElement(ListItemButton, { variant: "tertiary", key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         getFileIcon(file.name),
                         React.createElement(ListItemText, null, file.name)))),
-                    showUpload && (React.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
+                    showUpload && (React.createElement(UploadButton, { variant: "tertiary", onClick: onUpload, disabled: !showUpload },
                         React.createElement(UploadIcon, null),
                         " Upload new..."))) })),
-            showDownload && (React.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download")),
-            showDetach && (React.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")),
-            showDelete() && (React.createElement(ListItemButton, { onClick: onDelete }, "Delete"))))));
+            showDownload && (React.createElement(ListItemButton, { variant: "tertiary", onClick: onDownload, disabled: !showDownload }, "Download")),
+            showDetach && (React.createElement(ListItemButton, { variant: "tertiary", onClick: onDetach, disabled: !showDetach }, "Detach")),
+            showDelete() && (React.createElement(ListItemButton, { variant: "tertiary", onClick: onDelete }, "Delete"))))));
 };
 const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
@@ -124,7 +125,7 @@ const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft
     }, [toggleOpen, wrapperRef]);
     useDropdownKeyboardNav(isOpen, nestedListRef, handleArrowLeft, handleArrowLeft);
     return (React.createElement(DropdownWrapper, { ref: wrapperRef },
-        React.createElement(NestedListButton, { className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
+        React.createElement(NestedListButton, { variant: "tertiary", className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
                 if (e.key === 'ArrowRight') {
                     e.preventDefault();
                     toggleOpen();
@@ -141,26 +142,18 @@ const DropdownWrapper = styled.div ``;
 const OptionsDropdownList = styled(DropdownList) `
   right: 4%;
 `;
-const OptionsButton = styled(IconButton) `
-  border: 1px solid #e2e2e2 !important;
-  box-sizing: border-box;
-  border-radius: 50%;
-  width: ${(props) => props.theme.grid.unit * 6}px;
-  height: ${(props) => props.theme.grid.unit * 6}px;
-  margin: ${(props) => props.theme.grid.unit}px;
-  visibility: hidden;
-  background: #ffffff;
-
-  &:hover {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
+const OptionsButton = styled(IconButton).attrs({
+    size: 'small',
+    bordered: true,
+}) `
+  && {
+    margin: ${(props) => props.theme.grid.unit}px;
+    visibility: hidden;
+    background: #ffffff;
   }
 
   &:active,
   &:focus {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
-
     circle {
       fill: #1a9bc7;
     }
@@ -170,14 +163,12 @@ const OptionsButton = styled(IconButton) `
     fill: #6e6e6e;
   }
 `;
-const ListItemButton = styled(IconTextButton) `
-  padding: 16px 14px;
-  justify-content: space-between;
-  align-items: center;
-
-  &:hover,
-  &:focus-visible {
-    background: #f2fbfc;
+const ListItemButton = styled(Button) `
+  && {
+    padding: 16px 14px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
   }
 
   &:is([disabled]) {
@@ -207,12 +198,12 @@ const NestedListDropdownList = styled(DropdownList) `
   top: 0;
   ${(props) => (props.$moveLeft && 'right: 30%;') || 'left: 100%;'}
 `;
-const UploadButton = styled(IconTextButton) `
-  border-top: 1px solid #f2f2f2;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-  justify-content: flex-start;
-
-  &:focus-visible {
-    background: #f2fbfc;
+const UploadButton = styled(Button) `
+  && {
+    border-top: 1px solid #f2f2f2;
+    padding: ${(props) => props.theme.grid.unit * 4}px;
+    justify-content: flex-start;
+    width: 100%;
+    border-radius: 0;
   }
 `;

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

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddedIcon, AddIcon, AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import { AddedIcon, AddIcon, AddNewIcon, ButtonGroup, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import { Button } from '@manuscripts/style-guide/mui';
 import { isDeleted } from '@manuscripts/track-changes-plugin';
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -78,12 +79,10 @@ export const FootnotesSelector = ({ footnotes, inlineFootnote, labels, onAdd, on
             React.createElement(FootnotesList, { footnotes: footnotes, inlineFootnote: inlineFootnote, labels: labels, isSelected: isSelected, onSelect: toggleSelection })),
         React.createElement(Actions, null,
             React.createElement(AddNewFootnote, null,
-                React.createElement(IconTextButton, { onClick: onAdd },
-                    React.createElement(AddNewIcon, null),
-                    "Add new")),
+                React.createElement(Button, { variant: "tertiary", onClick: onAdd, startIcon: React.createElement(AddNewIcon, null) }, "Add new")),
             React.createElement(ButtonGroup, null,
-                React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
-                React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
+                React.createElement(Button, { variant: "secondary", onClick: onCancel }, "Cancel"),
+                React.createElement(Button, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
 };
 const FootnotesList = ({ footnotes, inlineFootnote, labels, isSelected, onSelect }) => {
     const rids = inlineFootnote?.attrs.rids;

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

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DeleteIcon, FormContainer, FormRow, Label, PrimaryButton, SecondaryButton, TextField, InputErrorText, withFocusTrap, } from '@manuscripts/style-guide';
+import { DeleteIcon, FormContainer, FormRow, Label, TextField, InputErrorText, withFocusTrap, } from '@manuscripts/style-guide';
+import { Button } from '@manuscripts/style-guide/mui';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { allowedHref } from '../../lib/url';
@@ -31,7 +32,7 @@ const ActionGroup = styled.span `
     margin-right: 4px;
   }
 `;
-const RemoveButton = styled(SecondaryButton) `
+const RemoveButton = styled(Button) `
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -117,10 +118,10 @@ export const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
                 React.createElement(TextField, { type: 'text', name: 'title', value: title, autoComplete: 'off', required: false, onChange: (e) => setTitle(e.target.value) })),
             React.createElement(Actions, null,
                 React.createElement(ActionGroup, null,
-                    React.createElement(RemoveButton, { type: 'button', onClick: onRemove },
+                    React.createElement(RemoveButton, { variant: "secondary", type: 'button', onClick: onRemove },
                         React.createElement(DeleteIcon, null),
                         React.createElement("span", null, "Remove Link"))),
                 React.createElement(ActionGroup, null,
-                    React.createElement(SecondaryButton, { type: 'button', onClick: onCancel }, "Cancel"),
-                    React.createElement(PrimaryButton, { type: 'submit' }, "Save"))))));
+                    React.createElement(Button, { variant: "secondary", type: 'button', onClick: onCancel }, "Cancel"),
+                    React.createElement(Button, { type: 'submit' }, "Save"))))));
 };

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

@@ -1,4 +1,5 @@
-import { Category, DeleteIcon, Dialog, IconTextButton, PlusIcon, } from '@manuscripts/style-guide';
+import { Category, DeleteIcon, Dialog, PlusIcon, } from '@manuscripts/style-guide';
+import { Button } from '@manuscripts/style-guide/mui';
 import { skipTracking } from '@manuscripts/track-changes-plugin';
 import { schema } from '@manuscripts/transform';
 import { CellSelection, deleteColumn, deleteRow, mergeCells, selectedRect, splitCell, } from 'prosemirror-tables';
@@ -52,45 +53,45 @@ export const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
         }
     };
     return (React.createElement(MenuDropdownList, { className: 'table-ctx' },
-        React.createElement(ActionButton, { disabled: isHeaderCellSelected(view.state), onClick: () => runCommand(addRows('top')) },
+        React.createElement(ActionButton, { variant: "tertiary", disabled: isHeaderCellSelected(view.state), onClick: () => runCommand(addRows('top')) },
             React.createElement(PlusIcon, null),
             " Insert ",
             rows,
             " above"),
-        React.createElement(ActionButton, { onClick: () => runCommand(addRows('bottom')) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(addRows('bottom')) },
             React.createElement(PlusIcon, null),
             " Insert ",
             rows,
             " below"),
-        React.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => addColumns('left')) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => addColumns('left')) },
             React.createElement(PlusIcon, null),
             " Insert ",
             columns,
             " to the left"),
-        React.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => addColumns('right')) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => addColumns('right')) },
             React.createElement(PlusIcon, null),
             " Insert ",
             columns,
             " to the right"),
         React.createElement(Separator, null),
-        React.createElement(ActionButton, { disabled: count.rows !== 1, onClick: () => runCommand(addHeaderRow(headerPosition)) },
+        React.createElement(ActionButton, { variant: "tertiary", disabled: count.rows !== 1, onClick: () => runCommand(addHeaderRow(headerPosition)) },
             React.createElement(PlusIcon, null),
             " Insert header row ",
             headerPosition),
         React.createElement(Separator, null),
-        React.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setRowDeleteAction, () => deleteRow) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setRowDeleteAction, () => deleteRow) },
             React.createElement(GrayDeleteIcon, null),
             " Delete",
             isHeaderCellSelected(view.state) ? ' header ' : '',
             " ",
             rows),
-        React.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => deleteColumn) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => deleteColumn) },
             React.createElement(GrayDeleteIcon, null),
             " Delete ",
             columns),
         (isCellSelectionMerged || isCellSelectionSplittable) && React.createElement(Separator, null),
-        isCellSelectionMerged && (React.createElement(ActionButton, { onClick: () => runCommand(mergeCells, true) }, "Merge cells")),
-        isCellSelectionSplittable && (React.createElement(ActionButton, { onClick: () => runCommand(splitCell, true) }, "Split cells")),
+        isCellSelectionMerged && (React.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(mergeCells, true) }, "Merge cells")),
+        isCellSelectionSplittable && (React.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(splitCell, true) }, "Split cells")),
         React.createElement(TableChangeWarningDialog, { isOpen: !!rowDeleteAction, primaryAction: () => {
                 if (rowDeleteAction) {
                     runCommand(rowDeleteAction, true);
@@ -111,12 +112,11 @@ const MenuDropdownList = styled.div `
   display: flex;
   flex-direction: column;
 `;
-const ActionButton = styled(IconTextButton) `
-  padding: 8px 16px;
-  justify-content: flex-start;
-
-  &:hover {
-    background: #f2fbfc;
+const ActionButton = styled(Button) `
+  && {
+    padding: 8px 16px;
+    justify-content: flex-start;
+    width: 100%;
   }
   &:disabled {
     color: #353535;

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.18.1';
+export const VERSION = '3.18.2';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/ReactSubView.js

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { MuiThemeProvider, muiTheme } from '@manuscripts/style-guide/mui';
 import React from 'react';
 import { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -40,8 +41,9 @@ function createView(props, Component, componentProps, node, getPos, view, classN
             }).setSelection(selection.map(tr.doc, tr.mapping));
             view.dispatch(tr);
         };
-        return (React.createElement(ThemeProvider, { theme: props.theme },
-            React.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps })));
+        return (React.createElement(MuiThemeProvider, { theme: muiTheme },
+            React.createElement(ThemeProvider, { theme: props.theme },
+                React.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps }))));
     };
     return Wrapped;
 }

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.18.1";
+export declare const VERSION = "3.18.2";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.18.1",
+  "version": "3.18.2",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,7 +41,7 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.7.2",
+    "@manuscripts/style-guide": "3.7.3",
     "@manuscripts/track-changes-plugin": "2.4.0",
     "@manuscripts/transform": "4.5.6",
     "@popperjs/core": "2.11.8",

package/src/components/references/CitationEditor.tsx

@@ -19,11 +19,9 @@ import {
   DeleteSolidIcon,
   Dialog,
   EditIcon,
-  IconButton,
-  PrimaryButton,
-  SecondaryButton,
   withFocusTrap,
 } from '@manuscripts/style-guide'
+import { Button, IconButton } from '@manuscripts/style-guide/mui'
 import {
   BibliographyItemAttrs,
   generateNodeID,
@@ -46,35 +44,6 @@ const CitedItemActions = styled.div`
   display: flex;
   align-items: center;
   margin-left: 12px;
-
-  svg.remove-icon {
-    color: #6e6e6e;
-  }
-`
-
-const ActionButton = styled(IconButton).attrs({
-  $size: 24,
-})`
-  &:disabled {
-    background-color: transparent !important;
-    border-color: transparent !important;
-    color: rgb(255, 255, 255);
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.background.tertiary} !important;
-    }
-  }
-  &:not(:disabled):focus,
-  &:not(:disabled):hover {
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.brand.medium} !important;
-    }
-  }
-`
-
-const EditReferenceButton = styled(ActionButton)`
-  margin-right: ${(props) => props.theme.grid.unit * 3}px;
 `
 
 const Actions = styled(ButtonGroup)`
@@ -261,31 +230,34 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
       />
       <CitedItems>
         {cited.map((item) => (
-          <CitedItem key={item.id}>
+          <CitedItem key={item.id} data-cy="cited-item">
             <ReferenceLine item={item} />
             <CitedItemActions>
-              <EditReferenceButton
+              <IconButton
                 value={item.id}
                 disabled={!canEdit}
                 onClick={() => setEditingForm({ show: true, item: item })}
               >
-                <EditIcon />
-              </EditReferenceButton>
-              <ActionButton
+                <EditIcon fill={'currentColor'} />
+              </IconButton>
+              <IconButton
+                data-cy="remove-citation"
                 disabled={!canEdit}
                 onClick={() => setDeleteDialog({ show: true, id: item.id })}
               >
-                <DeleteSolidIcon className={'remove-icon'} />
-              </ActionButton>
+                <DeleteSolidIcon fill={'currentColor'} />
+              </IconButton>
             </CitedItemActions>
           </CitedItem>
         ))}
       </CitedItems>
       <Actions>
-        <SecondaryButton onClick={onCancel}>Done</SecondaryButton>
-        <PrimaryButton disabled={!canEdit} onClick={() => setSearching(true)}>
+        <Button variant="secondary" onClick={onCancel}>
+          Done
+        </Button>
+        <Button disabled={!canEdit} onClick={() => setSearching(true)}>
           Add Citation
-        </PrimaryButton>
+        </Button>
       </Actions>
     </Container>
   )

package/src/components/views/FigureDropdown.tsx

@@ -17,12 +17,11 @@ import {
   DotsIcon,
   DropdownList,
   getFileIcon,
-  IconButton,
-  IconTextButton,
   TriangleCollapsedIcon,
   UploadIcon,
   useDropdown,
 } from '@manuscripts/style-guide'
+import { Button, IconButton } from '@manuscripts/style-guide/mui'
 import { FigureNode } from '@manuscripts/transform'
 import { Node as ManuscriptNode } from 'prosemirror-model'
 import React, { SyntheticEvent, useCallback, useEffect, useRef } from 'react'
@@ -140,6 +139,7 @@ function getOtherFiles(
 
 type WrappedProps = FigureOptionsProps & ReactViewComponentProps<FigureNode>
 
+// TODO: To be refactored with the new dropdown component
 export const FigureOptions: React.FC<WrappedProps> = ({
   can,
   getDoc,
@@ -221,7 +221,10 @@ export const FigureOptions: React.FC<WrappedProps> = ({
           ref={dropdownRef}
         >
           {showReplace && isEmbedMode && (
-            <ListItemButton onClick={() => onReplaceEmbed && onReplaceEmbed()}>
+            <ListItemButton
+              variant="tertiary"
+              onClick={() => onReplaceEmbed && onReplaceEmbed()}
+            >
               Edit Link
             </ListItemButton>
           )}
@@ -236,6 +239,7 @@ export const FigureOptions: React.FC<WrappedProps> = ({
                   {getSupplements(getFiles, getDoc, groupFiles, isEmbed).map(
                     (file, index) => (
                       <ListItemButton
+                        variant="tertiary"
                         key={file.id}
                         id={index.toString()}
                         onClick={() => onReplace && onReplace(file, true)}
@@ -248,6 +252,7 @@ export const FigureOptions: React.FC<WrappedProps> = ({
                   {getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map(
                     (file, index) => (
                       <ListItemButton
+                        variant="tertiary"
                         key={file.id}
                         id={index.toString()}
                         onClick={() => onReplace && onReplace(file)}
@@ -258,7 +263,11 @@ export const FigureOptions: React.FC<WrappedProps> = ({
                     )
                   )}
                   {showUpload && (
-                    <UploadButton onClick={onUpload} disabled={!showUpload}>
+                    <UploadButton
+                      variant="tertiary"
+                      onClick={onUpload}
+                      disabled={!showUpload}
+                    >
                       <UploadIcon /> Upload new...
                     </UploadButton>
                   )}
@@ -267,17 +276,27 @@ export const FigureOptions: React.FC<WrappedProps> = ({
             />
           )}
           {showDownload && (
-            <ListItemButton onClick={onDownload} disabled={!showDownload}>
+            <ListItemButton
+              variant="tertiary"
+              onClick={onDownload}
+              disabled={!showDownload}
+            >
               Download
             </ListItemButton>
           )}
           {showDetach && (
-            <ListItemButton onClick={onDetach} disabled={!showDetach}>
+            <ListItemButton
+              variant="tertiary"
+              onClick={onDetach}
+              disabled={!showDetach}
+            >
               Detach
             </ListItemButton>
           )}
           {showDelete() && (
-            <ListItemButton onClick={onDelete}>Delete</ListItemButton>
+            <ListItemButton variant="tertiary" onClick={onDelete}>
+              Delete
+            </ListItemButton>
           )}
         </OptionsDropdownList>
       )}
@@ -315,6 +334,7 @@ const NestedDropdown: React.FC<{
   return (
     <DropdownWrapper ref={wrapperRef}>
       <NestedListButton
+        variant="tertiary"
         className="nested-list-button"
         onClick={toggleOpen}
         disabled={disabled}
@@ -352,26 +372,18 @@ const OptionsDropdownList = styled(DropdownList)`
   right: 4%;
 `
 
-const OptionsButton = styled(IconButton)`
-  border: 1px solid #e2e2e2 !important;
-  box-sizing: border-box;
-  border-radius: 50%;
-  width: ${(props) => props.theme.grid.unit * 6}px;
-  height: ${(props) => props.theme.grid.unit * 6}px;
-  margin: ${(props) => props.theme.grid.unit}px;
-  visibility: hidden;
-  background: #ffffff;
-
-  &:hover {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
+const OptionsButton = styled(IconButton).attrs({
+  size: 'small',
+  bordered: true,
+})`
+  && {
+    margin: ${(props) => props.theme.grid.unit}px;
+    visibility: hidden;
+    background: #ffffff;
   }
 
   &:active,
   &:focus {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
-
     circle {
       fill: #1a9bc7;
     }
@@ -382,14 +394,12 @@ const OptionsButton = styled(IconButton)`
   }
 `
 
-const ListItemButton = styled(IconTextButton)`
-  padding: 16px 14px;
-  justify-content: space-between;
-  align-items: center;
-
-  &:hover,
-  &:focus-visible {
-    background: #f2fbfc;
+const ListItemButton = styled(Button)`
+  && {
+    padding: 16px 14px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
   }
 
   &:is([disabled]) {
@@ -423,12 +433,12 @@ const NestedListDropdownList = styled(DropdownList)<{ $moveLeft?: boolean }>`
   ${(props) => (props.$moveLeft && 'right: 30%;') || 'left: 100%;'}
 `
 
-const UploadButton = styled(IconTextButton)`
-  border-top: 1px solid #f2f2f2;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-  justify-content: flex-start;
-
-  &:focus-visible {
-    background: #f2fbfc;
+const UploadButton = styled(Button)`
+  && {
+    border-top: 1px solid #f2f2f2;
+    padding: ${(props) => props.theme.grid.unit * 4}px;
+    justify-content: flex-start;
+    width: 100%;
+    border-radius: 0;
   }
 `

package/src/components/views/FootnotesSelector.tsx

@@ -19,13 +19,11 @@ import {
   AddIcon,
   AddNewIcon,
   ButtonGroup,
-  IconTextButton,
-  PrimaryButton,
-  SecondaryButton,
   withFocusTrap,
   withListNavigation,
   withNavigableListItem,
 } from '@manuscripts/style-guide'
+import { Button } from '@manuscripts/style-guide/mui'
 import { isDeleted } from '@manuscripts/track-changes-plugin'
 import { FootnoteNode, InlineFootnoteNode } from '@manuscripts/transform'
 import React, { useState } from 'react'
@@ -131,19 +129,20 @@ export const FootnotesSelector: React.FC<FootnotesSelectorProps> = ({
       </NotesContainer>
       <Actions>
         <AddNewFootnote>
-          <IconTextButton onClick={onAdd}>
-            <AddNewIcon />
+          <Button variant="tertiary" onClick={onAdd} startIcon={<AddNewIcon />}>
             Add new
-          </IconTextButton>
+          </Button>
         </AddNewFootnote>
         <ButtonGroup>
-          <SecondaryButton onClick={onCancel}>Cancel</SecondaryButton>
-          <PrimaryButton
+          <Button variant="secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
             onClick={handleClick}
             disabled={selections.size === 0 && !inlineFootnote}
           >
             {inlineFootnote ? 'Update' : 'Insert'}
-          </PrimaryButton>
+          </Button>
         </ButtonGroup>
       </Actions>
     </Container>

package/src/components/views/LinkForm.tsx

@@ -19,12 +19,11 @@ import {
   FormContainer,
   FormRow,
   Label,
-  PrimaryButton,
-  SecondaryButton,
   TextField,
   InputErrorText,
   withFocusTrap,
 } from '@manuscripts/style-guide'
+import { Button } from '@manuscripts/style-guide/mui'
 import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
 
@@ -46,7 +45,7 @@ const ActionGroup = styled.span`
   }
 `
 
-const RemoveButton = styled(SecondaryButton)`
+const RemoveButton = styled(Button)`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -201,17 +200,21 @@ export const LinkForm: React.FC<LinkFormProps> = ({
 
         <Actions>
           <ActionGroup>
-            <RemoveButton type={'button'} onClick={onRemove}>
+            <RemoveButton
+              variant="secondary"
+              type={'button'}
+              onClick={onRemove}
+            >
               <DeleteIcon />
               <span>Remove Link</span>
             </RemoveButton>
           </ActionGroup>
 
           <ActionGroup>
-            <SecondaryButton type={'button'} onClick={onCancel}>
+            <Button variant="secondary" type={'button'} onClick={onCancel}>
               Cancel
-            </SecondaryButton>
-            <PrimaryButton type={'submit'}>Save</PrimaryButton>
+            </Button>
+            <Button type={'submit'}>Save</Button>
           </ActionGroup>
         </Actions>
       </FormContainer>

package/src/components/views/TableCellContextMenu.tsx

@@ -17,9 +17,9 @@ import {
   Category,
   DeleteIcon,
   Dialog,
-  IconTextButton,
   PlusIcon,
 } from '@manuscripts/style-guide'
+import { Button } from '@manuscripts/style-guide/mui'
 import { skipTracking } from '@manuscripts/track-changes-plugin'
 import { schema } from '@manuscripts/transform'
 import { Command, EditorState } from 'prosemirror-state'
@@ -125,15 +125,20 @@ export const ContextMenu: React.FC<{
   return (
     <MenuDropdownList className={'table-ctx'}>
       <ActionButton
+        variant="tertiary"
         disabled={isHeaderCellSelected(view.state)}
         onClick={() => runCommand(addRows('top'))}
       >
         <PlusIcon /> Insert {rows} above
       </ActionButton>
-      <ActionButton onClick={() => runCommand(addRows('bottom'))}>
+      <ActionButton
+        variant="tertiary"
+        onClick={() => runCommand(addRows('bottom'))}
+      >
         <PlusIcon /> Insert {rows} below
       </ActionButton>
       <ActionButton
+        variant="tertiary"
         onClick={() =>
           showWarningForTCPlugin(setColumnAction, () => addColumns('left'))
         }
@@ -141,6 +146,7 @@ export const ContextMenu: React.FC<{
         <PlusIcon /> Insert {columns} to the left
       </ActionButton>
       <ActionButton
+        variant="tertiary"
         onClick={() =>
           showWarningForTCPlugin(setColumnAction, () => addColumns('right'))
         }
@@ -149,6 +155,7 @@ export const ContextMenu: React.FC<{
       </ActionButton>
       <Separator />
       <ActionButton
+        variant="tertiary"
         disabled={count.rows !== 1}
         onClick={() => runCommand(addHeaderRow(headerPosition))}
       >
@@ -156,6 +163,7 @@ export const ContextMenu: React.FC<{
       </ActionButton>
       <Separator />
       <ActionButton
+        variant="tertiary"
         onClick={() =>
           showWarningForTCPlugin(setRowDeleteAction, () => deleteRow)
         }
@@ -164,6 +172,7 @@ export const ContextMenu: React.FC<{
         {isHeaderCellSelected(view.state) ? ' header ' : ''} {rows}
       </ActionButton>
       <ActionButton
+        variant="tertiary"
         onClick={() =>
           showWarningForTCPlugin(setColumnAction, () => deleteColumn)
         }
@@ -172,12 +181,18 @@ export const ContextMenu: React.FC<{
       </ActionButton>
       {(isCellSelectionMerged || isCellSelectionSplittable) && <Separator />}
       {isCellSelectionMerged && (
-        <ActionButton onClick={() => runCommand(mergeCells, true)}>
+        <ActionButton
+          variant="tertiary"
+          onClick={() => runCommand(mergeCells, true)}
+        >
           Merge cells
         </ActionButton>
       )}
       {isCellSelectionSplittable && (
-        <ActionButton onClick={() => runCommand(splitCell, true)}>
+        <ActionButton
+          variant="tertiary"
+          onClick={() => runCommand(splitCell, true)}
+        >
           Split cells
         </ActionButton>
       )}
@@ -213,12 +228,11 @@ const MenuDropdownList = styled.div`
   flex-direction: column;
 `
 
-const ActionButton = styled(IconTextButton)`
-  padding: 8px 16px;
-  justify-content: flex-start;
-
-  &:hover {
-    background: #f2fbfc;
+const ActionButton = styled(Button)`
+  && {
+    padding: 8px 16px;
+    justify-content: flex-start;
+    width: 100%;
   }
   &:disabled {
     color: #353535;

package/src/versions.ts

@@ -1,3 +1,3 @@
 //THIS FILE WAS GENERATED BY versions.mjs
-export const VERSION = '3.18.1';
+export const VERSION = '3.18.2';
 export const MATHJAX_VERSION = '3.2.2';

package/src/views/ReactSubView.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { MuiThemeProvider, muiTheme } from '@manuscripts/style-guide/mui'
 import { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform'
 import React from 'react'
 import { flushSync } from 'react-dom'
@@ -92,16 +93,18 @@ function createView<T extends Trackable<ManuscriptNode>>(
     }
 
     return (
-      <ThemeProvider theme={props.theme}>
-        <Component
-          nodeAttrs={node.attrs}
-          setNodeAttrs={setNodeAttrs}
-          viewProps={{ node, view, getPos }}
-          container={container}
-          {...props}
-          {...componentProps}
-        />
-      </ThemeProvider>
+      <MuiThemeProvider theme={muiTheme}>
+        <ThemeProvider theme={props.theme}>
+          <Component
+            nodeAttrs={node.attrs}
+            setNodeAttrs={setNodeAttrs}
+            viewProps={{ node, view, getPos }}
+            container={container}
+            {...props}
+            {...componentProps}
+          />
+        </ThemeProvider>
+      </MuiThemeProvider>
     )
   }
   return Wrapped

package/src/views/cross_reference.ts

@@ -48,7 +48,7 @@ export class CrossReferenceView
     const attrs = this.node.attrs
     const target = attrs.rids.length ? targets.get(attrs.rids[0]) : undefined
 
-    const isSupplement = target?.type === schema.nodes.supplement.name;
+    const isSupplement = target?.type === schema.nodes.supplement.name
     const derivedLabel = isSupplement
       ? target?.caption || target?.label || ''
       : target?.label || ''