@symply.io/basic-components 1.0.0-alpha.2 → 1.0.0-alpha.20

package/AlertDialog/index.d.ts

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

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,18 +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 useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
-    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
 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 })), _jsx(DialogContent, { children: children }), _jsx(DialogActions, { children: DialogButtons ? (cloneElement(DialogButtons)) : (_jsx(Button, __assign({ onClick: onClose, color: "primary" }, { children: "OK" }))) })] })) })));
 };
 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/Autocomplete/index.d.ts

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

package/Autocomplete/index.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Autocomplete from "@mui/material/Autocomplete";
+import TextField from "@mui/material/TextField";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+function CustomAutocomplete(props) {
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "primaryColor", "secondaryColor", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _a = useInteractions(), inputValue = _a.inputValue, onInputChange = _a.onInputChange;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, options: options, multiple: multiple, onChange: function (_, value) {
+                onChange(value);
+            }, inputValue: inputValue, onInputChange: onInputChange, renderInput: function (params) { return _jsx(TextField, __assign({}, params, rest, { size: size })); } }) })));
+}
+export default CustomAutocomplete;
+export * from "./types";

package/Autocomplete/types.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export interface IAutocompleteOption {
+    label: string;
+    [name: string]: unknown;
+}
+export declare type AutocompleteOptionType = IAutocompleteOption | string;
+export interface CustomAutocompleteProps extends Omit<TextFieldProps, "onChange"> {
+    multiple?: boolean;
+    options: Array<AutocompleteOptionType>;
+    value: Array<AutocompleteOptionType> | AutocompleteOptionType | null;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: Array<AutocompleteOptionType> | AutocompleteOptionType | null) => void;
+}

package/Autocomplete/types.js

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

package/Autocomplete/useInteractions.d.ts

@@ -0,0 +1,5 @@
+declare function useInteractions(): {
+    inputValue: string;
+    onInputChange: (_: object, value: string) => void;
+};
+export default useInteractions;

package/Autocomplete/useInteractions.js

@@ -0,0 +1,9 @@
+import { useState, useCallback } from "react";
+function useInteractions() {
+    var _a = useState(""), inputValue = _a[0], setInputValue = _a[1];
+    var onInputChange = useCallback(function (_, value) {
+        setInputValue(value);
+    }, []);
+    return { inputValue: inputValue, onInputChange: onInputChange };
+}
+export default useInteractions;

package/AutocompleteWithFilter/index.d.ts

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

package/AutocompleteWithFilter/index.js

@@ -0,0 +1,54 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import Checkbox from "@mui/material/Checkbox";
+import TextField from "@mui/material/TextField";
+import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import useCustomTheme from "../useCustomTheme";
+var icon = _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+var checkedIcon = _jsx(CheckBoxIcon, { fontSize: "small" });
+function AutocompleteWithFilter(props) {
+    var size = props.size, value = props.value, options = props.options, multiple = props.multiple, disableCloseOnSelect = props.disableCloseOnSelect, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["size", "value", "options", "multiple", "disableCloseOnSelect", "primaryColor", "secondaryColor", "onChange"]);
+    var filter = createFilterOptions({
+        ignoreCase: true,
+        ignoreAccents: true,
+        trim: true,
+        stringify: function (option) {
+            return typeof option === "string" ? option : option.label;
+        }
+    });
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, value) {
+                onChange(value);
+            }, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
+                return typeof option === "string" ? option || "" : option.label || "";
+            }, renderOption: function (props, option, _a) {
+                var selected = _a.selected;
+                return (_jsxs("li", __assign({}, props, { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), typeof option === "string" ? option || "" : option.label || ""] })));
+            }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined" }))); } }) })));
+}
+export default AutocompleteWithFilter;
+export * from "./types";

package/AutocompleteWithFilter/types.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export interface IAutoCompleteWithFilterOption {
+    label: string;
+    [name: string]: unknown;
+}
+export declare type AutoCompleteWithFilterOptionType = IAutoCompleteWithFilterOption | string;
+export interface AutoCompleteWithFilterProps extends Omit<TextFieldProps, "onChange"> {
+    multiple?: boolean;
+    value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null;
+    options: Array<AutoCompleteWithFilterOptionType>;
+    disableCloseOnSelect?: boolean;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null) => void;
+}

package/AutocompleteWithFilter/types.js

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

package/BasicModal/Content.d.ts

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

package/BasicModal/Content.js

@@ -32,6 +32,6 @@ function Content(props) {
                             right: 8,
                             top: 8,
                             color: theme.palette.grey[500],
-                        } }, { children: _jsx(CloseIcon, {}, void 0) }), void 0)) : null] }), void 0), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }, void 0), Boolean(children) && cloneElement(children)] }), void 0), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText }), void 0) }), void 0), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText }), void 0) }), void 0)] }, void 0)) }), void 0) }), void 0))] }, void 0));
+                        } }, { children: _jsx(CloseIcon, {}) }))) : null] })), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText })) }))] })) })) })))] }));
 }
 export default Content;

package/BasicModal/index.d.ts

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

package/BasicModal/index.js

@@ -26,29 +26,27 @@ 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 useCustomTheme from "../useCustomTheme";
 var Transition = forwardRef(function Transition(props, ref) {
-    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }), void 0);
+    return _jsx(Slide, __assign({ direction: "up" }, props, { ref: ref }));
 });
 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({ 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 })) })) })) })));
 }
 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/BreadCrumbs/index.d.ts

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

package/BreadCrumbs/index.js

