@databiosphere/findable-ui 23.0.0 → 25.0.0

package/lib/components/Index/components/EntitiesView/entitiesView.styles.js

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import { white } from "../../../../styles/common/mixins/colors";
+import { FluidPaper } from "../../../common/Paper/paper.styles";
+export const StyledFluidPaper = styled(FluidPaper) `
+  &.MuiPaper-root {
+    position: relative; /* required; positions table loading indicator */
+
+    .MuiToolbar-root {
+      background-color: ${white};
+      padding: 20px;
+
+      .MuiToggleButtonGroup-root {
+        .MuiToggleButton-root {
+          padding: 8px 16px;
+          text-transform: none;
+        }
+      }
+    }
+  }
+`;

package/lib/components/Index/components/EntitiesView/hooks/UseEntitiesView/hook.d.ts

@@ -0,0 +1,2 @@
+import { UseEntitiesViewProps } from "./types";
+export declare const useEntitiesView: () => UseEntitiesViewProps;

package/lib/components/Index/components/EntitiesView/hooks/UseEntitiesView/hook.js

@@ -0,0 +1,14 @@
+import { useConfig } from "../../../../../../hooks/useConfig";
+import { useToggleButtonGroup } from "../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
+import { VIEW_MODE } from "./types";
+export const useEntitiesView = () => {
+    const { onChange, value } = useToggleButtonGroup(VIEW_MODE.TABLE);
+    const { config } = useConfig();
+    const { enableEntitiesView = false } = config;
+    const disabled = !enableEntitiesView;
+    return {
+        onChange,
+        viewMode: value,
+        viewStatus: { disabled },
+    };
+};

package/lib/components/Index/components/EntitiesView/hooks/UseEntitiesView/types.d.ts

@@ -0,0 +1,13 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+export declare enum VIEW_MODE {
+    CHART = "chart",
+    TABLE = "table"
+}
+export interface ViewStatus {
+    disabled: boolean;
+}
+export interface UseEntitiesViewProps {
+    onChange: ToggleButtonGroupProps["onChange"];
+    viewMode: VIEW_MODE;
+    viewStatus: ViewStatus;
+}

package/lib/components/Index/components/EntitiesView/hooks/UseEntitiesView/types.js

@@ -0,0 +1,5 @@
+export var VIEW_MODE;
+(function (VIEW_MODE) {
+    VIEW_MODE["CHART"] = "chart";
+    VIEW_MODE["TABLE"] = "table";
+})(VIEW_MODE || (VIEW_MODE = {}));

package/lib/components/Index/components/EntitiesView/stories/entitiesView.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { EntitiesView } from "../entitiesView";
+declare const meta: Meta<typeof EntitiesView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ChartView: Story;
+export declare const TableView: Story;

package/lib/components/Index/components/EntitiesView/stories/entitiesView.stories.js

@@ -0,0 +1,50 @@
+import { Box } from "@mui/material";
+import { fn } from "@storybook/test";
+import React from "react";
+import { LOREM_IPSUM } from "../../../../../storybook/loremIpsum";
+import { EntitiesView } from "../entitiesView";
+import { VIEW_MODE } from "../hooks/UseEntitiesView/types";
+const meta = {
+    args: {
+        onChange: fn(),
+        viewMode: VIEW_MODE.TABLE,
+        viewStatus: { disabled: true },
+    },
+    component: EntitiesView,
+    title: "Components/Entities/EntitiesView",
+};
+export default meta;
+export const Default = {
+    args: {
+        children: (React.createElement(Box, { sx: {
+                backgroundColor: "white",
+                maxWidth: "800px",
+                padding: 5,
+                width: "100%",
+            } }, LOREM_IPSUM.LONG)),
+    },
+};
+export const ChartView = {
+    args: {
+        children: (React.createElement(Box, { sx: {
+                backgroundColor: "white",
+                maxWidth: "800px",
+                padding: 5,
+                width: "100%",
+            } }, LOREM_IPSUM.SHORT)),
+        viewMode: VIEW_MODE.CHART,
+        viewStatus: { disabled: false },
+    },
+};
+export const TableView = {
+    args: {
+        children: (React.createElement(Box, { sx: {
+                backgroundColor: "white",
+                maxWidth: "800px",
+                padding: 5,
+                width: "100%",
+            } }, LOREM_IPSUM.SHORT)),
+        viewMode: VIEW_MODE.TABLE,
+        viewStatus: { disabled: false },
+    },
+};

package/lib/components/Index/components/EntitiesView/types.d.ts

