@databiosphere/findable-ui 6.0.0 → 7.0.0

package/lib/components/common/IconButton/iconButton.styles.js

@@ -1,40 +1,20 @@
-"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.IconButtonSocialsFooter = exports.IconButtonSocials = exports.CloseDrawerIconButton = exports.MockIconButtonPrimary = exports.IconButtonSecondary = exports.IconButtonPrimary = exports.Button = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../styles/common/mixins/colors");
-const iconButton_1 = require("./iconButton");
-exports.Button = (0, styled_1.default)(material_1.IconButton, {
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { IconButton as MIconButton } from "@mui/material";
+import { smokeLightest } from "../../../styles/common/mixins/colors";
+import { IconButton } from "./iconButton";
+export const Button = styled(MIconButton, {
     shouldForwardProp: (prop) => prop !== "open",
 }) `
-  ${(_a) => {
-    var { open } = _a, props = __rest(_a, ["open"]);
-    return open &&
-        (0, react_1.css) `
+  ${({ open, ...props }) => open &&
+    css `
       &.MuiIconButton-root {
-        background-color: ${(0, colors_1.smokeLightest)(props)};
+        background-color: ${smokeLightest(props)};
       }
-    `;
-}}
+    `}
 `;
 // Primary icon button.
-exports.IconButtonPrimary = (0, styled_1.default)(iconButton_1.IconButton) `
+export const IconButtonPrimary = styled(IconButton) `
   background-color: ${({ theme }) => theme.palette.primary.main};
   box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.primary.dark};
   color: ${({ theme }) => theme.palette.common.white};
@@ -60,7 +40,7 @@ exports.IconButtonPrimary = (0, styled_1.default)(iconButton_1.IconButton) `
   }
 `;
 // Secondary icon button.
-exports.IconButtonSecondary = (0, styled_1.default)(iconButton_1.IconButton) `
+export const IconButtonSecondary = styled(IconButton) `
   background-color: ${({ theme }) => theme.palette.common.white};
   box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.smoke.dark},
   0px 1px 0px 0px rgba(0, 0, 0, 0.08);
@@ -81,7 +61,7 @@ exports.IconButtonSecondary = (0, styled_1.default)(iconButton_1.IconButton) `
 }
 `;
 // Mock icon button.
-exports.MockIconButtonPrimary = styled_1.default.span `
+export const MockIconButtonPrimary = styled.span `
   background-color: ${({ theme }) => theme.palette.primary.main};
   border-radius: 4px;
   box-shadow: 0 1px 0 0 ${({ theme }) => theme.palette.primary.dark};
@@ -92,14 +72,14 @@ exports.MockIconButtonPrimary = styled_1.default.span `
   padding: 6px 8px;
 `;
 // Drawer backdrop close icon button.
