@databiosphere/findable-ui 5.0.0 → 7.0.0

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

@@ -1,17 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import Link from "next/link";
+import React from "react";
+import { StaticImage, } from "../../../../../../../common/StaticImage/staticImage";
+import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+export const Logo = ({ alt, className, height, link, src, target = ANCHOR_TARGET.SELF, width, }) => {
+    const logo = (React.createElement(StaticImage, { alt: alt, height: height, src: src, width: width }));
+    return isClientSideNavigation(link) ? (React.createElement(Link, { href: link, legacyBehavior: true, passHref: true },
+        React.createElement("a", { className: className, href: "passHref", rel: "noopener", target: target }, logo))) : (React.createElement("a", { className: className, href: link, rel: "noopener noreferrer", target: target }, logo));
 };
-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.js

@@ -1,43 +1,5 @@
-"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));
+import { Slide as MSlide } from "@mui/material";
+import React, { forwardRef } from "react";
+export const Slide = forwardRef(function Slide({ children, ...props /* Spread props to allow for Mui SlideProps specific prop overrides. */ }, ref) {
+    return (React.createElement(MSlide, { direction: "left", easing: "ease-out", ref: ref, unmountOnExit: true, ...props }, children));
 });

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

@@ -1,44 +1,15 @@
-"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);
+import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { Dialog as MDialog } from "@mui/material";
+import React, { useState } from "react";
+import { Button } from "../../../../../../../../../common/Button/button";
+import { BackArrowIcon } from "../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon";
+import { AppBar } from "../../../../../../header.styles";
+import { DrawerNavigation as Navigation } from "../../../Actions/components/Menu/components/Content/components/Navigation/navigation.styles";
+import { Toolbar } from "../../../Actions/components/Menu/components/Toolbar/toolbar";
+import { Slide } from "./components/Slide/slide";
+import { Button as BackButton, Content } from "./navigationDrawer.styles";
+export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLabel, }) => {
+    const [drawerOpen, setDrawerOpen] = useState(false);
     const openDrawer = () => {
         setDrawerOpen(true);
     };
@@ -47,15 +18,14 @@ const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLabel, })
     };
     const closeDrawers = () => {
         setDrawerOpen(false);
-        closeAncestor === null || closeAncestor === void 0 ? void 0 : closeAncestor();
+        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 })))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, onClick: openDrawer, variant: "nav" }, menuLabel),
+        React.createElement(MDialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeDrawers, open: drawerOpen, PaperProps: { elevation: 0 }, TransitionComponent: Slide, transitionDuration: 300 },
+            React.createElement(AppBar, { component: "div", elevation: 1 },
+                React.createElement(Toolbar, { onClose: closeDrawers, ...headerProps })),
+            React.createElement(Content, null,
+                React.createElement(BackButton, { fullWidth: true, onClick: closeDrawer, StartIcon: BackArrowIcon, variant: "nav" }, menuLabel),
+                React.createElement(Navigation, { closeAncestor: closeDrawers, headerProps: headerProps, links: menuItems })))));
 };
-exports.NavigationDrawer = NavigationDrawer;

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

@@ -1,19 +1,13 @@
-"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 `
+import styled from "@emotion/styled";
+import { textHeadingSmall } from "../../../../../../../../../../styles/common/mixins/fonts";
+import { Button as DXButton } from "../../../../../../../../../common/Button/button";
+export const Content = styled.div `
   padding: 16px 0;
   overflow-x: hidden;
   overflow-y: auto;
 `;
-exports.Button = (0, styled_1.default)(button_1.Button) `
-  ${fonts_1.textHeadingSmall};
+export const Button = styled(DXButton) `
+  ${textHeadingSmall};
   gap: 8px;
   justify-content: flex-start;
   padding: 12px 24px;

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

@@ -1,55 +1,25 @@
-"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);
+import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import React, { useState } from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../../../hooks/useBreakpointHelper";
+import { DESKTOP_SM } from "../../../../../../../../../../theme/common/breakpoints";
+import { NavigationMenuItems, } from "../NavigationMenuItems/navigationMenuItems";
+import { Button, Menu } from "./navigationMenu.styles";
+export const NavigationMenu = ({ anchorOrigin = { horizontal: "left", vertical: "bottom" }, closeAncestor, menuItems, menuLabel, }) => {
+    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const openMenu = (event) => {
         setAnchorEl(event.currentTarget);
     };
     const closeMenu = () => {
-        closeAncestor === null || closeAncestor === void 0 ? void 0 : closeAncestor();
+        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: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: open, onClick: openMenu, variant: "nav" }, menuLabel),
+        React.createElement(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 }))));
+            React.createElement(NavigationMenuItems, { closeMenu: closeMenu, menuItems: menuItems }))));
 };
