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

package/DateInput/MonthDayInput/index.js

@@ -0,0 +1,54 @@
+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 { useRifm } from "rifm";
+import TextField from "@mui/material/TextField";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../../useCustomTheme";
+export function MonthDayFormat(str) {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
+        if (index === 2) {
+            return "".concat(prev, " / ").concat(curr);
+        }
+        else {
+            return "".concat(prev).concat(curr);
+        }
+    }, "");
+}
+export function verifyMonthDayDate(monthDayString) {
+    var reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1})|([1-2]{1}\d{1})))$/g;
+    return reg.test(monthDayString);
+}
+function MonthDayInput(props) {
+    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, verifyFn = props.verifyFn, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var rifm = useRifm({
+        mask: true,
+        value: String(value),
+        onChange: onChange,
+        replace: addMask,
+        format: MonthDayFormat
+    });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, { placeholder: "MM / DD", error: error ||
+                (valLength > 0 &&
+                    (verifyFn ? !verifyFn(value) : !verifyMonthDayDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (verifyFn ? !verifyFn(value) : !verifyMonthDayDate(value))
+                ? helperText
+                : "", onFocus: onFocus, onBlur: onBlur, InputLabelProps: {
+                shrink: true
+            } }) })));
+}
+export default MonthDayInput;

package/DateInput/MonthDayInput/types.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+export interface DateInputprops {
+    name: string;
+    onChange: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    verifyFn?: (value?: string) => boolean;
+    helperText?: string;
+    margin?: "none" | "normal" | "dense" | undefined;
+    error?: boolean;
+    value: string;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/DateInput/MonthDayInput/types.js

@@ -0,0 +1 @@
+export {};

package/DateInput/MonthDayInput/useInteractions.d.ts

@@ -0,0 +1,8 @@
+interface InteractionProps {
+    value: string;
+}
+declare function useInteractions(props: InteractionProps): {
+    valLength: number;
+    addMask: (str: string) => string;
+};
+export default useInteractions;

package/DateInput/MonthDayInput/useInteractions.js

@@ -0,0 +1,19 @@
+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 month = digits.slice(0, 2).padEnd(2, "_");
+        var day = digits.slice(2, 4).padEnd(2, "_");
+        if (digits) {
+            return "".concat(month, " / ").concat(day);
+        }
+        return "";
+    }, []);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
+        return digitsArr ? digitsArr.length : 0;
+    }, [value]);
+    return { valLength: valLength, addMask: addMask };
+}
+export default useInteractions;

package/DateInput/MonthYearInput/index.d.ts

@@ -0,0 +1,5 @@
+import { DateInputprops } from "./types";
+export declare function MonthYearFormat(str: string): string;
+export declare function verifyMonthYearDate(monthYearString: string): boolean;
+declare function MonthYearInput(props: DateInputprops): JSX.Element;
+export default MonthYearInput;

package/DateInput/MonthYearInput/index.js

@@ -0,0 +1,55 @@
+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 { useRifm } from "rifm";
+import TextField from "@mui/material/TextField";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../../useCustomTheme";
+export function MonthYearFormat(str) {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
+        if (index === 2) {
+            return "".concat(prev, " / ").concat(curr);
+        }
+        else {
+            return "".concat(prev).concat(curr);
+        }
+    }, "");
+}
+export function verifyMonthYearDate(monthYearString) {
+    var reg = /^(((0[1-9]{1})|(1[0-2]{1}))\s?\/\s?([1-2]{1}\d{3}))$/g;
+    reg.lastIndex = 0;
+    return reg.test(monthYearString);
+}
+function MonthYearInput(props) {
+    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, verifyFn = props.verifyFn, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var rifm = useRifm({
+        mask: true,
+        value: String(value),
+        onChange: onChange,
+        replace: addMask,
+        format: MonthYearFormat
+    });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, { placeholder: "MM / YYYY", error: error ||
+                (valLength > 0 &&
+                    (verifyFn ? !verifyFn(value) : !verifyMonthYearDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (verifyFn ? !verifyFn(value) : !verifyMonthYearDate(value))
+                ? helperText
+                : "", onFocus: onFocus, onBlur: onBlur, InputLabelProps: {
+                shrink: true
+            } }) })));
+}
+export default MonthYearInput;

