@databiosphere/findable-ui 5.0.0 → 7.0.0

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

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

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

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

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

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

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

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Divider = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.Divider = (0, styled_1.default)(material_1.Box) `
+import styled from "@emotion/styled";
+import { Box } from "@mui/material";
+export const Divider = styled(Box) `
   white-space: pre-wrap;
 `;

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

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

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

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

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

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

package/lib/components/common/StatusBadge/statusBadge.js

@@ -1,53 +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.StatusBadge = exports.STATUS_BADGE_COLOR = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-var STATUS_BADGE_COLOR;
+import { Chip as MChip } from "@mui/material";
+import React, { forwardRef } from "react";
+export var STATUS_BADGE_COLOR;
 (function (STATUS_BADGE_COLOR) {
     STATUS_BADGE_COLOR["DEFAULT"] = "default";
     STATUS_BADGE_COLOR["ERROR"] = "error";
     STATUS_BADGE_COLOR["INFO"] = "info";
     STATUS_BADGE_COLOR["SUCCESS"] = "success";
     STATUS_BADGE_COLOR["WARNING"] = "warning";
-})(STATUS_BADGE_COLOR = exports.STATUS_BADGE_COLOR || (exports.STATUS_BADGE_COLOR = {}));
-exports.StatusBadge = (0, react_1.forwardRef)(function StatusBadge(_a, ref) {
-    var { 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- children is null for Mui ChipProps.
-    children, className, color, label } = _a, props = __rest(_a, ["children", "className", "color", "label"]) /* Spread props to allow for Mui ChipProps specific prop overrides e.g. "onDelete". */;
-    return (react_1.default.createElement(material_1.Chip, Object.assign({ className: className, color: color, label: label, ref: ref, variant: "status" }, props)));
+})(STATUS_BADGE_COLOR || (STATUS_BADGE_COLOR = {}));
+export const StatusBadge = forwardRef(function StatusBadge({ 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- children is null for Mui ChipProps.
+children, className, color, label, ...props /* Spread props to allow for Mui ChipProps specific prop overrides e.g. "onDelete". */ }, ref) {
+    return (React.createElement(MChip, { className: className, color: color, label: label, ref: ref, variant: "status", ...props }));
 });

package/lib/components/common/StatusBadge/statusBadge.stories.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusStory = void 0;
-const statusBadge_1 = require("./statusBadge");
-exports.default = {
-    component: statusBadge_1.StatusBadge,
+import { StatusBadge } from "./statusBadge";
+export default {
+    component: StatusBadge,
     title: "Components/Common/StatusBadge",
 };
-exports.StatusStory = {
+export const StatusStory = {
     args: {
         clickable: false,
         color: "success",

package/lib/components/common/StatusIcon/statusIcon.js

@@ -1,23 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusIcon = exports.PRIORITY = void 0;
-const react_1 = __importDefault(require("react"));
-const statusIcon_styles_1 = require("./statusIcon.styles");
+import React from "react";
+import { StatusCircle } from "./statusIcon.styles";
 /**
  * Possible set of priority values.
  */
-var PRIORITY;
+export var PRIORITY;
 (function (PRIORITY) {
     PRIORITY["HIGH"] = "HIGH";
     PRIORITY["LOW"] = "LOW";
     PRIORITY["MEDIUM"] = "MEDIUM";
     PRIORITY["NORMAL"] = "NORMAL";
-})(PRIORITY = exports.PRIORITY || (exports.PRIORITY = {}));
-const StatusIcon = ({ priority, StatusIcon, }) => {
-    return (react_1.default.createElement(statusIcon_styles_1.StatusCircle, { priority: priority },
-        react_1.default.createElement(StatusIcon, { fontSize: "xxlarge" })));
+})(PRIORITY || (PRIORITY = {}));
+export const StatusIcon = ({ priority, StatusIcon, }) => {
+    return (React.createElement(StatusCircle, { priority: priority },
+        React.createElement(StatusIcon, { fontSize: "xxlarge" })));
 };
-exports.StatusIcon = StatusIcon;

package/lib/components/common/StatusIcon/statusIcon.stories.js

@@ -1,23 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusIconStory = void 0;
-const react_1 = __importDefault(require("react"));
-const searchOffIcon_1 = require("../CustomIcon/components/SearchOffIcon/searchOffIcon");
-const statusIcon_1 = require("./statusIcon");
-exports.default = {
+import React from "react";
+import { SearchOffIcon } from "../CustomIcon/components/SearchOffIcon/searchOffIcon";
+import { PRIORITY, StatusIcon } from "./statusIcon";
+export default {
     argTypes: {
         StatusIcon: { control: { disable: true } },
-        priority: { control: "select", options: Array.from(Object.keys(statusIcon_1.PRIORITY)) },
+        priority: { control: "select", options: Array.from(Object.keys(PRIORITY)) },
     },
-    component: statusIcon_1.StatusIcon,
+    component: StatusIcon,
     title: "Components/Common/Alert/StatusIcon",
 };
-const StatusIconTemplate = (args) => (react_1.default.createElement(statusIcon_1.StatusIcon, Object.assign({}, args)));
-exports.StatusIconStory = StatusIconTemplate.bind({});
-exports.StatusIconStory.args = {
-    StatusIcon: searchOffIcon_1.SearchOffIcon,
-    priority: statusIcon_1.PRIORITY.LOW,
+const StatusIconTemplate = (args) => (React.createElement(StatusIcon, { ...args }));
+export const StatusIconStory = StatusIconTemplate.bind({});
+StatusIconStory.args = {
+    StatusIcon: SearchOffIcon,
+    priority: PRIORITY.LOW,
 };

package/lib/components/common/StatusIcon/statusIcon.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.StatusCircle = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const statusIcon_1 = require("./statusIcon");
-exports.StatusCircle = styled_1.default.div `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { PRIORITY } from "./statusIcon";
+export const StatusCircle = styled.div `
   border-radius: 50%;
   box-sizing: content-box;
   display: grid;
@@ -16,30 +10,30 @@ exports.StatusCircle = styled_1.default.div `
   width: 72px;
 
   // Normal priority.
