@manuscripts/style-guide 3.3.11 → 3.3.13

package/dist/cjs/components/Button.js

@@ -128,6 +128,11 @@ exports.SecondaryButton = (0, styled_components_1.default)(ButtonTemplate) `
   &:not([disabled]):active {
     ${(props) => btnColors(props.theme.colors.button.secondary.color.active, props.theme.colors.button.secondary.background.active, props.theme.colors.button.secondary.border.active, false)}
   }
+
+  &:focus-visible {
+    outline: 3px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 4px;
+  }
 `;
 exports.PrimaryButton = (0, styled_components_1.default)(ButtonTemplate) `
   ${(props) => btnColors(props.theme.colors.button.primary.color.default, props.theme.colors.button.primary.background.default, props.theme.colors.button.primary.border.default, false)}
@@ -136,6 +141,11 @@ exports.PrimaryButton = (0, styled_components_1.default)(ButtonTemplate) `
     ${(props) => btnColors(props.theme.colors.button.primary.color.hover, props.theme.colors.button.primary.background.hover, props.theme.colors.button.primary.border.hover, false)}
   }
 
+  &:focus-visible {
+    outline: 3px solid ${(props) => props.theme.colors.outline.focus} !important;
+    outline-offset: 4px;
+  }
+
   &:not([disabled]):active {
     ${(props) => btnColors(props.theme.colors.button.primary.color.active, props.theme.colors.button.primary.background.active, props.theme.colors.button.primary.border.active, false)}
   }

package/dist/cjs/components/Checkbox.js

@@ -65,6 +65,11 @@ exports.CheckboxLabel = styled_components_1.default.label `
   input:focus + div::before {
     border-color: ${(props) => props.theme.colors.button.primary.border.hover};
   }
+
+  input:focus-visible + div::before {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
 `;
 exports.CheckboxField = styled_components_1.default.input.attrs({
     type: 'checkbox',

package/dist/cjs/components/Menus/Menus.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Submenu_1 = require("./Submenu");
 const MenusContainer = styled_components_1.default.div `
@@ -14,6 +15,11 @@ const MenusContainer = styled_components_1.default.div `
 const MenuHeading = styled_components_1.default.div `
   padding: 4px 8px;
   cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+  }
 `;
 const MenuContainer = styled_components_1.default.div `
   position: relative;
@@ -28,13 +34,69 @@ const MenuContainer = styled_components_1.default.div `
     }
   }
 `;
-const Menus = ({ menus, innerRef, handleClick, }) => {
-    return ((0, jsx_runtime_1.jsx)(MenusContainer, { ref: innerRef, "data-cy": 'manuscript-menus', children: menus.map((menu, index) => {
-            return ((0, jsx_runtime_1.jsxs)(MenuContainer, { "data-cy": 'menu', isEnabled: menu.isEnabled, children: [(0, jsx_runtime_1.jsx)(MenuHeading, { onMouseDown: (e) => {
+const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
+    const menuHeadingsRef = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        menuHeadingsRef.current.forEach((heading, index) => {
+            if (heading) {
+                heading.tabIndex = index === 0 ? 0 : -1;
+            }
+        });
+    }, [menus]);
+    const handleKeyDown = (event) => {
+        const target = event.target;
+        const currentIndex = menuHeadingsRef.current.findIndex((heading) => heading === target);
+        if (currentIndex === -1) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowRight': {
+                event.preventDefault();
+                const nextIndex = (currentIndex + 1) % menuHeadingsRef.current.length;
+                menuHeadingsRef.current[nextIndex]?.focus();
+                break;
+            }
+            case 'ArrowLeft': {
+                event.preventDefault();
+                const prevIndex = (currentIndex - 1 + menuHeadingsRef.current.length) %
+                    menuHeadingsRef.current.length;
+                menuHeadingsRef.current[prevIndex]?.focus();
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                handleClick([currentIndex]);
+                break;
+            }
+            case 'Escape': {
+                event.preventDefault();
+                event.stopPropagation();
+                closeAll();
+                break;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                const menu = menus[currentIndex];
+                if (menu && !menu.isOpen) {
+                    handleClick([currentIndex]);
+                }
+                const menuContainer = event.currentTarget.children[currentIndex];
+                setTimeout(() => {
+                    const firstItem = menuContainer?.querySelector('[data-submenu-item]');
+                    firstItem?.focus();
+                }, 0);
+                break;
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(MenusContainer, { ref: innerRef, "data-cy": 'manuscript-menus', onKeyDown: handleKeyDown, children: menus.map((menu, index) => {
+            return ((0, jsx_runtime_1.jsxs)(MenuContainer, { "data-cy": 'menu', isEnabled: menu.isEnabled, children: [(0, jsx_runtime_1.jsx)(MenuHeading, { ref: (el) => {
+                            menuHeadingsRef.current[index] = el;
+                        }, onMouseDown: (e) => {
                             e.preventDefault();
                             handleClick([index]);
-                        }, isOpen: menu.isOpen, children: (0, jsx_runtime_1.jsx)(Submenu_1.Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && ((0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainerWrapper, { children: (0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainer, { children: menu.submenu.map((submenu, sindex) => {
-                                return ((0, jsx_runtime_1.jsx)(Submenu_1.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }, `${index}-${sindex}`));
+                        }, isOpen: menu.isOpen, children: (0, jsx_runtime_1.jsx)(Submenu_1.Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && ((0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainerWrapper, { children: (0, jsx_runtime_1.jsx)(Submenu_1.SubmenusContainer, { "data-submenu-container": true, tabIndex: -1, children: menu.submenu.map((submenu, sindex) => {
+                                return ((0, jsx_runtime_1.jsx)(Submenu_1.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), closeAll: closeAll }, `${index}-${sindex}`));
                             }) }) }))] }, `menu-${index}`));
         }) }));
 };

package/dist/cjs/components/Menus/Submenu.js

@@ -38,6 +38,10 @@ exports.SubmenusContainer = styled_components_1.default.div `
   &[data-placement='right-start'] {
     top: 8px;
   }
+
+  &:focus-visible {
+    outline: none;
+  }
 `;
 exports.NestedSubmenusContainer = (0, styled_components_1.default)(exports.SubmenusContainer) `
   position: absolute;
