@databiosphere/findable-ui 23.0.0 → 25.0.0

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/Table/components/Pagination/pagination.js

@@ -1,5 +1,4 @@
-import EastRoundedIcon from "@mui/icons-material/EastRounded";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
+import { EastRounded, WestRounded } from "@mui/icons-material";
 import { Typography } from "@mui/material";
 import React from "react";
 import { IconButton } from "../../../common/IconButton/iconButton";
@@ -14,6 +13,6 @@ export const Pagination = ({ canNextPage = true, canPreviousPage = true, current
                 " of ",
                 totalPage)),
         React.createElement(Stack, { direction: "row", gap: 2 },
-            React.createElement(IconButton, { color: "secondary", disabled: !canPreviousPage, Icon: WestRoundedIcon, onClick: onPreviousPage }),
-            React.createElement(IconButton, { color: "secondary", disabled: !canNextPage, Icon: EastRoundedIcon, onClick: onNextPage }))));
+            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/TableHead/tableHead.js

@@ -1,4 +1,4 @@
-import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
+import { SouthRounded } from "@mui/icons-material";
 import { TableHead as MTableHead, TableRow as MTableRow, TableCell, TableSortLabel, } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
@@ -14,6 +14,6 @@ export const TableHead = ({ rowDirection, tableInstance, }) => {
                 const { columnDef, getIsGrouped, getIsSorted } = column;
                 const annotation = columnDef.meta?.annotation;
                 return getIsGrouped() ? null : (React.createElement(TableCell, { key: id, align: getTableCellAlign(column), padding: getTableCellPadding(id) },
-                    React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label }, shouldSortColumn(tableInstance, column) ? (React.createElement(TableSortLabel, { IconComponent: SouthRoundedIcon, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext())))));
+                    React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label }, shouldSortColumn(tableInstance, column) ? (React.createElement(TableSortLabel, { IconComponent: SouthRounded, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext())))));
             })))))));
 };

package/lib/components/Table/table.js

@@ -1,6 +1,6 @@
 import { TableContainer } from "@mui/material";
 import { getCoreRowModel, getFacetedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { Fragment, useCallback, useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM, PAGINATION_DIRECTION, SORT_DIRECTION, } from "../../common/analytics/entities";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
@@ -10,7 +10,7 @@ import { useScroll } from "../../hooks/useScroll";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { DEFAULT_PAGINATION_STATE } from "../../providers/exploreState/initializer/constants";
 import { TABLET } from "../../theme/common/breakpoints";
-import { FluidPaper, GridPaper } from "../common/Paper/paper.styles";
+import { Loading, LOADING_PANEL_STYLE } from "../Loading/loading";
 import { NoResults } from "../NoResults/noResults";
 import { getColumnTrackSizing } from "../TableCreator/options/columnTrackSizing/utils";
 import { ROW_DIRECTION } from "./common/entities";
@@ -38,7 +38,7 @@ export const TableComponent = ({ columns, getRowId, items, listView, tableOption
     const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
     const exploreMode = useExploreMode();
     const { exploreDispatch, exploreState } = useExploreState();
-    const { entityPageState, filterState, listItems, loading, paginationState, rowPreview, tabValue, } = exploreState;
+    const { entityPageState, filterState, listItems, loading = false, paginationState, rowPreview, tabValue, } = exploreState;
     const { columnVisibility, grouping, rowSelection, sorting } = entityPageState[tabValue];
     const { currentPage, pages, pageSize, rows: pageCount } = paginationState;
     const { disablePagination = false } = listView || {};
@@ -200,14 +200,14 @@ export const TableComponent = ({ columns, getRowId, items, listView, tableOption
     function canPreviousPage() {
         return currentPage > 1;
     }
-    return noResults ? (React.createElement(NoResults, { Paper: FluidPaper, title: "No Results found" })) : (React.createElement(FluidPaper, { variant: "table" },
-        React.createElement(GridPaper, null,
-            React.createElement(TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: tableInstance }),
-            React.createElement(TableContainer, null,
-                React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(getVisibleFlatColumns()) },
-                    React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
-                    React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableInstance: tableInstance }))),
-            !disablePagination && (React.createElement(DXPagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages ?? 0 })))));
+    return noResults ? (React.createElement(NoResults, { Paper: null, title: "No Results found" })) : (React.createElement(Fragment, null,
+        React.createElement(TableToolbar, { listView: listView, rowDirection: rowDirection, tableInstance: tableInstance }),
+        React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+        React.createElement(TableContainer, null,
+            React.createElement(GridTable, { collapsable: true, gridTemplateColumns: getColumnTrackSizing(getVisibleFlatColumns()) },
+                React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
+                React.createElement(TableBody, { rows: rows, rowDirection: rowDirection, tableInstance: tableInstance }))),
+        !disablePagination && (React.createElement(DXPagination, { canNextPage: canNextPage(), canPreviousPage: canPreviousPage(), currentPage: currentPage, onNextPage: handleTableNextPage, onPreviousPage: handleTablePreviousPage, totalPage: pages ?? 0 }))));
 };
 // TODO(Dave) review whether memo is necessary - flash between tabs / loading state.
 export const Table = React.memo(TableComponent);

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.js

