@databiosphere/findable-ui 0.0.0

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarLabel = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../../../theme/common/typography");
+const SidebarLabel = ({ label }) => {
+    return (react_1.default.createElement(material_1.Typography, { component: "div", variant: typography_1.TEXT_BODY_LARGE_500 }, label));
+};
+exports.SidebarLabel = SidebarLabel;

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.d.ts

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

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarLabelStory = void 0;
+const react_1 = __importDefault(require("react"));
+const sidebarLabel_1 = require("./sidebarLabel");
+exports.default = {
+    argTypes: {
+        label: { control: "text" },
+    },
+    component: sidebarLabel_1.SidebarLabel,
+    title: "Components/Label",
+};
+const SidebarLabelTemplate = (args) => (react_1.default.createElement(sidebarLabel_1.SidebarLabel, Object.assign({}, args)));
+exports.SidebarLabelStory = SidebarLabelTemplate.bind({});
+exports.SidebarLabelStory.args = {
+    label: "Filter",
+};

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface SidebarPositionerProps {
+    children: ReactNode | ReactNode[];
+}
+export declare const SidebarPositioner: ({ children, }: SidebarPositionerProps) => JSX.Element;

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarPositioner = void 0;
+const react_1 = __importDefault(require("react"));
+const selectors_1 = require("../../../../../../common/selectors");
+const useLayoutState_1 = require("../../../../../../hooks/useLayoutState");
+const sidebarPositioner_styles_1 = require("./sidebarPositioner.styles");
+const SidebarPositioner = ({ children, }) => {
+    const { layoutState: { headerHeight }, } = (0, useLayoutState_1.useLayoutState)();
+    return (react_1.default.createElement(sidebarPositioner_styles_1.SidebarPositioner, { headerHeight: headerHeight, id: selectors_1.SIDEBAR_POSITIONER }, children));
+};
+exports.SidebarPositioner = SidebarPositioner;

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface Props {
+    headerHeight: number;
+}
+export declare const SidebarPositioner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarPositioner = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../../../../../styles/common/mixins/breakpoints");
+exports.SidebarPositioner = (0, styled_1.default)("div") `
+  height: 100%;
+  overflow: visible;
+  padding: 16px 0;
+
+  ${breakpoints_1.mediaDesktopSmallUp} {
+    height: ${({ headerHeight }) => `calc(100vh - ${headerHeight}px)`};
+    overflow: auto;
+    padding: ${({ headerHeight }) => headerHeight}px 0 0;
+    position: sticky;
+    top: 0;
+  }
+`;

package/lib/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SidebarTools: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarTools = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../../../../../styles/common/mixins/breakpoints");
+exports.SidebarTools = styled_1.default.div `
+  display: grid;
+  gap: 8px 0;
+  grid-template-columns: 1fr auto;
+  margin: 8px 0;
+  padding: 0 16px;
+
+  .MuiAutocomplete-root {
+    grid-column: 1 / -1; // SearchAllFilters component to utilize full width of the grid.
+  }
+
+  ${breakpoints_1.mediaDesktopSmallUp} {
+    padding: 8px 16px;
+  }
+`;

package/lib/components/Layout/components/Sidebar/sidebar.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface SidebarProps {
+    children: ReactNode | ReactNode[];
+    drawerOpen?: boolean;
+    onDrawerClose?: () => void;
+}
+export declare const Sidebar: ({ children, drawerOpen, onDrawerClose, }: SidebarProps) => JSX.Element;

package/lib/components/Layout/components/Sidebar/sidebar.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const react_1 = __importStar(require("react"));
+const useBreakpointHelper_1 = require("../../../../hooks/useBreakpointHelper");
+const breakpoints_1 = require("../../../../theme/common/breakpoints");
+const sidebarDrawer_1 = require("./components/SidebarDrawer/sidebarDrawer");
+const sidebarPositioner_1 = require("./components/SidebarPositioner/sidebarPositioner");
+const sidebar_styles_1 = require("./sidebar.styles");
+const Sidebar = ({ children, drawerOpen, onDrawerClose, }) => {
+    const desktopSmDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.DESKTOP_SM);
+    const controlledSidebar = typeof drawerOpen === "boolean";
+    const drawerSidebar = controlledSidebar && desktopSmDown; // Sidebar is "temporary" drawer when drawerOpen is defined and breakpoint is smaller than the breakpoint.
+    const Bar = drawerSidebar ? sidebarDrawer_1.SidebarDrawer : sidebar_styles_1.Sidebar;
+    const barProps = drawerSidebar ? { drawerOpen, onDrawerClose } : {};
+    // Closes an open, controlled drawer sidebar with a change of breakpoint.
+    (0, react_1.useEffect)(() => {
+        if (drawerOpen && !desktopSmDown) {
+            onDrawerClose === null || onDrawerClose === void 0 ? void 0 : onDrawerClose();
+        }
+    }, [drawerOpen, onDrawerClose, desktopSmDown]);
+    return (react_1.default.createElement(Bar, Object.assign({}, barProps),
+        react_1.default.createElement(sidebarPositioner_1.SidebarPositioner, null, children)));
+};
+exports.Sidebar = Sidebar;

