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

package/SocialInput/index.js

@@ -1,3 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRifm } from "rifm";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
@@ -9,47 +31,46 @@ import TextField from "@mui/material/TextField";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 export function SocialInputFormat(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 === 5) {
-            return `${prev} - ${curr}`;
+            return "".concat(prev, " - ").concat(curr);
         }
         else {
-            return `${prev}${curr}`;
+            return "".concat(prev).concat(curr);
         }
-    }, ``);
+    }, "");
 }
 export function onValidateSocial(socialString) {
-    const reg = /^\d{3}\s?-\s?\d{2}\s?-\s?\d{4}$/g;
+    var reg = /^\d{3}\s?-\s?\d{2}\s?-\s?\d{4}$/g;
     return reg.test(socialString);
 }
 function SocialInput(props) {
-    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({
+    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({
         mask: true,
         value: String(value),
-        onChange,
+        onChange: onChange,
         replace: addMask,
         format: SocialInputFormat
     });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { helperText: valLength > 0 &&
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ 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, { position: "end", children: valLength === 9 && (_jsx(IconButton, { "aria-label": "Toggle SSN visibility", onClick: onSwitching, children: visible ? _jsx(Visibility, {}) : _jsx(VisibilityOff, {}) })) }))
+                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, {}) }))) })))
             }, 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) {
-    const { value } = props;
-    const [visible, setVisible] = useState(false);
-    const valLength = useMemo(() => {
-        const digitsArr = String(value).match(/\d/g);
+    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);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    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 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 onSwitching = useCallback(() => {
-        setVisible(v => !v);
+    var onSwitching = useCallback(function () {
+        setVisible(function (v) { return !v; });
     }, []);
-    useEffect(() => {
+    useEffect(function () {
         if (!visible && valLength !== 9) {
             setVisible(true);
         }
     }, [valLength, visible]);
-    return { visible, valLength, addMask, onSwitching };
+    return { visible: visible, valLength: valLength, addMask: addMask, onSwitching: onSwitching };
 }
 export default useInteractions;

package/TabGroup/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TabGroupProps } from "./types";
+import type { TabGroupProps } from "./types";
 declare const TabGroup: import("react").ForwardRefExoticComponent<TabGroupProps & import("react").RefAttributes<unknown>>;
 export default TabGroup;
-export * from "./types";
+export type { TabGroupProps };

package/TabGroup/index.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
 import Tab from "@mui/material/Tab";
@@ -5,28 +16,28 @@ import Tabs from "@mui/material/Tabs";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
-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) => {
+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) {
         setCurrentTabIndex(index);
     };
-    useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, function () { return ({
         tabIndex: currentTabIndex
-    }));
-    useEffect(() => {
+    }); });
+    useEffect(function () {
         if (outerTabIndex !== undefined && outerTabIndex !== currentTabIndex) {
             setCurrentTabIndex(outerTabIndex);
         }
     }, [outerTabIndex, currentTabIndex]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Tabs, { value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: (_, val) => {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: function (_, val) {
                 onClick(val);
                 onTabChange(val);
-            }, children: tabs.map((tab, index) => {
-                const { text, disabled = false } = tab;
-                const active = currentTabIndex === index;
+            } }, { children: tabs.map(function (tab, index) {
+                var text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
+                var 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),
@@ -34,7 +45,6 @@ const TabGroup = forwardRef((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,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
@@ -8,9 +19,9 @@ import LastPageIcon from "@mui/icons-material/LastPage";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function TablePaginationActions(props) {
-    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, {}) })] }));
+    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, {}) }))] })));
 }
 export default TablePaginationActions;

package/TablePagination/index.d.ts

@@ -1,4 +1,4 @@
-import { TablePaginationProps } from "./types";
+import type { TablePaginationProps } from "./types";
 declare function Pagination(props: TablePaginationProps): JSX.Element;
 export default Pagination;
-export * from "./types";
+export type { TablePaginationProps };

package/TablePagination/index.js

@@ -1,12 +1,22 @@
+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) {
-    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, {})) }));
+    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, {})) })));
 }
 export default Pagination;
-export * from "./types";

package/TablePagination/useInteractions.js

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

package/TextInput/index.d.ts

@@ -9,5 +9,5 @@ export interface TextInputProps extends Omit<TextFieldProps, "onChange"> {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }
-declare const TextInput: (props: TextInputProps) => JSX.Element;
+declare function TextInput(props: TextInputProps): JSX.Element;
 export default TextInput;

package/TextInput/index.js

@@ -1,24 +1,46 @@
+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";
-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 => {
+function TextInput(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) {
                     if (onFocus) {
                         onFocus(event);
                     }
-                }, onBlur: event => {
+                }, onBlur: function (event) {
                     if (onBlur) {
                         onBlur(event);
                     }
-                }, onChange: event => {
+                }, onChange: function (event) {
                     event.preventDefault();
                     onChange(event.target.value);
-                }, inputProps: { maxLength, minLength }, ...rest }) }) }));
-};
+                }, inputProps: { maxLength: maxLength, minLength: minLength } }, rest)) })) })));
+}
 export default TextInput;

package/TextInput/useInteractions.js

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

package/ToastPrompt/Prompt.d.ts

@@ -1,2 +1,4 @@
-import type { PromptProps } from "./types";
-export default function Prompt(props: PromptProps): JSX.Element;
+/// <reference types="react" />
+import { RefProps } from "./types";
+declare const Prompt: import("react").ForwardRefExoticComponent<import("react").RefAttributes<RefProps | null>>;
+export default Prompt;

