@databiosphere/findable-ui 6.0.0 → 7.0.0

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",

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

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardContent = exports.CardSection = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../theme/common/breakpoints");
-const section_styles_1 = require("../Section/section.styles");
-exports.CardSection = styled_1.default.div `
+import styled from "@emotion/styled";
+import { TABLET } from "../../../theme/common/breakpoints";
+import { SectionContent } from "../Section/section.styles";
+export const CardSection = styled.div `
   display: grid;
   gap: 16px;
   padding: 20px 16px;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     padding: 20px;
   }
 `;
-exports.CardContent = (0, styled_1.default)(section_styles_1.SectionContent) ``;
+export const CardContent = styled(SectionContent) ``;

package/lib/components/common/Card/components/CardAction/cardAction.js

@@ -1,12 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { Link } from "../../../../Links/components/Link/link";
+export const CardAction = ({ label, target, url, }) => {
+    return React.createElement(Link, { label: label, target: target, url: url });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardAction = void 0;
-const react_1 = __importDefault(require("react"));
-const link_1 = require("../../../../Links/components/Link/link");
-const CardAction = ({ label, target, url, }) => {
-    return react_1.default.createElement(link_1.Link, { label: label, target: target, url: url });
-};
-exports.CardAction = CardAction;

package/lib/components/common/Card/components/CardActionArea/cardActionArea.js

@@ -1,28 +1,21 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardActionArea = void 0;
-const material_1 = require("@mui/material");
-const router_1 = require("next/router");
-const react_1 = __importDefault(require("react"));
-const entities_1 = require("../../../../Links/common/entities");
-const utils_1 = require("../../../../Links/common/utils");
-const CardActionArea = ({ cardUrl, children, }) => {
-    const { push } = (0, router_1.useRouter)();
+import { CardActionArea as MCardActionArea } from "@mui/material";
+import { useRouter } from "next/router";
+import React from "react";
+import { ANCHOR_TARGET } from "../../../../Links/common/entities";
+import { isClientSideNavigation } from "../../../../Links/common/utils";
+export const CardActionArea = ({ cardUrl, children, }) => {
+    const { push } = useRouter();
     // Callback fired when the card action area is clicked.
     // Determines url type (internal or external) and routes accordingly.
     const handleClick = (url) => {
         if (url) {
-            if ((0, utils_1.isClientSideNavigation)(url)) {
+            if (isClientSideNavigation(url)) {
                 push(url);
             }
             else {
-                window.open(url, entities_1.ANCHOR_TARGET.BLANK, "noopener noreferrer");
+                window.open(url, ANCHOR_TARGET.BLANK, "noopener noreferrer");
             }
         }
     };
-    return (react_1.default.createElement(material_1.CardActionArea, { onClick: () => handleClick(cardUrl) }, children));
+    return (React.createElement(MCardActionArea, { onClick: () => handleClick(cardUrl) }, children));
 };
-exports.CardActionArea = CardActionArea;

package/lib/components/common/Card/components/CardActions/cardActions.js

@@ -1,15 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Divider } from "@mui/material";
+import React from "react";
+import { CardActions as Actions } from "./cardActions.styles";
+export const CardActions = ({ children }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Divider, null),
+        React.createElement(Actions, null, children)));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardActions = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const cardActions_styles_1 = require("./cardActions.styles");
-const CardActions = ({ children }) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Divider, null),
-        react_1.default.createElement(cardActions_styles_1.CardActions, null, children)));
-};
-exports.CardActions = CardActions;

package/lib/components/common/Card/components/CardActions/cardActions.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.CardActions = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const fonts_1 = require("../../../../../styles/common/mixins/fonts");
-exports.CardActions = styled_1.default.div `
-  ${fonts_1.textBody500};
+import styled from "@emotion/styled";
+import { textBody500 } from "../../../../../styles/common/mixins/fonts";
+export const CardActions = styled.div `
+  ${textBody500};
   align-items: center;
   display: flex;
   gap: 16px;

package/lib/components/common/Card/components/CardMedia/cardMedia.js

@@ -1,14 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { StaticImage, } from "../../../StaticImage/staticImage";
+import { CardMedia as Media } from "./cardMedia.styles";
+export const CardMedia = ({ media }) => {
+    return (React.createElement(Media, null,
+        React.createElement(StaticImage, { alt: media.alt, height: media.height, src: media.src, width: media.width })));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardMedia = void 0;
-const react_1 = __importDefault(require("react"));
-const staticImage_1 = require("../../../StaticImage/staticImage");
-const cardMedia_styles_1 = require("./cardMedia.styles");
-const CardMedia = ({ media }) => {
-    return (react_1.default.createElement(cardMedia_styles_1.CardMedia, null,
-        react_1.default.createElement(staticImage_1.StaticImage, { alt: media.alt, height: media.height, src: media.src, width: media.width })));
-};
-exports.CardMedia = CardMedia;

package/lib/components/common/Card/components/CardMedia/cardMedia.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.CardMedia = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.CardMedia = styled_1.default.div `
+import styled from "@emotion/styled";
+export const CardMedia = styled.div `
   align-self: flex-start;
   grid-column: 2; // Card media positioned into the second column.
   justify-self: flex-end;

package/lib/components/common/Card/components/CardSecondaryText/cardSecondaryText.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 { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../../theme/common/typography";
+export const CardSecondaryText = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
+    return (React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400_2_LINES, ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardSecondaryText = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../theme/common/typography");
-const CardSecondaryText = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]) /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */;
-    return (react_1.default.createElement(material_1.Typography, Object.assign({ color: "ink.light", variant: typography_1.TEXT_BODY_SMALL_400_2_LINES }, props), children));
-};
-exports.CardSecondaryText = CardSecondaryText;

package/lib/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.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 { TEXT_BODY_SMALL_400_2_LINES } from "../../../../../theme/common/typography";
+import { CardSecondaryTitle as SecondaryTitle } from "./cardSecondaryTitle.styles";
+export const CardSecondaryTitle = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
+    return (React.createElement(SecondaryTitle, { color: "ink.light", variant: TEXT_BODY_SMALL_400_2_LINES, ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardSecondaryTitle = void 0;
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../theme/common/typography");
-const cardSecondaryTitle_styles_1 = require("./cardSecondaryTitle.styles");
-const CardSecondaryTitle = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]) /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */;
-    return (react_1.default.createElement(cardSecondaryTitle_styles_1.CardSecondaryTitle, Object.assign({ color: "ink.light", variant: typography_1.TEXT_BODY_SMALL_400_2_LINES }, props), children));
-};
-exports.CardSecondaryTitle = CardSecondaryTitle;

package/lib/components/common/Card/components/CardSecondaryTitle/cardSecondaryTitle.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.CardSecondaryTitle = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.CardSecondaryTitle = (0, styled_1.default)(material_1.Typography) `
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+export const CardSecondaryTitle = styled(Typography) `
   margin-top: -4px;
 `;