package/lib/components/Layout/components/Sidebar/sidebar.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from "@storybook/react";
+import { Sidebar } from "./sidebar";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./sidebar").SidebarProps>;
+export default _default;
+declare type Story = StoryObj<typeof Sidebar>;
+export declare const PermanentSidebarStory: Story;
+export declare const TemporaryClosedSidebarStory: Story;
+export declare const TemporaryOpenSidebarStory: Story;

package/lib/components/Layout/components/Sidebar/sidebar.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemporaryOpenSidebarStory = exports.TemporaryClosedSidebarStory = exports.PermanentSidebarStory = void 0;
+const react_1 = __importDefault(require("react"));
+const sidebar_1 = require("./sidebar");
+exports.default = {
+    argTypes: {
+        children: { control: { disable: true } },
+        drawerOpen: { control: { disable: true } },
+        onDrawerClose: { control: { disable: true } },
+    },
+    component: sidebar_1.Sidebar,
+    decorators: [
+        (Story) => (react_1.default.createElement("div", { style: {
+                display: "flex",
+                minHeight: "100vh",
+            } },
+            react_1.default.createElement(Story, null))),
+    ],
+    parameters: {
+        layout: "fullscreen",
+    },
+    title: "Components/Layout/Sidebar",
+};
+exports.PermanentSidebarStory = {
+    args: {
+        children: react_1.default.createElement("div", null),
+    },
+};
+exports.TemporaryClosedSidebarStory = {
+    args: {
+        children: react_1.default.createElement("div", null),
+        drawerOpen: false,
+    },
+};
+exports.TemporaryOpenSidebarStory = {
+    args: {
+        children: react_1.default.createElement("div", null),
+        drawerOpen: true,
+    },
+};

package/lib/components/Layout/components/Sidebar/sidebar.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Sidebar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Sidebar/sidebar.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Sidebar = styled_1.default.div `
+  align-self: stretch;
+  border-right: 1px solid ${({ theme }) => theme.palette.smoke.main};
+  box-sizing: content-box;
+  width: 264px;
+`;

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

@@ -0,0 +1,4 @@
+export declare enum ANCHOR_TARGET {
+    BLANK = "_blank",
+    SELF = "_self"
+}

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ANCHOR_TARGET = void 0;
+var ANCHOR_TARGET;
+(function (ANCHOR_TARGET) {
+    ANCHOR_TARGET["BLANK"] = "_blank";
+    ANCHOR_TARGET["SELF"] = "_self";
+})(ANCHOR_TARGET = exports.ANCHOR_TARGET || (exports.ANCHOR_TARGET = {}));

package/lib/components/Links/common/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns true if the given link is an internal link.
+ * @param link - Link.
+ * @returns true if the given link is an internal link.
+ */
+export declare function isClientSideNavigation(link: string): boolean;

package/lib/components/Links/common/utils.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isClientSideNavigation = void 0;
+/**
+ * Returns true if the given link is an internal link.
+ * @param link - Link.
+ * @returns true if the given link is an internal link.
+ */
+function isClientSideNavigation(link) {
+    return /^\/(?!\/)/.test(link);
+}
+exports.isClientSideNavigation = isClientSideNavigation;

package/lib/components/Links/components/Link/link.d.ts

@@ -0,0 +1,13 @@
+import { LinkProps as MLinkProps } from "@mui/material";
+import { ReactNode } from "react";
+import { ANCHOR_TARGET } from "../../common/entities";
+export interface LinkProps {
+    className?: string;
+    copyable?: boolean;
+    label: ReactNode;
+    noWrap?: MLinkProps["noWrap"];
+    onClick?: () => void;
+    target?: ANCHOR_TARGET;
+    url: string;
+}
+export declare const Link: ({ className, copyable, label, noWrap, onClick, target, url, }: LinkProps) => JSX.Element;

package/lib/components/Links/components/Link/link.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const material_1 = require("@mui/material");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../../common/utils");
+const copyToClipboard_1 = require("../../../common/CopyToClipboard/copyToClipboard");
+const entities_1 = require("../../common/entities");
+const utils_2 = require("../../common/utils");
+const Link = ({ className, copyable = false, label, noWrap = false, onClick, target, url, }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, (0, utils_2.isClientSideNavigation)(url) ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(link_1.default, { href: url, legacyBehavior: true, passHref: true },
+            react_1.default.createElement(material_1.Link, { className: className, rel: "noopener", noWrap: noWrap, target: target || entities_1.ANCHOR_TARGET.SELF, onClick: onClick }, label)),
+        copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url }))) : (0, utils_1.isValidUrl)(url) ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.Link, { className: className, href: url, rel: "noopener noreferrer", noWrap: noWrap, target: target || entities_1.ANCHOR_TARGET.BLANK, onClick: onClick }, label),
+        copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url }))) : (label)));
+};
+exports.Link = Link;

