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

package/AlertDialog/index.d.ts

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

package/AlertDialog/index.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, cloneElement } from "react";
-import useTheme from "@mui/material/styles/useTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogTitle from "@mui/material/DialogTitle";
@@ -30,19 +30,19 @@ 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";
+import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
     return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
 });
 var AlertDialog = function (props) {
-    var _a = props.title, title = _a === void 0 ? "Info" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "md" : _b, children = props.children, open = props.open, onClose = props.onClose, DialogButtons = props.DialogButtons, rest = __rest(props, ["title", "maxWidth", "children", "open", "onClose", "DialogButtons"]);
-    var theme = useTheme();
+    var _a = props.title, title = _a === void 0 ? "Info" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "md" : _b, children = props.children, open = props.open, onClose = props.onClose, DialogButtons = props.DialogButtons, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["title", "maxWidth", "children", "open", "onClose", "DialogButtons", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsxs(Dialog, __assign({ maxWidth: maxWidth, fullScreen: fullScreen, TransitionComponent: Transition, open: open, onClose: function (_, reason) {
-            if (reason !== "backdropClick") {
-                onClose();
-            }
-        }, "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));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Dialog, __assign({ maxWidth: maxWidth, fullScreen: fullScreen, TransitionComponent: Transition, open: open, onClose: function (_, reason) {
+                if (reason !== "backdropClick") {
+                    onClose();
+                }
+            }, "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) }), void 0));
 };
-export default withTheme(AlertDialog);
+export default AlertDialog;
 export * from "./types";

package/AlertDialog/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement, CSSProperties } from "react";
 import { DialogProps } from "@mui/material/Dialog";
 import { DialogContentProps } from "@mui/material/DialogContent";
 export interface AlertDialogProps {
@@ -8,4 +8,6 @@ export interface AlertDialogProps {
     open: boolean;
     onClose: () => void;
     DialogButtons?: ReactElement;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }

package/BasicModal/index.d.ts

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

package/BasicModal/index.js

@@ -26,30 +26,30 @@ import Grid from "@mui/material/Grid";
 import Dialog from "@mui/material/Dialog";
 import Slide from "@mui/material/Slide";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import useTheme from "@mui/material/styles/useTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import Content from "./Content";
-import withTheme from "../withTheme";
+import useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
     return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
 });
 function BasicModal(props) {
-    var onClose = props.onClose, onSubmit = props.onSubmit, _a = props.maxWidth, maxWidth = _a === void 0 ? "sm" : _a, _b = props.open, open = _b === void 0 ? false : _b, _c = props.noForm, noForm = _c === void 0 ? false : _c, rest = __rest(props, ["onClose", "onSubmit", "maxWidth", "open", "noForm"]);
-    var theme = useTheme();
+    var onClose = props.onClose, onSubmit = props.onSubmit, _a = props.maxWidth, maxWidth = _a === void 0 ? "sm" : _a, _b = props.open, open = _b === void 0 ? false : _b, _c = props.noForm, noForm = _c === void 0 ? false : _c, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onClose", "onSubmit", "maxWidth", "open", "noForm", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsx(Dialog, __assign({ open: open, onClose: function (_, reason) {
-            if (reason !== "backdropClick") {
-                onClose();
-            }
-        }, 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"
-            }, component: noForm ? "div" : "form", onSubmit: noForm
-                ? undefined
-                : function (e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onSubmit();
-                } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit }), void 0) }), void 0) }), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Dialog, __assign({ open: open, onClose: function (_, reason) {
+                if (reason !== "backdropClick") {
+                    onClose();
+                }
+            }, 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"
+                }, component: noForm ? "div" : "form", onSubmit: noForm
+                    ? undefined
+                    : function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onSubmit();
+                    } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit }), void 0) }), void 0) }), void 0) }), void 0));
 }
-export default withTheme(BasicModal);
+export default BasicModal;
 export * from "./types";

