@databiosphere/findable-ui 6.0.0 → 7.0.0

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

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

@@ -1,56 +1,53 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SocialsStory = void 0;
-const discourseIcon_1 = require("../CustomIcon/components/DiscourseIcon/discourseIcon");
-const facebookIcon_1 = require("../CustomIcon/components/FacebookIcon/facebookIcon");
-const gitHubIcon_1 = require("../CustomIcon/components/GitHubIcon/gitHubIcon");
-const linkedInIcon_1 = require("../CustomIcon/components/LinkedInIcon/linkedInIcon");
-const slackIcon_1 = require("../CustomIcon/components/SlackIcon/slackIcon");
-const xIcon_1 = require("../CustomIcon/components/XIcon/xIcon");
-const youTubeIcon_1 = require("../CustomIcon/components/YouTubeIcon/youTubeIcon");
-const socials_1 = require("./socials");
-exports.default = {
+import { DiscourseIcon } from "../CustomIcon/components/DiscourseIcon/discourseIcon";
+import { FacebookIcon } from "../CustomIcon/components/FacebookIcon/facebookIcon";
+import { GitHubIcon } from "../CustomIcon/components/GitHubIcon/gitHubIcon";
+import { LinkedInIcon } from "../CustomIcon/components/LinkedInIcon/linkedInIcon";
+import { SlackIcon } from "../CustomIcon/components/SlackIcon/slackIcon";
+import { XIcon } from "../CustomIcon/components/XIcon/xIcon";
+import { YouTubeIcon } from "../CustomIcon/components/YouTubeIcon/youTubeIcon";
+import { Socials } from "./socials";
+export default {
     argTypes: {
         socials: { control: "object" },
     },
-    component: socials_1.Socials,
+    component: Socials,
     title: "Components/Navigation/SocialLinks",
 };
-exports.SocialsStory = {
+export const SocialsStory = {
     args: {
         socials: [
             {
-                Icon: xIcon_1.XIcon,
+                Icon: XIcon,
                 label: null,
                 url: "https://twitter.com",
             },
             {
-                Icon: gitHubIcon_1.GitHubIcon,
+                Icon: GitHubIcon,
                 label: null,
                 url: "https://github.com",
             },
             {
-                Icon: youTubeIcon_1.YouTubeIcon,
+                Icon: YouTubeIcon,
                 label: null,
                 url: "https://www.youtube.com",
             },
             {
-                Icon: discourseIcon_1.DiscourseIcon,
+                Icon: DiscourseIcon,
                 label: null,
                 url: "https://www.discourse.org",
             },
             {
-                Icon: slackIcon_1.SlackIcon,
+                Icon: SlackIcon,
                 label: null,
                 url: "https://slack.com",
             },
             {
-                Icon: facebookIcon_1.FacebookIcon,
+                Icon: FacebookIcon,
                 label: null,
                 url: "https://www.facebook.com",
             },
             {
-                Icon: linkedInIcon_1.LinkedInIcon,
+                Icon: LinkedInIcon,
                 label: null,
                 url: "https://www.linkedin.com",
             },

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

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

package/lib/components/common/Stack/components/Divider/divider.js

@@ -1,29 +1,10 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = void 0;
-const react_1 = __importDefault(require("react"));
-const divider_styles_1 = require("./divider.styles");
+import React from "react";
+import { Divider as Box } from "./divider.styles";
 /**
  * A basic component for rendering any "divider" between rows/columns in a Stack (or Links) component.
  * The default wrapper component is a span and can be changed by passing in the MuiBox component prop.
  * The children may be a ReactNode of any type such as a string or component.
  */
-const Divider = (_a) => {
-    var { children, component = "span" } = _a, props = __rest(_a, ["children", "component"]) /* Spread props to allow for Mui Box specific prop overrides e.g. "sx" or system props. */;
-    return (react_1.default.createElement(divider_styles_1.Divider, Object.assign({ component: component }, props), children));
+export const Divider = ({ children, component = "span", ...props /* Spread props to allow for Mui Box specific prop overrides e.g. "sx" or system props. */ }) => {
+    return (React.createElement(Box, { component: component, ...props }, children));
 };
-exports.Divider = Divider;

package/lib/components/common/Stack/components/Divider/divider.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.Divider = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.Divider = (0, styled_1.default)(material_1.Box) `
+import styled from "@emotion/styled";
+import { Box } from "@mui/material";
+export const Divider = styled(Box) `
   white-space: pre-wrap;
 `;

package/lib/components/common/Stack/stack.js

@@ -1,12 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Stack as MStack } from "@mui/material";
+import React from "react";
+export const Stack = ({ children, className, direction = "column", divider = undefined, justifyContent, alignItems, gap = 0, spacing = 0, }) => {
+    return (React.createElement(MStack, { className: className, direction: direction, divider: divider, justifyContent: justifyContent, alignItems: alignItems, gap: gap, spacing: spacing }, children));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stack = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const Stack = ({ children, className, direction = "column", divider = undefined, justifyContent, alignItems, gap = 0, spacing = 0, }) => {
-    return (react_1.default.createElement(material_1.Stack, { className: className, direction: direction, divider: divider, justifyContent: justifyContent, alignItems: alignItems, gap: gap, spacing: spacing }, children));
-};
-exports.Stack = Stack;

package/lib/components/common/StaticImage/staticImage.js

@@ -1,19 +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.StaticImage = void 0;
-const router_1 = require("next/router");
-const react_1 = __importDefault(require("react"));
+import { useRouter } from "next/router";
+import React from "react";
 /* eslint-disable @next/next/no-img-element -- allow static images for logos etc. */
-const StaticImage = ({ alt, height, src, width, }) => {
-    const router = (0, router_1.useRouter)();
+export const StaticImage = ({ alt, height, src, width, }) => {
+    const router = useRouter();
     // If src is an image in base64, don't add the basePath
-    const srcValue = (src === null || src === void 0 ? void 0 : src.startsWith("data:image/"))
+    const srcValue = src?.startsWith("data:image/")
         ? src
         : `${router.basePath}${src}`;
-    return react_1.default.createElement("img", { alt: alt, height: height, src: srcValue, width: width });
+    return React.createElement("img", { alt: alt, height: height, src: srcValue, width: width });
 };
-exports.StaticImage = StaticImage;
 /* eslint-enable @next/next/no-img-element -- allow static images for logos etc. */

package/lib/components/common/StaticImage/staticImage.stories.js

@@ -1,26 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StaticImageStory = void 0;
-const react_1 = __importDefault(require("react"));
-const logo_svg_1 = __importDefault(require("../../../images/logo.svg"));
-const staticImage_1 = require("./staticImage");
-exports.default = {
+import React from "react";
+import logo from "../../../images/logo.svg";
+import { StaticImage } from "./staticImage";
+export default {
     argTypes: {
         alt: { control: "text" },
         height: { control: "number" },
         src: { control: "text" },
         width: { control: "number" },
     },
-    component: staticImage_1.StaticImage,
+    component: StaticImage,
     title: "Components/Common/Image/StaticImage",
 };
-const StaticImageTemplate = (args) => (react_1.default.createElement(staticImage_1.StaticImage, Object.assign({}, args)));
-exports.StaticImageStory = StaticImageTemplate.bind({});
-exports.StaticImageStory.args = {
+const StaticImageTemplate = (args) => (React.createElement(StaticImage, { ...args }));
+export const StaticImageStory = StaticImageTemplate.bind({});
+StaticImageStory.args = {
     alt: "Data Explorer",
     height: 40,
-    src: logo_svg_1.default,
+    src: logo,
 };