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

package/AlertDialog/index.d.ts

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

package/AlertDialog/index.js

@@ -30,6 +30,7 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import Slide from "@mui/material/Slide";
+import withTheme from "../withTheme";
 var Transition = forwardRef(function Transition(props, ref) {
     return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
 });
@@ -43,5 +44,5 @@ var AlertDialog = function (props) {
             }
         }, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" }, rest, { children: [_jsx(DialogTitle, __assign({ id: "alert-dialog-title" }, { children: title }), void 0), _jsx(DialogContent, { children: children }, void 0), _jsx(DialogActions, { children: DialogButtons ? (cloneElement(DialogButtons)) : (_jsx(Button, __assign({ onClick: onClose, color: "primary" }, { children: "OK" }), void 0)) }, void 0)] }), void 0));
 };
-export default AlertDialog;
+export default withTheme(AlertDialog);
 export * from "./types";

package/BasicModal/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { BasicModalProps } from "./types";
-declare function BasicModal(props: BasicModalProps): JSX.Element;
-export default BasicModal;
+declare const _default: (props: any) => JSX.Element;
+export default _default;
 export * from "./types";

package/BasicModal/index.js

@@ -28,6 +28,7 @@ import Slide from "@mui/material/Slide";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 import Content from "./Content";
+import withTheme from "../withTheme";
 var Transition = forwardRef(function Transition(props, ref) {
     return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
 });
@@ -41,7 +42,7 @@ function BasicModal(props) {
             }
         }, maxWidth: maxWidth, fullWidth: true, TransitionComponent: Transition, "aria-labelledby": "form-dialog-title", fullScreen: fullScreen, disableEscapeKeyDown: true }, { children: _jsx(Grid, __assign({ container: true, direction: "column", sx: {
                 height: "100%",
-                overflowY: "hidden",
+                overflowY: "hidden"
             }, component: noForm ? "div" : "form", onSubmit: noForm
                 ? undefined
                 : function (e) {
@@ -50,5 +51,5 @@ function BasicModal(props) {
                     onSubmit();
                 } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit }), void 0) }), void 0) }), void 0));
 }
-export default BasicModal;
+export default withTheme(BasicModal);
 export * from "./types";

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;
-export default DigitInput;
+declare const _default: (props: any) => JSX.Element;
+export default _default;
 export * from "./types";

package/DigitInput/index.js

@@ -24,12 +24,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from "@mui/material/Tooltip";
 import Field from "@mui/material/TextField";
 import useInteractions from "./useInteractions";
+import withTheme from "../withTheme";
 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, rest = __rest(props, ["onChange", "value", "size", "tooltip", "error", "helperText", "maxLength", "minLength", "endAdornment"]);
     var _d = useInteractions({ onChange: onChange }), tooltipOpen = _d.tooltipOpen, handleChange = _d.handleChange, onOpenTooltip = _d.onOpenTooltip, onCloseTooltip = _d.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: onCloseTooltip, inputProps: { maxLength: maxLength, minLength: minLength }, InputProps: {
-                endAdornment: endAdornment,
+                endAdornment: endAdornment
             }, onChange: handleChange }, rest), void 0) }), void 0));
 }
-export default DigitInput;
+export default withTheme(DigitInput);
 export * from "./types";

package/DynamicHeaderBar/HeaderBar.d.ts

@@ -9,5 +9,5 @@ export interface HeaderBarProps {
     showBackButton?: boolean;
     onBack?: () => void;
 }
-declare function HeaderBar(props: HeaderBarProps): JSX.Element;
-export default HeaderBar;
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/DynamicHeaderBar/HeaderBar.js

@@ -19,6 +19,7 @@ import IconButton from "@mui/material/IconButton";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import HeaderLine from "./HeaderLine";
 import HeaderButtons from "./HeaderButtons";
+import withTheme from "../withTheme";
 function HeaderBar(props) {
     var title = props.title, color = props.color, subtitle = props.subtitle, bottomEl = props.bottomEl, _a = props.buttons, buttons = _a === void 0 ? [] : _a, showBackButton = props.showBackButton, onBack = props.onBack;
     var theme = useTheme();
@@ -28,4 +29,4 @@ function HeaderBar(props) {
                                         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));
 }
