@symply.io/basic-components 1.0.0-alpha.6 → 1.0.0-alpha.7

package/LoadingModal/index.js

@@ -16,13 +16,15 @@ import Dialog from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
 import Typography from "@mui/material/Typography";
 import CircularProgress from "@mui/material/CircularProgress";
-import withTheme from "../withTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 function LoadingModal(props) {
-    var open = props.open, _a = props.text, text = _a === void 0 ? "Loading..." : _a, _b = props.direction, direction = _b === void 0 ? "column" : _b, _c = props.showProgess, showProgess = _c === void 0 ? false : _c, _d = props.percent, percent = _d === void 0 ? 0 : _d;
-    return (_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));
+    var open = props.open, _a = props.text, text = _a === void 0 ? "Loading..." : _a, _b = props.direction, direction = _b === void 0 ? "column" : _b, _c = props.showProgess, showProgess = _c === void 0 ? false : _c, _d = props.percent, percent = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    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));
 }
-export default withTheme(LoadingModal);
+export default LoadingModal;
 export * from "./types";

package/LoadingModal/types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { GridProps } from "@mui/material/Grid";
 export interface LoadingModalProps {
     open: boolean;
@@ -5,4 +6,6 @@ export interface LoadingModalProps {
     direction?: GridProps["direction"];
     showProgess?: boolean;
     percent?: number;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }

package/MenuButtonGroup/MenuItem.d.ts

@@ -7,5 +7,5 @@ export interface ButtonItemProps {
     disabled?: boolean;
     onClick: MenuItemProps["onClick"];
 }
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+declare function ButtonMenuItem(props: ButtonItemProps): JSX.Element;
+export default ButtonMenuItem;

package/MenuButtonGroup/MenuItem.js

@@ -13,9 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MenuItem from "@mui/material/MenuItem";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
-import withTheme from "../withTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 function ButtonMenuItem(props) {
     var buttonText = props.buttonText, buttonIcon = props.buttonIcon, _a = props.disabled, disabled = _a === void 0 ? false : _a, onClick = props.onClick;
-    return (_jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }, void 0), _jsx(ListItemText, { primary: buttonText }, void 0)] }), void 0));
+    var theme = useCustomTheme();
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }, void 0), _jsx(ListItemText, { primary: buttonText }, void 0)] }), void 0) }), void 0));
 }
-export default withTheme(ButtonMenuItem);
+export default ButtonMenuItem;

package/MenuButtonGroup/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
 import { ButtonProps } from "@mui/material/Button";
 import { ButtonItemProps } from "./MenuItem";
 export interface MenuButtonGroupProps {
@@ -8,6 +8,8 @@ export interface MenuButtonGroupProps {
     variant?: ButtonProps["variant"];
     color?: ButtonProps["color"];
     buttons: Array<ButtonItemProps>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+declare function MenuButtonGroup(props: MenuButtonGroupProps): JSX.Element;
+export default MenuButtonGroup;

package/MenuButtonGroup/index.js

@@ -56,16 +56,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Menu from "@mui/material/Menu";
 import Button from "@mui/material/Button";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ButtonItem from "./MenuItem";
-import withTheme from "../withTheme";
+import useCustomTheme from "../useCustomTheme";
 function MenuButtonGroup(props) {
     var _this = this;
-    var buttonText = props.buttonText, buttons = props.buttons, size = props.size, _a = props.color, color = _a === void 0 ? "primary" : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? "outlined" : _c;
+    var buttonText = props.buttonText, buttons = props.buttons, size = props.size, _a = props.color, color = _a === void 0 ? "primary" : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? "outlined" : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _d = useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
     function onClick(event) {
         setAnchorEl(event.currentTarget);
@@ -73,7 +75,7 @@ function MenuButtonGroup(props) {
     var onClose = function () {
         setAnchorEl(null);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }, void 0), disabled: disabled }, { children: buttonText }), void 0), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }, void 0), disabled: disabled }, { children: buttonText }), void 0), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "center"
                 }, transformOrigin: {
@@ -96,6 +98,6 @@ function MenuButtonGroup(props) {
                                 }
                             });
                         }); } }), buttonText));
-                }) }), void 0)] }, void 0));
+                }) }), void 0)] }), void 0));
 }
-export default withTheme(MenuButtonGroup);
+export default MenuButtonGroup;

package/NumberInput/index.d.ts

