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

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,22 +37,20 @@ 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() {
     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;

package/NumberInput/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 Tooltip from "@mui/material/Tooltip";
 import Field from "@mui/material/TextField";
@@ -5,12 +27,12 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function NumberInput(props) {
-    const { onChange, value, size = "small", tooltip, integerOnly = false, minValue = Number.MIN_SAFE_INTEGER, maxValue = Number.MAX_SAFE_INTEGER, error, helperText, primaryColor, secondaryColor, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const EXCEED_ERROR = "Your value exceeds the exceptable input range";
+    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.integerOnly, integerOnly = _b === void 0 ? false : _b, _c = props.minValue, minValue = _c === void 0 ? Number.MIN_SAFE_INTEGER : _c, _d = props.maxValue, maxValue = _d === void 0 ? Number.MAX_SAFE_INTEGER : _d, error = props.error, helperText = props.helperText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "integerOnly", "minValue", "maxValue", "error", "helperText", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var EXCEED_ERROR = "Your value exceeds the exceptable input range";
     if (maxValue < minValue)
         throw new Error("Max should be bigger than the `miniValue`!");
-    const { exceedError, tooltipOpen, handleBlur, handleChange, onOpenTooltip, onCloseTooltip } = useInteractions({ maxValue, minValue, value, onChange });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Tooltip, { arrow: true, placement: "top", title: tooltip ?? "", open: !!tooltip && tooltipOpen, children: _jsx(Field, { size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), ...rest }) }) }));
+    var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.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: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest)) })) })));
 }
 export default NumberInput;

package/NumberInput/useInteractions.js

@@ -1,11 +1,11 @@
 import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