-export default HeaderBar;
+export default withTheme(HeaderBar);

package/DynamicHeaderBar/HeaderButtons.d.ts

@@ -3,5 +3,5 @@ import { HeaderButtonProps } from "./types";
 export interface HeaderButtonsProps {
     buttons: Array<HeaderButtonProps>;
 }
-declare function HeaderButtons(props: HeaderButtonsProps): JSX.Element;
-export default HeaderButtons;
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/DynamicHeaderBar/HeaderButtons.js

@@ -17,6 +17,7 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 import MenuButtonGroup from "../MenuButtonGroup";
 import { HeaderButtonCategory } from "./types";
+import withTheme from "../withTheme";
 function HeaderButtons(props) {
     var buttons = props.buttons;
     var theme = useTheme();
@@ -40,4 +41,4 @@ function HeaderButtons(props) {
             }
         }) }), void 0));
 }
-export default HeaderButtons;
+export default withTheme(HeaderButtons);

package/DynamicHeaderBar/HeaderLine.d.ts

@@ -1,6 +1,3 @@
-import { CSSProperties } from "react";
-interface HeaderLineProps {
-    color?: CSSProperties["color"];
-}
-declare function HeaderLine(props: HeaderLineProps): JSX.Element;
-export default HeaderLine;
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/DynamicHeaderBar/HeaderLine.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Divider from "@mui/material/Divider";
 import useTheme from "@mui/material/styles/useTheme";
+import withTheme from "../withTheme";
 function HeaderLine(props) {
     var color = props.color;
     var theme = useTheme();
     return (_jsx(Divider, { sx: {
             height: "3px",
-            backgroundColor: color || theme.palette.primary.main,
+            backgroundColor: color || theme.palette.primary.main
         } }, void 0));
 }
-export default HeaderLine;
+export default withTheme(HeaderLine);

package/FormRadioGroup/index.d.ts

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

package/FormRadioGroup/index.js

@@ -17,6 +17,7 @@ import Typography from "@mui/material/Typography";
 import RadioGroup from "@mui/material/RadioGroup";
 import FormControl from "@mui/material/FormControl";
 import FormControlLabel from "@mui/material/FormControlLabel";
+import withTheme from "../withTheme";
 function FormRadioGroup(props) {
     var formLabel = props.formLabel, color = props.color, value = props.value, options = props.options, disabled = props.disabled, tooltip = props.tooltip, onChange = props.onChange;
     return (_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) {
@@ -24,12 +25,12 @@ function FormRadioGroup(props) {
                 }, sx: {
                     my: 1,
                     "& label span:first-child span:first-child": {
-                        margin: "-5px 0 -5px 0",
-                    },
+                        margin: "-5px 0 -5px 0"
+                    }
                 } }, { 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));
 }
-export default FormRadioGroup;
+export default withTheme(FormRadioGroup);
 export * from "./types";

package/FormSelector/MultipleSelector.d.ts

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

package/FormSelector/MultipleSelector.js

@@ -17,6 +17,7 @@ import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
 import useInteractions from "./useInteractions";
+import withTheme from "../withTheme";
 function MultipleSelector(props) {
     var name = props.name, 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.multiple, multiple = _c === void 0 ? false : _c, _d = props.showHelperText, showHelperText = _d === void 0 ? false : _d, helperText = props.helperText, _e = props.error, error = _e === void 0 ? false : _e, _f = props.options, options = _f === void 0 ? [] : _f, onChange = props.onChange;
     var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
@@ -25,10 +26,10 @@ function MultipleSelector(props) {
                         onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                     }, inputProps: {
                         onFocus: onOpenTooltip,
-                        onBlur: onCloseTooltip,
+                        onBlur: onCloseTooltip
                     }, 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));
 }
-export default MultipleSelector;
+export default withTheme(MultipleSelector);

package/FormSelector/SimpleSelector.d.ts

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

package/FormSelector/SimpleSelector.js

@@ -17,6 +17,7 @@ import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
 import useInteractions from "./useInteractions";
