@databiosphere/findable-ui 5.0.0 → 7.0.0

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;
   }
 `;

package/lib/components/common/Banner/components/CookieBanner/cookieBanner.js

@@ -1,67 +1,28 @@
-"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.CookieBanner = void 0;
-const react_1 = __importStar(require("react"));
-const entities_1 = require("../../../../../hooks/useFeatureFlag/common/entities");
-const utils_1 = require("../../../../../hooks/useLocalStorage/common/utils");
-const useLocalStorage_1 = require("../../../../../hooks/useLocalStorage/useLocalStorage");
-const buttonPrimary_1 = require("../../../Button/components/ButtonPrimary/buttonPrimary");
-const dismissibleBanner_1 = require("../DismissibleBanner/dismissibleBanner");
-const cookieBanner_styles_1 = require("./cookieBanner.styles");
-const CookieBanner = ({ className, localStorageKey, message, secondaryAction, }) => {
-    const localStorage = (0, useLocalStorage_1.useLocalStorage)(localStorageKey);
-    const isCookieAccepted = localStorage === entities_1.FLAG.TRUE;
+import React, { forwardRef, Fragment } from "react";
+import { FLAG } from "../../../../../hooks/useFeatureFlag/common/entities";
+import { setLocalStorage } from "../../../../../hooks/useLocalStorage/common/utils";
+import { useLocalStorage } from "../../../../../hooks/useLocalStorage/useLocalStorage";
+import { ButtonPrimary } from "../../../Button/components/ButtonPrimary/buttonPrimary";
+import { DismissibleBanner } from "../DismissibleBanner/dismissibleBanner";
+import { CookieBanner as Banner } from "./cookieBanner.styles";
+export const CookieBanner = ({ className, localStorageKey, message, secondaryAction, }) => {
+    const localStorage = useLocalStorage(localStorageKey);
+    const isCookieAccepted = localStorage === FLAG.TRUE;
     // Callback fired when the banner requests to be closed.
     const onDismiss = () => {
-        (0, utils_1.setLocalStorage)(localStorageKey, entities_1.FLAG.TRUE);
+        setLocalStorage(localStorageKey, FLAG.TRUE);
     };
-    return (react_1.default.createElement(dismissibleBanner_1.DismissibleBanner, { Alert: Alert, className: className, onDismiss: onDismiss, open: !isCookieAccepted, slots: {
+    return (React.createElement(DismissibleBanner, { Alert: Alert, className: className, onDismiss: onDismiss, open: !isCookieAccepted, slots: {
             closeButton: (props) => renderCloseButton(props, secondaryAction),
         } }, message));
 };
-exports.CookieBanner = CookieBanner;
 /**
  * Return the cookie banner alert.
  * @param props - Alert props e.g. "onClick" to close banner.
  * @returns alert element.
  */
-const Alert = (0, react_1.forwardRef)(function Alert(_a, ref) {
-    var props = __rest(_a, []);
-    return (react_1.default.createElement(cookieBanner_styles_1.CookieBanner, Object.assign({ color: "ink", elevation: 2, icon: false, ref: ref, variant: "filled" }, props), props.children));
+const Alert = forwardRef(function Alert({ ...props }, ref) {
+    return (React.createElement(Banner, { color: "ink", elevation: 2, icon: false, ref: ref, variant: "filled", ...props }, props.children));
 });
 /**
  * Returns the close action component(s).
@@ -70,7 +31,7 @@ const Alert = (0, react_1.forwardRef)(function Alert(_a, ref) {
  * @returns close button element(s).
  */
 function renderCloseButton(buttonProps, secondaryAction) {
-    return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(buttonPrimary_1.ButtonPrimary, { onClick: buttonProps.onClick }, "Ok, Got It"),
+    return (React.createElement(Fragment, null,
+        React.createElement(ButtonPrimary, { onClick: buttonProps.onClick }, "Ok, Got It"),
         secondaryAction));
 }

package/lib/components/common/Banner/components/CookieBanner/cookieBanner.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.CookieBanner = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../../styles/common/mixins/colors");
-const fonts_1 = require("../../../../../styles/common/mixins/fonts");
-const shadows_1 = require("../../../../../styles/common/mixins/shadows");
-const banner_1 = require("../../banner");
-exports.CookieBanner = (0, styled_1.default)(banner_1.Banner) `
+import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../../../../styles/common/mixins/breakpoints";
+import { white } from "../../../../../styles/common/mixins/colors";
+import { textBody400 } from "../../../../../styles/common/mixins/fonts";
+import { shadows02 } from "../../../../../styles/common/mixins/shadows";
+import { Banner } from "../../banner";
+export const CookieBanner = styled(Banner) `
   bottom: 0;
-  box-shadow: ${shadows_1.shadows02};
-  color: ${colors_1.white};
+  box-shadow: ${shadows02};
+  color: ${white};
   flex-direction: column;
   gap: 16px;
   left: 0;
@@ -24,7 +18,7 @@ exports.CookieBanner = (0, styled_1.default)(banner_1.Banner) `
   z-index: 1100; // Above support fab, below support form.
 
   .MuiAlert-message {
-    ${fonts_1.textBody400};
+    ${textBody400};
 
     .MuiLink-root {
       color: inherit;
@@ -44,7 +38,7 @@ exports.CookieBanner = (0, styled_1.default)(banner_1.Banner) `
     padding: 0;
   }
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     box-sizing: content-box;
     margin: 16px;
     max-width: 400px;

package/lib/components/common/Banner/components/DismissibleBanner/dismissibleBanner.js

@@ -1,55 +1,16 @@
-"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.DismissibleBanner = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const DismissibleBanner = (_a) => {
-    var { Alert = material_1.Alert /* Requires forwardRef to be used as a child of Fade. */, className, children, onDismiss, open } = _a, props = __rest(_a, ["Alert", "className", "children", "onDismiss", "open"]) /* Spread props to allow for Mui AlertProps specific prop overrides. */;
-    const [isIn, setIsIn] = (0, react_1.useState)(false);
+import { Alert as MAlert, Fade, } from "@mui/material";
+import React, { useEffect, useState } from "react";
+export const DismissibleBanner = ({ Alert = MAlert /* Requires forwardRef to be used as a child of Fade. */, className, children, onDismiss, open, ...props /* Spread props to allow for Mui AlertProps specific prop overrides. */ }) => {
+    const [isIn, setIsIn] = useState(false);
     // Callback fired when the component requests to be closed.
     const onClose = () => {
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        onDismiss?.();
         setIsIn(false);
     };
     // Sets the open state.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setIsIn(open);
     }, [open]);
-    return (react_1.default.createElement(material_1.Fade, { in: isIn, unmountOnExit: true },
-        react_1.default.createElement(Alert, Object.assign({ className: className, onClose: onClose }, props), children)));
+    return (React.createElement(Fade, { in: isIn, unmountOnExit: true },
+        React.createElement(Alert, { className: className, onClose: onClose, ...props }, children)));
 };
-exports.DismissibleBanner = DismissibleBanner;

package/lib/components/common/Banner/components/SessionTimeout/sessionTimeout.js

@@ -1,46 +1,7 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+import React, { Fragment } from "react";
+import { useSessionTimeout } from "../../../../../hooks/useSessionTimeout";
+import { Banner } from "./sessionTimeout.styles";
+export const SessionTimeout = ({ className, title = "For your security, you have been logged out due to 15 minutes of inactivity.", ...props }) => {
+    const { clearSessionTimeout, isSessionTimeout } = useSessionTimeout();
+    return (React.createElement(Fragment, null, isSessionTimeout && (React.createElement(Banner, { className: className, onClose: clearSessionTimeout, ...props }, title))));
 };
-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.SessionTimeout = void 0;
-const react_1 = __importStar(require("react"));
-const useSessionTimeout_1 = require("../../../../../hooks/useSessionTimeout");
-const sessionTimeout_styles_1 = require("./sessionTimeout.styles");
-const SessionTimeout = (_a) => {
-    var { className, title = "For your security, you have been logged out due to 15 minutes of inactivity." } = _a, props = __rest(_a, ["className", "title"]);
-    const { clearSessionTimeout, isSessionTimeout } = (0, useSessionTimeout_1.useSessionTimeout)();
-    return (react_1.default.createElement(react_1.Fragment, null, isSessionTimeout && (react_1.default.createElement(sessionTimeout_styles_1.Banner, Object.assign({ className: className, onClose: clearSessionTimeout }, props), title))));
-};
-exports.SessionTimeout = SessionTimeout;