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

package/DateInput/FullDateInput/index.js

@@ -1,3 +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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRifm } from "rifm";
 import TextField from "@mui/material/TextField";
@@ -5,28 +27,28 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../../useCustomTheme";
 export function MonthDayYearFormat(str) {
-    const digits = (str.match(/\d+/g) || []).join("");
-    const chars = digits.split("");
-    return chars.reduce((prev, curr, index) => {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
         if (index === 2) {
-            return `${prev} / ${curr}`;
+            return "".concat(prev, " / ").concat(curr);
         }
         else if (index === 4) {
-            return `${prev} / ${curr}`;
+            return "".concat(prev, " / ").concat(curr);
         }
         else {
-            return `${prev}${curr}`;
+            return "".concat(prev).concat(curr);
         }
-    }, ``);
+    }, "");
 }
 export function onValidateDate(dateString) {
-    const reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1}|[1-2]{1}\d{1})))\s?\/\s?\d{4}$/g;
+    var reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1}|[1-2]{1}\d{1})))\s?\/\s?\d{4}$/g;
     if (reg.test(dateString)) {
-        const tmpArr = dateString.split("/");
-        const month = parseInt(tmpArr[0].trim(), 10);
-        const day = parseInt(tmpArr[1].trim(), 10);
-        const year = parseInt(tmpArr[2].trim(), 10);
-        const verifyLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+        var tmpArr = dateString.split("/");
+        var month = parseInt(tmpArr[0].trim(), 10);
+        var day = parseInt(tmpArr[1].trim(), 10);
+        var year = parseInt(tmpArr[2].trim(), 10);
+        var verifyLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
         if (month === 2 && !verifyLeapYear) {
             return day < 29;
         }
@@ -35,23 +57,23 @@ export function onValidateDate(dateString) {
     return false;
 }
 function FullDateInput(props) {
-    const { onChange, value, margin = "normal", error, helperText = "Please enter a valid date", onValidate, primaryColor, secondaryColor, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const { valLength, addMask } = useInteractions({ value });
-    const rifm = useRifm({
+    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var rifm = useRifm({
         mask: true,
         value: String(value),
-        onChange,
+        onChange: onChange,
         replace: addMask,
         format: MonthDayYearFormat
     });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { placeholder: "MM / DD / YYYY", error: error ||
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD / YYYY", error: error ||
                 (valLength > 0 &&
                     (onValidate ? !onValidate(value) : !onValidateDate(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
                 (onValidate ? !onValidate(value) : !onValidateDate(value))
                 ? helperText
                 : "", InputLabelProps: {
                 shrink: true
-            }, ...rest }) }));
+            } }, rest)) })));
 }
 export default FullDateInput;

package/DateInput/FullDateInput/useInteractions.js

@@ -1,20 +1,20 @@
 import { useCallback, useMemo } from "react";
 function useInteractions(props) {
-    const { value } = props;
-    const addMask = useCallback((str) => {
-        const digits = (str.match(/\d+/g) || []).join("");
-        const month = digits.slice(0, 2).padEnd(2, "_");
-        const day = digits.slice(2, 4).padEnd(2, "_");
-        const Year = digits.slice(4, 8).padEnd(4, "_");
+    var value = props.value;
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var month = digits.slice(0, 2).padEnd(2, "_");
+        var day = digits.slice(2, 4).padEnd(2, "_");
+        var Year = digits.slice(4, 8).padEnd(4, "_");
         if (digits) {
-            return `${month} / ${day} / ${Year}`;
+            return "".concat(month, " / ").concat(day, " / ").concat(Year);
         }
         return "";
     }, []);
-    const valLength = useMemo(() => {
-        const digitsArr = String(value).match(/\d/g);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength, addMask };
+    return { valLength: valLength, addMask: addMask };
 }
 export default useInteractions;

package/DateInput/MonthDayInput/index.js

@@ -1,3 +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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRifm } from "rifm";
 import TextField from "@mui/material/TextField";
