@databiosphere/findable-ui 6.0.0 → 8.0.0

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};
 `;

package/lib/components/NoResults/noResults.js

@@ -1,24 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Typography } from "@mui/material";
+import React from "react";
+import { SearchOffIcon } from "../common/CustomIcon/components/SearchOffIcon/searchOffIcon";
+import { RoundedPaper, } from "../common/Paper/paper.styles";
+import { SectionTitle } from "../common/Section/components/SectionTitle/sectionTitle";
+import { SectionActions } from "../common/Section/section.styles";
+import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
+import { NoResultsSection, NoResultsSectionContent } from "./noResults.styles";
+export const NoResults = ({ actions, description, Paper = RoundedPaper, title, }) => {
+    return (React.createElement(Paper, null,
+        React.createElement(NoResultsSection, null,
+            React.createElement(StatusIcon, { priority: PRIORITY.LOW, StatusIcon: SearchOffIcon }),
+            React.createElement(NoResultsSectionContent, null,
+                React.createElement(SectionTitle, { title: title }),
+                description && (React.createElement(Typography, { color: "ink.light", variant: "text-body-400-2lines" }, description))),
+            actions && React.createElement(SectionActions, null, actions))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoResults = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const searchOffIcon_1 = require("../common/CustomIcon/components/SearchOffIcon/searchOffIcon");
-const paper_styles_1 = require("../common/Paper/paper.styles");
-const sectionTitle_1 = require("../common/Section/components/SectionTitle/sectionTitle");
-const section_styles_1 = require("../common/Section/section.styles");
-const statusIcon_1 = require("../common/StatusIcon/statusIcon");
-const noResults_styles_1 = require("./noResults.styles");
-const NoResults = ({ actions, description, Paper = paper_styles_1.RoundedPaper, title, }) => {
-    return (react_1.default.createElement(Paper, null,
-        react_1.default.createElement(noResults_styles_1.NoResultsSection, null,
-            react_1.default.createElement(statusIcon_1.StatusIcon, { priority: statusIcon_1.PRIORITY.LOW, StatusIcon: searchOffIcon_1.SearchOffIcon }),
-            react_1.default.createElement(noResults_styles_1.NoResultsSectionContent, null,
-                react_1.default.createElement(sectionTitle_1.SectionTitle, { title: title }),
-                description && (react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: "text-body-400-2lines" }, description))),
-            actions && react_1.default.createElement(section_styles_1.SectionActions, null, actions))));
-};
-exports.NoResults = NoResults;

package/lib/components/NoResults/noResults.styles.js

@@ -1,16 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoResultsSectionContent = exports.NoResultsSection = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const section_styles_1 = require("../common/Section/section.styles");
-exports.NoResultsSection = (0, styled_1.default)(section_styles_1.Section) `
+import styled from "@emotion/styled";
+import { Section, SectionContent } from "../common/Section/section.styles";
+export const NoResultsSection = styled(Section) `
   align-items: center;
   padding: 40px !important; /* Overrides section padding. */
 `;
-exports.NoResultsSectionContent = (0, styled_1.default)(section_styles_1.SectionContent) `
+export const NoResultsSectionContent = styled(SectionContent) `
   max-width: 456px;
   text-align: center;
 `;

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

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/lib/components/Project/components/Citation/citation.js

@@ -1,20 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Typography } from "@mui/material";
+import React from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
+import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { Link } from "../../../Links/components/Link/link";
+import { CitationLink, SectionContent } from "./citation.styles";
+export const Citation = ({ projectPath, url }) => {
+    return (React.createElement(CollapsableSection, { collapsable: true, title: "Citation" }, projectPath && url ? (React.createElement(SectionContent, null,
+        React.createElement(Typography, null, "To reference this project, please use the following link:"),
+        React.createElement(CitationLink, null,
+            React.createElement(Link, { copyable: true, label: `${url}${projectPath}`, noWrap: true, target: ANCHOR_TARGET.BLANK, url: `${url}${projectPath}` })))) : (React.createElement(SectionDetailsEmpty, null))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Citation = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const collapsableSection_1 = require("../../../common/Section/components/CollapsableSection/collapsableSection");
-const sectionDetailsEmpty_1 = require("../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty");
-const entities_1 = require("../../../Links/common/entities");
-const link_1 = require("../../../Links/components/Link/link");
-const citation_styles_1 = require("./citation.styles");
-const Citation = ({ projectPath, url }) => {
-    return (react_1.default.createElement(collapsableSection_1.CollapsableSection, { collapsable: true, title: "Citation" }, projectPath && url ? (react_1.default.createElement(citation_styles_1.SectionContent, null,
-        react_1.default.createElement(material_1.Typography, null, "To reference this project, please use the following link:"),
-        react_1.default.createElement(citation_styles_1.CitationLink, null,
-            react_1.default.createElement(link_1.Link, { copyable: true, label: `${url}${projectPath}`, noWrap: true, target: entities_1.ANCHOR_TARGET.BLANK, url: `${url}${projectPath}` })))) : (react_1.default.createElement(sectionDetailsEmpty_1.SectionDetailsEmpty, null))));
-};
-exports.Citation = Citation;

package/lib/components/Project/components/Citation/citation.stories.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CitationStory = void 0;
-const citation_1 = require("./citation");
+import { Citation } from "./citation";
 const meta = {
     argTypes: {
         projectPath: { control: "text" },
         url: { control: "text" },
     },
-    component: citation_1.Citation,
+    component: Citation,
     title: "Components/SectionContent/Content/Project",
 };
-exports.default = meta;
-exports.CitationStory = {
+export default meta;
+export const CitationStory = {
     args: {
         projectPath: "60ea42e1-af49-42f5-8164-d641fdb696bc",
         url: "https://data.humancellatlas.org/explore/projects/",

package/lib/components/Project/components/Citation/citation.styles.js

@@ -1,18 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CitationLink = exports.SectionContent = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.SectionContent = styled_1.default.div `
+import styled from "@emotion/styled";
+export const SectionContent = styled.div `
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0; /* required to ellipsis any flex child */
   width: 100%; /* required to ellipsis any flex child */
 `;
