@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/components/common/Paper/paper.js

@@ -1,41 +1,15 @@
-"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.Paper = exports.PAPER_PANEL_STYLE = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
+import { Paper as MPaper } from "@mui/material";
+import React, { forwardRef } from "react";
 /**
  * Possible set of paper variant "panel" style values.
  */
-var PAPER_PANEL_STYLE;
+export var PAPER_PANEL_STYLE;
 (function (PAPER_PANEL_STYLE) {
     PAPER_PANEL_STYLE["FLAT"] = "FLAT";
     PAPER_PANEL_STYLE["FLUID"] = "FLUID";
     PAPER_PANEL_STYLE["NONE"] = "NONE";
     PAPER_PANEL_STYLE["ROUNDED"] = "ROUNDED";
-})(PAPER_PANEL_STYLE = exports.PAPER_PANEL_STYLE || (exports.PAPER_PANEL_STYLE = {}));
-exports.Paper = (0, react_1.forwardRef)(function Paper({ children, className, variant = "panel" }, ref) {
-    return (react_1.default.createElement(material_1.Paper, { className: className, ref: ref, variant: variant }, children));
+})(PAPER_PANEL_STYLE || (PAPER_PANEL_STYLE = {}));
+export const Paper = forwardRef(function Paper({ children, className, variant = "panel" }, ref) {
+    return (React.createElement(MPaper, { className: className, ref: ref, variant: variant }, children));
 });

package/lib/components/common/Paper/paper.styles.js

@@ -1,17 +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.GridPaper = exports.FluidPaper = exports.RoundedPaper = exports.FlatPaper = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../theme/common/breakpoints");
-const paper_1 = require("./paper");
+import styled from "@emotion/styled";
+import { TABLET } from "../../../theme/common/breakpoints";
+import { Paper } from "./paper";
 /**
  * Flat paper - typically used when in full stretch or full "bleed" across a container.
  * e.g. the entire width of mobile viewports.
  */
-exports.FlatPaper = (0, styled_1.default)(paper_1.Paper) `
+export const FlatPaper = styled(Paper) `
   align-self: stretch;
   border-left: none;
   border-radius: 0;
@@ -22,7 +16,7 @@ exports.FlatPaper = (0, styled_1.default)(paper_1.Paper) `
  * Rounded paper - typically used when contained within a parent container.
  * To use RoundedPaper, wrap the styled paper around a single child element e.g. "Section" or "Sections" component. TODO
  */
-exports.RoundedPaper = (0, styled_1.default)(paper_1.Paper) `
+export const RoundedPaper = styled(Paper) `
   align-self: stretch;
   border-radius: 8px;
 `;