package/BasicModal/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, CSSProperties } from "react";
 import { ButtonProps } from "@mui/material/Button";
 export interface BasicModalContentProps {
     children: ReactNode;
@@ -19,4 +19,6 @@ export interface BasicModalContentProps {
 export interface BasicModalProps extends BasicModalContentProps {
     open?: boolean;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }

package/DigitInput/index.d.ts

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

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

package/DigitInput/types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { InputProps } from "@mui/material/Input";
 export interface DigitInputProps {
     onChange: (value: string) => void;
@@ -6,4 +7,6 @@ export interface DigitInputProps {
     maxLength?: number;
     minLength?: number;
     endAdornment?: InputProps["endAdornment"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }

package/DynamicHeaderBar/HeaderBar.d.ts

@@ -7,7 +7,9 @@ export interface HeaderBarProps {
     bottomEl?: ReactElement;
     buttons?: Array<HeaderButtonProps>;
     showBackButton?: boolean;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onBack?: () => void;
 }
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+declare function HeaderBar(props: HeaderBarProps): JSX.Element;
+export default HeaderBar;

package/DynamicHeaderBar/HeaderBar.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cloneElement, useMemo } from "react";
-import useTheme from "@mui/material/styles/useTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import Typography from "@mui/material/Typography";
 import Grid from "@mui/material/Grid";
@@ -19,14 +19,14 @@ 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";
+import useCustomTheme from "../useCustomTheme";
 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();
+    var title = props.title, color = props.color, subtitle = props.subtitle, bottomEl = props.bottomEl, _a = props.buttons, buttons = _a === void 0 ? [] : _a, showBackButton = props.showBackButton, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBack = props.onBack;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
     var hasButtons = useMemo(function () { return buttons.length > 0; }, [buttons.length]);
-    return (_jsxs(Grid, __assign({ sx: { mb: 1 } }, { children: [_jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12 }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [showBackButton && (_jsx(IconButton, __assign({ onClick: function () {
-                                        onBack ? onBack() : window.history.back();
-                                    } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }, void 0) }), void 0)), _jsx(Typography, __assign({ align: "left", variant: isLessThanSm ? "h6" : "h3", sx: { fontWeight: 600 } }, { children: title }), void 0)] }), void 0) }), void 0), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons }, void 0) }), void 0)) : (_jsx(_Fragment, {}, void 0))] }), void 0), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color }, void 0) }), void 0) }), void 0), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle }, void 0)) : (cloneElement(subtitle)) }), void 0) }), void 0)), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) }), void 0) }), void 0))] }), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ sx: { mb: 1 } }, { children: [_jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12 }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [showBackButton && (_jsx(IconButton, __assign({ onClick: function () {
+                                            onBack ? onBack() : window.history.back();
+                                        } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }, void 0) }), void 0)), _jsx(Typography, __assign({ align: "left", variant: isLessThanSm ? "h6" : "h3", sx: { fontWeight: 600 } }, { children: title }), void 0)] }), void 0) }), void 0), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons }, void 0) }), void 0)) : (_jsx(_Fragment, {}, void 0))] }), void 0), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color }, void 0) }), void 0) }), void 0), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle }, void 0)) : (cloneElement(subtitle)) }), void 0) }), void 0)), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) }), void 0) }), void 0))] }), void 0) }), void 0));
 }
-export default withTheme(HeaderBar);
+export default HeaderBar;

package/DynamicHeaderBar/HeaderButtons.d.ts

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

package/DynamicHeaderBar/HeaderButtons.js

@@ -14,31 +14,31 @@ import Fab from "@mui/material/Fab";
 import Grid from "@mui/material/Grid";
 import Button from "@mui/material/Button";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import useTheme from "@mui/material/styles/useTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import MenuButtonGroup from "../MenuButtonGroup";
 import { HeaderButtonCategory } from "./types";