@@ -5,39 +27,39 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../../useCustomTheme";
 export function MonthDayFormat(str) {
-    const digits = (str.match(/\d+/g) || []).join("");
-    const chars = digits.split("");
-    return chars.reduce((prev, curr, index) => {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
         if (index === 2) {
-            return `${prev} / ${curr}`;
+            return "".concat(prev, " / ").concat(curr);
         }
         else {
-            return `${prev}${curr}`;
+            return "".concat(prev).concat(curr);
         }
-    }, ``);
+    }, "");
 }
 export function onValidateMonthDay(monthDayString) {
-    const reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1})|([1-2]{1}\d{1})))$/g;
+    var reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1})|([1-2]{1}\d{1})))$/g;
     return reg.test(monthDayString);
 }
 function MonthDayInput(props) {
-    const { onChange, value, margin = "normal", error, helperText = "Please enter a valid date", onValidate, primaryColor, secondaryColor, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const { valLength, addMask } = useInteractions({ value });
-    const rifm = useRifm({
+    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var rifm = useRifm({
         mask: true,
         value: String(value),
-        onChange,
+        onChange: onChange,
         replace: addMask,
         format: MonthDayFormat
     });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { placeholder: "MM / DD", error: error ||
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD", error: error ||
                 (valLength > 0 &&
                     (onValidate ? !onValidate(value) : !onValidateMonthDay(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
                 (onValidate ? !onValidate(value) : !onValidateMonthDay(value))
                 ? helperText
                 : "", InputLabelProps: {
                 shrink: true
-            }, ...rest }) }));
+            } }, rest)) })));
 }
 export default MonthDayInput;

package/DateInput/MonthDayInput/useInteractions.js

@@ -1,19 +1,19 @@
 import { useCallback, useMemo } from "react";
 function useInteractions(props) {
-    const { value } = props;
-    const addMask = useCallback((str) => {
-        const digits = (str.match(/\d+/g) || []).join("");
-        const month = digits.slice(0, 2).padEnd(2, "_");
-        const day = digits.slice(2, 4).padEnd(2, "_");
+    var value = props.value;
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var month = digits.slice(0, 2).padEnd(2, "_");
+        var day = digits.slice(2, 4).padEnd(2, "_");
         if (digits) {
-            return `${month} / ${day}`;
+            return "".concat(month, " / ").concat(day);
         }
         return "";
     }, []);
-    const valLength = useMemo(() => {
-        const digitsArr = String(value).match(/\d/g);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength, addMask };
+    return { valLength: valLength, addMask: addMask };
 }
 export default useInteractions;

package/DateInput/MonthYearInput/index.js

@@ -1,3 +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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRifm } from "rifm";
 import TextField from "@mui/material/TextField";
@@ -5,40 +27,40 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../../useCustomTheme";
 export function MonthYearFormat(str) {
-    const digits = (str.match(/\d+/g) || []).join("");
-    const chars = digits.split("");
-    return chars.reduce((prev, curr, index) => {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
         if (index === 2) {
-            return `${prev} / ${curr}`;
+            return "".concat(prev, " / ").concat(curr);
         }
         else {
-            return `${prev}${curr}`;
+            return "".concat(prev).concat(curr);
         }
-    }, ``);
+    }, "");
 }
 export function onValidateMonthYear(monthYearString) {
-    const reg = /^(((0[1-9]{1})|(1[0-2]{1}))\s?\/\s?([1-2]{1}\d{3}))$/g;
+    var reg = /^(((0[1-9]{1})|(1[0-2]{1}))\s?\/\s?([1-2]{1}\d{3}))$/g;
     reg.lastIndex = 0;
     return reg.test(monthYearString);
 }
 function MonthYearInput(props) {
-    const { onChange, value, margin = "normal", error, helperText = "Please enter a valid date", onValidate, primaryColor, secondaryColor, ...rest } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const { valLength, addMask } = useInteractions({ value });
-    const rifm = useRifm({
+    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
+    var rifm = useRifm({
         mask: true,
         value: String(value),
-        onChange,
+        onChange: onChange,
         replace: addMask,
         format: MonthYearFormat
     });
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { placeholder: "MM / YYYY", error: error ||
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / YYYY", error: error ||
                 (valLength > 0 &&
                     (onValidate ? !onValidate(value) : !onValidateMonthYear(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
                 (onValidate ? !onValidate(value) : !onValidateMonthYear(value))
                 ? helperText
                 : "", InputLabelProps: {
                 shrink: true
-            }, ...rest }) }));
+            } }, rest)) })));
 }
 export default MonthYearInput;