@@ -1,13 +1,10 @@
 import React, { useMemo } from "react";
-import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
-import { Loading } from "../Loading/loading";
 import { COLUMN_DEF } from "../Table/common/columnDef";
 import { arrIncludesSome, sortingFn } from "../Table/common/utils";
 import { Table } from "../Table/table";
 import { buildBaseColumnDef } from "./common/utils";
 import { useTableOptions } from "./options/hook";
-import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 const createCell = (config) => function CellCreator(cellContext) {
     return (React.createElement(ComponentCreator, { components: [config.componentConfig], response: cellContext.row.original, viewContext: { cellContext } }));
 };
@@ -27,7 +24,5 @@ export const TableCreator = ({ columns, getRowId, items, listView, loading, }) =
         /* Initialize column definitions with the "row selection" column */
         COLUMN_DEF.ROW_SELECTION,
     ]), [columns]);
-    return (React.createElement(TableCreatorContainer, null,
-        React.createElement(Loading, { appear: false, loading: loading || false, panelStyle: PAPER_PANEL_STYLE.FLUID }),
-        React.createElement(Table, { columns: columnDefs, getRowId: getRowId, items: items, listView: listView, loading: loading, tableOptions: tableOptions })));
+    return (React.createElement(Table, { columns: columnDefs, getRowId: getRowId, items: items, listView: listView, loading: loading, tableOptions: tableOptions }));
 };

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/AnchorLink/anchorLink.js

@@ -1,7 +1,7 @@
-import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
+import { LinkRounded } from "@mui/icons-material";
 import React from "react";
 import { AnchorLink as Link } from "./anchorLink.styles";
 export const AnchorLink = ({ anchorLink, className, }) => {
     return (React.createElement(Link, { "aria-label": anchorLink, className: className, href: `#${anchorLink}` },
-        React.createElement(LinkRoundedIcon, { fontSize: "xsmall" })));
+        React.createElement(LinkRounded, { fontSize: "xsmall" })));
 };

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)));
+};

package/lib/components/common/Banner/components/SessionTimeout/sessionTimeout.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Banner: import("@emotion/styled").StyledComponent<import("../BannerPrimary/bannerPrimary").BannerPrimaryProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/common/Banner/components/SessionTimeout/sessionTimeout.styles.js

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+import { mediaDesktopUp } from "../../../../../styles/common/mixins/breakpoints";
+import { BannerPrimary } from "../BannerPrimary/bannerPrimary";
+export const Banner = styled(BannerPrimary) `
+  gap: 12px;
+  padding: 8px 12px;
+
+  ${mediaDesktopUp} {
+    padding: 8px 16px;
+  }
+
+  .MuiAlert-message {
+    align-self: center;
+    flex: 1;
+  }
+
+  .MuiAlert-action {
+    margin: -8px;
+    padding: 0;
+  }
+`;

package/lib/components/common/Breadcrumbs/breadcrumbs.js

@@ -1,8 +1,8 @@
-import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
+import { ChevronRightRounded } from "@mui/icons-material";
 import { Link, Breadcrumbs as MBreadcrumbs, Typography } from "@mui/material";
 import NLink from "next/link";
 import React from "react";
 import { LINK_PROPS } from "./constants";
