@ndlib/component-library 0.0.7-9.1

package/dist/components/composites/EmptyState/EmptyState.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EmptyState } from '.';
+declare const meta: Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const CustomMessage: Story;
+export declare const JsxMessage: Story;
+export declare const CustomIcon: Story;

package/dist/components/composites/EmptyState/EmptyState.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMPTY_STATE_SIZE, EmptyState } from '.';
+import NotInterestedIcon from '@mui/icons-material/NotInterested';
+import { Link } from '../../elements/Link';
+import { FONT_SIZE } from '../../../theme/typography';
+const meta = {
+    title: 'Composites/EmptyState',
+    component: EmptyState,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(EmptyState, {}),
+    args: {},
+};
+export const Small = {
+    render: () => _jsx(EmptyState, { size: EMPTY_STATE_SIZE.SM }),
+    args: {},
+};
+export const CustomMessage = {
+    render: () => _jsx(EmptyState, { children: "Custom message" }),
+    args: {},
+};
+export const JsxMessage = {
+    render: () => (_jsxs(EmptyState, { children: ["Something is wrong.", ' ', _jsx(Link, Object.assign({ to: "/", sx: { fontSize: FONT_SIZE.MD } }, { children: "Click here to fix." }))] })),
+    args: {},
+};
+export const CustomIcon = {
+    render: () => _jsx(EmptyState, { message: "Custom icon", icon: NotInterestedIcon }),
+    args: {},
+};

package/dist/components/composites/EmptyState/EmptyState.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/composites/EmptyState/EmptyState.test.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { EmptyState, DEFAULT_MESSAGE } from '.';
+const TEST_MESSAGE = 'test message';
+const MOCK_ICON_TEST_ID = 'mock-icon';
+const MockIcon = () => _jsx("div", { "data-testid": MOCK_ICON_TEST_ID });
+describe('EmptyState', () => {
+    it('renders passed message', () => {
+        const { getByText } = render(_jsx(EmptyState, { children: TEST_MESSAGE }));
+        expect(getByText(TEST_MESSAGE)).toBeDefined();
+    });
+    it('renders default message if no message passed', () => {
+        const { getByText } = render(_jsx(EmptyState, {}));
+        expect(getByText(DEFAULT_MESSAGE)).toBeDefined();
+    });
+    it('renders passed icon', () => {
+        const { getByTestId } = render(_jsx(EmptyState, { icon: MockIcon }));
+        expect(getByTestId(MOCK_ICON_TEST_ID)).toBeDefined();
+    });
+});

package/dist/components/composites/EmptyState/index.d.ts

@@ -0,0 +1,15 @@
+import { StyledElementProps } from '../../../theme';
+import React from 'react';
+export declare enum EMPTY_STATE_SIZE {
+    SM = "SM",
+    LG = "LG"
+}
+type EmptyStateProps = StyledElementProps<HTMLDivElement, {
+    icon?: React.FC;
+    omitIcon?: boolean;
+    size?: EMPTY_STATE_SIZE;
+    message?: string;
+}>;
+export declare const DEFAULT_MESSAGE = "No results found.";
+export declare const EmptyState: React.FC<EmptyStateProps>;
+export {};

package/dist/components/composites/EmptyState/index.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _SearchOffIcon from '@mui/icons-material/SearchOff';
+import { Row } from '../../elements/layout/Row';
+import { Column } from '../../elements/layout/Column';
+import { PARAGRAPH_SIZE, Paragraph } from '../../elements/text/Paragraph';
+import { COLOR } from '../../../theme/colors';
+import { Icon } from '../../elements/Icon';
+import { FONT_SIZE } from '../../../theme/typography';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const SearchOffIcon = importedDefaultComponentShim(_SearchOffIcon);
+export var EMPTY_STATE_SIZE;
+(function (EMPTY_STATE_SIZE) {
+    EMPTY_STATE_SIZE["SM"] = "SM";
+    EMPTY_STATE_SIZE["LG"] = "LG";
+})(EMPTY_STATE_SIZE || (EMPTY_STATE_SIZE = {}));
+export const DEFAULT_MESSAGE = 'No results found.';
+export const EmptyState = (_a) => {
+    var { omitIcon, icon, children, size: sizeProp, sx } = _a, rest = __rest(_a, ["omitIcon", "icon", "children", "size", "sx"]);
+    const size = sizeProp || EMPTY_STATE_SIZE.LG;
+    return (_jsxs(Column, Object.assign({ sx: Object.assign({ width: '100%', alignItems: 'center', justifyContent: 'center', mt: size === EMPTY_STATE_SIZE.SM ? 3 : 5 }, sx) }, rest, { children: [_jsx(Row, { children: omitIcon ? null : (_jsx(Icon, { icon: icon || SearchOffIcon, size: size === EMPTY_STATE_SIZE.SM ? FONT_SIZE.ML : FONT_SIZE.XL, color: COLOR.GRAY })) }), _jsx(Row, Object.assign({ sx: { mt: size === EMPTY_STATE_SIZE.SM ? 0 : 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.GRAY }, size: size === EMPTY_STATE_SIZE.SM ? PARAGRAPH_SIZE.MD : PARAGRAPH_SIZE.LG }, { children: children || DEFAULT_MESSAGE })) }))] })));
+};