@@ -0,0 +1,8 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { ChildrenProps, TestIdProps } from "../../../types";
+import { VIEW_MODE, ViewStatus } from "./hooks/UseEntitiesView/types";
+export interface EntitiesViewProps extends ChildrenProps, TestIdProps {
+    onChange: ToggleButtonGroupProps["onChange"];
+    viewMode: VIEW_MODE;
+    viewStatus: ViewStatus;
+}

package/lib/components/Index/components/EntitiesView/types.js

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

package/lib/components/Index/components/NTagCell/nTagCell.stories.d.ts

@@ -1,16 +1,5 @@
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    argTypes: {
-        label: {
-            control: "text";
-        };
-        values: {
-            control: "object";
-        };
-    };
-    component: ({ label, TypographyProps, values, }: import("./nTagCell").NTagCellProps) => JSX.Element;
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const NTagCellStory: Story;
+import { ComponentMeta } from "@storybook/react";
+import { NTagCell } from "./nTagCell";
+declare const _default: ComponentMeta<typeof NTagCell>;
+export default _default;
+export declare const NTagCellStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./nTagCell").NTagCellProps>;

package/lib/components/Index/components/NTagCell/nTagCell.stories.js

@@ -1,16 +1,16 @@
+import React from "react";
 import { NTagCell } from "./nTagCell";
