@databiosphere/findable-ui 6.0.0 → 7.0.0

package/lib/components/common/Form/components/Input/input.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.InputFormControl = 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");
-exports.InputFormControl = (0, styled_1.default)(material_1.FormControl, {
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { FormControl } from "@mui/material";
+import { inkLight, inkMain } from "../../../../../styles/common/mixins/colors";
+export const InputFormControl = styled(FormControl, {
     shouldForwardProp: (prop) => prop !== "isFilled",
 }) `
   display: flex;
@@ -37,7 +20,7 @@ exports.InputFormControl = (0, styled_1.default)(material_1.FormControl, {
 
     input::placeholder,
     textarea::placeholder {
-      color: ${colors_1.inkLight};
+      color: ${inkLight};
       opacity: 0.8;
     }
 
@@ -49,16 +32,13 @@ exports.InputFormControl = (0, styled_1.default)(material_1.FormControl, {
     }
 
     // Input filled.
-    ${(_a) => {
-    var { isFilled } = _a, props = __rest(_a, ["isFilled"]);
-    return isFilled &&
-        (0, react_1.css) `
+    ${({ isFilled, ...props }) => isFilled &&
+    css `
         & .MuiOutlinedInput-input,
         .MuiSvgIcon-root {
-          color: ${(0, colors_1.inkMain)(props)};
+          color: ${inkMain(props)};
         }
-      `;
-}};
+      `};
   }
 
   .MuiFormHelperText-root {

package/lib/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.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 ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import React from "react";
+export const DropDownIcon = ({ ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */ }) => {
+    return (React.createElement(ArrowDropDownRoundedIcon, { color: "inkMain", fontSize: "small", ...props }));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropDownIcon = void 0;
-const ArrowDropDownRounded_1 = __importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
-const react_1 = __importDefault(require("react"));
-const DropDownIcon = (_a) => {
-    var props = __rest(_a, []) /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */;
-    return (react_1.default.createElement(ArrowDropDownRounded_1.default, Object.assign({ color: "inkMain", fontSize: "small" }, props)));
-};
-exports.DropDownIcon = DropDownIcon;

package/lib/components/common/Form/components/Select/select.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 { Select as MSelect, Typography, } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
+import { InputFormControl } from "./select.styles";
+export const Select = ({ children, className, isFilled, label, onBlur, ...props /* Spread props to allow for Mui SelectProps specific prop overrides e.g. "disabled". */ }) => {
+    return (React.createElement(InputFormControl, { className: className, isFilled: isFilled },
+        label && React.createElement(Typography, { variant: TEXT_BODY_400 }, label),
+        React.createElement(MSelect, { fullWidth: true, inputProps: { onBlur }, size: "small", ...props }, children)));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../theme/common/typography");
-const select_styles_1 = require("./select.styles");
-const Select = (_a) => {
-    var { children, className, isFilled, label, onBlur } = _a, props = __rest(_a, ["children", "className", "isFilled", "label", "onBlur"]) /* Spread props to allow for Mui SelectProps specific prop overrides e.g. "disabled". */;
-    return (react_1.default.createElement(select_styles_1.InputFormControl, { className: className, isFilled: isFilled },
-        label && react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, label),
-        react_1.default.createElement(material_1.Select, Object.assign({ fullWidth: true, inputProps: { onBlur }, size: "small" }, props), children)));
-};
-exports.Select = Select;

package/lib/components/common/Form/components/Select/select.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.InputFormControl = 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");
-exports.InputFormControl = (0, styled_1.default)(material_1.FormControl, {
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { FormControl } from "@mui/material";
+import { inkMain } from "../../../../../styles/common/mixins/colors";
+export const InputFormControl = styled(FormControl, {
     shouldForwardProp: (prop) => prop !== "isFilled",
 }) `
   display: flex;
@@ -27,14 +10,11 @@ exports.InputFormControl = (0, styled_1.default)(material_1.FormControl, {
   gap: 4px;
 
   // Input filled.
-  ${(_a) => {
-    var { isFilled } = _a, props = __rest(_a, ["isFilled"]);
-    return isFilled &&
-        (0, react_1.css) `
+  ${({ isFilled, ...props }) => isFilled &&
+    css `
       & .MuiOutlinedInput-input,
       .MuiSvgIcon-root {
-        color: ${(0, colors_1.inkMain)(props)};
+        color: ${inkMain(props)};
       }
-    `;
-}};
+    `};
 `;

package/lib/components/common/Form/components/UploadFile/uploadFile.js

@@ -1,34 +1,27 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadFile = void 0;
-const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../theme/common/typography");
-const loading_1 = require("../../../../Loading/loading");
-const errorIcon_1 = require("../../../CustomIcon/components/ErrorIcon/errorIcon");
-const input_styles_1 = require("../Input/input.styles");
-const uploadFile_styles_1 = require("./uploadFile.styles");
-const UploadFile = ({ attachmentName, attachmentRejected, attachmentRejections, attachmentToken, attachmentUploading, className, isDragActive, label, onAttachmentDeleted, open, }) => {
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { FormHelperText, Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
+import { Loading, LOADING_PANEL_STYLE } from "../../../../Loading/loading";
+import { ErrorIcon } from "../../../CustomIcon/components/ErrorIcon/errorIcon";
+import { InputFormControl } from "../Input/input.styles";
+import { Button, Underline } from "./uploadFile.styles";
+export const UploadFile = ({ attachmentName, attachmentRejected, attachmentRejections, attachmentToken, attachmentUploading, className, isDragActive, label, onAttachmentDeleted, open, }) => {
     const error = attachmentRejected;
     const isAttached = Boolean(attachmentToken);
-    return (react_1.default.createElement(input_styles_1.InputFormControl, { className: className, error: error },
-        label && react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, label),
-        react_1.default.createElement(uploadFile_styles_1.Button, { isAttached: isAttached, isDragActive: isDragActive, isError: error, onClick: attachmentToken ? onAttachmentDeleted : open },
-            react_1.default.createElement(loading_1.Loading, { iconSize: "small", loading: attachmentUploading, panelStyle: loading_1.LOADING_PANEL_STYLE.INHERIT }),
-            react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, isAttached ? (attachmentName) : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (React.createElement(InputFormControl, { className: className, error: error },
+        label && React.createElement(Typography, { variant: TEXT_BODY_400 }, label),
+        React.createElement(Button, { isAttached: isAttached, isDragActive: isDragActive, isError: error, onClick: attachmentToken ? onAttachmentDeleted : open },
+            React.createElement(Loading, { iconSize: "small", loading: attachmentUploading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+            React.createElement(Typography, { variant: TEXT_BODY_400 }, isAttached ? (attachmentName) : (React.createElement(React.Fragment, null,
                 "Drag or ",
-                react_1.default.createElement(uploadFile_styles_1.Underline, null, "Click"),
+                React.createElement(Underline, null, "Click"),
                 " to attach file"))),
-            isAttached && react_1.default.createElement(CloseRounded_1.default, { fontSize: "small" })),
-        error && (react_1.default.createElement(material_1.FormHelperText, null,
-            react_1.default.createElement(errorIcon_1.ErrorIcon, { fontSize: "xxsmall" }),
+            isAttached && React.createElement(CloseRoundedIcon, { fontSize: "small" })),
+        error && (React.createElement(FormHelperText, null,
+            React.createElement(ErrorIcon, { fontSize: "xxsmall" }),
             getErrorMessage(attachmentRejections)))));
 };
-exports.UploadFile = UploadFile;
 /**
  * Returns the error message for the attachment.
  * @param attachmentRejections - Attachment rejections.

package/lib/components/common/Form/components/UploadFile/uploadFile.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.Underline = 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");
-exports.Button = (0, styled_1.default)(material_1.ButtonBase, {
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ButtonBase } from "@mui/material";
+import { errorMain, infoLightest, infoMain, inkMain, smokeDark, smokeLight, } from "../../../../../styles/common/mixins/colors";
+export const Button = styled(ButtonBase, {
     shouldForwardProp: (prop) => prop !== "isAttached" && prop !== "isDragActive" && prop !== "isError",
 }) `
   align-items: center;
-  background-color: ${colors_1.smokeLight};
-  border: 1px dashed ${colors_1.smokeDark};
+  background-color: ${smokeLight};
+  border: 1px dashed ${smokeDark};
   border-radius: 4px;
   display: flex;
   gap: 8px;
@@ -23,27 +17,27 @@ exports.Button = (0, styled_1.default)(material_1.ButtonBase, {
 
   // Drag active.
   ${({ isDragActive, theme }) => isDragActive &&
-    (0, react_1.css) `
-      background-color: ${(0, colors_1.infoLightest)({ theme })};
-      border: 1px dashed ${(0, colors_1.infoMain)({ theme })};
+    css `
+      background-color: ${infoLightest({ theme })};
+      border: 1px dashed ${infoMain({ theme })};
     `};
 
   // Error.
   ${({ isDragActive, isError, theme }) => isError &&
     !isDragActive &&
-    (0, react_1.css) `
-      border: 1px dashed ${(0, colors_1.errorMain)({ theme })};
+    css `
+      border: 1px dashed ${errorMain({ theme })};
     `};
 
   .MuiTypography-text-body-400 {
-    color: ${colors_1.inkMain};
+    color: ${inkMain};
     opacity: 0.8;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 `;
-exports.Underline = styled_1.default.span `
+export const Underline = styled.span `
   text-decoration: underline;
   text-underline-offset: 2px;
 `;

package/lib/components/common/Grid/components/GridItem/gridItem.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.GridItem = 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 Item component for rendering CSS grid items.
  */
-const GridItem = (_a) => {
-    var { children, gridItemSx } = _a, props = __rest(_a, ["children", "gridItemSx"]) /* Spread props to allow for Mui Box specific prop overrides. */;
-    return (react_1.default.createElement(material_1.Box, Object.assign({ sx: gridItemSx }, props), children));
+export const GridItem = ({ children, gridItemSx, ...props /* Spread props to allow for Mui Box specific prop overrides. */ }) => {
+    return (React.createElement(Box, { sx: gridItemSx, ...props }, children));
 };
-exports.GridItem = GridItem;

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;