-exports.NavigationMenu = NavigationMenu;

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

@@ -1,14 +1,8 @@
-"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) `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Menu as MMenu } from "@mui/material";
+import { Button as DXButton } from "../../../../../../../../../common/Button/button";
+export const Menu = styled(MMenu) `
   .MuiPaper-menu {
     border-color: ${({ theme }) => theme.palette.smoke.main};
     margin: 4px 0;
@@ -59,12 +53,12 @@ exports.Menu = (0, styled_1.default)(material_1.Menu) `
     }
   }
 `;
-exports.Button = (0, styled_1.default)(button_1.Button, {
+export const Button = styled(DXButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
 }) `
   // Button is "active" i.e. menu is open.
   ${({ isActive, theme }) => isActive &&
-    (0, react_1.css) `
+    css `
       background-color: ${theme.palette.smoke.light};
     `};
 `;

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

@@ -1,51 +1,24 @@
-"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: () => {
+import { Divider, ListItemIcon, ListItemText, MenuItem as MMenuItem, } from "@mui/material";
+import { useRouter } from "next/router";
+import React, { Fragment } from "react";
+import { TEXT_BODY_400, TEXT_BODY_500, TEXT_BODY_SMALL_400_2_LINES, } from "../../../../../../../../../../theme/common/typography";
+import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../../../../../../Links/common/utils";
+import { NavigationMenu } from "../NavigationMenu/navigationMenu";
+export const NavigationMenuItems = ({ closeMenu, menuItems, }) => {
+    const router = useRouter();
+    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, anchorOrigin: { horizontal: "right", vertical: "top" }, closeAncestor: closeMenu, menuItems: nestedMenuItems, menuLabel: label })) : (React.createElement(Fragment, { key: i },
+        React.createElement(MMenuItem, { onClick: () => {
                 closeMenu();
-                (0, utils_1.isClientSideNavigation)(url)
+                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,
+            icon && React.createElement(ListItemIcon, null, icon),
+            React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
+                    variant: description ? TEXT_BODY_500 : TEXT_BODY_400,
                 }, secondary: description, secondaryTypographyProps: {
-                    variant: typography_1.TEXT_BODY_SMALL_400_2_LINES,
+                    variant: TEXT_BODY_SMALL_400_2_LINES,
                 } })),
-        divider && react_1.default.createElement(material_1.Divider, null))))));
+        divider && React.createElement(Divider, null))))));
 };
-exports.NavigationMenuItems = NavigationMenuItems;

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

@@ -1,51 +1,25 @@
-"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)
+import { Button, Divider } from "@mui/material";
+import { useRouter } from "next/router";
+import React, { forwardRef, Fragment } from "react";
+import { ELEMENT_ALIGNMENT, } from "../../../../../../../../common/entities";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../hooks/useBreakpointHelper";
+import { DESKTOP_SM } from "../../../../../../../../theme/common/breakpoints";
+import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
+import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
+import { Navigation as Links } from "./navigation.styles";
+export const Navigation = forwardRef(function Navigation({ alignment = ELEMENT_ALIGNMENT.LEFT, className, closeAncestor, headerProps, links, style, }, ref) {
+    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const router = useRouter();
+    return (React.createElement(Links, { ref: ref, alignment: alignment, className: className, style: style }, links.map(({ divider, label, menuItems, target = ANCHOR_TARGET.SELF, url }, i) => menuItems ? (React.createElement(Fragment, { key: i },
+        smDesktop ? (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, menuItems: menuItems, menuLabel: label })) : (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, menuItems: menuItems, menuLabel: label })),
+        divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
+        React.createElement(Button, { onClick: () => {
+                isClientSideNavigation(url)
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
-                closeAncestor === null || closeAncestor === void 0 ? void 0 : closeAncestor();
+                closeAncestor?.();
             }, variant: "nav" }, label),
-        divider && react_1.default.createElement(material_1.Divider, null))))));
+        divider && React.createElement(Divider, null))))));
 });

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