package/lib/components/Links/links.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { LinkProps } from "./components/Link/link";
+export interface LinksProps {
+    divider?: ReactNode;
+    links: LinkProps[];
+}
+export declare const Links: ({ divider, links }: LinksProps) => JSX.Element;

package/lib/components/Links/links.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Links = void 0;
+const react_1 = __importDefault(require("react"));
+const link_1 = require("./components/Link/link");
+const Links = ({ divider, links }) => {
+    const lastLinkIndex = links.length - 1;
+    return (react_1.default.createElement(react_1.default.Fragment, null, links.map(({ copyable, label, noWrap, target, url }, i) => {
+        const showDivider = i < lastLinkIndex && divider;
+        return (react_1.default.createElement("span", { key: `${url}${i}` },
+            react_1.default.createElement(link_1.Link, { copyable: copyable, label: label, noWrap: noWrap, target: target, url: url }),
+            showDivider && divider));
+    })));
+};
+exports.Links = Links;

package/lib/components/Links/links.stories.d.ts

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

package/lib/components/Links/links.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinksStory = void 0;
+const react_1 = __importDefault(require("react"));
+const links_1 = require("./links");
+exports.default = {
+    argTypes: {
+        links: { control: "array" },
+    },
+    component: links_1.Links,
+    title: "Components/Deprecated/Links",
+};
+const LinksTemplate = (args) => (react_1.default.createElement(links_1.Links, Object.assign({}, args)));
+const FACEBOOK_URL = "https://www.facebook.com";
+const GOOGLE_URL = "https://www.google.com";
+const TWITTER_URL = "https://www.twitter.com";
+exports.LinksStory = LinksTemplate.bind({});
+exports.LinksStory.args = {
+    links: [
+        { label: "Facebook", url: FACEBOOK_URL },
+        { label: "Google", url: GOOGLE_URL },
+        { label: "Twitter", url: TWITTER_URL },
+    ],
+};

package/lib/components/Loading/loading.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { SvgIconProps } from "@mui/material";
+import { PaperPanelStyle } from "../common/Paper/paper";
+/**
+ * Loading component.
+ * For the loading component to consume its parent's container the component should be a direct descendant of the parent container.
+ */
+export declare type LoadingPanelStyle = keyof typeof LOADING_PANEL_STYLE | PaperPanelStyle;
+/**
+ * Possible set of loading variant "panel" style values.
+ */
+export declare enum LOADING_PANEL_STYLE {
+    INHERIT = "INHERIT"
+}
+export interface LoadingProps {
+    iconSize?: SvgIconProps["fontSize"];
+    loading: boolean;
+    panelStyle?: LoadingPanelStyle;
+    text?: string;
+}
+export declare const Loading: ({ iconSize, loading, panelStyle, text, }: LoadingProps) => JSX.Element | null;

package/lib/components/Loading/loading.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = exports.LOADING_PANEL_STYLE = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const loadingIcon_1 = require("../common/CustomIcon/components/LoadingIcon/loadingIcon");
+const paper_1 = require("../common/Paper/paper");
+const loading_styles_1 = require("./loading.styles");
+/**
+ * Possible set of loading variant "panel" style values.
+ */
+var LOADING_PANEL_STYLE;
+(function (LOADING_PANEL_STYLE) {
+    LOADING_PANEL_STYLE["INHERIT"] = "INHERIT";
+})(LOADING_PANEL_STYLE = exports.LOADING_PANEL_STYLE || (exports.LOADING_PANEL_STYLE = {}));
+const Loading = ({ iconSize = "large", loading, panelStyle = paper_1.PAPER_PANEL_STYLE.ROUNDED, text, }) => {
+    return (react_1.default.createElement(material_1.Fade, { in: loading, mountOnEnter: true, onEnter: (node) => onFadeEnter(node), onExited: (node) => onFadeExited(node), timeout: 300, unmountOnExit: true },
+        react_1.default.createElement(loading_styles_1.LoadingPositioner, { panelStyle: panelStyle },
+            react_1.default.createElement(loading_styles_1.LoadingPaper, { panelStyle: panelStyle },
+                react_1.default.createElement(loadingIcon_1.LoadingIcon, { color: "primary", fontSize: iconSize }),
+                text && react_1.default.createElement(material_1.Typography, { variant: "text-body-400" }, text)))));
+};
+exports.Loading = Loading;
+/**
+ * Callback fired before the "entering" status is applied.
+ * The loading element's parent element is assigned position style "relative" for positioning of the loading element.
+ * @param node - Loading element.
+ */
+function onFadeEnter(node) {
+    const parentEl = node.parentElement;
+    if (parentEl)
+        parentEl.style.position = "relative";
+}
+/**
+ * Callback fired after the "exited" status is applied.
+ * Removes the loading element's parent element position styles.
+ * @param node - Loading element.
+ */
+function onFadeExited(node) {
+    const parentEl = node.parentElement;
+    if (parentEl)
+        parentEl.style.position = "";
+}