-exports.CloseDrawerIconButton = (0, styled_1.default)(iconButton_1.IconButton) `
+export const CloseDrawerIconButton = styled(IconButton) `
   color: ${({ theme }) => theme.palette.common.white};
   left: calc(100% + 4px);
   position: absolute;
   top: 4px;
 `;
 // Socials icon button.
-exports.IconButtonSocials = (0, styled_1.default)(material_1.IconButton) `
+export const IconButtonSocials = styled(MIconButton) `
   color: ${({ theme }) => theme.palette.ink.light};
 
   &:hover {
@@ -107,7 +87,7 @@ exports.IconButtonSocials = (0, styled_1.default)(material_1.IconButton) `
   }
 `;
 // Socials icon button - footer component.
-exports.IconButtonSocialsFooter = (0, styled_1.default)(material_1.IconButton) `
+export const IconButtonSocialsFooter = styled(MIconButton) `
   color: ${({ theme }) => theme.palette.ink.light};
 
   &:hover {

package/lib/components/common/Input/input.js

@@ -1,24 +1,7 @@
-"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.Input = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../theme/common/typography");
-const input_styles_1 = require("./input.styles");
+import { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../theme/common/typography";
+import { InputField, InputFormControl } from "./input.styles";
 /**
  * Callback fired when the search term is changed.
  * - Sets state searchTerm with new search term.
@@ -29,10 +12,8 @@ function onChangeInputField(changeEvent, setSearchTerm) {
     const searchTerm = changeEvent.target.value;
     setSearchTerm(searchTerm);
 }
-const Input = (_a) => {
-    var { className, label, placeholder, searchTerm, setSearchTerm, StartAdornment } = _a, props = __rest(_a, ["className", "label", "placeholder", "searchTerm", "setSearchTerm", "StartAdornment"]) /* Spread props to allow for Mui OutlinedInputProps specific prop overrides e.g. "disabled". */;
-    return (react_1.default.createElement(input_styles_1.InputFormControl, { className: className },
-        label && react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, label),
-        react_1.default.createElement(input_styles_1.InputField, Object.assign({ autoFocus: true, fullWidth: true, inputProps: { spellCheck: false }, isFilled: !!searchTerm, onChange: (event) => onChangeInputField(event, setSearchTerm), placeholder: placeholder, size: "small", startAdornment: StartAdornment ? react_1.default.createElement(StartAdornment, { fontSize: "small" }) : undefined, value: searchTerm }, props))));
+export const Input = ({ className, label, placeholder, searchTerm, setSearchTerm, StartAdornment, ...props /* Spread props to allow for Mui OutlinedInputProps specific prop overrides e.g. "disabled". */ }) => {
+    return (React.createElement(InputFormControl, { className: className },
+        label && React.createElement(Typography, { variant: TEXT_BODY_400 }, label),
+        React.createElement(InputField, { autoFocus: true, fullWidth: true, inputProps: { spellCheck: false }, isFilled: !!searchTerm, onChange: (event) => onChangeInputField(event, setSearchTerm), placeholder: placeholder, size: "small", startAdornment: StartAdornment ? React.createElement(StartAdornment, { fontSize: "small" }) : undefined, value: searchTerm, ...props })));
 };
-exports.Input = Input;

package/lib/components/common/Input/input.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.InputField = exports.InputFormControl = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { FormControl, OutlinedInput } from "@mui/material";
 // Input form control
-exports.InputFormControl = (0, styled_1.default)(material_1.FormControl) `
+export const InputFormControl = styled(FormControl) `
   display: flex;
   flex-direction: column;
   gap: 8px;
 `;