+import withTheme from "../withTheme";
 function SimpleSelector(props) {
     var name = props.name, 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.showHelperText, showHelperText = _c === void 0 ? false : _c, helperText = props.helperText, _d = props.error, error = _d === void 0 ? false : _d, _e = props.options, options = _e === void 0 ? [] : _e, onChange = props.onChange;
     var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
@@ -25,10 +26,10 @@ function SimpleSelector(props) {
                         onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
                     }, inputProps: {
                         onFocus: onOpenTooltip,
-                        onBlur: onCloseTooltip,
+                        onBlur: onCloseTooltip
                     }, 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));
 }
-export default SimpleSelector;
+export default withTheme(SimpleSelector);

package/HelpCaption/index.d.ts

@@ -6,5 +6,5 @@ export interface HelpCaptionProps {
     linkText?: string;
     linkType?: "WEBPAGE" | "VIDEO";
 }
-declare function HelpCaption(props: HelpCaptionProps): JSX.Element;
-export default HelpCaption;
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/HelpCaption/index.js

@@ -15,6 +15,7 @@ import Typography from "@mui/material/Typography";
 import useTheme from "@mui/material/styles/useTheme";
 import VideoPlayerModal from "../VideoPlayerModal";
 import useInteractions from "./useInteractions";
+import withTheme from "../withTheme";
 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;
     var theme = useTheme();
@@ -27,8 +28,8 @@ function HelpCaption(props) {
                             cursor: "pointer",
                             "&:hover": {
                                 color: theme.palette.primary.dark,
-                                textDecoration: "underline",
-                            },
+                                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));
 }
-export default HelpCaption;
+export default withTheme(HelpCaption);

package/LoadingModal/index.d.ts

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

package/LoadingModal/index.js

@@ -16,6 +16,7 @@ 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";
 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) {
@@ -23,5 +24,5 @@ function LoadingModal(props) {
                 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));
 }
-export default LoadingModal;
+export default withTheme(LoadingModal);
 export * from "./types";

package/MenuButtonGroup/MenuItem.d.ts

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

package/MenuButtonGroup/MenuItem.js

@@ -10,12 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
 import MenuItem from "@mui/material/MenuItem";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
+import withTheme from "../withTheme";
 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));
 }
-export default memo(ButtonMenuItem);
+export default withTheme(ButtonMenuItem);

package/MenuButtonGroup/index.d.ts

@@ -9,5 +9,5 @@ export interface MenuButtonGroupProps {
     color?: ButtonProps["color"];
     buttons: Array<ButtonItemProps>;
 }
-declare function MenuButtonGroup(props: MenuButtonGroupProps): JSX.Element;
-export default MenuButtonGroup;
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/MenuButtonGroup/index.js

@@ -62,6 +62,7 @@ import Menu from "@mui/material/Menu";
 import Button from "@mui/material/Button";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ButtonItem from "./MenuItem";
+import withTheme from "../withTheme";
 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;
@@ -74,10 +75,10 @@ function MenuButtonGroup(props) {
     };
     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: {
                     vertical: "bottom",
-                    horizontal: "center",
+                    horizontal: "center"
                 }, transformOrigin: {
                     vertical: "top",
-                    horizontal: "center",
+                    horizontal: "center"
                 }, open: Boolean(anchorEl), onClose: onClose }, { children: buttons.map(function (button) {
                     var onClick = button.onClick, buttonText = button.buttonText, rest = __rest(button, ["onClick", "buttonText"]);
                     return (_jsx(ButtonItem, __assign({ buttonText: buttonText }, rest, { onClick: function (event) { return __awaiter(_this, void 0, void 0, function () {
@@ -97,4 +98,4 @@ function MenuButtonGroup(props) {
                         }); } }), buttonText));
                 }) }), void 0)] }, void 0));
 }
-export default MenuButtonGroup;
+export default withTheme(MenuButtonGroup);

package/NumberInput/index.d.ts

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

package/NumberInput/index.js

@@ -24,6 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from "@mui/material/Tooltip";
 import Field from "@mui/material/TextField";
 import useInteractions from "./useInteractions";
+import withTheme from "../withTheme";
 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 EXCEED_ERROR = "Your value exceeds the exceptable input range";