package/dist/components/composites/Modal/Modal.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Modal } from '.';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;

package/dist/components/composites/Modal/Modal.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from '.';
+import { Button } from '../../elements/Button';
+import { Paragraph } from '../../elements/text/Paragraph';
+import { useDialog } from '../../providers/dialogs';
+import { useTheme } from '../../../theme';
+const meta = {
+    title: 'Composites/Modal',
+    component: Modal,
+    tags: ['autodocs'],
+};
+export default meta;
+const ModalExample = () => {
+    const modalId = 'modal-example';
+    const { open, close, state } = useDialog(modalId);
+    const theme = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: theme.zIndex.DIALOG } }, { children: "Open Modal" })), _jsx(Modal, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
+                    {
+                        label: 'Secondary',
+                        isPrimary: false,
+                        onClick: () => { },
+                    },
+                    {
+                        label: 'Customized',
+                        onClick: () => { },
+                        buttonProps: {
+                            loading: true,
+                        },
+                    },
+                    {
+                        label: 'Primary',
+                        isPrimary: true,
+                        onClick: () => { },
+                    },
+                ] }, { children: _jsx(Paragraph, { children: "Modal body goes here" }) }))] }));
+};
+export const Default = {
+    render: () => _jsx(ModalExample, {}),
+    args: {},
+};

package/dist/components/composites/Modal/index.d.ts

@@ -0,0 +1,21 @@
+import { StyledElementProps } from '../../../theme';
+import React from 'react';
+import { ButtonProps } from '../../elements/Button';
+type ModalProps = StyledElementProps<HTMLDivElement, {
+    isOpen: boolean;
+    close: (e: React.MouseEvent) => void;
+    heading: string;
+    hideHeading?: boolean;
+    zIndex?: number;
+    footer?: React.ReactNode;
+    actions?: ModalAction[];
+    wrapWithTheme?: boolean;
+}>;
+type ModalAction = {
+    label: string;
+    isPrimary?: boolean;
+    buttonProps?: Partial<ButtonProps>;
+    onClick: (e: React.MouseEvent) => void;
+};
+export declare const Modal: React.FC<ModalProps>;
+export {};

package/dist/components/composites/Modal/index.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ReactModal from 'react-modal';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import { ThemeProvider, useTheme } from '../../../theme';
+import { GROUP_TYPE, Group } from '../../elements/Group';
+import { Row } from '../../elements/layout/Row';
+import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
+import { BUTTON_TYPE, Button } from '../../elements/Button';
+import { COLOR } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { useMediaQuery } from '../../providers/media';
+import { useComponentConfig } from '../../providers/componentConfig';
+const ReactModal = importedDefaultComponentShim(_ReactModal);
+export const Modal = (_a) => {
+    var { children, heading, hideHeading, isOpen, footer, actions, wrapWithTheme, close, zIndex } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "wrapWithTheme", "close", "zIndex"]);
+    const { breakpoint } = useMediaQuery();
+    const { modal } = useComponentConfig();
+    const theme = useTheme();
+    const shouldShowFooter = footer !== undefined || (actions !== undefined && actions.length > 0);
+    const modalBody = (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION, sx: { my: 0 } }, { children: [!hideHeading && (_jsxs(Row, Object.assign({ justify: "space-between", align: "center", sx: {
+                    p: 3,
+                    borderBottom: 'solid 1px',
+                    borderColor: COLOR.LIGHT_GRAY,
+                } }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM }, { children: heading })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            close(e);
+                        } }, { children: "Close" }))] }))), _jsx(Row, Object.assign({ sx: { p: 3 } }, { children: children })), shouldShowFooter && (_jsxs(Row, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(Row, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: (e) => {
+                                action.onClick(e);
+                            }, sx: {
+                                mr: index < actions.length - 1 ? 1 : 0,
+                            } }, action.buttonProps, { children: action.label }), index))) })))] })))] })));
+    return (_jsx(ReactModal, Object.assign({ isOpen: isOpen, shouldFocusAfterRender: true, appElement: modal.appElement, onRequestClose: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            close(e);
+        } }, props, { style: {
+            overlay: {
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                zIndex: zIndex || theme.zIndex.MODAL,
+            },
+            content: {
+                padding: 0,
+                minWidth: breakpoint === 0 ? 'calc(100% - 1rem)' : '500px',
+                top: '50%',
+                left: '50%',
+                right: 'auto',
+                bottom: 'auto',
+                marginRight: '-50%',
+                transform: 'translate(-50%, -50%)',
+            },
+        } }, { children: wrapWithTheme ? _jsx(ThemeProvider, { children: modalBody }) : modalBody })));
+};

