@databiosphere/findable-ui 50.6.0 → 50.7.0

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

@@ -0,0 +1 @@
+export const DEFAULT_TAB_VALUE = "";

package/lib/components/Login/login.stories.d.ts

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

package/lib/components/Login/login.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { HelpIconButton } from "../common/Button/components/HelpIconButton/helpIconButton";
+import { Login } from "./login";
+export default {
+    argTypes: {
+        isGoogle: { control: "boolean" },
+        termsOfService: { control: "object" },
+        text: { control: "object" },
+        title: { control: "text" },
+        warning: { control: "object" },
+    },
+    component: Login,
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Components/Login",
+};
+export const LoginStory = {
+    args: {
+        isGoogle: true,
+        termsOfService: (React.createElement("p", null, "I have read and agree to privacy notice and terms of use")),
+        text: (React.createElement("p", null,
+            "Please sign in to your Data Explorer account",
+            " ",
+            React.createElement(HelpIconButton, { url: "https://www.google.com/" }))),
+        title: "Sign in to your account",
+        warning: (React.createElement("div", null,
+            React.createElement("p", null, "WARNING NOTICE"),
+            React.createElement("p", null, "This is a warning notice."))),
+    },
+};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.d.ts

@@ -0,0 +1,16 @@
+type MenuListItemOnChangeFn = (event: unknown) => void;
+type onResetFn = () => void;
+export interface CheckboxMenuListItem {
+    checked: boolean;
+    disabled?: boolean;
+    label: string;
+    onChange: MenuListItemOnChangeFn;
+    value: string;
+}
+export interface CheckboxMenuProps {
+    label: string;
+    onReset: onResetFn;
+    options: CheckboxMenuListItem[];
+}
+export declare const CheckboxMenu: ({ label: buttonLabel, onReset, options, }: CheckboxMenuProps) => JSX.Element;
+export {};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.js

@@ -0,0 +1,28 @@
+import { Checkbox, ListItem, ListItemButton, ListItemText, } from "@mui/material";
+import React, { useState } from "react";
+import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
+import { DropdownButton } from "../../../common/Button/components/DropdownButton/dropdownButton";
+import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { Menu } from "./checkboxMenu.styles";
+export const CheckboxMenu = ({ label: buttonLabel, onReset, options, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onOpenMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onCloseMenu = () => {
+        setAnchorEl(null);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownButton, { onClick: onOpenMenu, open: open }, buttonLabel),
+        React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+                horizontal: "right",
+                vertical: "top",
+            } },
+            options.map(({ checked, disabled = false, label, onChange, value }) => (React.createElement(ListItemButton, { disabled: disabled, key: value, onClick: onChange, role: undefined },
+                React.createElement(Checkbox, { checked: checked, checkedIcon: React.createElement(CheckedIcon, null), disabled: disabled, icon: React.createElement(UncheckedIcon, null) }),
+                React.createElement(ListItemText, { disableTypography: true, primary: React.createElement("span", null, label) })))),
+            React.createElement(ListItem, { component: "div" },
+                React.createElement(ButtonTextPrimary, { onClick: onReset }, "Reset")))));
+};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentMeta } from "@storybook/react";
+import { CheckboxMenu } from "./checkboxMenu";
+declare const _default: ComponentMeta<typeof CheckboxMenu>;
+export default _default;
+export declare const CheckboxMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./checkboxMenu").CheckboxMenuProps>;

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.stories.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { CheckboxMenu } from "./checkboxMenu";
+export default {
+    argTypes: {
+        label: { control: "text" },
+        onReset: { control: { disabled: true } },
+        options: { control: "array" },
+    },
+    component: CheckboxMenu,
+    title: "Components/Common/Menu/CheckboxMenu",
+};
+const CheckboxMenuTemplate = (args) => (React.createElement(CheckboxMenu, { ...args }));
+const onChange = () => {
+    // onChange function
+};
+const onReset = () => {
+    // onReset function
+};
+export const CheckboxMenuStory = CheckboxMenuTemplate.bind({});
+CheckboxMenuStory.args = {
+    label: "Options",
+    onReset: onReset,
+    options: [
+        {
+            checked: true,
+            disabled: true,
+            label: "Item 1",
+            onChange,
+            value: "item_1",
+        },
+        {
+            checked: false,
+            disabled: false,
+            label: "Item 2",
+            onChange,
+            value: "item_2",
+        },
+        {
+            checked: true,
+            disabled: false,
+            label: "Item 3",
+            onChange,
+            value: "item_3",
+        },
+    ],
+};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Menu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.js

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+import { Menu as MMenu } from "@mui/material";
+export const Menu = styled(MMenu) `
+  .MuiPaper-menu {
+    margin: 4px 0;
+  }
+
+  // List item button
+  .MuiListItemButton-root {
+    gap: 8px;
+  }
+
+  // List item
+  .MuiListItem-root {
+    padding: 10px 16px;
+  }
+
+  .MuiListItemButton-root.Mui-disabled {
+    opacity: 1;
+  }
+`;

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.d.ts

