@symply.io/basic-components 1.3.11-alpha.5 → 1.3.11-alpha.7

package/LoadingModal/useLoadingModal.js

@@ -1,35 +1,15 @@
-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";
-var LoadingModalContext = createContext({
-    onOpenLoadingModal: function () { return null; },
-    onCloseLoadingModal: function () { }
+const LoadingModalContext = createContext({
+    onOpenLoadingModal: () => null,
+    onCloseLoadingModal: () => { }
 });
 export function LoadingModalProvider(props) {
-    var children = props.children, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
-    var _a = useState([]), instances = _a[0], setInstances = _a[1];
-    var modalArgs = useMemo(function () {
+    const { children, primaryColor, secondaryColor } = props;
+    const [instances, setInstances] = useState([]);
+    const modalArgs = useMemo(() => {
         return instances.length > 0
             ? {
                 open: true,
@@ -37,20 +17,22 @@ export function LoadingModalProvider(props) {
             }
             : { open: false, text: "Loading..." };
     }, [instances]);
-    var onOpenLoadingModal = useCallback(function (loadingText) {
-        var instance = {
+    const onOpenLoadingModal = useCallback((loadingText) => {
+        const instance = {
             id: generateUUID(),
             text: loadingText || "Loading..."
         };
-        setInstances(function (insts) { return __spreadArray(__spreadArray([], insts, true), [instance], false); });
+        setInstances(insts => [...insts, instance]);
         return instance;
     }, []);
-    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); });
+    const onCloseLoadingModal = useCallback((instance) => {
+        if (instance?.id) {
+            setInstances(insts => [
+                ...insts.filter(inst => inst.id !== instance.id)
+            ]);
         }
     }, []);
-    return (_jsx(LoadingModalContext.Provider, __assign({ value: { onOpenLoadingModal: onOpenLoadingModal, onCloseLoadingModal: onCloseLoadingModal } }, { children: _jsxs(_Fragment, { children: [cloneElement(children), _jsx(LoadingModal, __assign({}, modalArgs, { primaryColor: primaryColor, secondaryColor: secondaryColor }))] }) })));
+    return (_jsx(LoadingModalContext.Provider, { value: { onOpenLoadingModal, onCloseLoadingModal }, children: _jsxs(_Fragment, { children: [cloneElement(children), _jsx(LoadingModal, { ...modalArgs, primaryColor: primaryColor, secondaryColor: secondaryColor })] }) }));
 }
 export function useLoadingModal() {
     return useContext(LoadingModalContext);

package/MenuButtonGroup/MenuItem.js

@@ -1,14 +1,3 @@
-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";
@@ -16,8 +5,8 @@ import ListItemText from "@mui/material/ListItemText";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function ButtonMenuItem(props) {
-    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 })] })) })));
+    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 })] }) }));
 }
 export default ButtonMenuItem;

package/MenuButtonGroup/index.js

@@ -1,61 +1,3 @@
-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";
@@ -65,39 +7,29 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ButtonItem from "./MenuItem";
 import useCustomTheme from "../useCustomTheme";
 function MenuButtonGroup(props) {
-    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];
+    const { buttonText, buttons, size, color = "primary", disabled = false, variant = "outlined", primaryColor, secondaryColor } = props;
+    const theme = useCustomTheme({ primaryColor, secondaryColor });
+    const [anchorEl, setAnchorEl] = useState(null);
     function onClick(event) {
         setAnchorEl(event.currentTarget);
     }
-    var onClose = function () {
+    const onClose = () => {
         setAnchorEl(null);
     };
-    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: {
+    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: {
                     vertical: "bottom",
                     horizontal: "center"
                 }, transformOrigin: {
                     vertical: "top",
                     horizontal: "center"
-                }, 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));
-                }) }))] })));
+                }, 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));
+                }) })] }));
 }
 export default MenuButtonGroup;

package/NumberInput/index.js

