@symply.io/basic-components 1.3.11-alpha.9 → 1.4.0-alpha.10

package/FormRadioGroup/index.js

@@ -1,3 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Radio from "@mui/material/Radio";
 import Tooltip from "@mui/material/Tooltip";
@@ -9,11 +31,13 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function FormRadioGroup(props) {
-    const { formLabel, value, options, disabled, tooltip, primaryColor, secondaryColor, radioLabelPlacement, onChange, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(FormControl, { disabled: disabled, ...rest, children: [tooltip ? (_jsx(Tooltip, { arrow: true, placement: "top", title: tooltip, disableTouchListener: true, children: _jsx(FormLabel, { children: formLabel }) })) : (_jsx(FormLabel, { children: formLabel })), _jsx(RadioGroup, { value: value, onChange: event => {
+    var formLabel = props.formLabel, value = props.value, options = props.options, disabled = props.disabled, tooltip = props.tooltip, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, radioLabelPlacement = props.radioLabelPlacement, onChange = props.onChange, rest = __rest(props, ["formLabel", "value", "options", "disabled", "tooltip", "primaryColor", "secondaryColor", "radioLabelPlacement", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ disabled: disabled }, rest, { children: [tooltip ? (_jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip, disableTouchListener: true }, { children: _jsx(FormLabel, { children: formLabel }) }))) : (_jsx(FormLabel, { children: formLabel })), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
                         onChange(event.target.value);
-                    }, children: options.map(opt => (_jsx(FormControlLabel, { value: opt.value, control: _jsx(Radio, {}), label: _jsx(Typography, { children: opt.label }), labelPlacement: radioLabelPlacement || "end", disabled: (opt.disabled ?? false) || disabled }, String(opt.value)))) })] }) }));
+                    } }, { children: options.map(function (opt) {
+                        var _a;
+                        return (_jsx(FormControlLabel, { value: opt.value, control: _jsx(Radio, {}), label: _jsx(Typography, { children: opt.label }), labelPlacement: radioLabelPlacement || "end", disabled: ((_a = opt.disabled) !== null && _a !== void 0 ? _a : false) || disabled }, String(opt.value)));
+                    }) }))] })) })));
 }
 export default FormRadioGroup;
-export * from "./types";

package/FormRadioGroup/types.d.ts

@@ -1,14 +1,14 @@
 import { CSSProperties } from "react";
 import { FormControlProps } from "@mui/material/FormControl";
 import { FormControlLabelProps } from "@mui/material/FormControlLabel";
-interface IRadioOption {
+export declare type RadioOption = {
     label: string;
     value: string | boolean | number;
     disabled?: boolean;
-}
+};
 export interface FormRadioGroupProps extends Omit<FormControlProps, "onChange"> {
     formLabel: string;
-    options: Array<IRadioOption>;
+    options: Array<RadioOption>;
     value: string | boolean | number;
     tooltip?: string;
     primaryColor?: CSSProperties["color"];
@@ -16,4 +16,3 @@ export interface FormRadioGroupProps extends Omit<FormControlProps, "onChange">
     radioLabelPlacement?: FormControlLabelProps["labelPlacement"];
     onChange: (value: string | boolean | number) => void;
 }
-export {};

package/FormSelector/MultipleSelector.js

@@ -1,3 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Select from "@mui/material/Select";
 import Tooltip from "@mui/material/Tooltip";