@@ -0,0 +1,37 @@
+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 { useCallback } from "react";
+import { navigate } from "@reach/router";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import useCustomTheme from "../useCustomTheme";
+function Crumbs(props) {
+    var routes = props.routes, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var onNavigateTo = useCallback(function (url) {
+        navigate(url, { replace: true });
+    }, []);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Breadcrumbs, __assign({ "aria-label": "breadcrumb", separator: _jsx(NavigateNextIcon, { fontSize: "small" }) }, { children: [_jsx(Typography, {}), routes.map(function (route) {
+                    var href = route.href, label = route.label;
+                    return href ? (_jsx(Typography, __assign({ variant: "body2", color: "inherit", sx: {
+                            "&:hover": {
+                                cursor: "pointer",
+                                color: theme.palette.primary.light,
+                            },
+                        }, onClick: function () { return onNavigateTo(href); } }, { children: label }), label)) : (_jsx(Typography, __assign({ variant: "body2", color: "primary" }, { children: label }), label));
+                })] })) })));
+}
+export default Crumbs;
+export * from "./types";

package/BreadCrumbs/types.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+export interface BreadCrumbsProps {
+    routes: Array<{
+        href?: string;
+        label: string;
+    }>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/BreadCrumbs/types.js

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

package/CheckBox/CheckBox.d.ts

@@ -0,0 +1,3 @@
+import { CheckBoxProps } from "./types";
+export declare function CheckBox(props: CheckBoxProps): JSX.Element;
+export default CheckBox;

package/CheckBox/CheckBox.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+export function CheckBox(props) {
+    var label = props.label, onChange = props.onChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["label", "onChange", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, __assign({ onChange: function (event) {
+                    event.stopPropagation();
+                    onChange(event.target.checked);
+                } }, rest)), label: label }) })));
+}
+export default CheckBox;

package/CheckBox/CheckBoxGroup.d.ts

@@ -0,0 +1,3 @@
+import { CheckBoxGroupProps } from "./types";
+export declare function CheckBoxGroup(props: CheckBoxGroupProps): JSX.Element;
+export default CheckBoxGroup;

package/CheckBox/CheckBoxGroup.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import FormGroup from "@mui/material/FormGroup";
+import CheckBox from "./CheckBox";
+export function CheckBoxGroup(props) {
+    var checkboxes = props.checkboxes, rest = __rest(props, ["checkboxes"]);
+    return (_jsx(FormGroup, __assign({}, rest, { children: checkboxes.map(function (checkbox, index) { return (_jsx(CheckBox, __assign({}, checkbox), index)); }) })));
+}
+export default CheckBoxGroup;

package/CheckBox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export * from "./types";

package/CheckBox/index.js

@@ -0,0 +1,3 @@
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export * from "./types";

package/CheckBox/types.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, ReactNode } from "react";
+import { CheckboxProps } from "@mui/material/Checkbox";
+import { FormGroupProps } from "@mui/material/FormGroup";
+export interface CheckBoxProps extends Omit<CheckboxProps, "onChange"> {
+    label: string | ReactNode;
+    onChange: (val: boolean) => void;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}
+export interface CheckBoxGroupProps extends FormGroupProps {
+    checkboxes: Array<CheckBoxProps>;
+}

package/CheckBox/types.js

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

package/Copyright/index.d.ts

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

package/Copyright/index.js

@@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function Copyright(props) {
+    var primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Typography, __assign({ variant: "body2", color: "textSecondary", align: "center" }, { children: ["Copyright © ", _jsx(Link, __assign({ color: "inherit", href: "https://symply.io/" }, { children: "Symply Software Inc" })), "\u00A0", new Date().getFullYear() > 2020
+                    ? "2020-".concat(new Date().getFullYear())
+                    : new Date().getFullYear(), "."] })) })));
+}
+export default Copyright;
+export * from "./types";

package/Copyright/types.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from "react";
+export interface CopyrightProps {
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/Copyright/types.js

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

package/DigitInput/index.d.ts

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

package/DigitInput/index.js

@@ -23,13 +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 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, _b = props.maxLength, maxLength = _b === void 0 ? 999 : _b, _c = props.minLength, minLength = _c === void 0 ? 0 : _c, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "maxLength", "minLength", "endAdornment", "primaryColor", "secondaryColor"]);
     var _d = useInteractions({ onChange: onChange }), tooltipOpen = _d.tooltipOpen, handleChange = _d.handleChange, onOpenTooltip = _d.onOpenTooltip, onCloseTooltip = _d.onCloseTooltip;
-    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: "text", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: onCloseTooltip, inputProps: { maxLength: maxLength, minLength: minLength }, InputProps: {
+                    endAdornment: endAdornment
+                }, onChange: handleChange }, rest)) })) })));
 }
 export default DigitInput;
 export * from "./types";

package/DigitInput/types.d.ts

@@ -1,9 +1,13 @@
+import { CSSProperties } from "react";
 import { InputProps } from "@mui/material/Input";
-export interface DigitInputProps {
+import { TextFieldProps } from "@mui/material/TextField";
+export interface DigitInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     value: string;
     tooltip?: string;
     maxLength?: number;
     minLength?: number;
     endAdornment?: InputProps["endAdornment"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }

package/DynamicHeaderBar/HeaderBar.d.ts

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

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,13 +19,14 @@ import IconButton from "@mui/material/IconButton";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import HeaderLine from "./HeaderLine";
 import HeaderButtons from "./HeaderButtons";
+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" }) }))), _jsx(Typography, __assign({ align: "left", variant: isLessThanSm ? "h6" : "h3", sx: { fontWeight: 600 } }, { children: title }))] })) })), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons }) }))) : (_jsx(_Fragment, {}))] })), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color }) })) })), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle })) : (cloneElement(subtitle)) })) }))), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) })) })))] })) })));
 }
 export default HeaderBar;