@@ -1,25 +1,3 @@
-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";
@@ -27,12 +5,12 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function NumberInput(props) {
-    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";
+    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";
     if (maxValue < minValue)
         throw new Error("Max should be bigger than the `miniValue`!");
-    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)) })) })));
+    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 }) }) }));
 }
 export default NumberInput;

package/NumberInput/useInteractions.js

@@ -1,11 +1,11 @@
 import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
-    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) {
+    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) => {
         event.preventDefault();
-        var val = event.currentTarget.value;
+        const 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]);
-    var handleBlur = useCallback(function () {
-        var excludedValue = [
+    const handleBlur = useCallback(() => {
+        const excludedValue = [
             null,
             undefined,
             ".",
@@ -27,9 +27,9 @@ function useInteractions(props) {
             "null",
             "undefined"
         ];
-        var strVal = String(value).trim();
+        const strVal = String(value).trim();
         if (strVal !== null && strVal.lastIndexOf(".") === strVal.length - 1) {
-            var newValue = strVal.substring(0, String(value).length - 1);
+            const 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]);
-    var onOpenTooltip = useCallback(function () {
+    const onOpenTooltip = useCallback(() => {
         setTooltipOpen(true);
     }, []);
-    var onCloseTooltip = useCallback(function () {
+    const onCloseTooltip = useCallback(() => {
         setTooltipOpen(false);
     }, []);
     return {
-        exceedError: exceedError,
-        tooltipOpen: tooltipOpen,
-        handleBlur: handleBlur,
-        handleChange: handleChange,
-        onOpenTooltip: onOpenTooltip,
-        onCloseTooltip: onCloseTooltip
+        exceedError,
+        tooltipOpen,
+        handleBlur,
+        handleChange,
+        onOpenTooltip,
+        onCloseTooltip
     };
 }
 export default useInteractions;

package/PasswordInput/ConfirmPassword.js

@@ -1,42 +1,20 @@
-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) {
-    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) {
+    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) {
             return password === value;
         }
         return true;
     }, [value, password]);
-    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) {
+    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 => {
                 event.preventDefault();
                 onChange(event.target.value);
-            }, fullWidth: true, required: true }, rest)) })));
+            }, fullWidth: true, required: true, ...rest }) }));
 }
 export default ConfirmPassword;

package/PasswordInput/Password.js

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

package/PhoneNumberInput/index.js

@@ -1,25 +1,3 @@
-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";
@@ -29,38 +7,38 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 export function onValidatePhone(str) {
-    var reg = /^\(\d{3}\)\s?\d{3}\s?-\s?\d{4}$/g;
+    const reg = /^\(\d{3}\)\s?\d{3}\s?-\s?\d{4}$/g;
     return reg.test(str);
 }
 export function phoneFormat(str) {
-    var digits = (str.match(/\d+/g) || []).join("");
-    var chars = digits.split("");
-    return chars.reduce(function (prev, curr, index) {
+    const digits = (str.match(/\d+/g) || []).join("");
+    const chars = digits.split("");
+    return chars.reduce((prev, curr, index) => {
         if (index === 3) {
-            return "".concat(prev, ") ").concat(curr);
+            return `${prev}) ${curr}`;
         }
         else if (index === 6) {
-            return "".concat(prev, "-").concat(curr);
+            return `${prev}-${curr}`;
         }
         else {
-            return "".concat(prev).concat(curr);
+            return `${prev}${curr}`;
         }
-    }, "(");
+    }, `(`);
 }
 function PhoneInput(props) {
-    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({
+    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({
         mask: true,
         value: String(value),
-        onChange: onChange,
+        onChange,
         replace: addMask,
         format: phoneFormat
     });
-    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
+    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
             }, onChange: rifm.onChange, helperText: valLength > 0 &&
                 (onValidate ? !onValidate(rifm.value) : !onValidatePhone(rifm.value))
                 ? helperText
@@ -68,6 +46,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) {
-    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 { 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 valLength = useMemo(function () {
-        var digitsArr = String(value).match(/\d/g);
+    const valLength = useMemo(() => {
+        const digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength: valLength, addMask: addMask };
+    return { valLength, addMask };
 }
 export default useInteractions;