@@ -0,0 +1,6 @@
+import { Row, RowData } from "@tanstack/react-table";
+export interface DownloadEntityResultsProps<T extends RowData> {
+    entityName: string;
+    rows: Row<T>[];
+}
+export declare const DownloadEntityResults: <T extends RowData>({ entityName, rows, }: DownloadEntityResultsProps<T>) => JSX.Element;

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { ButtonSecondary } from "../../../common/Button/components/ButtonSecondary/buttonSecondary";
+import { FileDownloadButton } from "../../../common/Button/components/FileDownloadButton/fileDownloadButton";
+import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
+import { generateDownloadBlob } from "../../common/utils";
+export const DownloadEntityResults = ({ entityName, rows, }) => {
+    const [fileUrl, setFileUrl] = React.useState(undefined);
+    const onDownload = () => {
+        const blob = generateDownloadBlob(rows);
+        if (blob) {
+            setFileUrl(window.URL.createObjectURL(blob));
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ButtonSecondary, { onClick: () => onDownload(), StartIcon: DownloadIcon }, "Download TSV"),
+        React.createElement(FileDownloadButton, { fileName: `${entityName}.tsv`, fileUrl: fileUrl })));
+};

package/lib/components/Table/components/EntityViewToggle/entityViewToggle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EntityViewToggle: () => JSX.Element;

package/lib/components/Table/components/EntityViewToggle/entityViewToggle.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityViewToggle = void 0;
+const react_1 = __importDefault(require("react"));
+const useExploreState_1 = require("../../../../hooks/useExploreState");
+const exploreState_1 = require("../../../../providers/exploreState");
+const toggleButtonGroup_1 = require("../../../common/ToggleButtonGroup/toggleButtonGroup");
+const EntityViewToggle = () => {
+    const { exploreDispatch } = (0, useExploreState_1.useExploreState)();
+    const toggleButtons = [
+        {
+            label: "Exact Match",
+            onToggle: () => onChange(exploreState_1.ENTITY_VIEW.EXACT),
+            value: exploreState_1.ENTITY_VIEW.EXACT,
+        },
+        {
+            label: "Related Match",
+            onToggle: () => onChange(exploreState_1.ENTITY_VIEW.RELATED),
+            value: exploreState_1.ENTITY_VIEW.RELATED,
+        },
+    ];
+    /**
+     * Callback fired when toggle button value changes.
+     * @param entityView - Entity list view.
+     */
+    const onChange = (entityView) => {
+        exploreDispatch({
+            payload: entityView,
+            type: exploreState_1.ExploreActionKind.ToggleEntityView,
+        });
+    };
+    return react_1.default.createElement(toggleButtonGroup_1.ToggleButtonGroup, { toggleButtons: toggleButtons });
+};
+exports.EntityViewToggle = EntityViewToggle;

package/lib/components/Table/components/Pagination/pagination.d.ts

@@ -0,0 +1,9 @@
+export interface PaginationProps {
+    canNextPage?: boolean;
+    canPreviousPage?: boolean;
+    currentPage: number;
+    onNextPage: () => void;
+    onPreviousPage: () => void;
+    totalPage: number;
+}
+export declare const Pagination: ({ canNextPage, canPreviousPage, currentPage, onNextPage, onPreviousPage, totalPage, }: PaginationProps) => JSX.Element;

package/lib/components/Table/components/Pagination/pagination.js

