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

package/FeinInput/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 } from "react/jsx-runtime";
 import { useRifm } from "rifm";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
@@ -5,49 +27,49 @@ import TextField from "@mui/material/TextField";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 export function FeinInputFormat(str) {
-    const digits = (str.match(/\d+/g) || []).join("");
-    const chars = digits.split("");
-    return chars.reduce((prev, curr, index) => {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
         if (index === 2) {
-            return `${prev} - ${curr}`;
+            return "".concat(prev, " - ").concat(curr);
         }
         else {
-            return `${prev}${curr}`;
+            return "".concat(prev).concat(curr);
         }
-    }, ``);
+    }, "");
 }
 export function onValidateFein(feinString) {
-    const reg = /^\d{2}\s?-\s?\d{7}$/g;
+    var reg = /^\d{2}\s?-\s?\d{7}$/g;
     return reg.test(feinString);
 }
 function FeinInput(props) {
-    const { value, error = false, helperText = "Please enter a valid FEIN", onBlur, onFocus, onChange, onValidate, primaryColor, secondaryColor, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const { valLength, addMask } = useInteractions({ value });
-    const rifm = useRifm({
+    var value = props.value, _a = props.error, error = _a === void 0 ? false : _a, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid FEIN" : _b, onBlur = props.onBlur, onFocus = props.onFocus, onChange = props.onChange, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "error", "helperText", "onBlur", "onFocus", "onChange", "onValidate", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var rifm = useRifm({
         mask: true,
         value: String(value),
-        onChange,
+        onChange: onChange,
         replace: addMask,
         format: FeinInputFormat
     });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { value: rifm.value, onChange: rifm.onChange, error: error ||
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, onChange: rifm.onChange, error: error ||
                 (valLength > 0 &&
                     (onValidate ? !onValidate(value) : !onValidateFein(value))), helperText: valLength > 0 &&
                 (onValidate ? !onValidate(value) : !onValidateFein(value))
                 ? helperText
-                : "", onFocus: event => {
+                : "", onFocus: function (event) {
                 if (onFocus) {
                     onFocus(event);
                 }
-            }, onBlur: event => {
+            }, onBlur: function (event) {
                 onChange(value.trim());
                 if (onBlur) {
                     onBlur(event);
                 }
             }, InputLabelProps: {
                 shrink: true
-            }, ...rest }) }));
+            } }, rest)) })));
 }
 export default FeinInput;
 export * from "./types";

package/FeinInput/useInteractions.js

@@ -1,16 +1,16 @@
 import { useCallback, useMemo } from "react";
 function useInteractions(props) {
-    const { value } = props;
-    const addMask = useCallback((str) => {
-        const digits = (str.match(/\d+/g) || []).join("");
-        const areaCode = digits.slice(0, 2).padEnd(2, "_");
-        const prefixCode = digits.slice(2, 9).padEnd(7, "_");
-        return `${areaCode} - ${prefixCode}`;
+    var value = props.value;
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var areaCode = digits.slice(0, 2).padEnd(2, "_");
+        var prefixCode = digits.slice(2, 9).padEnd(7, "_");
+        return "".concat(areaCode, " - ").concat(prefixCode);
     }, []);
-    const valLength = useMemo(() => {
-        const digitsArr = String(value).match(/\d/g);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength, addMask };
+    return { valLength: valLength, addMask: addMask };
 }
 export default useInteractions;

package/FileUploader/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 Link from "@mui/material/Link";
 import Grid from "@mui/material/Grid";
@@ -10,32 +32,32 @@ import AlertDialog from "../AlertDialog";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function FileUploader(props) {
-    const { height = "150px", maxWidth = "430px", loading = false, disabled = false, dropFileText, chooseFileText, primaryColor, secondaryColor, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
-    const { alertArgs, rootProps, onCloseAlert, onSelectFile, getRootProps, getInputProps } = useInteractions({ ...rest, disabled });
-    return (_jsxs(ThemeProvider, { theme: theme, children: [lessThanSm ? (_jsxs("div", { ...getRootProps(), children: [_jsx("input", { ...getInputProps() }), _jsx(Link, { color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
+    var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
+    var _e = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _e.alertArgs, rootProps = _e.rootProps, onCloseAlert = _e.onCloseAlert, onSelectFile = _e.onSelectFile, getRootProps = _e.getRootProps, getInputProps = _e.getInputProps;
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
                             fontFamily: "Roboto, Helvetica, Arial, sans-serif",
                             cursor: disabled ? "not-allowed" : "pointer"
-                        }, children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") })] })) : (_jsx(Grid, { container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
+                        } }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
                     border: "1px dashed #0099a7",
                     borderRadius: "5px",
                     outline: "none",
                     backgroundColor: "#F2F2F2",
-                    maxWidth,
-                    height,
+                    maxWidth: maxWidth,
+                    height: height,
                     width: "100%"
-                }, ...rootProps, children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", { ...getInputProps() }), _jsx(Typography, { component: "p", variant: "caption", sx: {
+                } }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
                                 fontSize: ".875rem",
                                 textAlign: "center"
-                            }, children: dropFileText || "Drop files here" }), _jsx(Button, { variant: "contained", onClick: onSelectFile, sx: {
+                            } }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
                                 backgroundColor: "white !important",
                                 color: disabled
                                     ? theme.palette.grey[400]
                                     : theme.palette.primary.main,
                                 fontFamily: "Roboto, Helvetica, Arial, sans-serif",
                                 cursor: disabled ? "not-allowed" : "pointer"
-                            }, disabled: disabled, children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) })] })) })), _jsx(AlertDialog, { open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert, children: alertArgs.message })] }));
+                            }, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))), _jsx(AlertDialog, __assign({ open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert }, { children: alertArgs.message }))] })));
 }
 export default FileUploader;
 export * from "./types";