package/dist/components/composites/NavMenu/NavMenu.stories.d.ts

@@ -0,0 +1,6 @@
+import { NavMenu } from './';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof NavMenu>;
+export default meta;
+type Story = StoryObj<typeof NavMenu>;
+export declare const Default: Story;

package/dist/components/composites/NavMenu/NavMenu.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavMenu } from './';
+import { DemoMenuImplementation } from './demo';
+const meta = {
+    title: 'Composites/NavMenu',
+    component: NavMenu,
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(DemoMenuImplementation, {}),
+    args: {},
+};

package/dist/components/composites/NavMenu/NavMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/composites/NavMenu/NavMenu.test.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from '@testing-library/react';
+import { render } from '../../../utils/test';
+import { KEY_CODES } from '../../../utils/misc';
+import { DemoMenuImplementation } from './demo';
+describe('NavMenu', () => {
+    it('can be navigated with events', () => {
+        const { getByRole } = render(_jsx(DemoMenuImplementation, {}));
+        const menu = getByRole('menu');
+        const firstMenuItem = getByRole('menuitem', {
+            name: 'home',
+        });
+        const secondMenuItem = getByRole('menuitem', {
+            name: 'research',
+        });
+        fireEvent.focus(menu);
+        expect(firstMenuItem).toHaveFocus();
+        fireEvent.keyDown(firstMenuItem, {
+            key: KEY_CODES.ARROW_RIGHT,
+        });
+        expect(secondMenuItem).toHaveFocus();
+        const firstSubmenuItem = getByRole('menuitem', {
+            name: 'test submenu 1',
+        });
+        const secondSubmenuItem = getByRole('menuitem', {
+            name: 'test submenu 2',
+        });
+        const firstLeaf = getByRole('menuitem', {
+            name: 'test leaf 1',
+        });
+        const secondLeaf = getByRole('menuitem', {
+            name: 'test leaf 2',
+        });
+        fireEvent.keyDown(secondMenuItem, {
+            key: KEY_CODES.ARROW_DOWN,
+        });
+        expect(firstSubmenuItem).toHaveFocus();
+        fireEvent.keyDown(firstMenuItem, {
+            key: KEY_CODES.ARROW_RIGHT,
+        });
+        expect(secondSubmenuItem).toHaveFocus();
+        fireEvent.keyDown(secondMenuItem, {
+            key: KEY_CODES.ARROW_LEFT,
+        });
+        expect(firstSubmenuItem).toHaveFocus();
+        fireEvent.keyDown(secondMenuItem, {
+            key: KEY_CODES.ENTER,
+        });
+        expect(firstLeaf).toHaveFocus();
+        fireEvent.keyDown(firstLeaf, {
+            key: KEY_CODES.ARROW_DOWN,
+        });
+        expect(secondLeaf).toHaveFocus();
+        fireEvent.keyDown(secondLeaf, {
+            key: KEY_CODES.ARROW_UP,
+        });
+        expect(firstLeaf).toHaveFocus();
+        fireEvent.keyDown(firstLeaf, {
+            key: KEY_CODES.ARROW_UP,
+        });
+        expect(firstSubmenuItem).toHaveFocus();
+        fireEvent.keyDown(firstSubmenuItem, {
+            key: KEY_CODES.ARROW_UP,
+        });
+        expect(secondMenuItem).toHaveFocus();
+    });
+    it('can be navigated with keyboard events', () => {
+        const { getByRole } = render(_jsx(DemoMenuImplementation, {}));
+        const secondMenuItem = getByRole('menuitem', {
+            name: 'research',
+        });
+        fireEvent.mouseDown(secondMenuItem);
+        fireEvent.click(secondMenuItem);
+        fireEvent.mouseUp(secondMenuItem);
+        getByRole('menuitem', {
+            name: 'test submenu 1',
+        });
+        getByRole('menuitem', {
+            name: 'test submenu 2',
+        });
+        getByRole('menuitem', {
+            name: 'test leaf 1',
+        });
+        getByRole('menuitem', {
+            name: 'test leaf 2',
+        });
+        fireEvent.mouseDown(secondMenuItem);
+        fireEvent.click(secondMenuItem);
+        fireEvent.mouseUp(secondMenuItem);
+        expect(() => {
+            getByRole('menuitem', {
+                name: 'test submenu 1',
+            });
+        }).toThrow();
+    });
+});