package/DateInput/MonthYearInput/types.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+export interface DateInputprops {
+    name: string;
+    onChange: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    verifyFn?: (value?: string) => boolean;
+    helperText?: string;
+    margin?: "none" | "normal" | "dense" | undefined;
+    error?: boolean;
+    value: string;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/DateInput/MonthYearInput/types.js

@@ -0,0 +1 @@
+export {};

package/DateInput/MonthYearInput/useInteractions.d.ts

@@ -0,0 +1,8 @@
+interface InteractionProps {
+    value: string;
+}
+declare function useInteractions(props: InteractionProps): {
+    valLength: number;
+    addMask: (str: string) => string;
+};
+export default useInteractions;

package/DateInput/MonthYearInput/useInteractions.js

@@ -0,0 +1,19 @@
+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 month = digits.slice(0, 2).padEnd(2, "_");
+        var Year = digits.slice(2, 6).padEnd(4, "_");
+        if (digits) {
+            return "".concat(month, " / ").concat(Year);
+        }
+        return "";
+    }, []);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
+        return digitsArr ? digitsArr.length : 0;
+    }, [value]);
+    return { valLength: valLength, addMask: addMask };
+}
+export default useInteractions;

package/DateInput/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./MonthDayInput";
+export * from "./MonthYearInput";
+export * from "./FullDateInput";
+export { default as MonthDayInput } from "./MonthDayInput";
+export { default as MonthYearInput } from "./MonthYearInput";
+export { default as FullDateInput } from "./FullDateInput";

package/DateInput/index.js

@@ -0,0 +1,6 @@
+export * from "./MonthDayInput";
+export * from "./MonthYearInput";
+export * from "./FullDateInput";
+export { default as MonthDayInput } from "./MonthDayInput";
+export { default as MonthYearInput } from "./MonthYearInput";
+export { default as FullDateInput } from "./FullDateInput";

package/DigitInput/index.d.ts

@@ -1,7 +1,4 @@
-/// <reference types="react" />
-import { TextFieldProps } from "@mui/material/TextField";
 import { DigitInputProps } from "./types";
-declare type TextProps = Omit<TextFieldProps, "onChange">;
-declare function DigitInput(props: DigitInputProps & TextProps): JSX.Element;
+declare function DigitInput(props: DigitInputProps): JSX.Element;
 export default DigitInput;
 export * from "./types";

package/DigitInput/index.js

@@ -27,12 +27,12 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function DigitInput(props) {
-    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, error = props.error, helperText = props.helperText, _b = props.maxLength, maxLength = _b === void 0 ? 999 : _b, _c = props.minLength, minLength = _c === void 0 ? 0 : _c, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "error", "helperText", "maxLength", "minLength", "endAdornment", "primaryColor", "secondaryColor"]);
+    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.maxLength, maxLength = _b === void 0 ? 999 : _b, _c = props.minLength, minLength = _c === void 0 ? 0 : _c, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "maxLength", "minLength", "endAdornment", "primaryColor", "secondaryColor"]);
     var _d = useInteractions({ onChange: onChange }), tooltipOpen = _d.tooltipOpen, handleChange = _d.handleChange, onOpenTooltip = _d.onOpenTooltip, onCloseTooltip = _d.onCloseTooltip;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ 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, onFocus: onOpenTooltip, onBlur: onCloseTooltip, inputProps: { maxLength: maxLength, minLength: minLength }, InputProps: {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "text", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: onCloseTooltip, inputProps: { maxLength: maxLength, minLength: minLength }, InputProps: {
                     endAdornment: endAdornment
-                }, onChange: handleChange }, rest), void 0) }), void 0) }), void 0));
+                }, onChange: handleChange }, rest)) })) })));
 }
 export default DigitInput;
 export * from "./types";

package/DigitInput/types.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties } from "react";
 import { InputProps } from "@mui/material/Input";