@@ -1,4 +1,6 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+declare type TextProps = Omit<TextFieldProps, "onChange">;
 export interface NumberInputProps {
     onChange: (value: string) => void;
     value: string;
@@ -6,6 +8,8 @@ export interface NumberInputProps {
     tooltip?: string;
     maxValue?: number;
     minValue?: number;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+declare function NumberInput(props: NumberInputProps & TextProps): JSX.Element;
+export default NumberInput;

package/NumberInput/index.js

@@ -23,17 +23,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 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 withTheme from "../withTheme";
+import useCustomTheme from "../useCustomTheme";
 function NumberInput(props) {
-    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.integerOnly, integerOnly = _b === void 0 ? false : _b, _c = props.minValue, minValue = _c === void 0 ? Number.MIN_SAFE_INTEGER : _c, _d = props.maxValue, maxValue = _d === void 0 ? Number.MAX_SAFE_INTEGER : _d, error = props.error, helperText = props.helperText, rest = __rest(props, ["onChange", "value", "size", "tooltip", "integerOnly", "minValue", "maxValue", "error", "helperText"]);
+    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.integerOnly, integerOnly = _b === void 0 ? false : _b, _c = props.minValue, minValue = _c === void 0 ? Number.MIN_SAFE_INTEGER : _c, _d = props.maxValue, maxValue = _d === void 0 ? Number.MAX_SAFE_INTEGER : _d, error = props.error, helperText = props.helperText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "integerOnly", "minValue", "maxValue", "error", "helperText", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var EXCEED_ERROR = "Your value exceeds the exceptable input range";
     if (maxValue < minValue)
         throw new Error("Max should be bigger than min!");
     var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
-    return (_jsx(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: function () {
-                onCloseTooltip();
-                handleBlur();
-            }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest), void 0) }), void 0));
+    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: function () {
+                    onCloseTooltip();
+                    handleBlur();
+                }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest), void 0) }), void 0) }), void 0));
 }
-export default withTheme(NumberInput);
+export default NumberInput;

package/PasswordInput/ConfirmPassword.d.ts

@@ -1,8 +1,12 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+declare type TextInputProps = Omit<TextFieldProps, "onChange">;
 export interface ConfirmPasswordProps {
     password: string;
     value: string;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onChange: (value: string) => void;
 }
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+declare function ConfirmPassword(props: ConfirmPasswordProps & TextInputProps): JSX.Element;
+export default ConfirmPassword;

package/PasswordInput/ConfirmPassword.js

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

package/PasswordInput/Password.d.ts

@@ -1,4 +1,6 @@
 import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+declare type TextInputProps = Omit<TextFieldProps, "onChange">;
 export interface PasswordStrategyProps {
     [key: string]: {
         label: string;
@@ -9,8 +11,10 @@ export interface PasswordProps {
     strategies: PasswordStrategyProps;
     value: string;
     successColor?: CSSProperties["color"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onChange: (value: string) => void;
     onVerify?: (value: string) => boolean;
 }
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+declare function Password(props: PasswordProps & TextInputProps): JSX.Element;
+export default Password;

package/PasswordInput/Password.js

@@ -24,7 +24,8 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
-import withTheme from "../withTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 function Password(props) {
     var _a = props.strategies, strategies = _a === void 0 ? {
         uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
@@ -35,10 +36,11 @@ function Password(props) {
         },
         number: { label: "1 Number", regex: /\d+/ },
         minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
-    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, _c = props.onVerify, onVerify = _c === void 0 ? function (password) {
+    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _c = props.onVerify, onVerify = _c === void 0 ? function (password) {
         var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
         return reg.test(password);
-    } : _c, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "onVerify", "onChange"]);
+    } : _c, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onVerify", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isValidPassword = useMemo(function () {
         if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
             return onVerify(value);
@@ -64,11 +66,11 @@ function Password(props) {
     var helperText = useMemo(function () {
         return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
                 var label = strategies[key].label;
-                return (_jsx(Typography, __assign({ component: "p", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
+                return (_jsx(Typography, __assign({ component: "li", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
             }) }, void 0));
     }, [helperTextColor, strategies]);
-    return (_jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
-            onChange(event.target.value);
-        }, fullWidth: true, required: true }, rest), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
+                onChange(event.target.value);
+            }, fullWidth: true, required: true }, rest), void 0) }), void 0));
 }
-export default withTheme(Password);
+export default Password;

package/PhoneNumberInput/index.d.ts

@@ -1,10 +1,14 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
 import { InputProps } from "@mui/material/Input";
