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

package/Sidebar/SidebarItem.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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Chip from "@mui/material/Chip";
 import ListItemText from "@mui/material/ListItemText";
@@ -19,9 +8,9 @@ import { useTheme, alpha } from "@mui/material/styles";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 function SidebarItem(props) {
-    var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
-    var theme = useTheme();
-    return (_jsxs(ListItemButton, __assign({ onClick: onClick, disabled: lock, sx: {
+    const { icon, name, active, expand, lock, beta, isSub, hasChildren, betaTagColor = "#00A2A9", showIconOnly = false, onClick } = props;
+    const theme = useTheme();
+    return (_jsxs(ListItemButton, { onClick: onClick, disabled: lock, sx: {
             paddingLeft: isSub ? theme.spacing(4) : undefined,
             display: "flex",
             width: "100%",
@@ -33,12 +22,12 @@ function SidebarItem(props) {
             backgroundColor: active
                 ? alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
                 : undefined
-        } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
+        }, children: [_jsx(ListItemIcon, { sx: {
                     color: active ? theme.palette.primary.main : undefined,
                     borderRadius: active ? "5px" : undefined,
                     opacity: active ? "1" : undefined,
                     fontWeight: active ? 600 : undefined
-                } }, { children: icon })), !showIconOnly ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primaryTypographyProps: {
+                }, children: icon }), !showIconOnly ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primaryTypographyProps: {
                             color: active ? theme.palette.primary.main : "textPrimary",
                             sx: {
                                 overflow: "hidden",
@@ -55,6 +44,6 @@ function SidebarItem(props) {
                             height: theme.spacing(2.5),
                             fontSize: theme.spacing(1.25),
                             padding: theme.spacing(0, 0.75)
-                        } })) : (_jsx(_Fragment, {})), hasChildren ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {}))] })));
+                        } })) : (_jsx(_Fragment, {})), hasChildren ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {}))] }));
 }
 export default SidebarItem;

package/Sidebar/SidebarItemsGroup.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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, memo, useMemo, useEffect, useCallback } from "react";
 import { Match, useLocation } from "@reach/router";
@@ -18,20 +7,20 @@ import useTheme from "@mui/material/styles/useTheme";
 import SidebarItem from "./SidebarItem";
 import SidebarLink from "./SidebarLink";
 function SidebarItemsGroup(props) {
-    var item = props.item, showIconOnly = props.showIconOnly;
-    var id = item.id, name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
-    var pathname = useLocation().pathname;
-    var match = useMemo(function () {
+    const { item, showIconOnly } = props;
+    const { id, name, path, icon, children, lock, beta, titleForLock, betaTagColor } = item;
+    const { pathname } = useLocation();
+    const match = useMemo(() => {
         return pathname.includes(path);
     }, [path, pathname]);
-    var _a = useState(match), expand = _a[0], setExpand = _a[1];
-    var onToggleExpand = useCallback(function () {
-        setExpand(function (v) { return !v; });
+    const [expand, setExpand] = useState(match);
+    const onToggleExpand = useCallback(() => {
+        setExpand(v => !v);
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         setExpand(match);
     }, [match]);
-    var theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, showIconOnly: showIconOnly, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { id: c.id, name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, showIconOnly: showIconOnly, isSub: true })); } }), c.name)); }) })) })))] }));
+    const theme = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsx(List, { component: "div", disablePadding: true, children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, showIconOnly: showIconOnly, betaTagColor: betaTagColor, onClick: onToggleExpand }) }), children && (_jsx(Collapse, { in: expand, timeout: "auto", children: _jsx(List, { component: "div", disablePadding: true, children: children.map((c) => (_jsx(Match, { path: c.path, children: prop => (_jsx(SidebarLink, { id: c.id, name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, showIconOnly: showIconOnly, isSub: true })) }, c.name))) }) }))] }));
 }
 export default memo(SidebarItemsGroup);

package/Sidebar/SidebarLink.js

