@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.js

@@ -1,57 +1,27 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExploreViewLink = void 0;
-const link_1 = __importDefault(require("next/link"));
-const react_1 = __importStar(require("react"));
-const useExploreState_1 = require("../../../../../../hooks/useExploreState");
-const exploreState_1 = require("../../../../../../providers/exploreState");
-const entities_1 = require("../../../../common/entities");
+import Link from "next/link";
+import React, { useCallback } from "react";
+import { useExploreState } from "../../../../../../hooks/useExploreState";
+import { ExploreActionKind, } from "../../../../../../providers/exploreState";
+import { ANCHOR_TARGET, } from "../../../../common/entities";
 const PARAM_FILTER = "filter";
 const PARAM_SORTING = "sorting";
-const ExploreViewLink = ({ className, label, onClick, target = entities_1.ANCHOR_TARGET.SELF, url, }) => {
-    const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)();
+export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TARGET.SELF, url, }) => {
+    const { exploreDispatch, exploreState } = useExploreState();
     if (!isValidExploreURL(url, exploreState)) {
         throwError(url);
     }
-    const onNavigate = (0, react_1.useCallback)(() => {
+    const onNavigate = useCallback(() => {
         const entityListType = getEntityListType(url.href);
         const filters = getSelectedFilters(url.query);
         const sorting = getSorting(url.query);
         exploreDispatch({
             payload: { entityListType, filters, sorting },
-            type: exploreState_1.ExploreActionKind.UpdateEntityFilters,
+            type: ExploreActionKind.UpdateEntityFilters,
         });
-        onClick === null || onClick === void 0 ? void 0 : onClick();
+        onClick?.();
     }, [exploreDispatch, onClick, url]);
-    return (react_1.default.createElement(link_1.default, { className: className, href: url.href, onClick: onNavigate, rel: "noopener", target: target }, label));
+    return (React.createElement(Link, { className: className, href: url.href, onClick: onNavigate, rel: "noopener", target: target }, label));
 };
-exports.ExploreViewLink = ExploreViewLink;
 /**
  * Returns the entity list type "entityListType" inferred from the given href.
  * @param href - Href.

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

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

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

@@ -1,38 +1,31 @@
-"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 exploreViewLink_1 = require("./components/ExploreViewLink/exploreViewLink");
-const Link = ({ className, copyable = false, label, noWrap = false, onClick, target, url, }) => {
-    if ((0, utils_2.isURLObjectWithHrefAndQuery)(url)) {
+import { Link as MLink, Typography as MTypography, } from "@mui/material";
+import NLink from "next/link";
+import React from "react";
+import { isValidUrl } from "../../../../common/utils";
+import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
+import { ANCHOR_TARGET } from "../../common/entities";
+import { isClientSideNavigation, isURLObjectWithHrefAndQuery, isURLString, } from "../../common/utils";
+import { ExploreViewLink } from "./components/ExploreViewLink/exploreViewLink";
+export const Link = ({ className, copyable = false, label, noWrap = false, onClick, target, TypographyProps, url, }) => {
+    if (isURLObjectWithHrefAndQuery(url)) {
         /* Internal navigation - explore link */
-        return (react_1.default.createElement(exploreViewLink_1.ExploreViewLink, { className: className, label: label, onClick: onClick, target: target, url: url }));
+        return (React.createElement(ExploreViewLink, { className: className, label: label, onClick: onClick, target: target, url: url }));
     }
-    if ((0, utils_2.isURLString)(url)) {
-        if ((0, utils_2.isClientSideNavigation)(url)) {
+    if (isURLString(url)) {
+        if (isClientSideNavigation(url)) {
             /* Client-side navigation */
-            return (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 })));
+            return (React.createElement(React.Fragment, null,
+                React.createElement(NLink, { href: url, legacyBehavior: true, passHref: true },
+                    React.createElement(MLink, { className: className, rel: "noopener", noWrap: noWrap, target: target || ANCHOR_TARGET.SELF, onClick: onClick, ...TypographyProps }, label)),
+                copyable && React.createElement(CopyToClipboard, { copyStr: url })));
         }
-        if ((0, utils_1.isValidUrl)(url)) {
+        if (isValidUrl(url)) {
             /* External navigation */
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Link, { className: className, href: url, noWrap: noWrap, onClick: onClick, rel: "noopener noreferrer", target: target || entities_1.ANCHOR_TARGET.BLANK }, label),
-                copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url })));
+            return (React.createElement(React.Fragment, null,
+                React.createElement(MLink, { className: className, href: url, noWrap: noWrap, onClick: onClick, rel: "noopener noreferrer", target: target || ANCHOR_TARGET.BLANK, ...TypographyProps }, label),
+                copyable && React.createElement(CopyToClipboard, { copyStr: url })));
         }
     }
     /* Invalid URL */