package/FileUploader/useInteractions.js

@@ -1,22 +1,37 @@
+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 { useState, useCallback, useMemo } from "react";
 import { useDropzone } from "react-dropzone";
 function useInteractions(props) {
-    const { multiple = false, disabled = false, maxFiles, maxSize = 1024 * 1024 * 5, accept, onUpload, sizeExceededErrorText, wrongFileTypeErrorText } = props;
-    const ERROR_TYPE_MSG = useMemo(() => wrongFileTypeErrorText ||
-        "The type of the file you uploaded is not accepted, please reupload!", [wrongFileTypeErrorText]);
-    const ERROR_SIZE_MSG = useMemo(() => sizeExceededErrorText ||
-        `Your file exceed the max size of ${maxSize / 1024 / 1024}MB.`, [sizeExceededErrorText, maxSize]);
-    const [alertArgs, setAlertArgs] = useState({ open: false, message: "" });
-    const onOpenAlert = useCallback((message) => {
-        setAlertArgs(args => ({ ...args, open: true, message }));
+    var _a = props.multiple, multiple = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, maxFiles = props.maxFiles, _c = props.maxSize, maxSize = _c === void 0 ? 1024 * 1024 * 5 : _c, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
+    var ERROR_TYPE_MSG = useMemo(function () {
+        return wrongFileTypeErrorText ||
+            "The type of the file you uploaded is not accepted, please reupload!";
+    }, [wrongFileTypeErrorText]);
+    var ERROR_SIZE_MSG = useMemo(function () {
+        return sizeExceededErrorText ||
+            "Your file exceed the max size of ".concat(maxSize / 1024 / 1024, "MB.");
+    }, [sizeExceededErrorText, maxSize]);
+    var _d = useState({ open: false, message: "" }), alertArgs = _d[0], setAlertArgs = _d[1];
+    var onOpenAlert = useCallback(function (message) {
+        setAlertArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message })); });
     }, []);
-    const onCloseAlert = useCallback(() => {
+    var onCloseAlert = useCallback(function () {
         setAlertArgs({ open: false, message: "" });
     }, []);
-    const onDrop = useCallback((acceptedFiles, rejectedFiles) => {
+    var onDrop = useCallback(function (acceptedFiles, rejectedFiles) {
         if (rejectedFiles && rejectedFiles.length > 0) {
-            rejectedFiles.some((rejectedFile) => {
-                const { file, errors } = rejectedFile;
+            rejectedFiles.some(function (rejectedFile) {
+                var file = rejectedFile.file, errors = rejectedFile.errors;
                 if (accept && !Object.keys(accept).includes(file.type)) {
                     onOpenAlert(ERROR_TYPE_MSG);
                     return true;
@@ -36,29 +51,29 @@ function useInteractions(props) {
             onUpload(acceptedFiles);
         }
     }, [accept, onUpload]);
-    const { getRootProps, getInputProps, open: onSelectFile } = useDropzone({
-        onDrop,
-        accept,
-        multiple,
-        disabled,
-        maxSize,
-        maxFiles
-    });
-    const rootProps = getRootProps({
-        onClick: e => e.stopPropagation(),
-        onKeyDown: e => {
+    var _e = useDropzone({
+        onDrop: onDrop,
+        accept: accept,
+        multiple: multiple,
+        disabled: disabled,
+        maxSize: maxSize,
+        maxFiles: maxFiles
+    }), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, onSelectFile = _e.open;
+    var rootProps = getRootProps({
+        onClick: function (e) { return e.stopPropagation(); },
+        onKeyDown: function (e) {
             if (e.key === "Space" || e.key === "Enter") {
                 e.stopPropagation();
             }
         }
     });
     return {
-        alertArgs,
-        rootProps,
-        onCloseAlert,
-        onSelectFile,
-        getRootProps,
-        getInputProps
+        alertArgs: alertArgs,
+        rootProps: rootProps,
+        onCloseAlert: onCloseAlert,
+        onSelectFile: onSelectFile,
+        getRootProps: getRootProps,
+        getInputProps: getInputProps
     };
 }
 export default useInteractions;

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,14 @@ 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/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.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;