-export const Breadcrumbs = ({ breadcrumbs, className, Separator = React.createElement(ChevronRightRoundedIcon, { fontSize: "xxsmall" }), }) => {
+export const Breadcrumbs = ({ breadcrumbs, className, Separator = React.createElement(ChevronRightRounded, { fontSize: "xxsmall" }), }) => {
     return (React.createElement(React.Fragment, null, breadcrumbs.length > 0 ? (React.createElement(MBreadcrumbs, { className: className, separator: Separator }, breadcrumbs.map(({ path, text }, b) => path ? (React.createElement(Link, { ...LINK_PROPS, component: NLink, key: b, href: path }, text)) : (React.createElement(Typography, { key: `${path}${b}`, maxWidth: 180, noWrap: true }, text))))) : null));
 };

package/lib/components/common/Breadcrumbs/typeGuard.d.ts

@@ -0,0 +1,13 @@
+import { Breadcrumb } from "./breadcrumbs";
+/**
+ * Checks if the given value is an array of breadcrumbs.
+ * @param value - Value.
+ * @returns True if the value is an array of breadcrumbs.
+ */
+export declare function isBreadcrumbArray(value: unknown): value is Breadcrumb[];
+/**
+ * Checks if the given value is a breadcrumb.
+ * @param value - Value.
+ * @returns True if the value is a breadcrumb.
+ */
+export declare function isBreadcrumb(value: unknown): value is Breadcrumb;

package/lib/components/common/Breadcrumbs/typeGuard.js

@@ -0,0 +1,23 @@
+/**
+ * Checks if the given value is an array of breadcrumbs.
+ * @param value - Value.
+ * @returns True if the value is an array of breadcrumbs.
+ */
+export function isBreadcrumbArray(value) {
+    return Array.isArray(value) && value.every(isBreadcrumb);
+}
+/**
+ * Checks if the given value is a breadcrumb.
+ * @param value - Value.
+ * @returns True if the value is a breadcrumb.
+ */
+export function isBreadcrumb(value) {
+    if (value === null)
+        return false;
+    if (typeof value !== "object")
+        return false;
+    if ("path" in value && "text" in value) {
+        return typeof value.path === "string" && typeof value.text === "string";
+    }
+    return false;
+}

package/lib/components/common/Button/components/DropdownButton/dropdownButton.js

@@ -1,6 +1,6 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { DropdownButton as Button } from "./dropdownButton.styles";
 export const DropdownButton = ({ children, disabled = false, open = false, ...props /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */ }) => {
-    return (React.createElement(Button, { disabled: disabled, EndIcon: ArrowDropDownRoundedIcon, open: open, ...props }, children));
+    return (React.createElement(Button, { disabled: disabled, EndIcon: ArrowDropDownRounded, open: open, ...props }, children));
 };

package/lib/components/common/Button/components/LoginButton/loginButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "../../button";
+export type LoginButtonProps = Exclude<ButtonProps, "StartIcon">;
+export declare const LoginButton: ({ children, ...props }: LoginButtonProps) => JSX.Element;

package/lib/components/common/Button/components/LoginButton/loginButton.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { LoginButton as Button, LoginButtonText } from "./loginButton.styles";
+export const LoginButton = ({ children, ...props }) => {
+    return (React.createElement(Button, { fullWidth: true, ...props },
+        React.createElement(LoginButtonText, null, children)));
+};

package/lib/components/common/Button/components/LoginButton/loginButton.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const LoginButton: import("@emotion/styled").StyledComponent<Omit<import("../../button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const LoginButtonText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/common/Button/components/LoginButton/loginButton.styles.js

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { ButtonSecondary } from "../ButtonSecondary/buttonSecondary";
+export const LoginButton = styled(ButtonSecondary) `
+  .MuiButton-endIcon {
+    margin-right: -6px;
+  }
+`;
+export const LoginButtonText = styled.span `
+  flex: 1;
+  text-align: left;
+`;

package/lib/components/common/Button/components/NavigationButton/navigationButton.js

@@ -1,6 +1,6 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
 import { Button } from "./navigationButton.styles";
 export const NavigationButton = ({ children, isActive, ...props /* Spread props to allow for Button specific props ButtonProps e.g. "onClick". */ }) => {
-    return (React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: isActive, variant: "nav", ...props }, children));
+    return (React.createElement(Button, { EndIcon: ArrowDropDownRounded, isActive: isActive, variant: "nav", ...props }, children));
 };

package/lib/components/common/CopyToClipboard/copyToClipboard.js

@@ -1,4 +1,4 @@
-import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import { ContentCopyRounded } from "@mui/icons-material";
 import { IconButton, Tooltip } from "@mui/material";
 import copy from "copy-to-clipboard";
 import React, { useEffect } from "react";
@@ -23,5 +23,5 @@ export const CopyToClipboard = ({ copyStr, }) => {
     }, [showTooltip]);
     return (React.createElement(Tooltip, { arrow: true, disableHoverListener: true, open: showTooltip, placement: "top", title: "Link Copied" },
         React.createElement(IconButton, { onClick: () => onCopyToClipboard(copyStr), size: "xxsmall" },
-            React.createElement(ContentCopyRoundedIcon, { color: "primary", fontSize: "small" }))));
+            React.createElement(ContentCopyRounded, { color: "primary", fontSize: "small" }))));
 };