@@ -66,9 +70,10 @@ const Container = styled_components_1.default.div `
   align-items: center;
   cursor: pointer;
   padding: 8px 16px 8px 4px;
+  outline: none;
   ${(props) => props.isOpen && 'background: #f2fbfc;'}
 
-  &:hover {
+  &:hover, &:focus {
     background: #f2fbfc;
   }
 
@@ -78,26 +83,93 @@ const Container = styled_components_1.default.div `
   }
 `;
 const activeContent = (menu) => (menu.isActive ? '✓' : '');
-const SubmenuLabel = ({ menu, handleClick }) => {
+const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
     if ((0, menus_1.isMenuSeparator)(menu)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Container, { isOpen: menu.isOpen, "data-cy": 'submenu', className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
+    const handleKeyDown = (e) => {
+        if ((0, menus_1.isMenuSeparator)(menu)) {
+            return;
+        }
+        const currentElement = e.currentTarget;
+        const submenuContainer = currentElement.closest('[data-submenu-container]');
+        if (!submenuContainer) {
+            return;
+        }
+        const items = Array.from(submenuContainer.querySelectorAll('[data-submenu-item]'));
+        const currentIndex = items.indexOf(currentElement);
+        const focusMenuHeading = () => {
+            const menuContainer = currentElement.closest('[data-cy="menu"]');
+            const menuHeading = menuContainer?.querySelector('[tabindex]');
+            menuHeading?.focus();
+        };
+        e.preventDefault();
+        e.stopPropagation();
+        switch (e.key) {
+            case 'ArrowDown': {
+                const nextIndex = currentIndex + 1;
+                const nextItem = items[nextIndex] || items[0];
+                nextItem?.focus();
+                break;
+            }
+            case 'ArrowUp': {
+                const prevIndex = currentIndex - 1;
+                const prevItem = items[prevIndex] || items[items.length - 1];
+                prevItem?.focus();
+                break;
+            }
+            case 'ArrowRight': {
+                if (menu.submenu) {
+                    handleClick([]);
+                    setTimeout(() => {
+                        const nestedContainer = currentElement.nextElementSibling;
+                        const firstItem = nestedContainer?.querySelector('[data-submenu-item]');
+                        firstItem?.focus();
+                    }, 0);
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                const parentContainer = submenuContainer?.parentElement?.closest('[data-submenu-container]');
+                if (parentContainer) {
+                    const parentLabel = parentContainer.querySelector(':scope > [data-submenu-item]');
+                    parentLabel?.focus();
+                }
+                else {
+                    focusMenuHeading();
+                    closeAll();
+                }
+                break;
+            }
+            case 'Escape': {
+                closeAll();
+                focusMenuHeading();
+                break;
+            }
+            case 'Enter': {
+                if (menu.isEnabled) {
+                    handleClick([]);
+                }
+                break;
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Container, { isOpen: menu.isOpen, "data-cy": 'submenu', "data-submenu-item": true, className: menu.isEnabled ? '' : 'disabled', tabIndex: -1, onMouseDown: (e) => {
             e.preventDefault();
             handleClick([]);
-        }, children: [(0, jsx_runtime_1.jsx)(Active, { children: activeContent(menu) }), (0, jsx_runtime_1.jsx)(exports.Text, { children: menu.label }), menu.submenu && (0, jsx_runtime_1.jsx)(Arrow, {}), menu.shortcut && (0, jsx_runtime_1.jsx)(Shortcut_1.Shortcut, { shortcut: menu.shortcut })] }));
+        }, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsx)(Active, { children: activeContent(menu) }), (0, jsx_runtime_1.jsx)(exports.Text, { children: menu.label }), menu.submenu && (0, jsx_runtime_1.jsx)(Arrow, {}), menu.shortcut && (0, jsx_runtime_1.jsx)(Shortcut_1.Shortcut, { shortcut: menu.shortcut })] }));
 };
 exports.SubmenuLabel = SubmenuLabel;
-const Submenu = ({ menu, handleClick }) => {
+const Submenu = ({ menu, handleClick, closeAll, }) => {
     if ((0, menus_1.isMenuSeparator)(menu)) {
         return (0, jsx_runtime_1.jsx)(Separator, {});
     }
     if (menu.component) {
-        return (0, jsx_runtime_1.jsx)(menu.component, { menu: menu, handleClick: handleClick });
+        return (0, jsx_runtime_1.jsx)(menu.component, { menu: menu, handleClick: handleClick, closeAll: closeAll });
     }
     if (!menu.submenu) {
-        return (0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick });
+        return ((0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }));
     }
-    return ((0, jsx_runtime_1.jsxs)(exports.SubmenuContainer, { "data-cy": 'submenu', children: [(0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick }), menu.submenu && menu.isOpen && ((0, jsx_runtime_1.jsx)(exports.NestedSubmenusContainer, { children: menu.submenu.map((submenu, index) => ((0, jsx_runtime_1.jsx)(exports.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]) }, `menu-${index}`))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.SubmenuContainer, { "data-cy": 'submenu', children: [(0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }), menu.submenu && menu.isOpen && ((0, jsx_runtime_1.jsx)(exports.NestedSubmenusContainer, { "data-submenu-container": true, children: menu.submenu.map((submenu, index) => ((0, jsx_runtime_1.jsx)(exports.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]), closeAll: closeAll }, `menu-${index}`))) }))] }));
 };
 exports.Submenu = Submenu;

package/dist/cjs/components/NavDropdown.js

@@ -142,5 +142,5 @@ exports.NavDropdownButtonContainer = (0, styled_components_1.default)(Button_1.S
     stroke: currentColor;
   }
 `;
-const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, }) => ((0, jsx_runtime_1.jsxs)(exports.NavDropdownButtonContainer, { as: as, disabled: disabled, onClick: onClick, isOpen: isOpen, className: 'dropdown-toggle', children: [(0, jsx_runtime_1.jsx)(exports.NavDropdownButtonText, { children: children }), !!notificationsCount && ((0, jsx_runtime_1.jsx)(exports.NotificationsBadge, { isOpen: isOpen, children: notificationsCount })), !removeChevron && (0, jsx_runtime_1.jsx)(exports.NavDropdownToggle, { className: isOpen ? 'open' : '' })] }));
+const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, buttonRef, }) => ((0, jsx_runtime_1.jsxs)(exports.NavDropdownButtonContainer, { ref: buttonRef, as: as, disabled: disabled, onClick: onClick, isOpen: isOpen, className: 'dropdown-toggle', tabIndex: 0, children: [(0, jsx_runtime_1.jsx)(exports.NavDropdownButtonText, { children: children }), !!notificationsCount && ((0, jsx_runtime_1.jsx)(exports.NotificationsBadge, { isOpen: isOpen, children: notificationsCount })), !removeChevron && (0, jsx_runtime_1.jsx)(exports.NavDropdownToggle, { className: isOpen ? 'open' : '' })] }));
 exports.NavDropdownButton = NavDropdownButton;

package/dist/cjs/components/Resizer/ResizerButton.js

@@ -21,7 +21,7 @@ class ResizerButton extends react_1.default.PureComponent {
     render() {
         const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
         const ResizerButtonInner = buttonInner || inners[direction][side];
-        return ((0, jsx_runtime_1.jsx)(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault() }));
+        return ((0, jsx_runtime_1.jsx)(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault(), tabIndex: 0 }));
     }
 }
 exports.ResizerButton = ResizerButton;

package/dist/cjs/components/SaveStatus.js

@@ -16,7 +16,7 @@ const SaveStatus = ({ status }) => {
         case 'saved':
             return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsx)(PopPop, { children: (0, jsx_runtime_1.jsx)(icons_1.SaveStatusSavedIcon, {}) }), (0, jsx_runtime_1.jsx)(Text, { children: "Saved" })] }));
         case 'failed':
-            return ((0, jsx_runtime_1.jsxs)(FailedContainer, { children: [(0, jsx_runtime_1.jsx)(PopPop, { children: (0, jsx_runtime_1.jsx)(icons_1.AttentionRedIcon, {}) }), (0, jsx_runtime_1.jsx)(FailedText, { children: "Failed To Save" })] }));
+            return ((0, jsx_runtime_1.jsxs)(FailedContainer, { children: [(0, jsx_runtime_1.jsx)(PopPop, { children: (0, jsx_runtime_1.jsx)(icons_1.SaveStatusErrorIcon, {}) }), (0, jsx_runtime_1.jsx)(FailedText, { children: "Save error" })] }));
         default:
             return null;
     }