package/lib/components/Loading/loading.stories.d.ts

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

package/lib/components/Loading/loading.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingStory = void 0;
+const react_1 = __importDefault(require("react"));
+const paper_1 = require("../common/Paper/paper");
+const loading_1 = require("./loading");
+exports.default = {
+    argTypes: {
+        className: { control: { disabled: true } },
+        loading: { control: "boolean" },
+        panelStyle: {
+            control: "select",
+            options: Array.from(Object.keys(paper_1.PAPER_PANEL_STYLE)),
+        },
+        text: { control: "text" },
+    },
+    component: loading_1.Loading,
+    decorators: [
+        (Story) => (react_1.default.createElement("div", { style: {
+                backgroundColor: "white",
+                borderRadius: 8,
+                height: 600,
+                width: 600,
+            } },
+            react_1.default.createElement(Story, null))),
+    ],
+    title: "Components/Communication/Loading",
+};
+const LoadingTemplate = (args) => (react_1.default.createElement(loading_1.Loading, Object.assign({}, args)));
+exports.LoadingStory = LoadingTemplate.bind({});
+exports.LoadingStory.args = {
+    loading: true,
+};

package/lib/components/Loading/loading.styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { LoadingPanelStyle } from "./loading";
+interface Props {
+    panelStyle: LoadingPanelStyle;
+}
+export declare const LoadingPositioner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LoadingPaper: import("@emotion/styled").StyledComponent<import("../common/Paper/paper").PaperProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Props, {}, {}>;
+export {};

package/lib/components/Loading/loading.styles.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingPaper = exports.LoadingPositioner = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../theme/common/breakpoints");
+const paper_1 = require("../common/Paper/paper");
+const loading_1 = require("./loading");
+exports.LoadingPositioner = styled_1.default.div `
+  display: grid;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 10;
+
+  // Style "Inherit" - inherit border radius from parent container.
+  ${({ panelStyle }) => panelStyle === loading_1.LOADING_PANEL_STYLE.INHERIT &&
+    (0, react_1.css) `
+      border-radius: inherit;
+    `};
+`;
+exports.LoadingPaper = (0, styled_1.default)(paper_1.Paper) `
+  background-color: rgba(255, 255, 255, 0.8);
+  display: grid;
+  gap: 16px;
+  justify-items: center;
+  place-content: center center;
+
+  // Style "Flat" paper.
+  ${({ panelStyle }) => panelStyle === paper_1.PAPER_PANEL_STYLE.FLAT &&
+    (0, react_1.css) `
+      border-left: none;
+      border-radius: 0;
+      border-right: none;
+      box-shadow: none;
+    `};
+
+  // Style "Fluid" paper.
+  ${({ panelStyle, theme }) => panelStyle === paper_1.PAPER_PANEL_STYLE.FLUID &&
+    (0, react_1.css) `
+      border-radius: 8px;
+
+      ${theme.breakpoints.down(breakpoints_1.TABLET)} {
+        border-left: none;
+        border-radius: 0;
+        border-right: none;
+        box-shadow: none;
+      }
+    `};
+
+  // Style "Inherit" - borderless with no elevation, inherit border-radius from parent container.
+  ${({ panelStyle }) => panelStyle === loading_1.LOADING_PANEL_STYLE.INHERIT &&
+    (0, react_1.css) `
+      border: 0;
+      border-radius: inherit;
+      box-shadow: none;
+    `};
+
+  // No style - borderless with no elevation.
+  ${({ panelStyle }) => panelStyle === paper_1.PAPER_PANEL_STYLE.NONE &&
+    (0, react_1.css) `
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+    `};
+
+  // Style "Rounded" paper.
+  ${({ panelStyle }) => panelStyle === paper_1.PAPER_PANEL_STYLE.ROUNDED &&
+    (0, react_1.css) `
+      border-radius: 8px;
+    `};
+`;

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface LoginProps {
+    isGoogle?: boolean;
+    termsOfService?: ReactNode;
+    text?: ReactNode;
+    title: string;
+    warning?: ReactNode;
+}
+export declare const Login: ({ isGoogle, termsOfService, text, title, warning, }: LoginProps) => JSX.Element;