-    const { value, integerOnly, minValue = Number.MIN_SAFE_INTEGER, maxValue = Number.MAX_SAFE_INTEGER, onChange } = props;
-    const [tooltipOpen, setTooltipOpen] = useState(false);
-    const exceedError = useMemo(() => !!value && (Number(value) < minValue || Number(value) > maxValue), [value, minValue, maxValue]);
-    const handleChange = useCallback((event) => {
+    var value = props.value, integerOnly = props.integerOnly, _a = props.minValue, minValue = _a === void 0 ? Number.MIN_SAFE_INTEGER : _a, _b = props.maxValue, maxValue = _b === void 0 ? Number.MAX_SAFE_INTEGER : _b, onChange = props.onChange;
+    var _c = useState(false), tooltipOpen = _c[0], setTooltipOpen = _c[1];
+    var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, [value, minValue, maxValue]);
+    var handleChange = useCallback(function (event) {
         event.preventDefault();
-        const val = event.currentTarget.value;
+        var val = event.currentTarget.value;
         if (val !== "" && minValue >= 0 && val.includes("-"))
             return;
         if (integerOnly) {
@@ -16,8 +16,8 @@ function useInteractions(props) {
             return;
         onChange(val);
     }, [onChange, minValue, integerOnly]);
-    const handleBlur = useCallback(() => {
-        const excludedValue = [
+    var handleBlur = useCallback(function () {
+        var excludedValue = [
             null,
             undefined,
             ".",
@@ -27,9 +27,9 @@ function useInteractions(props) {
             "null",
             "undefined"
         ];
-        const strVal = String(value).trim();
+        var strVal = String(value).trim();
         if (strVal !== null && strVal.lastIndexOf(".") === strVal.length - 1) {
-            const newValue = strVal.substring(0, String(value).length - 1);
+            var newValue = strVal.substring(0, String(value).length - 1);
             onChange(newValue);
         }
         else if (excludedValue.includes(strVal)) {
@@ -39,19 +39,19 @@ function useInteractions(props) {
             onChange(Number(strVal).toString());
         }
     }, [value, onChange]);
-    const onOpenTooltip = useCallback(() => {
+    var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);
     }, []);
-    const onCloseTooltip = useCallback(() => {
+    var onCloseTooltip = useCallback(function () {
         setTooltipOpen(false);
     }, []);
     return {
-        exceedError,
-        tooltipOpen,
-        handleBlur,
-        handleChange,
-        onOpenTooltip,
-        onCloseTooltip
+        exceedError: exceedError,
+        tooltipOpen: tooltipOpen,
+        handleBlur: handleBlur,
+        handleChange: handleChange,
+        onOpenTooltip: onOpenTooltip,
+        onCloseTooltip: onCloseTooltip
     };
 }
 export default useInteractions;

package/PasswordInput/ConfirmPassword.js

@@ -1,20 +1,42 @@
+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 { useMemo } from "react";
 import TextField from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function ConfirmPassword(props) {
-    const { password, helperText = "Passwords do not match", value, label = "Confirm Password", name = "confirmPassword", variant = "outlined", margin = "dense", disabled, primaryColor, secondaryColor, onChange, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const isMatched = useMemo(() => {
-        if (value?.length > 0) {
+    var password = props.password, _a = props.helperText, helperText = _a === void 0 ? "Passwords do not match" : _a, value = props.value, _b = props.label, label = _b === void 0 ? "Confirm Password" : _b, _c = props.name, name = _c === void 0 ? "confirmPassword" : _c, _d = props.variant, variant = _d === void 0 ? "outlined" : _d, _e = props.margin, margin = _e === void 0 ? "dense" : _e, disabled = props.disabled, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["password", "helperText", "value", "label", "name", "variant", "margin", "disabled", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var isMatched = useMemo(function () {
+        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
             return password === value;
         }
         return true;
     }, [value, password]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: event => {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: function (event) {
                 event.preventDefault();
                 onChange(event.target.value);
-            }, fullWidth: true, required: true, ...rest }) }));
+            }, fullWidth: true, required: true }, rest)) })));
 }
 export default ConfirmPassword;

package/PasswordInput/Password.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, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import TextField from "@mui/material/TextField";
@@ -5,11 +27,11 @@ import Typography from "@mui/material/Typography";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 export function onValidatePassword(password) {
-    const reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
+    var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
     return reg.test(password);
 }
 function Password(props) {
-    const { strategies = {
+    var _a = props.strategies, strategies = _a === void 0 ? {
         uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
         lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },
         specialCharacter: {
@@ -18,17 +40,17 @@ function Password(props) {
         },
         number: { label: "1 Number", regex: /\d+/ },
         minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
-    }, successColor = "green", value, error, primaryColor, secondaryColor, onValidate, onChange, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const isValidPassword = useMemo(() => {
-        if (value?.length > 0) {
+    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onValidate = props.onValidate, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onValidate", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var isValidPassword = useMemo(function () {
+        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
             return onValidate ? onValidate(value) : onValidatePassword(value);
         }
         return true;
     }, [value, onValidate, onValidatePassword]);
-    const helperTextColor = useMemo(() => {
-        const textColors = Object.keys(strategies).reduce((temp, key) => {
-            const { regex } = strategies[key];
+    var helperTextColor = useMemo(function () {
+        var textColors = Object.keys(strategies).reduce(function (temp, key) {
+            var regex = strategies[key].regex;
             if (value === "") {
                 temp[key] = undefined;
             }
@@ -42,15 +64,15 @@ function Password(props) {
         }, {});
         return textColors;
     }, [value, strategies]);
-    const helperText = useMemo(() => {
-        return (_jsx(_Fragment, { children: Object.keys(strategies).map(key => {
-                const { label } = strategies[key];
-                return (_jsx(Typography, { component: "li", variant: "caption", style: { color: helperTextColor[key] }, children: label }, key));
+    var helperText = useMemo(function () {
+        return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
+                var label = strategies[key].label;
+                return (_jsx(Typography, __assign({ component: "li", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
             }) }));
     }, [helperTextColor, strategies]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: event => {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
                 event.preventDefault();
                 onChange(event.target.value);
-            }, fullWidth: true, required: true, ...rest }) }));
+            }, fullWidth: true, required: true }, rest)) })));
 }
 export default Password;

package/PhoneNumberInput/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 Typography from "@mui/material/Typography";
@@ -7,38 +29,38 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 export function onValidatePhone(str) {
-    const reg = /^\(\d{3}\)\s?\d{3}\s?-\s?\d{4}$/g;
+    var reg = /^\(\d{3}\)\s?\d{3}\s?-\s?\d{4}$/g;
     return reg.test(str);
 }
 export function phoneFormat(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 === 3) {
-            return `${prev}) ${curr}`;
+            return "".concat(prev, ") ").concat(curr);
         }
         else if (index === 6) {
-            return `${prev}-${curr}`;
+            return "".concat(prev, "-").concat(curr);
         }
         else {
-            return `${prev}${curr}`;
+            return "".concat(prev).concat(curr);
         }
-    }, `(`);
+    }, "(");
 }
 function PhoneInput(props) {
-    const { value, error, endAdornment, primaryColor, secondaryColor, helperText = "Please enter a valid phone number", onChange, onValidate, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const { valLength, addMask } = useInteractions({ value });
-    const rifm = useRifm({
+    var value = props.value, error = props.error, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid phone number" : _a, onChange = props.onChange, onValidate = props.onValidate, rest = __rest(props, ["value", "error", "endAdornment", "primaryColor", "secondaryColor", "helperText", "onChange", "onValidate"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _b = useInteractions({ value: value }), valLength = _b.valLength, addMask = _b.addMask;
+    var rifm = useRifm({
         mask: true,
         value: String(value),
-        onChange,
+        onChange: onChange,
         replace: addMask,
         format: phoneFormat
     });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { value: rifm.value, InputProps: {
-                startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Typography, { sx: { fontSize: 16, fontWeight: 500 }, children: "+1" }) })),
-                endAdornment
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, InputProps: {
+                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ sx: { fontSize: 16, fontWeight: 500 } }, { children: "+1" })) }))),
+                endAdornment: endAdornment
             }, onChange: rifm.onChange, helperText: valLength > 0 &&
                 (onValidate ? !onValidate(rifm.value) : !onValidatePhone(rifm.value))
                 ? helperText
@@ -46,6 +68,6 @@ function PhoneInput(props) {
                 (valLength > 0 &&
                     (onValidate
                         ? !onValidate(rifm.value)
-                        : !onValidatePhone(rifm.value))), ...rest }) }));
+                        : !onValidatePhone(rifm.value))) }, rest)) })));
 }
 export default PhoneInput;

package/PhoneNumberInput/useInteractions.js

@@ -1,17 +1,17 @@
 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, 3).padEnd(3, "_");
-        const prefixCode = digits.slice(3, 6).padEnd(3, "_");
-        const subscriber = digits.slice(6, 10).padEnd(4, "_");
-        return `(${areaCode}) ${prefixCode}-${subscriber}`;
+    var value = props.value;
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var areaCode = digits.slice(0, 3).padEnd(3, "_");
+        var prefixCode = digits.slice(3, 6).padEnd(3, "_");
+        var subscriber = digits.slice(6, 10).padEnd(4, "_");
+        return "(".concat(areaCode, ") ").concat(prefixCode, "-").concat(subscriber);
     }, []);
-    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;