@manuscripts/style-guide 3.4.1 → 3.4.3

package/dist/cjs/colors.js

@@ -0,0 +1,49 @@
+"use strict";
+/*!
+ * © 2026 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.butteryYellow = exports.wheatYellow = exports.zestOrange = exports.peppermintGreen = exports.springGreen = exports.killarneyGreen = exports.darkRed = exports.chablisRed = exports.mandysRed = exports.punchRed = exports.graphBlue1 = exports.focusBlue = exports.powderBlue = exports.aliceBlue = exports.jellyBeanBlue = exports.white = exports.alabasterGrey = exports.seashellGrey = exports.mercuryGrey = exports.greyLight = exports.greyMutedText = exports.greyMuted = exports.greyDark = exports.black = exports.manuscriptsSecondary = exports.manuscriptsXLight2 = exports.manuscriptsXLight = exports.manuscriptsLight = exports.manuscriptsIcons = exports.manuscriptsBlue = exports.manuscriptsBlueDark = void 0;
+exports.manuscriptsBlueDark = '#0b6bb8';
+exports.manuscriptsBlue = '#0d79d0';
+exports.manuscriptsIcons = '#1a9bc7';
+exports.manuscriptsLight = '#bce7f6';
+exports.manuscriptsXLight = '#ddf3fa';
+exports.manuscriptsXLight2 = '#f5fbfc';
+exports.manuscriptsSecondary = '#ffbd26';
+exports.black = '#000';
+exports.greyDark = '#353535';
+exports.greyMuted = '#6e6e6e';
+exports.greyMutedText = '#c9c9c9';
+exports.greyLight = '#c9c9c9';
+exports.mercuryGrey = '#e2e2e2';
+exports.seashellGrey = '#f2f2f2';
+exports.alabasterGrey = '#fafafa';
+exports.white = '#fff';
+exports.jellyBeanBlue = '#2781a1';
+exports.aliceBlue = '#f2fbfc';
+exports.powderBlue = '#ddf3fa';
+exports.focusBlue = '#3DADFF';
+exports.graphBlue1 = '#20AEDF';
+exports.punchRed = '#f35143';
+exports.mandysRed = '#f5c1b7';
+exports.chablisRed = '#fff1f0';
+exports.darkRed = '#c74237';
+exports.killarneyGreen = '#36b260';
+exports.springGreen = '#b2c0ac';
+exports.peppermintGreen = '#dff0d7';
+exports.zestOrange = '#fe8f1f';
+exports.wheatYellow = '#ffe0b2';
+exports.butteryYellow = '#fffcdb';

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

@@ -34,7 +34,7 @@ const MenuContainer = styled_components_1.default.div `
     }
   }
 `;
-const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
+const Menus = ({ menus, innerRef, handleClick, close, }) => {
     const menuHeadingsRef = (0, react_1.useRef)([]);
     (0, react_1.useEffect)(() => {
         menuHeadingsRef.current.forEach((heading, index) => {
@@ -71,7 +71,7 @@ const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
             case 'Escape': {
                 event.preventDefault();
                 event.stopPropagation();
-                closeAll();
+                close();
                 break;
             }
             case 'ArrowDown': {
@@ -96,7 +96,7 @@ const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
                             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, { "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}`));
+                                return ((0, jsx_runtime_1.jsx)(Submenu_1.Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), close: close }, `${index}-${sindex}`));
                             }) }) }))] }, `menu-${index}`));
         }) }));
 };

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

@@ -83,7 +83,7 @@ const Container = styled_components_1.default.div `
   }
 `;
 const activeContent = (menu) => (menu.isActive ? '✓' : '');
-const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
+const SubmenuLabel = ({ menu, handleClick, close, }) => {
     if ((0, menus_1.isMenuSeparator)(menu)) {
         return null;
     }
@@ -132,17 +132,21 @@ const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
             case 'ArrowLeft': {
                 const parentContainer = submenuContainer?.parentElement?.closest('[data-submenu-container]');
                 if (parentContainer) {
+                    if (menu.position) {
+                        const currentDepth = menu.position.length - 2;
+                        close(currentDepth);
+                    }
                     const parentLabel = parentContainer.querySelector(':scope > [data-submenu-item]');
                     parentLabel?.focus();
                 }
                 else {
                     focusMenuHeading();
-                    closeAll();
+                    close();
                 }
                 break;
             }
             case 'Escape': {
-                closeAll();
+                close();
                 focusMenuHeading();
                 break;
             }
@@ -160,16 +164,16 @@ const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
         }, 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, closeAll, }) => {
+const Submenu = ({ menu, handleClick, close, }) => {
     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, closeAll: closeAll });
+        return ((0, jsx_runtime_1.jsx)(menu.component, { menu: menu, handleClick: handleClick, close: close }));
     }
     if (!menu.submenu) {
-        return ((0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }));
+        return (0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick, close: close });
     }
-    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}`))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.SubmenuContainer, { "data-cy": 'submenu', children: [(0, jsx_runtime_1.jsx)(exports.SubmenuLabel, { menu: menu, handleClick: handleClick, close: close }), 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]), close: close }, `menu-${index}`))) }))] }));
 };
 exports.Submenu = Submenu;

package/dist/cjs/defaultTheme.js

@@ -0,0 +1,235 @@
+"use strict";
+/*!
+ * © 2026 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.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultTheme = void 0;
+const colors = __importStar(require("./colors"));
+const fontFamily = '"Lato", sans-serif';
+exports.defaultTheme = {
+    name: 'Manuscripts',
+    colors: {
+        background: {
+            primary: colors.white,
+            secondary: colors.alabasterGrey,
+            tertiary: colors.mercuryGrey,
+            fifth: colors.manuscriptsXLight2,
+            dark: 'rgba(0,0,0,0.5)',
+            error: colors.mandysRed,
+            info: colors.manuscriptsXLight2,
+            success: colors.peppermintGreen,
+            warning: colors.wheatYellow,
+            selected: colors.aliceBlue,
+            muted: colors.greyMuted,
+            tracked: {
+                active: colors.graphBlue1,
+                default: colors.greyLight,
+                hover: colors.greyLight,
+            },
+        },
+        border: {
+            error: colors.mandysRed,
+            info: colors.manuscriptsBlue,
+            success: colors.springGreen,
+            warning: colors.wheatYellow,
+            primary: colors.manuscriptsLight,
+            secondary: colors.mercuryGrey,
+            tertiary: colors.seashellGrey,
+            muted: colors.greyLight,
+            field: {
+                active: colors.manuscriptsLight,
+                default: colors.mercuryGrey,
+                hover: colors.manuscriptsLight,
+            },
+            tracked: {
+                active: colors.graphBlue1,
+                default: colors.greyLight,
+                hover: colors.greyLight,
+            },
+        },
+        brand: {
+            dark: colors.manuscriptsBlueDark,
+            medium: colors.manuscriptsIcons,
+            default: colors.manuscriptsBlue,
+            light: colors.manuscriptsLight,
+            xlight: colors.manuscriptsXLight,
+            secondary: colors.manuscriptsSecondary,
+        },
+        button: {
+            default: {
+                background: {
+                    active: 'transparent',
+                    default: 'transparent',
+                    hover: colors.manuscriptsXLight2,
+                },
+                border: {
+                    active: 'transparent',
+                    default: 'transparent',
+                    hover: colors.manuscriptsXLight2,
+                },
+                color: {
+                    active: colors.manuscriptsBlue,
+                    default: colors.manuscriptsBlue,
+                    hover: colors.manuscriptsBlue,
+                },
+            },
+            primary: {
+                background: {
+                    active: colors.manuscriptsBlueDark,
+                    default: colors.manuscriptsBlue,
+                    hover: colors.manuscriptsBlueDark,
+                },
+                border: {
+                    active: colors.manuscriptsBlueDark,
+                    default: colors.manuscriptsBlue,
+                    hover: colors.manuscriptsBlueDark,
+                },
+                color: {
+                    active: colors.white,
+                    default: colors.white,
+                    hover: colors.white,
+                },
+            },
+            secondary: {
+                background: {
+                    active: colors.white,
+                    default: colors.white,
+                    hover: colors.white,
+                },
+                border: {
+                    active: colors.mercuryGrey,
+                    default: colors.mercuryGrey,
+                    hover: colors.mercuryGrey,
+                },
+                color: {
+                    active: colors.manuscriptsBlue,
+                    default: colors.greyDark,
+                    hover: colors.manuscriptsBlue,
+                },
+            },
+            error: {
+                background: {
+                    active: colors.punchRed,
+                    default: colors.punchRed,
+                    hover: colors.darkRed,
+                },
+                border: {
+                    active: colors.punchRed,
+                    default: colors.punchRed,
+                    hover: colors.darkRed,
+                },
+                color: {
+                    active: colors.white,
+                    default: colors.white,
+                    hover: colors.white,
+                },
+            },
+        },
+        text: {
+            primary: colors.greyDark,
+            secondary: colors.greyMuted,
+            tertiary: colors.manuscriptsBlue,
+            muted: colors.greyLight,
+            onDark: colors.white,
+            onLight: colors.greyMuted,
+            error: colors.punchRed,
+            info: colors.jellyBeanBlue,
+            success: colors.killarneyGreen,
+            warning: colors.zestOrange,
+        },
+        outline: {
+            focus: colors.focusBlue,
+        },
+    },
+    font: {
+        family: {
+            sans: fontFamily,
+            serif: 'serif',
+            Lato: 'Lato',
+        },
+        size: {
+            xlarge: '20px',
+            large: '18px',
+            medium: '16px',
+            normal: '14px',
+            small: '12px',
+        },
+        lineHeight: {
+            large: '24px',
+            normal: '16px',
+            small: '14px',
+        },
+        weight: {
+            xbold: 900,
+            bold: 700,
+            semibold: 600,
+            medium: 500,
+            normal: 400,
+            light: 300,
+            xlight: 200,
+        },
+    },
+    grid: {
+        radius: {
+            default: '8px',
+            small: '4px',
+            rounder: '16px',
+        },
+        unit: 4,
+        mobile: 360,
+        tablet: 768,
+        smallDesktop: 1024,
+        desktop: 1280,
+        largeDesktop: 1920,
+        editorMaxWidth: 960,
+    },
+    shadow: {
+        boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.05)',
+        dropShadow: '0 4px 9px 0 rgba(84, 83, 83, 0.3)',
+    },
+};

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

@@ -31,6 +31,7 @@ const getSubmenuState = (specs, pointer, position) => {
         const current = [...position, index];
         return {
             ...spec,
+            position: current,
             submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current),
             isOpen: isPart(pointer, current),
         };
@@ -41,6 +42,7 @@ const getMenuState = (specs, pointer) => {
         const position = [index];
         return {
             ...spec,
+            position,
             submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position),
             isOpen: isPart(pointer, position),
         };
@@ -89,13 +91,13 @@ const useMenus = (menus) => {
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
-    const closeAll = (0, react_1.useCallback)(() => {
-        setPointer(initialPointer);
+    const close = (0, react_1.useCallback)((depth) => {
+        setPointer(depth === undefined ? initialPointer : transformPointer(depth, -1));
     }, []);
     return {
         menus: state,
         handleClick,
-        closeAll,
+        close,
         ref,
     };
 };

package/dist/cjs/index.js

@@ -25,11 +25,36 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDeepCompareCallback = exports.useDeepCompareMemo = exports.ToggleIcon = exports.ToggleHeader = void 0;
+exports.useDeepCompareCallback = exports.useDeepCompareMemo = exports.ToggleIcon = exports.ToggleHeader = exports.colors = exports.defaultTheme = void 0;
+var defaultTheme_1 = require("./defaultTheme");
+Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return defaultTheme_1.defaultTheme; } });
+exports.colors = __importStar(require("./colors"));
 __exportStar(require("./components/AlertMessage"), exports);
 __exportStar(require("./components/Message"), exports);
 __exportStar(require("./components/Button"), exports);

package/dist/es/colors.js

@@ -0,0 +1,46 @@
+/*!
+ * © 2026 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.
+ */
+export const manuscriptsBlueDark = '#0b6bb8';
+export const manuscriptsBlue = '#0d79d0';
+export const manuscriptsIcons = '#1a9bc7';
+export const manuscriptsLight = '#bce7f6';
+export const manuscriptsXLight = '#ddf3fa';
+export const manuscriptsXLight2 = '#f5fbfc';
+export const manuscriptsSecondary = '#ffbd26';
+export const black = '#000';
+export const greyDark = '#353535';
+export const greyMuted = '#6e6e6e';
+export const greyMutedText = '#c9c9c9';
+export const greyLight = '#c9c9c9';
+export const mercuryGrey = '#e2e2e2';
+export const seashellGrey = '#f2f2f2';
+export const alabasterGrey = '#fafafa';
+export const white = '#fff';
+export const jellyBeanBlue = '#2781a1';
+export const aliceBlue = '#f2fbfc';
+export const powderBlue = '#ddf3fa';
+export const focusBlue = '#3DADFF';
+export const graphBlue1 = '#20AEDF';
+export const punchRed = '#f35143';
+export const mandysRed = '#f5c1b7';
+export const chablisRed = '#fff1f0';
+export const darkRed = '#c74237';
+export const killarneyGreen = '#36b260';
+export const springGreen = '#b2c0ac';
+export const peppermintGreen = '#dff0d7';
+export const zestOrange = '#fe8f1f';
+export const wheatYellow = '#ffe0b2';
+export const butteryYellow = '#fffcdb';

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