package/dist/components/composites/NavMenu/demo.d.ts

@@ -0,0 +1 @@
+export declare const DemoMenuImplementation: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/composites/NavMenu/demo.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { NavMenu } from '.';
+import { Button } from '../../elements/Button';
+import { Row } from '../../elements/layout/Row';
+import { MENU_ACTION_TYPE, MENU_ORIENTATION, MenuProvider, } from '../../providers/menu';
+const demoMenu = {
+    orientation: MENU_ORIENTATION.HORIZONTAL,
+    items: [
+        {
+            id: 'home',
+            label: 'home',
+            action: {
+                type: MENU_ACTION_TYPE.LINK,
+                to: '/',
+            },
+        },
+        {
+            id: 'research',
+            label: 'research',
+            action: {
+                type: MENU_ACTION_TYPE.SUBMENU,
+                submenu: {
+                    orientation: MENU_ORIENTATION.HORIZONTAL,
+                    items: [
+                        {
+                            label: 'test submenu 1',
+                            id: 'test-submenu-1',
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 1',
+                                            id: 'test-leaf-1',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 2',
+                                            id: 'test-leaf-2',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 3',
+                                            id: 'test-leaf-3',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 4',
+                                            id: 'test-leaf-4',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                            label: 'test submenu 2',
+                            id: 'test-submenu-2',
+                        },
+                    ],
+                },
+            },
+        },
+        {
+            id: 'services',
+            label: 'services',
+            action: {
+                type: MENU_ACTION_TYPE.SUBMENU,
+                submenu: {
+                    orientation: MENU_ORIENTATION.HORIZONTAL,
+                    items: [
+                        {
+                            label: 'test submenu 5',
+                            id: 'test-submenu-5',
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 1',
+                                            id: 'test-leaf-1',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 2',
+                                            id: 'test-leaf-2',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            action: {
+                                type: MENU_ACTION_TYPE.SUBMENU,
+                                submenu: {
+                                    orientation: MENU_ORIENTATION.VERTICAL,
+                                    items: [
+                                        {
+                                            label: 'test leaf 3',
+                                            id: 'test-leaf-3',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 4',
+                                            id: 'test-leaf-4',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 5',
+                                            id: 'test-leaf-5',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                        {
+                                            label: 'test leaf 6',
+                                            id: 'test-leaf-6',
+                                            action: {
+                                                type: MENU_ACTION_TYPE.LINK,
+                                                to: '/',
+                                            },
+                                        },
+                                    ],
+                                },
+                            },
+                            label: 'test submenu 6',
+                            id: 'test-submenu-6',
+                        },
+                    ],
+                },
+            },
+        },
+    ],
+};
+export const DemoMenuImplementation = () => (_jsx(MenuProvider, Object.assign({ menu: demoMenu }, { children: ({ menu, getMenuProps, getMenuItemProps }) => (_jsxs(_Fragment, { children: [_jsx(Row, Object.assign({}, getMenuProps(), { children: menu.items.map((menuItem) => (_createElement(Button, Object.assign({}, getMenuItemProps([menuItem.id]), { sx: { m: 1 }, key: menuItem.id }), menuItem.label))) })), _jsx(NavMenu, {})] })) })));

package/dist/components/composites/NavMenu/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type NavMenuProps = StyledElementProps<HTMLDivElement>;
+export declare const NavMenu: React.FC<NavMenuProps>;
+export {};

package/dist/components/composites/NavMenu/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { ArrowLink } from '../../elements/ArrowLink';
+import { List, ListItem } from '../../elements/List';
+import { MENU_ACTION_TYPE, useMenu } from '../../providers/menu';
+import { Row } from '../../elements/layout/Row';
+import { Column } from '../../elements/layout/Column';
+import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
+import { Link } from '../../elements/Link';
+import { FONT_WEIGHT } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
+export const NavMenu = (props) => {
+    const { isOpen, activePath, getMenuItem, getMenuItemProps, getMenuProps } = useMenu();
+    if (!isOpen) {
+        return null;
+    }
+    const topLevelMenuId = activePath[0];
+    const activeTopLevelMenu = getMenuItem([topLevelMenuId]);
+    if (!activeTopLevelMenu ||
+        !(activeTopLevelMenu.action.type === MENU_ACTION_TYPE.SUBMENU)) {
+        return null;
+    }
+    const submenu = activeTopLevelMenu.action.submenu;
+    return (_jsxs(Row, Object.assign({}, props, { sx: {
+            justifyContent: 'center',
+            p: 3,
+            border: 'solid 1px',
+            borderColor: COLOR.EXTRA_LIGHT_GRAY,
+            borderRadius: '4px',
+            margin: '0px 10px 0px 10px',
+        } }, { children: [_jsx(Column, { sx: { flexGrow: 1 } }), submenu.items.map((submenuItem, i) => {
+                if (!(submenuItem.action.type === MENU_ACTION_TYPE.SUBMENU)) {
+                    return null;
+                }
+                const leafMenuItems = submenuItem.action.submenu.items;
+                const submenuPath = [topLevelMenuId, submenuItem.id];
+                const link = topLevelMenuId.slice(1);
+                const category = topLevelMenuId.charAt(1).toUpperCase() + topLevelMenuId.slice(2);
+                console.log('topLevelMenuId: ', topLevelMenuId);
+                console.log('activePath: ', activePath);
+                console.log('link: ', link);
+                console.log('category: ', category);
+                return (_jsxs(Column, Object.assign({ sx: { flexBasis: '275px', p: 2, flexShrink: 0, flexGrow: 0 } }, { children: [_jsx(Heading, Object.assign({ standalone: true, size: HEADING_SIZE.SM, underline: true }, getMenuItemProps(submenuPath), { children: submenuItem.label })), _jsx(List, Object.assign({}, getMenuProps(submenuPath), { icon: ChevronRightIcon }, { children: leafMenuItems.map((leafMenuItem, i) => {
+                                const leafMenuPath = submenuPath.concat(leafMenuItem.id);
+                                return (_jsx(ListItem, Object.assign({ index: i, sx: { mt: 1 } }, getMenuItemProps(leafMenuPath), { children: _jsx(Link, Object.assign({ to: "/", sx: {
+                                            fontWeight: FONT_WEIGHT.BOLD,
+                                        }, tabIndex: -1 }, { children: leafMenuItem.label })) }), leafMenuItem.id));
+                            }) })), i < 1 && (link.includes('esearch') || link.includes('ervices')) ? (_jsxs(ArrowLink, Object.assign({ to: link, sx: { margin: '20px 10px 10px 10px' } }, { children: ["View More ", category] }))) : null] }), submenuItem.id));
+            }), _jsx(Column, { sx: { flexGrow: 1 } })] })));
+};

package/dist/components/composites/Seo/SeoDataDisplay/index.d.ts

@@ -0,0 +1,2 @@
+export declare const SeoDataDisplay: () => import("react/jsx-runtime").JSX.Element;
+export default SeoDataDisplay;

package/dist/components/composites/Seo/SeoDataDisplay/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOMServer from 'react-dom/server';
+import pretty from 'pretty';
+import { Seo } from '../index';
+export const SeoDataDisplay = () => {
+    const seoHtml = ReactDOMServer.renderToString(_jsx(Seo, {}));
+    return (_jsx("code", { children: _jsx("pre", { children: pretty(seoHtml) }) }));
+};
+export default SeoDataDisplay;

package/dist/components/composites/Seo/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SeoProps {
+    title?: string;
+    description?: string;
+    image?: string;
+    pathname?: string;
+    nofollow?: boolean;
+    noindex?: boolean;
+}
+export declare const Seo: React.FC<SeoProps>;
+export default Seo;