+import { TextFieldProps } from "@mui/material/TextField";
+declare type TextInputProps = Omit<TextFieldProps, "onChange">;
 export interface PhoneInputProps {
     value: string;
     endAdornment?: InputProps["endAdornment"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onChange: (val: string) => void;
 }
 export declare function phoneFormat(str: string): string;
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+declare function PhoneInput(props: TextInputProps & PhoneInputProps): JSX.Element;
+export default PhoneInput;

package/PhoneNumberInput/index.js

@@ -25,8 +25,9 @@ import { useRifm } from "rifm";
 import Typography from "@mui/material/Typography";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
-import withTheme from "../withTheme";
+import useCustomTheme from "../useCustomTheme";
 export function phoneFormat(str) {
     var digits = (str.match(/\d+/g) || []).join("");
     var chars = digits.split("");
@@ -43,7 +44,8 @@ export function phoneFormat(str) {
     }, "(");
 }
 function PhoneInput(props) {
-    var value = props.value, endAdornment = props.endAdornment, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "onChange"]);
+    var value = props.value, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var addMask = useInteractions({ value: value }).addMask;
     var rifm = useRifm({
         mask: true,
@@ -52,9 +54,9 @@ function PhoneInput(props) {
         replace: addMask,
         format: phoneFormat
     });
-    return (_jsx(TextField, __assign({ value: rifm.value, InputProps: {
-            startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" }), void 0) }), void 0)),
-            endAdornment: endAdornment
-        }, onChange: rifm.onChange }, rest), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, InputProps: {
+                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" }), void 0) }), void 0)),
+                endAdornment: endAdornment
+            }, onChange: rifm.onChange }, rest), void 0) }), void 0));
 }
-export default withTheme(PhoneInput);
+export default PhoneInput;

package/TabGroup/index.d.ts

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

package/TabGroup/index.js

@@ -15,12 +15,12 @@ import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import useTheme from "@mui/material/styles/useTheme";
-import withTheme from "../withTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 var TabGroup = forwardRef(function (props, ref) {
-    var theme = useTheme();
+    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, _c = props.currentTabIndex, outerTabIndex = _c === void 0 ? 0 : _c;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var mobileViewport = useMediaQuery(theme.breakpoints.down("md"));
-    var tabs = props.tabs, _a = props.textColor, textColor = _a === void 0 ? "primary" : _a, _b = props.variant, variant = _b === void 0 ? "scrollable" : _b, onTabChange = props.onTabChange, _c = props.currentTabIndex, outerTabIndex = _c === void 0 ? 0 : _c;
     var _d = useState(outerTabIndex), currentTabIndex = _d[0], setCurrentTabIndex = _d[1];
     var onClick = function (index) {
         setCurrentTabIndex(index);
@@ -28,20 +28,20 @@ var TabGroup = forwardRef(function (props, ref) {
     useImperativeHandle(ref, function () { return ({
         tabIndex: currentTabIndex
     }); });
-    return (_jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: function (_, 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;
-            return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: _jsx(Typography, __assign({ variant: "body2" }, { children: text }), void 0), disabled: disabled, sx: {
-                    cursor: disabled ? "not-allowed" : "pointer",
-                    margin: theme.spacing(0.75, 0.25),
-                    background: active ? "#fff" : undefined,
-                    borderRadius: active ? theme.spacing(0.5) : undefined,
-                    boxShadow: active ? "0px 4px 6px #acc1c2" : undefined
-                } }, index));
-        }) }), void 0));
+    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(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: _jsx(Typography, __assign({ variant: "body2" }, { children: text }), void 0), disabled: disabled, sx: {
+                        cursor: disabled ? "not-allowed" : "pointer",
+                        margin: theme.spacing(0.75, 0.25),
+                        background: active ? "#fff" : undefined,
+                        borderRadius: active ? theme.spacing(0.5) : undefined,
+                        boxShadow: active ? "0px 4px 6px #acc1c2" : undefined
+                    } }, index));
+            }) }), void 0) }), void 0));
 });
-export default withTheme(TabGroup);
+export default TabGroup;
 export * from "./types";

package/TabGroup/types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { TabsProps } from "@mui/material/Tabs";
 export interface TabGroupProps {
     textColor?: TabsProps["textColor"];
@@ -7,5 +8,7 @@ export interface TabGroupProps {
     }>;
     variant?: TabsProps["variant"];
     currentTabIndex?: number;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onTabChange: (index: number) => void;
 }

package/TextInput/index.d.ts

