@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/components/common/Grid/grid.d.ts

@@ -1,7 +1,7 @@
 import { SxProps } from "@mui/material";
 import { ReactNode } from "react";
 export interface GridProps {
-    children?: ReactNode | ReactNode[];
+    children: ReactNode | ReactNode[];
     gridSx?: SxProps;
 }
 /**

package/lib/components/common/Grid/grid.js

@@ -1,27 +1,8 @@
-"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.Grid = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
+import { Box } from "@mui/material";
+import React from "react";
 /**
  * A basic Grid component for rendering CSS grid.
  */
-const Grid = (_a) => {
-    var { children, gridSx } = _a, props = __rest(_a, ["children", "gridSx"]) /* Spread props to allow for Mui Box specific prop overrides. */;
-    return (react_1.default.createElement(material_1.Box, Object.assign({ display: "grid", sx: gridSx }, props), children));
+export const Grid = ({ children, gridSx, ...props /* Spread props to allow for Mui Box specific prop overrides. */ }) => {
+    return (React.createElement(Box, { display: "grid", sx: gridSx, ...props }, children));
 };
-exports.Grid = Grid;

package/lib/components/common/IconBadge/iconBadge.js

@@ -1,20 +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.IconBadge = exports.ICON_BADGE_COLOR = void 0;
-const react_1 = __importDefault(require("react"));
-const iconBadge_styles_1 = require("./iconBadge.styles");
-var ICON_BADGE_COLOR;
+import React from "react";
+import { Circle } from "./iconBadge.styles";
+export var ICON_BADGE_COLOR;
 (function (ICON_BADGE_COLOR) {
     ICON_BADGE_COLOR["ALERT"] = "alert";
     ICON_BADGE_COLOR["INFO"] = "info";
     ICON_BADGE_COLOR["SUCCESS"] = "success";
     ICON_BADGE_COLOR["WARNING"] = "warning";
-})(ICON_BADGE_COLOR = exports.ICON_BADGE_COLOR || (exports.ICON_BADGE_COLOR = {}));
-const IconBadge = ({ color, Icon, iconSize = "xxlarge", }) => {
-    return (react_1.default.createElement(iconBadge_styles_1.Circle, { color: color },
-        react_1.default.createElement(Icon, { fontSize: iconSize })));
+})(ICON_BADGE_COLOR || (ICON_BADGE_COLOR = {}));
+export const IconBadge = ({ color, Icon, iconSize = "xxlarge", }) => {
+    return (React.createElement(Circle, { color: color },
+        React.createElement(Icon, { fontSize: iconSize })));
 };
-exports.IconBadge = IconBadge;

package/lib/components/common/IconBadge/iconBadge.styles.js

@@ -1,25 +1,8 @@
-"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.Circle = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const colors_1 = require("../../../styles/common/mixins/colors");
-const iconBadge_1 = require("./iconBadge");
-exports.Circle = styled_1.default.div `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { alertLightest, alertMain, infoLightest, infoMain, successLightest, successMain, warningLightest, warningMain, } from "../../../styles/common/mixins/colors";
+import { ICON_BADGE_COLOR } from "./iconBadge";
+export const Circle = styled.div `
   border-radius: 50%;
   box-sizing: content-box;
   display: grid;
@@ -28,42 +11,30 @@ exports.Circle = styled_1.default.div `
   width: 72px;
 
   // Alert.
-  ${(_a) => {
-    var { color } = _a, props = __rest(_a, ["color"]);
-    return color === iconBadge_1.ICON_BADGE_COLOR.ALERT &&
-        (0, react_1.css) `
-      background-color: ${(0, colors_1.alertLightest)(props)};
-      color: ${(0, colors_1.alertMain)(props)};
-    `;
-}};
+  ${({ color, ...props }) => color === ICON_BADGE_COLOR.ALERT &&
+    css `
+      background-color: ${alertLightest(props)};
+      color: ${alertMain(props)};
+    `};
 
   // Info.
-  ${(_a) => {
-    var { color } = _a, props = __rest(_a, ["color"]);
-    return color === iconBadge_1.ICON_BADGE_COLOR.INFO &&
-        (0, react_1.css) `
-      background-color: ${(0, colors_1.infoLightest)(props)};
-      color: ${(0, colors_1.infoMain)(props)};
-    `;
-}};
+  ${({ color, ...props }) => color === ICON_BADGE_COLOR.INFO &&
+    css `
+      background-color: ${infoLightest(props)};
+      color: ${infoMain(props)};
+    `};
 
   // Success.
-  ${(_a) => {
-    var { color } = _a, props = __rest(_a, ["color"]);
-    return color === iconBadge_1.ICON_BADGE_COLOR.SUCCESS &&
-        (0, react_1.css) `
-      background-color: ${(0, colors_1.successLightest)(props)};
-      color: ${(0, colors_1.successMain)(props)};
-    `;
-}};
+  ${({ color, ...props }) => color === ICON_BADGE_COLOR.SUCCESS &&
+    css `
+      background-color: ${successLightest(props)};
+      color: ${successMain(props)};
+    `};
 
   // Warning.
-  ${(_a) => {
-    var { color } = _a, props = __rest(_a, ["color"]);
-    return color === iconBadge_1.ICON_BADGE_COLOR.WARNING &&
-        (0, react_1.css) `
-      background-color: ${(0, colors_1.warningLightest)(props)};
-      color: ${(0, colors_1.warningMain)(props)};
-    `;
-}};
+  ${({ color, ...props }) => color === ICON_BADGE_COLOR.WARNING &&
+    css `
+      background-color: ${warningLightest(props)};
+      color: ${warningMain(props)};
+    `};
 `;