@@ -1,36 +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);
-};
-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 { Link, useLocation } from "@reach/router";
 import useTheme from "@mui/material/styles/useTheme";
 import SidebarItem from "./SidebarItem";
 function SidebarLink(props) {
-    var pathname = useLocation().pathname;
-    var id = props.id, name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, rest = __rest(props, ["id", "name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor"]);
-    var theme = useTheme();
-    return (_jsx(Link, __assign({ id: id, to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
+    const { pathname } = useLocation();
+    const { id, name, path, icon, lock, beta, active, titleForLock, betaTagColor, ...rest } = props;
+    const theme = useTheme();
+    return (_jsx(Link, { id: id, to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
             color: theme.palette.primary.main,
             textDecoration: "none"
-        } }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor }, rest), name) })));
+        }, children: _jsx(SidebarItem, { name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor, ...rest }, name) }));
 }
 export default SidebarLink;

package/Sidebar/index.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 } from "react/jsx-runtime";
 import { Match } from "@reach/router";
 import List from "@mui/material/List";
@@ -18,12 +7,12 @@ import SidebarItem from "./SidebarItem";
 import SidebarItemsGroup from "./SidebarItemsGroup";
 import SidebarLink from "./SidebarLink";
 function Sidebar(props) {
-    var items = props.items, showIconOnly = props.showIconOnly, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(List, { children: items.map(function (i) {
-                var id = i.id, children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor;
-                return children ? (_jsx(SidebarItemsGroup, { item: i, showIconOnly: showIconOnly }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, showIconOnly: showIconOnly, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
-            }) }) })));
+    const { items, showIconOnly, primaryColor, secondaryColor } = props;
+    const theme = useCustomTheme({ primaryColor, secondaryColor });
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(List, { children: items.map((i) => {
+                const { id, children, path, icon, name, lock, beta, titleForLock, betaTagColor } = i;
+                return children ? (_jsx(SidebarItemsGroup, { item: i, showIconOnly: showIconOnly }, name)) : (_jsx(Match, { path: path === "/" ? path : path.concat("/*"), children: prop => (_jsx(SidebarLink, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, showIconOnly: showIconOnly, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)) }, name));
+            }) }) }));
 }
 export default Sidebar;
 export { SidebarItem, SidebarItemsGroup };

package/SocialInput/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 ThemeProvider from "@mui/material/styles/ThemeProvider";
@@ -31,47 +9,47 @@ import TextField from "@mui/material/TextField";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 export function SocialInputFormat(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 === 5) {
-            return "".concat(prev, " - ").concat(curr);
+            return `${prev} - ${curr}`;
         }
         else {
-            return "".concat(prev).concat(curr);
+            return `${prev}${curr}`;
         }
-    }, "");
+    }, ``);
 }
 export function onValidateSocial(socialString) {
-    var reg = /^\d{3}\s?-\s?\d{2}\s?-\s?\d{4}$/g;
+    const reg = /^\d{3}\s?-\s?\d{2}\s?-\s?\d{4}$/g;
     return reg.test(socialString);
 }
 function SocialInput(props) {
-    var value = props.value, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid SSN" : _a, error = props.error, onChange = props.onChange, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "helperText", "error", "onChange", "onValidate", "primaryColor", "secondaryColor"]);
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var _b = useInteractions({
-        value: value
-    }), visible = _b.visible, valLength = _b.valLength, addMask = _b.addMask, onSwitching = _b.onSwitching;
-    var rifm = useRifm({
+    const { value, helperText = "Please enter a valid SSN", error, onChange, onValidate, primaryColor, secondaryColor, ...rest } = props;
+    const theme = useCustomTheme({ primaryColor, secondaryColor });
+    const { visible, valLength, addMask, onSwitching } = useInteractions({
+        value
+    });
+    const rifm = useRifm({
         mask: true,
         value: String(value),
-        onChange: onChange,
+        onChange,
         replace: addMask,
         format: SocialInputFormat
     });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ helperText: valLength > 0 &&
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { helperText: valLength > 0 &&
                 (onValidate ? !onValidate(value) : !onValidateSocial(value))
                 ? helperText
                 : "", value: rifm.value, onChange: rifm.onChange, type: visible ? "text" : "password", error: error ||
                 (valLength > 0 &&
                     (onValidate ? !onValidate(value) : !onValidateSocial(value))), InputProps: {
-                endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: valLength === 9 && (_jsx(IconButton, __assign({ "aria-label": "Toggle SSN visibility", onClick: onSwitching }, { children: visible ? _jsx(Visibility, {}) : _jsx(VisibilityOff, {}) }))) })))
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: valLength === 9 && (_jsx(IconButton, { "aria-label": "Toggle SSN visibility", onClick: onSwitching, children: visible ? _jsx(Visibility, {}) : _jsx(VisibilityOff, {}) })) }))
             }, InputLabelProps: {
                 shrink: true
-            } }, rest)) })));
+            }, ...rest }) }));
 }
 export default SocialInput;
 export * from "./types";

