@databiosphere/findable-ui 6.0.0 → 7.0.0

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.js

@@ -1,24 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Outline = exports.Content = exports.Navigation = exports.OutlineGrid = exports.ContentGrid = exports.NavigationGrid = exports.ContentLayout = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../styles/common/mixins/colors");
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { media1366Up, mediaDesktopSmallUp, mediaTabletDown, } from "../../../../styles/common/mixins/breakpoints";
+import { smokeLight, smokeLightest, smokeMain, white, } from "../../../../styles/common/mixins/colors";
 const CONTENT_MAX_WIDTH = 756;
 const NAV_GRID_WIDTH = 280;
 const NAV_MAX_WIDTH = 232;
 const PADDING = 24;
 const PADDING_Y = PADDING;
 const COLOR = {
-    DEFAULT: colors_1.white,
-    SMOKE_LIGHT: colors_1.smokeLight,
-    SMOKE_LIGHTEST: colors_1.smokeLightest,
+    DEFAULT: white,
+    SMOKE_LIGHT: smokeLight,
+    SMOKE_LIGHTEST: smokeLightest,
 };
-exports.ContentLayout = styled_1.default.div `
+export const ContentLayout = styled.div `
   background-color: ${({ panelColor, theme }) => getPanelBackgroundColor(theme, panelColor)};
   display: grid;
   flex: 1;
@@ -27,14 +21,14 @@ exports.ContentLayout = styled_1.default.div `
   height: 100%;
   margin: 0 auto;
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     grid-template-areas: "navigation content";
     grid-template-columns:
       ${NAV_GRID_WIDTH}px
       1fr;
   }
 
-  ${breakpoints_1.media1366Up} {
+  ${media1366Up} {
     grid-template-areas: "navigation content outline";
     grid-template-columns:
       ${NAV_GRID_WIDTH}px
@@ -42,11 +36,11 @@ exports.ContentLayout = styled_1.default.div `
       ${NAV_GRID_WIDTH}px;
   }
 `;
-const content = ({ headerHeight, panelColor, theme, }) => (0, react_1.css) `
+const content = ({ headerHeight, panelColor, theme, }) => css `
   background-color: ${getPanelBackgroundColor(theme, panelColor)};
   padding-top: ${headerHeight}px;
 `;
-const navigation = ({ headerHeight, panelColor, theme, }) => (0, react_1.css) `
+const navigation = ({ headerHeight, panelColor, theme, }) => css `
   background-color: ${getPanelBackgroundColor(theme, panelColor)};
   max-height: calc(100vh - ${headerHeight}px);
   overflow: auto;
@@ -54,48 +48,48 @@ const navigation = ({ headerHeight, panelColor, theme, }) => (0, react_1.css) `
   position: sticky;
   top: 0;
 `;
-exports.NavigationGrid = styled_1.default.div `
+export const NavigationGrid = styled.div `
   ${navigation};
-  box-shadow: inset -1px 0 ${colors_1.smokeMain};
+  box-shadow: inset -1px 0 ${smokeMain};
   display: none;
   grid-area: navigation;
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     display: block;
   }
 `;
-exports.ContentGrid = styled_1.default.div `
+export const ContentGrid = styled.div `
   ${content};
   grid-area: content;
   min-width: 0;
 `;
-exports.OutlineGrid = (0, styled_1.default)("div") `
+export const OutlineGrid = styled("div") `
   ${navigation};
   display: none;
   grid-area: outline;
 