@@ -36,7 +36,7 @@ const Text = styled_components_1.default.span `
   margin-left: 0.5em;
   font-family: ${(props) => props.theme.font.family.Lato};
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 400;
 `;
 const FailedContainer = (0, styled_components_1.default)(Container) `
   path {
@@ -45,7 +45,7 @@ const FailedContainer = (0, styled_components_1.default)(Container) `
   }
 `;
 const FailedText = (0, styled_components_1.default)(Text) `
-  color: ${(props) => props.theme.colors.text.error};
+  color: ${(props) => props.theme.colors.text.secondary};
 `;
 const RotateContinuous = styled_components_1.default.div `
   svg {

package/dist/cjs/components/ToggleHeader.js

@@ -8,10 +8,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("./icons");
 const ToggleHeader = ({ title, isOpen, onToggle, }) => {
-    return ((0, jsx_runtime_1.jsxs)(ToggleHeaderContainer, { onClick: (e) => {
-            e.stopPropagation();
-            onToggle();
-        }, children: [(0, jsx_runtime_1.jsx)("span", { children: title }), (0, jsx_runtime_1.jsx)(exports.ToggleIcon, { isOpen: isOpen, children: isOpen ? (0, jsx_runtime_1.jsx)(icons_1.TriangleExpandedIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.TriangleCollapsedIcon, {}) })] }));
+    const handleToggle = (e) => {
+        e.stopPropagation();
+        onToggle();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleToggle(e);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(ToggleHeaderContainer, { onClick: handleToggle, children: [(0, jsx_runtime_1.jsx)("span", { children: title }), (0, jsx_runtime_1.jsx)(exports.ToggleIcon, { isOpen: isOpen, onKeyDown: handleKeyDown, tabIndex: 0, children: isOpen ? (0, jsx_runtime_1.jsx)(icons_1.TriangleExpandedIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.TriangleCollapsedIcon, {}) })] }));
 };
 exports.ToggleHeader = ToggleHeader;
 const ToggleHeaderContainer = styled_components_1.default.div `
@@ -37,6 +44,11 @@ exports.ToggleIcon = styled_components_1.default.div `
   text-align: center;
   cursor: pointer;
 
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
+
   svg {
     width: 19px;
     height: 19px;

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

@@ -19,8 +19,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.ChatIcon = exports.BookIcon = exports.AffiliationPlaceholderIcon = exports.AuthorPlaceholderIcon = exports.AffiliationIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddRoleIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddFigureIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
-exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = exports.ToolbarBoldIcon = exports.TickIcon = exports.TaskStepDoneIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEmbedIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.ManuscriptIcon = exports.LogoutIcon = exports.LockIcon = exports.LinkIcon = exports.InspectorPluginIcon = exports.ImageRightIcon = exports.ImageDefaultIcon = exports.ImageLeftIcon = exports.HelpIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = void 0;
-exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = void 0;
+exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = exports.ToolbarBoldIcon = exports.TickIcon = exports.TaskStepDoneIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusErrorIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEmbedIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.ManuscriptIcon = exports.LogoutIcon = exports.LockIcon = exports.LinkIcon = exports.InspectorPluginIcon = exports.ImageRightIcon = exports.ImageDefaultIcon = exports.ImageLeftIcon = exports.HelpIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = void 0;
+exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = void 0;
 var add_author_1 = require("./add-author");
 Object.defineProperty(exports, "AddAuthorIcon", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
 var add_comment_1 = require("./add-comment");
@@ -179,6 +179,8 @@ var save_status_saved_1 = require("./save-status-saved");
 Object.defineProperty(exports, "SaveStatusSavedIcon", { enumerable: true, get: function () { return __importDefault(save_status_saved_1).default; } });
 var save_status_saving_1 = require("./save-status-saving");
 Object.defineProperty(exports, "SaveStatusSavingIcon", { enumerable: true, get: function () { return __importDefault(save_status_saving_1).default; } });
+var save_status_error_1 = require("./save-status-error");
+Object.defineProperty(exports, "SaveStatusErrorIcon", { enumerable: true, get: function () { return __importDefault(save_status_error_1).default; } });
 var scroll_1 = require("./scroll");
 Object.defineProperty(exports, "ScrollIcon", { enumerable: true, get: function () { return __importDefault(scroll_1).default; } });
 var search_1 = require("./search");

package/dist/cjs/components/icons/save-status-error.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SaveStatusErrorIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M1.78138 8.66481C-0.264932 9.8341 0.0274413 13.0505 2.65849 13.0511H12.8905C15.5215 13.0511 17.2757 8.07953 12.8904 6.90971C12.5981 3.1078 7.04369 1.35262 4.99722 5.44728C3.24317 5.44728 1.78146 6.61707 1.78138 8.66481Z", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.72879 5.01736C5.87898 2.95783 7.91126 2.36194 9.70374 2.79082C11.4478 3.20821 13.0047 4.60833 13.2924 6.5716C14.3175 6.9008 15.037 7.4474 15.4775 8.12298C15.9565 8.85769 16.0788 9.70245 15.9548 10.4877C15.7142 12.0118 14.4922 13.49 12.8904 13.49H2.65842C1.90751 13.4898 1.28935 13.2579 0.834706 12.8599C0.382925 12.4644 0.119408 11.9279 0.0324793 11.3628C-0.129481 10.3096 0.315 9.11972 1.34973 8.41657C1.40498 7.39534 1.80147 6.55959 2.43174 5.96841C3.04545 5.39277 3.85636 5.07181 4.72879 5.01736ZM9.49933 3.64419C7.99607 3.28458 6.3123 3.79692 5.38942 5.6434C5.31514 5.79202 5.16325 5.88616 4.99715 5.88616C4.21663 5.88616 3.52442 6.1456 3.03127 6.60815C2.54256 7.06657 2.21994 7.75174 2.2199 8.66504C2.21982 8.82233 2.13541 8.96738 1.99893 9.04546C1.13936 9.53664 0.779611 10.4521 0.899227 11.2297C0.958506 11.6148 1.13361 11.9555 1.41254 12.1996C1.68873 12.4414 2.09385 12.6125 2.65842 12.6126H12.8904C13.9195 12.6126 14.8901 11.6047 15.0881 10.3507C15.1834 9.74683 15.0864 9.12867 14.7432 8.60221C14.4018 8.07861 13.7893 7.60354 12.7773 7.33358C12.5974 7.28556 12.4673 7.12915 12.453 6.94345C12.3239 5.26421 11.0281 4.00999 9.49933 3.64419Z", fill: "#F35143" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.52701 9.50991C8.40149 9.50991 8.30327 9.4717 8.23233 9.39527C8.16138 9.31884 8.11773 9.20693 8.10136 9.05953L7.83942 6.25898C7.81213 6.01332 7.85852 5.81679 7.97857 5.6694C8.09863 5.51654 8.28144 5.44011 8.52701 5.44011C8.76166 5.44011 8.93901 5.51654 9.05907 5.6694C9.17912 5.81679 9.22551 6.01332 9.19822 6.25898L8.93629 9.05953C8.91992 9.20693 8.87626 9.31884 8.80532 9.39527C8.73983 9.4717 8.64706 9.50991 8.52701 9.50991ZM8.52701 11.3278C8.30873 11.3278 8.1341 11.2623 8.00313 11.1313C7.87762 11.0003 7.81486 10.831 7.81486 10.6236C7.81486 10.4216 7.87762 10.2578 8.00313 10.1323C8.1341 10.0012 8.30873 9.93572 8.52701 9.93572C8.74529 9.93572 8.91446 10.0012 9.03451 10.1323C9.16002 10.2578 9.22278 10.4216 9.22278 10.6236C9.22278 10.831 9.16002 11.0003 9.03451 11.1313C8.91446 11.2623 8.74529 11.3278 8.52701 11.3278Z", fill: "#F35143" })] }));
+exports.default = SaveStatusErrorIcon;

package/dist/cjs/components/icons/save-status-saved.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const SaveStatusSavedIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.5 8.5L8 11L13 6", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const SaveStatusSavedIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.72879 5.01493C5.87898 2.95619 7.91126 2.36052 9.70374 2.78924C11.4478 3.20647 13.0047 4.60605 13.2923 6.56856C14.3175 6.89764 15.037 7.44403 15.4775 8.11934C15.9565 8.85377 16.0788 9.69821 15.9548 10.4832C15.7142 12.0067 14.4922 13.4843 12.8904 13.4843H2.65842C1.90751 13.4841 1.28935 13.2523 0.834706 12.8545C0.382925 12.4591 0.119408 11.9228 0.0324793 11.3579C-0.129481 10.3052 0.315 9.1157 1.34973 8.41283C1.40498 7.39199 1.80147 6.55656 2.43174 5.96561C3.04545 5.39019 3.85636 5.06936 4.72879 5.01493ZM9.49933 3.64229C7.99607 3.28281 6.3123 3.79496 5.38941 5.64072C5.31514 5.78928 5.16325 5.88339 4.99715 5.88339C4.21663 5.88339 3.52442 6.14273 3.03127 6.6051C2.54256 7.06335 2.21994 7.74825 2.2199 8.6612C2.21982 8.81843 2.13541 8.96342 1.99893 9.04148C1.13936 9.53246 0.779611 10.4476 0.899227 11.2249C0.958506 11.6098 1.13361 11.9504 1.41254 12.1944C1.68873 12.4361 2.09385 12.6071 2.65842 12.6072H12.8904C13.9195 12.6072 14.8901 11.5998 15.0881 10.3462C15.1834 9.74258 15.0864 9.12466 14.7432 8.5984C14.4018 8.075 13.7893 7.60011 12.7773 7.33025C12.5974 7.28225 12.4673 7.1259 12.453 6.94027C12.3239 5.26168 11.0281 4.00794 9.49933 3.64229Z", fill: "#353535" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.83375 8.60263C5.61415 8.37347 5.25942 8.36752 5.03713 8.59372L5.16258 8.46607C4.94222 8.6903 4.94257 9.0575 5.16092 9.28367L6.64735 10.8234C6.8668 11.0507 7.22857 11.0583 7.45382 10.8418L10.6709 7.75008C10.8968 7.53293 10.9033 7.17708 10.681 6.95088L10.8064 7.07853C10.5861 6.85429 10.2218 6.84877 9.9951 7.06413L7.04469 9.86626L5.83375 8.60263Z", fill: "#353535" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.9951 7.06413C10.1999 6.86962 10.5167 6.85567 10.7385 7.01999C10.8996 7.24472 10.875 7.55387 10.6709 7.75008L7.45382 10.8418C7.24263 11.0448 6.91162 11.0506 6.69024 10.8633L6.64735 10.8234L5.16092 9.28367C4.96369 9.07931 4.94457 8.75992 5.1052 8.5348C5.32688 8.37089 5.63536 8.39561 5.83375 8.60263L7.04469 9.86626L9.9951 7.06413ZM5.16258 8.46607C5.14132 8.4877 5.12235 8.51076 5.1052 8.5348C5.08152 8.55231 5.05858 8.5719 5.03713 8.59372L5.16258 8.46607ZM10.8064 7.07853C10.7852 7.05691 10.7622 7.03754 10.7385 7.01999C10.7213 6.99601 10.7024 6.97269 10.681 6.95088L10.8064 7.07853Z", fill: "#353535" })] }));
 exports.default = SaveStatusSavedIcon;

package/dist/cjs/components/icons/save-status-saving.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const SaveStatusSavingIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M1.5 8.5C1.5 4.634 4.634 1.5 8.5 1.5C11.136 1.5 13.328 3.141 14.5 5.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.5 1.5V5.5H10.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.5 9.5C15.5 13.366 12.366 16.5 8.5 16.5C5.864 16.5 3.672 14.859 2.5 12.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M2.5 16.5V12.5H6.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const SaveStatusSavingIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M5.00952 0.601385C8.65885 -0.895443 12.7584 0.497603 14.8201 3.71791C15.0887 4.1375 14.9696 4.6974 14.5538 4.96847C14.138 5.23951 13.5831 5.11924 13.3145 4.69972C11.7115 2.19573 8.52138 1.11368 5.6846 2.27721C3.41043 3.21003 1.97045 5.33611 1.79002 7.6519C1.75123 8.14991 1.31958 8.52218 0.826057 8.48304C0.33261 8.44382 -0.0359859 8.00811 0.00280092 7.51016C0.234328 4.53832 2.08281 1.80186 5.00952 0.601385Z", fill: "#6E6E6E" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.3651 5.05769C15.3638 5.30564 15.1649 5.50632 14.9192 5.5076L10.7188 5.52945C10.3184 5.53153 10.1164 5.04312 10.3996 4.75742L14.6217 0.496996C14.9048 0.211301 15.3888 0.415086 15.3867 0.819115L15.3651 5.05769Z", fill: "#6E6E6E" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.9905 15.3986C7.34115 16.8954 3.24155 15.5024 1.17987 12.2821C0.91126 11.8625 1.03041 11.3026 1.44621 11.0315C1.862 10.7605 2.41687 10.8808 2.68552 11.3003C4.28853 13.8043 7.47862 14.8863 10.3154 13.7228C12.5896 12.79 14.0296 10.6639 14.21 8.3481C14.2488 7.8501 14.6804 7.47782 15.1739 7.51696C15.6674 7.55618 16.036 7.99189 15.9972 8.48984C15.7657 11.4617 13.9172 14.1981 10.9905 15.3986Z", fill: "#6E6E6E" }), (0, jsx_runtime_1.jsx)("path", { d: "M0.634908 10.9423C0.636174 10.6944 0.835054 10.4937 1.08077 10.4924L5.28122 10.4706C5.68161 10.4685 5.88357 10.9569 5.60044 11.2426L1.37834 15.503C1.09521 15.7887 0.611191 15.5849 0.613255 15.1809L0.634908 10.9423Z", fill: "#6E6E6E" })] }));
 exports.default = SaveStatusSavingIcon;

package/dist/cjs/hooks/use-menus.js

@@ -89,9 +89,13 @@ const useMenus = (menus) => {
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
+    const closeAll = (0, react_1.useCallback)(() => {
+        setPointer(initialPointer);
+    }, []);
     return {
         menus: state,
         handleClick,
+        closeAll,
         ref,
     };
 };

package/dist/es/components/Button.js

@@ -92,6 +92,11 @@ export const SecondaryButton = styled(ButtonTemplate) `
   &:not([disabled]):active {
     ${(props) => btnColors(props.theme.colors.button.secondary.color.active, props.theme.colors.button.secondary.background.active, props.theme.colors.button.secondary.border.active, false)}
   }
+
+  &:focus-visible {
+    outline: 3px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 4px;
+  }
 `;
 export const PrimaryButton = styled(ButtonTemplate) `
   ${(props) => btnColors(props.theme.colors.button.primary.color.default, props.theme.colors.button.primary.background.default, props.theme.colors.button.primary.border.default, false)}
@@ -100,6 +105,11 @@ export const PrimaryButton = styled(ButtonTemplate) `
     ${(props) => btnColors(props.theme.colors.button.primary.color.hover, props.theme.colors.button.primary.background.hover, props.theme.colors.button.primary.border.hover, false)}
   }
 
+  &:focus-visible {
+    outline: 3px solid ${(props) => props.theme.colors.outline.focus} !important;
+    outline-offset: 4px;
+  }
+
   &:not([disabled]):active {
     ${(props) => btnColors(props.theme.colors.button.primary.color.active, props.theme.colors.button.primary.background.active, props.theme.colors.button.primary.border.active, false)}
   }

package/dist/es/components/Checkbox.js

@@ -59,6 +59,11 @@ export const CheckboxLabel = styled.label `
   input:focus + div::before {
     border-color: ${(props) => props.theme.colors.button.primary.border.hover};
   }
+
+  input:focus-visible + div::before {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
 `;
 export const CheckboxField = styled.input.attrs({
     type: 'checkbox',

package/dist/es/components/Menus/Menus.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { Submenu, SubmenusContainer, SubmenusContainerWrapper, Text, } from './Submenu';
 const MenusContainer = styled.div `
@@ -8,6 +9,11 @@ const MenusContainer = styled.div `
 const MenuHeading = styled.div `
   padding: 4px 8px;
   cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+  }
 `;
 const MenuContainer = styled.div `
   position: relative;
@@ -22,13 +28,69 @@ const MenuContainer = styled.div `
     }
   }
 `;
-export const Menus = ({ menus, innerRef, handleClick, }) => {
-    return (_jsx(MenusContainer, { ref: innerRef, "data-cy": 'manuscript-menus', children: menus.map((menu, index) => {
-            return (_jsxs(MenuContainer, { "data-cy": 'menu', isEnabled: menu.isEnabled, children: [_jsx(MenuHeading, { onMouseDown: (e) => {
+export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
+    const menuHeadingsRef = useRef([]);
+    useEffect(() => {
+        menuHeadingsRef.current.forEach((heading, index) => {
+            if (heading) {
+                heading.tabIndex = index === 0 ? 0 : -1;
+            }
+        });
+    }, [menus]);
+    const handleKeyDown = (event) => {
+        const target = event.target;
+        const currentIndex = menuHeadingsRef.current.findIndex((heading) => heading === target);
+        if (currentIndex === -1) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowRight': {
+                event.preventDefault();
+                const nextIndex = (currentIndex + 1) % menuHeadingsRef.current.length;
+                menuHeadingsRef.current[nextIndex]?.focus();
+                break;
+            }
+            case 'ArrowLeft': {
+                event.preventDefault();
+                const prevIndex = (currentIndex - 1 + menuHeadingsRef.current.length) %
+                    menuHeadingsRef.current.length;
+                menuHeadingsRef.current[prevIndex]?.focus();
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                handleClick([currentIndex]);
+                break;
+            }
+            case 'Escape': {
+                event.preventDefault();
+                event.stopPropagation();
+                closeAll();
+                break;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                const menu = menus[currentIndex];
+                if (menu && !menu.isOpen) {
+                    handleClick([currentIndex]);
+                }
+                const menuContainer = event.currentTarget.children[currentIndex];
+                setTimeout(() => {
+                    const firstItem = menuContainer?.querySelector('[data-submenu-item]');
+                    firstItem?.focus();
+                }, 0);
+                break;
+            }
+        }
+    };
+    return (_jsx(MenusContainer, { ref: innerRef, "data-cy": 'manuscript-menus', onKeyDown: handleKeyDown, children: menus.map((menu, index) => {
+            return (_jsxs(MenuContainer, { "data-cy": 'menu', isEnabled: menu.isEnabled, children: [_jsx(MenuHeading, { ref: (el) => {
+                            menuHeadingsRef.current[index] = el;
+                        }, onMouseDown: (e) => {
                             e.preventDefault();
                             handleClick([index]);
-                        }, isOpen: menu.isOpen, children: _jsx(Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && (_jsx(SubmenusContainerWrapper, { children: _jsx(SubmenusContainer, { children: menu.submenu.map((submenu, sindex) => {
-                                return (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }, `${index}-${sindex}`));
+                        }, isOpen: menu.isOpen, children: _jsx(Text, { children: menu.label }) }), menu.isEnabled && menu.isOpen && menu.submenu && (_jsx(SubmenusContainerWrapper, { children: _jsx(SubmenusContainer, { "data-submenu-container": true, tabIndex: -1, children: menu.submenu.map((submenu, sindex) => {
+                                return (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), closeAll: closeAll }, `${index}-${sindex}`));
                             }) }) }))] }, `menu-${index}`));
         }) }));
 };

package/dist/es/components/Menus/Submenu.js

@@ -32,6 +32,10 @@ export const SubmenusContainer = styled.div `
   &[data-placement='right-start'] {
     top: 8px;
   }
+
+  &:focus-visible {
+    outline: none;
+  }
 `;
 export const NestedSubmenusContainer = styled(SubmenusContainer) `
   position: absolute;
@@ -60,9 +64,10 @@ const Container = styled.div `
   align-items: center;
   cursor: pointer;
   padding: 8px 16px 8px 4px;
+  outline: none;
   ${(props) => props.isOpen && 'background: #f2fbfc;'}
 
-  &:hover {
+  &:hover, &:focus {
     background: #f2fbfc;
   }
 
@@ -72,24 +77,91 @@ const Container = styled.div `
   }
 `;
 const activeContent = (menu) => (menu.isActive ? '✓' : '');
-export const SubmenuLabel = ({ menu, handleClick }) => {
+export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
     if (isMenuSeparator(menu)) {
         return null;
     }
-    return (_jsxs(Container, { isOpen: menu.isOpen, "data-cy": 'submenu', className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
+    const handleKeyDown = (e) => {
+        if (isMenuSeparator(menu)) {
+            return;
+        }
+        const currentElement = e.currentTarget;
+        const submenuContainer = currentElement.closest('[data-submenu-container]');
+        if (!submenuContainer) {
+            return;
+        }
+        const items = Array.from(submenuContainer.querySelectorAll('[data-submenu-item]'));
+        const currentIndex = items.indexOf(currentElement);
+        const focusMenuHeading = () => {
+            const menuContainer = currentElement.closest('[data-cy="menu"]');
+            const menuHeading = menuContainer?.querySelector('[tabindex]');
+            menuHeading?.focus();
+        };
+        e.preventDefault();
+        e.stopPropagation();
+        switch (e.key) {
+            case 'ArrowDown': {
+                const nextIndex = currentIndex + 1;
+                const nextItem = items[nextIndex] || items[0];
+                nextItem?.focus();
+                break;
+            }
+            case 'ArrowUp': {
+                const prevIndex = currentIndex - 1;
+                const prevItem = items[prevIndex] || items[items.length - 1];
+                prevItem?.focus();
+                break;
+            }
+            case 'ArrowRight': {
+                if (menu.submenu) {
+                    handleClick([]);
+                    setTimeout(() => {
+                        const nestedContainer = currentElement.nextElementSibling;
+                        const firstItem = nestedContainer?.querySelector('[data-submenu-item]');
+                        firstItem?.focus();
+                    }, 0);
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                const parentContainer = submenuContainer?.parentElement?.closest('[data-submenu-container]');
+                if (parentContainer) {
+                    const parentLabel = parentContainer.querySelector(':scope > [data-submenu-item]');
+                    parentLabel?.focus();
+                }
+                else {
+                    focusMenuHeading();
+                    closeAll();
+                }
+                break;
+            }
+            case 'Escape': {
+                closeAll();
+                focusMenuHeading();
+                break;
+            }
+            case 'Enter': {
+                if (menu.isEnabled) {
+                    handleClick([]);
+                }
+                break;
+            }
+        }
+    };
+    return (_jsxs(Container, { isOpen: menu.isOpen, "data-cy": 'submenu', "data-submenu-item": true, className: menu.isEnabled ? '' : 'disabled', tabIndex: -1, onMouseDown: (e) => {
             e.preventDefault();
             handleClick([]);
-        }, children: [_jsx(Active, { children: activeContent(menu) }), _jsx(Text, { children: menu.label }), menu.submenu && _jsx(Arrow, {}), menu.shortcut && _jsx(Shortcut, { shortcut: menu.shortcut })] }));
+        }, onKeyDown: handleKeyDown, children: [_jsx(Active, { children: activeContent(menu) }), _jsx(Text, { children: menu.label }), menu.submenu && _jsx(Arrow, {}), menu.shortcut && _jsx(Shortcut, { shortcut: menu.shortcut })] }));
 };
-export const Submenu = ({ menu, handleClick }) => {
+export const Submenu = ({ menu, handleClick, closeAll, }) => {
     if (isMenuSeparator(menu)) {
         return _jsx(Separator, {});
     }
     if (menu.component) {
-        return _jsx(menu.component, { menu: menu, handleClick: handleClick });
+        return _jsx(menu.component, { menu: menu, handleClick: handleClick, closeAll: closeAll });
     }
     if (!menu.submenu) {
-        return _jsx(SubmenuLabel, { menu: menu, handleClick: handleClick });
+        return (_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }));
     }
-    return (_jsxs(SubmenuContainer, { "data-cy": 'submenu', children: [_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick }), menu.submenu && menu.isOpen && (_jsx(NestedSubmenusContainer, { children: menu.submenu.map((submenu, index) => (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]) }, `menu-${index}`))) }))] }));
+    return (_jsxs(SubmenuContainer, { "data-cy": 'submenu', children: [_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }), menu.submenu && menu.isOpen && (_jsx(NestedSubmenusContainer, { "data-submenu-container": true, children: menu.submenu.map((submenu, index) => (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, ...i]), closeAll: closeAll }, `menu-${index}`))) }))] }));
 };

package/dist/es/components/NavDropdown.js

@@ -106,4 +106,4 @@ export const NavDropdownButtonContainer = styled(SecondaryButton).attrs((props)
     stroke: currentColor;
   }
 `;
-export const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, }) => (_jsxs(NavDropdownButtonContainer, { as: as, disabled: disabled, onClick: onClick, isOpen: isOpen, className: 'dropdown-toggle', children: [_jsx(NavDropdownButtonText, { children: children }), !!notificationsCount && (_jsx(NotificationsBadge, { isOpen: isOpen, children: notificationsCount })), !removeChevron && _jsx(NavDropdownToggle, { className: isOpen ? 'open' : '' })] }));
+export const NavDropdownButton = ({ as, children, disabled, isOpen, notificationsCount, onClick, removeChevron, buttonRef, }) => (_jsxs(NavDropdownButtonContainer, { ref: buttonRef, as: as, disabled: disabled, onClick: onClick, isOpen: isOpen, className: 'dropdown-toggle', tabIndex: 0, children: [_jsx(NavDropdownButtonText, { children: children }), !!notificationsCount && (_jsx(NotificationsBadge, { isOpen: isOpen, children: notificationsCount })), !removeChevron && _jsx(NavDropdownToggle, { className: isOpen ? 'open' : '' })] }));