package/lib/components/common/Card/components/CardText/cardText.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 { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400_2_LINES } from "../../../../../theme/common/typography";
+export const CardText = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
+    return (React.createElement(Typography, { variant: TEXT_BODY_400_2_LINES, ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardText = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../theme/common/typography");
-const CardText = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]) /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */;
-    return (react_1.default.createElement(material_1.Typography, Object.assign({ variant: typography_1.TEXT_BODY_400_2_LINES }, props), children));
-};
-exports.CardText = CardText;

package/lib/components/common/Card/components/CardTitle/cardTitle.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 { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_LARGE_500 } from "../../../../../theme/common/typography";
+export const CardTitle = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
+    return (React.createElement(Typography, { component: "h4", variant: TEXT_BODY_LARGE_500, ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardTitle = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../theme/common/typography");
-const CardTitle = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]) /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */;
-    return (react_1.default.createElement(material_1.Typography, Object.assign({ component: "h4", variant: typography_1.TEXT_BODY_LARGE_500 }, props), children));
-};
-exports.CardTitle = CardTitle;

package/lib/components/common/Card/components/RoundedCard/roundedCard.js

@@ -1,13 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Card as MCard } from "@mui/material";
+import React from "react";
+import { RoundedPaper } from "../../../Paper/paper.styles";
+export const RoundedCard = ({ children }) => {
+    return React.createElement(MCard, { component: RoundedPaper }, children);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RoundedCard = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const paper_styles_1 = require("../../../Paper/paper.styles");
-const RoundedCard = ({ children }) => {
-    return react_1.default.createElement(material_1.Card, { component: paper_styles_1.RoundedPaper }, children);
-};
-exports.RoundedCard = RoundedCard;