@@ -28,7 +28,7 @@ const MenuContainer = styled.div `
     }
   }
 `;
-export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
+export const Menus = ({ menus, innerRef, handleClick, close, }) => {
     const menuHeadingsRef = useRef([]);
     useEffect(() => {
         menuHeadingsRef.current.forEach((heading, index) => {
@@ -65,7 +65,7 @@ export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
             case 'Escape': {
                 event.preventDefault();
                 event.stopPropagation();
-                closeAll();
+                close();
                 break;
             }
             case 'ArrowDown': {
@@ -90,7 +90,7 @@ export const Menus = ({ menus, innerRef, handleClick, closeAll, }) => {
                             e.preventDefault();
                             handleClick([index]);
                         }, 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}`));
+                                return (_jsx(Submenu, { menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]), close: close }, `${index}-${sindex}`));
                             }) }) }))] }, `menu-${index}`));
         }) }));
 };

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

@@ -77,7 +77,7 @@ const Container = styled.div `
   }
 `;
 const activeContent = (menu) => (menu.isActive ? '✓' : '');
-export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
+export const SubmenuLabel = ({ menu, handleClick, close, }) => {
     if (isMenuSeparator(menu)) {
         return null;
     }
@@ -126,17 +126,21 @@ export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
             case 'ArrowLeft': {
                 const parentContainer = submenuContainer?.parentElement?.closest('[data-submenu-container]');
                 if (parentContainer) {
+                    if (menu.position) {
+                        const currentDepth = menu.position.length - 2;
+                        close(currentDepth);
+                    }
                     const parentLabel = parentContainer.querySelector(':scope > [data-submenu-item]');
                     parentLabel?.focus();
                 }
                 else {
                     focusMenuHeading();
-                    closeAll();
+                    close();
                 }
                 break;
             }
             case 'Escape': {
-                closeAll();
+                close();
                 focusMenuHeading();
                 break;
             }
@@ -153,15 +157,15 @@ export const SubmenuLabel = ({ menu, handleClick, closeAll, }) => {
             handleClick([]);
         }, 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, closeAll, }) => {
+export const Submenu = ({ menu, handleClick, close, }) => {
     if (isMenuSeparator(menu)) {
         return _jsx(Separator, {});
     }
     if (menu.component) {
-        return _jsx(menu.component, { menu: menu, handleClick: handleClick, closeAll: closeAll });
+        return (_jsx(menu.component, { menu: menu, handleClick: handleClick, close: close }));
     }
     if (!menu.submenu) {
-        return (_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }));
+        return _jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, close: close });
     }
-    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}`))) }))] }));
+    return (_jsxs(SubmenuContainer, { "data-cy": 'submenu', children: [_jsx(SubmenuLabel, { menu: menu, handleClick: handleClick, close: close }), 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]), close: close }, `menu-${index}`))) }))] }));
 };