package/dist/es/components/Resizer/ResizerButton.js

@@ -15,7 +15,7 @@ export class ResizerButton extends React.PureComponent {
     render() {
         const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
         const ResizerButtonInner = buttonInner || inners[direction][side];
-        return (_jsx(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault() }));
+        return (_jsx(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault(), tabIndex: 0 }));
     }
 }
 ResizerButton.defaultProps = {

package/dist/es/components/SaveStatus.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
-import { AttentionRedIcon, SaveStatusOfflineIcon, SaveStatusSavedIcon, SaveStatusSavingIcon, } from './icons';
+import { SaveStatusErrorIcon, SaveStatusOfflineIcon, SaveStatusSavedIcon, SaveStatusSavingIcon, } from './icons';
 export const SaveStatus = ({ status }) => {
     switch (status) {
         case 'offline':
@@ -10,7 +10,7 @@ export const SaveStatus = ({ status }) => {
         case 'saved':
             return (_jsxs(Container, { children: [_jsx(PopPop, { children: _jsx(SaveStatusSavedIcon, {}) }), _jsx(Text, { children: "Saved" })] }));
         case 'failed':
-            return (_jsxs(FailedContainer, { children: [_jsx(PopPop, { children: _jsx(AttentionRedIcon, {}) }), _jsx(FailedText, { children: "Failed To Save" })] }));
+            return (_jsxs(FailedContainer, { children: [_jsx(PopPop, { children: _jsx(SaveStatusErrorIcon, {}) }), _jsx(FailedText, { children: "Save error" })] }));
         default:
             return null;
     }
@@ -29,7 +29,7 @@ const Text = styled.span `
   margin-left: 0.5em;
   font-family: ${(props) => props.theme.font.family.Lato};
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 400;
 `;
 const FailedContainer = styled(Container) `
   path {
@@ -38,7 +38,7 @@ const FailedContainer = styled(Container) `
   }
 `;
 const FailedText = styled(Text) `
-  color: ${(props) => props.theme.colors.text.error};
+  color: ${(props) => props.theme.colors.text.secondary};
 `;
 const RotateContinuous = styled.div `
   svg {

package/dist/es/components/ToggleHeader.js

@@ -2,10 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { TriangleCollapsedIcon, TriangleExpandedIcon } from './icons';
 export const ToggleHeader = ({ title, isOpen, onToggle, }) => {
-    return (_jsxs(ToggleHeaderContainer, { onClick: (e) => {
-            e.stopPropagation();
-            onToggle();
-        }, children: [_jsx("span", { children: title }), _jsx(ToggleIcon, { isOpen: isOpen, children: isOpen ? _jsx(TriangleExpandedIcon, {}) : _jsx(TriangleCollapsedIcon, {}) })] }));
+    const handleToggle = (e) => {
+        e.stopPropagation();
+        onToggle();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleToggle(e);
+        }
+    };
+    return (_jsxs(ToggleHeaderContainer, { onClick: handleToggle, children: [_jsx("span", { children: title }), _jsx(ToggleIcon, { isOpen: isOpen, onKeyDown: handleKeyDown, tabIndex: 0, children: isOpen ? _jsx(TriangleExpandedIcon, {}) : _jsx(TriangleCollapsedIcon, {}) })] }));
 };
 const ToggleHeaderContainer = styled.div `
   display: flex;
@@ -30,6 +37,11 @@ export const ToggleIcon = styled.div `
   text-align: center;
   cursor: pointer;
 
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
+
   svg {
     width: 19px;
     height: 19px;

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

@@ -92,6 +92,7 @@ export { default as RoleReadingIcon } from './role-reading';
 export { default as SaveStatusOfflineIcon } from './save-status-offline';
 export { default as SaveStatusSavedIcon } from './save-status-saved';
 export { default as SaveStatusSavingIcon } from './save-status-saving';
+export { default as SaveStatusErrorIcon } from './save-status-error';
 export { default as ScrollIcon } from './scroll';
 export { default as SearchIcon } from './search';
 export { default as SectionCategoryIcon } from './section-category';

package/dist/es/components/icons/save-status-error.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SaveStatusErrorIcon = (props) => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M1.78138 8.66481C-0.264932 9.8341 0.0274413 13.0505 2.65849 13.0511H12.8905C15.5215 13.0511 17.2757 8.07953 12.8904 6.90971C12.5981 3.1078 7.04369 1.35262 4.99722 5.44728C3.24317 5.44728 1.78146 6.61707 1.78138 8.66481Z", fill: "white" }), _jsx("path", { d: "M4.72879 5.01736C5.87898 2.95783 7.91126 2.36194 9.70374 2.79082C11.4478 3.20821 13.0047 4.60833 13.2924 6.5716C14.3175 6.9008 15.037 7.4474 15.4775 8.12298C15.9565 8.85769 16.0788 9.70245 15.9548 10.4877C15.7142 12.0118 14.4922 13.49 12.8904 13.49H2.65842C1.90751 13.4898 1.28935 13.2579 0.834706 12.8599C0.382925 12.4644 0.119408 11.9279 0.0324793 11.3628C-0.129481 10.3096 0.315 9.11972 1.34973 8.41657C1.40498 7.39534 1.80147 6.55959 2.43174 5.96841C3.04545 5.39277 3.85636 5.07181 4.72879 5.01736ZM9.49933 3.64419C7.99607 3.28458 6.3123 3.79692 5.38942 5.6434C5.31514 5.79202 5.16325 5.88616 4.99715 5.88616C4.21663 5.88616 3.52442 6.1456 3.03127 6.60815C2.54256 7.06657 2.21994 7.75174 2.2199 8.66504C2.21982 8.82233 2.13541 8.96738 1.99893 9.04546C1.13936 9.53664 0.779611 10.4521 0.899227 11.2297C0.958506 11.6148 1.13361 11.9555 1.41254 12.1996C1.68873 12.4414 2.09385 12.6125 2.65842 12.6126H12.8904C13.9195 12.6126 14.8901 11.6047 15.0881 10.3507C15.1834 9.74683 15.0864 9.12867 14.7432 8.60221C14.4018 8.07861 13.7893 7.60354 12.7773 7.33358C12.5974 7.28556 12.4673 7.12915 12.453 6.94345C12.3239 5.26421 11.0281 4.00999 9.49933 3.64419Z", fill: "#F35143" }), _jsx("path", { d: "M8.52701 9.50991C8.40149 9.50991 8.30327 9.4717 8.23233 9.39527C8.16138 9.31884 8.11773 9.20693 8.10136 9.05953L7.83942 6.25898C7.81213 6.01332 7.85852 5.81679 7.97857 5.6694C8.09863 5.51654 8.28144 5.44011 8.52701 5.44011C8.76166 5.44011 8.93901 5.51654 9.05907 5.6694C9.17912 5.81679 9.22551 6.01332 9.19822 6.25898L8.93629 9.05953C8.91992 9.20693 8.87626 9.31884 8.80532 9.39527C8.73983 9.4717 8.64706 9.50991 8.52701 9.50991ZM8.52701 11.3278C8.30873 11.3278 8.1341 11.2623 8.00313 11.1313C7.87762 11.0003 7.81486 10.831 7.81486 10.6236C7.81486 10.4216 7.87762 10.2578 8.00313 10.1323C8.1341 10.0012 8.30873 9.93572 8.52701 9.93572C8.74529 9.93572 8.91446 10.0012 9.03451 10.1323C9.16002 10.2578 9.22278 10.4216 9.22278 10.6236C9.22278 10.831 9.16002 11.0003 9.03451 11.1313C8.91446 11.2623 8.74529 11.3278 8.52701 11.3278Z", fill: "#F35143" })] }));
+export default SaveStatusErrorIcon;

package/dist/es/components/icons/save-status-saved.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SaveStatusSavedIcon = (props) => (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.5 8.5L8 11L13 6", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const SaveStatusSavedIcon = (props) => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M4.72879 5.01493C5.87898 2.95619 7.91126 2.36052 9.70374 2.78924C11.4478 3.20647 13.0047 4.60605 13.2923 6.56856C14.3175 6.89764 15.037 7.44403 15.4775 8.11934C15.9565 8.85377 16.0788 9.69821 15.9548 10.4832C15.7142 12.0067 14.4922 13.4843 12.8904 13.4843H2.65842C1.90751 13.4841 1.28935 13.2523 0.834706 12.8545C0.382925 12.4591 0.119408 11.9228 0.0324793 11.3579C-0.129481 10.3052 0.315 9.1157 1.34973 8.41283C1.40498 7.39199 1.80147 6.55656 2.43174 5.96561C3.04545 5.39019 3.85636 5.06936 4.72879 5.01493ZM9.49933 3.64229C7.99607 3.28281 6.3123 3.79496 5.38941 5.64072C5.31514 5.78928 5.16325 5.88339 4.99715 5.88339C4.21663 5.88339 3.52442 6.14273 3.03127 6.6051C2.54256 7.06335 2.21994 7.74825 2.2199 8.6612C2.21982 8.81843 2.13541 8.96342 1.99893 9.04148C1.13936 9.53246 0.779611 10.4476 0.899227 11.2249C0.958506 11.6098 1.13361 11.9504 1.41254 12.1944C1.68873 12.4361 2.09385 12.6071 2.65842 12.6072H12.8904C13.9195 12.6072 14.8901 11.5998 15.0881 10.3462C15.1834 9.74258 15.0864 9.12466 14.7432 8.5984C14.4018 8.075 13.7893 7.60011 12.7773 7.33025C12.5974 7.28225 12.4673 7.1259 12.453 6.94027C12.3239 5.26168 11.0281 4.00794 9.49933 3.64229Z", fill: "#353535" }), _jsx("path", { d: "M5.83375 8.60263C5.61415 8.37347 5.25942 8.36752 5.03713 8.59372L5.16258 8.46607C4.94222 8.6903 4.94257 9.0575 5.16092 9.28367L6.64735 10.8234C6.8668 11.0507 7.22857 11.0583 7.45382 10.8418L10.6709 7.75008C10.8968 7.53293 10.9033 7.17708 10.681 6.95088L10.8064 7.07853C10.5861 6.85429 10.2218 6.84877 9.9951 7.06413L7.04469 9.86626L5.83375 8.60263Z", fill: "#353535" }), _jsx("path", { d: "M9.9951 7.06413C10.1999 6.86962 10.5167 6.85567 10.7385 7.01999C10.8996 7.24472 10.875 7.55387 10.6709 7.75008L7.45382 10.8418C7.24263 11.0448 6.91162 11.0506 6.69024 10.8633L6.64735 10.8234L5.16092 9.28367C4.96369 9.07931 4.94457 8.75992 5.1052 8.5348C5.32688 8.37089 5.63536 8.39561 5.83375 8.60263L7.04469 9.86626L9.9951 7.06413ZM5.16258 8.46607C5.14132 8.4877 5.12235 8.51076 5.1052 8.5348C5.08152 8.55231 5.05858 8.5719 5.03713 8.59372L5.16258 8.46607ZM10.8064 7.07853C10.7852 7.05691 10.7622 7.03754 10.7385 7.01999C10.7213 6.99601 10.7024 6.97269 10.681 6.95088L10.8064 7.07853Z", fill: "#353535" })] }));
 export default SaveStatusSavedIcon;