-export interface DigitInputProps {
+import { TextFieldProps } from "@mui/material/TextField";
+export interface DigitInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     value: string;
     tooltip?: string;

package/DynamicHeaderBar/HeaderBar.js

@@ -27,6 +27,6 @@ function HeaderBar(props) {
     var hasButtons = useMemo(function () { return buttons.length > 0; }, [buttons.length]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ sx: { mb: 1 } }, { children: [_jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12 }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [showBackButton && (_jsx(IconButton, __assign({ onClick: function () {
                                             onBack ? onBack() : window.history.back();
-                                        } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }, void 0) }), void 0)), _jsx(Typography, __assign({ align: "left", variant: isLessThanSm ? "h6" : "h3", sx: { fontWeight: 600 } }, { children: title }), void 0)] }), void 0) }), void 0), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons }, void 0) }), void 0)) : (_jsx(_Fragment, {}, void 0))] }), void 0), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color }, void 0) }), void 0) }), void 0), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle }, void 0)) : (cloneElement(subtitle)) }), void 0) }), void 0)), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) }), void 0) }), void 0))] }), void 0) }), void 0));
+                                        } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }) }))), _jsx(Typography, __assign({ align: "left", variant: isLessThanSm ? "h6" : "h3", sx: { fontWeight: 600 } }, { children: title }))] })) })), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons }) }))) : (_jsx(_Fragment, {}))] })), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color }) })) })), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle })) : (cloneElement(subtitle)) })) }))), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) })) })))] })) })));
 }
 export default HeaderBar;

package/DynamicHeaderBar/HeaderButtons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { HeaderButtonProps } from "./types";
 export interface HeaderButtonsProps {
     buttons: Array<HeaderButtonProps>;

package/DynamicHeaderBar/HeaderButtons.js

@@ -26,19 +26,19 @@ function HeaderButtons(props) {
                 switch (button.type) {
                     case HeaderButtonCategory.TextButton: {
                         var _a = button.variant, variant = _a === void 0 ? "contained" : _a, text = button.text, onClick = button.onClick, color = button.color, size = button.size, startIcon = button.startIcon, endIcon = button.endIcon, disabled = button.disabled;
-                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text }), void 0) }), text));
+                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text })) }), text));
                     }
                     case HeaderButtonCategory.IconButton: {
                         var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon;
-                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size }, { children: icon }), void 0) }), title));
+                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size }, { children: icon })) }), title));
                     }
                     case HeaderButtonCategory.MenuButton: {
                         var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size;
-                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, buttonText: buttonText, disabled: disabled }, void 0) }), buttonText));
+                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, buttonText: buttonText, disabled: disabled }) }), buttonText));
                     }
                     default:
-                        return _jsx(_Fragment, {}, void 0);
+                        return _jsx(_Fragment, {});
                 }
-            }) }), void 0) }), void 0));
+            }) })) })));
 }
 export default HeaderButtons;

package/DynamicHeaderBar/HeaderLine.js

@@ -7,6 +7,6 @@ function HeaderLine(props) {
     return (_jsx(Divider, { sx: {
             height: "3px",
             backgroundColor: color || theme.palette.primary.main
-        } }, void 0));
+        } }));
 }
 export default HeaderLine;

package/DynamicHeaderBar/index.js

@@ -37,13 +37,13 @@ export function HeaderProvider(props) {
             setHeight(node.getBoundingClientRect().height);
         }
     }, [headerProps]);
-    return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps), void 0) }), void 0) }), void 0)) : (_jsx(_Fragment, {}, void 0)), cloneElement(children, {
+    return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps)) })) }))) : (_jsx(_Fragment, {})), cloneElement(children, {
                     sx: {
                         p: 3,
                         py: 1,
                         pt: height ? "calc(".concat(height, "px)") : undefined,
                     },
-                })] }, void 0) }), void 0));
+                })] }) })));
 }
 export function useHeaderBar() {
     return useContext(HeaderContext);

package/FeinInput/index.d.ts

@@ -0,0 +1,6 @@
+import { FeinInputProps } from "./types";
+export declare function FeinInputFormat(str: string): string;
+export declare function verifyFein(feinString: string): boolean;
+declare function FeinInput(props: FeinInputProps): JSX.Element;
+export default FeinInput;
+export * from "./types";

package/FeinInput/index.js

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

package/FeinInput/types.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export interface FeinInputProps extends Omit<TextFieldProps, "onChange"> {
+    onChange: (value: string) => void;
+    verifyFn?: (value?: string) => boolean;
+    value: string;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/FeinInput/types.js

@@ -0,0 +1 @@
+export {};

package/FeinInput/useInteractions.d.ts

@@ -0,0 +1,8 @@
+interface InteractionProps {
+    value: string;
+}
+declare function useInteractions(props: InteractionProps): {
+    valLength: number;
+    addMask: (str: string) => string;
+};
+export default useInteractions;

package/FeinInput/useInteractions.js

@@ -0,0 +1,16 @@
+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, 2).padEnd(2, "_");
+        var prefixCode = digits.slice(2, 9).padEnd(7, "_");
+        return "".concat(areaCode, " - ").concat(prefixCode);
+    }, []);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
+        return digitsArr ? digitsArr.length : 0;
+    }, [value]);
+    return { valLength: valLength, addMask: addMask };
+}
+export default useInteractions;