package/lib/components/common/Dialog/components/DialogTitle/dialogTitle.js

@@ -1,9 +1,9 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton, DialogTitle as MDialogTitle } from "@mui/material";
 import React from "react";
 export const DialogTitle = ({ className, onClose, title, }) => {
     return (React.createElement(MDialogTitle, { className: className },
         title,
         onClose && (React.createElement(IconButton, { color: "ink", edge: "end", onClick: onClose, size: "xsmall" },
-            React.createElement(CloseRoundedIcon, null)))));
+            React.createElement(CloseRounded, null)))));
 };

package/lib/components/common/Drawer/components/DrawerTitle/drawerTitle.js

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { IconButton } from "@mui/material";
 import React from "react";
 import { DrawerTitle as Title } from "./drawerTitle.styles";
@@ -6,5 +6,5 @@ export const DrawerTitle = ({ className, onClose, title, }) => {
     return (React.createElement(Title, { className: className },
         title,
         onClose && (React.createElement(IconButton, { color: "ink", edge: "end", onClick: onClose, size: "xsmall" },
-            React.createElement(CloseRoundedIcon, { color: "inkLight", fontSize: "small" })))));
+            React.createElement(CloseRounded, { color: "inkLight", fontSize: "small" })))));
 };

package/lib/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.d.ts

@@ -1,3 +1,2 @@
-export declare const DropDownIcon: ({ ...props }: {
-    [x: string]: any;
-}) => JSX.Element;
+import { SvgIconProps } from "@mui/material";
+export declare const DropDownIcon: ({ ...props }: SvgIconProps) => JSX.Element;

package/lib/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.js

@@ -1,5 +1,5 @@
-import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import { ArrowDropDownRounded } from "@mui/icons-material";
 import React from "react";
-export const DropDownIcon = ({ ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */ }) => {
-    return (React.createElement(ArrowDropDownRoundedIcon, { color: "inkMain", fontSize: "small", ...props }));
+export const DropDownIcon = ({ ...props /* MuiSvgIconProps */ }) => {
+    return React.createElement(ArrowDropDownRounded, { color: "inkMain", fontSize: "small", ...props });
 };

package/lib/components/common/Form/components/UploadFile/uploadFile.js

@@ -1,4 +1,4 @@
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CloseRounded } from "@mui/icons-material";
 import { FormHelperText, Typography } from "@mui/material";
 import React from "react";
 import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
@@ -17,7 +17,7 @@ export const UploadFile = ({ attachmentName, attachmentRejected, attachmentRejec
                 "Drag or ",
                 React.createElement(Underline, null, "Click"),
                 " to attach file"))),
-            isAttached && React.createElement(CloseRoundedIcon, { fontSize: "small" })),
+            isAttached && React.createElement(CloseRounded, { fontSize: "small" })),
         error && (React.createElement(FormHelperText, null,
             React.createElement(ErrorIcon, { fontSize: "xxsmall" }),
             getErrorMessage(attachmentRejections)))));

package/lib/components/common/IconButton/components/LoadingIconButton/loadingIconButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Mock "loading" icon button - a placeholder element styled like a primary icon button without the use of a button element.
+ */
+export declare const LoadingIconButton: () => JSX.Element;

package/lib/components/common/IconButton/components/LoadingIconButton/loadingIconButton.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { LoadingIcon } from "../../../CustomIcon/components/LoadingIcon/loadingIcon";
+import { MockIconButtonPrimary } from "../../iconButton.styles";
+/**
+ * Mock "loading" icon button - a placeholder element styled like a primary icon button without the use of a button element.
+ */
+export const LoadingIconButton = () => {
+    return (React.createElement(MockIconButtonPrimary, null,
+        React.createElement(LoadingIcon, { fontSize: "small" })));
+};

package/lib/components/common/IconButton/components/LoadingIconButton/loadingIconButton.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, unknown>;
+export default _default;
+export declare const LoadingIconButtonStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, unknown>;

package/lib/components/common/IconButton/components/LoadingIconButton/loadingIconButton.stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { LoadingIconButton } from "./loadingIconButton";
+export default {
+    component: LoadingIconButton,
+    title: "Components/Common/IconButton/Download",
+};
+const LoadingIconButtonTemplate = () => React.createElement(LoadingIconButton, null);
+export const LoadingIconButtonStory = LoadingIconButtonTemplate.bind({});
+LoadingIconButtonStory.args = {};

package/lib/components/common/IconButton/iconButton.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const Button: 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;
 } & Props, {}, {}>;
 export {};