-import withTheme from "../withTheme";
+import useCustomTheme from "../useCustomTheme";
 function HeaderButtons(props) {
     var buttons = props.buttons;
-    var theme = useTheme();
+    var theme = useCustomTheme();
     var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsx(Grid, __assign({ container: true, spacing: 1, direction: "row", justifyContent: "flex-end", alignItems: "center" }, { children: buttons.map(function (button) {
-            switch (button.type) {
-                case HeaderButtonCategory.TextButton: {
-                    var _a = button.variant, variant = _a === void 0 ? "contained" : _a, text = button.text, onClick = button.onClick, color = button.color, size = button.size, startIcon = button.startIcon, endIcon = button.endIcon, disabled = button.disabled;
-                    return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text }), void 0) }), text));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Grid, __assign({ container: true, spacing: 1, direction: "row", justifyContent: "flex-end", alignItems: "center" }, { children: buttons.map(function (button) {
+                switch (button.type) {
+                    case HeaderButtonCategory.TextButton: {
+                        var _a = button.variant, variant = _a === void 0 ? "contained" : _a, text = button.text, onClick = button.onClick, color = button.color, size = button.size, startIcon = button.startIcon, endIcon = button.endIcon, disabled = button.disabled;
+                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text }), void 0) }), text));
+                    }
+                    case HeaderButtonCategory.IconButton: {
+                        var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon;
+                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size }, { children: icon }), void 0) }), title));
+                    }
+                    case HeaderButtonCategory.MenuButton: {
+                        var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size;
+                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, buttonText: buttonText, disabled: disabled }, void 0) }), buttonText));
+                    }
+                    default:
+                        return _jsx(_Fragment, {}, void 0);
                 }
-                case HeaderButtonCategory.IconButton: {
-                    var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon;
-                    return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size }, { children: icon }), void 0) }), title));
-                }
-                case HeaderButtonCategory.MenuButton: {
-                    var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size;
-                    return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, buttonText: buttonText, disabled: disabled }, void 0) }), buttonText));
-                }
-                default:
-                    return _jsx(_Fragment, {}, void 0);
-            }
-        }) }), void 0));
+            }) }), void 0) }), void 0));
 }
-export default withTheme(HeaderButtons);
+export default HeaderButtons;

package/DynamicHeaderBar/HeaderLine.d.ts

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

package/DynamicHeaderBar/HeaderLine.js

@@ -1,13 +1,12 @@
 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";
+import useCustomTheme from "../useCustomTheme";
 function HeaderLine(props) {
     var color = props.color;
-    var theme = useTheme();
+    var theme = useCustomTheme();
     return (_jsx(Divider, { sx: {
             height: "3px",
             backgroundColor: color || theme.palette.primary.main
         } }, void 0));
 }
-export default withTheme(HeaderLine);
+export default HeaderLine;

package/FormRadioGroup/index.d.ts

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

package/FormRadioGroup/index.js

@@ -17,20 +17,22 @@ 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";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 function FormRadioGroup(props) {
-    var formLabel = props.formLabel, color = props.color, value = props.value, options = props.options, disabled = props.disabled, tooltip = props.tooltip, 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) {
-                    onChange(event.target.value);
-                }, sx: {
-                    my: 1,
-                    "& label span:first-child span:first-child": {
-                        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));
+    var formLabel = props.formLabel, color = props.color, value = props.value, options = props.options, disabled = props.disabled, tooltip = props.tooltip, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(FormControl, __assign({ sx: { mt: 3 }, component: "fieldset", disabled: disabled }, { children: [tooltip ? (_jsx(Tooltip, __assign({ title: tooltip, placement: "right", disableTouchListener: true }, { children: _jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }), void 0) }), void 0)) : (_jsx(FormLabel, __assign({ sx: { lineHeight: "24px" }, component: "legend" }, { children: formLabel }), void 0)), _jsx(RadioGroup, __assign({ value: value, onChange: function (event) {
+                        onChange(event.target.value);
+                    }, sx: {
+                        my: 1,
+                        "& label span:first-child span:first-child": {
+                            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) }), void 0));
 }
-export default withTheme(FormRadioGroup);
+export default FormRadioGroup;
 export * from "./types";

package/FormRadioGroup/types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { RadioProps } from "@mui/material/Radio";
 interface IRadioOption {
     label: string;
@@ -11,6 +12,8 @@ export interface FormRadioGroupProps {
     value: string | boolean | number;
     disabled?: boolean;
     tooltip?: string;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     onChange: (value: string | boolean | number) => void;
 }
 export {};

package/FormSelector/MultipleSelector.d.ts

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

package/FormSelector/MultipleSelector.js

@@ -16,20 +16,22 @@ import MenuItem from "@mui/material/MenuItem";
 import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
-import withTheme from "../withTheme";
+import useCustomTheme from "../useCustomTheme";
 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 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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
-    return (_jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, error: error }, { children: [label && _jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }), void 0), _jsx(Select, __assign({ value: value, name: name, disabled: disabled, multiple: true, onChange: function (event) {
-                        var _a;
-                        onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
-                    }, inputProps: {
-                        onFocus: onOpenTooltip,
-                        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));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, error: error }, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }), void 0)), _jsx(Select, __assign({ value: value, name: name, disabled: disabled, multiple: true, onChange: function (event) {
+                            var _a;
+                            onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
+                        }, inputProps: {
+                            onFocus: onOpenTooltip,
+                            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) }), void 0));
 }
