@databiosphere/findable-ui 6.0.0 → 7.0.0

package/lib/components/TableCreator/tableCreator.js

@@ -1,59 +1,42 @@
-"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.TableCreator = void 0;
-const react_1 = __importStar(require("react"));
-const paper_1 = require("../common/Paper/paper");
-const ComponentCreator_1 = require("../ComponentCreator/ComponentCreator");
-const loading_1 = require("../Loading/loading");
-const utils_1 = require("../Table/common/utils");
-const rowSelectionCell_1 = require("../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell");
-const headSelectionCell_1 = require("../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell");
-const table_1 = require("../Table/table");
-const constants_1 = require("./common/constants");
-const utils_2 = require("./common/utils");
-const tableCreator_styles_1 = require("./tableCreator.styles");
+import React, { useMemo } from "react";
+import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
+import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
+import { Loading } from "../Loading/loading";
+import { arrIncludesSome, getInitialState, sortingFn, } from "../Table/common/utils";
+import { RowSelectionCell } from "../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
+import { HeadSelectionCell } from "../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell";
+import { Table } from "../Table/table";
+import { COLUMN_CONFIGS } from "./common/constants";
+import { buildBaseColumnDef } from "./common/utils";
+import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
 const createCell = (config) => function CellCreator(cellContext) {
-    return (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: [config.componentConfig], response: cellContext.row.original, viewContext: { cellContext } }));
+    return (React.createElement(ComponentCreator, { components: [config.componentConfig], response: cellContext.row.original, viewContext: { cellContext } }));
 };
 const createHeaderSelectionCell = () => function CellCreator({ table }) {
-    return react_1.default.createElement(headSelectionCell_1.HeadSelectionCell, { tableInstance: table });
+    return React.createElement(HeadSelectionCell, { tableInstance: table });
 };
 const createRowSelectionCell = () => function CellCreator({ row }) {
-    return react_1.default.createElement(rowSelectionCell_1.RowSelectionCell, { row: row });
+    return React.createElement(RowSelectionCell, { row: row });
 };