package/DateInput/MonthYearInput/useInteractions.js

@@ -1,19 +1,19 @@
 import { useCallback, useMemo } from "react";
 function useInteractions(props) {
-    const { value } = props;
-    const addMask = useCallback((str) => {
-        const digits = (str.match(/\d+/g) || []).join("");
-        const month = digits.slice(0, 2).padEnd(2, "_");
-        const Year = digits.slice(2, 6).padEnd(4, "_");
+    var value = props.value;
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var month = digits.slice(0, 2).padEnd(2, "_");
+        var Year = digits.slice(2, 6).padEnd(4, "_");
         if (digits) {
-            return `${month} / ${Year}`;
+            return "".concat(month, " / ").concat(Year);
         }
         return "";
     }, []);
-    const valLength = useMemo(() => {
-        const digitsArr = String(value).match(/\d/g);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
         return digitsArr ? digitsArr.length : 0;
     }, [value]);
-    return { valLength, addMask };
+    return { valLength: valLength, addMask: addMask };
 }
 export default useInteractions;

package/DigitInput/index.js

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

package/DigitInput/useInteractions.js

@@ -1,24 +1,24 @@
 import { useState, useCallback } from "react";
 function useInteractions(props) {
-    const { onChange } = props;
-    const [tooltipOpen, setTooltipOpen] = useState(false);
-    const handleChange = useCallback((event) => {
+    var onChange = props.onChange;
+    var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
+    var handleChange = useCallback(function (event) {
         event.preventDefault();
         if (!event.target.value || /^\d+$/g.test(event.target.value)) {
             onChange(event.target.value);
         }
     }, [onChange]);
-    const onOpenTooltip = useCallback(() => {
+    var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);
     }, []);
-    const onCloseTooltip = useCallback(() => {
+    var onCloseTooltip = useCallback(function () {
         setTooltipOpen(false);
     }, []);
     return {
-        tooltipOpen,
-        handleChange,
-        onOpenTooltip,
-        onCloseTooltip
+        tooltipOpen: tooltipOpen,
+        handleChange: handleChange,
+        onOpenTooltip: onOpenTooltip,
+        onCloseTooltip: onCloseTooltip
     };
 }
 export default useInteractions;

package/DynamicHeaderBar/HeaderBar.js

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

package/DynamicHeaderBar/HeaderButtons.js

@@ -1,3 +1,14 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
 import Fab from "@mui/material/Fab";
 import Grid from "@mui/material/Grid";
@@ -9,30 +20,30 @@ import MenuButtonGroup from "../MenuButtonGroup";
 import { HeaderButtonCategory } from "./types";
 import useCustomTheme from "../useCustomTheme";
 function HeaderButtons(props) {
-    const { buttons, primaryColor, secondaryColor } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Grid, { container: true, spacing: 1, direction: "row", justifyContent: "flex-end", alignItems: "center", children: buttons.map((button) => {
+    var buttons = props.buttons, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
+    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: {
-                        const { variant = "contained", text, onClick, color, size, startIcon, endIcon, disabled } = button;
-                        return (_jsx(Grid, { item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" }, children: _jsx(Button, { fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled, children: text }) }, text));
+                        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 })) }), text));
                     }
                     case HeaderButtonCategory.FabButton: {
-                        const { title, onClick, color, size = "medium", icon, disabled, variant } = button;
-                        return (_jsx(Grid, { item: true, style: { textAlign: "end" }, children: _jsx(Fab, { onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, variant: variant, children: icon }) }, title));
+                        var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon, disabled = button.disabled, variant = button.variant;
+                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, variant: variant }, { children: icon })) }), title));
                     }
                     case HeaderButtonCategory.IconButton: {
-                        const { title, onClick, color, size = "medium", icon, disabled } = button;
-                        return (_jsx(Grid, { item: true, style: { textAlign: "end" }, children: _jsx(IconButton, { onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, children: icon }) }, title));
+                        var title = button.title, onClick = button.onClick, color = button.color, _c = button.size, size = _c === void 0 ? "medium" : _c, icon = button.icon, disabled = button.disabled;
+                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(IconButton, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled }, { children: icon })) }), title));
                     }
                     case HeaderButtonCategory.MenuButton: {
-                        const { buttons: btns, buttonText, disabled, variant, size, color } = button;
-                        return (_jsx(Grid, { item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" }, children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, color: color, buttonText: buttonText, disabled: disabled, primaryColor: primaryColor, secondaryColor: secondaryColor }) }, buttonText));
+                        var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size, color = button.color;
+                        return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, color: color, buttonText: buttonText, disabled: disabled, primaryColor: primaryColor, secondaryColor: secondaryColor }) }), buttonText));
                     }
                     default:
                         return _jsx(_Fragment, {});
                 }
