@databiosphere/findable-ui 34.1.0 → 35.0.2

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/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/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"];

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/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/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;