-  ${breakpoints_1.media1366Up} {
+  ${media1366Up} {
     display: block;
   }
 `;
-exports.Navigation = styled_1.default.div `
+export const Navigation = styled.div `
   box-sizing: content-box;
   margin-left: auto;
   max-width: ${NAV_MAX_WIDTH}px;
   padding: ${PADDING}px;
 `;
-exports.Content = styled_1.default.div `
+export const Content = styled.div `
   align-self: center;
   box-sizing: content-box;
   margin: 0 auto;
   max-width: ${CONTENT_MAX_WIDTH}px;
   padding: ${PADDING_Y}px 40px;
 
-  ${breakpoints_1.mediaTabletDown} {
+  ${mediaTabletDown} {
     padding: ${PADDING_Y}px 16px;
   }
 `;
-exports.Outline = styled_1.default.div `
+export const Outline = styled.div `
   box-sizing: content-box;
   margin-right: auto;
   max-width: 242px;

package/lib/components/Layout/components/Floating/floating.js

@@ -1,32 +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;
+import React, { Fragment } from "react";
+import { ComponentCreator } from "../../../ComponentCreator/ComponentCreator";
+export const Floating = ({ components }) => {
+    return (React.createElement(Fragment, null, components && React.createElement(ComponentCreator, { components: components, response: {} })));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Floating = void 0;
-const react_1 = __importStar(require("react"));
-const ComponentCreator_1 = require("../../../ComponentCreator/ComponentCreator");
-const Floating = ({ components }) => {
-    return (react_1.default.createElement(react_1.Fragment, null, components && react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: components, response: {} })));
-};
-exports.Floating = Floating;

package/lib/components/Layout/components/Footer/footer.js

@@ -1,21 +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.Footer = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const iconButton_styles_1 = require("../../../common/IconButton/iconButton.styles");
-const entities_1 = require("../../../Links/common/entities");
-const footer_styles_1 = require("./footer.styles");
-const Footer = ({ Branding, className, navLinks, socials, }) => {
-    return (react_1.default.createElement(footer_styles_1.AppBar, { className: className, color: "inherit", component: "footer", variant: "footer" },
-        react_1.default.createElement(material_1.Toolbar, { variant: "dense" },
+import { Toolbar } from "@mui/material";
+import React from "react";
+import { IconButtonSocialsFooter } from "../../../common/IconButton/iconButton.styles";
+import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { AppBar, Link, Links, Socials } from "./footer.styles";
+export const Footer = ({ Branding, className, navLinks, socials, }) => {
+    return (React.createElement(AppBar, { className: className, color: "inherit", component: "footer", variant: "footer" },
+        React.createElement(Toolbar, { variant: "dense" },
             Branding,
-            (navLinks || socials) && (react_1.default.createElement(footer_styles_1.Links, null,
+            (navLinks || socials) && (React.createElement(Links, null,
                 navLinks &&
-                    navLinks.map(({ label, target = entities_1.ANCHOR_TARGET.SELF, url }, i) => (react_1.default.createElement(footer_styles_1.Link, { key: `${url}${i}`, label: label, target: target, url: url }))),
-                socials && (react_1.default.createElement(footer_styles_1.Socials, { buttonSize: "small", IconButtonElType: iconButton_styles_1.IconButtonSocialsFooter, socials: socials })))))));
+                    navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (React.createElement(Link, { key: `${url}${i}`, label: label, target: target, url: url }))),
+                socials && (React.createElement(Socials, { buttonSize: "small", IconButtonElType: IconButtonSocialsFooter, socials: socials })))))));
 };
-exports.Footer = Footer;

package/lib/components/Layout/components/Footer/footer.stories.js

@@ -1,33 +1,27 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FooterStory = void 0;
-const react_1 = __importDefault(require("react"));
-const logo_svg_1 = __importDefault(require("../../../../images/logo.svg"));
-const discourseIcon_1 = require("../../../common/CustomIcon/components/DiscourseIcon/discourseIcon");
-const facebookIcon_1 = require("../../../common/CustomIcon/components/FacebookIcon/facebookIcon");
-const gitHubIcon_1 = require("../../../common/CustomIcon/components/GitHubIcon/gitHubIcon");
-const xIcon_1 = require("../../../common/CustomIcon/components/XIcon/xIcon");
-const youTubeIcon_1 = require("../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon");
-const logo_1 = require("../Header/components/Content/components/Logo/logo");
-const footer_1 = require("./footer");
-exports.default = {
+import React from "react";
+import logo from "../../../../images/logo.svg";
+import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
+import { FacebookIcon } from "../../../common/CustomIcon/components/FacebookIcon/facebookIcon";
+import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
+import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
+import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
+import { Logo } from "../Header/components/Content/components/Logo/logo";
+import { Footer } from "./footer";
+export default {
     argTypes: {
         Branding: { control: { disabled: true } },
         navLinks: { control: "array" },
         socials: { control: { disabled: true } },
     },
-    component: footer_1.Footer,
+    component: Footer,
     parameters: {
         layout: "fullscreen",
     },
     title: "Components/Layout/Footer",
 };
-exports.FooterStory = {
+export const FooterStory = {
     args: {
-        Branding: react_1.default.createElement(logo_1.Logo, { alt: "logo", height: 24, link: "/", src: logo_svg_1.default }),
+        Branding: React.createElement(Logo, { alt: "logo", height: 24, link: "/", src: logo }),
         navLinks: [
             {
                 label: "Help",
@@ -40,27 +34,27 @@ exports.FooterStory = {
         ],
         socials: [
             {
-                Icon: discourseIcon_1.DiscourseIcon,
+                Icon: DiscourseIcon,
                 label: null,
                 url: "https://www.discourse.org/",
             },
             {
-                Icon: xIcon_1.XIcon,
+                Icon: XIcon,
                 label: null,
                 url: "https://twitter.com",
             },
             {
-                Icon: facebookIcon_1.FacebookIcon,
+                Icon: FacebookIcon,
                 label: null,
                 url: "https://facebook.com",
             },
             {
-                Icon: youTubeIcon_1.YouTubeIcon,
+                Icon: YouTubeIcon,
                 label: null,
                 url: "https://www.youtube.com",
             },
             {
-                Icon: gitHubIcon_1.GitHubIcon,
+                Icon: GitHubIcon,
                 label: null,
                 url: "https://github.com",
             },

package/lib/components/Layout/components/Footer/footer.styles.js

@@ -1,17 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Socials = exports.Link = exports.Links = exports.AppBar = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../styles/common/mixins/colors");
-const fonts_1 = require("../../../../styles/common/mixins/fonts");
-const socials_1 = require("../../../common/Socials/socials");
-const link_1 = require("../../../Links/components/Link/link");
-exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
+import styled from "@emotion/styled";
+import { AppBar as MAppBar } from "@mui/material";
+import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
+import { inkMain } from "../../../../styles/common/mixins/colors";
+import { textBodySmall400 } from "../../../../styles/common/mixins/fonts";
+import { Socials as DXSocials } from "../../../common/Socials/socials";
+import { Link as DXLink } from "../../../Links/components/Link/link";
+export const AppBar = styled(MAppBar) `
   padding: 16px 0;
 
   .MuiToolbar-root {
@@ -23,7 +17,7 @@ exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
     padding: 0 16px;
   }
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     padding: 0;
 
     .MuiToolbar-root {
@@ -34,22 +28,22 @@ exports.AppBar = (0, styled_1.default)(material_1.AppBar) `
     }
   }
 `;
-exports.Links = styled_1.default.div `
+export const Links = styled.div `
   align-items: stretch;
   display: flex;
   flex-direction: column;
   gap: 24px;
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     flex-direction: row;
   }
 `;
-exports.Link = (0, styled_1.default)(link_1.Link) `
-  ${fonts_1.textBodySmall400};
+export const Link = styled(DXLink) `
+  ${textBodySmall400};
   align-items: center;
-  color: ${colors_1.inkMain};
+  color: ${inkMain};
   display: flex;
 `;
-exports.Socials = (0, styled_1.default)(socials_1.Socials) `
+export const Socials = styled(DXSocials) `
   gap: 8px;
 `;

package/lib/components/Layout/components/Header/common/constants.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SWITCH_TRANSITION_PROPS = exports.HEADER_NAVIGATION_LABEL = exports.FADE_TRANSITION_PROPS = exports.HEADER_FADE_TIMEOUT = exports.HEADER_HEIGHT = void 0;
-exports.HEADER_HEIGHT = 56;
-exports.HEADER_FADE_TIMEOUT = 0;
-exports.FADE_TRANSITION_PROPS = {
-    timeout: exports.HEADER_FADE_TIMEOUT,
+export const HEADER_HEIGHT = 56;
+export const HEADER_FADE_TIMEOUT = 0;
+export const FADE_TRANSITION_PROPS = {
+    timeout: HEADER_FADE_TIMEOUT,
     unmountOnExit: true,
 };
-exports.HEADER_NAVIGATION_LABEL = {
+export const HEADER_NAVIGATION_LABEL = {
     MORE: "More",
     SOCIALS: "Follow Us",
 };
-exports.SWITCH_TRANSITION_PROPS = {
+export const SWITCH_TRANSITION_PROPS = {
     timeout: 0,
     unmountOnExit: true,
 };

package/lib/components/Layout/components/Header/common/entities.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/lib/components/Layout/components/Header/common/utils.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHeaderNavigationLinks = exports.flattenNavigationLinks = exports.flattenMoreLink = void 0;
-const renderComponent_1 = require("../../../../ComponentCreator/components/RenderComponent/renderComponent");
-const entities_1 = require("../../../../Links/common/entities");
-const constants_1 = require("./constants");
+import { RenderComponent } from "../../../../ComponentCreator/components/RenderComponent/renderComponent";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { HEADER_NAVIGATION_LABEL } from "./constants";
 /**
  * Returns the navigation links as configured, where the "More" menu is flattened.
  * @param links - Header navigation links.
  * @returns header navigation links, without links grouped under the "More" menu.
  */
-function flattenMoreLink(links) {
+export function flattenMoreLink(links) {
     return links.flatMap((link) => {
-        if (link.label === constants_1.HEADER_NAVIGATION_LABEL.MORE) {
+        if (link.label === HEADER_NAVIGATION_LABEL.MORE) {
             if (link.flatten === false) {
                 return link;
             }
@@ -20,21 +17,19 @@ function flattenMoreLink(links) {
         return link;
     });
 }
-exports.flattenMoreLink = flattenMoreLink;
 /**
  * Returns the navigation links as configured, all menu links specified as "flatten" are flattened, including the "More" menu.
  * @param links - Header navigation links.
  * @returns header navigation links.
  */
-function flattenNavigationLinks(links) {
+export function flattenNavigationLinks(links) {
     return links.flatMap((link) => {
-        if (link.flatten || link.label === constants_1.HEADER_NAVIGATION_LABEL.MORE) {
+        if (link.flatten || link.label === HEADER_NAVIGATION_LABEL.MORE) {
             return link.menuItems;
         }
         return link;
     });
 }
-exports.flattenNavigationLinks = flattenNavigationLinks;
 /**
  * Returns header navigation links with socials appended with the corresponding label "Follow Us".
  * @param links - Header navigation links.
@@ -42,7 +37,7 @@ exports.flattenNavigationLinks = flattenNavigationLinks;
  * @param onlySmDesktop - Media breakpoint query is "true" for small desktop only.
  * @returns header navigation links.
  */
-function getHeaderNavigationLinks(links, socialMedia, onlySmDesktop) {
+export function getHeaderNavigationLinks(links, socialMedia, onlySmDesktop) {
     if (onlySmDesktop) {
         const navLinks = [...links];
         if (socialMedia) {
@@ -57,7 +52,6 @@ function getHeaderNavigationLinks(links, socialMedia, onlySmDesktop) {
     // Return the links without the "More" or "Follow Us" menu.
     return flattenMoreLink(links);
 }
-exports.getHeaderNavigationLinks = getHeaderNavigationLinks;
 /**
  * Returns menu items for the "Follow Us" menu.
  * @param socials - Social configuration.
@@ -66,9 +60,12 @@ exports.getHeaderNavigationLinks = getHeaderNavigationLinks;
 function getFollowUsMenuItems(socials) {
     return socials.map(({ Icon, label, url }) => {
         return {
-            icon: (0, renderComponent_1.RenderComponent)(Object.assign({ Component: Icon }, { fontSize: "small" })),
+            icon: RenderComponent({
+                Component: Icon,
+                ...{ fontSize: "small" },
+            }),
             label,
-            target: entities_1.ANCHOR_TARGET.BLANK,
+            target: ANCHOR_TARGET.BLANK,
             url,
         };
     });

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.js

@@ -1,12 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { HeaderActions } from "./actions.styles";
+export const Actions = ({ children, showActions = true, }) => {
+    return React.createElement(React.Fragment, null, showActions && React.createElement(HeaderActions, null, children));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Actions = void 0;
-const react_1 = __importDefault(require("react"));
-const actions_styles_1 = require("./actions.styles");
-const Actions = ({ children, showActions = true, }) => {
-    return react_1.default.createElement(react_1.default.Fragment, null, showActions && react_1.default.createElement(actions_styles_1.HeaderActions, null, children));
-};
-exports.Actions = Actions;

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.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.HeaderActions = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../../../../../theme/common/breakpoints");
-exports.HeaderActions = styled_1.default.div `
+import styled from "@emotion/styled";
+import { DESKTOP_SM } from "../../../../../../../../theme/common/breakpoints";
+export const HeaderActions = styled.div `
   align-items: center;
   display: flex;
   flex: 1;
   gap: 8px;
   justify-content: flex-end;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.DESKTOP_SM)} {
+  ${({ theme }) => theme.breakpoints.up(DESKTOP_SM)} {
     flex: none;
   }
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.js

@@ -1,41 +1,14 @@
-"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.Authentication = void 0;
-const router_1 = require("next/router");
-const react_1 = __importStar(require("react"));
-const useAuthentication_1 = require("../../../../../../../../../../hooks/useAuthentication/useAuthentication");
-const authenticationMenu_1 = require("./components/AuthenticationMenu/authenticationMenu");
-const requestAuthentication_1 = require("./components/RequestAuthentication/requestAuthentication");
-const Authentication = ({ authenticationEnabled, closeMenu, }) => {
-    const { isAuthenticated, requestAuthentication, userProfile } = (0, useAuthentication_1.useAuthentication)();
-    const router = (0, router_1.useRouter)();
-    const onLogout = (0, react_1.useCallback)(() => {
+import { useRouter } from "next/router";
+import React, { useCallback } from "react";
+import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
+import { AuthenticationMenu } from "./components/AuthenticationMenu/authenticationMenu";
+import { RequestAuthentication } from "./components/RequestAuthentication/requestAuthentication";
+export const Authentication = ({ authenticationEnabled, closeMenu, }) => {
+    const { isAuthenticated, requestAuthentication, userProfile } = useAuthentication();
+    const router = useRouter();
+    const onLogout = useCallback(() => {
         location.href = router.basePath;
     }, [router]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, authenticationEnabled &&
-        (isAuthenticated && userProfile ? (react_1.default.createElement(authenticationMenu_1.AuthenticationMenu, { onLogout: onLogout, userProfile: userProfile })) : (react_1.default.createElement(requestAuthentication_1.RequestAuthentication, { closeMenu: closeMenu, requestAuthorization: requestAuthentication })))));
+    return (React.createElement(React.Fragment, null, authenticationEnabled &&
+        (isAuthenticated && userProfile ? (React.createElement(AuthenticationMenu, { onLogout: onLogout, userProfile: userProfile })) : (React.createElement(RequestAuthentication, { closeMenu: closeMenu, requestAuthorization: requestAuthentication })))));
 };
-exports.Authentication = Authentication;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.js

@@ -1,34 +1,8 @@
-"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.AuthenticationMenu = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const authenticationMenu_styles_1 = require("./authenticationMenu.styles");
-const AuthenticationMenu = ({ onLogout, userProfile, }) => {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+import { MenuItem } from "@mui/material";
+import React, { useState } from "react";
+import { AuthenticationMenu as Menu, Avatar, UserIcon, UserNames, UserSummary, } from "./authenticationMenu.styles";
+export const AuthenticationMenu = ({ onLogout, userProfile, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const onOpenMenu = (event) => {
         setAnchorEl(event.currentTarget);
@@ -36,22 +10,21 @@ const AuthenticationMenu = ({ onLogout, userProfile, }) => {
     const onCloseMenu = () => {
         setAnchorEl(null);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(authenticationMenu_styles_1.UserIcon, { onClick: onOpenMenu },
-            react_1.default.createElement(authenticationMenu_styles_1.Avatar, { alt: `${userProfile.given_name} ${userProfile.family_name}`, src: userProfile.picture })),
-        react_1.default.createElement(authenticationMenu_styles_1.AuthenticationMenu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, autoFocus: false, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(UserIcon, { onClick: onOpenMenu },
+            React.createElement(Avatar, { alt: `${userProfile.given_name} ${userProfile.family_name}`, src: userProfile.picture })),
+        React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, autoFocus: false, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
                 horizontal: "right",
                 vertical: "top",
             } },
-            react_1.default.createElement(authenticationMenu_styles_1.UserSummary, null,
+            React.createElement(UserSummary, null,
                 "You are signed in as:",
-                react_1.default.createElement(authenticationMenu_styles_1.UserNames, { noWrap: true },
+                React.createElement(UserNames, { noWrap: true },
                     userProfile.given_name,
                     " ",
                     userProfile.family_name)),
-            react_1.default.createElement(material_1.MenuItem, { onClick: () => {
+            React.createElement(MenuItem, { onClick: () => {
                     onCloseMenu();
                     onLogout();
                 } }, "Logout"))));
 };
-exports.AuthenticationMenu = AuthenticationMenu;