package/dist/es/defaultTheme.js

@@ -0,0 +1,199 @@
+/*!
+ * © 2026 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 * as colors from './colors';
+const fontFamily = '"Lato", sans-serif';
+export const defaultTheme = {
+    name: 'Manuscripts',
+    colors: {
+        background: {
+            primary: colors.white,
+            secondary: colors.alabasterGrey,
+            tertiary: colors.mercuryGrey,
+            fifth: colors.manuscriptsXLight2,
+            dark: 'rgba(0,0,0,0.5)',
+            error: colors.mandysRed,
+            info: colors.manuscriptsXLight2,
+            success: colors.peppermintGreen,
+            warning: colors.wheatYellow,
+            selected: colors.aliceBlue,
+            muted: colors.greyMuted,
+            tracked: {
+                active: colors.graphBlue1,
+                default: colors.greyLight,
+                hover: colors.greyLight,
+            },
+        },
+        border: {
+            error: colors.mandysRed,
+            info: colors.manuscriptsBlue,
+            success: colors.springGreen,
+            warning: colors.wheatYellow,
+            primary: colors.manuscriptsLight,
+            secondary: colors.mercuryGrey,
+            tertiary: colors.seashellGrey,
+            muted: colors.greyLight,
+            field: {
+                active: colors.manuscriptsLight,
+                default: colors.mercuryGrey,
+                hover: colors.manuscriptsLight,
+            },
+            tracked: {
+                active: colors.graphBlue1,
+                default: colors.greyLight,
+                hover: colors.greyLight,
+            },
+        },
+        brand: {
+            dark: colors.manuscriptsBlueDark,
+            medium: colors.manuscriptsIcons,
+            default: colors.manuscriptsBlue,
+            light: colors.manuscriptsLight,
+            xlight: colors.manuscriptsXLight,
+            secondary: colors.manuscriptsSecondary,
+        },
+        button: {
+            default: {
+                background: {
+                    active: 'transparent',
+                    default: 'transparent',
+                    hover: colors.manuscriptsXLight2,
+                },
+                border: {
+                    active: 'transparent',
+                    default: 'transparent',
+                    hover: colors.manuscriptsXLight2,
+                },
+                color: {
+                    active: colors.manuscriptsBlue,
+                    default: colors.manuscriptsBlue,
+                    hover: colors.manuscriptsBlue,
+                },
+            },
+            primary: {
+                background: {
+                    active: colors.manuscriptsBlueDark,
+                    default: colors.manuscriptsBlue,
+                    hover: colors.manuscriptsBlueDark,
+                },
+                border: {
+                    active: colors.manuscriptsBlueDark,
+                    default: colors.manuscriptsBlue,
+                    hover: colors.manuscriptsBlueDark,
+                },
+                color: {
+                    active: colors.white,
+                    default: colors.white,
+                    hover: colors.white,
+                },
+            },
+            secondary: {
+                background: {
+                    active: colors.white,
+                    default: colors.white,
+                    hover: colors.white,
+                },
+                border: {
+                    active: colors.mercuryGrey,
+                    default: colors.mercuryGrey,
+                    hover: colors.mercuryGrey,
+                },
+                color: {
+                    active: colors.manuscriptsBlue,
+                    default: colors.greyDark,
+                    hover: colors.manuscriptsBlue,
+                },
+            },
+            error: {
+                background: {
+                    active: colors.punchRed,
+                    default: colors.punchRed,
+                    hover: colors.darkRed,
+                },
+                border: {
+                    active: colors.punchRed,
+                    default: colors.punchRed,
+                    hover: colors.darkRed,
+                },
+                color: {
+                    active: colors.white,
+                    default: colors.white,
+                    hover: colors.white,
+                },
+            },
+        },
+        text: {
+            primary: colors.greyDark,
+            secondary: colors.greyMuted,
+            tertiary: colors.manuscriptsBlue,
+            muted: colors.greyLight,
+            onDark: colors.white,
+            onLight: colors.greyMuted,
+            error: colors.punchRed,
+            info: colors.jellyBeanBlue,
+            success: colors.killarneyGreen,
+            warning: colors.zestOrange,
+        },
+        outline: {
+            focus: colors.focusBlue,
+        },
+    },
+    font: {
+        family: {
+            sans: fontFamily,
+            serif: 'serif',
+            Lato: 'Lato',
+        },
+        size: {
+            xlarge: '20px',
+            large: '18px',
+            medium: '16px',
+            normal: '14px',
+            small: '12px',
+        },
+        lineHeight: {
+            large: '24px',
+            normal: '16px',
+            small: '14px',
+        },
+        weight: {
+            xbold: 900,
+            bold: 700,
+            semibold: 600,
+            medium: 500,
+            normal: 400,
+            light: 300,
+            xlight: 200,
+        },
+    },
+    grid: {
+        radius: {
+            default: '8px',
+            small: '4px',
+            rounder: '16px',
+        },
+        unit: 4,
+        mobile: 360,
+        tablet: 768,
+        smallDesktop: 1024,
+        desktop: 1280,
+        largeDesktop: 1920,
+        editorMaxWidth: 960,
+    },
+    shadow: {
+        boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.05)',
+        dropShadow: '0 4px 9px 0 rgba(84, 83, 83, 0.3)',
+    },
+};

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

@@ -28,6 +28,7 @@ const getSubmenuState = (specs, pointer, position) => {
         const current = [...position, index];
         return {
             ...spec,
+            position: current,
             submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current),
             isOpen: isPart(pointer, current),
         };
@@ -38,6 +39,7 @@ const getMenuState = (specs, pointer) => {
         const position = [index];
         return {
             ...spec,
+            position,
             submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position),
             isOpen: isPart(pointer, position),
         };
@@ -86,13 +88,13 @@ export const useMenus = (menus) => {
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
-    const closeAll = useCallback(() => {
-        setPointer(initialPointer);
+    const close = useCallback((depth) => {
+        setPointer(depth === undefined ? initialPointer : transformPointer(depth, -1));
     }, []);
     return {
         menus: state,
         handleClick,
-        closeAll,
+        close,
         ref,
     };
 };

package/dist/es/index.js

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export { defaultTheme } from './defaultTheme';
+export * as colors from './colors';
 export * from './components/AlertMessage';
 export * from './components/Message';
 export * from './components/Button';

package/dist/types/colors.d.ts

@@ -0,0 +1,46 @@
+/*!
+ * © 2026 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.
+ */
+export declare const manuscriptsBlueDark = "#0b6bb8";
+export declare const manuscriptsBlue = "#0d79d0";
+export declare const manuscriptsIcons = "#1a9bc7";
+export declare const manuscriptsLight = "#bce7f6";
+export declare const manuscriptsXLight = "#ddf3fa";
+export declare const manuscriptsXLight2 = "#f5fbfc";
+export declare const manuscriptsSecondary = "#ffbd26";
+export declare const black = "#000";
+export declare const greyDark = "#353535";
+export declare const greyMuted = "#6e6e6e";
+export declare const greyMutedText = "#c9c9c9";
+export declare const greyLight = "#c9c9c9";
+export declare const mercuryGrey = "#e2e2e2";
+export declare const seashellGrey = "#f2f2f2";
+export declare const alabasterGrey = "#fafafa";
+export declare const white = "#fff";
+export declare const jellyBeanBlue = "#2781a1";
+export declare const aliceBlue = "#f2fbfc";
+export declare const powderBlue = "#ddf3fa";
+export declare const focusBlue = "#3DADFF";
+export declare const graphBlue1 = "#20AEDF";
+export declare const punchRed = "#f35143";
+export declare const mandysRed = "#f5c1b7";
+export declare const chablisRed = "#fff1f0";
+export declare const darkRed = "#c74237";
+export declare const killarneyGreen = "#36b260";
+export declare const springGreen = "#b2c0ac";
+export declare const peppermintGreen = "#dff0d7";
+export declare const zestOrange = "#fe8f1f";
+export declare const wheatYellow = "#ffe0b2";
+export declare const butteryYellow = "#fffcdb";

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

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

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

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