package/SocialInput/useInteractions.js

@@ -1,26 +1,26 @@
 import { useCallback, useMemo, useState, useEffect } from "react";
 function useInteractions(props) {
-    var value = props.value;
-    var _a = useState(false), visible = _a[0], setVisible = _a[1];
-    var valLength = useMemo(function () {
-        var digitsArr = String(value).match(/\d/g);
+    const { value } = props;
+    const [visible, setVisible] = useState(false);
+    const valLength = useMemo(() => {
+        const digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    var addMask = useCallback(function (str) {
-        var digits = (str.match(/\d+/g) || []).join("");
-        var headerCode = digits.slice(0, 3).padEnd(3, "_");
-        var middleCode = digits.slice(3, 5).padEnd(2, "_");
-        var tailCode = digits.slice(5, 9).padEnd(4, "_");
-        return "".concat(headerCode, " - ").concat(middleCode, " - ").concat(tailCode);
+    const addMask = useCallback((str) => {
+        const digits = (str.match(/\d+/g) || []).join("");
+        const headerCode = digits.slice(0, 3).padEnd(3, "_");
+        const middleCode = digits.slice(3, 5).padEnd(2, "_");
+        const tailCode = digits.slice(5, 9).padEnd(4, "_");
+        return `${headerCode} - ${middleCode} - ${tailCode}`;
     }, []);
-    var onSwitching = useCallback(function () {
-        setVisible(function (v) { return !v; });
+    const onSwitching = useCallback(() => {
+        setVisible(v => !v);
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         if (!visible && valLength !== 9) {
             setVisible(true);
         }
     }, [valLength, visible]);
-    return { visible: visible, valLength: valLength, addMask: addMask, onSwitching: onSwitching };
+    return { visible, valLength, addMask, onSwitching };
 }
 export default useInteractions;

package/TabGroup/index.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 } from "react/jsx-runtime";
 import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
 import Tab from "@mui/material/Tab";
@@ -16,28 +5,28 @@ import Tabs from "@mui/material/Tabs";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
-var TabGroup = forwardRef(function (props, ref) {
-    var tabs = props.tabs, _a = props.textColor, textColor = _a === void 0 ? "primary" : _a, _b = props.variant, variant = _b === void 0 ? "scrollable" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onTabChange = props.onTabChange, outerTabIndex = props.currentTabIndex;
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var mobileViewport = useMediaQuery(theme.breakpoints.down("md"));
-    var _c = useState(outerTabIndex || 0), currentTabIndex = _c[0], setCurrentTabIndex = _c[1];
-    var onClick = function (index) {
+const TabGroup = forwardRef((props, ref) => {
+    const { tabs, textColor = "primary", variant = "scrollable", primaryColor, secondaryColor, onTabChange, currentTabIndex: outerTabIndex } = props;
+    const theme = useCustomTheme({ primaryColor, secondaryColor });
+    const mobileViewport = useMediaQuery(theme.breakpoints.down("md"));
+    const [currentTabIndex, setCurrentTabIndex] = useState(outerTabIndex || 0);
+    const onClick = (index) => {
         setCurrentTabIndex(index);
     };
-    useImperativeHandle(ref, function () { return ({
+    useImperativeHandle(ref, () => ({
         tabIndex: currentTabIndex
-    }); });
-    useEffect(function () {
+    }));
+    useEffect(() => {
         if (outerTabIndex !== undefined && outerTabIndex !== currentTabIndex) {
             setCurrentTabIndex(outerTabIndex);
         }
     }, [outerTabIndex, currentTabIndex]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: function (_, val) {
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Tabs, { value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: (_, val) => {
                 onClick(val);
                 onTabChange(val);
-            } }, { children: tabs.map(function (tab, index) {
-                var text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
-                var active = currentTabIndex === index;
+            }, children: tabs.map((tab, index) => {
+                const { text, disabled = false } = tab;
+                const active = currentTabIndex === index;
                 return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: text, disabled: disabled, sx: {
                         cursor: disabled ? "not-allowed" : "pointer",
                         margin: theme.spacing(0.75, 0.25),
@@ -45,7 +34,7 @@ var TabGroup = forwardRef(function (props, ref) {
                         borderRadius: active ? theme.spacing(0.5) : undefined,
                         boxShadow: active ? "0px 4px 6px #acc1c2" : undefined
                     } }, index));
-            }) })) })));
+            }) }) }));
 });
 export default TabGroup;
 export * from "./types";

package/TablePagination/Actions.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 Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
@@ -19,9 +8,9 @@ import LastPageIcon from "@mui/icons-material/LastPage";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function TablePaginationActions(props) {
-    var count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, onPageChange = props.onPageChange;
-    var theme = useCustomTheme();
-    var _a = useInteractions({ count: count, page: page, rowsPerPage: rowsPerPage, onPageChange: onPageChange }), onBackButtonClick = _a.onBackButtonClick, onNextButtonClick = _a.onNextButtonClick, onLastPageButtonClick = _a.onLastPageButtonClick, onFirstPageButtonClick = _a.onFirstPageButtonClick;
-    return (_jsxs(Box, __assign({ sx: { flexShrink: 0, ml: 2.5 } }, { children: [_jsx(IconButton, __assign({ onClick: onFirstPageButtonClick, disabled: page === 0, "aria-label": "first page" }, { children: theme.direction === "rtl" ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) })), _jsx(IconButton, __assign({ onClick: onBackButtonClick, disabled: page === 0, "aria-label": "previous page" }, { children: theme.direction === "rtl" ? (_jsx(KeyboardArrowRight, {})) : (_jsx(KeyboardArrowLeft, {})) })), _jsx(IconButton, __assign({ onClick: onNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page" }, { children: theme.direction === "rtl" ? (_jsx(KeyboardArrowLeft, {})) : (_jsx(KeyboardArrowRight, {})) })), _jsx(IconButton, __assign({ onClick: onLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page" }, { children: theme.direction === "rtl" ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) }))] })));
+    const { count, page, rowsPerPage, onPageChange } = props;
+    const theme = useCustomTheme();
+    const { onBackButtonClick, onNextButtonClick, onLastPageButtonClick, onFirstPageButtonClick, } = useInteractions({ count, page, rowsPerPage, onPageChange });
+    return (_jsxs(Box, { sx: { flexShrink: 0, ml: 2.5 }, children: [_jsx(IconButton, { onClick: onFirstPageButtonClick, disabled: page === 0, "aria-label": "first page", children: theme.direction === "rtl" ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) }), _jsx(IconButton, { onClick: onBackButtonClick, disabled: page === 0, "aria-label": "previous page", children: theme.direction === "rtl" ? (_jsx(KeyboardArrowRight, {})) : (_jsx(KeyboardArrowLeft, {})) }), _jsx(IconButton, { onClick: onNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page", children: theme.direction === "rtl" ? (_jsx(KeyboardArrowLeft, {})) : (_jsx(KeyboardArrowRight, {})) }), _jsx(IconButton, { onClick: onLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page", children: theme.direction === "rtl" ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) })] }));
 }
 export default TablePaginationActions;