-exports.CitationLink = styled_1.default.div `
+export const CitationLink = styled.div `
   align-items: center;
   display: flex;
   min-width: 0;

package/lib/components/Project/components/CollaboratingOrganizations/collaboratingOrganizations.js

@@ -1,16 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { CollapsableSection } from "../../../common/Section/components/CollapsableSection/collapsableSection";
+import { SectionDetailsEmpty } from "../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty";
+import { Sup } from "../Sup/sup.styles";
+export const CollaboratingOrganizations = ({ collaboratingOrganizations, }) => {
+    return (React.createElement(CollapsableSection, { collapsable: true, title: "Collaborating Organizations" }, collaboratingOrganizations ? (React.createElement("div", null, collaboratingOrganizations.map(({ citation, name }, c) => (React.createElement("div", { key: `${name}${c}` },
+        React.createElement(Sup, null, citation),
+        React.createElement("span", null, name)))))) : (React.createElement(SectionDetailsEmpty, null))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollaboratingOrganizations = void 0;
-const react_1 = __importDefault(require("react"));
-const collapsableSection_1 = require("../../../common/Section/components/CollapsableSection/collapsableSection");
-const sectionDetailsEmpty_1 = require("../../../common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty");
-const sup_styles_1 = require("../Sup/sup.styles");
-const CollaboratingOrganizations = ({ collaboratingOrganizations, }) => {
-    return (react_1.default.createElement(collapsableSection_1.CollapsableSection, { collapsable: true, title: "Collaborating Organizations" }, collaboratingOrganizations ? (react_1.default.createElement("div", null, collaboratingOrganizations.map(({ citation, name }, c) => (react_1.default.createElement("div", { key: `${name}${c}` },
-        react_1.default.createElement(sup_styles_1.Sup, null, citation),
-        react_1.default.createElement("span", null, name)))))) : (react_1.default.createElement(sectionDetailsEmpty_1.SectionDetailsEmpty, null))));
-};
-exports.CollaboratingOrganizations = CollaboratingOrganizations;

package/lib/components/Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories.js

@@ -1,21 +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.CollaboratingOrganizationsStory = void 0;
-const react_1 = __importDefault(require("react"));
-const collaboratingOrganizations_1 = require("./collaboratingOrganizations");
-exports.default = {
+import React from "react";
+import { CollaboratingOrganizations } from "./collaboratingOrganizations";
+export default {
     argTypes: {
         collaboratingOrganizations: { control: "array" },
     },
-    component: collaboratingOrganizations_1.CollaboratingOrganizations,
+    component: CollaboratingOrganizations,
     title: "Components/SectionContent/Content/Project",
 };
-const CollaboratingOrganizationsTemplate = (args) => react_1.default.createElement(collaboratingOrganizations_1.CollaboratingOrganizations, Object.assign({}, args));
-exports.CollaboratingOrganizationsStory = CollaboratingOrganizationsTemplate.bind({});
-exports.CollaboratingOrganizationsStory.args = {
+const CollaboratingOrganizationsTemplate = (args) => React.createElement(CollaboratingOrganizations, { ...args });
+export const CollaboratingOrganizationsStory = CollaboratingOrganizationsTemplate.bind({});
+CollaboratingOrganizationsStory.args = {
     collaboratingOrganizations: [
         {
             citation: 1,