@@ -1,11 +1,14 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
+declare type TextProps = Omit<TextFieldProps, "onChange">;
 export interface TextInputProps {
     onChange: (value: string) => void;
     value: string;
     tooltip?: TextFieldProps;
     maxLength?: number;
     minLength?: number;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+declare const TextInput: (props: TextInputProps & TextProps) => JSX.Element;
+export default TextInput;

package/TextInput/index.js

@@ -23,14 +23,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 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 withTheme from "../withTheme";
+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, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength"]);
+    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, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _e = useInteractions(), tooltipOpen = _e.tooltipOpen, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
-    return (_jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: type, value: value, onFocus: onOpenTooltip, onBlur: onCloseTooltip, onChange: function (event) {
-                event.preventDefault();
-                onChange(event.target.value);
-            }, inputProps: { maxLength: maxLength, minLength: minLength } }, rest), void 0) }), void 0));
+    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: type, value: value, onFocus: onOpenTooltip, onBlur: onCloseTooltip, onChange: function (event) {
+                    event.preventDefault();
+                    onChange(event.target.value);
+                }, inputProps: { maxLength: maxLength, minLength: minLength } }, rest), void 0) }), void 0) }), void 0));
 };
-export default withTheme(TextInput);
+export default TextInput;

package/ToastPrompt/Presentation.d.ts

@@ -1,3 +1,16 @@
-/// <reference types="react" />
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+import { ElementType } from "react";
+import { SlideProps } from "@mui/material/Slide";
+import { SnackbarOrigin } from "@mui/material/Snackbar";
+interface ToastPromptProps {
+    open?: boolean;
+    vertical?: SnackbarOrigin["vertical"];
+    horizontal?: SnackbarOrigin["horizontal"];
+    timeout?: number;
+    onClose?: () => void;
+    transitionDirection?: SlideProps["direction"];
+    message?: string;
+    icon?: ElementType;
+    variant?: "success" | "warning" | "info" | "error";
+}
+declare const ToastPrompt: (props: ToastPromptProps) => JSX.Element;
+export default ToastPrompt;

package/ToastPrompt/Presentation.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Typography from "@mui/material/Typography";
-import useTheme from "@mui/material/styles/useTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import Slide from "@mui/material/Slide";
 import SnackbarContent from "@mui/material/SnackbarContent";
 import Snackbar from "@mui/material/Snackbar";
@@ -31,11 +31,11 @@ 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 withTheme from "../withTheme";
+import useCustomTheme from "../useCustomTheme";
 var ToastPrompt = function (props) {
     var _a;
     var _b = props.open, open = _b === void 0 ? false : _b, _c = props.vertical, vertical = _c === void 0 ? "top" : _c, _d = props.horizontal, horizontal = _d === void 0 ? "center" : _d, _e = props.timeout, timeout = _e === void 0 ? 3000 : _e, onClose = props.onClose, _f = props.transitionDirection, transitionDirection = _f === void 0 ? "down" : _f, _g = props.message, message = _g === void 0 ? "Unknown message" : _g, _h = props.icon, icon = _h === void 0 ? _jsx(_Fragment, {}, void 0) : _h, _j = props.variant, variant = _j === void 0 ? "info" : _j, other = __rest(props, ["open", "vertical", "horizontal", "timeout", "onClose", "transitionDirection", "message", "icon", "variant"]);
-    var theme = useTheme();
+    var theme = useCustomTheme();
     var styles = {
         success: {
             backgroundColor: green[600]
@@ -60,22 +60,22 @@ var ToastPrompt = function (props) {
         info: InfoIcon
     };
     var Icon = VariantIcon[variant];
-    return (_jsx(Snackbar, __assign({ anchorOrigin: { vertical: vertical, horizontal: horizontal }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: {
-            zIndex: 99999,
-            marginTop: "3vh"
-        } }, { children: _jsx(SnackbarContent, __assign({ sx: __assign(__assign({}, styles[variant]), { root: (_a = {},
-                    _a[theme.breakpoints.down("sm")] = {
-                        maxWidth: "320px",
-                        borderRadius: "4px"
-                    },
-                    _a) }), "aria-describedby": "Toast", message: _jsxs(Typography, __assign({ id: "Toast", component: "span", sx: {
-                    fontSize: 14,
-                    display: "flex",
-                    alignItems: "center"
-                } }, { children: [variant ? (_jsx(Icon, { sx: {
-                            fontSize: 20,
-                            opacity: 0.9,
-                            marginRight: theme.spacing(1)
-                        } }, void 0)) : (_jsx(_Fragment, { children: icon }, void 0)), message] }), void 0) }, other), void 0) }), "".concat(Date.now() * Math.round(Math.random()))));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Snackbar, __assign({ anchorOrigin: { vertical: vertical, horizontal: horizontal }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: {
+                zIndex: 99999,
+                marginTop: "3vh"
+            } }, { children: _jsx(SnackbarContent, __assign({ sx: __assign(__assign({}, styles[variant]), { root: (_a = {},
+                        _a[theme.breakpoints.down("sm")] = {
+                            maxWidth: "320px",
+                            borderRadius: "4px"
+                        },
+                        _a) }), "aria-describedby": "Toast", message: _jsxs(Typography, __assign({ id: "Toast", component: "span", sx: {
+                        fontSize: 14,
+                        display: "flex",
+                        alignItems: "center"
+                    } }, { children: [variant ? (_jsx(Icon, { sx: {
+                                fontSize: 20,
+                                opacity: 0.9,
+                                marginRight: theme.spacing(1)
+                            } }, void 0)) : (_jsx(_Fragment, { children: icon }, void 0)), message] }), void 0) }, other), void 0) }), "".concat(Date.now() * Math.round(Math.random()))) }), void 0));
 };