package/TablePagination/index.js

@@ -1,23 +1,12 @@
-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 } from "react/jsx-runtime";
 import TablePagination from "@mui/material/TablePagination";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import TablePaginationActions from "./Actions";
 import useCustomTheme from "../useCustomTheme";
 function Pagination(props) {
-    var colSpan = props.colSpan, count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, _a = props.rowsPerPageOptions, rowsPerPageOptions = _a === void 0 ? [10, 20, 30, 50] : _a, onPageChange = props.onPageChange, onRowsPerPageChange = props.onRowsPerPageChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: count ? (_jsx(TablePagination, { component: "div", colSpan: colSpan, count: count, rowsPerPage: rowsPerPage, page: page, SelectProps: { native: true }, rowsPerPageOptions: rowsPerPageOptions, onPageChange: onPageChange, onRowsPerPageChange: onRowsPerPageChange, ActionsComponent: TablePaginationActions })) : (_jsx(_Fragment, {})) })));
+    const { colSpan, count, page, rowsPerPage, rowsPerPageOptions = [10, 20, 30, 50], onPageChange, onRowsPerPageChange, primaryColor, secondaryColor } = props;
+    const theme = useCustomTheme({ primaryColor, secondaryColor });
+    return (_jsx(ThemeProvider, { theme: theme, children: count ? (_jsx(TablePagination, { component: "div", colSpan: colSpan, count: count, rowsPerPage: rowsPerPage, page: page, SelectProps: { native: true }, rowsPerPageOptions: rowsPerPageOptions, onPageChange: onPageChange, onRowsPerPageChange: onRowsPerPageChange, ActionsComponent: TablePaginationActions })) : (_jsx(_Fragment, {})) }));
 }
 export default Pagination;
 export * from "./types";

