@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/components/common/Button/components/ButtonTextUnderline/buttonTextUnderline.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const button_1 = require("../../button");
-exports.Button = (0, styled_1.default)(button_1.Button) `
+import styled from "@emotion/styled";
+import { Button as DXButton } from "../../button";
+export const Button = styled(DXButton) `
   font: inherit;
   line-height: inherit;
   text-decoration: underline;

package/lib/components/common/Button/components/CallToActionButton/callToActionButton.js

@@ -1,18 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CallToActionButton = void 0;
-const link_1 = __importDefault(require("next/link"));
-const react_1 = __importDefault(require("react"));
-const entities_1 = require("../../../../Links/common/entities");
-const utils_1 = require("../../../../Links/common/utils");
-const buttonPrimary_1 = require("../ButtonPrimary/buttonPrimary");
-const CallToActionButton = ({ ButtonElType: Button = buttonPrimary_1.ButtonPrimary, callToAction, className, disabled = false, }) => {
+import NLink from "next/link";
+import React from "react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../Links/common/utils";
+import { ButtonPrimary } from "../ButtonPrimary/buttonPrimary";
+export const CallToActionButton = ({ ButtonElType: Button = ButtonPrimary, callToAction, className, disabled = false, }) => {
     const { label, target, url } = callToAction;
-    const isInternal = (0, utils_1.isClientSideNavigation)(url);
-    return isInternal ? (react_1.default.createElement(link_1.default, { href: url, legacyBehavior: true, passHref: true },
-        react_1.default.createElement(Button, { className: className, disabled: disabled, href: "passHref", rel: "noopener", target: target || entities_1.ANCHOR_TARGET.SELF }, label))) : (react_1.default.createElement(Button, { className: className, disabled: disabled, href: url, rel: "noopener noreferrer", target: target || entities_1.ANCHOR_TARGET.BLANK }, label));
+    const isInternal = isClientSideNavigation(url);
+    return isInternal ? (React.createElement(NLink, { href: url, legacyBehavior: true, passHref: true },
+        React.createElement(Button, { className: className, disabled: disabled, href: "passHref", rel: "noopener", target: target || ANCHOR_TARGET.SELF }, label))) : (React.createElement(Button, { className: className, disabled: disabled, href: url, rel: "noopener noreferrer", target: target || ANCHOR_TARGET.BLANK }, label));
 };
-exports.CallToActionButton = CallToActionButton;

package/lib/components/common/Button/components/CallToActionButton/callToActionButton.stories.js

@@ -1,33 +1,27 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CallToActionButtonWithCustomComponentStory = exports.CallToActionButtonStory = void 0;
-const react_1 = __importDefault(require("react"));
-const entities_1 = require("../../../../Links/common/entities");
-const callToActionButton_1 = require("./callToActionButton");
-exports.default = {
+import React from "react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { CallToActionButton } from "./callToActionButton";
+export default {
     argTypes: {
         children: { control: { disabled: true } },
     },
-    component: callToActionButton_1.CallToActionButton,
+    component: CallToActionButton,
     title: "Components/Common/CallToActionButton",
 };
-const CallToActionButtonTemplate = (args) => react_1.default.createElement(callToActionButton_1.CallToActionButton, Object.assign({}, args));
+const CallToActionButtonTemplate = (args) => React.createElement(CallToActionButton, { ...args });
 const callToAction = {
     label: "Click here",
-    target: entities_1.ANCHOR_TARGET.BLANK,
+    target: ANCHOR_TARGET.BLANK,
     url: "https://www.google.com",
 };
-exports.CallToActionButtonStory = CallToActionButtonTemplate.bind({});
-exports.CallToActionButtonStory.args = {
+export const CallToActionButtonStory = CallToActionButtonTemplate.bind({});
+CallToActionButtonStory.args = {
     callToAction,
     className: "call-to-action-button",
     disabled: false,
 };
-exports.CallToActionButtonWithCustomComponentStory = CallToActionButtonTemplate.bind({});
-exports.CallToActionButtonWithCustomComponentStory.args = {
+export const CallToActionButtonWithCustomComponentStory = CallToActionButtonTemplate.bind({});
+CallToActionButtonWithCustomComponentStory.args = {
     ButtonElType: "a",
     callToAction,
 };

package/lib/components/common/Button/components/DropdownButton/dropdownButton.js

@@ -1,25 +1,6 @@
-"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 ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import React from "react";
+import { DropdownButton as Button } from "./dropdownButton.styles";
+export const DropdownButton = ({ children, disabled = false, open = false, ...props /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */ }) => {
+    return (React.createElement(Button, { disabled: disabled, EndIcon: ArrowDropDownRoundedIcon, open: open, ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownButton = void 0;
-const ArrowDropDownRounded_1 = __importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
-const react_1 = __importDefault(require("react"));
-const dropdownButton_styles_1 = require("./dropdownButton.styles");
-const DropdownButton = (_a) => {
-    var { children, disabled = false, open = false } = _a, props = __rest(_a, ["children", "disabled", "open"]) /* Spread props to allow for Mui ButtonProps specific prop overrides e.g. "onClick". */;
-    return (react_1.default.createElement(dropdownButton_styles_1.DropdownButton, Object.assign({ disabled: disabled, EndIcon: ArrowDropDownRounded_1.default, open: open }, props), children));
-};
-exports.DropdownButton = DropdownButton;

package/lib/components/common/Button/components/DropdownButton/dropdownButton.styles.js

@@ -1,26 +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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownButton = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const colors_1 = require("../../../../../styles/common/mixins/colors");
-const buttonSecondary_1 = require("../ButtonSecondary/buttonSecondary");
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { smokeLightest } from "../../../../../styles/common/mixins/colors";
+import { ButtonSecondary } from "../ButtonSecondary/buttonSecondary";
 // Dropdown button with "secondary" styles.
-exports.DropdownButton = (0, styled_1.default)(buttonSecondary_1.ButtonSecondary, {
+export const DropdownButton = styled(ButtonSecondary, {
     shouldForwardProp: (prop) => prop !== "open",
 }) `
   padding-right: 8px;
@@ -29,11 +12,8 @@ exports.DropdownButton = (0, styled_1.default)(buttonSecondary_1.ButtonSecondary
     margin-left: -6px;
   }
 
-  ${(_a) => {
-    var { open } = _a, props = __rest(_a, ["open"]);
-    return open &&
-        (0, react_1.css) `
-      background-color: ${(0, colors_1.smokeLightest)(props)};
-    `;
-}}
+  ${({ open, ...props }) => open &&
+    css `
+      background-color: ${smokeLightest(props)};
+    `}
 `;

package/lib/components/common/Button/components/FileDownloadButton/fileDownloadButton.js

@@ -1,41 +1,14 @@
-"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.FileDownloadButton = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const FileDownloadButton = ({ fileName, fileUrl, }) => {
-    const downloadRef = (0, react_1.useRef)(null);
+import { Box } from "@mui/material";
+import React, { useEffect, useRef } from "react";
+export const FileDownloadButton = ({ fileName, fileUrl, }) => {
+    const downloadRef = useRef(null);
     // Initiates file download when file url request is successful.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (downloadRef.current && fileName && fileUrl) {
             downloadRef.current.setAttribute("href", fileUrl);
             downloadRef.current.setAttribute("download", fileName);
             downloadRef.current.click();
         }
     }, [fileName, fileUrl]);
-    return (react_1.default.createElement(material_1.Box, { component: "a", download: true, ref: downloadRef, sx: { display: "none" } }));
+    return (React.createElement(Box, { component: "a", download: true, ref: downloadRef, sx: { display: "none" } }));
 };
-exports.FileDownloadButton = FileDownloadButton;

package/lib/components/common/Button/components/HelpIconButton/helpIconButton.js

@@ -1,20 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import Link from "next/link";
+import React from "react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../Links/common/utils";
+import { HelpIcon } from "../../../CustomIcon/components/HelpIcon/helpIcon";
+import { HelpIconButton as Button } from "./helpIconButton.styles";
+export const HelpIconButton = ({ size = "small", target, url, }) => {
+    const isInternal = isClientSideNavigation(url);
+    return isInternal ? (React.createElement(Link, { href: url, legacyBehavior: true, passHref: true },
+        React.createElement(Button, { href: "passHref", rel: "noopener", target: target || ANCHOR_TARGET.SELF },
+            React.createElement(HelpIcon, { fontSize: size })))) : (React.createElement(Button, { href: url, rel: "noopener noreferrer", target: target || ANCHOR_TARGET.BLANK },
+        React.createElement(HelpIcon, { fontSize: size })));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HelpIconButton = void 0;
-const link_1 = __importDefault(require("next/link"));
-const react_1 = __importDefault(require("react"));
-const entities_1 = require("../../../../Links/common/entities");
-const utils_1 = require("../../../../Links/common/utils");
-const helpIcon_1 = require("../../../CustomIcon/components/HelpIcon/helpIcon");
-const helpIconButton_styles_1 = require("./helpIconButton.styles");
-const HelpIconButton = ({ size = "small", target, url, }) => {
-    const isInternal = (0, utils_1.isClientSideNavigation)(url);
-    return isInternal ? (react_1.default.createElement(link_1.default, { href: url, legacyBehavior: true, passHref: true },
-        react_1.default.createElement(helpIconButton_styles_1.HelpIconButton, { href: "passHref", rel: "noopener", target: target || entities_1.ANCHOR_TARGET.SELF },
-            react_1.default.createElement(helpIcon_1.HelpIcon, { fontSize: size })))) : (react_1.default.createElement(helpIconButton_styles_1.HelpIconButton, { href: url, rel: "noopener noreferrer", target: target || entities_1.ANCHOR_TARGET.BLANK },
-        react_1.default.createElement(helpIcon_1.HelpIcon, { fontSize: size })));
-};
-exports.HelpIconButton = HelpIconButton;

package/lib/components/common/Button/components/HelpIconButton/helpIconButton.stories.js

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HelpIconButtonStory = void 0;
-const entities_1 = require("../../../../Links/common/entities");
-const helpIconButton_1 = require("./helpIconButton");
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { HelpIconButton } from "./helpIconButton";
 const meta = {
     argTypes: {
         size: { control: "select" },
         target: { control: "select" },
         url: { control: "text" },
     },
-    component: helpIconButton_1.HelpIconButton,
+    component: HelpIconButton,
     title: "Components/Common/HelpIconButton",
 };
-exports.default = meta;
-exports.HelpIconButtonStory = {
+export default meta;
+export const HelpIconButtonStory = {
     args: {
         size: "small",
-        target: entities_1.ANCHOR_TARGET.BLANK,
+        target: ANCHOR_TARGET.BLANK,
         url: "https://www.google.com/",
     },
 };

package/lib/components/common/Button/components/HelpIconButton/helpIconButton.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HelpIconButton = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.HelpIconButton = (0, styled_1.default)(material_1.ButtonBase) `
+import styled from "@emotion/styled";
+import { ButtonBase } from "@mui/material";
+export const HelpIconButton = styled(ButtonBase) `
   align-self: flex-start;
   color: ${({ theme }) => theme.palette.ink.light};
   vertical-align: bottom; // Vertical alignment is required to align the icon with text styles "textBody400".

package/lib/components/common/Button/components/LoginButton/loginButton.js

@@ -1,25 +1,6 @@
-"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 React from "react";
+import { LoginButton as Button, LoginButtonText } from "./loginButton.styles";
+export const LoginButton = ({ children, ...props }) => {
+    return (React.createElement(Button, { fullWidth: true, ...props },
+        React.createElement(LoginButtonText, null, children)));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoginButton = void 0;
-const react_1 = __importDefault(require("react"));
-const loginButton_styles_1 = require("./loginButton.styles");
-const LoginButton = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement(loginButton_styles_1.LoginButton, Object.assign({ fullWidth: true }, props),
-        react_1.default.createElement(loginButton_styles_1.LoginButtonText, null, children)));
-};
-exports.LoginButton = LoginButton;

package/lib/components/common/Button/components/LoginButton/loginButton.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.LoginButtonText = exports.LoginButton = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const buttonSecondary_1 = require("../ButtonSecondary/buttonSecondary");
-exports.LoginButton = (0, styled_1.default)(buttonSecondary_1.ButtonSecondary) `
+import styled from "@emotion/styled";
+import { ButtonSecondary } from "../ButtonSecondary/buttonSecondary";
+export const LoginButton = styled(ButtonSecondary) `
   .MuiButton-endIcon {
     margin-right: -6px;
   }
 `;
-exports.LoginButtonText = styled_1.default.span `
+export const LoginButtonText = styled.span `
   flex: 1;
   text-align: left;
 `;

package/lib/components/common/Button/components/NavigationButton/navigationButton.js

@@ -1,25 +1,6 @@
-"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 ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import React from "react";
+import { Button } from "./navigationButton.styles";
+export const NavigationButton = ({ children, isActive, ...props /* Spread props to allow for Button specific props ButtonProps e.g. "onClick". */ }) => {
+    return (React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: isActive, variant: "nav", ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationButton = void 0;
-const ArrowDropDownRounded_1 = __importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
-const react_1 = __importDefault(require("react"));
-const navigationButton_styles_1 = require("./navigationButton.styles");
-const NavigationButton = (_a) => {
-    var { children, isActive } = _a, props = __rest(_a, ["children", "isActive"]) /* Spread props to allow for Button specific props ButtonProps e.g. "onClick". */;
-    return (react_1.default.createElement(navigationButton_styles_1.Button, Object.assign({ EndIcon: ArrowDropDownRounded_1.default, isActive: isActive, variant: "nav" }, props), children));
-};
-exports.NavigationButton = NavigationButton;

package/lib/components/common/Button/components/NavigationButton/navigationButton.styles.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.Button = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const button_1 = require("../../button");
-exports.Button = (0, styled_1.default)(button_1.Button, {
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Button as DXButton } from "../../button";
+export const Button = styled(DXButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
 }) `
   background-color: ${({ theme }) => theme.palette.common.white};
@@ -21,7 +15,7 @@ exports.Button = (0, styled_1.default)(button_1.Button, {
 
   // Button is "active" i.e. menu is open.
   ${({ isActive, theme }) => isActive &&
-    (0, react_1.css) `
+    css `
       background-color: ${theme.palette.smoke.light};
     `};
 

package/lib/components/common/ButtonGroup/buttonGroup.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 { ButtonGroup as MButtonGroup, } from "@mui/material";
+import React, { Fragment } from "react";
+export const ButtonGroup = ({ Buttons, className, color = "primary", disabled = false, fullWidth = false, orientation = "horizontal", size = "small", variant = "contained", ...props }) => {
+    return (React.createElement(MButtonGroup, { className: className, color: color, disabled: disabled, fullWidth: fullWidth, orientation: orientation, size: size, variant: variant, ...props }, Buttons.map((Button, i) => (React.createElement(Fragment, { key: `button-${i}` }, Button)))));
 };
-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.ButtonGroup = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const ButtonGroup = (_a) => {
-    var { Buttons, className, color = "primary", disabled = false, fullWidth = false, orientation = "horizontal", size = "small", variant = "contained" } = _a, props = __rest(_a, ["Buttons", "className", "color", "disabled", "fullWidth", "orientation", "size", "variant"]);
-    return (react_1.default.createElement(material_1.ButtonGroup, Object.assign({ className: className, color: color, disabled: disabled, fullWidth: fullWidth, orientation: orientation, size: size, variant: variant }, props), Buttons.map((Button, i) => (react_1.default.createElement(react_1.Fragment, { key: `button-${i}` }, Button)))));
-};
-exports.ButtonGroup = ButtonGroup;

package/lib/components/common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton.js

@@ -1,13 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Button as MButton } from "@mui/material";
+import React from "react";
+import { LoadingIcon } from "../../../CustomIcon/components/LoadingIcon/loadingIcon";
+export const ButtonGroupButton = ({ className, disabled = false, label, loading, loadingIcon = React.createElement(LoadingIcon, { fontSize: "small" }), onClick, }) => {
+    return (React.createElement(MButton, { className: className, disabled: disabled, onClick: loading ? undefined : onClick }, loading ? loadingIcon : label));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonGroupButton = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const loadingIcon_1 = require("../../../CustomIcon/components/LoadingIcon/loadingIcon");
-const ButtonGroupButton = ({ className, disabled = false, label, loading, loadingIcon = react_1.default.createElement(loadingIcon_1.LoadingIcon, { fontSize: "small" }), onClick, }) => {
-    return (react_1.default.createElement(material_1.Button, { className: className, disabled: disabled, onClick: loading ? undefined : onClick }, loading ? loadingIcon : label));
-};
-exports.ButtonGroupButton = ButtonGroupButton;

package/lib/components/common/Card/card.js

@@ -1,53 +1,26 @@
-"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.Card = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const paper_styles_1 = require("../Paper/paper.styles");
-const card_styles_1 = require("./card.styles");
-const cardAction_1 = require("./components/CardAction/cardAction");
-const cardActionArea_1 = require("./components/CardActionArea/cardActionArea");
-const cardActions_1 = require("./components/CardActions/cardActions");
-const cardMedia_1 = require("./components/CardMedia/cardMedia");
-const cardSecondaryText_1 = require("./components/CardSecondaryText/cardSecondaryText");
-const cardSecondaryTitle_1 = require("./components/CardSecondaryTitle/cardSecondaryTitle");
-const cardText_1 = require("./components/CardText/cardText");
-const cardTitle_1 = require("./components/CardTitle/cardTitle");
-const Card = ({ cardActions, cardUrl, media, Paper = paper_styles_1.RoundedPaper, secondaryText, secondaryTitle, text, title, }) => {
-    const CardActionArea = cardUrl ? cardActionArea_1.CardActionArea : react_1.Fragment;
+import { Card as MCard } from "@mui/material";
+import React, { Fragment } from "react";
+import { RoundedPaper } from "../Paper/paper.styles";
+import { CardContent, CardSection } from "./card.styles";
+import { CardAction, } from "./components/CardAction/cardAction";
+import { CardActionArea as ActionArea } from "./components/CardActionArea/cardActionArea";
+import { CardActions } from "./components/CardActions/cardActions";
+import { CardMedia } from "./components/CardMedia/cardMedia";
+import { CardSecondaryText } from "./components/CardSecondaryText/cardSecondaryText";
+import { CardSecondaryTitle } from "./components/CardSecondaryTitle/cardSecondaryTitle";
+import { CardText } from "./components/CardText/cardText";
+import { CardTitle } from "./components/CardTitle/cardTitle";
+export const Card = ({ cardActions, cardUrl, media, Paper = RoundedPaper, secondaryText, secondaryTitle, text, title, }) => {
+    const CardActionArea = cardUrl ? ActionArea : Fragment;
     const cardActionAreaProps = cardUrl ? { cardUrl } : {};
-    return (react_1.default.createElement(material_1.Card, { component: Paper },
-        react_1.default.createElement(CardActionArea, Object.assign({}, cardActionAreaProps),
-            react_1.default.createElement(card_styles_1.CardSection, null,
-                react_1.default.createElement(card_styles_1.CardContent, null,
-                    title && react_1.default.createElement(cardTitle_1.CardTitle, null, title),
-                    secondaryTitle && (react_1.default.createElement(cardSecondaryTitle_1.CardSecondaryTitle, null, secondaryTitle)),
-                    text && react_1.default.createElement(cardText_1.CardText, null, text),
-                    secondaryText && (react_1.default.createElement(cardSecondaryText_1.CardSecondaryText, null, secondaryText))),
-                (media === null || media === void 0 ? void 0 : media.src) && react_1.default.createElement(cardMedia_1.CardMedia, { media: media }),
-                cardActions && cardActions.length > 0 && (react_1.default.createElement(cardActions_1.CardActions, null, cardActions.map((cardAction, i) => (react_1.default.createElement(cardAction_1.CardAction, Object.assign({ key: `${cardAction.label}${i}` }, cardAction))))))))));
+    return (React.createElement(MCard, { component: Paper },
+        React.createElement(CardActionArea, { ...cardActionAreaProps },
+            React.createElement(CardSection, null,
+                React.createElement(CardContent, null,
+                    title && React.createElement(CardTitle, null, title),
+                    secondaryTitle && (React.createElement(CardSecondaryTitle, null, secondaryTitle)),
+                    text && React.createElement(CardText, null, text),
+                    secondaryText && (React.createElement(CardSecondaryText, null, secondaryText))),
+                media?.src && React.createElement(CardMedia, { media: media }),
+                cardActions && cardActions.length > 0 && (React.createElement(CardActions, null, cardActions.map((cardAction, i) => (React.createElement(CardAction, { key: `${cardAction.label}${i}`, ...cardAction })))))))));
 };
-exports.Card = Card;

package/lib/components/common/Card/card.stories.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.CardMediaStory = exports.CardActionsStory = exports.CardStory = void 0;
-const logo_svg_1 = __importDefault(require("../../../images/logo.svg"));
-const card_1 = require("./card");
-exports.default = {
-    component: card_1.Card,
+import logo from "../../../images/logo.svg";
+import { Card } from "./card";
+export default {
+    component: Card,
     title: "Components/Common/Card",
 };
-exports.CardStory = {
+export const CardStory = {
     args: {
         cardUrl: "https://anvilproject.org/",
         secondaryText: "22 March 2022",
@@ -18,7 +12,7 @@ exports.CardStory = {
         title: "Out Now! CSER & eMERGE Variant Bakeoff 2.0",
     },
 };
-exports.CardActionsStory = {
+export const CardActionsStory = {
     args: {
         cardActions: [
             { label: "Learn More", url: "https://anvilproject.org/learn" },
@@ -29,10 +23,10 @@ exports.CardActionsStory = {
         title: "CCDG",
     },
 };
-exports.CardMediaStory = {
+export const CardMediaStory = {
     args: {
         cardUrl: "https://anvilproject.org/data",
-        media: Object.assign(Object.assign({}, logo_svg_1.default), { height: 100, width: 89 }),
+        media: { ...logo, height: 100, width: 89 },
         secondaryTitle: "Baylor College of Medicine, Houston: Sharon Plon, MD, PhD; Will Parsons, MD, PhD; and Amy McGuire, PhD",
         text: "The Baylor College of Medicine Texas KidsCanSeq Study aims to assess the utility of genome-scale testing, compared with more targeted methods, in diverse pediatric cancer patient populations and diverse healthcare settings in Texas.",
         title: "Evaluating Utility And Improving Implementation Of Genomic Sequencing For Pediatric Cancer Patients In The Diverse Population And Healthcare Settings Of Texas: The KidsCanSeq Study",