package/FormRadioGroup/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormRadioGroupProps } from "./types";
 declare function FormRadioGroup(props: FormRadioGroupProps): JSX.Element;
 export default FormRadioGroup;

package/FormRadioGroup/index.js

@@ -22,7 +22,7 @@ import useCustomTheme from "../useCustomTheme";
 function FormRadioGroup(props) {
     var formLabel = props.formLabel, color = props.color, value = props.value, options = props.options, disabled = props.disabled, tooltip = props.tooltip, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ sx: { mt: 3 }, component: "fieldset", disabled: disabled }, { children: [tooltip ? (_jsx(Tooltip, __assign({ title: tooltip, placement: "right", disableTouchListener: true }, { children: _jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }), void 0) }), void 0)) : (_jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }), void 0)), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ sx: { mt: 3 }, component: "fieldset", disabled: disabled }, { children: [tooltip ? (_jsx(Tooltip, __assign({ title: tooltip, placement: "right", disableTouchListener: true }, { children: _jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel })) }))) : (_jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }))), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
                         onChange(event.target.value);
                     }, sx: {
                         my: 1,
@@ -31,8 +31,8 @@ function FormRadioGroup(props) {
                         }
                     } }, { children: options.map(function (opt) {
                         var _a;
-                        return (_jsx(FormControlLabel, { value: opt.value, control: _jsx(Radio, { color: color || "primary" }, void 0), label: _jsx(Typography, { children: opt.label }, void 0), disabled: ((_a = opt.disabled) !== null && _a !== void 0 ? _a : false) || disabled }, String(opt.value)));
-                    }) }), void 0)] }), void 0) }), void 0));
+                        return (_jsx(FormControlLabel, { value: opt.value, control: _jsx(Radio, { color: color || "primary" }), label: _jsx(Typography, { children: opt.label }), disabled: ((_a = opt.disabled) !== null && _a !== void 0 ? _a : false) || disabled }, String(opt.value)));
+                    }) }))] })) })));
 }
 export default FormRadioGroup;
 export * from "./types";

package/FormSelector/MultipleSelector.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { FormControlProps } from "@mui/material/FormControl";
 import { MultipleSelectorProps } from "./types";
-declare function MultipleSelector(props: MultipleSelectorProps & FormControlProps): JSX.Element;
+declare function MultipleSelector(props: MultipleSelectorProps): JSX.Element;
 export default MultipleSelector;

package/FormSelector/MultipleSelector.js

@@ -34,7 +34,7 @@ function MultipleSelector(props) {
     var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, tooltip = props.tooltip, _b = props.required, required = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.multiple, multiple = _d === void 0 ? false : _d, _e = props.showHelperText, showHelperText = _e === void 0 ? false : _e, helperText = props.helperText, _f = props.options, options = _f === void 0 ? [] : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "tooltip", "required", "disabled", "multiple", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }), void 0)), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, onChange: function (event) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }))), _jsx(Select, __assign({ disabled: disabled, required: required, value: value, multiple: true, onChange: function (event) {
                             var _a;
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
@@ -43,6 +43,6 @@ function MultipleSelector(props) {
                         }, label: label, renderValue: multiple ? function (selected) { return selected.join("; "); } : undefined }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
                             var _a = option, label = _a.label, value = _a.value;
                             return (_jsx(MenuItem, __assign({ value: value }, { children: label }), value));
-                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }), void 0)) }), void 0), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }, void 0))] }), void 0) }), void 0) }), void 0));
+                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default MultipleSelector;