package/dist/types/defaultTheme.d.ts

@@ -0,0 +1,17 @@
+/*!
+ * © 2026 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 type { Theme } from './theme';
+export declare const defaultTheme: Theme;

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

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

package/dist/types/index.d.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 export { Theme } from './theme';
+export { defaultTheme } from './defaultTheme';
+export * as colors from './colors';
 export * from './components/AlertMessage';
 export * from './components/Message';
 export * from './components/Button';

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

@@ -21,7 +21,7 @@ export interface MenuShortcut {
 export interface MenuComponentProps {
     menu: Menu;
     handleClick: (position: number[]) => void;
-    closeAll: () => void;
+    close: (depth?: number) => void;
 }
 export interface MenuSpec {
     id: string;
@@ -38,6 +38,7 @@ export interface MenuSpec {
 export interface Menu extends MenuSpec {
     isOpen: boolean;
     submenu?: (Menu | MenuSeparator)[];
+    position?: number[];
 }
 export type MenuSeparator = {
     role: 'separator';

package/dist/types/theme.d.ts

@@ -82,10 +82,12 @@ interface Background {
     dark: string;
     selected: string;
     tracked: States;
+    muted: string;
 }
 interface Border {
     field: States;
     tracked: States;
+    muted: string;
 }
 interface Brand {
     dark: string;

package/package.json

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