-const meta = {
+export default {
     argTypes: {
         label: { control: "text" },
-        values: { control: "object" },
+        values: { control: "array" },
     },
     component: NTagCell,
     title: "Components/Table/Cell/NTagCell",
 };
-export default meta;
-export const NTagCellStory = {
-    args: {
-        label: "species",
-        values: ["Homo sapiens", "Mus musculus"],
-    },
+const NTagCellTemplate = (args) => (React.createElement(NTagCell, { ...args }));
+export const NTagCellStory = NTagCellTemplate.bind({});
+NTagCellStory.args = {
+    label: "species",
+    values: ["Homo sapiens", "Mus musculus"],
 };

package/lib/components/Index/components/TitleCell/titleCell.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { LinkProps } from "../../../Links/components/Link/link";
+export interface TitleCellProps extends LinkProps {
+    title: ReactNode;
+}
+export declare const TitleCell: ({ title, ...props }: TitleCellProps) => JSX.Element;

package/lib/components/Index/components/TitleCell/titleCell.js

@@ -0,0 +1,10 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../../theme/common/typography";
+import { Link } from "../../../Links/components/Link/link";
+import { TitleCell as Cell } from "./titleCell.styles";
+export const TitleCell = ({ title, ...props }) => {
+    return (React.createElement(Cell, { gridSx: { gap: 1 } },
+        typeof title === "string" ? (React.createElement(Typography, { variant: TEXT_BODY_400 }, title)) : (title),
+        React.createElement(Link, { ...props })));
+};

package/lib/components/Index/components/TitleCell/titleCell.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const TitleCell: import("@emotion/styled").StyledComponent<import("../../../common/Grid/grid").GridProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Index/components/TitleCell/titleCell.styles.js

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { textBodySmall400 } from "../../../../styles/common/mixins/fonts";
+import { Grid } from "../../../common/Grid/grid";
+export const TitleCell = styled(Grid) `
+  ${textBodySmall400};
+`;

package/lib/components/Index/index.d.ts

@@ -1,13 +1,2 @@
-import { ReactNode } from "react";
-import { HeroTitle } from "../common/Title/title";
-export interface IndexProps {
-    className?: string;
-    List?: ReactNode;
-    ListHero?: ReactNode | ReactNode[];
-    SideBarButton?: ReactNode;
-    SubTitleHero?: ReactNode | ReactNode[];
-    Summaries?: ReactNode;
-    Tabs?: ReactNode;
-    title: HeroTitle;
-}
-export declare const Index: ({ className, List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }: IndexProps) => JSX.Element;
+import { IndexProps } from "./types";
+export declare const Index: ({ chart, className, list, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }: IndexProps) => JSX.Element;

package/lib/components/Index/index.js

@@ -1,13 +1,17 @@
 import React from "react";
 import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
+import { EntitiesView } from "./components/EntitiesView/entitiesView";
+import { useEntitiesView } from "./components/EntitiesView/hooks/UseEntitiesView/hook";
+import { VIEW_MODE } from "./components/EntitiesView/hooks/UseEntitiesView/types";
 import { Hero } from "./components/Hero/hero";
 import { Index as IndexLayout } from "./index.styles";
-export const Index = ({ className, List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
+export const Index = ({ chart, className, list, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
+    const { onChange, viewMode, viewStatus } = useEntitiesView();
     const { dimensions } = useLayoutDimensions();
     return (React.createElement(IndexLayout, { className: className, marginTop: dimensions.header.height },
         React.createElement(Hero, { SideBarButton: SideBarButton, Summaries: Summaries, title: title }),
         SubTitleHero,
         Tabs,
         ListHero,
-        List));
+        React.createElement(EntitiesView, { onChange: onChange, viewMode: viewMode, viewStatus: viewStatus }, viewMode === VIEW_MODE.TABLE ? list : chart)));
 };

package/lib/components/Index/index.stories.js

@@ -4,9 +4,9 @@ import { SummariesStory } from "./components/Hero/components/Summaries/summaries
 import { Index } from "./index";
 export default {
     argTypes: {
-        List: { table: { disable: true } },
         Summaries: { table: { disable: true } },
         Tabs: { table: { disable: true } },
+        list: { table: { disable: true } },
         title: { table: { disable: true } },
     },
     component: Index,
@@ -17,9 +17,10 @@ export default {
 };
 export const IndexStory = {
     args: {
-        List: undefined,
         Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
         Tabs: undefined,
+        chart: undefined,
+        list: undefined,
         title: "Explore Data",
     },
 };

package/lib/components/Index/types.d.ts

@@ -0,0 +1,12 @@
+import { BaseComponentProps } from "components/types";
+import { ReactNode } from "react";
+export interface IndexProps extends BaseComponentProps {
+    chart?: ReactNode;
+    list?: ReactNode;
+    ListHero?: ReactNode | ReactNode[];
+    SideBarButton?: ReactNode;
+    SubTitleHero?: ReactNode | ReactNode[];
+    Summaries?: ReactNode;
+    Tabs?: ReactNode;
+    title: ReactNode;
+}

package/lib/components/Index/types.js

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

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.d.ts

@@ -6,7 +6,7 @@ import { CallToAction } from "../../../../../common/Button/components/CallToActi
  */
 export interface BackPageHeroProps {
     actions?: ReactNode;
-    breadcrumbs?: Breadcrumb[];
+    breadcrumbs?: Breadcrumb[] | ReactNode;
     callToAction?: CallToAction;
     children?: ReactNode;
     subTitle?: ReactNode;

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.js

@@ -1,17 +1,18 @@
 import React, { Fragment } from "react";
 import { Breadcrumbs, } from "../../../../../common/Breadcrumbs/breadcrumbs";
+import { isBreadcrumbArray } from "../../../../../common/Breadcrumbs/typeGuard";
 import { Title } from "../../../../../common/Title/title";
 import { BackPageHeroHeadline, CallToActionButton, HeroHeader, } from "./backPageHero.styles";
 import { SubTitle } from "./components/SubTitle/subTitle";
 export const BackPageHero = ({ actions, breadcrumbs, callToAction, children, subTitle, title, }) => {
     const HeroHeadline = actions || callToAction ? BackPageHeroHeadline : Fragment;
-    return (React.createElement(React.Fragment, null,
-        (breadcrumbs || title) && (React.createElement(HeroHeadline, null,
+    return (React.createElement(Fragment, null,
+        React.createElement(HeroHeadline, null,
             React.createElement(HeroHeader, { gap: 1 },
-                breadcrumbs && React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs }),
+                breadcrumbs ? (isBreadcrumbArray(breadcrumbs) ? (React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs })) : (breadcrumbs)) : null,
                 title && React.createElement(Title, { title: title }),
                 React.createElement(SubTitle, { subTitle: subTitle })),
             actions,
-            callToAction && React.createElement(CallToActionButton, { callToAction: callToAction }))),
+            callToAction && React.createElement(CallToActionButton, { callToAction: callToAction })),
         children));
 };

package/lib/components/Layout/components/BackPage/components/BackPageHero/stories/backPageHero.stories.d.ts

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

package/lib/components/Layout/components/BackPage/components/BackPageHero/stories/backPageHero.stories.js

@@ -0,0 +1,18 @@
+import { BackPageHero } from "../backPageHero";
+const meta = {
+    component: BackPageHero,
+    title: "Components/EntityView/BackPageHero",
+};
+export default meta;
+export const Default = {
+    args: {
+        breadcrumbs: [
+            { path: "/", text: "Explore" },
+            {
+                path: "",
+                text: "Spatial multi-omic map of human myocardial infarction",
+            },
+        ],
+        title: "Spatial multi-omic map of human myocardial infarction",
+    },
+};

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

@@ -1,4 +1,4 @@
-import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
+import { LoginRounded } from "@mui/icons-material";
 import { IconButton as MIconButton, Skeleton, } from "@mui/material";
 import Router from "next/router";
 import React from "react";
@@ -27,7 +27,7 @@ export const Authentication = ({ authenticationEnabled, Button, closeMenu, }) =>
  * @returns button.
  */
 export function renderButton(props, pathname) {
-    return (React.createElement(StyledButton, { startIcon: React.createElement(LoginRoundedIcon, null), variant: isNavigationLinkSelected(pathname, [ROUTE.LOGIN]) ? "activeNav" : "nav", ...props }, "Sign in"));
+    return (React.createElement(StyledButton, { startIcon: React.createElement(LoginRounded, null), variant: isNavigationLinkSelected(pathname, [ROUTE.LOGIN]) ? "activeNav" : "nav", ...props }, "Sign in"));
 }
 /**
  * Renders authentication icon button.
@@ -36,5 +36,5 @@ export function renderButton(props, pathname) {
  */
 export function renderIconButton(props) {
     return (React.createElement(MIconButton, { color: "ink", ...props },
-        React.createElement(LoginRoundedIcon, null)));
+        React.createElement(LoginRounded, null)));
 }

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { AuthenticationMenu } from "./authenticationMenu";
+declare const _default: Meta<typeof AuthenticationMenu>;
+export default _default;
+export declare const AuthenticationMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./authenticationMenu").AuthenticationMenuProps>;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { AuthenticationMenu } from "./authenticationMenu";
+export default {
+    argTypes: {
+        onLogout: {
+            description: "Callback to be called when 'Logout' button is clicked",
+        },
+        userProfile: {
+            description: "User profile with name and avatar",
+        },
+    },
+    component: AuthenticationMenu,
+    title: "Components/Navigation/AuthenticationMenu",
+};
+const AuthenticationMenuTemplate = (args) => React.createElement(AuthenticationMenu, { ...args });
+export const AuthenticationMenuStory = AuthenticationMenuTemplate.bind({});
+AuthenticationMenuStory.args = {
+    userProfile: {
+        email: "john@smith.com",
+        email_verified: true,
+        family_name: "Smith",
+        given_name: "John",
+        hd: "",
+        locale: "",
+        name: "john_smith",
+        picture: "https://i.pravatar.cc/200",
+        sub: "",
+    },
+};

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.d.ts

@@ -3,7 +3,7 @@ export declare const AuthenticationMenu: import("@emotion/styled").StyledCompone
 }, {}, {}>;
 export declare const UserIcon: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loadingIndicator" | "edge"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const UserSummary: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