-  ${({ priority, theme }) => priority === statusIcon_1.PRIORITY.NORMAL &&
-    (0, react_1.css) `
+  ${({ priority, theme }) => priority === PRIORITY.NORMAL &&
+    css `
       background-color: ${theme.palette.info.lightest};
       color: ${theme.palette.info.main};
     `};
 
   // Low priority.
-  ${({ priority, theme }) => priority === statusIcon_1.PRIORITY.LOW &&
-    (0, react_1.css) `
+  ${({ priority, theme }) => priority === PRIORITY.LOW &&
+    css `
       background-color: ${theme.palette.warning.lightest};
       color: ${theme.palette.warning.main};
     `};
 
   // Medium priority.
-  ${({ priority, theme }) => priority === statusIcon_1.PRIORITY.MEDIUM &&
-    (0, react_1.css) `
+  ${({ priority, theme }) => priority === PRIORITY.MEDIUM &&
+    css `
       background-color: ${theme.palette.warning.light};
       border: 3px solid white;
       color: ${theme.palette.warning.main};
     `};
 
   // High priority.
-  ${({ priority, theme }) => priority === statusIcon_1.PRIORITY.HIGH &&
-    (0, react_1.css) `
+  ${({ priority, theme }) => priority === PRIORITY.HIGH &&
+    css `
       background-color: ${theme.palette.alert.light};
       border: 3px solid white;
       color: ${theme.palette.alert.main};

package/lib/components/common/Tabs/tabs.js

@@ -1,13 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Tabs as MTabs, } from "@mui/material";
+import React from "react";
+import { Tab, TabScrollFuzz } from "./tabs.styles";
+export const Tabs = ({ className, onTabChange, tabs, value, }) => {
+    return (React.createElement(MTabs, { allowScrollButtonsMobile: true, className: className, onChange: (_, tabValue) => onTabChange(tabValue), ScrollButtonComponent: TabScrollFuzz, value: value }, tabs.map(({ count, icon, iconPosition = "start", label, value: tabValue }, t) => (React.createElement(Tab, { icon: icon, iconPosition: icon ? iconPosition : undefined, key: `${label}${t}`, label: count ? `${label} (${count})` : label, value: tabValue })))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const tabs_styles_1 = require("./tabs.styles");
-const Tabs = ({ className, onTabChange, tabs, value, }) => {
-    return (react_1.default.createElement(material_1.Tabs, { allowScrollButtonsMobile: true, className: className, onChange: (_, tabValue) => onTabChange(tabValue), ScrollButtonComponent: tabs_styles_1.TabScrollFuzz, value: value }, tabs.map(({ count, icon, iconPosition = "start", label, value: tabValue }, t) => (react_1.default.createElement(tabs_styles_1.Tab, { icon: icon, iconPosition: icon ? iconPosition : undefined, key: `${label}${t}`, label: count ? `${label} (${count})` : label, value: tabValue })))));
-};
-exports.Tabs = Tabs;

package/lib/components/common/Tabs/tabs.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.Tab = exports.TabScrollFuzz = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.TabScrollFuzz = styled_1.default.span `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Tab as MTab } from "@mui/material";
+export const TabScrollFuzz = styled.span `
   height: 100%;
   opacity: 1;
   position: absolute;
@@ -19,11 +13,11 @@ exports.TabScrollFuzz = styled_1.default.span `
   // Scroll fuzz direction.
   ${({ direction }) => {
     return direction === "left"
-        ? (0, react_1.css) `
+        ? css `
           background: linear-gradient(90deg, #f6f6f7 5.88%, #f6f6f700 94.12%);
           left: 0;
         `
-        : (0, react_1.css) `
+        : css `
           background: linear-gradient(270deg, #f6f6f7 5.88%, #f6f6f700 94.12%);
           right: 0;
         `;
@@ -32,13 +26,13 @@ exports.TabScrollFuzz = styled_1.default.span `
   // Disabled scroll fuzz.
   ${({ disabled }) => {
     return (disabled &&
-        (0, react_1.css) `
+        css `
         opacity: 0;
         pointer-events: none;
       `);
 }};
 `;
-exports.Tab = (0, styled_1.default)(material_1.Tab) `
+export const Tab = styled(MTab) `
   .MuiSvgIcon-fontSizeXsmall {
     align-self: flex-start;
   }

package/lib/components/common/Tag/tag.js

@@ -1,12 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Typography } from "@mui/material";
+import React from "react";
+export const Tag = ({ children, className }) => {
+    return (React.createElement(Typography, { className: className, component: "span", variant: "text-body-500" }, children));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const Tag = ({ children, className }) => {
-    return (react_1.default.createElement(material_1.Typography, { className: className, component: "span", variant: "text-body-500" }, children));
-};
-exports.Tag = Tag;

package/lib/components/common/Tag/tag.stories.js

@@ -1,21 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WarningTagStory = void 0;
-const react_1 = __importDefault(require("react"));
-const tag_1 = require("./tag");
-const tag_styles_1 = require("./tag.styles");
-exports.default = {
+import React from "react";
+import { Tag } from "./tag";
+import { TagWarning } from "./tag.styles";
+export default {
     argTypes: {
         children: { control: { disabled: true } },
     },
-    component: tag_1.Tag,
+    component: Tag,
     title: "Components/Common/Alert/Tag",
 };
-const WarningTagTemplate = (args) => (react_1.default.createElement(tag_styles_1.TagWarning, Object.assign({}, args), args.children));
-exports.WarningTagStory = WarningTagTemplate.bind({});
-exports.WarningTagStory.args = {
+const WarningTagTemplate = (args) => (React.createElement(TagWarning, { ...args }, args.children));
+export const WarningTagStory = WarningTagTemplate.bind({});
+WarningTagStory.args = {
     children: "Please note",
 };

package/lib/components/common/Tag/tag.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.TagWarning = exports.TagDefault = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const tag_1 = require("./tag");
-exports.TagDefault = (0, styled_1.default)(tag_1.Tag) `
+import styled from "@emotion/styled";
+import { Tag } from "./tag";
+export const TagDefault = styled(Tag) `
   background-color: ${({ theme }) => theme.palette.smoke.main};
   border-radius: 4px;
   padding: 2px 6px;
 `;
-exports.TagWarning = (0, styled_1.default)(exports.TagDefault) `
+export const TagWarning = styled(TagDefault) `
   background-color: ${({ theme }) => theme.palette.warning.light};
   color: ${({ theme }) => theme.palette.warning.main};
 `;

package/lib/components/common/Title/title.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_HEADING_LARGE } from "../../../theme/common/typography";
+import { HeroTitle as Typography } from "./title.styles";
+export const Title = ({ className, title, ...props /* Spread props to allow for Typography specific props TypographyProps e.g. "gutterBottom" or "noWrap". */ }) => {
+    return (React.createElement(React.Fragment, null, typeof title === "string" ? (React.createElement(Typography, { className: className, color: "ink.main", component: "h1", variant: TEXT_HEADING_LARGE, ...props }, title)) : (title)));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Title = void 0;
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../theme/common/typography");
-const title_styles_1 = require("./title.styles");
-const Title = (_a) => {
-    var { className, title } = _a, props = __rest(_a, ["className", "title"]) /* Spread props to allow for Typography specific props TypographyProps e.g. "gutterBottom" or "noWrap". */;
-    return (react_1.default.createElement(react_1.default.Fragment, null, typeof title === "string" ? (react_1.default.createElement(title_styles_1.HeroTitle, Object.assign({ className: className, color: "ink.main", component: "h1", variant: typography_1.TEXT_HEADING_LARGE }, props), title)) : (title)));
-};
-exports.Title = Title;

package/lib/components/common/Title/title.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeroTitle = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.HeroTitle = (0, styled_1.default)(material_1.Typography) `
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+export const HeroTitle = styled(Typography) `
   justify-self: flex-start;
   overflow-wrap: break-word;
 `;