@@ -0,0 +1,19 @@
+import { EastRounded, WestRounded } from "@mui/icons-material";
+import { Typography } from "@mui/material";
+import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
+import { IconButton } from "../../../common/IconButton/iconButton";
+import { Stack } from "../../../common/Stack/stack";
+import { Pagination as TablePagination } from "./pagination.styles";
+export const Pagination = ({ canNextPage = true, canPreviousPage = true, currentPage, onNextPage, onPreviousPage, totalPage, }) => {
+    return (React.createElement(TablePagination, { "data-testid": TEST_IDS.TABLE_PAGINATION },
+        React.createElement("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_PAGE },
+            React.createElement(Typography, { variant: "text-body-400" }, "Page "),
+            React.createElement(Typography, { variant: "text-body-500" },
+                currentPage,
+                " of ",
+                totalPage)),
+        React.createElement(Stack, { direction: "row", gap: 2 },
+            React.createElement(IconButton, { color: "secondary", disabled: !canPreviousPage, Icon: WestRounded, onClick: onPreviousPage }),
+            React.createElement(IconButton, { color: "secondary", disabled: !canNextPage, Icon: EastRounded, onClick: onNextPage }))));
+};

package/lib/components/Table/components/Pagination/pagination.stories.d.ts

@@ -0,0 +1,28 @@
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        canNextPage: {
+            control: "boolean";
+        };
+        canPreviousPage: {
+            control: "boolean";
+        };
+        currentPage: {
+            control: "number";
+        };
+        onNextPage: {
+            action: string;
+        };
+        onPreviousPage: {
+            action: string;
+        };
+        totalPage: {
+            control: "number";
+        };
+    };
+    component: ({ canNextPage, canPreviousPage, currentPage, onNextPage, onPreviousPage, totalPage, }: import("./pagination").PaginationProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const PaginationStory: Story;

package/lib/components/Table/components/Pagination/pagination.stories.js

@@ -0,0 +1,24 @@
+import { Pagination } from "./pagination";
+const meta = {
+    argTypes: {
+        canNextPage: { control: "boolean" },
+        canPreviousPage: { control: "boolean" },
+        currentPage: { control: "number" },
+        onNextPage: { action: "nextPage" },
+        onPreviousPage: { action: "previousPage" },
+        totalPage: { control: "number" },
+    },
+    component: Pagination,
+    title: "Components/Table",
+};
+export default meta;
+export const PaginationStory = {
+    args: {
+        canNextPage: true,
+        canPreviousPage: false,
+        currentPage: 1,
+        onNextPage: () => { },
+        onPreviousPage: () => { },
+        totalPage: 25,
+    },
+};

package/lib/components/Table/components/Pagination/pagination.styles.d.ts

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

package/lib/components/Table/components/Pagination/pagination.styles.js

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { TABLET } from "../../../../theme/common/breakpoints";
+export const Pagination = styled.div `
+  align-items: center;
+  background-color: ${({ theme }) => theme.palette.common.white};
+  color: ${({ theme }) => theme.palette.ink.main};
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 20px;
+
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+    justify-content: flex-start;
+  }
+`;

package/lib/components/Table/components/TableBody/hooks/virtualizer/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const VIRTUALIZER_OPTIONS: {
+    overscan: number;
+};

package/lib/components/Table/components/TableBody/hooks/virtualizer/constants.js

@@ -0,0 +1,3 @@
+export const VIRTUALIZER_OPTIONS = {
+    overscan: 20,
+};

package/lib/components/Table/components/TableBody/hooks/virtualizer/hook.d.ts

@@ -0,0 +1,8 @@
+import { Row, RowData } from "@tanstack/react-table";
+import { UseVirtualizer } from "./types";
+/**
+ * A hook to create and manage TanStack window virtualizer for table rows.
+ * @param rows - Rows.
+ * @returns An object containing the virtualizer instance, which manages the visible rows.
+ */
+export declare function useVirtualizer<T extends RowData>(rows: Row<T>[]): UseVirtualizer;

package/lib/components/Table/components/TableBody/hooks/virtualizer/hook.js

@@ -0,0 +1,18 @@
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { useCallback } from "react";
+import { VIRTUALIZER_OPTIONS } from "./constants";
+/**
+ * A hook to create and manage TanStack window virtualizer for table rows.
+ * @param rows - Rows.
+ * @returns An object containing the virtualizer instance, which manages the visible rows.
+ */
+export function useVirtualizer(rows) {
+    const estimateSize = useCallback(() => 100, []);
+    const count = rows.length;
+    const virtualizer = useWindowVirtualizer({
+        ...VIRTUALIZER_OPTIONS,
+        count,
+        estimateSize,
+    });
+    return { virtualizer };
+}

package/lib/components/Table/components/TableBody/hooks/virtualizer/types.d.ts

@@ -0,0 +1,4 @@
+import { Virtualizer } from "@tanstack/react-virtual";
+export interface UseVirtualizer {
+    virtualizer: Virtualizer<Window, Element>;
+}

package/lib/components/Table/components/TableBody/hooks/virtualizer/types.js

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

package/lib/components/Table/components/TableBody/utils.d.ts

@@ -0,0 +1,12 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+import { ROW_DIRECTION } from "../../common/entities";
+/**
+ * Filters and returns the appropriate rows for a virtualized table based on row direction
+ * and grouping state.
+ * Rows are filtered if `ROW_DIRECTION` is `VERTICAL` and the table is grouped.
+ * @param table - Table.
+ * @param rows - Rows.
+ * @param rowDirection - Row direction.
+ * @returns Rows based on the provided row direction and table grouping state.
+ */
+export declare function getAllVirtualizedRows<T extends RowData>(table: Table<T>, rows: Row<T>[], rowDirection: ROW_DIRECTION): Row<T>[];

package/lib/components/Table/components/TableBody/utils.js

@@ -0,0 +1,17 @@
+import { ROW_DIRECTION } from "../../common/entities";
+/**
+ * Filters and returns the appropriate rows for a virtualized table based on row direction
+ * and grouping state.
+ * Rows are filtered if `ROW_DIRECTION` is `VERTICAL` and the table is grouped.
+ * @param table - Table.
+ * @param rows - Rows.
+ * @param rowDirection - Row direction.
+ * @returns Rows based on the provided row direction and table grouping state.
+ */
+export function getAllVirtualizedRows(table, rows, rowDirection) {
+    if (rowDirection === ROW_DIRECTION.DEFAULT)
+        return rows;
+    if (table.getState().grouping.length === 0)
+        return rows;
+    return rows.filter(({ getIsGrouped }) => getIsGrouped());
+}

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/types.d.ts

@@ -0,0 +1,3 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import { MarkdownCellProps } from "../types";
+export type GetValue = CellContext<RowData, MarkdownCellProps>["getValue"];

package/lib/components/Table/components/TableCell/components/MarkdownCell/stories/types.js

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

package/lib/components/Table/components/TableCell/components/MarkdownCell/types.d.ts

@@ -0,0 +1,3 @@
+export type MarkdownCellProps = {
+    values: string;
+};

package/lib/components/Table/components/TableCell/components/MarkdownCell/types.js

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

package/lib/components/TableCreator/common/constants.d.ts

@@ -0,0 +1,6 @@
+import { RowData } from "@tanstack/react-table";
+import { BaseColumnConfig } from "./entities";
+export declare const ACCESSOR_KEYS: {
+    SELECT: string;
+};
+export declare const COLUMN_CONFIGS: Record<string, BaseColumnConfig<RowData, unknown>>;

package/lib/components/TableCreator/common/constants.js

@@ -0,0 +1,19 @@
+import { RowSelectionCell } from "../../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
+export const ACCESSOR_KEYS = {
+    SELECT: "select",
+};
+export const COLUMN_CONFIGS = {
+    SELECT: {
+        columnPinned: false,
+        columnVisible: false,
+        componentConfig: { component: RowSelectionCell },
+        disableHiding: true,
+        disableSorting: true,
+        header: ACCESSOR_KEYS.SELECT,
+        id: ACCESSOR_KEYS.SELECT,
+        meta: {
+            header: "",
+        },
+        width: "max-content",
+    },
+};

package/lib/components/TableCreator/common/entities.d.ts

@@ -0,0 +1,5 @@
+import { ColumnMeta } from "@tanstack/react-table";
+import { ColumnConfig } from "../../../config/entities";
+export interface BaseColumnConfig<T, TValue> extends ColumnConfig<T> {
+    meta?: ColumnMeta<T, TValue>;
+}

package/lib/components/TableCreator/common/entities.js

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

package/lib/components/TableCreator/tableCreator.styles.d.ts

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

package/lib/components/TableCreator/tableCreator.styles.js

@@ -0,0 +1,4 @@
+import styled from "@emotion/styled";
+export const TableCreator = styled.div `
+  position: relative; // Required; when the table mounts, the loading element should not transition in and therefore to position the loading element correctly, the parent container must be styled with position relative.
+`;

package/lib/components/common/Alert/alert.stories.d.ts

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

package/lib/components/common/Alert/alert.stories.js

@@ -0,0 +1,36 @@
+import { Alert } from "./alert";
+export default {
+    argTypes: {
+        children: {
+            control: "text",
+            description: "Inner text",
+        },
+        color: {
+            description: "Color of alert",
+        },
+        icon: {
+            control: "text",
+            description: "Top left icon. If provided will replace severity.",
+        },
+        severity: {
+            description: "Top left predefined icon. Combine with color.",
+        },
+        title: {
+            control: "text",
+            description: "Highlighted text",
+        },
+        variant: {
+            description: "Type of the alert",
+        },
+    },
+    component: Alert,
+    title: "Components/Common/Alert",
+};
+export const AlertStory = {
+    args: {
+        children: "Something certainly happened",
+        color: "warning",
+        severity: "warning",
+        title: "Ouch!",
+    },
+};

package/lib/components/common/Alert/components/AlertText/alertText.styles.d.ts

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

package/lib/components/common/Alert/components/AlertText/alertText.styles.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+export const AlertText = styled.div `
+  ul {
+    padding-left: 24px;
+    margin: 8px 0;
+
+    li {
+      margin: 4px 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+`;

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.d.ts

@@ -0,0 +1,7 @@
+import { AlertProps as MAlertProps } from "@mui/material";
+import { ReactNode } from "react";
+export interface BannerPrimaryProps extends MAlertProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const BannerPrimary: ({ children, className, ...props }: BannerPrimaryProps) => JSX.Element;

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { Alert } from "./bannerPrimary.styles";
+export const BannerPrimary = ({ children, className, ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ }) => {
+    return (React.createElement(Alert, { className: className, color: "primary", elevation: 0, icon: false, variant: "standard", ...props }, children));
+};

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Alert: import("@emotion/styled").StyledComponent<import("@mui/material").AlertProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Alert as MAlert } from "@mui/material";
+import { primaryMain, white } from "../../../../../styles/common/mixins/colors";
+import { textBodySmall400 } from "../../../../../styles/common/mixins/fonts";
+export const Alert = styled(MAlert) `
+  border-radius: 0;
+  justify-content: center;
+  padding: 8px;
+
+  &.MuiAlert-standardPrimary {
+    background-color: ${primaryMain};
+    color: ${white};
+  }
+
+  .MuiAlert-message {
+    ${textBodySmall400};
+    text-align: center;
+  }
+`;