@@ -18,6 +18,6 @@ export declare const UserNames: import("@emotion/styled").StyledComponent<import
 }, {}, {}>;
 export declare const StyledAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slotProps" | "slots" | "imgProps"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slots" | "slotProps" | "imgProps"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface RequestAuthenticationProps {
+    closeMenu: () => void;
+    requestAuthorization: () => void;
+}
+export declare const RequestAuthentication: ({ closeMenu, requestAuthorization, }: RequestAuthenticationProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.js

@@ -0,0 +1,13 @@
+import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
+import { IconButton as MIconButton } from "@mui/material";
+import React from "react";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
+import { Button } from "./requestAuthentication.styles";
+export const RequestAuthentication = ({ closeMenu, requestAuthorization, }) => {
+    const { mdUp } = useBreakpoint();
+    return mdUp ? (React.createElement(Button, { onClick: requestAuthorization, startIcon: React.createElement(LoginRoundedIcon, null), variant: "nav" }, "Sign in")) : (React.createElement(MIconButton, { color: "ink", onClick: () => {
+            closeMenu();
+            requestAuthorization();
+        } },
+        React.createElement(LoginRoundedIcon, null)));
+};

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.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" | "activeNav" | "backNav" | 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" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.js

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
+export const Button = styled(MButton) `
+  & {
+    ${textBody500};
+    padding: 6px 12px;
+  }
+`;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.js

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton, Toolbar as MToolbar } from "@mui/material";
 import React, { Fragment } from "react";
 import { Left, Right } from "../../../../../../../../header.styles";