@@ -32,8 +26,8 @@ exports.RoundedPaper = (0, styled_1.default)(paper_1.Paper) `
  * To use FluidPaper, wrap the styled paper around a single child element e.g. "Section" or "Sections" component. TODO
  */
 /* eslint-enable valid-jsdoc -- disable require param */
-exports.FluidPaper = (0, styled_1.default)(exports.RoundedPaper) `
-  ${({ theme }) => theme.breakpoints.down(breakpoints_1.TABLET)} {
+export const FluidPaper = styled(RoundedPaper) `
+  ${({ theme }) => theme.breakpoints.down(TABLET)} {
     border-left: none;
     border-radius: 0;
     border-right: none;
@@ -47,7 +41,7 @@ const ignoreSsrWarning = "/* emotion-disable-server-rendering-unsafe-selector-wa
  * Grid paper - typically used as a parent (grid) container.
  * The background color with the grid cap property create the grid "lines" between each grid item.
  */
-exports.GridPaper = styled_1.default.div(({ theme }) => ({
+export const GridPaper = styled.div(({ theme }) => ({
     backgroundColor: `${theme.palette.smoke.main}`,
     borderRadius: "inherit",
     display: "grid",

package/lib/components/common/Progress/components/CircularProgress/circularProgress.js

@@ -1,28 +1,9 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import { CircularProgress as MCircularProgress, } from "@mui/material";
+import React from "react";
+import { ProgressPositioner } from "./circularProgress.styles";
+import { CircularProgressTrack } from "./components/CircularProgressTrack/circularProgressTrack";
+export const CircularProgress = ({ className, value, Track = CircularProgressTrack, ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */ }) => {
+    return (React.createElement(ProgressPositioner, { className: className },
+        React.createElement(Track, { ...props }),
+        React.createElement(MCircularProgress, { value: value, ...props })));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircularProgress = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const circularProgress_styles_1 = require("./circularProgress.styles");
-const circularProgressTrack_1 = require("./components/CircularProgressTrack/circularProgressTrack");
-const CircularProgress = (_a) => {
-    var { className, value, Track = circularProgressTrack_1.CircularProgressTrack } = _a, props = __rest(_a, ["className", "value", "Track"]) /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */;
-    return (react_1.default.createElement(circularProgress_styles_1.ProgressPositioner, { className: className },
-        react_1.default.createElement(Track, Object.assign({}, props)),
-        react_1.default.createElement(material_1.CircularProgress, Object.assign({ value: value }, props))));
-};
-exports.CircularProgress = CircularProgress;

package/lib/components/common/Progress/components/CircularProgress/circularProgress.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressPositioner = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.ProgressPositioner = styled_1.default.div `
+import styled from "@emotion/styled";
+export const ProgressPositioner = styled.div `
   display: flex;
   position: relative; /* positions track */
 `;

package/lib/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.js

@@ -1,44 +1,5 @@
-"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;
+import React, { Fragment } from "react";
+import { CircularProgress } from "./circularProgressTrack.styles";
+export const CircularProgressTrack = ({ className, track = true, value = 100, ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */ }) => {
+    return (React.createElement(Fragment, null, track && (React.createElement(CircularProgress, { className: className, value: value, ...props }))));
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircularProgressTrack = void 0;
-const react_1 = __importStar(require("react"));
-const circularProgressTrack_styles_1 = require("./circularProgressTrack.styles");
-const CircularProgressTrack = (_a) => {
-    var { className, track = true, value = 100 } = _a, props = __rest(_a, ["className", "track", "value"]) /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */;
-    return (react_1.default.createElement(react_1.Fragment, null, track && (react_1.default.createElement(circularProgressTrack_styles_1.CircularProgress, Object.assign({ className: className, value: value }, props)))));
-};
-exports.CircularProgressTrack = CircularProgressTrack;

package/lib/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.styles.js

@@ -1,32 +1,26 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircularProgress = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../../../../../styles/common/mixins/colors");
-exports.CircularProgress = (0, styled_1.default)(material_1.CircularProgress) `
-  color: ${colors_1.smokeLight};
+import styled from "@emotion/styled";
+import { CircularProgress as MCircularProgress } from "@mui/material";
+import { alertLight, infoLight, smokeLight, successLight, warningLight, } from "../../../../../../../styles/common/mixins/colors";
+export const CircularProgress = styled(MCircularProgress) `
+  color: ${smokeLight};
   left: 0;
   position: absolute;
   top: 0;
   z-index: 0;
 
   &.MuiCircularProgress-colorAlert {
-    color: ${colors_1.alertLight};
+    color: ${alertLight};
   }
 
   &.MuiCircularProgress-colorInfo {
-    color: ${colors_1.infoLight};
+    color: ${infoLight};
   }
 
   &.MuiCircularProgress-colorSuccess {
-    color: ${colors_1.successLight};
+    color: ${successLight};
   }
 
   &.MuiCircularProgress-colorWarning {
-    color: ${colors_1.warningLight};
+    color: ${warningLight};
   }
 `;

package/lib/components/common/RadioGroup/radioGroup.js

@@ -1,14 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { FormControlLabel as MFormControlLabel, Radio as MRadio, RadioGroup as MRadioGroup, } from "@mui/material";
+import React from "react";
+import { RadioCheckedIcon } from "../CustomIcon/components/RadioCheckedIcon/radioCheckedIcon";
+import { RadioUncheckedIcon } from "../CustomIcon/components/RadioUncheckedIcon/radioUncheckedIcon";
+export const RadioGroup = ({ className, onRadioChange, radios, value, }) => {
+    return (React.createElement(MRadioGroup, { className: className, onChange: (_, radioValue) => onRadioChange(radioValue), value: value }, radios.map(({ disabled, label, value: radioValue }, r) => (React.createElement(MFormControlLabel, { key: `${label}${r}`, control: React.createElement(MRadio, { checkedIcon: React.createElement(RadioCheckedIcon, null), icon: React.createElement(RadioUncheckedIcon, null), size: "small" }), disabled: disabled, label: label, value: radioValue })))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroup = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const radioCheckedIcon_1 = require("../CustomIcon/components/RadioCheckedIcon/radioCheckedIcon");
-const radioUncheckedIcon_1 = require("../CustomIcon/components/RadioUncheckedIcon/radioUncheckedIcon");
-const RadioGroup = ({ className, onRadioChange, radios, value, }) => {
-    return (react_1.default.createElement(material_1.RadioGroup, { className: className, onChange: (_, radioValue) => onRadioChange(radioValue), value: value }, radios.map(({ disabled, label, value: radioValue }, r) => (react_1.default.createElement(material_1.FormControlLabel, { key: `${label}${r}`, control: react_1.default.createElement(material_1.Radio, { checkedIcon: react_1.default.createElement(radioCheckedIcon_1.RadioCheckedIcon, null), icon: react_1.default.createElement(radioUncheckedIcon_1.RadioUncheckedIcon, null), size: "small" }), disabled: disabled, label: label, value: radioValue })))));
-};
-exports.RadioGroup = RadioGroup;

package/lib/components/common/Section/components/CollapsableSection/collapsableSection.js

@@ -1,58 +1,29 @@
-"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.CollapsableSection = void 0;
-const AddRounded_1 = __importDefault(require("@mui/icons-material/AddRounded"));
-const RemoveRounded_1 = __importDefault(require("@mui/icons-material/RemoveRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const useBreakpointHelper_1 = require("../../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../../theme/common/breakpoints");
-const sectionTitle_1 = require("../SectionTitle/sectionTitle");
-const collapsableSection_styles_1 = require("./collapsableSection.styles");
-const CollapsableSection = ({ children, collapsable = false, title, }) => {
-    const mobile = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.TABLET);
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
-    const [transitionDuration, setTransitionDuration] = (0, react_1.useState)(0);
+import AddRoundedIcon from "@mui/icons-material/AddRounded";
+import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
+import { Collapse } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../hooks/useBreakpointHelper";
+import { TABLET } from "../../../../../theme/common/breakpoints";
+import { SectionTitle } from "../SectionTitle/sectionTitle";
+import { CollapsableSection as Section, SectionSummary, SectionText, } from "./collapsableSection.styles";
+export const CollapsableSection = ({ children, collapsable = false, title, }) => {
+    const mobile = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
+    const [expanded, setExpanded] = useState(false);
+    const [transitionDuration, setTransitionDuration] = useState(0);
     const disabled = !mobile || !collapsable;
-    const ExpandIcon = expanded ? RemoveRounded_1.default : AddRounded_1.default;
-    const SectionContent = (react_1.default.createElement(collapsableSection_styles_1.SectionText, { component: "div", variant: "text-body-400-2lines" }, children));
+    const ExpandIcon = expanded ? RemoveRoundedIcon : AddRoundedIcon;
+    const SectionContent = (React.createElement(SectionText, { component: "div", variant: "text-body-400-2lines" }, children));
     const onToggleExpanded = () => {
         setExpanded((expanded) => !expanded);
     };
     // Toggles expanded state on change of media breakpoint.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setExpanded(!mobile);
     }, [mobile]);
     // Sets collapseTimeout state on change of media breakpoint.
     // Delays setting transitionDuration state for mobile breakpoint to facilitate the immediate transition from
     // tablet to mobile.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (mobile) {
             const duration = setTimeout(() => {
                 setTransitionDuration("auto");
@@ -65,10 +36,9 @@ const CollapsableSection = ({ children, collapsable = false, title, }) => {
             setTransitionDuration(0);
         }
     }, [mobile]);
-    return (react_1.default.createElement(collapsableSection_styles_1.CollapsableSection, null,
-        react_1.default.createElement(collapsableSection_styles_1.SectionSummary, { disabled: disabled, onClick: onToggleExpanded },
-            react_1.default.createElement(sectionTitle_1.SectionTitle, { title: title }),
-            !disabled && react_1.default.createElement(ExpandIcon, { fontSize: "small" })),
-        !disabled ? (react_1.default.createElement(material_1.Collapse, { in: expanded, timeout: transitionDuration }, SectionContent)) : (SectionContent)));
+    return (React.createElement(Section, null,
+        React.createElement(SectionSummary, { disabled: disabled, onClick: onToggleExpanded },
+            React.createElement(SectionTitle, { title: title }),
+            !disabled && React.createElement(ExpandIcon, { fontSize: "small" })),
+        !disabled ? (React.createElement(Collapse, { in: expanded, timeout: transitionDuration }, SectionContent)) : (SectionContent)));
 };
-exports.CollapsableSection = CollapsableSection;

package/lib/components/common/Section/components/CollapsableSection/collapsableSection.styles.js

@@ -1,41 +1,35 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionText = exports.SectionSummary = exports.CollapsableSection = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../../theme/common/breakpoints");
-exports.CollapsableSection = styled_1.default.div `
+import styled from "@emotion/styled";
+import { ButtonBase, Typography } from "@mui/material";
+import { TABLET } from "../../../../../theme/common/breakpoints";
+export const CollapsableSection = styled.div `
   background-color: ${({ theme }) => theme.palette.common.white};
   display: flex;
   flex-direction: column;
   min-width: 0; /* required to ellipsis any flex child */
   padding: 4px 0;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     gap: 8px;
     padding: 20px;
   }
 `;
-exports.SectionSummary = (0, styled_1.default)(material_1.ButtonBase) `
+export const SectionSummary = styled(ButtonBase) `
   display: flex;
   justify-content: space-between;
   padding: 16px;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     padding: 0;
   }
 `;
-exports.SectionText = (0, styled_1.default)(material_1.Typography) `
+export const SectionText = styled(Typography) `
   align-items: flex-start;
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 0 16px 16px;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     padding: 0;
   }
 `;

package/lib/components/common/Section/components/SectionDetailsEmpty/sectionDetailsEmpty.js

@@ -1,11 +1,4 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+export const SectionDetailsEmpty = ({ displayText = "None", }) => {
+    return React.createElement("span", null, displayText);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionDetailsEmpty = void 0;
-const react_1 = __importDefault(require("react"));
-const SectionDetailsEmpty = ({ displayText = "None", }) => {
-    return react_1.default.createElement("span", null, displayText);
-};
-exports.SectionDetailsEmpty = SectionDetailsEmpty;

package/lib/components/common/Section/components/SectionTitle/sectionTitle.js

@@ -1,12 +1,5 @@
-"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";
+export const SectionTitle = ({ className, title, }) => {
+    return (React.createElement(Typography, { align: "left", className: className, color: "ink.main", component: "h3", variant: "text-body-large-500" }, title));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionTitle = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const SectionTitle = ({ className, title, }) => {
-    return (react_1.default.createElement(material_1.Typography, { align: "left", className: className, color: "ink.main", component: "h3", variant: "text-body-large-500" }, title));
-};
-exports.SectionTitle = SectionTitle;

package/lib/components/common/Section/components/SectionTitle/sectionTitle.stories.js

@@ -1,20 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionTitleStory = void 0;
-const react_1 = __importDefault(require("react"));
-const sectionTitle_1 = require("./sectionTitle");
-exports.default = {
+import React from "react";
+import { SectionTitle } from "./sectionTitle";
+export default {
     argTypes: {
         title: { control: "text" },
     },
-    component: sectionTitle_1.SectionTitle,
+    component: SectionTitle,
     title: "Components/SectionContent/Title",
 };
-const SectionTitleTemplate = (args) => (react_1.default.createElement(sectionTitle_1.SectionTitle, Object.assign({}, args)));
-exports.SectionTitleStory = SectionTitleTemplate.bind({});
-exports.SectionTitleStory.args = {
+const SectionTitleTemplate = (args) => (React.createElement(SectionTitle, { ...args }));
+export const SectionTitleStory = SectionTitleTemplate.bind({});
+SectionTitleStory.args = {
     title: "Analysis Portals",
 };

package/lib/components/common/Section/section.styles.js

@@ -1,47 +1,40 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionActions = exports.SectionContentListItem = exports.SectionText = exports.SectionContent = exports.GridPaperSection = exports.Section = exports.sectionPadding = exports.sectionMarginXsm = exports.sectionMarginSm = exports.sectionMargin = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../styles/common/mixins/colors");
-exports.sectionMargin = (0, react_1.css) `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+import { mediaTabletUp } from "../../../styles/common/mixins/breakpoints";
+import { white } from "../../../styles/common/mixins/colors";
+export const sectionMargin = css `
   margin: 20px 16px;
 `;
-exports.sectionMarginSm = (0, react_1.css) `
+export const sectionMarginSm = css `
   margin: 20px;
 `;
-exports.sectionMarginXsm = (0, react_1.css) `
+export const sectionMarginXsm = css `
   margin: 16px;
 `;
-const sectionPadding = ({ theme }) => (0, react_1.css) `
+export const sectionPadding = ({ theme }) => css `
   padding: 20px 16px;
 
-  ${(0, breakpoints_1.mediaTabletUp)({ theme })} {
+  ${mediaTabletUp({ theme })} {
     padding: 20px;
   }
 `;
-exports.sectionPadding = sectionPadding;
-exports.Section = styled_1.default.div `
-  ${exports.sectionPadding};
+export const Section = styled.div `
+  ${sectionPadding};
   display: flex;
   flex-direction: column;
   gap: 16px 0;
 `;
 // Basic section with white background - typically used as a direct descendant of GridPaper component.
-exports.GridPaperSection = (0, styled_1.default)(exports.Section) `
-  background-color: ${colors_1.white};
+export const GridPaperSection = styled(Section) `
+  background-color: ${white};
 `;
-exports.SectionContent = styled_1.default.div `
+export const SectionContent = styled.div `
   display: flex;
   flex-direction: column;
   gap: 8px 0;
 `;
-exports.SectionText = (0, styled_1.default)(material_1.Typography) `
+export const SectionText = styled(Typography) `
   > p {
     margin: 0 0 8px;
   }
@@ -50,12 +43,12 @@ exports.SectionText = (0, styled_1.default)(material_1.Typography) `
     margin-bottom: 0;
   }
 `;
-exports.SectionContentListItem = styled_1.default.div `
+export const SectionContentListItem = styled.div `
   align-items: flex-start;
   display: flex;
   flex-direction: column;
 `;
-exports.SectionActions = styled_1.default.div `
+export const SectionActions = styled.div `
   align-items: center;
   display: flex;
   gap: 8px;

package/lib/components/common/Sections/sections.js

@@ -1,13 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { FluidPaper, GridPaper } from "../Paper/paper.styles";
+export const Sections = ({ children, className, }) => {
+    return (React.createElement(FluidPaper, { className: className },
+        React.createElement(GridPaper, null, children)));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sections = void 0;
-const react_1 = __importDefault(require("react"));
-const paper_styles_1 = require("../Paper/paper.styles");
-const Sections = ({ children, className, }) => {
-    return (react_1.default.createElement(paper_styles_1.FluidPaper, { className: className },
-        react_1.default.createElement(paper_styles_1.GridPaper, null, children)));
-};
-exports.Sections = Sections;

package/lib/components/common/Socials/socials.js

@@ -1,34 +1,8 @@
-"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.Socials = void 0;
-const react_1 = __importStar(require("react"));
-const entities_1 = require("../../Links/common/entities");
-const iconButton_styles_1 = require("../IconButton/iconButton.styles");
-const socials_styles_1 = require("./socials.styles");
-exports.Socials = (0, react_1.forwardRef)(function Socials({ buttonSize = "medium", className, IconButtonElType = iconButton_styles_1.IconButtonSocials, socials, style, }, ref) {
-    return (react_1.default.createElement(socials_styles_1.Socials, { className: className, ref: ref, style: style }, socials.map(({ Icon, url }, i) => (react_1.default.createElement(IconButtonElType, { key: i, href: url, rel: "noopener noreferrer", size: buttonSize, target: entities_1.ANCHOR_TARGET.BLANK },
-        react_1.default.createElement(Icon, { fontSize: "small" }))))));
+import React, { forwardRef, } from "react";
+import { ANCHOR_TARGET } from "../../Links/common/entities";
+import { IconButtonSocials } from "../IconButton/iconButton.styles";
+import { Socials as IconButtons } from "./socials.styles";
+export const Socials = forwardRef(function Socials({ buttonSize = "medium", className, IconButtonElType = IconButtonSocials, socials, style, }, ref) {
+    return (React.createElement(IconButtons, { className: className, ref: ref, style: style }, socials.map(({ Icon, url }, i) => (React.createElement(IconButtonElType, { key: i, href: url, rel: "noopener noreferrer", size: buttonSize, target: ANCHOR_TARGET.BLANK },
+        React.createElement(Icon, { fontSize: "small" }))))));
 });