@@ -9,18 +31,19 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function MultipleSelector(props) {
-    const { label, variant = "outlined", value, tooltip, required = false, disabled = false, multiple = false, showHelperText = false, helperText, options = [], primaryColor, secondaryColor, onChange, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const { tooltipOpen, onOpenTooltip, onCloseTooltip } = useInteractions();
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Tooltip, { arrow: true, placement: "top", title: tooltip ?? "", open: !!tooltip && tooltipOpen, children: _jsxs(FormControl, { variant: variant, disabled: disabled, required: required, ...rest, children: [label && (_jsx(InputLabel, { id: "symply-multiple-select", children: label })), _jsx(Select, { disabled: disabled, required: required, value: value, multiple: true, onChange: event => {
+    var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, tooltip = props.tooltip, _b = props.required, required = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.multiple, multiple = _d === void 0 ? false : _d, _e = props.showHelperText, showHelperText = _e === void 0 ? false : _e, helperText = props.helperText, _f = props.options, options = _f === void 0 ? [] : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "tooltip", "required", "disabled", "multiple", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }))), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, onChange: function (event) {
+                            var _a;
                             event.preventDefault();
-                            onChange(event?.target?.value);
+                            onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
                             onFocus: onOpenTooltip,
                             onBlur: onCloseTooltip
-                        }, label: label, renderValue: multiple ? selected => selected.join("; ") : undefined, children: options?.length > 0 ? (options.map(option => {
-                            const { label, value } = option;
-                            return (_jsx(MenuItem, { value: value, children: label }, value));
-                        })) : (_jsx(MenuItem, { value: "", disabled: true, children: "No Options" })) }), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] }) }) }));
+                        }, label: label, renderValue: multiple ? function (selected) { return selected.join("; "); } : undefined }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
+                            var _a = option, label = _a.label, value = _a.value;
+                            return (_jsx(MenuItem, __assign({ value: value }, { children: label }), value));
+                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default MultipleSelector;

package/FormSelector/SimpleSelector.js

@@ -1,3 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Select from "@mui/material/Select";
 import Tooltip from "@mui/material/Tooltip";
@@ -9,18 +31,19 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function SimpleSelector(props) {
-    const { label, variant = "outlined", value, tooltip, disabled = false, required = false, showHelperText = false, helperText, options = [], primaryColor, secondaryColor, onChange, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const { tooltipOpen, onOpenTooltip, onCloseTooltip } = useInteractions();
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Tooltip, { arrow: true, placement: "top", title: tooltip ?? "", open: !!tooltip && tooltipOpen, children: _jsxs(FormControl, { variant: variant, disabled: disabled, required: required, ...rest, children: [label && (_jsx(InputLabel, { id: "symply-simple-selector", children: label })), _jsx(Select, { value: value, required: required, disabled: disabled, onChange: event => {
+    var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, tooltip = props.tooltip, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.required, required = _c === void 0 ? false : _c, _d = props.showHelperText, showHelperText = _d === void 0 ? false : _d, helperText = props.helperText, _e = props.options, options = _e === void 0 ? [] : _e, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "tooltip", "disabled", "required", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }))), _jsx(Select, __assign({ value: value, required: required, disabled: disabled, onChange: function (event) {
+                            var _a;
                             event.preventDefault();
-                            onChange(event?.target?.value);
+                            onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
                             onFocus: onOpenTooltip,
                             onBlur: onCloseTooltip
-                        }, label: label, children: options?.length > 0 ? (options.map(option => {
-                            const { label, value, disabled } = option;
-                            return (_jsx(MenuItem, { value: value, disabled: disabled, children: label }, value));
-                        })) : (_jsx(MenuItem, { value: "", disabled: true, children: "No Options" })) }), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] }) }) }));
+                        }, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
+                            var label = option.label, value = option.value, disabled = option.disabled;
+                            return (_jsx(MenuItem, __assign({ value: value, disabled: disabled }, { children: label }), value));
+                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default SimpleSelector;

package/FormSelector/useInteractions.js

@@ -1,20 +1,20 @@
 import { useState, useEffect, useCallback } from "react";
 function useInteractions() {
-    const [tooltipOpen, setTooltipOpen] = useState(false);
-    const onOpenTooltip = useCallback(() => {
+    var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
+    var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);
     }, []);