@@ -17,5 +17,5 @@ export const Toolbar = ({ actions, announcements, authenticationEnabled, logo, o
                     React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, Button: renderAuthenticationIconButton, closeMenu: onClose }),
                     actions,
                     React.createElement(IconButton, { color: "ink", onClick: onClose },
-                        React.createElement(CloseRoundedIcon, null)))))));
+                        React.createElement(CloseRounded, null)))))));
 };

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.js

@@ -1,4 +1,4 @@
-import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
+import { MenuRounded } from "@mui/icons-material";
 import { Fade, IconButton, Dialog as MDialog } from "@mui/material";
 import React, { forwardRef, Fragment, useEffect } from "react";
 import { getMenuNavigationLinks } from "../../../../../../common/utils";
@@ -21,7 +21,7 @@ export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, isM
         return null;
     return (React.createElement(Fragment, null,
         React.createElement(IconButton, { color: "ink", onClick: openMenu, ref: ref, style: style },
-            React.createElement(MenuRoundedIcon, null)),
+            React.createElement(MenuRounded, null)),
         React.createElement(MDialog, { ...DIALOG_PROPS, onClose: closeMenu, open: open, TransitionComponent: Fade, transitionDuration: isMenuIn ? 600 : 0 },
             React.createElement(AppBar, { component: "div", elevation: 0 },
                 React.createElement(Toolbar, { onClose: closeMenu, ...headerProps })),

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.js

@@ -1,14 +1,16 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { useSearchParams } from "next/navigation";
 import Router from "next/router";
 import React, { useCallback, useRef, useState, } from "react";
 import { isValidUrl } from "../../../../../../../../../../../../common/utils";
+import { useLayoutDimensions } from "../../../../../../../../../../../../providers/layoutDimensions/hook";
 import { ButtonPrimary } from "../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
 import { isClientSideNavigation } from "../../../../../../../../../../../Links/common/utils";
 import { getSearchParams } from "./common/utils";
 import { ClearButton, SearchBar as SearchDialog, SearchForm, SearchInput, } from "./searchBar.styles";
 export default function SearchBar({ closeMenu, closeSearch, searchOpen, searchURL, }) {
+    const { dimensions } = useLayoutDimensions();
     const inputRef = useRef(null);
     const searchParams = useSearchParams();
     const [searchTerm, setSearchTerm] = useState("");
@@ -61,9 +63,9 @@ export default function SearchBar({ closeMenu, closeSearch, searchOpen, searchUR
             throw new Error("Invalid search URL.");
         }
     }, [closeMenu, closeSearch, searchParams]);
-    return (React.createElement(SearchDialog, { fullWidth: true, hideBackdrop: true, maxWidth: false, onClose: closeSearch, open: searchOpen, PaperProps: { variant: "searchbar" }, TransitionProps: { onExited: handleExited } },
+    return (React.createElement(SearchDialog, { fullWidth: true, hideBackdrop: true, maxWidth: false, onClose: closeSearch, open: searchOpen, PaperProps: { variant: "searchbar" }, TransitionProps: { onExited: handleExited }, yOffset: dimensions.header.height - 1 },
         React.createElement(SearchForm, { onSubmit: (e) => handleSubmit(e, searchTerm, searchURL) },
             React.createElement(SearchIcon, { fontSize: "small" }),
-            React.createElement(SearchInput, { autoFocus: true, disableUnderline: true, endAdornment: searchTerm ? (React.createElement(ClearButton, { edge: "end", Icon: CloseRoundedIcon, onClick: handleClear, size: "small" })) : undefined, fullWidth: true, inputRef: inputRef, onChange: handleChange, placeholder: "Type in keywords...", value: searchTerm }),
+            React.createElement(SearchInput, { autoFocus: true, disableUnderline: true, endAdornment: searchTerm ? (React.createElement(ClearButton, { edge: "end", Icon: CloseRounded, onClick: handleClear, size: "small" })) : undefined, fullWidth: true, inputRef: inputRef, onChange: handleChange, placeholder: "Type in keywords...", value: searchTerm }),
             React.createElement(ButtonPrimary, { type: "submit" }, "Search"))));
 }

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.d.ts

@@ -1,7 +1,10 @@
 import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
+interface Props {
+    yOffset: number;
+}
 export declare const SearchBar: import("@emotion/styled").StyledComponent<import("@mui/material").DialogProps & {
     theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+} & Props, {}, {}>;
 export declare const SearchForm: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -10,3 +13,4 @@ export declare const SearchInput: import("@emotion/styled").StyledComponent<impo
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const ClearButton: typeof IconButton;
+export {};