-const TableCreator = ({ columns, defaultSort, getRowId, items, listView, loading, }) => {
-    const columnDefs = (0, react_1.useMemo)(() => columns.reduce((acc, columnConfig) => {
-        acc.push(Object.assign(Object.assign({}, (0, utils_2.buildBaseColumnDef)(columnConfig)), { cell: createCell(columnConfig), filterFn: utils_1.arrIncludesSome, sortingFn: utils_1.sortingFn }));
+export const TableCreator = ({ columns, defaultSort, getRowId, items, listView, loading, }) => {
+    const columnDefs = useMemo(() => columns.reduce((acc, columnConfig) => {
+        acc.push({
+            ...buildBaseColumnDef(columnConfig),
+            cell: createCell(columnConfig),
+            filterFn: arrIncludesSome,
+            sortingFn: sortingFn,
+        });
         return acc;
     }, [
-        Object.assign(Object.assign({}, (0, utils_2.buildBaseColumnDef)(constants_1.COLUMN_CONFIGS.SELECT)), { cell: createRowSelectionCell(), header: createHeaderSelectionCell() }),
+        /* Initialize column definitions with the "select" column */
+        {
+            ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),
+            cell: createRowSelectionCell(),
+            header: createHeaderSelectionCell(),
+        },
     ]), [columns]);
-    const initialState = (0, utils_1.getInitialState)(columns, defaultSort);
-    return (react_1.default.createElement(tableCreator_styles_1.TableCreator, null,
-        react_1.default.createElement(loading_1.Loading, { appear: false, loading: loading || false, panelStyle: paper_1.PAPER_PANEL_STYLE.FLUID }),
-        react_1.default.createElement(table_1.Table, { columns: columnDefs, getRowId: getRowId, initialState: initialState, items: items, listView: listView, loading: loading })));
+    const initialState = getInitialState(columns, defaultSort);
+    return (React.createElement(TableCreatorContainer, null,
+        React.createElement(Loading, { appear: false, loading: loading || false, panelStyle: PAPER_PANEL_STYLE.FLUID }),
+        React.createElement(Table, { columns: columnDefs, getRowId: getRowId, initialState: initialState, items: items, listView: listView, loading: loading })));
 };
-exports.TableCreator = TableCreator;

package/lib/components/TableCreator/tableCreator.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.TableCreator = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.TableCreator = styled_1.default.div `
+import styled from "@emotion/styled";
+export const TableCreator = styled.div `
   position: relative; // Required; when the table mounts, the loading element should not transition in and therefore to position the loading element correctly, the parent container must be styled with position relative.
 `;

package/lib/components/TempError/components/errorBox.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";
+export const ErrorBox = ({ message, title }) => {
+    return (React.createElement("div", null,
+        React.createElement("p", null, title),
+        React.createElement("div", null, message)));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorBox = void 0;
-const react_1 = __importDefault(require("react"));
-const ErrorBox = ({ message, title }) => {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("p", null, title),
-        react_1.default.createElement("div", null, message)));
-};
-exports.ErrorBox = ErrorBox;

package/lib/components/TempError/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TempError = void 0;
-var tempError_1 = require("./tempError");
-Object.defineProperty(exports, "TempError", { enumerable: true, get: function () { return tempError_1.TempError; } });
+export { TempError } from "./tempError";

package/lib/components/TempError/tempError.js

@@ -1,19 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { isAxiosError } from "axios";
+import React from "react";
+import { ErrorBox } from "./components/errorBox";
+export const TempError = ({ error }) => {
+    const { code, request } = isAxiosError(error)
+        ? {
+            ...error,
+            code: error.response?.status,
+            request: error.request.responseURL,
+        }
+        : { ...error, code: null, request: null };
+    return (React.createElement("div", null,
+        code && React.createElement(ErrorBox, { title: "Error Code", message: `${code}` }),
+        request && React.createElement(ErrorBox, { title: "Request URL", message: request }),
+        React.createElement(ErrorBox, { title: "Error Message", message: error.message })));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TempError = void 0;
-const axios_1 = require("axios");
-const react_1 = __importDefault(require("react"));
-const errorBox_1 = require("./components/errorBox");
-const TempError = ({ error }) => {
-    var _a;
-    const { code, request } = (0, axios_1.isAxiosError)(error)
-        ? Object.assign(Object.assign({}, error), { code: (_a = error.response) === null || _a === void 0 ? void 0 : _a.status, request: error.request.responseURL }) : Object.assign(Object.assign({}, error), { code: null, request: null });
-    return (react_1.default.createElement("div", null,
-        code && react_1.default.createElement(errorBox_1.ErrorBox, { title: "Error Code", message: `${code}` }),
-        request && react_1.default.createElement(errorBox_1.ErrorBox, { title: "Request URL", message: request }),
-        react_1.default.createElement(errorBox_1.ErrorBox, { title: "Error Message", message: error.message })));
-};
-exports.TempError = TempError;

package/lib/components/common/Accordion/accordion.js

@@ -1,54 +1,15 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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.Accordion = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const typography_1 = require("../../../theme/common/typography");
-const addIcon_1 = require("../CustomIcon/components/AddIcon/addIcon");
-const removeIcon_1 = require("../CustomIcon/components/RemoveIcon/removeIcon");
-const Accordion = (_a) => {
-    var { children, collapseIcon = react_1.default.createElement(removeIcon_1.RemoveIcon, { color: "primary", fontSize: "medium" }), expanded, expandIcon = react_1.default.createElement(addIcon_1.AddIcon, { color: "primary", fontSize: "medium" }), title } = _a, props = __rest(_a, ["children", "collapseIcon", "expanded", "expandIcon", "title"]) /* Spread props to allow for Accordion specific props AccordionProps e.g. "disabled". */;
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(expanded || false);
+import { Accordion as MAccordion, AccordionDetails, AccordionSummary, Typography, } from "@mui/material";
+import React, { useState } from "react";
+import { TEXT_BODY_LARGE_500 } from "../../../theme/common/typography";
+import { AddIcon } from "../CustomIcon/components/AddIcon/addIcon";
+import { RemoveIcon } from "../CustomIcon/components/RemoveIcon/removeIcon";
+export const Accordion = ({ children, collapseIcon = React.createElement(RemoveIcon, { color: "primary", fontSize: "medium" }), expanded, expandIcon = React.createElement(AddIcon, { color: "primary", fontSize: "medium" }), title, ...props /* Spread props to allow for Accordion specific props AccordionProps e.g. "disabled". */ }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded || false);
     const onToggleExpanded = () => {
         setIsExpanded((expanded) => !expanded);
     };
-    return (react_1.default.createElement(material_1.Accordion, Object.assign({ expanded: isExpanded, onChange: onToggleExpanded }, props),
-        react_1.default.createElement(material_1.AccordionSummary, { expandIcon: isExpanded ? collapseIcon : expandIcon },
-            react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_LARGE_500 }, title)),
-        react_1.default.createElement(material_1.AccordionDetails, null, children)));
+    return (React.createElement(MAccordion, { expanded: isExpanded, onChange: onToggleExpanded, ...props },
+        React.createElement(AccordionSummary, { expandIcon: isExpanded ? collapseIcon : expandIcon },
+            React.createElement(Typography, { variant: TEXT_BODY_LARGE_500 }, title)),
+        React.createElement(AccordionDetails, null, children)));
 };
-exports.Accordion = Accordion;

package/lib/components/common/Accordion/accordion.stories.js

@@ -1,28 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionsStory = exports.AccordionStory = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const accordion_1 = require("./accordion");
-exports.default = {
-    component: accordion_1.Accordion,
+import { Box } from "@mui/material";
+import React from "react";
+import { Accordion } from "./accordion";
+export default {
+    component: Accordion,
     title: "Components/Common/Accordion",
 };
-exports.AccordionStory = {
+export const AccordionStory = {
     args: {
         children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
         title: "CSER Phase II Harmonized Measures",
     },
 };
-exports.AccordionsStory = {
-    render: () => {
-        var _a, _b, _c, _d;
-        return (react_1.default.createElement(material_1.Box, { bgcolor: "white" },
-            react_1.default.createElement(accordion_1.Accordion, { title: ((_a = exports.AccordionStory.args) === null || _a === void 0 ? void 0 : _a.title) || "" }, ((_b = exports.AccordionStory.args) === null || _b === void 0 ? void 0 : _b.children) || ""),
-            react_1.default.createElement(accordion_1.Accordion, { title: "Information about the CSER1 Consortium" }, ((_c = exports.AccordionStory.args) === null || _c === void 0 ? void 0 : _c.children) || ""),
-            react_1.default.createElement(accordion_1.Accordion, { title: "Genetic and genomic online CME courses" }, ((_d = exports.AccordionStory.args) === null || _d === void 0 ? void 0 : _d.children) || "")));
-    },
+export const AccordionsStory = {
+    render: () => (React.createElement(Box, { bgcolor: "white" },
+        React.createElement(Accordion, { title: AccordionStory.args?.title || "" }, AccordionStory.args?.children || ""),
+        React.createElement(Accordion, { title: "Information about the CSER1 Consortium" }, AccordionStory.args?.children || ""),
+        React.createElement(Accordion, { title: "Genetic and genomic online CME courses" }, AccordionStory.args?.children || ""))),
 };

package/lib/components/common/Alert/alert.js

@@ -1,14 +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.Alert = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const Alert = ({ children, className, color, icon, severity, title, variant = "standard", }) => {
-    return (react_1.default.createElement(material_1.Alert, { className: className, color: color, icon: icon, severity: severity, variant: variant },
-        title && react_1.default.createElement(material_1.AlertTitle, null, title),
+import { Alert as MAlert, AlertTitle, } from "@mui/material";
+import React from "react";
+export const Alert = ({ children, className, color, icon, severity, title, variant = "standard", }) => {
+    return (React.createElement(MAlert, { className: className, color: color, icon: icon, severity: severity, variant: variant },
+        title && React.createElement(AlertTitle, null, title),
         children));
 };
-exports.Alert = Alert;

package/lib/components/common/Alert/alert.stories.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertStory = void 0;
-const alert_1 = require("./alert");
-exports.default = {
+import { Alert } from "./alert";
+export default {
     argTypes: {
         children: {
             control: "text",
@@ -26,10 +23,10 @@ exports.default = {
             description: "Type of the alert",
         },
     },
-    component: alert_1.Alert,
+    component: Alert,
     title: "Components/Common/Alert",
 };
-exports.AlertStory = {
+export const AlertStory = {
     args: {
         children: "Something certainly happened",
         color: "warning",

package/lib/components/common/Alert/alert.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.FluidAlert = exports.FlatAlert = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../theme/common/breakpoints");
-const alert_1 = require("./alert");
+import styled from "@emotion/styled";
+import { TABLET } from "../../../theme/common/breakpoints";
+import { Alert } from "./alert";
 /**
  * Flat alert - typically used when in full stretch or full "bleed" across a container.
  * e.g. the entire width of mobile viewports.
  */
-exports.FlatAlert = (0, styled_1.default)(alert_1.Alert) `
+export const FlatAlert = styled(Alert) `
   border-left: none;
   border-radius: 0;
   border-right: none;
@@ -22,8 +16,8 @@ exports.FlatAlert = (0, styled_1.default)(alert_1.Alert) `
  * Fluid alert - typically used to transition between flat paper (mobile) and rounded paper (tablet or desktop).
  */
 /* eslint-enable valid-jsdoc -- disable require param */
-exports.FluidAlert = (0, styled_1.default)(alert_1.Alert) `
-  ${({ theme }) => theme.breakpoints.down(breakpoints_1.TABLET)} {
+export const FluidAlert = styled(Alert) `
+  ${({ theme }) => theme.breakpoints.down(TABLET)} {
     border-left: none;
     border-radius: 0;
     border-right: none;

package/lib/components/common/Alert/components/AlertText/alertText.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.AlertText = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.AlertText = styled_1.default.div `
+import styled from "@emotion/styled";
+export const AlertText = styled.div `
   ul {
     padding-left: 24px;
     margin: 8px 0;

package/lib/components/common/AnchorLink/anchorLink.js

@@ -1,14 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
+import React from "react";
+import { AnchorLink as Link } from "./anchorLink.styles";
+export const AnchorLink = ({ anchorLink, className, }) => {
+    return (React.createElement(Link, { "aria-label": anchorLink, className: className, href: `#${anchorLink}` },
+        React.createElement(LinkRoundedIcon, { fontSize: "xsmall" })));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnchorLink = void 0;
-const LinkRounded_1 = __importDefault(require("@mui/icons-material/LinkRounded"));
-const react_1 = __importDefault(require("react"));
-const anchorLink_styles_1 = require("./anchorLink.styles");
-const AnchorLink = ({ anchorLink, className, }) => {
-    return (react_1.default.createElement(anchorLink_styles_1.AnchorLink, { "aria-label": anchorLink, className: className, href: `#${anchorLink}` },
-        react_1.default.createElement(LinkRounded_1.default, { fontSize: "xsmall" })));
-};
-exports.AnchorLink = AnchorLink;

package/lib/components/common/AnchorLink/anchorLink.styles.js

@@ -1,14 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnchorLink = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const link_1 = __importDefault(require("next/link"));
-const colors_1 = require("../../../styles/common/mixins/colors");
-exports.AnchorLink = (0, styled_1.default)(link_1.default) `
-  color: ${colors_1.inkLight};
+import styled from "@emotion/styled";
+import Link from "next/link";
+import { inkLight } from "../../../styles/common/mixins/colors";
+export const AnchorLink = styled(Link) `
+  color: ${inkLight};
   margin-left: 4px;
   opacity: 0;
   position: absolute;

package/lib/components/common/Banner/banner.js

@@ -1,43 +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;
-};
-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.Banner = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-exports.Banner = (0, react_1.forwardRef)(function Banner(_a, ref) {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]) /* Spread props to allow for Mui AlertProps specific prop overrides. */;
-    return (react_1.default.createElement(material_1.Alert, Object.assign({ className: className, ref: ref }, props), children));
+import { Alert as MAlert } from "@mui/material";
+import React, { forwardRef } from "react";
+export const Banner = forwardRef(function Banner({ children, className, ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ }, ref) {
+    return (React.createElement(MAlert, { className: className, ref: ref, ...props }, children));
 });

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.js

@@ -1,24 +1,5 @@
-"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 { Alert } from "./bannerPrimary.styles";
+export const BannerPrimary = ({ children, className, ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ }) => {
+    return (React.createElement(Alert, { className: className, color: "primary", elevation: 0, icon: false, variant: "standard", ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerPrimary = void 0;
-const react_1 = __importDefault(require("react"));
-const bannerPrimary_styles_1 = require("./bannerPrimary.styles");
-const BannerPrimary = (_a) => {
-    var { children, className } = _a, props = __rest(_a, ["children", "className"]) /* Spread props to allow for Mui AlertProps specific prop overrides. */;
-    return (react_1.default.createElement(bannerPrimary_styles_1.Alert, Object.assign({ className: className, color: "primary", elevation: 0, icon: false, variant: "standard" }, props), children));
-};
-exports.BannerPrimary = BannerPrimary;

package/lib/components/common/Banner/components/BannerPrimary/bannerPrimary.styles.js

@@ -1,25 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../../../styles/common/mixins/colors");
-const fonts_1 = require("../../../../../styles/common/mixins/fonts");
-exports.Alert = (0, styled_1.default)(material_1.Alert) `
+import styled from "@emotion/styled";
+import { Alert as MAlert } from "@mui/material";
+import { primaryMain, white } from "../../../../../styles/common/mixins/colors";
+import { textBodySmall400 } from "../../../../../styles/common/mixins/fonts";
+export const Alert = styled(MAlert) `
   border-radius: 0;
   justify-content: center;
   padding: 8px;
 
   &.MuiAlert-standardPrimary {
-    background-color: ${colors_1.primaryMain};
-    color: ${colors_1.white};
+    background-color: ${primaryMain};
+    color: ${white};
   }
 
   .MuiAlert-message {
-    ${fonts_1.textBodySmall400};
+    ${textBodySmall400};
     text-align: center;
   }
 `;