@databiosphere/findable-ui 50.6.0 → 50.7.0

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.js

@@ -0,0 +1,57 @@
+import { Tooltip as MTooltip, } from "@mui/material";
+import { detectOverflow } from "@popperjs/core";
+import React, { useMemo, useState } from "react";
+import { TooltipContent } from "./tooltip.styles";
+const DEFAULT_FLIP_MODIFIER = {
+    enabled: true,
+    name: "flip",
+    options: {
+        fallbackPlacements: ["bottom", "right", "left"],
+    },
+};
+const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
+    enabled: true,
+    name: "preventOverflow",
+    options: {
+        padding: 16,
+    },
+};
+/**
+ * @deprecated - use Tooltip from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip"
+ */
+export const Tooltip = ({ children, className, title, ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */ }) => {
+    const [maxHeight, setMaxHeight] = useState();
+    const modifiers = useMemo(() => [
+        {
+            enabled: true,
+            fn: ({ state }) => setMaxHeight(calculateMaxHeight(state)),
+            name: "maxHeight",
+            phase: "main",
+            requiresIfExists: ["offset"],
+        },
+        DEFAULT_FLIP_MODIFIER,
+        DEFAULT_PREVENT_OVERFLOW_MODIFIER,
+    ], []);
+    return (React.createElement(MTooltip, { arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
+            popper: { modifiers },
+            tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
+        }, title: React.createElement(TooltipContent, null, title), ...props }, children));
+};
+/**
+ * Calculate the max height of the tooltip based on the current popper modifier state.
+ * @param state - Popper modifier state.
+ * @returns tooltip maximum height.
+ */
+function calculateMaxHeight(state) {
+    const overflow = detectOverflow(state);
+    const { placement } = state;
+    if (placement === "left" || placement === "right") {
+        return window.innerHeight - 32;
+    }
+    if (placement === "top") {
+        return state.rects.popper.height - overflow.top - 24;
+    }
+    if (placement === "bottom") {
+        return state.rects.popper.height - overflow.bottom - 24;
+    }
+}

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const TooltipContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.styles.js

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+export const TooltipContent = styled.span `
+  overflow: scroll;
+  overscroll-behavior: none;
+  padding: 8px 12px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

package/lib/components/Index/components/NTag/nTag.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+export interface NTagProps {
+    className?: string;
+    Tag: ReactElement;
+    TooltipTitle: ReactElement;
+}
+/**
+ * @deprecated - use NTag from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag"
+ */
+export declare const NTag: ({ className, Tag, TooltipTitle, ...props }: NTagProps) => JSX.Element;

package/lib/components/Index/components/NTag/nTag.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { Tooltip } from "./components/Tooltip/tooltip";
+/**
+ * @deprecated - use NTag from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag"
+ */
+export const NTag = ({ className, Tag, TooltipTitle, ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */ }) => {
+    return (React.createElement(Tooltip, { className: className, title: TooltipTitle, ...props }, Tag));
+};

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

@@ -0,0 +1,11 @@
+import { TypographyProps } from "../../../common/Typography/common/entities";
+export type MetadataValue = string;
+export interface NTagCellProps {
+    label: string;
+    TypographyProps?: TypographyProps;
+    values: MetadataValue[];
+}
+/**
+ * @deprecated - use NTagCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell"
+ */
+export declare const NTagCell: ({ label, TypographyProps, values, }: NTagCellProps) => JSX.Element;

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

@@ -0,0 +1,29 @@
+import { Chip as MChip, Typography, } from "@mui/material";
+import React, { forwardRef } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
+import { NTag } from "../NTag/nTag";
+// Template constants
+const MAX_DISPLAYABLE_VALUES = 1;
+/**
+ * String-concatenates the specified list of metadata values to a string value, joined by a comma ",".
+ * @param metadataValues - List of metadata values.
+ * @returns the metadata values in a string, each value joined by a comma.
+ */
+function stringifyMetadataValues(metadataValues) {
+    return metadataValues.join(", ");
+}
+/**
+ * Renders tag for NTag component.
+ * Tooltip children require forward ref.
+ */
+const Tag = forwardRef(function Tag(props, ref) {
+    return React.createElement(MChip, { ref: ref, ...props });
+});
+/**
+ * @deprecated - use NTagCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell"
+ */
+export const NTagCell = ({ label, TypographyProps, values, }) => {
+    const metadataCount = values.length;
+    const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
+    return (React.createElement(React.Fragment, null, showNTag ? (React.createElement(NTag, { Tag: React.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: React.createElement(Typography, { display: "block", variant: TEXT_BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (React.createElement(Typography, { key: `${value}${v}`, variant: "inherit", ...TypographyProps }, value))))));
+};

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,16 @@
+import React from "react";
+import { NTagCell } from "./nTagCell";
+export default {
+    argTypes: {
+        label: { control: "text" },
+        values: { control: "array" },
+    },
+    component: NTagCell,
+    title: "Components/Table/Cell/NTagCell",
+};
+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/Tabs/common/utils.d.ts

@@ -0,0 +1,8 @@
+import { EntityConfig } from "../../../../../config/entities";
+import { Tab } from "../../../../common/Tabs/tabs";
+/**
+ * Returns entity list tabs list for the tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+export declare function getEntityListTabs(entities: EntityConfig[]): Tab[];

package/lib/components/Index/components/Tabs/common/utils.js

@@ -0,0 +1,19 @@
+/**
+ * Returns entity list tabs list for the tabs component.
+ * @param entities - Entities config.
+ * @returns tabs list.
+ */
+export function getEntityListTabs(entities) {
+    return entities.reduce((acc, { annotation, label, listView: { enableTab = true } = {}, route, tabIcon: icon, tabIconPosition: iconPosition, }) => {
+        if (enableTab) {
+            acc.push({
+                annotation,
+                icon,
+                iconPosition,
+                label,
+                value: route,
+            });
+        }
+        return acc;
+    }, []);
+}

package/lib/components/Index/components/Tabs/tabs.d.ts

@@ -0,0 +1 @@
+export declare const Tabs: () => JSX.Element | null;

package/lib/components/Index/components/Tabs/tabs.js

@@ -0,0 +1,20 @@
+import Router from "next/router";
+import React, { useCallback, useMemo } from "react";
+import { useConfig } from "../../../../hooks/useConfig";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { Tabs as DXTabs } from "../../../common/Tabs/tabs";
+import { getEntityListTabs } from "./common/utils";
+export const Tabs = () => {
+    const { config } = useConfig();
+    const { exploreState } = useExploreState();
+    const { entities } = config;
+    const { tabValue } = exploreState;
+    const tabs = useMemo(() => getEntityListTabs(entities), [entities]);
+    // Callback fired when selected tab value changes.
+    const onTabChange = useCallback(async (tabValue) => {
+        await Router.push(`/${tabValue}`);
+    }, []);
+    if (tabs.length <= 1)
+        return null;
+    return React.createElement(DXTabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue });
+};

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.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Index } from "./index";
+declare const _default: Meta<typeof Index>;
+export default _default;
+type Story = StoryObj<typeof Index>;
+export declare const IndexStory: Story;

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Summaries } from "./components/Hero/components/Summaries/summaries";
+import { SummariesStory } from "./components/Hero/components/Summaries/summaries.stories";
+import { Index } from "./index";
+export default {
+    argTypes: {
+        Summaries: { table: { disable: true } },
+        Tabs: { table: { disable: true } },
+        list: { table: { disable: true } },
+        title: { table: { disable: true } },
+    },
+    component: Index,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Views/ExploreView",
+};
+export const IndexStory = {
+    args: {
+        Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
+        Tabs: undefined,
+        chart: undefined,
+        list: undefined,
+        title: "Explore Data",
+    },
+};

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

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

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

@@ -0,0 +1,17 @@
+import { composeStories } from "@storybook/react";
+import React from "react";
+import * as summaryStories from "../components/Hero/components/Summaries/stories/summaries.stories";
+import { Index } from "../index";
+const { Default: Summaries } = composeStories(summaryStories);
+const meta = {
+    component: Index,
+    parameters: { layout: "fullscreen" },
+};
+export default meta;
+export const Default = {
+    args: {
+        Summaries: React.createElement(Summaries, null),
+        Tabs: undefined,
+        title: "Explore Data",
+    },
+};

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

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

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

@@ -0,0 +1,10 @@
+import { BackPageHero } from "./backPageHero";
+export default {
+    component: BackPageHero,
+    title: "Components/Hero",
+};
+export const BackPageHeroStory = {
+    args: {
+        title: "A Single-Cell Transcriptomic Map of the Human and Mouse Pancreas Reveals Inter- and Intra-cell Population Structure",
+    },
+};

package/lib/components/Layout/components/Footer/footer.stories.d.ts

@@ -0,0 +1,27 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+import { Footer } from "./footer";
+declare const meta: {
+    argTypes: {
+        Branding: {
+            control: {
+                disabled: boolean;
+            };
+        };
+        navLinks: {
+            control: "object";
+        };
+        socials: {
+            control: {
+                disabled: boolean;
+            };
+        };
+    };
+    component: ({ Branding, className, navLinks, socials, versionInfo, }: import("./footer").FooterProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof Footer>;
+export declare const FooterStory: Story;

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

@@ -0,0 +1,64 @@
+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";
+const meta = {
+    argTypes: {
+        Branding: { control: { disabled: true } },
+        navLinks: { control: "object" },
+        socials: { control: { disabled: true } },
+    },
+    component: Footer,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Components/Layout/Footer",
+};
+export default meta;
+export const FooterStory = {
+    args: {
+        Branding: React.createElement(Logo, { alt: "logo", height: 24, link: "/", src: logo.src }),
+        navLinks: [
+            {
+                label: "Help",
+                url: "https://support.google.com/",
+            },
+            {
+                label: "Privacy",
+                url: "https://policies.google.com/privacy?hl=en-US",
+            },
+        ],
+        socials: [
+            {
+                Icon: DiscourseIcon,
+                label: null,
+                url: "https://www.discourse.org/",
+            },
+            {
+                Icon: XIcon,
+                label: null,
+                url: "https://twitter.com",
+            },
+            {
+                Icon: FacebookIcon,
+                label: null,
+                url: "https://facebook.com",
+            },
+            {
+                Icon: YouTubeIcon,
+                label: null,
+                url: "https://www.youtube.com",
+            },
+            {
+                Icon: GitHubIcon,
+                label: null,
+                url: "https://github.com",
+            },
+        ],
+    },
+};

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/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/Search/components/SearchButton/searchButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface SearchProps {
+    openSearch: () => void;
+}
+export declare const SearchButton: ({ openSearch }: SearchProps) => JSX.Element;

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

@@ -0,0 +1,10 @@
+import { IconButton } from "@mui/material";
+import React from "react";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
+import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { Button } from "./searchButton.styles";
+export const SearchButton = ({ openSearch }) => {
+    const { mdUp } = useBreakpoint();
+    return mdUp ? (React.createElement(Button, { onClick: openSearch, startIcon: React.createElement(SearchIcon, null), variant: "nav" }, "Search")) : (React.createElement(IconButton, { color: "ink", onClick: openSearch },
+        React.createElement(SearchIcon, { fontSize: "medium" })));
+};

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "large" | "medium" | "small" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "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/Search/components/SearchButton/searchButton.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/hooks/useMeasureHeader.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+export interface UseMeasureHeader {
+    headerRef: RefObject<HTMLElement>;
+}
+export declare const useMeasureHeader: () => UseMeasureHeader;

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { useLayoutState } from "../../../../../hooks/useLayoutState";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../../hooks/useResizeObserver";
+import { LayoutActionKind } from "../../../../../providers/layoutState";
+export const useMeasureHeader = () => {
+    const { layoutDispatch } = useLayoutState();
+    const headerRef = useRef(null);
+    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
+    // Updates layout state header height.
+    useEffect(() => {
+        if (!height)
+            return;
+        layoutDispatch({
+            payload: height,
+            type: LayoutActionKind.UpdateHeaderHeight,
+        });
+    }, [height, layoutDispatch]);
+    return { headerRef };
+};

package/lib/components/Layout/components/Outline/common/constants.d.ts

@@ -0,0 +1,2 @@
+import { TabProps as MTabProps } from "@mui/material";
+export declare const DEFAULT_TAB_VALUE: MTabProps["value"];