-exports.InputField = (0, styled_1.default)(material_1.OutlinedInput, {
+export const InputField = styled(OutlinedInput, {
     shouldForwardProp: (prop) => prop !== "isFilled",
 }) `
   && ::placeholder {
@@ -26,7 +20,7 @@ exports.InputField = (0, styled_1.default)(material_1.OutlinedInput, {
 
   // Input filled.
   ${({ isFilled, theme }) => isFilled &&
-    (0, react_1.css) `
+    css `
       .MuiOutlinedInput-input,
       .MuiSvgIcon-root {
         color: ${theme.palette.ink.main};

package/lib/components/common/KeyValuePairs/components/KeyElType/keyElType.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 { Typography } from "@mui/material";
+import React from "react";
+export const KeyElType = ({ 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-400-2lines", ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyElType = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const KeyElType = (_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: "text-body-400-2lines" }, props), children));
-};
-exports.KeyElType = KeyElType;

package/lib/components/common/KeyValuePairs/components/KeyValueElType/keyValueElType.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 { Box } from "@mui/material";
+import React from "react";
+export const KeyValueElType = ({ boxSx, children, keyValue, keyValueFn, ...props /* Spread props to allow for Mui Box specific prop overrides. */ }) => {
+    return (React.createElement(Box, { onClick: () => keyValueFn && keyValueFn(keyValue), role: "button", sx: { cursor: keyValueFn ? "pointer" : "default", ...boxSx }, ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyValueElType = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const KeyValueElType = (_a) => {
-    var { boxSx, children, keyValue, keyValueFn } = _a, props = __rest(_a, ["boxSx", "children", "keyValue", "keyValueFn"]) /* Spread props to allow for Mui Box specific prop overrides. */;
-    return (react_1.default.createElement(material_1.Box, Object.assign({ onClick: () => keyValueFn && keyValueFn(keyValue), role: "button", sx: Object.assign({ cursor: keyValueFn ? "pointer" : "default" }, boxSx) }, props), children));
-};
-exports.KeyValueElType = KeyValueElType;

package/lib/components/common/KeyValuePairs/components/ValueElType/valueElType.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 { Typography } from "@mui/material";
+import React from "react";
+export const ValueElType = ({ children, ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */ }) => {
+    return (React.createElement(Typography, { variant: "text-body-400-2lines", ...props }, children));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValueElType = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const ValueElType = (_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: "text-body-400-2lines" }, props), children));
-};
-exports.ValueElType = ValueElType;

package/lib/components/common/KeyValuePairs/keyValuePairs.js

@@ -1,38 +1,11 @@
-"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.KeyValuePairs = void 0;
-const react_1 = __importStar(require("react"));
-const stack_1 = require("../Stack/stack");
-const KeyValuePairs = ({ KeyElType: Key = "span", KeyValueElType: KeyValue = stack_1.Stack, keyValuePairs, KeyValuesElType: KeyValues = stack_1.Stack, ValueElType: Value = "span", }) => {
-    return (react_1.default.createElement(KeyValues, null, [...keyValuePairs].map(([key, value], k) => {
+import React, { Fragment } from "react";
+import { Stack } from "../Stack/stack";
+export const KeyValuePairs = ({ KeyElType: Key = "span", KeyValueElType: KeyValue = Stack, keyValuePairs, KeyValuesElType: KeyValues = Stack, ValueElType: Value = "span", }) => {
+    return (React.createElement(KeyValues, null, [...keyValuePairs].map(([key, value], k) => {
         // Pass through the keyValue to the KeyValue element (for the KeyValueFn if defined).
-        const keyValueProps = KeyValue === react_1.Fragment ? {} : { keyValue: [key, value] };
-        return (react_1.default.createElement(KeyValue, Object.assign({ key: `${key}${k}` }, keyValueProps),
-            react_1.default.createElement(Key, null, key),
-            react_1.default.createElement(Value, null, value)));
+        const keyValueProps = KeyValue === Fragment ? {} : { keyValue: [key, value] };
+        return (React.createElement(KeyValue, { key: `${key}${k}`, ...keyValueProps },
+            React.createElement(Key, null, key),
+            React.createElement(Value, null, value)));
     })));
 };
-exports.KeyValuePairs = KeyValuePairs;

package/lib/components/common/MDXMarkdown/components/Section/mdxSection.styles.js

@@ -1,28 +1,22 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionContent = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const fonts_1 = require("../../../../../styles/common/mixins/fonts");
-exports.SectionContent = styled_1.default.div `
+import styled from "@emotion/styled";
+import { textBody4002Lines, textBody500, textBodyLarge500, } from "../../../../../styles/common/mixins/fonts";
+export const SectionContent = styled.div `
   h3,
   h4 {
     margin: 0 0 8px;
   }
 
   h3 {
-    ${fonts_1.textBodyLarge500};
+    ${textBodyLarge500};
   }
 
   h4 {
-    ${fonts_1.textBody500};
+    ${textBody500};
     margin-top: 20px;
   }
 
   p {
-    ${fonts_1.textBody4002Lines};
+    ${textBody4002Lines};
     margin: 0 0 8px;
   }
 

package/lib/components/common/Markdown/markdown.js

@@ -1,13 +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.Markdown = void 0;
 // TODO deprecate component if possible (see MDXMarkdown)
-const isomorphic_dompurify_1 = __importDefault(require("isomorphic-dompurify"));
-const react_1 = __importDefault(require("react"));
-const Markdown = ({ content }) => {
-    return (react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: isomorphic_dompurify_1.default.sanitize(content) } }));
+import DOMPurify from "isomorphic-dompurify";
+import React from "react";
+export const Markdown = ({ content }) => {
+    return (React.createElement("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(content) } }));
 };
-exports.Markdown = Markdown;

package/lib/components/common/Paper/paper.js

@@ -1,41 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Paper = exports.PAPER_PANEL_STYLE = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
+import { Paper as MPaper } from "@mui/material";
+import React, { forwardRef } from "react";
 /**
  * Possible set of paper variant "panel" style values.
  */
-var PAPER_PANEL_STYLE;
+export var PAPER_PANEL_STYLE;
 (function (PAPER_PANEL_STYLE) {
     PAPER_PANEL_STYLE["FLAT"] = "FLAT";
     PAPER_PANEL_STYLE["FLUID"] = "FLUID";
     PAPER_PANEL_STYLE["NONE"] = "NONE";
     PAPER_PANEL_STYLE["ROUNDED"] = "ROUNDED";
-})(PAPER_PANEL_STYLE = exports.PAPER_PANEL_STYLE || (exports.PAPER_PANEL_STYLE = {}));
-exports.Paper = (0, react_1.forwardRef)(function Paper({ children, className, variant = "panel" }, ref) {
-    return (react_1.default.createElement(material_1.Paper, { className: className, ref: ref, variant: variant }, children));
+})(PAPER_PANEL_STYLE || (PAPER_PANEL_STYLE = {}));
+export const Paper = forwardRef(function Paper({ children, className, variant = "panel" }, ref) {
+    return (React.createElement(MPaper, { className: className, ref: ref, variant: variant }, children));
 });

package/lib/components/common/Paper/paper.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.GridPaper = exports.FluidPaper = exports.RoundedPaper = exports.FlatPaper = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../theme/common/breakpoints");
-const paper_1 = require("./paper");
+import styled from "@emotion/styled";
+import { TABLET } from "../../../theme/common/breakpoints";
+import { Paper } from "./paper";
 /**
  * Flat paper - typically used when in full stretch or full "bleed" across a container.
  * e.g. the entire width of mobile viewports.
  */
-exports.FlatPaper = (0, styled_1.default)(paper_1.Paper) `
+export const FlatPaper = styled(Paper) `
   align-self: stretch;
   border-left: none;
   border-radius: 0;
@@ -22,7 +16,7 @@ exports.FlatPaper = (0, styled_1.default)(paper_1.Paper) `
  * Rounded paper - typically used when contained within a parent container.
  * To use RoundedPaper, wrap the styled paper around a single child element e.g. "Section" or "Sections" component. TODO
  */
-exports.RoundedPaper = (0, styled_1.default)(paper_1.Paper) `
+export const RoundedPaper = styled(Paper) `
   align-self: stretch;
   border-radius: 8px;
 `;
@@ -32,8 +26,8 @@ exports.RoundedPaper = (0, styled_1.default)(paper_1.Paper) `
  * To use FluidPaper, wrap the styled paper around a single child element e.g. "Section" or "Sections" component. TODO
  */
 /* eslint-enable valid-jsdoc -- disable require param */
-exports.FluidPaper = (0, styled_1.default)(exports.RoundedPaper) `
-  ${({ theme }) => theme.breakpoints.down(breakpoints_1.TABLET)} {
+export const FluidPaper = styled(RoundedPaper) `
+  ${({ theme }) => theme.breakpoints.down(TABLET)} {
     border-left: none;
     border-radius: 0;
     border-right: none;
@@ -47,7 +41,7 @@ const ignoreSsrWarning = "/* emotion-disable-server-rendering-unsafe-selector-wa
  * Grid paper - typically used as a parent (grid) container.
  * The background color with the grid cap property create the grid "lines" between each grid item.
  */
-exports.GridPaper = styled_1.default.div(({ theme }) => ({
+export const GridPaper = styled.div(({ theme }) => ({
     backgroundColor: `${theme.palette.smoke.main}`,
     borderRadius: "inherit",
     display: "grid",

package/lib/components/common/Progress/components/CircularProgress/circularProgress.js

@@ -1,28 +1,9 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import { CircularProgress as MCircularProgress, } from "@mui/material";
+import React from "react";
+import { ProgressPositioner } from "./circularProgress.styles";
+import { CircularProgressTrack } from "./components/CircularProgressTrack/circularProgressTrack";
+export const CircularProgress = ({ className, value, Track = CircularProgressTrack, ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */ }) => {
+    return (React.createElement(ProgressPositioner, { className: className },
+        React.createElement(Track, { ...props }),
+        React.createElement(MCircularProgress, { value: value, ...props })));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircularProgress = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const circularProgress_styles_1 = require("./circularProgress.styles");
-const circularProgressTrack_1 = require("./components/CircularProgressTrack/circularProgressTrack");
-const CircularProgress = (_a) => {
-    var { className, value, Track = circularProgressTrack_1.CircularProgressTrack } = _a, props = __rest(_a, ["className", "value", "Track"]) /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */;
-    return (react_1.default.createElement(circularProgress_styles_1.ProgressPositioner, { className: className },
-        react_1.default.createElement(Track, Object.assign({}, props)),
-        react_1.default.createElement(material_1.CircularProgress, Object.assign({ value: value }, props))));
-};
-exports.CircularProgress = CircularProgress;

package/lib/components/common/Progress/components/CircularProgress/circularProgress.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.ProgressPositioner = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.ProgressPositioner = styled_1.default.div `
+import styled from "@emotion/styled";
+export const ProgressPositioner = styled.div `
   display: flex;
   position: relative; /* positions track */
 `;

package/lib/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.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 React, { Fragment } from "react";
+import { CircularProgress } from "./circularProgressTrack.styles";
+export const CircularProgressTrack = ({ className, track = true, value = 100, ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */ }) => {
+    return (React.createElement(Fragment, null, track && (React.createElement(CircularProgress, { className: className, value: value, ...props }))));
 };
-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.CircularProgressTrack = void 0;
-const react_1 = __importStar(require("react"));
-const circularProgressTrack_styles_1 = require("./circularProgressTrack.styles");
-const CircularProgressTrack = (_a) => {
-    var { className, track = true, value = 100 } = _a, props = __rest(_a, ["className", "track", "value"]) /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */;
-    return (react_1.default.createElement(react_1.Fragment, null, track && (react_1.default.createElement(circularProgressTrack_styles_1.CircularProgress, Object.assign({ className: className, value: value }, props)))));
-};
-exports.CircularProgressTrack = CircularProgressTrack;

package/lib/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.styles.js

@@ -1,32 +1,26 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircularProgress = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../../../../../styles/common/mixins/colors");
-exports.CircularProgress = (0, styled_1.default)(material_1.CircularProgress) `
-  color: ${colors_1.smokeLight};
+import styled from "@emotion/styled";
+import { CircularProgress as MCircularProgress } from "@mui/material";
+import { alertLight, infoLight, smokeLight, successLight, warningLight, } from "../../../../../../../styles/common/mixins/colors";
+export const CircularProgress = styled(MCircularProgress) `
+  color: ${smokeLight};
   left: 0;
   position: absolute;
   top: 0;
   z-index: 0;
 
   &.MuiCircularProgress-colorAlert {
-    color: ${colors_1.alertLight};
+    color: ${alertLight};
   }
 
   &.MuiCircularProgress-colorInfo {
-    color: ${colors_1.infoLight};
+    color: ${infoLight};
   }
 
   &.MuiCircularProgress-colorSuccess {
-    color: ${colors_1.successLight};
+    color: ${successLight};
   }
 
   &.MuiCircularProgress-colorWarning {
-    color: ${colors_1.warningLight};
+    color: ${warningLight};
   }
 `;