package/ToastPrompt/Prompt.js

@@ -1,62 +1,30 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+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 { forwardRef, useImperativeHandle } from "react";
+import Alert from "@mui/material/Alert";
 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";
+import useInteractions from "./useInteractions";
 function Transition(args) {
-    return _jsx(Slide, { ...args, direction: "up" });
-}
-export default 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())}`) }));
+    return _jsx(Slide, __assign({}, args, { direction: "up" }));
 }
+var Prompt = forwardRef(function (_, ref) {
+    var theme = useCustomTheme();
+    var _a = useInteractions(), open = _a.open, type = _a.type, message = _a.message, timeout = _a.timeout, onShow = _a.onShow, onHide = _a.onHide;
+    useImperativeHandle(ref, function () { return ({ onShow: onShow }); });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Snackbar, __assign({ anchorOrigin: { vertical: "bottom", horizontal: "left" }, open: open, onClose: onHide, autoHideDuration: timeout, TransitionComponent: Transition, sx: { zIndex: 99999 } }, { children: _jsx(Alert, __assign({ variant: "filled", severity: type, sx: { width: "100%", fontSize: 14, fontWeight: 700 }, onClose: onHide }, { children: _jsx(Typography, __assign({ sx: { fontWeight: 800, fontSize: 14 } }, { children: message })) })) }), "".concat(Date.now() * Math.round(Math.random()))) })));
+});
+export default Prompt;

package/ToastPrompt/index.js

@@ -1,14 +1,28 @@
+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 { createContext, useContext } from "react";
-import { default as Prompt } from "./Prompt";
-import useInteractions from "./useInteractions";
-const PromptContext = createContext({
-    showPrompt: () => { }
+import { createContext, useContext, useRef, useCallback, cloneElement } from "react";
+import Prompt from "./Prompt";
+var PromptContext = createContext({
+    showPrompt: function () { }
 });
 export function PromptProvider(props) {
-    const { children } = props;
-    const { promptArgs, onShow, onHide } = useInteractions();
-    return (_jsxs(PromptContext.Provider, { value: { showPrompt: onShow }, children: [children, _jsx(Prompt, { ...promptArgs, onClose: onHide })] }));
+    var children = props.children;
+    var ref = useRef(null);
+    var showPrompt = useCallback(function (args) {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.onShow(args);
+    }, []);
+    return (_jsxs(PromptContext.Provider, __assign({ value: { showPrompt: showPrompt } }, { children: [children, cloneElement(_jsx(Prompt, { ref: ref }))] })));
 }
 export function usePrompt() {
     return useContext(PromptContext);

package/ToastPrompt/types.d.ts

@@ -1,35 +1,28 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { CSSProperties, ReactNode, SyntheticEvent } from "react";
 import type { SnackbarCloseReason } from "@mui/material/Snackbar";
 import type { SvgIconComponent } from "@mui/icons-material";
-export declare type Variant = "success" | "warning" | "info" | "error";
-export declare type PromptStyles = Record<Variant, {
+export declare type Severity = "success" | "warning" | "info" | "error";
+export declare type PromptStyles = Record<Severity, {
     backgroundColor: CSSProperties["color"];
 }>;
-export declare type PromptIcons = Record<Variant, SvgIconComponent>;
+export declare type PromptIcons = Record<Severity, SvgIconComponent>;
 declare type PromptArgs = {
     message: string | 400;
-    variant: Variant;
-    timeout: number;
+    type: Severity;
+    timeout?: number;
 };
 export interface InterfaceStates {
     promptArgs: PromptArgs & Record<"open", boolean>;
-    onHide: (_: any, reason: SnackbarCloseReason) => void;
+    onHide: (event: SyntheticEvent | Event, reason?: SnackbarCloseReason) => void;
     onShow: (args: PromptArgs) => void;
 }
-export interface PromptProps extends PromptArgs {
-    open: boolean;
-    icon?: SvgIconComponent;
-    onClose: InterfaceStates["onHide"];
-}
-export interface PromptStates {
-    styles: PromptStyles;
-    icons: PromptIcons;
-    icon: SvgIconComponent;
-}
 export interface PromptProviderProps {
     children: ReactNode;
 }
 export interface PromptContextProps {
     showPrompt: InterfaceStates["onShow"];
 }
+export interface RefProps {
+    onShow: InterfaceStates["onShow"];
+}
 export {};

package/ToastPrompt/useInteractions.d.ts

@@ -1,14 +1,14 @@
+/// <reference types="react" />
 declare function useInteractions(): {
-    promptArgs: {
-        message: string | 400;
-        variant: import("./types").Variant;
-        timeout: number;
-    } & Record<"open", boolean>;
     onShow: (args: {
         message: string | 400;
-        variant: import("./types").Variant;
-        timeout: number;
+        type: import("./types").Severity;
+        timeout?: number | undefined;
     }) => void;
-    onHide: (_: any, reason: import("@mui/material").SnackbarCloseReason) => void;
+    onHide: (event: Event | import("react").SyntheticEvent<Element, Event>, reason?: import("@mui/material").SnackbarCloseReason | undefined) => void;
+    message: string | 400;
+    type: import("./types").Severity;
+    timeout?: number | undefined;
+    open: boolean;
 };
 export default useInteractions;