-    return react_1.default.createElement(react_1.default.Fragment, null, label);
+    return (React.createElement(MTypography, { component: "span", variant: "inherit", ...TypographyProps }, label));
 };
-exports.Link = Link;

package/lib/components/Links/links.js

@@ -1,18 +1,11 @@
-"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 }) => {
+import React from "react";
+import { Link } from "./components/Link/link";
+export 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) => {
+    return (React.createElement(React.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 }),
+        return (React.createElement("span", { key: `${url}${i}` },
+            React.createElement(Link, { copyable: copyable, label: label, noWrap: noWrap, target: target, url: url }),
             showDivider && divider));
     })));
 };
-exports.Links = Links;

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

@@ -1,24 +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.LinksStory = void 0;
-const react_1 = __importDefault(require("react"));
-const links_1 = require("./links");
-exports.default = {
+import React from "react";
+import { Links } from "./links";
+export default {
     argTypes: {
         links: { control: "array" },
     },
-    component: links_1.Links,
+    component: Links,
     title: "Components/Deprecated/Links",
 };
-const LinksTemplate = (args) => (react_1.default.createElement(links_1.Links, Object.assign({}, args)));
+const LinksTemplate = (args) => (React.createElement(Links, { ...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 = {
+export const LinksStory = LinksTemplate.bind({});
+LinksStory.args = {
     links: [
         { label: "Facebook", url: FACEBOOK_URL },
         { label: "Google", url: GOOGLE_URL },

package/lib/components/Loading/loading.js

@@ -1,29 +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.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");
+import { Fade, Typography } from "@mui/material";
+import React from "react";
+import { LoadingIcon } from "../common/CustomIcon/components/LoadingIcon/loadingIcon";
+import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { LoadingPaper, LoadingPositioner } from "./loading.styles";
 /**
  * Possible set of loading variant "panel" style values.
  */
-var LOADING_PANEL_STYLE;
+export 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 = ({ appear = true, iconSize = "large", loading, panelStyle = paper_1.PAPER_PANEL_STYLE.ROUNDED, text, }) => {
-    return (react_1.default.createElement(material_1.Fade, { appear: appear, 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)))));
+})(LOADING_PANEL_STYLE || (LOADING_PANEL_STYLE = {}));
+export const Loading = ({ appear = true, iconSize = "large", loading, panelStyle = PAPER_PANEL_STYLE.ROUNDED, text, }) => {
+    return (React.createElement(Fade, { appear: appear, in: loading, mountOnEnter: true, onEnter: (node) => onFadeEnter(node), onExited: (node) => onFadeExited(node), timeout: 300, unmountOnExit: true },
+        React.createElement(LoadingPositioner, { panelStyle: panelStyle },
+            React.createElement(LoadingPaper, { panelStyle: panelStyle },
+                React.createElement(LoadingIcon, { color: "primary", fontSize: iconSize }),
+                text && React.createElement(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.

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

@@ -1,36 +1,30 @@
-"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 = {
+import React from "react";
+import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { Loading } from "./loading";
+export default {
     argTypes: {
         className: { control: { disabled: true } },
         loading: { control: "boolean" },
         panelStyle: {
             control: "select",
-            options: Array.from(Object.keys(paper_1.PAPER_PANEL_STYLE)),
+            options: Array.from(Object.keys(PAPER_PANEL_STYLE)),
         },
         text: { control: "text" },
     },
-    component: loading_1.Loading,
+    component: Loading,
     decorators: [
-        (Story) => (react_1.default.createElement("div", { style: {
+        (Story) => (React.createElement("div", { style: {
                 backgroundColor: "white",
                 borderRadius: 8,
                 height: 600,
                 width: 600,
             } },
-            react_1.default.createElement(Story, null))),
+            React.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 = {
+const LoadingTemplate = (args) => (React.createElement(Loading, { ...args }));
+export const LoadingStory = LoadingTemplate.bind({});
+LoadingStory.args = {
     loading: true,
 };

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

@@ -1,15 +1,9 @@
-"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 `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { TABLET } from "../../theme/common/breakpoints";
+import { Paper, PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { LOADING_PANEL_STYLE } from "./loading";
+export const LoadingPositioner = styled.div `
   display: grid;
   height: 100%;
   left: 0;
@@ -19,12 +13,12 @@ exports.LoadingPositioner = styled_1.default.div `
   z-index: 10;
 
   // Style "Inherit" - inherit border radius from parent container.
-  ${({ panelStyle }) => panelStyle === loading_1.LOADING_PANEL_STYLE.INHERIT &&
-    (0, react_1.css) `
+  ${({ panelStyle }) => panelStyle === LOADING_PANEL_STYLE.INHERIT &&
+    css `
       border-radius: inherit;
     `};
 `;
-exports.LoadingPaper = (0, styled_1.default)(paper_1.Paper) `
+export const LoadingPaper = styled(Paper) `
   background-color: rgba(255, 255, 255, 0.8);
   display: grid;
   gap: 16px;
@@ -32,8 +26,8 @@ exports.LoadingPaper = (0, styled_1.default)(paper_1.Paper) `
   place-content: center center;
 
   // Style "Flat" paper.
-  ${({ panelStyle }) => panelStyle === paper_1.PAPER_PANEL_STYLE.FLAT &&
-    (0, react_1.css) `
+  ${({ panelStyle }) => panelStyle === PAPER_PANEL_STYLE.FLAT &&
+    css `
       border-left: none;
       border-radius: 0;
       border-right: none;
@@ -41,11 +35,11 @@ exports.LoadingPaper = (0, styled_1.default)(paper_1.Paper) `
     `};
 
   // Style "Fluid" paper.
-  ${({ panelStyle, theme }) => panelStyle === paper_1.PAPER_PANEL_STYLE.FLUID &&
-    (0, react_1.css) `
+  ${({ panelStyle, theme }) => panelStyle === PAPER_PANEL_STYLE.FLUID &&
+    css `
       border-radius: 8px;
 
-      ${theme.breakpoints.down(breakpoints_1.TABLET)} {
+      ${theme.breakpoints.down(TABLET)} {
         border-left: none;
         border-radius: 0;
         border-right: none;
@@ -54,24 +48,24 @@ exports.LoadingPaper = (0, styled_1.default)(paper_1.Paper) `
     `};
 
   // Style "Inherit" - borderless with no elevation, inherit border-radius from parent container.
-  ${({ panelStyle }) => panelStyle === loading_1.LOADING_PANEL_STYLE.INHERIT &&
-    (0, react_1.css) `
+  ${({ panelStyle }) => panelStyle === LOADING_PANEL_STYLE.INHERIT &&
+    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) `
+  ${({ panelStyle }) => panelStyle === PAPER_PANEL_STYLE.NONE &&
+    css `
       border: 0;
       border-radius: 0;
       box-shadow: none;
     `};
 
   // Style "Rounded" paper.
-  ${({ panelStyle }) => panelStyle === paper_1.PAPER_PANEL_STYLE.ROUNDED &&
-    (0, react_1.css) `
+  ${({ panelStyle }) => panelStyle === PAPER_PANEL_STYLE.ROUNDED &&
+    css `
       border-radius: 8px;
     `};
 `;

package/lib/components/Login/login.js

@@ -1,44 +1,18 @@
-"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.Login = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const useAuthentication_1 = require("../../hooks/useAuthentication/useAuthentication");
-const loginButton_1 = require("../common/Button/components/LoginButton/loginButton");
-const checkedIcon_1 = require("../common/CustomIcon/components/CheckedIcon/checkedIcon");
-const googleIcon_1 = require("../common/CustomIcon/components/GoogleIcon/googleIcon");
-const uncheckedErrorIcon_1 = require("../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon");
-const uncheckedIcon_1 = require("../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
-const paper_styles_1 = require("../common/Paper/paper.styles");
-const section_styles_1 = require("../common/Section/section.styles");
-const login_styles_1 = require("./login.styles");
-const Login = ({ isGoogle = false, termsOfService, text, title, warning, }) => {
-    const { authenticateUser } = (0, useAuthentication_1.useAuthentication)();
-    const [isError, setIsError] = (0, react_1.useState)(false);
-    const [isInAgreement, setIsInAgreement] = (0, react_1.useState)(!termsOfService);
+import { Checkbox, Typography } from "@mui/material";
+import React, { useState } from "react";
+import { useAuthentication } from "../../hooks/useAuthentication/useAuthentication";
+import { LoginButton } from "../common/Button/components/LoginButton/loginButton";
+import { CheckedIcon } from "../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { GoogleIcon } from "../common/CustomIcon/components/GoogleIcon/googleIcon";
+import { UncheckedErrorIcon } from "../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
+import { UncheckedIcon } from "../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { RoundedPaper } from "../common/Paper/paper.styles";
+import { SectionContent } from "../common/Section/section.styles";
+import { LoginAgreement, LoginSection, LoginSectionActions, LoginText, LoginWarning, LoginWrapper, TermsOfService, } from "./login.styles";
+export const Login = ({ isGoogle = false, termsOfService, text, title, warning, }) => {
+    const { authenticateUser } = useAuthentication();
+    const [isError, setIsError] = useState(false);
+    const [isInAgreement, setIsInAgreement] = useState(!termsOfService);
     // Authenticates the user, if the user has agreed to the terms of service.
     // If the terms of service are not accepted, set the terms of service error state to true.
     const onAuthenticateUser = () => {
@@ -54,17 +28,16 @@ const Login = ({ isGoogle = false, termsOfService, text, title, warning, }) => {
         setIsError(false); // Clears terms of service error state when checkbox is touched.
         setIsInAgreement(changeEvent.target.checked);
     };
-    return (react_1.default.createElement(login_styles_1.LoginWrapper, null,
-        react_1.default.createElement(paper_styles_1.RoundedPaper, null,
-            react_1.default.createElement(login_styles_1.LoginSection, null,
-                react_1.default.createElement(section_styles_1.SectionContent, null,
-                    react_1.default.createElement(material_1.Typography, { color: "ink.main", component: "h3", variant: "text-heading" }, title),
-                    text && react_1.default.createElement(login_styles_1.LoginText, null, text)),
-                react_1.default.createElement(login_styles_1.LoginSectionActions, null,
-                    termsOfService && (react_1.default.createElement(login_styles_1.LoginAgreement, null,
-                        react_1.default.createElement(material_1.Checkbox, { checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), icon: isError ? react_1.default.createElement(uncheckedErrorIcon_1.UncheckedErrorIcon, null) : react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null), onChange: handleChange }),
-                        react_1.default.createElement(login_styles_1.TermsOfService, null, termsOfService))),
-                    isGoogle && (react_1.default.createElement(loginButton_1.LoginButton, { EndIcon: googleIcon_1.GoogleIcon, onClick: onAuthenticateUser }, "Google"))))),
-        warning && react_1.default.createElement(login_styles_1.LoginWarning, null, warning)));
+    return (React.createElement(LoginWrapper, null,
+        React.createElement(RoundedPaper, null,
+            React.createElement(LoginSection, null,
+                React.createElement(SectionContent, null,
+                    React.createElement(Typography, { color: "ink.main", component: "h3", variant: "text-heading" }, title),
+                    text && React.createElement(LoginText, null, text)),
+                React.createElement(LoginSectionActions, null,
+                    termsOfService && (React.createElement(LoginAgreement, null,
+                        React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleChange }),
+                        React.createElement(TermsOfService, null, termsOfService))),
+                    isGoogle && (React.createElement(LoginButton, { EndIcon: GoogleIcon, onClick: onAuthenticateUser }, "Google"))))),
+        warning && React.createElement(LoginWarning, null, warning)));
 };
-exports.Login = Login;

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

@@ -1,13 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoginStory = void 0;
-const react_1 = __importDefault(require("react"));
-const helpIconButton_1 = require("../common/Button/components/HelpIconButton/helpIconButton");
-const login_1 = require("./login");
-exports.default = {
+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" },
@@ -15,23 +9,23 @@ exports.default = {
         title: { control: "text" },
         warning: { control: "object" },
     },
-    component: login_1.Login,
+    component: Login,
     parameters: {
         layout: "fullscreen",
     },
     title: "Components/Login",
 };
-exports.LoginStory = {
+export const LoginStory = {
     args: {
         isGoogle: true,
-        termsOfService: (react_1.default.createElement("p", null, "I have read and agree to privacy notice and terms of use")),
-        text: (react_1.default.createElement("p", null,
+        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_1.default.createElement(helpIconButton_1.HelpIconButton, { url: "https://www.google.com/" }))),
+            React.createElement(HelpIconButton, { url: "https://www.google.com/" }))),
         title: "Sign in to your account",
-        warning: (react_1.default.createElement("div", null,
-            react_1.default.createElement("p", null, "WARNING NOTICE"),
-            react_1.default.createElement("p", null, "This is a warning notice."))),
+        warning: (React.createElement("div", null,
+            React.createElement("p", null, "WARNING NOTICE"),
+            React.createElement("p", null, "This is a warning notice."))),
     },
 };

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

@@ -1,14 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoginWarning = exports.TermsOfService = exports.LoginText = exports.LoginSectionActions = exports.LoginAgreement = exports.LoginSection = exports.LoginWrapper = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const fonts_1 = require("../../styles/common/mixins/fonts");
-const breakpoints_1 = require("../../theme/common/breakpoints");
-const section_styles_1 = require("../common/Section/section.styles");
-exports.LoginWrapper = styled_1.default.div `
+import styled from "@emotion/styled";
+import { textBody400, textBodySmall400, } from "../../styles/common/mixins/fonts";
+import { TABLET } from "../../theme/common/breakpoints";
+import { Section, SectionActions } from "../common/Section/section.styles";
+export const LoginWrapper = styled.div `
   box-sizing: content-box;
   display: flex;
   flex-direction: column;
@@ -17,36 +11,36 @@ exports.LoginWrapper = styled_1.default.div `
   max-width: 400px;
   padding: 56px 16px;
 `;
-exports.LoginSection = (0, styled_1.default)(section_styles_1.Section) `
+export const LoginSection = styled(Section) `
   gap: 24px 0;
   padding: 32px;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     padding: 32px;
   }
 `;
-exports.LoginAgreement = styled_1.default.div `
+export const LoginAgreement = styled.div `
   align-items: center;
   align-self: flex-start;
   display: flex;
   gap: 12px;
 `;
-exports.LoginSectionActions = (0, styled_1.default)(section_styles_1.SectionActions) `
+export const LoginSectionActions = styled(SectionActions) `
   flex-direction: column;
   gap: 16px 0;
 `;
-exports.LoginText = styled_1.default.div `
-  ${fonts_1.textBody400};
+export const LoginText = styled.div `
+  ${textBody400};
 `;
-exports.TermsOfService = styled_1.default.div `
-  ${fonts_1.textBody400};
+export const TermsOfService = styled.div `
+  ${textBody400};
 
   a {
     color: inherit;
     text-decoration: underline;
   }
 `;
-exports.LoginWarning = styled_1.default.div `
-  ${fonts_1.textBodySmall400};
+export const LoginWarning = styled.div `
+  ${textBodySmall400};
   color: ${({ theme }) => theme.palette.ink.light};
 `;