@@ -35,4 +36,4 @@ function NumberInput(props) {
                 handleBlur();
             }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest), void 0) }), void 0));
 }
-export default NumberInput;
+export default withTheme(NumberInput);

package/PasswordInput/ConfirmPassword.d.ts

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

package/PasswordInput/ConfirmPassword.js

@@ -23,16 +23,17 @@ 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";
 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 isMatched = useMemo(function () {
-        if ((value === null || value === void 0 ? void 0 : value.length) > 0 && password === value) {
-            return true;
+        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
+            return password === value;
         }
-        return false;
+        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));
 }
-export default ConfirmPassword;
+export default withTheme(ConfirmPassword);

package/PasswordInput/Password.d.ts

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

package/PasswordInput/Password.js

@@ -24,21 +24,27 @@ 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";
 function Password(props) {
     var _a = props.strategies, strategies = _a === void 0 ? {
         uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
         lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },
         specialCharacter: {
             label: "1 Special Character",
-            regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/,
+            regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/
         },
         number: { label: "1 Number", regex: /\d+/ },
-        minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ },
+        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) {
         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"]);
-    var isValidPassword = useMemo(function () { return !!value && onVerify(value); }, [value, onVerify]);
+    var isValidPassword = useMemo(function () {
+        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
+            return onVerify(value);
+        }
+        return true;
+    }, [value, onVerify]);
     var helperTextColor = useMemo(function () {
         var textColors = Object.keys(strategies).reduce(function (temp, key) {
             var regex = strategies[key].regex;
@@ -65,4 +71,4 @@ function Password(props) {
             onChange(event.target.value);
         }, fullWidth: true, required: true }, rest), void 0));
 }
-export default Password;
+export default withTheme(Password);

package/PhoneNumberInput/index.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="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"];
     onChange: (val: string) => void;
 }
-declare function PhoneInput(props: TextInputProps & PhoneInputProps): JSX.Element;
-export default PhoneInput;
+export declare function phoneFormat(str: string): string;
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/PhoneNumberInput/index.js

@@ -26,19 +26,35 @@ import Typography from "@mui/material/Typography";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
 import useInteractions from "./useInteractions";
+import withTheme from "../withTheme";
+export function phoneFormat(str) {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
+        if (index === 3) {
+            return "".concat(prev, ") ").concat(curr);
+        }
+        else if (index === 6) {
+            return "".concat(prev, "-").concat(curr);
+        }
+        else {
+            return "".concat(prev).concat(curr);
+        }
+    }, "(");
+}
 function PhoneInput(props) {
     var value = props.value, endAdornment = props.endAdornment, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "onChange"]);
-    var _a = useInteractions({ value: value }), addMask = _a.addMask, phoneFormat = _a.phoneFormat;
+    var addMask = useInteractions({ value: value }).addMask;
     var rifm = useRifm({
         mask: true,
         value: String(value),
         onChange: onChange,
         replace: addMask,
-        format: phoneFormat,
+        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,
+            endAdornment: endAdornment
         }, onChange: rifm.onChange }, rest), void 0));
 }
-export default PhoneInput;
+export default withTheme(PhoneInput);

package/PhoneNumberInput/useInteractions.d.ts