-    const onCloseTooltip = useCallback(() => {
+    var onCloseTooltip = useCallback(function () {
         setTooltipOpen(false);
     }, []);
-    useEffect(() => {
+    useEffect(function () {
         window.addEventListener("scroll", onCloseTooltip);
         window.addEventListener("resize", onCloseTooltip);
     }, [onCloseTooltip]);
-    useEffect(() => () => {
+    useEffect(function () { return function () {
         window.removeEventListener("resize", onCloseTooltip);
         window.removeEventListener("scroll", onCloseTooltip);
-    }, [onCloseTooltip]);
-    return { tooltipOpen, onOpenTooltip, onCloseTooltip };
+    }; }, [onCloseTooltip]);
+    return { tooltipOpen: tooltipOpen, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
 }
 export default useInteractions;

package/HelpCaption/index.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from "react";
-export interface HelpCaptionProps {
+export declare type HelpCaptionProps = {
     mainCaption: string;
     subCaption?: string;
     linkUrl?: string;
@@ -7,6 +7,6 @@ export interface HelpCaptionProps {
     linkType?: "WEBPAGE" | "VIDEO";
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-}
+};
 declare function HelpCaption(props: HelpCaptionProps): JSX.Element;
 export default HelpCaption;

package/HelpCaption/index.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
@@ -6,11 +17,11 @@ import VideoPlayerModal from "../VideoPlayerModal";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function HelpCaption(props) {
-    const { mainCaption, subCaption, linkUrl, linkText = "Watch Demo", linkType = "WEBPAGE", primaryColor, secondaryColor } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const { videoModalOpen, onOpenVideoModal, onCloseVideoModal } = useInteractions();
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Grid, { container: true, spacing: 1, direction: subCaption ? "column" : "row", children: [_jsx(Grid, { item: true, children: _jsx(Typography, { align: "left", component: "span", children: mainCaption }) }), _jsxs(Grid, { item: true, children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, { align: "left", component: "span", children: subCaption }), "\u00A0"] })), linkUrl && (_jsx(Typography, { onClick: linkType === "WEBPAGE"
-                                ? () => {
+    var mainCaption = props.mainCaption, subCaption = props.subCaption, linkUrl = props.linkUrl, _a = props.linkText, linkText = _a === void 0 ? "Watch Demo" : _a, _b = props.linkType, linkType = _b === void 0 ? "WEBPAGE" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _c = useInteractions(), videoModalOpen = _c.videoModalOpen, onOpenVideoModal = _c.onOpenVideoModal, onCloseVideoModal = _c.onCloseVideoModal;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption })) })), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption })), "\u00A0"] })), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
+                                ? function () {
                                     window.open(linkUrl);
                                 }
                                 : onOpenVideoModal, align: "left", color: "primary", component: "span", sx: {
@@ -19,6 +30,6 @@ function HelpCaption(props) {
                                     color: theme.palette.primary.dark,
                                     textDecoration: "underline"
                                 }
-                            }, children: _jsx("b", { children: linkText }) }))] }), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }))] }) }));
+                            } }, { children: _jsx("b", { children: linkText }) })))] })), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }))] })) })));
 }
 export default HelpCaption;

package/HelpCaption/useInteractions.js

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 function useInteractions() {
-    const [videoModalOpen, setVideoModalOpen] = useState(false);
+    var _a = useState(false), videoModalOpen = _a[0], setVideoModalOpen = _a[1];
     function onOpenVideoModal() {
         setVideoModalOpen(true);
     }
     function onCloseVideoModal() {
         setVideoModalOpen(false);
     }
-    return { videoModalOpen, onOpenVideoModal, onCloseVideoModal };
+    return { videoModalOpen: videoModalOpen, onOpenVideoModal: onOpenVideoModal, onCloseVideoModal: onCloseVideoModal };
 }
 export default useInteractions;

