@databiosphere/findable-ui 0.0.0

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "large" | "medium" | "small" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "fullWidth" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+const fonts_1 = require("../../../../../../../../../../../../styles/common/mixins/fonts");
+exports.Button = (0, styled_1.default)(material_1.Button) `
+  & {
+    ${fonts_1.textBody500};
+    padding: 6px 12px;
+  }
+`;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface SearchProps {
+    closeMenu: () => void;
+    searchEnabled?: boolean;
+    searchURL?: string;
+}
+export declare const Search: ({ closeMenu, searchEnabled, searchURL, }: SearchProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.js

@@ -0,0 +1,39 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Search = void 0;
+const react_1 = __importStar(require("react"));
+const searchBar_1 = __importDefault(require("./components/SearchBar/searchBar"));
+const searchButton_1 = require("./components/SearchButton/searchButton");
+const Search = ({ closeMenu, searchEnabled, searchURL, }) => {
+    const [searchOpen, setSearchOpen] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        searchEnabled && (react_1.default.createElement(searchButton_1.SearchButton, { openSearch: () => setSearchOpen(true) })),
+        react_1.default.createElement(searchBar_1.default, { closeMenu: closeMenu, closeSearch: () => setSearchOpen(false), searchOpen: searchOpen, searchURL: searchURL })));
+};
+exports.Search = Search;

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ImageSrc } from "../../../../../../../common/StaticImage/staticImage";
+import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+export interface LogoProps {
+    alt: string;
+    className?: string;
+    height?: number;
+    link: string;
+    src: ImageSrc;
+    target?: ANCHOR_TARGET;
+    width?: number;
+}
+export declare const Logo: ({ alt, className, height, link, src, target, width, }: LogoProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Logo = void 0;
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
+const staticImage_1 = require("../../../../../../../common/StaticImage/staticImage");
+const entities_1 = require("../../../../../../../Links/common/entities");
+const utils_1 = require("../../../../../../../Links/common/utils");
+const Logo = ({ alt, className, height, link, src, target = entities_1.ANCHOR_TARGET.SELF, width, }) => {
+    const logo = (react_1.default.createElement(staticImage_1.StaticImage, { alt: alt, height: height, src: src, width: width }));
+    return (0, utils_1.isClientSideNavigation)(link) ? (react_1.default.createElement(link_1.default, { href: link, legacyBehavior: true, passHref: true },
+        react_1.default.createElement("a", { className: className, href: "passHref", rel: "noopener", target: target }, logo))) : (react_1.default.createElement("a", { className: className, href: link, rel: "noopener noreferrer", target: target }, logo));
+};
+exports.Logo = Logo;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/components/Slide/slide.d.ts

@@ -0,0 +1,3 @@
+import { SlideProps as MSlideProps } from "@mui/material";
+import React from "react";
+export declare const Slide: React.ForwardRefExoticComponent<Omit<MSlideProps, "ref"> & React.RefAttributes<Element>>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/components/Slide/slide.js

@@ -0,0 +1,43 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slide = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+exports.Slide = (0, react_1.forwardRef)(function Slide(_a, ref) {
+    var { children } = _a, props = __rest(_a, ["children"]) /* Spread props to allow for Mui SlideProps specific prop overrides. */;
+    return (react_1.default.createElement(material_1.Slide, Object.assign({ direction: "left", easing: "ease-out", ref: ref, unmountOnExit: true }, props), children));
+});

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { HeaderProps } from "../../../../../../header";
+import { MenuItem } from "../NavigationMenuItems/navigationMenuItems";
+export interface NavigationDrawerProps {
+    closeAncestor?: () => void;
+    headerProps?: HeaderProps;
+    menuItems: MenuItem[];
+    menuLabel: ReactNode;
+}
+export declare const NavigationDrawer: ({ closeAncestor, headerProps, menuItems, menuLabel, }: NavigationDrawerProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.js

@@ -0,0 +1,61 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationDrawer = void 0;
+const ArrowDropDownRounded_1 = __importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const button_1 = require("../../../../../../../../../common/Button/button");
+const backArrowIcon_1 = require("../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon");
+const header_styles_1 = require("../../../../../../header.styles");
+const navigation_styles_1 = require("../../../Actions/components/Menu/components/Content/components/Navigation/navigation.styles");
+const toolbar_1 = require("../../../Actions/components/Menu/components/Toolbar/toolbar");
+const slide_1 = require("./components/Slide/slide");
+const navigationDrawer_styles_1 = require("./navigationDrawer.styles");
+const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLabel, }) => {
+    const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(false);
+    const openDrawer = () => {
+        setDrawerOpen(true);
+    };
+    const closeDrawer = () => {
+        setDrawerOpen(false);
+    };
+    const closeDrawers = () => {
+        setDrawerOpen(false);
+        closeAncestor === null || closeAncestor === void 0 ? void 0 : closeAncestor();
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(button_1.Button, { EndIcon: ArrowDropDownRounded_1.default, onClick: openDrawer, variant: "nav" }, menuLabel),
+        react_1.default.createElement(material_1.Dialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeDrawers, open: drawerOpen, PaperProps: { elevation: 0 }, TransitionComponent: slide_1.Slide, transitionDuration: 300 },
+            react_1.default.createElement(header_styles_1.AppBar, { component: "div", elevation: 1 },
+                react_1.default.createElement(toolbar_1.Toolbar, Object.assign({ onClose: closeDrawers }, headerProps))),
+            react_1.default.createElement(navigationDrawer_styles_1.Content, null,
+                react_1.default.createElement(navigationDrawer_styles_1.Button, { fullWidth: true, onClick: closeDrawer, StartIcon: backArrowIcon_1.BackArrowIcon, variant: "nav" }, menuLabel),
+                react_1.default.createElement(navigation_styles_1.DrawerNavigation, { closeAncestor: closeDrawers, headerProps: headerProps, links: menuItems })))));
+};
+exports.NavigationDrawer = NavigationDrawer;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Button: import("@emotion/styled").StyledComponent<Omit<import("../../../../../../../../../common/Button/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.styles.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.Content = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const fonts_1 = require("../../../../../../../../../../styles/common/mixins/fonts");
+const button_1 = require("../../../../../../../../../common/Button/button");
+exports.Content = styled_1.default.div `
+  padding: 16px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+`;
+exports.Button = (0, styled_1.default)(button_1.Button) `
+  ${fonts_1.textHeadingSmall};
+  gap: 8px;
+  justify-content: flex-start;
+  padding: 12px 24px;
+`;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.d.ts

@@ -0,0 +1,10 @@
+import { MenuProps as MMenuProps } from "@mui/material";
+import { ReactNode } from "react";
+import { MenuItem } from "../NavigationMenuItems/navigationMenuItems";
+export interface NavLinkMenuProps {
+    anchorOrigin?: MMenuProps["anchorOrigin"];
+    closeAncestor?: () => void;
+    menuItems: MenuItem[];
+    menuLabel: ReactNode;
+}
+export declare const NavigationMenu: ({ anchorOrigin, closeAncestor, menuItems, menuLabel, }: NavLinkMenuProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.js

@@ -0,0 +1,55 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationMenu = void 0;
+const ArrowDropDownRounded_1 = __importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
+const react_1 = __importStar(require("react"));
+const useBreakpointHelper_1 = require("../../../../../../../../../../hooks/useBreakpointHelper");
+const breakpoints_1 = require("../../../../../../../../../../theme/common/breakpoints");
+const navigationMenuItems_1 = require("../NavigationMenuItems/navigationMenuItems");
+const navigationMenu_styles_1 = require("./navigationMenu.styles");
+const NavigationMenu = ({ anchorOrigin = { horizontal: "left", vertical: "bottom" }, closeAncestor, menuItems, menuLabel, }) => {
+    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const open = Boolean(anchorEl);
+    const openMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const closeMenu = () => {
+        closeAncestor === null || closeAncestor === void 0 ? void 0 : closeAncestor();
+        setAnchorEl(null);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(navigationMenu_styles_1.Button, { EndIcon: ArrowDropDownRounded_1.default, isActive: open, onClick: openMenu, variant: "nav" }, menuLabel),
+        react_1.default.createElement(navigationMenu_styles_1.Menu, { anchorEl: anchorEl, anchorOrigin: anchorOrigin, onClose: closeMenu, open: smDesktop && open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+                horizontal: "left",
+                vertical: "top",
+            } },
+            react_1.default.createElement(navigationMenuItems_1.NavigationMenuItems, { closeMenu: closeMenu, menuItems: menuItems }))));
+};
+exports.NavigationMenu = NavigationMenu;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface Props {
+    isActive: boolean;
+}
+export declare const Menu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Button: import("@emotion/styled").StyledComponent<Omit<import("../../../../../../../../../common/Button/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Props, {}, {}>;
+export {};

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.Menu = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+const button_1 = require("../../../../../../../../../common/Button/button");
+exports.Menu = (0, styled_1.default)(material_1.Menu) `
+  .MuiPaper-menu {
+    border-color: ${({ theme }) => theme.palette.smoke.main};
+    margin: 4px 0;
+    max-width: 324px;
+    min-width: 204px;
+  }
+
+  .MuiList-root {
+    .MuiMenuItem-root {
+      gap: 8px;
+      margin: 0;
+
+      .MuiListItemIcon-root {
+        align-self: flex-start;
+        min-width: unset;
+      }
+
+      .MuiListItemText-root {
+        display: grid;
+        gap: 4px;
+
+        .MuiListItemText-primary {
+          align-items: center;
+          display: flex;
+          gap: 4px;
+        }
+
+        .MuiListItemText-secondary {
+          color: ${({ theme }) => theme.palette.ink.light};
+          white-space: normal;
+        }
+      }
+    }
+
+    .MuiButton-nav {
+      font-weight: 400;
+      justify-content: space-between;
+      width: 100%;
+
+      .MuiButton-endIcon {
+        margin-left: -6px;
+        margin-right: -6px;
+      }
+    }
+
+    .MuiDivider-root {
+      margin: 8px 0;
+    }
+  }
+`;
+exports.Button = (0, styled_1.default)(button_1.Button, {
+    shouldForwardProp: (prop) => prop !== "isActive",
+}) `
+  // Button is "active" i.e. menu is open.
+  ${({ isActive, theme }) => isActive &&
+    (0, react_1.css) `
+      background-color: ${theme.palette.smoke.light};
+    `};
+`;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { NavLinkItem } from "../../navigation";
+export interface MenuItem extends NavLinkItem {
+    description?: string;
+    icon?: ReactNode;
+}
+export interface NavLinkMenuProps {
+    closeMenu: () => void;
+    menuItems: MenuItem[];
+}
+export declare const NavigationMenuItems: ({ closeMenu, menuItems, }: NavLinkMenuProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.js

@@ -0,0 +1,51 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationMenuItems = void 0;
+const material_1 = require("@mui/material");
+const router_1 = require("next/router");
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../../../../../../../../../../theme/common/typography");
+const entities_1 = require("../../../../../../../../../Links/common/entities");
+const utils_1 = require("../../../../../../../../../Links/common/utils");
+const navigationMenu_1 = require("../NavigationMenu/navigationMenu");
+const NavigationMenuItems = ({ closeMenu, menuItems, }) => {
+    const router = (0, router_1.useRouter)();
+    return (react_1.default.createElement(react_1.default.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, target = entities_1.ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (react_1.default.createElement(navigationMenu_1.NavigationMenu, { key: i, anchorOrigin: { horizontal: "right", vertical: "top" }, closeAncestor: closeMenu, menuItems: nestedMenuItems, menuLabel: label })) : (react_1.default.createElement(react_1.Fragment, { key: i },
+        react_1.default.createElement(material_1.MenuItem, { onClick: () => {
+                closeMenu();
+                (0, utils_1.isClientSideNavigation)(url)
+                    ? router.push(url)
+                    : window.open(url, target, "noopener noreferrer");
+            } },
+            icon && react_1.default.createElement(material_1.ListItemIcon, null, icon),
+            react_1.default.createElement(material_1.ListItemText, { primary: label, primaryTypographyProps: {
+                    variant: description ? typography_1.TEXT_BODY_500 : typography_1.TEXT_BODY_400,
+                }, secondary: description, secondaryTypographyProps: {
+                    variant: typography_1.TEXT_BODY_SMALL_400_2_LINES,
+                } })),
+        divider && react_1.default.createElement(material_1.Divider, null))))));
+};
+exports.NavigationMenuItems = NavigationMenuItems;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.d.ts

@@ -0,0 +1,22 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { ElementAlignment } from "../../../../../../../../common/entities";
+import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { HeaderProps } from "../../../../header";
+import { MenuItem } from "./components/NavigationMenuItems/navigationMenuItems";
+export interface NavLinkItem {
+    divider?: boolean;
+    flatten?: boolean;
+    label: ReactNode;
+    menuItems?: MenuItem[];
+    target?: ANCHOR_TARGET;
+    url: string;
+}
+export interface NavigationProps {
+    alignment?: ElementAlignment;
+    className?: string;
+    closeAncestor?: () => void;
+    headerProps?: HeaderProps;
+    links: NavLinkItem[];
+    style?: CSSProperties;
+}
+export declare const Navigation: React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.js

@@ -0,0 +1,51 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navigation = void 0;
+const material_1 = require("@mui/material");
+const router_1 = require("next/router");
+const react_1 = __importStar(require("react"));
+const entities_1 = require("../../../../../../../../common/entities");
+const useBreakpointHelper_1 = require("../../../../../../../../hooks/useBreakpointHelper");
+const breakpoints_1 = require("../../../../../../../../theme/common/breakpoints");
+const entities_2 = require("../../../../../../../Links/common/entities");
+const utils_1 = require("../../../../../../../Links/common/utils");
+const navigationDrawer_1 = require("./components/NavigationDrawer/navigationDrawer");
+const navigationMenu_1 = require("./components/NavigationMenu/navigationMenu");
+const navigation_styles_1 = require("./navigation.styles");
+exports.Navigation = (0, react_1.forwardRef)(function Navigation({ alignment = entities_1.ELEMENT_ALIGNMENT.LEFT, className, closeAncestor, headerProps, links, style, }, ref) {
+    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
+    const router = (0, router_1.useRouter)();
+    return (react_1.default.createElement(navigation_styles_1.Navigation, { ref: ref, alignment: alignment, className: className, style: style }, links.map(({ divider, label, menuItems, target = entities_2.ANCHOR_TARGET.SELF, url }, i) => menuItems ? (react_1.default.createElement(react_1.Fragment, { key: i },
+        smDesktop ? (react_1.default.createElement(navigationMenu_1.NavigationMenu, { closeAncestor: closeAncestor, menuItems: menuItems, menuLabel: label })) : (react_1.default.createElement(navigationDrawer_1.NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, menuItems: menuItems, menuLabel: label })),
+        divider && react_1.default.createElement(material_1.Divider, null))) : (react_1.default.createElement(react_1.Fragment, { key: i },
+        react_1.default.createElement(material_1.Button, { onClick: () => {
+                (0, utils_1.isClientSideNavigation)(url)
+                    ? router.push(url)
+                    : window.open(url, target, "noopener noreferrer");
+                closeAncestor === null || closeAncestor === void 0 ? void 0 : closeAncestor();
+            }, variant: "nav" }, label),
+        divider && react_1.default.createElement(material_1.Divider, null))))));
+});

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ElementAlignment } from "../../../../../../../../common/entities";
+interface Props {
+    alignment: ElementAlignment;
+}
+export declare const Navigation: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};