@@ -4,6 +4,5 @@ interface InteractionProps {
 declare function useInteractions(props: InteractionProps): {
     valLength: number;
     addMask: (str: string) => string;
-    phoneFormat: (str: string) => string;
 };
 export default useInteractions;

package/PhoneNumberInput/useInteractions.js

@@ -1,19 +1,6 @@
 import { useCallback, useMemo } from "react";
 function useInteractions(props) {
     var value = props.value;
-    var phoneFormat = useCallback(function (str) {
-        var digits = (str.match(/\d+/g) || []).join("");
-        var chars = digits.split("");
-        return chars.reduce(function (prev, curr, index) {
-            if (index === 3) {
-                return "".concat(prev, ") ").concat(curr);
-            }
-            if (index === 6) {
-                return "".concat(prev, "-").concat(curr);
-            }
-            return "".concat(prev).concat(curr);
-        }, "(");
-    }, []);
     var addMask = useCallback(function (str) {
         var digits = (str.match(/\d+/g) || []).join("");
         var areaCode = digits.slice(0, 3).padEnd(3, "_");
@@ -25,6 +12,6 @@ function useInteractions(props) {
         var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength: valLength, addMask: addMask, phoneFormat: phoneFormat };
+    return { valLength: valLength, addMask: addMask };
 }
 export default useInteractions;

package/README.md

@@ -23,6 +23,7 @@
   - [PasswordInput](#passwordinput)
   - [PhoneNumberInput](#phonenumberinput)
   - [TabGroup](#tabgroup)
+  - [TextInput](#textinput)
   - [ToastPrompt](#toastprompt)
   - [VideoPlayerModal](#videoplayermodal)
 - [Changelog](#changelog)
@@ -33,7 +34,7 @@
 
 It is available as an [npm package](https://www.npmjs.com/package/@symply.io/basic-components).
 
-```bash
+```shell
 // with npm
 npm install @symply.io/basic-components
 
@@ -58,9 +59,9 @@ Diglog component for alerts or confirmations.
 <h5>Import</h5>
 
 ```typescript
-import { AlertDialog } from '@symply.io/symply-basic-components';
+import { AlertDialog } from '@symply.io/basic-components/';
 // or 
-import AlertDialog from '@symply.io/symply-basic-components/AlertDialog'; 
+import AlertDialog from '@symply.io/basic-components/AlertDialog'; 
 ```
 
 <h5>Props</h5>
@@ -83,9 +84,9 @@ Reusable modal component.
 <h5>Import</h5>
 
 ```typescript
-import { BasicModal } from '@symply.io/symply-basic-components';
+import { BasicModal } from '@symply.io/basic-components/';
 // or 
-import BasicModal from '@symply.io/symply-basic-components/BasicModal'; 
+import BasicModal from '@symply.io/basic-components/BasicModal'; 
 ```
 
 <h5>Props</h5>
@@ -119,9 +120,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { DigitInput } from '@symply.io/symply-basic-components';
+import { DigitInput } from '@symply.io/basic-components/';
 // or 
-import DigitInput from '@symply.io/symply-basic-components/DigitInput'; 
+import DigitInput from '@symply.io/basic-components/DigitInput'; 
 ```
 
 <h5>Props</h5>
@@ -144,9 +145,9 @@ Radio Group allow the user to select one option from a set.
 <h5>Import</h5>
 
 ```typescript
-import { FormRadioGroup } from '@symply.io/symply-basic-components';
+import { FormRadioGroup } from '@symply.io/basic-components/';
 // or 
-import FormRadioGroup from '@symply.io/symply-basic-components/FormRadioGroup'; 
+import FormRadioGroup from '@symply.io/basic-components/FormRadioGroup'; 
 ```
 
 <h5>Radio Option Props</h5>
@@ -179,9 +180,9 @@ Selector components are used for collecting user provided information from a lis
 
 ```typescript
 // Simple Selector
-import { SimpleSelector } from '@symply.io/symply-basic-components/FormSelector';
+import { SimpleSelector } from '@symply.io/basic-components/FormSelector';
 // Multiple Selector 
-import { MultipleSelector } from '@symply.io/symply-basic-components/FormRadioGroup'; 
+import { MultipleSelector } from '@symply.io/basic-components/FormRadioGroup'; 
 ```
 
 <h5>Selector Option Props</h5>
@@ -230,9 +231,9 @@ You can use it to add a hint/help paragraph.
 <h5>Import</h5>
 
 ```typescript
-import { HelpCaption } from '@symply.io/symply-basic-components';
+import { HelpCaption } from '@symply.io/basic-components/';
 // or 
-import HelpCaption from '@symply.io/symply-basic-components/HelpCaption';
+import HelpCaption from '@symply.io/basic-components/HelpCaption';
 ```
 
 <h5>Props</h5>
@@ -254,9 +255,9 @@ A modal for loading.
 <h5>Import</h5>
 
 ```typescript
-import { LoadingModal } from '@symply.io/symply-basic-components';
+import { LoadingModal } from '@symply.io/basic-components/';
 // or 
-import LoadingModal from '@symply.io/symply-basic-components/LoadingModal';
+import LoadingModal from '@symply.io/basic-components/LoadingModal';
 ```
 
 <h5>Props</h5>
@@ -278,9 +279,9 @@ A button with menu options.
 <h5>Import</h5>
 
 ```typescript
-import { MenuButtonGroup } from '@symply.io/symply-basic-components';
+import { MenuButtonGroup } from '@symply.io/basic-components/';
 // or 
-import MenuButtonGroup from '@symply.io/symply-basic-components/MenuButtonGroup';
+import MenuButtonGroup from '@symply.io/basic-components/MenuButtonGroup';
 ```
 
 <h5>Menu Button Props</h5>
@@ -315,9 +316,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { NumberInput } from '@symply.io/symply-basic-components';
+import { NumberInput } from '@symply.io/basic-components/';
 // or 
-import NumberInput from '@symply.io/symply-basic-components/NumberInput'; 
+import NumberInput from '@symply.io/basic-components/NumberInput'; 
 ```
 
 <h5>Props</h5>
@@ -343,9 +344,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 
 ```typescript
 // Password
-import { Password } from '@symply.io/symply-basic-components/PasswordInput';
+import { Password } from '@symply.io/basic-components/PasswordInput';
 // Confirm Password 
-import { ConfirmPassword } from '@symply.io/symply-basic-components/PasswordInput'; 
+import { ConfirmPassword } from '@symply.io/basic-components/PasswordInput'; 
 ```
 
 <h5>Password Props</h5>
@@ -377,9 +378,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { PhoneNumberInput } from '@symply.io/symply-basic-components';
+import { PhoneNumberInput } from '@symply.io/basic-components/';
 // or 
-import PhoneNumberInput from '@symply.io/symply-basic-components/PhoneNumberInput'; 
+import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput'; 
 ```
 
 <h5>Props</h5>
@@ -399,9 +400,9 @@ Tabs group.
 <h5>Import</h5>
 
 ```typescript
-import { TabGroup } from '@symply.io/symply-basic-components';
+import { TabGroup } from '@symply.io/basic-components/';
 // or 
-import TabGroup from '@symply.io/symply-basic-components/TabGroup'; 
+import TabGroup from '@symply.io/basic-components/TabGroup'; 
 ```
 
 <h5>Props</h5>
@@ -425,9 +426,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 <h5>Import</h5>
 
 ```typescript
-import { TextInput } from '@symply.io/symply-basic-components';
+import { TextInput } from '@symply.io/basic-components/';
 // or 
-import TextInput from '@symply.io/symply-basic-components/TextInput'; 
+import TextInput from '@symply.io/basic-components/TextInput'; 
 ```
 
 <h5>Props</h5>
@@ -449,7 +450,7 @@ Global prompt component.
 <h5>Import</h5>
 
 ```typescript
-import { usePrompt } from '@symply.io/symply-basic-components';
+import { usePrompt } from '@symply.io/basic-components';
 ```
 
 <h5>Usage</h5>
@@ -474,9 +475,9 @@ A modal for playing videos.
 <h5>Import</h5>
 
 ```typescript
-import { VideoPlayerModal } from '@symply.io/symply-basic-components';
+import { VideoPlayerModal } from '@symply.io/basic-components/';
 // or
-import VideoPlayerModal from '@symply.io/symply-basic-components/VideoPlayerModal';
+import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';
 ```
 
 <h5>Props</h5>

package/TabGroup/index.d.ts

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

package/TabGroup/index.js

@@ -16,6 +16,7 @@ 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";
 var TabGroup = forwardRef(function (props, ref) {
     var theme = useTheme();
     var mobileViewport = useMediaQuery(theme.breakpoints.down("md"));
@@ -25,7 +26,7 @@ var TabGroup = forwardRef(function (props, ref) {
         setCurrentTabIndex(index);
     };
     useImperativeHandle(ref, function () { return ({
-        tabIndex: currentTabIndex,
+        tabIndex: currentTabIndex
     }); });
     return (_jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: function (_, val) {
             onClick(val);
@@ -38,9 +39,9 @@ var TabGroup = forwardRef(function (props, ref) {
                     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,
+                    boxShadow: active ? "0px 4px 6px #acc1c2" : undefined
                 } }, index));
         }) }), void 0));
 });
-export default TabGroup;
+export default withTheme(TabGroup);
 export * from "./types";

package/TextInput/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextProps = Omit<TextFieldProps, "onChange">;
 export interface TextInputProps {
     onChange: (value: string) => void;
     value: string;
@@ -8,5 +7,5 @@ export interface TextInputProps {
     maxLength?: number;
     minLength?: number;
 }
-declare const TextInput: (props: TextInputProps & TextProps) => JSX.Element;
-export default TextInput;
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/TextInput/index.js

@@ -24,6 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from "@mui/material/Tooltip";
 import Field from "@mui/material/TextField";
 import useInteractions from "./useInteractions";
+import withTheme from "../withTheme";
 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 _e = useInteractions(), tooltipOpen = _e.tooltipOpen, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
@@ -32,4 +33,4 @@ var TextInput = function (props) {
                 onChange(event.target.value);
             }, inputProps: { maxLength: maxLength, minLength: minLength } }, rest), void 0) }), void 0));
 };
-export default TextInput;
+export default withTheme(TextInput);

package/ToastPrompt/Presentation.d.ts

@@ -1,16 +1,3 @@
-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;
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/ToastPrompt/Presentation.js

@@ -31,23 +31,24 @@ 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";
 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 styles = {
         success: {
-            backgroundColor: green[600],
+            backgroundColor: green[600]
         },
         error: {
-            backgroundColor: red[700],
+            backgroundColor: red[700]
         },
         info: {
-            backgroundColor: blue[600],
+            backgroundColor: blue[600]
         },
         warning: {
-            backgroundColor: amber[900],
-        },
+            backgroundColor: amber[900]
+        }
     };
     var Transition = function (args) {
         return _jsx(Slide, __assign({}, args, { direction: transitionDirection }), void 0);
@@ -56,25 +57,25 @@ var ToastPrompt = function (props) {
         success: SuccessIcon,
         warning: WarningIcon,
         error: ErrorIcon,
-        info: InfoIcon,
+        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",
+            marginTop: "3vh"
         } }, { children: _jsx(SnackbarContent, __assign({ sx: __assign(__assign({}, styles[variant]), { root: (_a = {},
                     _a[theme.breakpoints.down("sm")] = {
                         maxWidth: "320px",
-                        borderRadius: "4px",
+                        borderRadius: "4px"
                     },
                     _a) }), "aria-describedby": "Toast", message: _jsxs(Typography, __assign({ id: "Toast", component: "span", sx: {
                     fontSize: 14,
                     display: "flex",
-                    alignItems: "center",
+                    alignItems: "center"
                 } }, { children: [variant ? (_jsx(Icon, { sx: {
                             fontSize: 20,
                             opacity: 0.9,
-                            marginRight: theme.spacing(1),
+                            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()))));
 };
-export default ToastPrompt;
+export default withTheme(ToastPrompt);

package/VideoPlayerModal/index.d.ts

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

package/VideoPlayerModal/index.js

@@ -30,6 +30,7 @@ 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';
 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();
@@ -38,5 +39,5 @@ function VideoPlayerModal(props) {
                             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 VideoPlayerModal;
+export default withTheme(VideoPlayerModal);
 export * from "./types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.6",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",

package/withTheme.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const withTheme: (Component: React.ElementType) => (props: any) => JSX.Element;
+export default withTheme;

package/withTheme.js

@@ -0,0 +1,35 @@
+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 { createTheme, ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+var theme = createTheme({
+    components: {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    whiteSpace: 'nowrap',
+                    fontWeight: 600,
+                    fontFamily: 'Dinpro'
+                }
+            }
+        }
+    },
+    typography: {
+        fontFamily: 'Dinpro'
+    }
+});
+var withTheme = function (Component) {
+    var CustomComponent = function (props) { return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(CssBaseline, {}, void 0), _jsx(Component, __assign({}, props), void 0)] }), void 0)); };
+    return CustomComponent;
+};
+export default withTheme;