-export default withTheme(MultipleSelector);
+export default MultipleSelector;

package/FormSelector/SimpleSelector.d.ts

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

package/FormSelector/SimpleSelector.js

@@ -16,20 +16,22 @@ import MenuItem from "@mui/material/MenuItem";
 import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
-import withTheme from "../withTheme";
+import useCustomTheme from "../useCustomTheme";
 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 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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
-    return (_jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, error: error }, { children: [label && _jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }), void 0), _jsx(Select, __assign({ value: value, name: name, disabled: disabled, onChange: function (event) {
-                        var _a;
-                        onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
-                    }, inputProps: {
-                        onFocus: onOpenTooltip,
-                        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));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, error: error }, { children: [label && (_jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }), void 0)), _jsx(Select, __assign({ value: value, name: name, disabled: disabled, onChange: function (event) {
+                            var _a;
+                            onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
+                        }, inputProps: {
+                            onFocus: onOpenTooltip,
+                            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) }), void 0));
 }
-export default withTheme(SimpleSelector);
+export default SimpleSelector;

package/FormSelector/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, CSSProperties } from "react";
 import { SelectProps } from "@mui/material/Select";
 interface SelectorBaseProps {
     name?: string;
@@ -10,6 +10,8 @@ interface SelectorBaseProps {
     helperText?: string;
     error?: boolean;
     multiple?: SelectProps["multiple"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
     options: Array<{
         label: string;
         value: string | number;

package/HelpCaption/index.d.ts

@@ -1,10 +1,12 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
 export interface HelpCaptionProps {
     mainCaption: string;
     subCaption?: string;
     linkUrl?: string;
     linkText?: string;
     linkType?: "WEBPAGE" | "VIDEO";
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
-declare const _default: (props: any) => JSX.Element;
-export default _default;
+declare function HelpCaption(props: HelpCaptionProps): JSX.Element;
+export default HelpCaption;

package/HelpCaption/index.js

@@ -12,24 +12,24 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
-import useTheme from "@mui/material/styles/useTheme";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import VideoPlayerModal from "../VideoPlayerModal";
 import useInteractions from "./useInteractions";
-import withTheme from "../withTheme";
+import useCustomTheme from "../useCustomTheme";
 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();
+    var mainCaption = props.mainCaption, subCaption = props.subCaption, linkUrl = props.linkUrl, _a = props.linkText, linkText = _a === void 0 ? "Watch Demo" : _a, _b = props.linkType, linkType = _b === void 0 ? "WEBPAGE" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions(), videoModalOpen = _c.videoModalOpen, onOpenVideoModal = _c.onOpenVideoModal, onCloseVideoModal = _c.onCloseVideoModal;
-    return (_jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption }), void 0) }), void 0), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption }), void 0), "\u00A0"] }, void 0)), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
-                            ? function () {
-                                window.open(linkUrl);
-                            }
-                            : onOpenVideoModal, align: "left", color: "primary", component: "span", sx: {
-                            cursor: "pointer",
-                            "&:hover": {
-                                color: theme.palette.primary.dark,
-                                textDecoration: "underline"
-                            }
-                        } }, { children: _jsx("b", { children: linkText }, void 0) }), void 0))] }), void 0), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }, void 0))] }), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption }), void 0) }), void 0), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption }), void 0), "\u00A0"] }, void 0)), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
+                                ? function () {
+                                    window.open(linkUrl);
+                                }
+                                : onOpenVideoModal, align: "left", color: "primary", component: "span", sx: {
+                                cursor: "pointer",
+                                "&:hover": {
+                                    color: theme.palette.primary.dark,
+                                    textDecoration: "underline"
+                                }
+                            } }, { children: _jsx("b", { children: linkText }, void 0) }), void 0))] }), void 0), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }, void 0))] }), void 0) }), void 0));
 }
-export default withTheme(HelpCaption);
+export default HelpCaption;

package/LoadingModal/index.d.ts

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