package/LoadingModal/Modal.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
@@ -8,11 +19,11 @@ import CircularProgress from "@mui/material/CircularProgress";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function LoadingModal(props) {
-    const { open, text = "Loading...", direction = "column", showProgess = false, percent = 0, primaryColor, secondaryColor } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Dialog, { maxWidth: "xs", open: open, sx: { backgroundColor: "#7A7A7A97" }, PaperProps: { sx: { backgroundColor: "#F2F2F2CF" } }, onClose: (_, reason) => {
+    var open = props.open, _a = props.text, text = _a === void 0 ? "Loading..." : _a, _b = props.direction, direction = _b === void 0 ? "column" : _b, _c = props.showProgess, showProgess = _c === void 0 ? false : _c, _d = props.percent, percent = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Dialog, __assign({ maxWidth: "xs", open: open, sx: { backgroundColor: "#7A7A7A97" }, PaperProps: { sx: { backgroundColor: "#F2F2F2CF" } }, onClose: function (_, reason) {
                 if (reason === "backdropClick")
                     return;
-            }, disableScrollLock: true, disableAutoFocus: true, disableEnforceFocus: true, disableEscapeKeyDown: true, children: _jsx(DialogContent, { children: _jsxs(Grid, { container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid", children: [_jsxs(Box, { position: "relative", display: "inline-flex", sx: { mt: 1.25 }, children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }), showProgess && percent >= 0 && (_jsx(Box, { top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", children: _jsxs(Typography, { variant: "caption", children: [Math.round(percent), "%"] }) }))] }), _jsx(Typography, { component: "span", sx: { mt: 1, fontSize: 16, fontWeight: 400 }, children: text })] }) }) }) }));
+            }, disableScrollLock: true, disableAutoFocus: true, disableEnforceFocus: true, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] })) })))] })), _jsx(Typography, __assign({ component: "span", sx: { mt: 1, fontSize: 16, fontWeight: 400 } }, { children: text }))] })) }) })) })));
 }
 export default LoadingModal;

package/LoadingModal/index.d.ts

@@ -1,4 +1,5 @@
 import LoadingModal from "./Modal";
+import useLoadingModal, { LoadingModalProvider } from "./useLoadingModal";
 export default LoadingModal;
-export * from "./useLoadingModal";
+export { useLoadingModal, LoadingModalProvider };
 export * from "./types";

package/LoadingModal/index.js

@@ -1,4 +1,6 @@
+"use client";
 import LoadingModal from "./Modal";
+import useLoadingModal, { LoadingModalProvider } from "./useLoadingModal";
 export default LoadingModal;
-export * from "./useLoadingModal";
+export { useLoadingModal, LoadingModalProvider };
 export * from "./types";

package/LoadingModal/useLoadingModal.d.ts

@@ -1,3 +1,3 @@
 import { LoadingModalContextProps, LoadingModalProviderProps } from "./types";
 export declare function LoadingModalProvider(props: LoadingModalProviderProps): JSX.Element;
-export declare function useLoadingModal(): LoadingModalContextProps;
+export default function useLoadingModal(): LoadingModalContextProps;

package/LoadingModal/useLoadingModal.js

@@ -1,15 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useMemo, useState, useContext, useCallback, createContext } from "react";
 import generateUUID from "../utils/uuid";
 import LoadingModal from "./Modal";