package/TablePagination/useInteractions.js

@@ -1,23 +1,23 @@
 import { useCallback } from "react";
 function useInteractions(props) {
-    var count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, onPageChange = props.onPageChange;
-    var onFirstPageButtonClick = useCallback(function (event) {
+    const { count, page, rowsPerPage, onPageChange } = props;
+    const onFirstPageButtonClick = useCallback((event) => {
         onPageChange(event, 0);
     }, [onPageChange]);
-    var onBackButtonClick = useCallback(function (event) {
+    const onBackButtonClick = useCallback((event) => {
         onPageChange(event, page - 1);
     }, [onPageChange, page]);
-    var onNextButtonClick = useCallback(function (event) {
+    const onNextButtonClick = useCallback((event) => {
         onPageChange(event, page + 1);
     }, [onPageChange, page]);
-    var onLastPageButtonClick = useCallback(function (event) {
+    const onLastPageButtonClick = useCallback((event) => {
         onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
     }, [count, onPageChange, rowsPerPage]);
     return {
-        onBackButtonClick: onBackButtonClick,
-        onNextButtonClick: onNextButtonClick,
-        onLastPageButtonClick: onLastPageButtonClick,
-        onFirstPageButtonClick: onFirstPageButtonClick,
+        onBackButtonClick,
+        onNextButtonClick,
+        onLastPageButtonClick,
+        onFirstPageButtonClick,
     };
 }
 export default useInteractions;

package/TextInput/index.js

@@ -1,46 +1,24 @@
-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";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
-var TextInput = function (props) {
-    var _a = props.type, type = _a === void 0 ? "text" : _a, onChange = props.onChange, value = props.value, _b = props.size, size = _b === void 0 ? "small" : _b, tooltip = props.tooltip, _c = props.maxLength, maxLength = _c === void 0 ? 999 : _c, _d = props.minLength, minLength = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBlur = props.onBlur, onFocus = props.onFocus, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength", "primaryColor", "secondaryColor", "onBlur", "onFocus"]);
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var _e = useInteractions(), tooltipOpen = _e.tooltipOpen, 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: type, value: value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onFocus: function (event) {
+const TextInput = (props) => {
+    const { type = "text", onChange, value, size = "small", tooltip, maxLength = 999, minLength = 0, primaryColor, secondaryColor, onBlur, onFocus, ...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: _jsx(Field, { size: size, margin: "dense", type: type, value: value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onFocus: event => {
                     if (onFocus) {
                         onFocus(event);
                     }
-                }, onBlur: function (event) {
+                }, onBlur: event => {
                     if (onBlur) {
                         onBlur(event);
                     }
-                }, onChange: function (event) {
+                }, onChange: event => {
                     event.preventDefault();
                     onChange(event.target.value);
-                }, inputProps: { maxLength: maxLength, minLength: minLength } }, rest)) })) })));
+                }, inputProps: { maxLength, minLength }, ...rest }) }) }));
 };
 export default TextInput;