-            }) }) }));
+            }) })) })));
 }
 export default HeaderButtons;

package/DynamicHeaderBar/HeaderLine.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Divider from "@mui/material/Divider";
 import useCustomTheme from "../useCustomTheme";
 function HeaderLine(props) {
-    const { color, primaryColor, secondaryColor } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
+    var color = props.color, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     return (_jsx(Divider, { sx: {
             height: "3px",
             backgroundColor: color || theme.palette.primary.main

package/DynamicHeaderBar/index.js

@@ -1,38 +1,49 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, createContext, useContext, useState, useCallback } from "react";
 import Grid from "@mui/material/Grid";
 import HeaderBar from "./HeaderBar";
-const HeaderContext = createContext({
-    onInit: () => { },
-    onShow: () => { },
-    onHide: () => { }
+var HeaderContext = createContext({
+    onInit: function () { },
+    onShow: function () { },
+    onHide: function () { }
 });
 export function HeaderProvider(props) {
-    const { children, primaryColor, secondaryColor, sx = {} } = props;
-    const [visible, setVisible] = useState(false);
-    const [headerProps, setHeaderProps] = useState({ title: "" });
-    const [height, setHeight] = useState(0);
-    const onInit = useCallback((args) => {
+    var children = props.children, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _a = props.sx, sx = _a === void 0 ? {} : _a;
+    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    var _c = useState({ title: "" }), headerProps = _c[0], setHeaderProps = _c[1];
+    var _d = useState(0), height = _d[0], setHeight = _d[1];
+    var onInit = useCallback(function (args) {
         setHeaderProps(args);
     }, []);
-    const onShow = useCallback(() => {
+    var onShow = useCallback(function () {
         setVisible(true);
     }, []);
-    const onHide = useCallback(() => {
+    var onHide = useCallback(function () {
         setVisible(false);
     }, []);
-    const measureRef = useCallback(node => {
+    var measureRef = useCallback(function (node) {
         if (node && headerProps) {
             setHeight(node.getBoundingClientRect().height);
         }
     }, [headerProps]);
-    return (_jsx(HeaderContext.Provider, { value: { onInit, onHide, onShow }, children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, { container: true, direction: "row", sx: { ...sx }, ref: measureRef, children: _jsx(Grid, { item: true, xs: 12, children: _jsx(HeaderBar, { ...headerProps, primaryColor: primaryColor, secondaryColor: secondaryColor }) }) })) : (_jsx(_Fragment, {})), cloneElement(children, {
+    return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps, { primaryColor: primaryColor, secondaryColor: secondaryColor })) })) }))) : (_jsx(_Fragment, {})), cloneElement(children, {
                     sx: {
                         p: 3,
                         py: 1,
-                        pt: visible && height ? `calc(${height}px)` : undefined
+                        pt: visible && height ? "calc(".concat(height, "px)") : undefined
                     }
-                })] }) }));
+                })] }) })));
 }
 export function useHeaderBar() {
     return useContext(HeaderContext);