-const LoadingModalContext = createContext({
-    onOpenLoadingModal: () => null,
-    onCloseLoadingModal: () => { }
+var LoadingModalContext = createContext({
+    onOpenLoadingModal: function () { return null; },
+    onCloseLoadingModal: function () { }
 });
 export function LoadingModalProvider(props) {
-    const { children, primaryColor, secondaryColor } = props;
-    const [instances, setInstances] = useState([]);
-    const modalArgs = useMemo(() => {
+    var children = props.children, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var _a = useState([]), instances = _a[0], setInstances = _a[1];
+    var modalArgs = useMemo(function () {
         return instances.length > 0
             ? {
                 open: true,
@@ -17,23 +37,21 @@ export function LoadingModalProvider(props) {
             }
             : { open: false, text: "Loading..." };
     }, [instances]);
-    const onOpenLoadingModal = useCallback((loadingText) => {
-        const instance = {
+    var onOpenLoadingModal = useCallback(function (loadingText) {
+        var instance = {
             id: generateUUID(),
             text: loadingText || "Loading..."
         };
-        setInstances(insts => [...insts, instance]);
+        setInstances(function (insts) { return __spreadArray(__spreadArray([], insts, true), [instance], false); });
         return instance;
     }, []);
-    const onCloseLoadingModal = useCallback((instance) => {
-        if (instance?.id) {
-            setInstances(insts => [
-                ...insts.filter(inst => inst.id !== instance.id)
-            ]);
+    var onCloseLoadingModal = useCallback(function (instance) {
+        if (instance === null || instance === void 0 ? void 0 : instance.id) {
+            setInstances(function (insts) { return __spreadArray([], insts.filter(function (inst) { return inst.id !== instance.id; }), true); });
         }
     }, []);
-    return (_jsx(LoadingModalContext.Provider, { value: { onOpenLoadingModal, onCloseLoadingModal }, children: _jsxs(_Fragment, { children: [cloneElement(children), _jsx(LoadingModal, { ...modalArgs, primaryColor: primaryColor, secondaryColor: secondaryColor })] }) }));
+    return (_jsx(LoadingModalContext.Provider, __assign({ value: { onOpenLoadingModal: onOpenLoadingModal, onCloseLoadingModal: onCloseLoadingModal } }, { children: _jsxs(_Fragment, { children: [cloneElement(children), _jsx(LoadingModal, __assign({}, modalArgs, { primaryColor: primaryColor, secondaryColor: secondaryColor }))] }) })));
 }
-export function useLoadingModal() {
+export default function useLoadingModal() {
     return useContext(LoadingModalContext);
 }

package/MenuButtonGroup/MenuItem.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MenuItem from "@mui/material/MenuItem";
 import ListItemIcon from "@mui/material/ListItemIcon";
@@ -5,8 +16,8 @@ import ListItemText from "@mui/material/ListItemText";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function ButtonMenuItem(props) {
-    const { buttonText, buttonIcon, disabled = false, onClick } = props;
-    const theme = useCustomTheme();
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(MenuItem, { onClick: onClick, disabled: disabled, children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }), _jsx(ListItemText, { primary: buttonText })] }) }));
+    var buttonText = props.buttonText, buttonIcon = props.buttonIcon, _a = props.disabled, disabled = _a === void 0 ? false : _a, onClick = props.onClick;
+    var theme = useCustomTheme();
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }), _jsx(ListItemText, { primary: buttonText })] })) })));
 }
 export default ButtonMenuItem;

package/MenuButtonGroup/index.js

@@ -1,3 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Menu from "@mui/material/Menu";
@@ -7,29 +65,39 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ButtonItem from "./MenuItem";
 import useCustomTheme from "../useCustomTheme";
 function MenuButtonGroup(props) {
-    const { buttonText, buttons, size, color = "primary", disabled = false, variant = "outlined", primaryColor, secondaryColor } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const [anchorEl, setAnchorEl] = useState(null);
+    var _this = this;
+    var buttonText = props.buttonText, buttons = props.buttons, size = props.size, _a = props.color, color = _a === void 0 ? "primary" : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? "outlined" : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _d = useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
     function onClick(event) {
         setAnchorEl(event.currentTarget);
     }
-    const onClose = () => {
+    var onClose = function () {
         setAnchorEl(null);
     };
-    return (_jsxs(ThemeProvider, { theme: theme, children: [_jsx(Button, { "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }), disabled: disabled, children: buttonText }), _jsx(Menu, { id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }), disabled: disabled }, { children: buttonText })), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "center"
                 }, transformOrigin: {
                     vertical: "top",
                     horizontal: "center"
-                }, open: Boolean(anchorEl), onClose: onClose, children: buttons.map(button => {
-                    const { onClick, buttonText, ...rest } = button;
-                    return (_jsx(ButtonItem, { buttonText: buttonText, ...rest, onClick: async (event) => {
-                            if (onClick) {
-                                await onClick(event);
-                            }
-                            onClose();
-                        } }, buttonText));
-                }) })] }));
+                }, open: Boolean(anchorEl), onClose: onClose }, { children: buttons.map(function (button) {
+                    var onClick = button.onClick, buttonText = button.buttonText, rest = __rest(button, ["onClick", "buttonText"]);
+                    return (_jsx(ButtonItem, __assign({ buttonText: buttonText }, rest, { onClick: function (event) { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        if (!onClick) return [3, 2];
+                                        return [4, onClick(event)];
+                                    case 1:
+                                        _a.sent();
+                                        _a.label = 2;
+                                    case 2:
+                                        onClose();
+                                        return [2];
+                                }
+                            });
+                        }); } }), buttonText));
+                }) }))] })));
 }
 export default MenuButtonGroup;