package/lib/components/common/IconButton/components/LoadingIconButton/loadingIconButton.js

@@ -1,17 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingIconButton = void 0;
-const react_1 = __importDefault(require("react"));
-const loadingIcon_1 = require("../../../CustomIcon/components/LoadingIcon/loadingIcon");
-const iconButton_styles_1 = require("../../iconButton.styles");
+import React from "react";
+import { LoadingIcon } from "../../../CustomIcon/components/LoadingIcon/loadingIcon";
+import { MockIconButtonPrimary } from "../../iconButton.styles";
 /**
  * Mock "loading" icon button - a placeholder element styled like a primary icon button without the use of a button element.
  */
-const LoadingIconButton = () => {
-    return (react_1.default.createElement(iconButton_styles_1.MockIconButtonPrimary, null,
-        react_1.default.createElement(loadingIcon_1.LoadingIcon, { fontSize: "small" })));
+export const LoadingIconButton = () => {
+    return (React.createElement(MockIconButtonPrimary, null,
+        React.createElement(LoadingIcon, { fontSize: "small" })));
 };
-exports.LoadingIconButton = LoadingIconButton;

package/lib/components/common/IconButton/components/LoadingIconButton/loadingIconButton.stories.js

@@ -1,15 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingIconButtonStory = void 0;
-const react_1 = __importDefault(require("react"));
-const loadingIconButton_1 = require("./loadingIconButton");
-exports.default = {
-    component: loadingIconButton_1.LoadingIconButton,
+import React from "react";
+import { LoadingIconButton } from "./loadingIconButton";
+export default {
+    component: LoadingIconButton,
     title: "Components/Common/IconButton/Download",
 };
-const LoadingIconButtonTemplate = () => react_1.default.createElement(loadingIconButton_1.LoadingIconButton, null);
-exports.LoadingIconButtonStory = LoadingIconButtonTemplate.bind({});
-exports.LoadingIconButtonStory.args = {};
+const LoadingIconButtonTemplate = () => React.createElement(LoadingIconButton, null);
+export const LoadingIconButtonStory = LoadingIconButtonTemplate.bind({});
+LoadingIconButtonStory.args = {};

package/lib/components/common/IconButton/iconButton.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 { Button } from "./iconButton.styles";
+export const IconButton = ({ className, Icon, iconProps = { fontSize: "small" }, open = false, size = "large", ...props /* Spread props to allow for Mui IconButtonProps specific prop overrides e.g. "onClick". */ }) => {
+    return (React.createElement(Button, { className: className, open: open, size: size, ...props },
+        React.createElement(Icon, { ...iconProps })));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = void 0;
-const react_1 = __importDefault(require("react"));
-const iconButton_styles_1 = require("./iconButton.styles");
-const IconButton = (_a) => {
-    var { className, Icon, iconProps = { fontSize: "small" }, open = false, size = "large" } = _a, props = __rest(_a, ["className", "Icon", "iconProps", "open", "size"]) /* Spread props to allow for Mui IconButtonProps specific prop overrides e.g. "onClick". */;
-    return (react_1.default.createElement(iconButton_styles_1.Button, Object.assign({ className: className, open: open, size: size }, props),
-        react_1.default.createElement(Icon, Object.assign({}, iconProps))));
-};
-exports.IconButton = IconButton;

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;