package/lib/components/common/Banner/components/DismissibleBanner/dismissibleBanner.d.ts

@@ -0,0 +1,10 @@
+import { AlertProps as MAlertProps } from "@mui/material";
+import { ElementType, ReactNode } from "react";
+export interface CookieBannerProps extends MAlertProps {
+    Alert?: ElementType;
+    children: ReactNode;
+    className?: string;
+    onDismiss?: () => void;
+    open: boolean;
+}
+export declare const DismissibleBanner: ({ Alert, className, children, onDismiss, open, ...props }: CookieBannerProps) => JSX.Element;

package/lib/components/common/Banner/components/DismissibleBanner/dismissibleBanner.js

@@ -0,0 +1,16 @@
+import { Fade, Alert as MAlert, } from "@mui/material";
+import React, { useEffect, useState } from "react";
+export const DismissibleBanner = ({ Alert = MAlert /* Requires forwardRef to be used as a child of Fade. */, className, children, onDismiss, open, ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ }) => {
+    const [isIn, setIsIn] = useState(false);
+    // Callback fired when the component requests to be closed.
+    const onClose = () => {
+        onDismiss?.();
+        setIsIn(false);
+    };
+    // Sets the open state.
+    useEffect(() => {
+        setIsIn(open);
+    }, [open]);
+    return (React.createElement(Fade, { in: isIn, unmountOnExit: true },
+        React.createElement(Alert, { className: className, onClose: onClose, ...props }, children)));
+};