-export default withTheme(ToastPrompt);
+export default ToastPrompt;

package/VideoPlayerModal/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+import { ReactPlayerProps } from "react-player";
+import { VideoPlayerModalProps } from "./types";
+declare function VideoPlayerModal(props: VideoPlayerModalProps & ReactPlayerProps): JSX.Element;
+export default VideoPlayerModal;
 export * from "./types";

package/VideoPlayerModal/index.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactPlayer from "react-player";
 import Grid from "@mui/material/Grid";
 import Dialog from "@mui/material/Dialog";
@@ -28,16 +28,16 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import Button from "@mui/material/Button";
-import useTheme from "@mui/material/styles/useTheme";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import withTheme from '../withTheme';
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 function VideoPlayerModal(props) {
-    var url = props.url, _a = props.pip, pip = _a === void 0 ? false : _a, _b = props.open, open = _b === void 0 ? false : _b, title = props.title, onClose = props.onClose, _c = props.extraButtons, extraButtons = _c === void 0 ? [] : _c, playerProps = __rest(props, ["url", "pip", "open", "title", "onClose", "extraButtons"]);
-    var theme = useTheme();
+    var url = props.url, _a = props.pip, pip = _a === void 0 ? false : _a, _b = props.open, open = _b === void 0 ? false : _b, title = props.title, onClose = props.onClose, _c = props.extraButtons, extraButtons = _c === void 0 ? [] : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, playerProps = __rest(props, ["url", "pip", "open", "title", "onClose", "extraButtons", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme();
     var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsx(_Fragment, { children: _jsxs(Dialog, __assign({ open: open, fullScreen: fullScreen, onClose: onClose, fullWidth: true, maxWidth: "lg", "aria-labelledby": "react-video-dialog" }, { children: [title && _jsx(DialogTitle, { children: title }, void 0), _jsx(DialogContent, { children: _jsx(ReactPlayer, __assign({ controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
-                            file: { attributes: { disablePictureInPicture: !pip } },
-                        } }, playerProps), void 0) }, void 0), _jsxs(DialogActions, { children: [extraButtons.map(function (buttonProps, index) { return (_jsx(Grid, __assign({ item: true, xs: 12, md: 3, lg: 2 }, { children: _jsx(Button, __assign({}, buttonProps), void 0) }), "extraButton_".concat(index))); }), _jsx(Button, __assign({ variant: "outlined", color: "secondary", onClick: onClose }, { children: "Close" }), void 0)] }, void 0)] }), void 0) }, void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Dialog, __assign({ open: open, fullScreen: fullScreen, onClose: onClose, fullWidth: true, maxWidth: "lg", "aria-labelledby": "react-video-dialog" }, { children: [title && _jsx(DialogTitle, { children: title }, void 0), _jsx(DialogContent, { children: _jsx(ReactPlayer, __assign({ controls: true, url: url, style: { minHeight: "480px" }, width: "100%", config: {
+                            file: { attributes: { disablePictureInPicture: !pip } }
+                        } }, playerProps), void 0) }, void 0), _jsxs(DialogActions, { children: [extraButtons.map(function (buttonProps, index) { return (_jsx(Grid, __assign({ item: true, xs: 12, md: 3, lg: 2 }, { children: _jsx(Button, __assign({}, buttonProps), void 0) }), "extraButton_".concat(index))); }), _jsx(Button, __assign({ variant: "outlined", color: "secondary", onClick: onClose }, { children: "Close" }), void 0)] }, void 0)] }), void 0) }), void 0));
 }
-export default withTheme(VideoPlayerModal);
+export default VideoPlayerModal;
 export * from "./types";