package/FormSelector/SimpleSelector.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { FormControlProps } from "@mui/material/FormControl";
 import { SimpleSelectorProps } from "./types";
-declare function SimpleSelector(props: SimpleSelectorProps & FormControlProps): JSX.Element;
+declare function SimpleSelector(props: SimpleSelectorProps): JSX.Element;
 export default SimpleSelector;

package/FormSelector/SimpleSelector.js

@@ -34,7 +34,7 @@ function SimpleSelector(props) {
     var label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, tooltip = props.tooltip, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.required, required = _c === void 0 ? false : _c, _d = props.showHelperText, showHelperText = _d === void 0 ? false : _d, helperText = props.helperText, _e = props.options, options = _e === void 0 ? [] : _e, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["label", "variant", "value", "tooltip", "disabled", "required", "showHelperText", "helperText", "options", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }), void 0)), _jsx(Select, __assign({ value: value, required: required, disabled: disabled, onChange: function (event) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, required: required }, rest, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }))), _jsx(Select, __assign({ value: value, required: required, disabled: disabled, onChange: function (event) {
                             var _a;
                             onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                         }, inputProps: {
@@ -43,6 +43,6 @@ function SimpleSelector(props) {
                         }, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
                             var label = option.label, value = option.value, disabled = option.disabled;
                             return (_jsx(MenuItem, __assign({ value: value, disabled: disabled }, { children: label }), value));
-                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }), void 0)) }), void 0), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }, void 0))] }), void 0) }), void 0) }), void 0));
+                        })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }))) })), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }))] })) })) })));
 }
 export default SimpleSelector;

package/FormSelector/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, CSSProperties } from "react";
 import { SelectProps } from "@mui/material/Select";
-interface SelectorBaseProps {
+import { FormControlProps } from "@mui/material/FormControl";
+interface SelectorBaseProps extends Omit<FormControlProps, "onChange"> {
     label?: string;
     tooltip?: ReactNode;
     showHelperText?: boolean;

package/HelpCaption/index.js

@@ -20,7 +20,7 @@ function HelpCaption(props) {
     var mainCaption = props.mainCaption, subCaption = props.subCaption, linkUrl = props.linkUrl, _a = props.linkText, linkText = _a === void 0 ? "Watch Demo" : _a, _b = props.linkType, linkType = _b === void 0 ? "WEBPAGE" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions(), videoModalOpen = _c.videoModalOpen, onOpenVideoModal = _c.onOpenVideoModal, onCloseVideoModal = _c.onCloseVideoModal;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption }), void 0) }), void 0), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption }), void 0), "\u00A0"] }, void 0)), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption })) })), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption })), "\u00A0"] })), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
                                 ? function () {
                                     window.open(linkUrl);
                                 }
@@ -30,6 +30,6 @@ function HelpCaption(props) {
                                     color: theme.palette.primary.dark,
                                     textDecoration: "underline"
                                 }
-                            } }, { children: _jsx("b", { children: linkText }, void 0) }), void 0))] }), void 0), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }, void 0))] }), void 0) }), void 0));
+                            } }, { children: _jsx("b", { children: linkText }) })))] })), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }))] })) })));
 }
 export default HelpCaption;

package/LoadingModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LoadingModalProps } from "./types";
 declare function LoadingModal(props: LoadingModalProps): JSX.Element;
 export default LoadingModal;

package/LoadingModal/index.js

@@ -24,7 +24,7 @@ function LoadingModal(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Dialog, __assign({ maxWidth: "xs", open: open, sx: { backgroundColor: "#7A7A7A97" }, PaperProps: { sx: { backgroundColor: "#F2F2F2CF" } }, onClose: function (_, reason) {
                 if (reason === "backdropClick")
                     return;
-            }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }, void 0), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] }), void 0) }), void 0))] }), void 0), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }), void 0)] }), void 0) }, void 0) }), void 0) }), void 0));
+            }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] })) })))] })), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }))] })) }) })) })));
 }
 export default LoadingModal;
 export * from "./types";

package/MenuButtonGroup/MenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuItemProps } from "@mui/material/MenuItem";
 import { ListItemIconProps } from "@mui/material/ListItemIcon";
 export interface ButtonItemProps {