package/TextInput/useInteractions.js

@@ -1,12 +1,12 @@
 import { useState, useCallback } from 'react';
 function useInteractions() {
-    var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
-    var onOpenTooltip = useCallback(function () {
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const onOpenTooltip = useCallback(() => {
         setTooltipOpen(true);
     }, []);
-    var onCloseTooltip = useCallback(function () {
+    const onCloseTooltip = useCallback(() => {
         setTooltipOpen(false);
     }, []);
-    return { tooltipOpen: tooltipOpen, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
+    return { tooltipOpen, onOpenTooltip, onCloseTooltip };
 }
 export default useInteractions;

package/ToastPrompt/Prompt.d.ts

@@ -0,0 +1,3 @@
+import type { PromptProps } from "./types";
+declare function Prompt(props: PromptProps): JSX.Element;
+export default Prompt;

package/ToastPrompt/Prompt.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Slide from "@mui/material/Slide";
+import Snackbar from "@mui/material/Snackbar";
+import Typography from "@mui/material/Typography";
+import SnackbarContent from "@mui/material/SnackbarContent";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import InfoIcon from "@mui/icons-material/Info";
+import ErrorIcon from "@mui/icons-material/Error";
+import WarningIcon from "@mui/icons-material/Warning";
+import SuccessIcon from "@mui/icons-material/CheckCircle";
+import { green, amber, red, blue } from "@mui/material/colors";
+import useCustomTheme from "../useCustomTheme";
+function Transition(args) {
+    return _jsx(Slide, { ...args, direction: "up" });
+}
+function Prompt(props) {
+    const { open, icon, variant, message, timeout, onClose } = props;
+    const theme = useCustomTheme();
+    const styles = useMemo(() => ({
+        success: {
+            backgroundColor: green[500]
+        },
+        error: {
+            backgroundColor: red[400]
+        },
+        info: {
+            backgroundColor: blue[600]
+        },
+        warning: {
+            backgroundColor: amber["A700"]
+        }
+    }), []);
+    const VariantIcon = useMemo(() => ({
+        success: SuccessIcon,
+        warning: WarningIcon,
+        error: ErrorIcon,
+        info: InfoIcon
+    }), []);
+    const Icon = useMemo(() => VariantIcon[variant], []);
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Snackbar, { anchorOrigin: { vertical: "bottom", horizontal: "left" }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: {
+                zIndex: 99999,
+                marginTop: "3vh"
+            }, children: _jsx(SnackbarContent, { sx: {
+                    ...styles[variant],
+                    root: {
+                        [theme.breakpoints.down("sm")]: {
+                            maxWidth: "320px",
+                            borderRadius: "4px"
+                        }
+                    }
+                }, "aria-describedby": "Toast", message: _jsxs(Typography, { id: "Toast", component: "span", sx: {
+                        fontSize: 14,
+                        fontWeight: 700,
+                        display: "flex",
+                        alignItems: "center"
+                    }, children: [!icon ? (_jsx(Icon, { sx: {
+                                fontSize: 20,
+                                opacity: 0.9,
+                                marginRight: theme.spacing(1)
+                            } })) : (_jsx(_Fragment, { children: icon })), message] }) }) }, `${Date.now() * Math.round(Math.random())}`) }));
+}
+export default Prompt;