package/dist/es/components/icons/save-status-saving.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SaveStatusSavingIcon = (props) => (_jsxs("svg", { width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M1.5 8.5C1.5 4.634 4.634 1.5 8.5 1.5C11.136 1.5 13.328 3.141 14.5 5.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14.5 1.5V5.5H10.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M15.5 9.5C15.5 13.366 12.366 16.5 8.5 16.5C5.864 16.5 3.672 14.859 2.5 12.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2.5 16.5V12.5H6.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const SaveStatusSavingIcon = (props) => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M5.00952 0.601385C8.65885 -0.895443 12.7584 0.497603 14.8201 3.71791C15.0887 4.1375 14.9696 4.6974 14.5538 4.96847C14.138 5.23951 13.5831 5.11924 13.3145 4.69972C11.7115 2.19573 8.52138 1.11368 5.6846 2.27721C3.41043 3.21003 1.97045 5.33611 1.79002 7.6519C1.75123 8.14991 1.31958 8.52218 0.826057 8.48304C0.33261 8.44382 -0.0359859 8.00811 0.00280092 7.51016C0.234328 4.53832 2.08281 1.80186 5.00952 0.601385Z", fill: "#6E6E6E" }), _jsx("path", { d: "M15.3651 5.05769C15.3638 5.30564 15.1649 5.50632 14.9192 5.5076L10.7188 5.52945C10.3184 5.53153 10.1164 5.04312 10.3996 4.75742L14.6217 0.496996C14.9048 0.211301 15.3888 0.415086 15.3867 0.819115L15.3651 5.05769Z", fill: "#6E6E6E" }), _jsx("path", { d: "M10.9905 15.3986C7.34115 16.8954 3.24155 15.5024 1.17987 12.2821C0.91126 11.8625 1.03041 11.3026 1.44621 11.0315C1.862 10.7605 2.41687 10.8808 2.68552 11.3003C4.28853 13.8043 7.47862 14.8863 10.3154 13.7228C12.5896 12.79 14.0296 10.6639 14.21 8.3481C14.2488 7.8501 14.6804 7.47782 15.1739 7.51696C15.6674 7.55618 16.036 7.99189 15.9972 8.48984C15.7657 11.4617 13.9172 14.1981 10.9905 15.3986Z", fill: "#6E6E6E" }), _jsx("path", { d: "M0.634908 10.9423C0.636174 10.6944 0.835054 10.4937 1.08077 10.4924L5.28122 10.4706C5.68161 10.4685 5.88357 10.9569 5.60044 11.2426L1.37834 15.503C1.09521 15.7887 0.611191 15.5849 0.613255 15.1809L0.634908 10.9423Z", fill: "#6E6E6E" })] }));
 export default SaveStatusSavingIcon;

package/dist/es/hooks/use-menus.js

@@ -86,9 +86,13 @@ export const useMenus = (menus) => {
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
+    const closeAll = useCallback(() => {
+        setPointer(initialPointer);
+    }, []);
     return {
         menus: state,
         handleClick,
+        closeAll,
         ref,
     };
 };

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

@@ -19,6 +19,7 @@ interface MenusProps {
     menus: Menu[];
     innerRef: Ref<HTMLDivElement>;
     handleClick: (position: number[]) => void;
+    closeAll: () => void;
 }
 export declare const Menus: React.FC<MenusProps>;
 export {};

package/dist/types/components/Menus/Submenu.d.ts

@@ -23,6 +23,7 @@ export declare const NestedSubmenusContainer: import("styled-components").Styled
 export interface SubmenuProps {
     menu: Menu | MenuSeparator;
     handleClick: (position: number[]) => void;
+    closeAll: () => void;
 }
 export declare const SubmenuLabel: React.FC<SubmenuProps>;
 export declare const Submenu: React.FC<SubmenuProps>;

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

@@ -52,6 +52,7 @@ interface DropdownButtonProps {
     onClick?: React.MouseEventHandler;
     removeChevron?: boolean;
     children: React.ReactNode;
+    buttonRef?: React.Ref<HTMLButtonElement>;
 }
 export declare const NavDropdownButton: React.FunctionComponent<DropdownButtonProps>;
 export {};

package/dist/types/components/icons/index.d.ts

@@ -92,6 +92,7 @@ export { default as RoleReadingIcon } from './role-reading';
 export { default as SaveStatusOfflineIcon } from './save-status-offline';
 export { default as SaveStatusSavedIcon } from './save-status-saved';
 export { default as SaveStatusSavingIcon } from './save-status-saving';
+export { default as SaveStatusErrorIcon } from './save-status-error';
 export { default as ScrollIcon } from './scroll';
 export { default as SearchIcon } from './search';
 export { default as SectionCategoryIcon } from './section-category';

package/dist/types/components/icons/save-status-error.d.ts

@@ -0,0 +1,19 @@
+/*!
+ * © 2025 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { IconProps } from './types';
+declare const SaveStatusErrorIcon: React.FC<IconProps>;
+export default SaveStatusErrorIcon;

package/dist/types/hooks/use-menus.d.ts

@@ -2,5 +2,6 @@ import { Menu, MenuSpec } from '../lib/menus';
 export declare const useMenus: (menus: MenuSpec[]) => {
     menus: Menu[];
     handleClick: (indices: number[]) => void;
+    closeAll: () => void;
     ref: import("react").RefObject<HTMLDivElement | null>;
 };

package/dist/types/lib/menus.d.ts

@@ -21,6 +21,7 @@ export interface MenuShortcut {
 export interface MenuComponentProps {
     menu: Menu;
     handleClick: (position: number[]) => void;
+    closeAll: () => void;
 }
 export interface MenuSpec {
     id: string;

package/dist/types/theme.d.ts

@@ -26,6 +26,10 @@ interface Colors {
     brand: Brand;
     button: Button;
     text: Text & Alerts & Variations;
+    outline: Outline;
+}
+interface Outline {
+    focus: string;
 }
 interface Font {
     family: FontFamily;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.3.11",
+  "version": "3.3.13",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",