@@ -1,15 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Navigation = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const entities_1 = require("../../../../../../../../common/entities");
-const breakpoints_1 = require("../../../../../../../../styles/common/mixins/breakpoints");
-const fonts_1 = require("../../../../../../../../styles/common/mixins/fonts");
-exports.Navigation = (0, styled_1.default)("div") `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ELEMENT_ALIGNMENT, } from "../../../../../../../../common/entities";
+import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+import { textBody500 } from "../../../../../../../../styles/common/mixins/fonts";
+export const Navigation = styled("div") `
   display: flex;
   flex: 1;
   flex-direction: row;
@@ -17,25 +11,25 @@ exports.Navigation = (0, styled_1.default)("div") `
   justify-content: flex-start;
 
   // Left alignment.
-  ${({ alignment }) => alignment === entities_1.ELEMENT_ALIGNMENT.LEFT &&
-    (0, react_1.css) `
+  ${({ alignment }) => alignment === ELEMENT_ALIGNMENT.LEFT &&
+    css `
       margin-left: 24px;
     `};
 
   // Center alignment.
-  ${({ alignment }) => alignment === entities_1.ELEMENT_ALIGNMENT.CENTER &&
-    (0, react_1.css) `
+  ${({ alignment }) => alignment === ELEMENT_ALIGNMENT.CENTER &&
+    css `
       justify-content: center;
     `};
 
   // Right alignment.
-  ${({ alignment }) => alignment === entities_1.ELEMENT_ALIGNMENT.RIGHT &&
-    (0, react_1.css) `
+  ${({ alignment }) => alignment === ELEMENT_ALIGNMENT.RIGHT &&
+    css `
       justify-content: flex-end;
     `};
 
   .MuiButton-nav {
-    ${fonts_1.textBody500};
+    ${textBody500};
     padding: 6px 12px;
 
     .MuiButton-endIcon {
@@ -47,7 +41,7 @@ exports.Navigation = (0, styled_1.default)("div") `
   .MuiDivider-root {
     margin: 8px 0;
 
-    ${breakpoints_1.mediaDesktopSmallUp} {
+    ${mediaDesktopSmallUp} {
       display: none;
     }
   }

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.js

@@ -1,33 +1,7 @@
-"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.Slogan = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const typography_1 = require("../../../../../../../../theme/common/typography");
-const slogan_styles_1 = require("./slogan.styles");
-exports.Slogan = (0, react_1.forwardRef)(function Slogan({ className, slogan, style }, ref) {
-    return (react_1.default.createElement(slogan_styles_1.Slogan, { ref: ref, style: style }, typeof slogan === "string" ? (react_1.default.createElement(material_1.Typography, { className: className, variant: typography_1.TEXT_BODY_400 }, slogan)) : (slogan)));
+import { Typography } from "@mui/material";
+import React, { forwardRef } from "react";
+import { TEXT_BODY_400 } from "../../../../../../../../theme/common/typography";
+import { Slogan as CatchPhrase } from "./slogan.styles";
+export const Slogan = forwardRef(function Slogan({ className, slogan, style }, ref) {
+    return (React.createElement(CatchPhrase, { ref: ref, style: style }, typeof slogan === "string" ? (React.createElement(Typography, { className: className, variant: TEXT_BODY_400 }, slogan)) : (slogan)));
 });

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.js

@@ -1,20 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = exports.Slogan = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../../../../../styles/common/mixins/breakpoints");
-exports.Slogan = styled_1.default.div `
+import styled from "@emotion/styled";
+import { Divider as MDivider } from "@mui/material";
+import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+export const Slogan = styled.div `
   padding: 8px 24px;
 
   .MuiTypography-text-body-400 {
     display: block;
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     flex: none;
     padding: 0;
 
@@ -25,6 +19,6 @@ exports.Slogan = styled_1.default.div `
     }
   }
 `;
-exports.Divider = (0, styled_1.default)(material_1.Divider) `
+export const Divider = styled(MDivider) `
   max-height: 32px;
 `;

package/lib/components/Layout/components/Header/components/Content/components/Socials/socials.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Socials = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const socials_1 = require("../../../../../../../common/Socials/socials");
-exports.Socials = (0, styled_1.default)(socials_1.Socials) `
+import styled from "@emotion/styled";
+import { Socials as DXSocials } from "../../../../../../../common/Socials/socials";
+export const Socials = styled(DXSocials) `
   display: flex;
   gap: 8px;
   padding: 0;